initial commit
This commit is contained in:
+955
@@ -0,0 +1,955 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="midnight">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Landing System — Theme Demo</title>
|
||||
|
||||
<!-- Google Fonts: both themes -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800;900&family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@700;800;900&family=Source+Sans+3:wght@400;500;600;700&family=Space+Grotesk:wght@700;800;900&family=IBM+Plex+Mono:wght@400;500;600;700&family=Cormorant+Garamond:wght@600;700;800&family=Nunito:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
|
||||
|
||||
<!-- Base + themes -->
|
||||
<link rel="stylesheet" href="base.css" />
|
||||
<link rel="stylesheet" href="themes/theme-midnight.css" />
|
||||
<link rel="stylesheet" href="themes/theme-linen.css" />
|
||||
<link rel="stylesheet" href="themes/theme-neon.css" />
|
||||
<link rel="stylesheet" href="themes/theme-petal.css" />
|
||||
|
||||
<!-- Components -->
|
||||
<link rel="stylesheet" href="components/header/header.css" />
|
||||
<link rel="stylesheet" href="components/hero/hero.css" />
|
||||
<link rel="stylesheet" href="components/features/features.css" />
|
||||
<link rel="stylesheet" href="components/cta/cta.css" />
|
||||
<link rel="stylesheet" href="components/footer/footer.css" />
|
||||
<link rel="stylesheet" href="components/about/about.css" />
|
||||
<link rel="stylesheet" href="components/faq/faq.css" />
|
||||
<link rel="stylesheet" href="components/testimonials/testimonials.css" />
|
||||
<link rel="stylesheet" href="components/contact/contact.css" />
|
||||
|
||||
<style>
|
||||
/* ── Switcher panel ──────────────────────────────────── */
|
||||
.switcher-panel {
|
||||
position: fixed;
|
||||
bottom: 2rem;
|
||||
right: 2rem;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.switcher-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.switcher-group-label {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.switcher-pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
padding: 0.5rem 0.9rem;
|
||||
border-radius: 99px;
|
||||
border: 1.5px solid var(--color-border);
|
||||
background-color: var(--color-surface);
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
font-family: var(--font-body);
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: var(--color-card-shadow);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.switcher-pill:hover,
|
||||
.switcher-pill.active {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
background-color: var(--color-primary-soft);
|
||||
}
|
||||
|
||||
.switcher-pill.active { pointer-events: none; }
|
||||
|
||||
.theme-dot {
|
||||
width: 9px; height: 9px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.layout-letter {
|
||||
width: 16px; height: 16px;
|
||||
border-radius: 3px;
|
||||
background-color: var(--color-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 800;
|
||||
color: var(--color-text-muted);
|
||||
flex-shrink: 0;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.switcher-pill.active .layout-letter,
|
||||
.switcher-pill:hover .layout-letter {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-btn-text);
|
||||
}
|
||||
|
||||
.theme-pill[data-t="midnight"] .theme-dot { background: #00d4ff; }
|
||||
.theme-pill[data-t="linen"] .theme-dot { background: #c2410c; }
|
||||
.theme-pill[data-t="neon"] .theme-dot { background: #aaff00; }
|
||||
.theme-pill[data-t="petal"] .theme-dot { background: linear-gradient(135deg, #9b5de5, #f72585); }
|
||||
|
||||
/* ── Page-load animation ─────────────────────────────── */
|
||||
@keyframes fade-up {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.hero-content > * {
|
||||
opacity: 0;
|
||||
animation: fade-up 0.6s ease forwards;
|
||||
}
|
||||
.hero-content > *:nth-child(1) { animation-delay: 0.1s; }
|
||||
.hero-content > *:nth-child(2) { animation-delay: 0.2s; }
|
||||
.hero-content > *:nth-child(3) { animation-delay: 0.3s; }
|
||||
.hero-content > *:nth-child(4) { animation-delay: 0.4s; }
|
||||
.hero-content > *:nth-child(5) { animation-delay: 0.5s; }
|
||||
|
||||
.hero-visual {
|
||||
opacity: 0;
|
||||
animation: fade-up 0.7s ease 0.35s forwards;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════
|
||||
HEADER
|
||||
═══════════════════════════════════════════════════ -->
|
||||
<header class="site-header">
|
||||
<div class="container">
|
||||
<div class="header-inner">
|
||||
<a href="#" class="header-logo">
|
||||
<div class="logo-mark">U</div>
|
||||
UI Kit
|
||||
</a>
|
||||
|
||||
<nav class="header-nav">
|
||||
<a href="#features">Features</a>
|
||||
<a href="#pricing">Pricing</a>
|
||||
<a href="#about">About</a>
|
||||
<a href="#blog">Blog</a>
|
||||
</nav>
|
||||
|
||||
<div class="header-actions">
|
||||
<a href="#" class="btn btn-outline">Sign in</a>
|
||||
<a href="#" class="btn btn-primary">Get started</a>
|
||||
</div>
|
||||
|
||||
<button class="mobile-toggle" id="mobileToggle" aria-label="Toggle menu">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu -->
|
||||
<div class="mobile-menu" id="mobileMenu">
|
||||
<a href="#features">Features</a>
|
||||
<a href="#pricing">Pricing</a>
|
||||
<a href="#about">About</a>
|
||||
<a href="#blog">Blog</a>
|
||||
<div class="mobile-menu-actions">
|
||||
<a href="#" class="btn btn-outline">Sign in</a>
|
||||
<a href="#" class="btn btn-primary">Get started</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<hr class="divider" />
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════════
|
||||
HERO
|
||||
═══════════════════════════════════════════════════ -->
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<div class="hero-inner">
|
||||
|
||||
<!-- Left: content -->
|
||||
<div class="hero-content">
|
||||
<div class="hero-badge">
|
||||
<span class="hero-badge-dot"></span>
|
||||
Now in public beta
|
||||
</div>
|
||||
|
||||
<h1 class="hero-title">
|
||||
Your headline<br />
|
||||
goes right <em>here</em><br />
|
||||
like this
|
||||
</h1>
|
||||
|
||||
<p class="hero-subtitle">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim.
|
||||
</p>
|
||||
|
||||
<div class="hero-actions">
|
||||
<a href="#" class="btn btn-primary">
|
||||
Primary action
|
||||
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-outline">Secondary action</a>
|
||||
</div>
|
||||
|
||||
<div class="hero-social-proof">
|
||||
<div class="hero-avatars">
|
||||
<span>AB</span>
|
||||
<span>CD</span>
|
||||
<span>EF</span>
|
||||
<span>GH</span>
|
||||
</div>
|
||||
<p class="hero-proof-text"><strong>2,400+</strong> users already signed up</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: visual -->
|
||||
<div class="hero-visual">
|
||||
<div class="hero-card">
|
||||
<div class="hero-card-header">
|
||||
<span class="hero-card-dot"></span>
|
||||
<span class="hero-card-dot"></span>
|
||||
<span class="hero-card-dot"></span>
|
||||
</div>
|
||||
|
||||
<div class="hero-stat-grid">
|
||||
<div class="hero-stat">
|
||||
<div class="hero-stat-value">98.7%</div>
|
||||
<div class="hero-stat-label">Uptime</div>
|
||||
</div>
|
||||
<div class="hero-stat">
|
||||
<div class="hero-stat-value">4.2ms</div>
|
||||
<div class="hero-stat-label">Response</div>
|
||||
</div>
|
||||
<div class="hero-stat">
|
||||
<div class="hero-stat-value">12k</div>
|
||||
<div class="hero-stat-label">Daily users</div>
|
||||
</div>
|
||||
<div class="hero-stat">
|
||||
<div class="hero-stat-value">+34%</div>
|
||||
<div class="hero-stat-label">Growth</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-chart-bar">
|
||||
<span></span><span></span><span></span>
|
||||
<span></span><span></span><span></span><span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-float-badge">✦ Ships in minutes</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════════
|
||||
FEATURES
|
||||
═══════════════════════════════════════════════════ -->
|
||||
<section class="features" id="features">
|
||||
<div class="container">
|
||||
|
||||
<div class="features-header">
|
||||
<span class="section-label">Features</span>
|
||||
<h2 class="section-title">Everything you need<br />to build great products</h2>
|
||||
<p class="section-subtitle">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="features-grid">
|
||||
|
||||
<!-- 1 -->
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<h3 class="feature-title">Feature Title One</h3>
|
||||
<p class="feature-desc">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua enim.
|
||||
</p>
|
||||
<a href="#" class="feature-link">
|
||||
Learn more
|
||||
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 2 -->
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
|
||||
</div>
|
||||
<h3 class="feature-title">Feature Title Two</h3>
|
||||
<p class="feature-desc">
|
||||
Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi
|
||||
ut aliquip ex ea commodo consequat duis aute irure dolor.
|
||||
</p>
|
||||
<a href="#" class="feature-link">
|
||||
Learn more
|
||||
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 3 -->
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
||||
</div>
|
||||
<h3 class="feature-title">Feature Title Three</h3>
|
||||
<p class="feature-desc">
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat.
|
||||
</p>
|
||||
<a href="#" class="feature-link">
|
||||
Learn more
|
||||
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 4 -->
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/></svg>
|
||||
</div>
|
||||
<h3 class="feature-title">Feature Title Four</h3>
|
||||
<p class="feature-desc">
|
||||
Excepteur sint occaecat cupidatat non proident sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum consectetur adipiscing.
|
||||
</p>
|
||||
<a href="#" class="feature-link">
|
||||
Learn more
|
||||
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 5 -->
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
||||
</div>
|
||||
<h3 class="feature-title">Feature Title Five</h3>
|
||||
<p class="feature-desc">
|
||||
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat duis aute irure dolor in reprehenderit voluptate velit.
|
||||
</p>
|
||||
<a href="#" class="feature-link">
|
||||
Learn more
|
||||
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 6 -->
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
|
||||
</div>
|
||||
<h3 class="feature-title">Feature Title Six</h3>
|
||||
<p class="feature-desc">
|
||||
Voluptate velit esse cillum dolore eu fugiat nulla pariatur sint
|
||||
occaecat cupidatat non proident sunt in culpa qui officia deserunt.
|
||||
</p>
|
||||
<a href="#" class="feature-link">
|
||||
Learn more
|
||||
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════════
|
||||
ABOUT US
|
||||
═══════════════════════════════════════════════════ -->
|
||||
<section class="about" id="about">
|
||||
<div class="container">
|
||||
<div class="about-inner">
|
||||
|
||||
<!-- Left: content -->
|
||||
<div class="about-content">
|
||||
<span class="section-label">About Us</span>
|
||||
<h2 class="section-title">We're building the future of the web</h2>
|
||||
<p class="about-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
|
||||
</p>
|
||||
<p class="about-body">
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
|
||||
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
|
||||
in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<div class="about-tags">
|
||||
<span class="about-tag">Design Systems</span>
|
||||
<span class="about-tag">Open Source</span>
|
||||
<span class="about-tag">Developer Tools</span>
|
||||
<span class="about-tag">UI Components</span>
|
||||
<span class="about-tag">Accessibility</span>
|
||||
</div>
|
||||
<a href="#" class="btn btn-primary">Meet the team</a>
|
||||
</div>
|
||||
|
||||
<!-- Right: stats -->
|
||||
<div class="about-visual">
|
||||
<div class="about-stat-row">
|
||||
<div class="about-stat-card">
|
||||
<div class="about-stat-number">8+</div>
|
||||
<div class="about-stat-label">Years active</div>
|
||||
<div class="about-stat-desc">Lorem ipsum dolor sit amet consectetur.</div>
|
||||
</div>
|
||||
<div class="about-stat-card">
|
||||
<div class="about-stat-number">120k</div>
|
||||
<div class="about-stat-label">Users worldwide</div>
|
||||
<div class="about-stat-desc">Adipiscing elit sed do eiusmod tempor.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about-stat-row">
|
||||
<div class="about-stat-card">
|
||||
<div class="about-stat-number">340+</div>
|
||||
<div class="about-stat-label">Components</div>
|
||||
<div class="about-stat-desc">Incididunt ut labore et dolore magna.</div>
|
||||
</div>
|
||||
<div class="about-stat-card">
|
||||
<div class="about-stat-number">99%</div>
|
||||
<div class="about-stat-label">Satisfaction</div>
|
||||
<div class="about-stat-desc">Quis nostrud exercitation ullamco.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about-team-card">
|
||||
<div class="about-team-avatars">
|
||||
<span>AJ</span>
|
||||
<span>BK</span>
|
||||
<span>CL</span>
|
||||
<span>DM</span>
|
||||
<span>+24</span>
|
||||
</div>
|
||||
<div class="about-team-info">
|
||||
<div class="about-team-title">A team of 28 across 12 countries</div>
|
||||
<div class="about-team-sub">Remote-first since day one</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════════
|
||||
TESTIMONIALS
|
||||
═══════════════════════════════════════════════════ -->
|
||||
<section class="testimonials" id="testimonials">
|
||||
<div class="container">
|
||||
<div class="testimonials-header">
|
||||
<span class="section-label">Testimonials</span>
|
||||
<h2 class="section-title">What our users are saying</h2>
|
||||
<p class="section-subtitle">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="testimonials-grid">
|
||||
|
||||
<!-- Card 1 -->
|
||||
<div class="testimonial-card">
|
||||
<div class="testimonial-stars">
|
||||
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
|
||||
</div>
|
||||
<div class="testimonial-quote-mark">"</div>
|
||||
<p class="testimonial-text">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
|
||||
quis nostrud exercitation ullamco laboris.
|
||||
</p>
|
||||
<div class="testimonial-divider"></div>
|
||||
<div class="testimonial-author">
|
||||
<div class="testimonial-avatar">AJ</div>
|
||||
<div>
|
||||
<div class="testimonial-name">Alex Johnson</div>
|
||||
<div class="testimonial-role">Product Designer, Acme Co.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 2 (featured) -->
|
||||
<div class="testimonial-card is-featured">
|
||||
<div class="testimonial-stars">
|
||||
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
|
||||
</div>
|
||||
<div class="testimonial-quote-mark">"</div>
|
||||
<p class="testimonial-text">
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
|
||||
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident sunt
|
||||
in culpa qui officia deserunt mollit anim id est.
|
||||
</p>
|
||||
<div class="testimonial-divider"></div>
|
||||
<div class="testimonial-author">
|
||||
<div class="testimonial-avatar">BK</div>
|
||||
<div>
|
||||
<div class="testimonial-name">Blake Kim</div>
|
||||
<div class="testimonial-role">Engineering Lead, Startup Inc.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 3 -->
|
||||
<div class="testimonial-card">
|
||||
<div class="testimonial-stars">
|
||||
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
|
||||
</div>
|
||||
<div class="testimonial-quote-mark">"</div>
|
||||
<p class="testimonial-text">
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
|
||||
voluptate velit esse cillum dolore eu fugiat.
|
||||
</p>
|
||||
<div class="testimonial-divider"></div>
|
||||
<div class="testimonial-author">
|
||||
<div class="testimonial-avatar">CL</div>
|
||||
<div>
|
||||
<div class="testimonial-name">Casey Lee</div>
|
||||
<div class="testimonial-role">Founder, Lorem Studio</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════════
|
||||
FAQ
|
||||
═══════════════════════════════════════════════════ -->
|
||||
<section class="faq" id="faq">
|
||||
<div class="container">
|
||||
<div class="faq-inner">
|
||||
|
||||
<!-- Left: heading -->
|
||||
<div class="faq-heading">
|
||||
<span class="section-label">FAQ</span>
|
||||
<h2 class="section-title">Frequently asked questions</h2>
|
||||
<p class="section-subtitle">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod
|
||||
tempor incididunt ut labore et dolore.
|
||||
</p>
|
||||
<p class="faq-contact-nudge">
|
||||
Still have questions? <a href="#contact">Get in touch</a> and we'll
|
||||
get back to you within 24 hours.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Right: accordion -->
|
||||
<div class="faq-list">
|
||||
|
||||
<div class="faq-item is-open">
|
||||
<button class="faq-question">
|
||||
<span class="faq-question-text">What is this product and who is it for?</span>
|
||||
<span class="faq-icon">
|
||||
<svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
</span>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<div class="faq-answer-inner">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<button class="faq-question">
|
||||
<span class="faq-question-text">How do I get started after signing up?</span>
|
||||
<span class="faq-icon">
|
||||
<svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
</span>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<div class="faq-answer-inner">
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
|
||||
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
|
||||
in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<button class="faq-question">
|
||||
<span class="faq-question-text">Is there a free plan available?</span>
|
||||
<span class="faq-icon">
|
||||
<svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
</span>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<div class="faq-answer-inner">
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet consectetur
|
||||
adipiscing elit sed do eiusmod tempor incididunt labore et dolore.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<button class="faq-question">
|
||||
<span class="faq-question-text">Can I cancel my subscription at any time?</span>
|
||||
<span class="faq-icon">
|
||||
<svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
</span>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<div class="faq-answer-inner">
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
|
||||
deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit
|
||||
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<button class="faq-question">
|
||||
<span class="faq-question-text">Do you offer support for enterprise teams?</span>
|
||||
<span class="faq-icon">
|
||||
<svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
</span>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<div class="faq-answer-inner">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip commodo.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<button class="faq-question">
|
||||
<span class="faq-question-text">How is my data stored and kept secure?</span>
|
||||
<span class="faq-icon">
|
||||
<svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
</span>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<div class="faq-answer-inner">
|
||||
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════════
|
||||
CONTACT
|
||||
═══════════════════════════════════════════════════ -->
|
||||
<section class="contact" id="contact">
|
||||
<div class="container">
|
||||
<div class="contact-inner">
|
||||
|
||||
<!-- Left: info -->
|
||||
<div class="contact-info">
|
||||
<span class="section-label">Contact Us</span>
|
||||
<h2 class="section-title">Get in touch with our team</h2>
|
||||
<p class="section-subtitle">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua.
|
||||
</p>
|
||||
|
||||
<div class="contact-details">
|
||||
<div class="contact-detail-item">
|
||||
<div class="contact-detail-icon">
|
||||
<svg viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="contact-detail-label">Email</div>
|
||||
<div class="contact-detail-value"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="036b666f6f6c43667b626e736f662d606c6e">[email protected]</a></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-detail-item">
|
||||
<div class="contact-detail-icon">
|
||||
<svg viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 1.27h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.88a16 16 0 0 0 6 6l.91-.91a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 21.73 16.92z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="contact-detail-label">Phone</div>
|
||||
<div class="contact-detail-value">+1 (555) 000-0000</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-detail-item">
|
||||
<div class="contact-detail-icon">
|
||||
<svg viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="contact-detail-label">Office</div>
|
||||
<div class="contact-detail-value">123 Example Street, City, Country</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: form -->
|
||||
<div class="contact-form-card">
|
||||
<form id="contactForm">
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label class="form-label">First name <span>*</span></label>
|
||||
<input type="text" class="form-input" placeholder="John" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Last name <span>*</span></label>
|
||||
<input type="text" class="form-input" placeholder="Doe" required />
|
||||
</div>
|
||||
<div class="form-group full-width">
|
||||
<label class="form-label">Email address <span>*</span></label>
|
||||
<input type="email" class="form-input" placeholder="john@example.com" required />
|
||||
</div>
|
||||
<div class="form-group full-width">
|
||||
<label class="form-label">Subject</label>
|
||||
<div class="form-select-wrap">
|
||||
<select class="form-input form-select">
|
||||
<option value="">Select a topic</option>
|
||||
<option>General enquiry</option>
|
||||
<option>Sales</option>
|
||||
<option>Support</option>
|
||||
<option>Partnership</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group full-width">
|
||||
<label class="form-label">Message <span>*</span></label>
|
||||
<textarea class="form-textarea" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit..." required></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-submit-row">
|
||||
<p class="form-privacy">
|
||||
By submitting you agree to our <a href="#">Privacy Policy</a> and <a href="#">Terms of Service</a>.
|
||||
</p>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
Send message
|
||||
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="form-success" id="formSuccess">
|
||||
<div class="form-success-icon">
|
||||
<svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
</div>
|
||||
<div class="form-success-title">Message sent!</div>
|
||||
<p class="form-success-text">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. We'll be in
|
||||
touch within 24 hours.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<section class="cta-section">
|
||||
<div class="container">
|
||||
<div class="cta-inner">
|
||||
<span class="cta-label">
|
||||
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
|
||||
Get started today
|
||||
</span>
|
||||
|
||||
<h2 class="cta-title">
|
||||
Ready to get<br /><em>started</em> right now?
|
||||
</h2>
|
||||
|
||||
<p class="cta-subtitle">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua enim ad minim.
|
||||
</p>
|
||||
|
||||
<div class="cta-actions">
|
||||
<a href="#" class="btn btn-primary">
|
||||
Primary action
|
||||
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-outline">Secondary action</a>
|
||||
</div>
|
||||
|
||||
<div class="cta-trust">
|
||||
<span class="cta-trust-item">
|
||||
<svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
Free 14-day trial
|
||||
</span>
|
||||
<span class="cta-divider"></span>
|
||||
<span class="cta-trust-item">
|
||||
<svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
Cancel anytime
|
||||
</span>
|
||||
<span class="cta-divider"></span>
|
||||
<span class="cta-trust-item">
|
||||
<svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
No credit card needed
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════════
|
||||
FOOTER
|
||||
═══════════════════════════════════════════════════ -->
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
|
||||
<!-- Brand -->
|
||||
<div class="footer-brand">
|
||||
<a href="#" class="header-logo">
|
||||
<div class="logo-mark">U</div>
|
||||
UI Kit
|
||||
</a>
|
||||
<p class="footer-tagline">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do
|
||||
eiusmod tempor incididunt ut labore et dolore.
|
||||
</p>
|
||||
<div class="footer-social">
|
||||
<a href="#" aria-label="Twitter/X">
|
||||
<svg viewBox="0 0 24 24"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53A4.48 4.48 0 0 0 22.43.36a9 9 0 0 1-2.83 1.08A4.48 4.48 0 0 0 16.11 0c-2.47 0-4.47 2-4.47 4.47 0 .35.04.7.11 1.03A12.69 12.69 0 0 1 1.64.89a4.48 4.48 0 0 0 1.38 5.97A4.41 4.41 0 0 1 1 6.35v.06c0 2.17 1.54 3.97 3.58 4.38a4.51 4.51 0 0 1-2.02.08c.57 1.78 2.22 3.08 4.18 3.12A8.99 8.99 0 0 1 0 15.54 12.67 12.67 0 0 0 6.86 17.5c8.24 0 12.75-6.83 12.75-12.75l-.01-.58A9.07 9.07 0 0 0 22 2l.03.03z"/></svg>
|
||||
</a>
|
||||
<a href="#" aria-label="GitHub">
|
||||
<svg viewBox="0 0 24 24"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></svg>
|
||||
</a>
|
||||
<a href="#" aria-label="LinkedIn">
|
||||
<svg viewBox="0 0 24 24"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product -->
|
||||
<div class="footer-col">
|
||||
<h4 class="footer-col-title">Product</h4>
|
||||
<ul class="footer-links">
|
||||
<li><a href="#">Features</a></li>
|
||||
<li><a href="#">Pricing</a></li>
|
||||
<li><a href="#">Changelog</a></li>
|
||||
<li><a href="#">Roadmap</a></li>
|
||||
<li><a href="#">Status</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Company -->
|
||||
<div class="footer-col">
|
||||
<h4 class="footer-col-title">Company</h4>
|
||||
<ul class="footer-links">
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Blog</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
<li><a href="#">Press</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Resources -->
|
||||
<div class="footer-col">
|
||||
<h4 class="footer-col-title">Resources</h4>
|
||||
<ul class="footer-links">
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">API Reference</a></li>
|
||||
<li><a href="#">Guides</a></li>
|
||||
<li><a href="#">Community</a></li>
|
||||
<li><a href="#">Support</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Bottom bar -->
|
||||
<div class="footer-bottom">
|
||||
<p class="footer-copy">© 2025 UI Kit Demo. All rights reserved.</p>
|
||||
<nav class="footer-bottom-links">
|
||||
<a href="#">Privacy</a>
|
||||
<a href="#">Terms</a>
|
||||
<a href="#">Cookies</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- ═══ SWITCHER PANEL ═══ -->
|
||||
<div class="switcher-panel">
|
||||
|
||||
<div class="switcher-group">
|
||||
<span class="switcher-group-label">Layout</span>
|
||||
<button class="switcher-pill layout-pill active" data-l="a">
|
||||
<span class="layout-letter">A</span>
|
||||
Split
|
||||
</button>
|
||||
<button class="switcher-pill layout-pill" data-l="b">
|
||||
<span class="layout-letter">B</span>
|
||||
Centered
|
||||
</button>
|
||||
<button class="switcher-pill layout-pill" data-l="c">
|
||||
<span class="layout-letter">C</span>
|
||||
Asymmetric
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="switcher-group">
|
||||
<span class="switcher-group-label">Theme</span>
|
||||
<button class="switcher-pill theme-pill" data-t="midnight">
|
||||
<span class="theme-dot"></span>Midnight
|
||||
</button>
|
||||
<button class="switcher-pill theme-pill" data-t="linen">
|
||||
<span class="theme-dot"></span>Linen
|
||||
</button>
|
||||
<button class="switcher-pill theme-pill" data-t="neon">
|
||||
<span class="theme-dot"></span>Neon
|
||||
</button>
|
||||
<button class="switcher-pill theme-pill" data-t="petal">
|
||||
<span class="theme-dot"></span>Petal
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="layout.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user