initial commit

This commit is contained in:
Azmat Ali
2026-03-26 15:52:12 +05:30
commit dd78914161
37 changed files with 6983 additions and 0 deletions
+955
View File
@@ -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&#160;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>