@webspire/mcp 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/data/registry.json +1097 -2
  2. package/dist/index.js +1 -1
  3. package/dist/registration.js +159 -0
  4. package/dist/types.d.ts +35 -0
  5. package/package.json +2 -2
package/data/registry.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
- "version": "1.1.0",
3
- "generated": "2026-03-20T12:40:11.608Z",
2
+ "version": "1.2.0",
3
+ "generated": "2026-03-21T09:01:46.403Z",
4
4
  "snippets": [
5
5
  {
6
6
  "id": "animations/blur-in",
@@ -24518,5 +24518,1100 @@
24518
24518
  "css": null,
24519
24519
  "js": null
24520
24520
  }
24521
+ ],
24522
+ "templates": [
24523
+ {
24524
+ "id": "agency/corporate",
24525
+ "title": "Agency Corporate",
24526
+ "summary": "Enterprise-grade digital agency website with case studies, structured service grid, process diagram, and corporate authority.",
24527
+ "description": "A polished corporate agency template for enterprise digital consultancies. Numbered service cards, case study metrics, horizontal process flow, and a design language that communicates premium positioning.",
24528
+ "category": "agency",
24529
+ "style": "corporate",
24530
+ "tags": [
24531
+ "agency",
24532
+ "corporate",
24533
+ "digital",
24534
+ "enterprise",
24535
+ "consulting",
24536
+ "professional"
24537
+ ],
24538
+ "patterns": [
24539
+ "navbar/base",
24540
+ "hero/base",
24541
+ "cards/base",
24542
+ "features/base",
24543
+ "steps/base",
24544
+ "cta/base",
24545
+ "footer/base"
24546
+ ],
24547
+ "sections": [
24548
+ "navbar",
24549
+ "hero",
24550
+ "services",
24551
+ "case-studies",
24552
+ "process",
24553
+ "clients",
24554
+ "insights",
24555
+ "cta",
24556
+ "footer"
24557
+ ],
24558
+ "features": {
24559
+ "responsive": true,
24560
+ "darkMode": false,
24561
+ "animations": false,
24562
+ "formHandling": false
24563
+ },
24564
+ "files": {
24565
+ "html": "./corporate.html",
24566
+ "preview": "./corporate.png"
24567
+ },
24568
+ "install": {
24569
+ "copyPasteReady": true,
24570
+ "tailwindCdn": true,
24571
+ "vanillaJs": true,
24572
+ "notes": [
24573
+ "Sharp corners and structured grid convey corporate positioning",
24574
+ "Case study metrics should reflect real results",
24575
+ "Minimal vanilla JS for mobile menu only"
24576
+ ]
24577
+ },
24578
+ "governance": {
24579
+ "status": "published",
24580
+ "quality": "flagship",
24581
+ "owner": "design-system",
24582
+ "updatedAt": "2026-03-20"
24583
+ },
24584
+ "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Apex Digital — Digital Transformation, Delivered</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <style>\n @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');\n body { font-family: 'Inter', sans-serif; }\n .card-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }\n .card-lift:hover { transform: translateY(-4px); box-shadow: 0 12px 24px -8px rgba(0,0,0,0.08); }\n .step-line { position: relative; }\n .step-line::after {\n content: ''; position: absolute; top: 50%; left: 100%; width: 100%;\n height: 1px; background: #c7d2fe; transform: translateY(-50%);\n }\n </style>\n</head>\n<body class=\"bg-white text-neutral-900 antialiased\">\n\n <!-- Navbar -->\n <nav class=\"fixed top-0 inset-x-0 z-50 bg-white/95 backdrop-blur-sm border-b border-neutral-100\" aria-label=\"Main navigation\">\n <div class=\"max-w-7xl mx-auto flex items-center justify-between px-6 py-4\">\n <a href=\"#\" class=\"text-lg font-bold tracking-tight text-neutral-900\">Apex Digital</a>\n <ul class=\"hidden md:flex items-center gap-8 text-sm font-medium text-neutral-500\">\n <li><a href=\"#services\" class=\"hover:text-neutral-900 transition-colors\">Services</a></li>\n <li><a href=\"#work\" class=\"hover:text-neutral-900 transition-colors\">Work</a></li>\n <li><a href=\"#about\" class=\"hover:text-neutral-900 transition-colors\">About</a></li>\n <li><a href=\"#insights\" class=\"hover:text-neutral-900 transition-colors\">Insights</a></li>\n <li><a href=\"#contact\" class=\"hover:text-neutral-900 transition-colors\">Contact</a></li>\n </ul>\n <a href=\"#contact\" class=\"hidden md:inline-flex items-center bg-neutral-900 text-white text-sm font-medium px-5 py-2.5 rounded-sm hover:bg-indigo-600 transition-colors\">\n Start a project\n </a>\n <button id=\"menu-toggle\" class=\"md:hidden p-2 -mr-2\" aria-label=\"Open menu\" aria-expanded=\"false\" aria-controls=\"mobile-menu\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M4 6h16M4 12h16M4 18h16\"/>\n </svg>\n </button>\n </div>\n <div id=\"mobile-menu\" class=\"hidden md:hidden border-t border-neutral-100 bg-white px-6 pb-6 pt-4\">\n <ul class=\"flex flex-col gap-4 text-base font-medium text-neutral-700\">\n <li><a href=\"#services\" class=\"block py-1\">Services</a></li>\n <li><a href=\"#work\" class=\"block py-1\">Work</a></li>\n <li><a href=\"#about\" class=\"block py-1\">About</a></li>\n <li><a href=\"#insights\" class=\"block py-1\">Insights</a></li>\n <li><a href=\"#contact\" class=\"block py-1\">Contact</a></li>\n </ul>\n <a href=\"#contact\" class=\"mt-4 block text-center bg-neutral-900 text-white text-sm font-medium px-5 py-2.5 rounded-sm\">\n Start a project\n </a>\n </div>\n </nav>\n\n <!-- Hero -->\n <header class=\"pt-32 pb-20 md:pt-40 md:pb-28\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <div class=\"max-w-3xl\">\n <h1 class=\"text-4xl sm:text-5xl lg:text-7xl font-extrabold leading-tight tracking-tight text-neutral-900\">\n Digital transformation,<br />delivered.\n </h1>\n <p class=\"mt-6 text-lg md:text-xl text-neutral-500 leading-relaxed max-w-2xl\">\n We partner with enterprise leaders to design, build, and scale digital products and platforms that drive measurable business outcomes.\n </p>\n <a href=\"#contact\" class=\"mt-8 inline-flex items-center bg-indigo-600 text-white text-sm font-semibold px-7 py-3.5 rounded-sm hover:bg-indigo-700 transition-colors\">\n Start a project\n </a>\n </div>\n\n <!-- Stats -->\n <div class=\"mt-20 grid grid-cols-2 md:grid-cols-4 border border-neutral-200\">\n <div class=\"px-6 py-8 border-r border-b md:border-b-0 border-neutral-200\">\n <div class=\"text-3xl md:text-4xl font-extrabold text-neutral-900\">200+</div>\n <div class=\"mt-1 text-sm text-neutral-500\">Projects Delivered</div>\n </div>\n <div class=\"px-6 py-8 border-b md:border-b-0 md:border-r border-neutral-200\">\n <div class=\"text-3xl md:text-4xl font-extrabold text-neutral-900\">F500</div>\n <div class=\"mt-1 text-sm text-neutral-500\">Fortune 500 Clients</div>\n </div>\n <div class=\"px-6 py-8 border-r border-neutral-200\">\n <div class=\"text-3xl md:text-4xl font-extrabold text-neutral-900\">12</div>\n <div class=\"mt-1 text-sm text-neutral-500\">Countries</div>\n </div>\n <div class=\"px-6 py-8\">\n <div class=\"text-3xl md:text-4xl font-extrabold text-neutral-900\">98%</div>\n <div class=\"mt-1 text-sm text-neutral-500\">Client Retention</div>\n </div>\n </div>\n </div>\n </header>\n\n <!-- Services -->\n <section id=\"services\" class=\"py-20 md:py-28 bg-neutral-50\" aria-labelledby=\"services-heading\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <div class=\"max-w-2xl mb-16\">\n <p class=\"text-xs font-semibold text-neutral-400 uppercase tracking-[0.2em]\">What we do</p>\n <h2 id=\"services-heading\" class=\"mt-3 text-3xl md:text-4xl font-extrabold text-neutral-900 tracking-tight\">Capabilities built for complexity.</h2>\n </div>\n <div class=\"grid md:grid-cols-2 gap-0 border border-neutral-200\">\n <!-- Service 01 -->\n <div class=\"p-8 md:p-10 border-b md:border-r border-neutral-200 group\">\n <span class=\"text-xs font-bold text-indigo-600 tracking-widest\">01</span>\n <h3 class=\"mt-4 text-xl font-bold text-neutral-900\">Digital Strategy</h3>\n <p class=\"mt-3 text-sm text-neutral-500 leading-relaxed\">\n Market analysis, competitive positioning, roadmap development, and organizational change management. We define the path before building the product.\n </p>\n </div>\n <!-- Service 02 -->\n <div class=\"p-8 md:p-10 border-b border-neutral-200 group\">\n <span class=\"text-xs font-bold text-indigo-600 tracking-widest\">02</span>\n <h3 class=\"mt-4 text-xl font-bold text-neutral-900\">Experience Design</h3>\n <p class=\"mt-3 text-sm text-neutral-500 leading-relaxed\">\n User research, interaction design, design systems, and prototyping. Interfaces that simplify complexity and increase conversion.\n </p>\n </div>\n <!-- Service 03 -->\n <div class=\"p-8 md:p-10 md:border-r border-b md:border-b-0 border-neutral-200 group\">\n <span class=\"text-xs font-bold text-indigo-600 tracking-widest\">03</span>\n <h3 class=\"mt-4 text-xl font-bold text-neutral-900\">Engineering</h3>\n <p class=\"mt-3 text-sm text-neutral-500 leading-relaxed\">\n Full-stack development, cloud architecture, API design, and platform engineering. Scalable systems built for enterprise-grade reliability.\n </p>\n </div>\n <!-- Service 04 -->\n <div class=\"p-8 md:p-10 group\">\n <span class=\"text-xs font-bold text-indigo-600 tracking-widest\">04</span>\n <h3 class=\"mt-4 text-xl font-bold text-neutral-900\">Data &amp; Analytics</h3>\n <p class=\"mt-3 text-sm text-neutral-500 leading-relaxed\">\n Business intelligence, performance dashboards, A/B testing frameworks, and predictive modeling. Decisions backed by evidence, not assumptions.\n </p>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Case Studies -->\n <section id=\"work\" class=\"py-20 md:py-28\" aria-labelledby=\"work-heading\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <div class=\"flex flex-col sm:flex-row sm:items-end justify-between gap-4 mb-16\">\n <div>\n <p class=\"text-xs font-semibold text-neutral-400 uppercase tracking-[0.2em]\">Selected work</p>\n <h2 id=\"work-heading\" class=\"mt-3 text-3xl md:text-4xl font-extrabold text-neutral-900 tracking-tight\">Results that speak for themselves.</h2>\n </div>\n <a href=\"#\" class=\"text-sm font-medium text-indigo-600 hover:text-indigo-700 transition-colors\">View all case studies</a>\n </div>\n <div class=\"grid md:grid-cols-3 gap-6\">\n <!-- Case Study 1 -->\n <article class=\"card-lift group cursor-pointer\">\n <div class=\"aspect-[4/3] bg-slate-800 relative overflow-hidden rounded-sm\">\n <div class=\"absolute inset-0 bg-gradient-to-br from-slate-700/40 to-transparent\"></div>\n <span class=\"absolute top-4 left-4 text-xs font-semibold text-white/70 uppercase tracking-widest\">Financial Services</span>\n </div>\n <div class=\"mt-5\">\n <h3 class=\"text-lg font-bold text-neutral-900 group-hover:text-indigo-600 transition-colors\">Global Payments Platform</h3>\n <p class=\"mt-1 text-sm text-neutral-500\">End-to-end redesign of a cross-border payment platform serving 14M+ users across EMEA.</p>\n <div class=\"mt-4 flex items-center gap-3\">\n <span class=\"text-xs font-bold text-indigo-600\">42% conversion increase</span>\n <span class=\"w-1 h-1 bg-neutral-300 rounded-full\" aria-hidden=\"true\"></span>\n <span class=\"text-xs text-neutral-400\">NordBank AG</span>\n </div>\n </div>\n </article>\n <!-- Case Study 2 -->\n <article class=\"card-lift group cursor-pointer\">\n <div class=\"aspect-[4/3] bg-neutral-700 relative overflow-hidden rounded-sm\">\n <div class=\"absolute inset-0 bg-gradient-to-br from-neutral-600/40 to-transparent\"></div>\n <span class=\"absolute top-4 left-4 text-xs font-semibold text-white/70 uppercase tracking-widest\">Healthcare</span>\n </div>\n <div class=\"mt-5\">\n <h3 class=\"text-lg font-bold text-neutral-900 group-hover:text-indigo-600 transition-colors\">Patient Experience Portal</h3>\n <p class=\"mt-1 text-sm text-neutral-500\">Unified digital patient journey for a hospital network with 23 facilities and 8,000 staff.</p>\n <div class=\"mt-4 flex items-center gap-3\">\n <span class=\"text-xs font-bold text-indigo-600\">3.2x engagement lift</span>\n <span class=\"w-1 h-1 bg-neutral-300 rounded-full\" aria-hidden=\"true\"></span>\n <span class=\"text-xs text-neutral-400\">Meridian Health</span>\n </div>\n </div>\n </article>\n <!-- Case Study 3 -->\n <article class=\"card-lift group cursor-pointer\">\n <div class=\"aspect-[4/3] bg-zinc-800 relative overflow-hidden rounded-sm\">\n <div class=\"absolute inset-0 bg-gradient-to-br from-zinc-700/40 to-transparent\"></div>\n <span class=\"absolute top-4 left-4 text-xs font-semibold text-white/70 uppercase tracking-widest\">Logistics</span>\n </div>\n <div class=\"mt-5\">\n <h3 class=\"text-lg font-bold text-neutral-900 group-hover:text-indigo-600 transition-colors\">Supply Chain Intelligence</h3>\n <p class=\"mt-1 text-sm text-neutral-500\">Real-time analytics dashboard for a logistics provider managing 2M+ shipments annually.</p>\n <div class=\"mt-4 flex items-center gap-3\">\n <span class=\"text-xs font-bold text-indigo-600\">$18M operational savings</span>\n <span class=\"w-1 h-1 bg-neutral-300 rounded-full\" aria-hidden=\"true\"></span>\n <span class=\"text-xs text-neutral-400\">Vantage Logistics</span>\n </div>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n <!-- Process -->\n <section id=\"about\" class=\"py-20 md:py-28 bg-neutral-50\" aria-labelledby=\"process-heading\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <div class=\"max-w-2xl mb-16\">\n <p class=\"text-xs font-semibold text-neutral-400 uppercase tracking-[0.2em]\">How we work</p>\n <h2 id=\"process-heading\" class=\"mt-3 text-3xl md:text-4xl font-extrabold text-neutral-900 tracking-tight\">A proven framework for complex engagements.</h2>\n </div>\n <div class=\"grid grid-cols-1 md:grid-cols-4 gap-8 md:gap-0\">\n <!-- Step 1 -->\n <div class=\"relative md:pr-8\">\n <div class=\"flex items-center gap-4 md:flex-col md:items-start\">\n <div class=\"w-12 h-12 bg-indigo-600 text-white flex items-center justify-center text-sm font-bold rounded-sm flex-shrink-0\">01</div>\n <div class=\"hidden md:block w-full h-px bg-indigo-200 mt-6 mr-0\"></div>\n </div>\n <h3 class=\"mt-4 text-lg font-bold text-neutral-900\">Discovery</h3>\n <p class=\"mt-2 text-sm text-neutral-500 leading-relaxed\">Stakeholder interviews, audit of existing systems, and definition of success metrics and constraints.</p>\n <div class=\"hidden md:block absolute top-6 left-12 right-0 h-px bg-indigo-200\" aria-hidden=\"true\"></div>\n </div>\n <!-- Step 2 -->\n <div class=\"relative md:pr-8\">\n <div class=\"flex items-center gap-4 md:flex-col md:items-start\">\n <div class=\"w-12 h-12 bg-indigo-600 text-white flex items-center justify-center text-sm font-bold rounded-sm flex-shrink-0\">02</div>\n </div>\n <h3 class=\"mt-4 text-lg font-bold text-neutral-900\">Strategy</h3>\n <p class=\"mt-2 text-sm text-neutral-500 leading-relaxed\">Technical architecture, experience mapping, phased roadmap, and resource planning aligned to business goals.</p>\n <div class=\"hidden md:block absolute top-6 left-12 right-0 h-px bg-indigo-200\" aria-hidden=\"true\"></div>\n </div>\n <!-- Step 3 -->\n <div class=\"relative md:pr-8\">\n <div class=\"flex items-center gap-4 md:flex-col md:items-start\">\n <div class=\"w-12 h-12 bg-indigo-600 text-white flex items-center justify-center text-sm font-bold rounded-sm flex-shrink-0\">03</div>\n </div>\n <h3 class=\"mt-4 text-lg font-bold text-neutral-900\">Execution</h3>\n <p class=\"mt-2 text-sm text-neutral-500 leading-relaxed\">Agile delivery in two-week sprints. Design, engineering, and QA working in parallel with continuous stakeholder review.</p>\n <div class=\"hidden md:block absolute top-6 left-12 right-0 h-px bg-indigo-200\" aria-hidden=\"true\"></div>\n </div>\n <!-- Step 4 -->\n <div class=\"relative\">\n <div class=\"flex items-center gap-4 md:flex-col md:items-start\">\n <div class=\"w-12 h-12 bg-indigo-600 text-white flex items-center justify-center text-sm font-bold rounded-sm flex-shrink-0\">04</div>\n </div>\n <h3 class=\"mt-4 text-lg font-bold text-neutral-900\">Optimization</h3>\n <p class=\"mt-2 text-sm text-neutral-500 leading-relaxed\">Post-launch analytics, performance tuning, A/B testing, and iterative improvement based on real user data.</p>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Clients -->\n <section class=\"py-16 md:py-20 border-b border-neutral-100\" aria-labelledby=\"clients-heading\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <p id=\"clients-heading\" class=\"text-xs font-semibold text-neutral-400 uppercase tracking-[0.2em] text-center mb-12\">Trusted by industry leaders</p>\n <div class=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8 items-center\">\n <div class=\"flex items-center justify-center py-4\">\n <span class=\"text-lg font-bold text-neutral-300 tracking-tight\">NordBank</span>\n </div>\n <div class=\"flex items-center justify-center py-4\">\n <span class=\"text-lg font-bold text-neutral-300 tracking-tight\">Meridian</span>\n </div>\n <div class=\"flex items-center justify-center py-4\">\n <span class=\"text-lg font-bold text-neutral-300 tracking-tight\">Vantage</span>\n </div>\n <div class=\"flex items-center justify-center py-4\">\n <span class=\"text-lg font-bold text-neutral-300 tracking-tight\">Altiora</span>\n </div>\n <div class=\"flex items-center justify-center py-4\">\n <span class=\"text-lg font-bold text-neutral-300 tracking-tight\">Centriq</span>\n </div>\n <div class=\"flex items-center justify-center py-4\">\n <span class=\"text-lg font-bold text-neutral-300 tracking-tight\">Helix Corp</span>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Insights -->\n <section id=\"insights\" class=\"py-20 md:py-28\" aria-labelledby=\"insights-heading\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <div class=\"flex flex-col sm:flex-row sm:items-end justify-between gap-4 mb-16\">\n <div>\n <p class=\"text-xs font-semibold text-neutral-400 uppercase tracking-[0.2em]\">Insights</p>\n <h2 id=\"insights-heading\" class=\"mt-3 text-3xl md:text-4xl font-extrabold text-neutral-900 tracking-tight\">Perspectives on digital.</h2>\n </div>\n <a href=\"#\" class=\"text-sm font-medium text-indigo-600 hover:text-indigo-700 transition-colors\">All articles</a>\n </div>\n <div class=\"grid md:grid-cols-2 gap-8\">\n <!-- Article 1 -->\n <article class=\"card-lift group cursor-pointer border border-neutral-200 rounded-sm overflow-hidden\">\n <div class=\"aspect-[16/9] bg-neutral-100\"></div>\n <div class=\"p-6 md:p-8\">\n <div class=\"flex items-center gap-3 text-xs text-neutral-400\">\n <span class=\"font-semibold text-indigo-600 uppercase tracking-widest\">Strategy</span>\n <span class=\"w-1 h-1 bg-neutral-300 rounded-full\" aria-hidden=\"true\"></span>\n <time datetime=\"2026-03-12\">Mar 12, 2026</time>\n <span class=\"w-1 h-1 bg-neutral-300 rounded-full\" aria-hidden=\"true\"></span>\n <span>8 min read</span>\n </div>\n <h3 class=\"mt-3 text-lg font-bold text-neutral-900 group-hover:text-indigo-600 transition-colors\">Why Most Digital Transformations Fail Before They Start</h3>\n <p class=\"mt-2 text-sm text-neutral-500 leading-relaxed\">The organizational alignment problem that technology alone cannot solve, and the framework we use to address it.</p>\n </div>\n </article>\n <!-- Article 2 -->\n <article class=\"card-lift group cursor-pointer border border-neutral-200 rounded-sm overflow-hidden\">\n <div class=\"aspect-[16/9] bg-neutral-100\"></div>\n <div class=\"p-6 md:p-8\">\n <div class=\"flex items-center gap-3 text-xs text-neutral-400\">\n <span class=\"font-semibold text-indigo-600 uppercase tracking-widest\">Engineering</span>\n <span class=\"w-1 h-1 bg-neutral-300 rounded-full\" aria-hidden=\"true\"></span>\n <time datetime=\"2026-02-28\">Feb 28, 2026</time>\n <span class=\"w-1 h-1 bg-neutral-300 rounded-full\" aria-hidden=\"true\"></span>\n <span>6 min read</span>\n </div>\n <h3 class=\"mt-3 text-lg font-bold text-neutral-900 group-hover:text-indigo-600 transition-colors\">Platform Engineering at Scale: Lessons From 50 Enterprise Migrations</h3>\n <p class=\"mt-2 text-sm text-neutral-500 leading-relaxed\">Patterns, anti-patterns, and the operational maturity model we developed after migrating legacy systems for Fortune 500 clients.</p>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n <!-- CTA -->\n <section id=\"contact\" class=\"bg-neutral-950 py-20 md:py-28\" aria-labelledby=\"cta-heading\">\n <div class=\"max-w-3xl mx-auto px-6 text-center\">\n <h2 id=\"cta-heading\" class=\"text-3xl md:text-5xl font-extrabold text-white tracking-tight\">Ready to transform?</h2>\n <p class=\"mt-4 text-lg text-neutral-400 max-w-xl mx-auto\">Tell us about your challenge. We will respond within one business day with a tailored approach.</p>\n <form class=\"mt-10 flex flex-col sm:flex-row gap-3 max-w-lg mx-auto\" aria-label=\"Contact form\">\n <label for=\"cta-email\" class=\"sr-only\">Email address</label>\n <input type=\"email\" id=\"cta-email\" name=\"email\" required placeholder=\"your@company.com\"\n class=\"flex-1 bg-neutral-800 border border-neutral-700 text-white text-sm px-5 py-3.5 rounded-sm placeholder:text-neutral-500 focus:outline-none focus:border-indigo-500 transition-colors\" />\n <button type=\"submit\" class=\"bg-indigo-600 text-white text-sm font-semibold px-7 py-3.5 rounded-sm hover:bg-indigo-700 transition-colors whitespace-nowrap\">\n Get in touch\n </button>\n </form>\n </div>\n </section>\n\n <!-- Footer -->\n <footer class=\"bg-neutral-950 border-t border-neutral-800 py-16\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <div class=\"grid grid-cols-1 md:grid-cols-4 gap-10\">\n <div>\n <span class=\"text-lg font-bold text-white tracking-tight\">Apex Digital</span>\n <p class=\"mt-3 text-sm text-neutral-500 leading-relaxed\">Enterprise digital transformation consultancy.</p>\n </div>\n <div>\n <h3 class=\"text-xs font-semibold text-neutral-400 uppercase tracking-widest mb-4\">Offices</h3>\n <ul class=\"space-y-2 text-sm text-neutral-500\" role=\"list\">\n <li>New York</li>\n <li>London</li>\n <li>Berlin</li>\n </ul>\n </div>\n <div>\n <h3 class=\"text-xs font-semibold text-neutral-400 uppercase tracking-widest mb-4\">Company</h3>\n <ul class=\"space-y-2 text-sm text-neutral-500\" role=\"list\">\n <li><a href=\"#services\" class=\"hover:text-white transition-colors\">Services</a></li>\n <li><a href=\"#work\" class=\"hover:text-white transition-colors\">Work</a></li>\n <li><a href=\"#about\" class=\"hover:text-white transition-colors\">About</a></li>\n <li><a href=\"#insights\" class=\"hover:text-white transition-colors\">Insights</a></li>\n <li><a href=\"#contact\" class=\"hover:text-white transition-colors\">Contact</a></li>\n </ul>\n </div>\n <div>\n <h3 class=\"text-xs font-semibold text-neutral-400 uppercase tracking-widest mb-4\">Legal</h3>\n <ul class=\"space-y-2 text-sm text-neutral-500\" role=\"list\">\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Privacy Policy</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Terms of Service</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Imprint</a></li>\n </ul>\n </div>\n </div>\n <div class=\"mt-14 pt-8 border-t border-neutral-800 flex flex-col sm:flex-row justify-between items-center gap-4\">\n <p class=\"text-xs text-neutral-600\">&copy; 2026 Apex Digital. All rights reserved.</p>\n <div class=\"flex items-center gap-6\">\n <a href=\"#\" class=\"text-xs text-neutral-600 hover:text-neutral-400 transition-colors\">LinkedIn</a>\n <a href=\"#\" class=\"text-xs text-neutral-600 hover:text-neutral-400 transition-colors\">Twitter / X</a>\n </div>\n </div>\n </div>\n </footer>\n\n <!-- Mobile menu toggle -->\n <script>\n const toggle = document.getElementById('menu-toggle');\n const menu = document.getElementById('mobile-menu');\n toggle.addEventListener('click', () => {\n const open = !menu.classList.contains('hidden');\n menu.classList.toggle('hidden');\n toggle.setAttribute('aria-expanded', String(!open));\n });\n document.querySelectorAll('#mobile-menu a').forEach(link => {\n link.addEventListener('click', () => {\n menu.classList.add('hidden');\n toggle.setAttribute('aria-expanded', 'false');\n });\n });\n </script>\n</body>\n</html>"
24585
+ },
24586
+ {
24587
+ "id": "agency/creative",
24588
+ "title": "Agency Creative",
24589
+ "summary": "Editorial-style creative agency page with oversized typography, portfolio grid, and bold black-white-violet palette.",
24590
+ "description": "A striking agency template with editorial design language. Features oversized headlines, asymmetric portfolio grid with colored placeholders, services list, large testimonial quote, and contact section.",
24591
+ "category": "agency",
24592
+ "style": "creative",
24593
+ "tags": [
24594
+ "agency",
24595
+ "creative",
24596
+ "portfolio",
24597
+ "design-studio",
24598
+ "editorial"
24599
+ ],
24600
+ "patterns": [
24601
+ "navbar/base",
24602
+ "hero/base",
24603
+ "gallery/base",
24604
+ "features/base",
24605
+ "quote/large",
24606
+ "contact/base",
24607
+ "footer/base"
24608
+ ],
24609
+ "sections": [
24610
+ "navbar",
24611
+ "hero",
24612
+ "portfolio",
24613
+ "about",
24614
+ "services",
24615
+ "testimonial",
24616
+ "contact",
24617
+ "footer"
24618
+ ],
24619
+ "features": {
24620
+ "responsive": true,
24621
+ "darkMode": false,
24622
+ "animations": false,
24623
+ "formHandling": false
24624
+ },
24625
+ "files": {
24626
+ "html": "./creative.html",
24627
+ "preview": "./creative.png"
24628
+ },
24629
+ "install": {
24630
+ "copyPasteReady": true,
24631
+ "tailwindCdn": true,
24632
+ "vanillaJs": true,
24633
+ "notes": [
24634
+ "Portfolio items use colored div backgrounds — replace with real images",
24635
+ "Violet accent can be changed to any Tailwind color",
24636
+ "Replace Forma Studio branding with your agency name"
24637
+ ]
24638
+ },
24639
+ "governance": {
24640
+ "status": "published",
24641
+ "quality": "flagship",
24642
+ "owner": "design-system",
24643
+ "updatedAt": "2026-03-20"
24644
+ },
24645
+ "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Forma Studio — Design & Brand Agency</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <style>\n @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');\n body { font-family: 'Inter', sans-serif; }\n .line-reveal { background-size: 0% 2px; background-repeat: no-repeat; background-position: left bottom;\n background-image: linear-gradient(to right, #7c3aed, #7c3aed); transition: background-size 0.4s ease; }\n .line-reveal:hover { background-size: 100% 2px; }\n .card-lift { transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); }\n .card-lift:hover { transform: translateY(-6px); }\n .blend-overlay { mix-blend-mode: difference; }\n </style>\n</head>\n<body class=\"bg-white text-neutral-900 antialiased\">\n\n <!-- Navbar -->\n <nav class=\"fixed top-0 inset-x-0 z-50 bg-white/90 backdrop-blur-sm border-b border-neutral-100\" aria-label=\"Main navigation\">\n <div class=\"max-w-7xl mx-auto flex items-center justify-between px-6 py-4\">\n <a href=\"#\" class=\"text-xl font-extrabold tracking-tight\">Forma<span class=\"text-violet-600\">.</span></a>\n <ul class=\"hidden md:flex items-center gap-8 text-sm font-medium text-neutral-500\">\n <li><a href=\"#work\" class=\"line-reveal pb-1 hover:text-neutral-900 transition-colors\">Work</a></li>\n <li><a href=\"#about\" class=\"line-reveal pb-1 hover:text-neutral-900 transition-colors\">About</a></li>\n <li><a href=\"#services\" class=\"line-reveal pb-1 hover:text-neutral-900 transition-colors\">Services</a></li>\n <li><a href=\"#contact\" class=\"line-reveal pb-1 hover:text-neutral-900 transition-colors\">Contact</a></li>\n </ul>\n <a href=\"#contact\" class=\"hidden md:inline-flex items-center gap-2 bg-neutral-900 text-white text-sm font-medium px-5 py-2.5 rounded-full hover:bg-violet-600 transition-colors\">\n Start a project\n </a>\n <button id=\"menu-toggle\" class=\"md:hidden p-2 -mr-2\" aria-label=\"Open menu\" aria-expanded=\"false\" aria-controls=\"mobile-menu\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M4 6h16M4 12h16M4 18h16\"/>\n </svg>\n </button>\n </div>\n <!-- Mobile menu -->\n <div id=\"mobile-menu\" class=\"hidden md:hidden border-t border-neutral-100 bg-white px-6 pb-6 pt-4\">\n <ul class=\"flex flex-col gap-4 text-base font-medium text-neutral-700\">\n <li><a href=\"#work\" class=\"block py-1\">Work</a></li>\n <li><a href=\"#about\" class=\"block py-1\">About</a></li>\n <li><a href=\"#services\" class=\"block py-1\">Services</a></li>\n <li><a href=\"#contact\" class=\"block py-1\">Contact</a></li>\n </ul>\n <a href=\"#contact\" class=\"mt-4 block text-center bg-neutral-900 text-white text-sm font-medium px-5 py-2.5 rounded-full\">\n Start a project\n </a>\n </div>\n </nav>\n\n <!-- Hero -->\n <header class=\"min-h-screen flex flex-col justify-end px-6 pb-16 pt-32 md:pt-24 max-w-7xl mx-auto\">\n <div class=\"grid md:grid-cols-12 gap-6 items-end\">\n <div class=\"md:col-span-8\">\n <p class=\"text-violet-600 font-medium text-sm tracking-widest uppercase mb-6\">Design & Brand Studio</p>\n <h1 class=\"text-5xl sm:text-7xl lg:text-[6.5rem] font-black leading-[0.9] tracking-tighter text-neutral-900\">\n We craft brands<br/>\n <span class=\"text-neutral-300\">that refuse to</span><br/>\n blend in<span class=\"text-violet-600\">.</span>\n </h1>\n </div>\n <div class=\"md:col-span-4 md:pb-2\">\n <p class=\"text-neutral-500 text-lg leading-relaxed max-w-sm\">\n Forma Studio is a multidisciplinary design agency shaping identities, interfaces, and experiences for ambitious brands.\n </p>\n <a href=\"#work\" class=\"inline-flex items-center gap-2 mt-6 text-sm font-semibold text-neutral-900 hover:text-violet-600 transition-colors group\">\n View selected work\n <svg class=\"w-4 h-4 group-hover:translate-x-1 transition-transform\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17 8l4 4m0 0l-4 4m4-4H3\"/>\n </svg>\n </a>\n </div>\n </div>\n <div class=\"w-full h-px bg-neutral-200 mt-12\"></div>\n </header>\n\n <!-- Work / Portfolio -->\n <section id=\"work\" class=\"px-6 py-24 max-w-7xl mx-auto\" aria-labelledby=\"work-heading\">\n <div class=\"flex flex-col sm:flex-row sm:items-end justify-between gap-4 mb-16\">\n <h2 id=\"work-heading\" class=\"text-4xl md:text-5xl font-extrabold tracking-tight\">Selected work</h2>\n <p class=\"text-neutral-400 text-sm font-medium tracking-widest uppercase\">2023 &mdash; 2026</p>\n </div>\n <div class=\"grid md:grid-cols-2 gap-6\">\n <!-- Project 1 — large -->\n <article class=\"card-lift group cursor-pointer\">\n <div class=\"aspect-[4/3] rounded-2xl bg-violet-600 relative overflow-hidden\">\n <div class=\"absolute inset-0 bg-gradient-to-br from-violet-500/50 to-transparent\"></div>\n <span class=\"absolute top-4 left-4 text-xs font-semibold bg-white/90 text-neutral-900 px-3 py-1 rounded-full\">Brand Identity</span>\n </div>\n <h3 class=\"mt-4 text-lg font-bold group-hover:text-violet-600 transition-colors\">Norde Architects</h3>\n <p class=\"text-neutral-500 text-sm mt-1\">Full rebrand, visual system, and digital presence for a Nordic architecture firm.</p>\n </article>\n <!-- Project 2 — large -->\n <article class=\"card-lift group cursor-pointer\">\n <div class=\"aspect-[4/3] rounded-2xl bg-neutral-900 relative overflow-hidden\">\n <div class=\"absolute inset-0 bg-gradient-to-tr from-neutral-800/60 to-transparent\"></div>\n <span class=\"absolute top-4 left-4 text-xs font-semibold bg-white/90 text-neutral-900 px-3 py-1 rounded-full\">Web Design</span>\n </div>\n <h3 class=\"mt-4 text-lg font-bold group-hover:text-violet-600 transition-colors\">Luminary Health</h3>\n <p class=\"text-neutral-500 text-sm mt-1\">E-commerce platform and packaging design for a wellness startup.</p>\n </article>\n <!-- Project 3 -->\n <article class=\"card-lift group cursor-pointer\">\n <div class=\"aspect-[4/3] rounded-2xl bg-amber-400 relative overflow-hidden\">\n <div class=\"absolute inset-0 bg-gradient-to-bl from-amber-300/40 to-transparent\"></div>\n <span class=\"absolute top-4 left-4 text-xs font-semibold bg-white/90 text-neutral-900 px-3 py-1 rounded-full\">Art Direction</span>\n </div>\n <h3 class=\"mt-4 text-lg font-bold group-hover:text-violet-600 transition-colors\">Sable Magazine</h3>\n <p class=\"text-neutral-500 text-sm mt-1\">Art direction and editorial layout for a culture and fashion quarterly.</p>\n </article>\n <!-- Project 4 -->\n <article class=\"card-lift group cursor-pointer\">\n <div class=\"aspect-[4/3] rounded-2xl bg-emerald-500 relative overflow-hidden\">\n <div class=\"absolute inset-0 bg-gradient-to-br from-emerald-400/40 to-transparent\"></div>\n <span class=\"absolute top-4 left-4 text-xs font-semibold bg-white/90 text-neutral-900 px-3 py-1 rounded-full\">Digital Product</span>\n </div>\n <h3 class=\"mt-4 text-lg font-bold group-hover:text-violet-600 transition-colors\">Kanso Finance</h3>\n <p class=\"text-neutral-500 text-sm mt-1\">Mobile banking app with a calm, human-centered interface.</p>\n </article>\n <!-- Project 5 — wide -->\n <article class=\"md:col-span-2 card-lift group cursor-pointer\">\n <div class=\"aspect-[21/9] rounded-2xl bg-neutral-200 relative overflow-hidden\">\n <div class=\"absolute inset-0 bg-gradient-to-r from-neutral-300/40 to-transparent\"></div>\n <span class=\"absolute top-4 left-4 text-xs font-semibold bg-white/90 text-neutral-900 px-3 py-1 rounded-full\">Campaign</span>\n </div>\n <h3 class=\"mt-4 text-lg font-bold group-hover:text-violet-600 transition-colors\">Parallel Festival 2025</h3>\n <p class=\"text-neutral-500 text-sm mt-1\">Visual identity, campaign materials, and wayfinding for a 3-day design festival in Berlin.</p>\n </article>\n </div>\n </section>\n\n <!-- About -->\n <section id=\"about\" class=\"bg-neutral-950 text-white px-6 py-24\" aria-labelledby=\"about-heading\">\n <div class=\"max-w-7xl mx-auto grid md:grid-cols-12 gap-12 md:gap-16 items-center\">\n <div class=\"md:col-span-5\">\n <div class=\"aspect-[3/4] rounded-2xl bg-neutral-800 relative overflow-hidden\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-neutral-950/60 to-transparent\"></div>\n <div class=\"absolute bottom-6 left-6\">\n <p class=\"text-white/50 text-xs tracking-widest uppercase\">Est. 2019</p>\n <p class=\"text-white text-sm font-medium mt-1\">Berlin &middot; Lisbon</p>\n </div>\n </div>\n </div>\n <div class=\"md:col-span-7\">\n <h2 id=\"about-heading\" class=\"text-4xl md:text-5xl font-extrabold tracking-tight mb-8\">\n Design is how<br/>we think<span class=\"text-violet-400\">.</span>\n </h2>\n <div class=\"space-y-5 text-neutral-400 text-lg leading-relaxed max-w-xl\">\n <p>\n Forma is a team of twelve designers, strategists, and developers who believe great brands\n emerge at the intersection of clarity and courage.\n </p>\n <p>\n We work with founders and creative directors who want to build something that stands on its own\n — not something that follows the last trend deck. Every project starts with strategy and ends\n with craft down to the last pixel.\n </p>\n </div>\n <div class=\"flex gap-12 mt-12\">\n <div>\n <p class=\"text-3xl font-extrabold text-white\">80+</p>\n <p class=\"text-sm text-neutral-500 mt-1\">Projects delivered</p>\n </div>\n <div>\n <p class=\"text-3xl font-extrabold text-white\">12</p>\n <p class=\"text-sm text-neutral-500 mt-1\">Team members</p>\n </div>\n <div>\n <p class=\"text-3xl font-extrabold text-white\">6</p>\n <p class=\"text-sm text-neutral-500 mt-1\">Years in business</p>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Services -->\n <section id=\"services\" class=\"px-6 py-24 max-w-7xl mx-auto\" aria-labelledby=\"services-heading\">\n <div class=\"grid md:grid-cols-12 gap-12\">\n <div class=\"md:col-span-4\">\n <h2 id=\"services-heading\" class=\"text-4xl md:text-5xl font-extrabold tracking-tight sticky top-28\">\n What we<br/>do<span class=\"text-violet-600\">.</span>\n </h2>\n </div>\n <div class=\"md:col-span-8\">\n <ul class=\"divide-y divide-neutral-200\" role=\"list\">\n <li class=\"py-8 group\">\n <div class=\"flex items-start gap-6\">\n <span class=\"flex-shrink-0 w-10 h-10 rounded-full bg-violet-100 text-violet-600 flex items-center justify-center font-bold text-sm\" aria-hidden=\"true\">01</span>\n <div>\n <h3 class=\"text-xl font-bold group-hover:text-violet-600 transition-colors\">Brand Strategy & Identity</h3>\n <p class=\"text-neutral-500 mt-2 leading-relaxed max-w-lg\">Naming, positioning, visual identity systems, brand guidelines. We define who you are before designing how you look.</p>\n </div>\n </div>\n </li>\n <li class=\"py-8 group\">\n <div class=\"flex items-start gap-6\">\n <span class=\"flex-shrink-0 w-10 h-10 rounded-full bg-violet-100 text-violet-600 flex items-center justify-center font-bold text-sm\" aria-hidden=\"true\">02</span>\n <div>\n <h3 class=\"text-xl font-bold group-hover:text-violet-600 transition-colors\">Web & Digital Design</h3>\n <p class=\"text-neutral-500 mt-2 leading-relaxed max-w-lg\">Marketing sites, product interfaces, design systems. Responsive, fast, built to convert and delight.</p>\n </div>\n </div>\n </li>\n <li class=\"py-8 group\">\n <div class=\"flex items-start gap-6\">\n <span class=\"flex-shrink-0 w-10 h-10 rounded-full bg-violet-100 text-violet-600 flex items-center justify-center font-bold text-sm\" aria-hidden=\"true\">03</span>\n <div>\n <h3 class=\"text-xl font-bold group-hover:text-violet-600 transition-colors\">Art Direction & Campaigns</h3>\n <p class=\"text-neutral-500 mt-2 leading-relaxed max-w-lg\">Photo shoots, video direction, campaign concepts. We translate brand strategy into visual storytelling.</p>\n </div>\n </div>\n </li>\n <li class=\"py-8 group\">\n <div class=\"flex items-start gap-6\">\n <span class=\"flex-shrink-0 w-10 h-10 rounded-full bg-violet-100 text-violet-600 flex items-center justify-center font-bold text-sm\" aria-hidden=\"true\">04</span>\n <div>\n <h3 class=\"text-xl font-bold group-hover:text-violet-600 transition-colors\">Motion & Interaction</h3>\n <p class=\"text-neutral-500 mt-2 leading-relaxed max-w-lg\">Micro-interactions, page transitions, animated brand elements. Motion that serves purpose, not decoration.</p>\n </div>\n </div>\n </li>\n <li class=\"py-8 group\">\n <div class=\"flex items-start gap-6\">\n <span class=\"flex-shrink-0 w-10 h-10 rounded-full bg-violet-100 text-violet-600 flex items-center justify-center font-bold text-sm\" aria-hidden=\"true\">05</span>\n <div>\n <h3 class=\"text-xl font-bold group-hover:text-violet-600 transition-colors\">Packaging & Print</h3>\n <p class=\"text-neutral-500 mt-2 leading-relaxed max-w-lg\">Product packaging, editorial design, environmental graphics. Tangible extensions of your digital brand.</p>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </div>\n </section>\n\n <!-- Testimonial -->\n <section class=\"bg-neutral-50 px-6 py-24\" aria-labelledby=\"testimonial-heading\">\n <div class=\"max-w-4xl mx-auto text-center\">\n <h2 id=\"testimonial-heading\" class=\"sr-only\">Client testimonial</h2>\n <svg class=\"w-10 h-10 text-violet-300 mx-auto mb-8\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M4.583 17.321C3.553 16.227 3 15 3 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 01-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179zm10 0C13.553 16.227 13 15 13 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 01-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179z\"/>\n </svg>\n <blockquote>\n <p class=\"text-2xl sm:text-3xl md:text-4xl font-bold leading-snug tracking-tight text-neutral-900\">\n Forma didn't just redesign our brand &mdash; they gave us the confidence to show up differently.\n The work speaks before we do.\n </p>\n </blockquote>\n <figcaption class=\"mt-8\">\n <p class=\"font-semibold text-neutral-900\">Lena Mertens</p>\n <p class=\"text-neutral-500 text-sm mt-1\">Co-founder, Norde Architects</p>\n </figcaption>\n </div>\n </section>\n\n <!-- Contact -->\n <section id=\"contact\" class=\"px-6 py-24 max-w-7xl mx-auto\" aria-labelledby=\"contact-heading\">\n <div class=\"grid md:grid-cols-12 gap-12 md:gap-16\">\n <div class=\"md:col-span-5\">\n <h2 id=\"contact-heading\" class=\"text-4xl md:text-5xl font-extrabold tracking-tight\">\n Let's make<br/>something<span class=\"text-violet-600\">.</span>\n </h2>\n <p class=\"text-neutral-500 text-lg mt-6 leading-relaxed max-w-sm\">\n Have a project in mind? We'd love to hear about it. Drop us a line and we'll get back to you within 24 hours.\n </p>\n <div class=\"mt-8 space-y-3 text-sm text-neutral-500\">\n <p><span class=\"font-medium text-neutral-900\">Email</span><br/>hello@formastudio.de</p>\n <p><span class=\"font-medium text-neutral-900\">Location</span><br/>Berlin, Germany &middot; Lisbon, Portugal</p>\n </div>\n </div>\n <div class=\"md:col-span-7\">\n <form class=\"space-y-6\" aria-label=\"Contact form\">\n <div class=\"grid sm:grid-cols-2 gap-6\">\n <div>\n <label for=\"name\" class=\"block text-sm font-medium text-neutral-700 mb-2\">Name</label>\n <input type=\"text\" id=\"name\" name=\"name\" required\n class=\"w-full border border-neutral-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent transition placeholder:text-neutral-400\"\n placeholder=\"Your name\" />\n </div>\n <div>\n <label for=\"email\" class=\"block text-sm font-medium text-neutral-700 mb-2\">Email</label>\n <input type=\"email\" id=\"email\" name=\"email\" required\n class=\"w-full border border-neutral-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent transition placeholder:text-neutral-400\"\n placeholder=\"you@company.com\" />\n </div>\n </div>\n <div>\n <label for=\"project\" class=\"block text-sm font-medium text-neutral-700 mb-2\">Project type</label>\n <select id=\"project\" name=\"project\"\n class=\"w-full border border-neutral-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent transition text-neutral-700\">\n <option value=\"\" disabled selected>Select a service</option>\n <option>Brand Identity</option>\n <option>Web Design</option>\n <option>Art Direction</option>\n <option>Motion & Interaction</option>\n <option>Packaging & Print</option>\n <option>Something else</option>\n </select>\n </div>\n <div>\n <label for=\"message\" class=\"block text-sm font-medium text-neutral-700 mb-2\">Tell us about your project</label>\n <textarea id=\"message\" name=\"message\" rows=\"5\" required\n class=\"w-full border border-neutral-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent transition placeholder:text-neutral-400 resize-none\"\n placeholder=\"Budget, timeline, goals...\"></textarea>\n </div>\n <button type=\"submit\"\n class=\"bg-neutral-900 text-white font-medium text-sm px-8 py-3 rounded-full hover:bg-violet-600 transition-colors\">\n Send message\n </button>\n </form>\n </div>\n </div>\n </section>\n\n <!-- Footer -->\n <footer class=\"border-t border-neutral-200 px-6 py-12 bg-white\">\n <div class=\"max-w-7xl mx-auto grid sm:grid-cols-2 md:grid-cols-4 gap-8\">\n <div>\n <p class=\"text-xl font-extrabold tracking-tight\">Forma<span class=\"text-violet-600\">.</span></p>\n <p class=\"text-neutral-500 text-sm mt-2 leading-relaxed\">Design studio for brands that want to matter.</p>\n </div>\n <div>\n <h3 class=\"text-sm font-semibold text-neutral-900 mb-3\">Studio</h3>\n <ul class=\"space-y-2 text-sm text-neutral-500\" role=\"list\">\n <li><a href=\"#work\" class=\"hover:text-neutral-900 transition-colors\">Work</a></li>\n <li><a href=\"#about\" class=\"hover:text-neutral-900 transition-colors\">About</a></li>\n <li><a href=\"#services\" class=\"hover:text-neutral-900 transition-colors\">Services</a></li>\n <li><a href=\"#contact\" class=\"hover:text-neutral-900 transition-colors\">Contact</a></li>\n </ul>\n </div>\n <div>\n <h3 class=\"text-sm font-semibold text-neutral-900 mb-3\">Connect</h3>\n <ul class=\"space-y-2 text-sm text-neutral-500\" role=\"list\">\n <li><a href=\"#\" class=\"hover:text-neutral-900 transition-colors\">Instagram</a></li>\n <li><a href=\"#\" class=\"hover:text-neutral-900 transition-colors\">Dribbble</a></li>\n <li><a href=\"#\" class=\"hover:text-neutral-900 transition-colors\">LinkedIn</a></li>\n <li><a href=\"#\" class=\"hover:text-neutral-900 transition-colors\">Twitter / X</a></li>\n </ul>\n </div>\n <div>\n <h3 class=\"text-sm font-semibold text-neutral-900 mb-3\">Legal</h3>\n <ul class=\"space-y-2 text-sm text-neutral-500\" role=\"list\">\n <li><a href=\"#\" class=\"hover:text-neutral-900 transition-colors\">Privacy Policy</a></li>\n <li><a href=\"#\" class=\"hover:text-neutral-900 transition-colors\">Imprint</a></li>\n </ul>\n </div>\n </div>\n <div class=\"max-w-7xl mx-auto mt-12 pt-8 border-t border-neutral-100 flex flex-col sm:flex-row justify-between items-center gap-4\">\n <p class=\"text-xs text-neutral-400\">&copy; 2026 Forma Studio. All rights reserved.</p>\n <p class=\"text-xs text-neutral-400\">Made with intention in Berlin.</p>\n </div>\n </footer>\n\n <!-- Mobile menu toggle -->\n <script>\n const toggle = document.getElementById('menu-toggle');\n const menu = document.getElementById('mobile-menu');\n toggle.addEventListener('click', () => {\n const open = !menu.classList.contains('hidden');\n menu.classList.toggle('hidden');\n toggle.setAttribute('aria-expanded', String(!open));\n });\n // Close menu on link click\n menu.querySelectorAll('a').forEach(link => {\n link.addEventListener('click', () => {\n menu.classList.add('hidden');\n toggle.setAttribute('aria-expanded', 'false');\n });\n });\n </script>\n</body>\n</html>"
24646
+ },
24647
+ {
24648
+ "id": "agency/studio",
24649
+ "title": "Agency Studio",
24650
+ "summary": "Minimalist boutique design studio with full-width project showcases, text-only team section, and intentional whitespace.",
24651
+ "description": "A deliberately restrained studio template for small creative teams. Full-height hero statement, alternating project rows, philosophy-driven approach section, and a contact page that's just an email address. Design says everything.",
24652
+ "category": "agency",
24653
+ "style": "minimal",
24654
+ "tags": [
24655
+ "agency",
24656
+ "studio",
24657
+ "boutique",
24658
+ "minimal",
24659
+ "design",
24660
+ "independent"
24661
+ ],
24662
+ "patterns": [
24663
+ "navbar/base",
24664
+ "hero/minimal",
24665
+ "footer/base"
24666
+ ],
24667
+ "sections": [
24668
+ "navbar",
24669
+ "hero",
24670
+ "work",
24671
+ "studio",
24672
+ "approach",
24673
+ "contact",
24674
+ "footer"
24675
+ ],
24676
+ "features": {
24677
+ "responsive": true,
24678
+ "darkMode": false,
24679
+ "animations": false,
24680
+ "formHandling": false
24681
+ },
24682
+ "files": {
24683
+ "html": "./studio.html",
24684
+ "preview": "./studio.png"
24685
+ },
24686
+ "install": {
24687
+ "copyPasteReady": true,
24688
+ "tailwindCdn": true,
24689
+ "vanillaJs": false,
24690
+ "notes": [
24691
+ "Zero JavaScript — pure HTML and CSS",
24692
+ "Monochrome design — terracotta accent on hover only",
24693
+ "Intentionally lean — less is more"
24694
+ ]
24695
+ },
24696
+ "governance": {
24697
+ "status": "published",
24698
+ "quality": "flagship",
24699
+ "owner": "design-system",
24700
+ "updatedAt": "2026-03-20"
24701
+ },
24702
+ "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Mono Studio</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <style>\n body {\n font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;\n color: #171717;\n background: #fafaf9;\n }\n .serif {\n font-family: Georgia, 'Times New Roman', 'Noto Serif', serif;\n }\n .link-hover {\n text-decoration-line: underline;\n text-decoration-color: transparent;\n text-underline-offset: 4px;\n text-decoration-thickness: 1px;\n transition: text-decoration-color 0.3s ease;\n }\n .link-hover:hover {\n text-decoration-color: currentColor;\n }\n .accent-hover:hover {\n color: #c2410c;\n }\n </style>\n</head>\n<body class=\"antialiased\">\n\n <!-- ===================== -->\n <!-- NAVBAR -->\n <!-- ===================== -->\n <nav class=\"fixed top-0 inset-x-0 z-50\" style=\"background: rgba(250,250,249,0.92); backdrop-filter: blur(8px);\" aria-label=\"Main navigation\">\n <div class=\"max-w-6xl mx-auto flex items-center justify-between px-6 sm:px-8 py-5\">\n <a href=\"#\" class=\"serif text-lg font-bold tracking-tight\">Mono Studio</a>\n <ul class=\"flex items-center gap-6 sm:gap-8 text-sm\" style=\"color: #737373;\">\n <li><a href=\"#work\" class=\"transition-colors hover:text-neutral-900\">Work</a></li>\n <li><a href=\"#studio\" class=\"transition-colors hover:text-neutral-900\">Studio</a></li>\n <li><a href=\"#contact\" class=\"transition-colors accent-hover\">Say Hello</a></li>\n </ul>\n </div>\n </nav>\n\n <!-- ===================== -->\n <!-- HERO -->\n <!-- ===================== -->\n <header class=\"min-h-screen flex flex-col items-center justify-center px-6 relative\">\n <h1 class=\"serif text-4xl sm:text-6xl md:text-7xl lg:text-[5.5rem] font-normal text-center leading-[1.1] tracking-tight max-w-4xl\">\n We design things<br />\n that matter.\n </h1>\n\n <!-- Scroll indicator -->\n <div class=\"absolute bottom-10 left-1/2 -translate-x-1/2\" aria-hidden=\"true\">\n <svg class=\"w-4 h-4 animate-bounce\" style=\"color: #a3a3a3;\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M19 14l-7 7m0 0l-7-7m7 7V3\" />\n </svg>\n </div>\n </header>\n\n <!-- ===================== -->\n <!-- SELECTED WORK -->\n <!-- ===================== -->\n <section id=\"work\" class=\"px-6 sm:px-8 pt-20 pb-24 md:pt-28 md:pb-32 max-w-6xl mx-auto\" aria-labelledby=\"work-heading\">\n <h2 id=\"work-heading\" class=\"text-xs tracking-[0.2em] uppercase mb-20\" style=\"color: #a3a3a3;\">\n Selected Work\n </h2>\n\n <!-- Project 01 — image right -->\n <article class=\"grid grid-cols-1 md:grid-cols-12 gap-6 md:gap-10 items-center mb-4\">\n <div class=\"md:col-span-5 order-2 md:order-1 py-8\">\n <span class=\"text-xs font-mono\" style=\"color: #a3a3a3;\">01</span>\n <h3 class=\"serif text-2xl sm:text-3xl mt-3 mb-1\">\n <a href=\"#\" class=\"link-hover\">Norde Architects</a>\n </h3>\n <p class=\"text-sm mt-3\" style=\"color: #a3a3a3;\">\n <span>Brand Identity</span>\n <span class=\"mx-2\">/</span>\n <span>Norde AG</span>\n <span class=\"mx-2\">/</span>\n <span>2025</span>\n </p>\n </div>\n <div class=\"md:col-span-7 order-1 md:order-2\">\n <div class=\"aspect-[16/10] rounded-sm\" style=\"background-color: #fef3c7;\"></div>\n </div>\n </article>\n\n <div class=\"border-t\" style=\"border-color: #e5e5e5;\"></div>\n\n <!-- Project 02 — image left -->\n <article class=\"grid grid-cols-1 md:grid-cols-12 gap-6 md:gap-10 items-center mb-4\">\n <div class=\"md:col-span-7\">\n <div class=\"aspect-[16/10] rounded-sm\" style=\"background-color: #e5e5e5;\"></div>\n </div>\n <div class=\"md:col-span-5 py-8\">\n <span class=\"text-xs font-mono\" style=\"color: #a3a3a3;\">02</span>\n <h3 class=\"serif text-2xl sm:text-3xl mt-3 mb-1\">\n <a href=\"#\" class=\"link-hover\">Sable Magazine</a>\n </h3>\n <p class=\"text-sm mt-3\" style=\"color: #a3a3a3;\">\n <span>Editorial Design</span>\n <span class=\"mx-2\">/</span>\n <span>Sable Media</span>\n <span class=\"mx-2\">/</span>\n <span>2025</span>\n </p>\n </div>\n </article>\n\n <div class=\"border-t\" style=\"border-color: #e5e5e5;\"></div>\n\n <!-- Project 03 — image right -->\n <article class=\"grid grid-cols-1 md:grid-cols-12 gap-6 md:gap-10 items-center\">\n <div class=\"md:col-span-5 order-2 md:order-1 py-8\">\n <span class=\"text-xs font-mono\" style=\"color: #a3a3a3;\">03</span>\n <h3 class=\"serif text-2xl sm:text-3xl mt-3 mb-1\">\n <a href=\"#\" class=\"link-hover\">Kanso Finance</a>\n </h3>\n <p class=\"text-sm mt-3\" style=\"color: #a3a3a3;\">\n <span>Digital Product</span>\n <span class=\"mx-2\">/</span>\n <span>Kanso GmbH</span>\n <span class=\"mx-2\">/</span>\n <span>2024</span>\n </p>\n </div>\n <div class=\"md:col-span-7 order-1 md:order-2\">\n <div class=\"aspect-[16/10] rounded-sm\" style=\"background-color: #d6d3d1;\"></div>\n </div>\n </article>\n </section>\n\n <!-- ===================== -->\n <!-- STUDIO -->\n <!-- ===================== -->\n <section id=\"studio\" class=\"px-6 sm:px-8 py-24 md:py-32 max-w-6xl mx-auto\" aria-labelledby=\"studio-heading\">\n <h2 id=\"studio-heading\" class=\"text-xs tracking-[0.2em] uppercase mb-20\" style=\"color: #a3a3a3;\">\n Studio\n </h2>\n\n <p class=\"serif text-2xl sm:text-3xl md:text-4xl leading-snug max-w-2xl mb-24\">\n Small team. Big ideas.<br />\n No bullshit.\n </p>\n\n <p class=\"text-base leading-relaxed max-w-xl mb-20\" style=\"color: #525252;\">\n Mono is a design studio of three. We work with founders, studios, and cultural\n institutions who care about craft. We say no more than we say yes, because the work\n only works when we believe in it too.\n </p>\n\n <!-- Team -->\n <div class=\"border-t\" style=\"border-color: #e5e5e5;\">\n\n <div class=\"grid grid-cols-1 sm:grid-cols-3 gap-2 sm:gap-8 py-7 border-b\" style=\"border-color: #e5e5e5;\">\n <p class=\"serif text-lg\">Jonas Seidel</p>\n <p class=\"text-sm\" style=\"color: #a3a3a3;\">Creative Director</p>\n <p class=\"text-sm\" style=\"color: #525252;\">Believes every pixel is a decision.</p>\n </div>\n\n <div class=\"grid grid-cols-1 sm:grid-cols-3 gap-2 sm:gap-8 py-7 border-b\" style=\"border-color: #e5e5e5;\">\n <p class=\"serif text-lg\">Mara Klein</p>\n <p class=\"text-sm\" style=\"color: #a3a3a3;\">Design Lead</p>\n <p class=\"text-sm\" style=\"color: #525252;\">Makes the complex feel effortless.</p>\n </div>\n\n <div class=\"grid grid-cols-1 sm:grid-cols-3 gap-2 sm:gap-8 py-7 border-b\" style=\"border-color: #e5e5e5;\">\n <p class=\"serif text-lg\">Tom Richter</p>\n <p class=\"text-sm\" style=\"color: #a3a3a3;\">Developer</p>\n <p class=\"text-sm\" style=\"color: #525252;\">Turns concepts into things that work.</p>\n </div>\n\n </div>\n </section>\n\n <!-- ===================== -->\n <!-- APPROACH -->\n <!-- ===================== -->\n <section class=\"px-6 sm:px-8 py-24 md:py-32 max-w-6xl mx-auto\" aria-labelledby=\"approach-heading\">\n <h2 id=\"approach-heading\" class=\"text-xs tracking-[0.2em] uppercase mb-20\" style=\"color: #a3a3a3;\">\n Approach\n </h2>\n\n <div class=\"max-w-2xl\">\n\n <!-- Principle 01 -->\n <div class=\"mb-20\">\n <span class=\"text-xs font-mono\" style=\"color: #a3a3a3;\">01</span>\n <h3 class=\"serif text-2xl sm:text-3xl mt-3 mb-5\">Listen first</h3>\n <p class=\"leading-relaxed\" style=\"color: #525252;\">\n We don't start with mockups. We start with questions. Understanding your problem\n is the only way to solve it right. Most of the work happens before we open Figma.\n </p>\n </div>\n\n <!-- Principle 02 -->\n <div class=\"mb-20\">\n <span class=\"text-xs font-mono\" style=\"color: #a3a3a3;\">02</span>\n <h3 class=\"serif text-2xl sm:text-3xl mt-3 mb-5\">Less but better</h3>\n <p class=\"leading-relaxed\" style=\"color: #525252;\">\n Every element earns its place. We remove until only the essential remains.\n Good design is as little design as possible. If it doesn't serve a purpose,\n it doesn't ship.\n </p>\n </div>\n\n <!-- Principle 03 -->\n <div>\n <span class=\"text-xs font-mono\" style=\"color: #a3a3a3;\">03</span>\n <h3 class=\"serif text-2xl sm:text-3xl mt-3 mb-5\">Ship it</h3>\n <p class=\"leading-relaxed\" style=\"color: #525252;\">\n Perfection is a myth we don't subscribe to. We believe in momentum, iteration,\n and getting real work into the world where it can make a difference. Done is\n better than perfect — but done well is better than both.\n </p>\n </div>\n\n </div>\n </section>\n\n <!-- ===================== -->\n <!-- CONTACT -->\n <!-- ===================== -->\n <section id=\"contact\" class=\"px-6 sm:px-8 py-24 md:py-32 max-w-6xl mx-auto\" aria-labelledby=\"contact-heading\">\n <h2 id=\"contact-heading\" class=\"serif text-5xl sm:text-6xl md:text-7xl lg:text-8xl tracking-tight mb-16\">\n Say Hello\n </h2>\n\n <a href=\"mailto:hello@monostudio.de\"\n class=\"serif text-xl sm:text-2xl md:text-3xl link-hover accent-hover transition-colors\">\n hello@monostudio.de\n </a>\n\n <div class=\"flex gap-6 mt-12 text-sm\" style=\"color: #a3a3a3;\">\n <a href=\"#\" class=\"transition-colors accent-hover\">Instagram</a>\n <a href=\"#\" class=\"transition-colors accent-hover\">Dribbble</a>\n </div>\n\n <p class=\"text-sm mt-12\" style=\"color: #a3a3a3;\">Based in Hamburg</p>\n </section>\n\n <!-- ===================== -->\n <!-- FOOTER -->\n <!-- ===================== -->\n <footer class=\"px-6 sm:px-8 py-10 border-t\" style=\"border-color: #e5e5e5;\">\n <p class=\"text-center text-xs\" style=\"color: #a3a3a3;\">&copy; 2026 Mono Studio</p>\n </footer>\n\n</body>\n</html>\n"
24703
+ },
24704
+ {
24705
+ "id": "company/car-dealership",
24706
+ "title": "Company Car Dealership",
24707
+ "summary": "Independent German car dealership with vehicle showcase, service offerings, testimonials, and opening hours — local business with character.",
24708
+ "description": "A website template for independent German car dealerships (Autohäuser). Features vehicle cards with pricing, multi-brand showcase, service grid, Google-review-style testimonials, and prominent contact information with opening hours.",
24709
+ "category": "company",
24710
+ "style": "bold",
24711
+ "tags": [
24712
+ "company",
24713
+ "automotive",
24714
+ "car-dealership",
24715
+ "autohaus",
24716
+ "german",
24717
+ "kmu",
24718
+ "local-business"
24719
+ ],
24720
+ "patterns": [
24721
+ "navbar/base",
24722
+ "hero/dark",
24723
+ "cards/base",
24724
+ "features/base",
24725
+ "testimonials/base",
24726
+ "contact/base",
24727
+ "footer/base"
24728
+ ],
24729
+ "sections": [
24730
+ "navbar",
24731
+ "hero",
24732
+ "vehicles",
24733
+ "brands",
24734
+ "services",
24735
+ "about",
24736
+ "testimonials",
24737
+ "contact",
24738
+ "footer"
24739
+ ],
24740
+ "features": {
24741
+ "responsive": true,
24742
+ "darkMode": false,
24743
+ "animations": false,
24744
+ "formHandling": false
24745
+ },
24746
+ "files": {
24747
+ "html": "./car-dealership.html",
24748
+ "preview": "./car-dealership.png"
24749
+ },
24750
+ "install": {
24751
+ "copyPasteReady": true,
24752
+ "tailwindCdn": true,
24753
+ "vanillaJs": true,
24754
+ "notes": [
24755
+ "Content is in German — adapt for your dealership",
24756
+ "Vehicle cards are static — connect to your inventory system",
24757
+ "Phone number in navbar is a clickable tel: link"
24758
+ ]
24759
+ },
24760
+ "governance": {
24761
+ "status": "published",
24762
+ "quality": "flagship",
24763
+ "owner": "design-system",
24764
+ "updatedAt": "2026-03-20"
24765
+ },
24766
+ "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Autohaus Meyer — Your Car Dealership in Rostock</title>\n <meta name=\"description\" content=\"Autohaus Meyer in Rostock — Used cars, new cars, workshop & service. Your reliable partner for all brands since 1987.\" />\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <style>\n @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');\n body { font-family: 'Inter', sans-serif; }\n </style>\n</head>\n<body class=\"bg-white text-slate-800 antialiased\">\n\n <!-- Navbar -->\n <nav class=\"bg-slate-900 text-white\" aria-label=\"Main navigation\">\n <div class=\"max-w-7xl mx-auto flex items-center justify-between px-6 py-4\">\n <div class=\"flex items-center gap-6\">\n <a href=\"#\" class=\"text-xl font-extrabold tracking-tight\">Autohaus<span class=\"text-red-500\"> Meyer</span></a>\n <a href=\"tel:+493815551234\" class=\"hidden sm:flex items-center gap-1.5 text-sm text-slate-300 hover:text-white transition-colors\" aria-label=\"Call: 0381 555 1234\">\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z\"/></svg>\n 0381 555 1234\n </a>\n </div>\n <ul class=\"hidden md:flex items-center gap-8 text-sm font-medium text-slate-300\">\n <li><a href=\"#fahrzeuge\" class=\"hover:text-white transition-colors\">Vehicles</a></li>\n <li><a href=\"#service\" class=\"hover:text-white transition-colors\">Service</a></li>\n <li><a href=\"#ueber-uns\" class=\"hover:text-white transition-colors\">About Us</a></li>\n <li><a href=\"#kontakt\" class=\"hover:text-white transition-colors\">Contact</a></li>\n </ul>\n <button id=\"menu-toggle\" class=\"md:hidden p-2 -mr-2\" aria-label=\"Open menu\" aria-expanded=\"false\" aria-controls=\"mobile-menu\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16M4 18h16\"/>\n </svg>\n </button>\n </div>\n <!-- Mobile menu -->\n <div id=\"mobile-menu\" class=\"hidden md:hidden border-t border-slate-700 bg-slate-900 px-6 pb-6 pt-4\">\n <ul class=\"flex flex-col gap-4 text-base font-medium text-slate-300\">\n <li><a href=\"#fahrzeuge\" class=\"block py-1 hover:text-white\">Vehicles</a></li>\n <li><a href=\"#service\" class=\"block py-1 hover:text-white\">Service</a></li>\n <li><a href=\"#ueber-uns\" class=\"block py-1 hover:text-white\">About Us</a></li>\n <li><a href=\"#kontakt\" class=\"block py-1 hover:text-white\">Contact</a></li>\n </ul>\n <a href=\"tel:+493815551234\" class=\"mt-4 flex items-center justify-center gap-2 bg-red-600 text-white text-sm font-medium px-5 py-2.5 rounded-lg\">\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z\"/></svg>\n 0381 555 1234\n </a>\n </div>\n </nav>\n\n <!-- Hero -->\n <section class=\"bg-slate-900 text-white\">\n <div class=\"max-w-7xl mx-auto px-6 py-24 md:py-32 text-center\">\n <h1 class=\"text-4xl md:text-6xl font-extrabold tracking-tight leading-tight\">\n Your Car Dealership in Rostock.<br />\n <span class=\"text-red-500\">Since 1987.</span>\n </h1>\n <p class=\"mt-6 text-lg md:text-xl text-slate-300 max-w-2xl mx-auto\">\n Used cars, new cars, workshop — everything from a single source. Personal, fair, and reliable.\n </p>\n <div class=\"mt-10 flex flex-col sm:flex-row items-center justify-center gap-4\">\n <a href=\"#fahrzeuge\" class=\"bg-red-600 hover:bg-red-700 text-white font-semibold px-8 py-4 rounded-lg text-lg transition-colors\">\n Discover Vehicles\n </a>\n <a href=\"#kontakt\" class=\"border-2 border-slate-500 hover:border-white text-slate-300 hover:text-white font-semibold px-8 py-4 rounded-lg text-lg transition-colors\">\n Service Appointment\n </a>\n </div>\n <p class=\"mt-8 text-sm text-slate-400\">Over 3,000 satisfied customers &middot; TÜV-certified workshop &middot; All brands</p>\n </div>\n </section>\n\n <!-- Current Vehicles -->\n <section id=\"fahrzeuge\" class=\"bg-slate-50 py-20\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <div class=\"text-center mb-12\">\n <h2 class=\"text-3xl md:text-4xl font-extrabold text-slate-900\">Current Vehicles</h2>\n <p class=\"mt-3 text-slate-500 text-lg\">Hand-picked used cars — inspected and guaranteed.</p>\n </div>\n <div class=\"grid md:grid-cols-3 gap-8\">\n <!-- Vehicle 1 -->\n <article class=\"bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow\">\n <div class=\"h-52 bg-gradient-to-br from-slate-300 to-slate-400\" role=\"img\" aria-label=\"VW Golf 8 Life in silver\"></div>\n <div class=\"p-6\">\n <div class=\"flex items-start justify-between\">\n <div>\n <h3 class=\"text-lg font-bold text-slate-900\">VW Golf 8 Life</h3>\n <p class=\"text-sm text-slate-500\">Reg. 03/2022 &middot; 34,500 km</p>\n </div>\n <span class=\"text-xl font-extrabold text-red-600\">24,900 €</span>\n </div>\n <div class=\"mt-4 flex items-center gap-4 text-xs text-slate-500\">\n <span class=\"bg-slate-100 px-2.5 py-1 rounded-full\">150 HP</span>\n <span class=\"bg-slate-100 px-2.5 py-1 rounded-full\">Automatic</span>\n <span class=\"bg-slate-100 px-2.5 py-1 rounded-full\">Petrol</span>\n </div>\n <a href=\"#\" class=\"mt-5 block text-center bg-slate-900 hover:bg-red-600 text-white font-medium py-2.5 rounded-lg transition-colors\">\n View Details\n </a>\n </div>\n </article>\n <!-- Vehicle 2 -->\n <article class=\"bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow\">\n <div class=\"h-52 bg-gradient-to-br from-slate-600 to-slate-800\" role=\"img\" aria-label=\"BMW 320d Touring in dark blue\"></div>\n <div class=\"p-6\">\n <div class=\"flex items-start justify-between\">\n <div>\n <h3 class=\"text-lg font-bold text-slate-900\">BMW 320d Touring</h3>\n <p class=\"text-sm text-slate-500\">Reg. 11/2021 &middot; 52,300 km</p>\n </div>\n <span class=\"text-xl font-extrabold text-red-600\">31,500 €</span>\n </div>\n <div class=\"mt-4 flex items-center gap-4 text-xs text-slate-500\">\n <span class=\"bg-slate-100 px-2.5 py-1 rounded-full\">190 HP</span>\n <span class=\"bg-slate-100 px-2.5 py-1 rounded-full\">Automatic</span>\n <span class=\"bg-slate-100 px-2.5 py-1 rounded-full\">Diesel</span>\n </div>\n <a href=\"#\" class=\"mt-5 block text-center bg-slate-900 hover:bg-red-600 text-white font-medium py-2.5 rounded-lg transition-colors\">\n View Details\n </a>\n </div>\n </article>\n <!-- Vehicle 3 -->\n <article class=\"bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow\">\n <div class=\"h-52 bg-gradient-to-br from-gray-100 to-gray-200\" role=\"img\" aria-label=\"Mercedes A-Class in white\"></div>\n <div class=\"p-6\">\n <div class=\"flex items-start justify-between\">\n <div>\n <h3 class=\"text-lg font-bold text-slate-900\">Mercedes A 180</h3>\n <p class=\"text-sm text-slate-500\">Reg. 06/2023 &middot; 18,200 km</p>\n </div>\n <span class=\"text-xl font-extrabold text-red-600\">28,700 €</span>\n </div>\n <div class=\"mt-4 flex items-center gap-4 text-xs text-slate-500\">\n <span class=\"bg-slate-100 px-2.5 py-1 rounded-full\">136 HP</span>\n <span class=\"bg-slate-100 px-2.5 py-1 rounded-full\">Manual</span>\n <span class=\"bg-slate-100 px-2.5 py-1 rounded-full\">Petrol</span>\n </div>\n <a href=\"#\" class=\"mt-5 block text-center bg-slate-900 hover:bg-red-600 text-white font-medium py-2.5 rounded-lg transition-colors\">\n View Details\n </a>\n </div>\n </article>\n </div>\n <div class=\"text-center mt-10\">\n <a href=\"#\" class=\"inline-flex items-center gap-2 text-red-600 hover:text-red-700 font-semibold transition-colors\">\n View all vehicles\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17 8l4 4m0 0l-4 4m4-4H3\"/></svg>\n </a>\n </div>\n </div>\n </section>\n\n <!-- Brands -->\n <section class=\"bg-white py-16 border-y border-slate-100\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <p class=\"text-center text-sm font-medium text-slate-400 uppercase tracking-wider mb-8\">We carry all major brands</p>\n <div class=\"flex flex-wrap items-center justify-center gap-6 md:gap-10\">\n <span class=\"bg-slate-100 text-slate-600 font-bold text-lg px-6 py-3 rounded-lg\">VW</span>\n <span class=\"bg-slate-100 text-slate-600 font-bold text-lg px-6 py-3 rounded-lg\">BMW</span>\n <span class=\"bg-slate-100 text-slate-600 font-bold text-lg px-6 py-3 rounded-lg\">Mercedes</span>\n <span class=\"bg-slate-100 text-slate-600 font-bold text-lg px-6 py-3 rounded-lg\">Audi</span>\n <span class=\"bg-slate-100 text-slate-600 font-bold text-lg px-6 py-3 rounded-lg\">Skoda</span>\n </div>\n </div>\n </section>\n\n <!-- Service -->\n <section id=\"service\" class=\"bg-white py-20\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <div class=\"text-center mb-14\">\n <h2 class=\"text-3xl md:text-4xl font-extrabold text-slate-900\">Workshop & Service</h2>\n <p class=\"mt-3 text-slate-500 text-lg\">Master workshop with state-of-the-art technology — for all makes.</p>\n </div>\n <div class=\"grid sm:grid-cols-2 lg:grid-cols-4 gap-8\">\n <!-- Service 1 -->\n <div class=\"text-center p-6 rounded-xl bg-slate-50\">\n <div class=\"w-14 h-14 mx-auto mb-4 bg-red-100 text-red-600 rounded-xl flex items-center justify-center\">\n <svg class=\"w-7 h-7\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z\"/><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\"/></svg>\n </div>\n <h3 class=\"text-lg font-bold text-slate-900\">Maintenance & Inspection</h3>\n <p class=\"mt-2 text-sm text-slate-500\">Regular inspections per manufacturer specifications. Oil changes, filters, brakes — everything from a single source.</p>\n </div>\n <!-- Service 2 -->\n <div class=\"text-center p-6 rounded-xl bg-slate-50\">\n <div class=\"w-14 h-14 mx-auto mb-4 bg-red-100 text-red-600 rounded-xl flex items-center justify-center\">\n <svg class=\"w-7 h-7\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\"/></svg>\n </div>\n <h3 class=\"text-lg font-bold text-slate-900\">MOT / Emissions Test</h3>\n <p class=\"mt-2 text-sm text-slate-500\">Vehicle inspection and emissions test right at our shop. No waiting time, with pre-check included.</p>\n </div>\n <!-- Service 3 -->\n <div class=\"text-center p-6 rounded-xl bg-slate-50\">\n <div class=\"w-14 h-14 mx-auto mb-4 bg-red-100 text-red-600 rounded-xl flex items-center justify-center\">\n <svg class=\"w-7 h-7\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z\"/></svg>\n </div>\n <h3 class=\"text-lg font-bold text-slate-900\">Accident Repair</h3>\n <p class=\"mt-2 text-sm text-slate-500\">Body work, paint, smart repair. We work with all insurance companies and provide loaner vehicles.</p>\n </div>\n <!-- Service 4 -->\n <div class=\"text-center p-6 rounded-xl bg-slate-50\">\n <div class=\"w-14 h-14 mx-auto mb-4 bg-red-100 text-red-600 rounded-xl flex items-center justify-center\">\n <svg class=\"w-7 h-7\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"/></svg>\n </div>\n <h3 class=\"text-lg font-bold text-slate-900\">Tire Service</h3>\n <p class=\"mt-2 text-sm text-slate-500\">Tire changes, storage, balancing. Summer and winter tires of all brands in stock.</p>\n </div>\n </div>\n </div>\n </section>\n\n <!-- About Us -->\n <section id=\"ueber-uns\" class=\"bg-slate-50 py-20\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <div class=\"grid md:grid-cols-2 gap-12 items-center\">\n <div class=\"bg-gradient-to-br from-slate-200 to-slate-300 rounded-2xl h-80 md:h-96 flex items-center justify-center\" role=\"img\" aria-label=\"Autohaus Meyer team photo\">\n <span class=\"text-slate-400 text-sm font-medium\">Team photo</span>\n </div>\n <div>\n <h2 class=\"text-3xl md:text-4xl font-extrabold text-slate-900\">A Family Business with Heart</h2>\n <p class=\"mt-6 text-slate-600 leading-relaxed\">\n Since 1987, we have been there for our customers in Rostock and the surrounding area. What began as a small workshop is now a modern car dealership with 15 employees — but our values have remained the same.\n </p>\n <p class=\"mt-4 text-slate-600 leading-relaxed\">\n With us, you don't just buy a car. You get honest advice, fair prices, and a partner who is there for you even after the purchase. Every vehicle is inspected by our master mechanics before it goes on sale.\n </p>\n <div class=\"mt-8 flex flex-wrap gap-4\">\n <span class=\"bg-white border border-slate-200 text-slate-700 font-semibold px-5 py-2.5 rounded-lg text-sm\">Honest.</span>\n <span class=\"bg-white border border-slate-200 text-slate-700 font-semibold px-5 py-2.5 rounded-lg text-sm\">Personal.</span>\n <span class=\"bg-white border border-slate-200 text-slate-700 font-semibold px-5 py-2.5 rounded-lg text-sm\">Reliable.</span>\n </div>\n <div class=\"mt-8 grid grid-cols-3 gap-6\">\n <div>\n <p class=\"text-3xl font-extrabold text-red-600\">37</p>\n <p class=\"text-sm text-slate-500 mt-1\">Years of Experience</p>\n </div>\n <div>\n <p class=\"text-3xl font-extrabold text-red-600\">15</p>\n <p class=\"text-sm text-slate-500 mt-1\">Employees</p>\n </div>\n <div>\n <p class=\"text-3xl font-extrabold text-red-600\">3,000+</p>\n <p class=\"text-sm text-slate-500 mt-1\">Satisfied Customers</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Customer Reviews -->\n <section class=\"bg-white py-20\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <div class=\"text-center mb-14\">\n <h2 class=\"text-3xl md:text-4xl font-extrabold text-slate-900\">What Our Customers Say</h2>\n <p class=\"mt-3 text-slate-500 text-lg\">Real reviews from real customers.</p>\n </div>\n <div class=\"grid md:grid-cols-3 gap-8\">\n <!-- Review 1 -->\n <blockquote class=\"bg-slate-50 rounded-xl p-6\">\n <div class=\"flex items-center gap-1 text-amber-400 mb-4\" aria-label=\"5 out of 5 stars\">\n <svg class=\"w-5 h-5 fill-current\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5 fill-current\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5 fill-current\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5 fill-current\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5 fill-current\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n </div>\n <p class=\"text-slate-700 leading-relaxed\">&laquo;First-class service! Mr. Meyer really took his time and found exactly the right car for us. The Golf runs flawlessly.&raquo;</p>\n <footer class=\"mt-5 flex items-center gap-3\">\n <div class=\"w-10 h-10 bg-slate-200 rounded-full flex items-center justify-center text-slate-500 text-sm font-bold\" aria-hidden=\"true\">SK</div>\n <div>\n <p class=\"text-sm font-semibold text-slate-900\">Stefan K.</p>\n <p class=\"text-xs text-slate-400\">VW Golf 8 &middot; March 2025</p>\n </div>\n </footer>\n </blockquote>\n <!-- Review 2 -->\n <blockquote class=\"bg-slate-50 rounded-xl p-6\">\n <div class=\"flex items-center gap-1 text-amber-400 mb-4\" aria-label=\"5 out of 5 stars\">\n <svg class=\"w-5 h-5 fill-current\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5 fill-current\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5 fill-current\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5 fill-current\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5 fill-current\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n </div>\n <p class=\"text-slate-700 leading-relaxed\">&laquo;Fair price, top service! The workshop got my old Passat back in great shape. And without any pushy upselling.&raquo;</p>\n <footer class=\"mt-5 flex items-center gap-3\">\n <div class=\"w-10 h-10 bg-slate-200 rounded-full flex items-center justify-center text-slate-500 text-sm font-bold\" aria-hidden=\"true\">ML</div>\n <div>\n <p class=\"text-sm font-semibold text-slate-900\">Martina L.</p>\n <p class=\"text-xs text-slate-400\">Workshop customer &middot; January 2025</p>\n </div>\n </footer>\n </blockquote>\n <!-- Review 3 -->\n <blockquote class=\"bg-slate-50 rounded-xl p-6\">\n <div class=\"flex items-center gap-1 text-amber-400 mb-4\" aria-label=\"5 out of 5 stars\">\n <svg class=\"w-5 h-5 fill-current\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5 fill-current\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5 fill-current\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5 fill-current\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5 fill-current\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n </div>\n <p class=\"text-slate-700 leading-relaxed\">&laquo;We bought our BMW here and also have it serviced here. The team is super friendly and the prices are transparent.&raquo;</p>\n <footer class=\"mt-5 flex items-center gap-3\">\n <div class=\"w-10 h-10 bg-slate-200 rounded-full flex items-center justify-center text-slate-500 text-sm font-bold\" aria-hidden=\"true\">JH</div>\n <div>\n <p class=\"text-sm font-semibold text-slate-900\">Jens & Heike R.</p>\n <p class=\"text-xs text-slate-400\">BMW 320d Touring &middot; November 2024</p>\n </div>\n </footer>\n </blockquote>\n </div>\n </div>\n </section>\n\n <!-- Contact & Opening Hours -->\n <section id=\"kontakt\" class=\"bg-slate-50 py-20\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <div class=\"text-center mb-14\">\n <h2 class=\"text-3xl md:text-4xl font-extrabold text-slate-900\">Contact & Opening Hours</h2>\n <p class=\"mt-3 text-slate-500 text-lg\">We look forward to your visit.</p>\n </div>\n <div class=\"grid md:grid-cols-2 gap-12\">\n <!-- Contact details -->\n <div>\n <h3 class=\"text-xl font-bold text-slate-900 mb-6\">How to Reach Us</h3>\n <address class=\"not-italic space-y-4 text-slate-600\">\n <div class=\"flex items-start gap-3\">\n <svg class=\"w-5 h-5 mt-0.5 text-red-500 shrink-0\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\"/><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\"/></svg>\n <div>\n <p class=\"font-semibold text-slate-900\">Autohaus Meyer GmbH</p>\n <p>Tessiner Straße 42</p>\n <p>18055 Rostock</p>\n </div>\n </div>\n <div class=\"flex items-center gap-3\">\n <svg class=\"w-5 h-5 text-red-500 shrink-0\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z\"/></svg>\n <a href=\"tel:+493815551234\" class=\"hover:text-red-600 transition-colors\">0381 555 1234</a>\n </div>\n <div class=\"flex items-center gap-3\">\n <svg class=\"w-5 h-5 text-red-500 shrink-0\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"/></svg>\n <a href=\"mailto:info@autohaus-meyer.de\" class=\"hover:text-red-600 transition-colors\">info@autohaus-meyer.de</a>\n </div>\n </address>\n <!-- Map placeholder -->\n <div class=\"mt-8 bg-slate-200 rounded-xl h-48 flex items-center justify-center\" role=\"img\" aria-label=\"Map view of Autohaus Meyer location\">\n <span class=\"text-slate-400 text-sm font-medium\">Google Maps view</span>\n </div>\n </div>\n <!-- Opening Hours -->\n <div>\n <h3 class=\"text-xl font-bold text-slate-900 mb-6\">Opening Hours</h3>\n <table class=\"w-full text-left\" aria-label=\"Autohaus Meyer opening hours\">\n <caption class=\"sr-only\">Autohaus Meyer opening hours by day of the week</caption>\n <thead>\n <tr class=\"border-b border-slate-200\">\n <th scope=\"col\" class=\"py-3 text-sm font-semibold text-slate-500 uppercase tracking-wider\">Day</th>\n <th scope=\"col\" class=\"py-3 text-sm font-semibold text-slate-500 uppercase tracking-wider text-right\">Sales</th>\n <th scope=\"col\" class=\"py-3 text-sm font-semibold text-slate-500 uppercase tracking-wider text-right\">Workshop</th>\n </tr>\n </thead>\n <tbody class=\"divide-y divide-slate-100\">\n <tr>\n <td class=\"py-3 font-medium text-slate-900\">Monday</td>\n <td class=\"py-3 text-slate-600 text-right\">08:00 – 18:00</td>\n <td class=\"py-3 text-slate-600 text-right\">07:30 – 17:00</td>\n </tr>\n <tr>\n <td class=\"py-3 font-medium text-slate-900\">Tuesday</td>\n <td class=\"py-3 text-slate-600 text-right\">08:00 – 18:00</td>\n <td class=\"py-3 text-slate-600 text-right\">07:30 – 17:00</td>\n </tr>\n <tr>\n <td class=\"py-3 font-medium text-slate-900\">Wednesday</td>\n <td class=\"py-3 text-slate-600 text-right\">08:00 – 18:00</td>\n <td class=\"py-3 text-slate-600 text-right\">07:30 – 17:00</td>\n </tr>\n <tr>\n <td class=\"py-3 font-medium text-slate-900\">Thursday</td>\n <td class=\"py-3 text-slate-600 text-right\">08:00 – 18:00</td>\n <td class=\"py-3 text-slate-600 text-right\">07:30 – 17:00</td>\n </tr>\n <tr>\n <td class=\"py-3 font-medium text-slate-900\">Friday</td>\n <td class=\"py-3 text-slate-600 text-right\">08:00 – 18:00</td>\n <td class=\"py-3 text-slate-600 text-right\">07:30 – 17:00</td>\n </tr>\n <tr>\n <td class=\"py-3 font-medium text-slate-900\">Saturday</td>\n <td class=\"py-3 text-slate-600 text-right\">09:00 – 13:00</td>\n <td class=\"py-3 text-slate-400 text-right\">closed</td>\n </tr>\n <tr>\n <td class=\"py-3 font-medium text-slate-900\">Sunday</td>\n <td class=\"py-3 text-slate-400 text-right\">closed</td>\n <td class=\"py-3 text-slate-400 text-right\">closed</td>\n </tr>\n </tbody>\n </table>\n <div class=\"mt-8 bg-red-50 border border-red-100 rounded-xl p-5\">\n <p class=\"text-sm font-semibold text-red-800\">Schedule a Service Appointment</p>\n <p class=\"text-sm text-red-700 mt-1\">Call or write to us — we will find a short-notice appointment for you.</p>\n <a href=\"tel:+493815551234\" class=\"mt-3 inline-flex items-center gap-2 bg-red-600 hover:bg-red-700 text-white text-sm font-medium px-5 py-2.5 rounded-lg transition-colors\">\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z\"/></svg>\n Call now\n </a>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Footer -->\n <footer class=\"bg-slate-900 text-slate-400 py-12\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <div class=\"grid sm:grid-cols-2 md:grid-cols-4 gap-8 mb-10\">\n <div>\n <p class=\"text-white font-extrabold text-lg\">Autohaus<span class=\"text-red-500\"> Meyer</span></p>\n <p class=\"mt-3 text-sm leading-relaxed\">Your independent car dealership in Rostock. Quality, trust, and personal service since 1987.</p>\n </div>\n <div>\n <p class=\"text-white font-semibold text-sm uppercase tracking-wider mb-4\">Vehicles</p>\n <ul class=\"space-y-2 text-sm\">\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Used Cars</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">New Cars</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Nearly-New Cars</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Financing</a></li>\n </ul>\n </div>\n <div>\n <p class=\"text-white font-semibold text-sm uppercase tracking-wider mb-4\">Service</p>\n <ul class=\"space-y-2 text-sm\">\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Workshop</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">MOT / Emissions</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Tire Service</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Accident Repair</a></li>\n </ul>\n </div>\n <div>\n <p class=\"text-white font-semibold text-sm uppercase tracking-wider mb-4\">Legal</p>\n <ul class=\"space-y-2 text-sm\">\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Legal Notice</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Privacy Policy</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Terms & Conditions</a></li>\n </ul>\n </div>\n </div>\n <div class=\"border-t border-slate-800 pt-6 flex flex-col sm:flex-row items-center justify-between gap-4 text-sm\">\n <p>&copy; 2025 Autohaus Meyer GmbH. All rights reserved.</p>\n <p class=\"text-slate-500\">Tessiner Str. 42 &middot; 18055 Rostock &middot; 0381 555 1234</p>\n </div>\n </div>\n </footer>\n\n <!-- Mobile menu script -->\n <script>\n const toggle = document.getElementById('menu-toggle');\n const menu = document.getElementById('mobile-menu');\n toggle.addEventListener('click', () => {\n const open = !menu.classList.contains('hidden');\n menu.classList.toggle('hidden');\n toggle.setAttribute('aria-expanded', String(!open));\n toggle.setAttribute('aria-label', open ? 'Open menu' : 'Close menu');\n });\n // Close mobile menu on link click\n menu.querySelectorAll('a').forEach(link => {\n link.addEventListener('click', () => {\n menu.classList.add('hidden');\n toggle.setAttribute('aria-expanded', 'false');\n toggle.setAttribute('aria-label', 'Open menu');\n });\n });\n </script>\n\n</body>\n</html>"
24767
+ },
24768
+ {
24769
+ "id": "company/engineering",
24770
+ "title": "Company Engineering",
24771
+ "summary": "Professional German engineering firm website with project portfolio, competency showcase, career section, and corporate authority.",
24772
+ "description": "A corporate website template for German engineering and planning firms (Ingenieurbüros). Features competency grid, reference projects with location tags, career listings, and a design language that conveys technical precision and reliability.",
24773
+ "category": "company",
24774
+ "style": "corporate",
24775
+ "tags": [
24776
+ "company",
24777
+ "engineering",
24778
+ "corporate",
24779
+ "german",
24780
+ "kmu",
24781
+ "ingenieurbüro",
24782
+ "planning"
24783
+ ],
24784
+ "patterns": [
24785
+ "navbar/base",
24786
+ "hero/base",
24787
+ "cards/base",
24788
+ "features/base",
24789
+ "contact/base",
24790
+ "footer/base"
24791
+ ],
24792
+ "sections": [
24793
+ "navbar",
24794
+ "hero",
24795
+ "competencies",
24796
+ "projects",
24797
+ "about",
24798
+ "career",
24799
+ "contact",
24800
+ "footer"
24801
+ ],
24802
+ "features": {
24803
+ "responsive": true,
24804
+ "darkMode": false,
24805
+ "animations": false,
24806
+ "formHandling": false
24807
+ },
24808
+ "files": {
24809
+ "html": "./engineering.html",
24810
+ "preview": "./engineering.png"
24811
+ },
24812
+ "install": {
24813
+ "copyPasteReady": true,
24814
+ "tailwindCdn": true,
24815
+ "vanillaJs": true,
24816
+ "notes": [
24817
+ "Content is in German — adapt for your firm",
24818
+ "Replace project placeholders with real project images",
24819
+ "Career listings are static — connect to your HR system"
24820
+ ]
24821
+ },
24822
+ "governance": {
24823
+ "status": "published",
24824
+ "quality": "flagship",
24825
+ "owner": "design-system",
24826
+ "updatedAt": "2026-03-20"
24827
+ },
24828
+ "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Brückner + Partner — Engineers &amp; Planners</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <style>\n @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');\n body { font-family: 'Inter', sans-serif; }\n .stat-divider:not(:last-child)::after {\n content: ''; position: absolute; right: 0; top: 15%; height: 70%;\n width: 1px; background: rgba(100, 116, 139, 0.2);\n }\n </style>\n</head>\n<body class=\"bg-white text-slate-800 antialiased\">\n\n <!-- Navbar -->\n <nav class=\"fixed top-0 inset-x-0 z-50 bg-white/95 backdrop-blur-sm border-b border-slate-100\" aria-label=\"Main navigation\">\n <div class=\"max-w-7xl mx-auto flex items-center justify-between px-6 py-4\">\n <a href=\"#\" class=\"flex items-center gap-3\">\n <div class=\"w-8 h-8 bg-slate-700 rounded-sm flex items-center justify-center\">\n <span class=\"text-white text-xs font-bold leading-none\">B+P</span>\n </div>\n <span class=\"text-lg font-semibold tracking-tight text-slate-900\">Brückner + Partner</span>\n </a>\n <ul class=\"hidden lg:flex items-center gap-8 text-sm font-medium text-slate-500\">\n <li><a href=\"#unternehmen\" class=\"hover:text-slate-900 transition-colors\">About Us</a></li>\n <li><a href=\"#kompetenzen\" class=\"hover:text-slate-900 transition-colors\">Expertise</a></li>\n <li><a href=\"#projekte\" class=\"hover:text-slate-900 transition-colors\">Projects</a></li>\n <li><a href=\"#karriere\" class=\"hover:text-slate-900 transition-colors\">Careers</a></li>\n <li><a href=\"#kontakt\" class=\"hover:text-slate-900 transition-colors\">Contact</a></li>\n </ul>\n <div class=\"hidden lg:flex items-center gap-4\">\n <span class=\"text-xs font-medium text-slate-400 hover:text-slate-600 cursor-pointer transition-colors\">DE</span>\n <span class=\"text-xs font-semibold text-slate-900 border-b border-slate-900 pb-0.5\">EN</span>\n </div>\n <button id=\"menu-toggle\" class=\"lg:hidden p-2 -mr-2\" aria-label=\"Open menu\" aria-expanded=\"false\" aria-controls=\"mobile-menu\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M4 6h16M4 12h16M4 18h16\"/>\n </svg>\n </button>\n </div>\n <div id=\"mobile-menu\" class=\"hidden lg:hidden border-t border-slate-100 bg-white px-6 pb-6 pt-4\">\n <ul class=\"flex flex-col gap-4 text-base font-medium text-slate-700\">\n <li><a href=\"#unternehmen\" class=\"block py-1\">About Us</a></li>\n <li><a href=\"#kompetenzen\" class=\"block py-1\">Expertise</a></li>\n <li><a href=\"#projekte\" class=\"block py-1\">Projects</a></li>\n <li><a href=\"#karriere\" class=\"block py-1\">Careers</a></li>\n <li><a href=\"#kontakt\" class=\"block py-1\">Contact</a></li>\n </ul>\n <div class=\"mt-4 flex gap-4\">\n <span class=\"text-sm font-medium text-slate-400\">DE</span>\n <span class=\"text-sm font-semibold text-slate-900 border-b border-slate-900 pb-0.5\">EN</span>\n </div>\n </div>\n </nav>\n\n <!-- Hero -->\n <section class=\"pt-28 pb-16 md:pt-36 md:pb-24 bg-slate-50\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <div class=\"max-w-3xl\">\n <h1 class=\"text-4xl md:text-5xl lg:text-6xl font-bold text-slate-900 leading-tight tracking-tight\">\n Infrastructure.<br />Planning.<br />Future.\n </h1>\n <p class=\"mt-6 text-lg md:text-xl text-slate-500 leading-relaxed max-w-2xl\">\n We plan infrastructure that connects generations. As an independent engineering firm, we develop sustainable solutions for structural and civil engineering, water management, and the energy transition.\n </p>\n <div class=\"mt-8 flex flex-wrap gap-4\">\n <a href=\"#projekte\" class=\"inline-flex items-center bg-slate-800 text-white text-sm font-medium px-6 py-3 rounded hover:bg-slate-700 transition-colors\">\n Our Projects\n </a>\n <a href=\"#kontakt\" class=\"inline-flex items-center border border-slate-300 text-slate-700 text-sm font-medium px-6 py-3 rounded hover:border-slate-400 hover:text-slate-900 transition-colors\">\n Get in Touch\n </a>\n </div>\n </div>\n </div>\n\n <!-- Stats bar -->\n <div class=\"max-w-7xl mx-auto px-6 mt-16\">\n <div class=\"bg-white border border-slate-200 rounded-lg grid grid-cols-2 md:grid-cols-4\">\n <div class=\"relative px-6 py-8 text-center stat-divider\">\n <div class=\"text-3xl md:text-4xl font-bold text-slate-900\">45</div>\n <div class=\"mt-1 text-sm text-slate-500\">Years of Experience</div>\n </div>\n <div class=\"relative px-6 py-8 text-center stat-divider\">\n <div class=\"text-3xl md:text-4xl font-bold text-slate-900\">180</div>\n <div class=\"mt-1 text-sm text-slate-500\">Employees</div>\n </div>\n <div class=\"relative px-6 py-8 text-center stat-divider\">\n <div class=\"text-3xl md:text-4xl font-bold text-slate-900\">2,400+</div>\n <div class=\"mt-1 text-sm text-slate-500\">Projects</div>\n </div>\n <div class=\"relative px-6 py-8 text-center stat-divider\">\n <div class=\"text-3xl md:text-4xl font-bold text-slate-900\">12</div>\n <div class=\"mt-1 text-sm text-slate-500\">Offices</div>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Expertise -->\n <section id=\"kompetenzen\" class=\"py-20 md:py-28\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <div class=\"max-w-2xl\">\n <p class=\"text-sm font-semibold text-slate-400 uppercase tracking-widest\">Expertise</p>\n <h2 class=\"mt-3 text-3xl md:text-4xl font-bold text-slate-900 tracking-tight\">Range of Services</h2>\n <p class=\"mt-4 text-lg text-slate-500\">Interdisciplinary engineering services from a single source — from the initial study to construction supervision.</p>\n </div>\n <div class=\"mt-14 grid md:grid-cols-2 lg:grid-cols-3 gap-6\">\n <!-- Card 1 -->\n <div class=\"group border border-slate-200 rounded-lg p-8 hover:border-slate-300 transition-colors\">\n <div class=\"w-12 h-12 bg-slate-100 rounded-lg flex items-center justify-center text-slate-600 group-hover:bg-slate-800 group-hover:text-white transition-colors\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M2 22h20M6 18V10m4 8V6m4 12V8m4 10V4\"/>\n </svg>\n </div>\n <h3 class=\"mt-5 text-lg font-semibold text-slate-900\">Structural Engineering</h3>\n <p class=\"mt-2 text-sm text-slate-500 leading-relaxed\">Design and detailed planning for administrative, educational, and healthcare buildings. From feasibility study to commissioning.</p>\n </div>\n <!-- Card 2 -->\n <div class=\"group border border-slate-200 rounded-lg p-8 hover:border-slate-300 transition-colors\">\n <div class=\"w-12 h-12 bg-slate-100 rounded-lg flex items-center justify-center text-slate-600 group-hover:bg-slate-800 group-hover:text-white transition-colors\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M3 21h18M3 21V8l4-4h10l4 4v13M9 21v-6h6v6\"/>\n </svg>\n </div>\n <h3 class=\"mt-5 text-lg font-semibold text-slate-900\">Civil Engineering</h3>\n <p class=\"mt-2 text-sm text-slate-500 leading-relaxed\">Road, bridge, and tunnel construction. Geotechnical assessments, structural planning, and ground investigations for public infrastructure.</p>\n </div>\n <!-- Card 3 -->\n <div class=\"group border border-slate-200 rounded-lg p-8 hover:border-slate-300 transition-colors\">\n <div class=\"w-12 h-12 bg-slate-100 rounded-lg flex items-center justify-center text-slate-600 group-hover:bg-slate-800 group-hover:text-white transition-colors\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M12 3v18m-6-6c0 3.3 2.7 6 6 6s6-2.7 6-6c0-4-3-7-6-12-3 5-6 8-6 12z\"/>\n </svg>\n </div>\n <h3 class=\"mt-5 text-lg font-semibold text-slate-900\">Water Management</h3>\n <p class=\"mt-2 text-sm text-slate-500 leading-relaxed\">Flood protection, sewer planning, and drinking water supply. Hydraulic modeling and ecological water body development.</p>\n </div>\n <!-- Card 4 -->\n <div class=\"group border border-slate-200 rounded-lg p-8 hover:border-slate-300 transition-colors\">\n <div class=\"w-12 h-12 bg-slate-100 rounded-lg flex items-center justify-center text-slate-600 group-hover:bg-slate-800 group-hover:text-white transition-colors\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M13 10V3L4 14h7v7l9-11h-7z\"/>\n </svg>\n </div>\n <h3 class=\"mt-5 text-lg font-semibold text-slate-900\">Energy Planning</h3>\n <p class=\"mt-2 text-sm text-slate-500 leading-relaxed\">Building services engineering, heating and cooling concepts, photovoltaic planning, and energy-efficient district development.</p>\n </div>\n <!-- Card 5 -->\n <div class=\"group border border-slate-200 rounded-lg p-8 hover:border-slate-300 transition-colors\">\n <div class=\"w-12 h-12 bg-slate-100 rounded-lg flex items-center justify-center text-slate-600 group-hover:bg-slate-800 group-hover:text-white transition-colors\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l5.447 2.724A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7\"/>\n </svg>\n </div>\n <h3 class=\"mt-5 text-lg font-semibold text-slate-900\">Transport Planning</h3>\n <p class=\"mt-2 text-sm text-slate-500 leading-relaxed\">Traffic concepts, mobility analyses, and public transport planning. Noise protection assessments and development planning for municipalities.</p>\n </div>\n <!-- Card 6 -->\n <div class=\"group border border-slate-200 rounded-lg p-8 hover:border-slate-300 transition-colors\">\n <div class=\"w-12 h-12 bg-slate-100 rounded-lg flex items-center justify-center text-slate-600 group-hover:bg-slate-800 group-hover:text-white transition-colors\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M12 3c.3 0 5 4 5 8a5 5 0 01-10 0c0-4 4.7-8 5-8zM7 19a2 2 0 104 0M13 19a2 2 0 104 0M10 21h4\"/>\n </svg>\n </div>\n <h3 class=\"mt-5 text-lg font-semibold text-slate-900\">Sustainability</h3>\n <p class=\"mt-2 text-sm text-slate-500 leading-relaxed\">BNB and DGNB certification, life cycle analyses, and climate adaptation strategies. Sustainable building materials and circular economy.</p>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Reference Projects -->\n <section id=\"projekte\" class=\"py-20 md:py-28 bg-slate-50\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <div class=\"max-w-2xl\">\n <p class=\"text-sm font-semibold text-slate-400 uppercase tracking-widest\">References</p>\n <h2 class=\"mt-3 text-3xl md:text-4xl font-bold text-slate-900 tracking-tight\">Selected Projects</h2>\n <p class=\"mt-4 text-lg text-slate-500\">A selection from over 2,400 completed projects in the public and private sector.</p>\n </div>\n <div class=\"mt-14 grid md:grid-cols-3 gap-8\">\n <!-- Project 1 -->\n <article class=\"group\">\n <div class=\"aspect-[4/3] bg-slate-200 rounded-lg overflow-hidden\">\n <div class=\"w-full h-full bg-gradient-to-br from-slate-300 to-slate-200 group-hover:scale-105 transition-transform duration-500\"></div>\n </div>\n <div class=\"mt-5\">\n <div class=\"flex items-center gap-2\">\n <span class=\"text-xs font-medium text-slate-500 bg-slate-100 px-2.5 py-1 rounded\">Civil Engineering</span>\n <span class=\"text-xs text-slate-400\">2023</span>\n </div>\n <h3 class=\"mt-2 text-lg font-semibold text-slate-900\">Stadthafen Rostock Expansion</h3>\n <p class=\"mt-1 text-sm text-slate-500\">Rostock, Mecklenburg-Vorpommern</p>\n </div>\n </article>\n <!-- Project 2 -->\n <article class=\"group\">\n <div class=\"aspect-[4/3] bg-slate-200 rounded-lg overflow-hidden\">\n <div class=\"w-full h-full bg-gradient-to-br from-slate-300/80 to-blue-200/30 group-hover:scale-105 transition-transform duration-500\"></div>\n </div>\n <div class=\"mt-5\">\n <div class=\"flex items-center gap-2\">\n <span class=\"text-xs font-medium text-slate-500 bg-slate-100 px-2.5 py-1 rounded\">Structural Engineering</span>\n <span class=\"text-xs text-slate-400\">2024</span>\n </div>\n <h3 class=\"mt-2 text-lg font-semibold text-slate-900\">New Administrative Center Dresden</h3>\n <p class=\"mt-1 text-sm text-slate-500\">Dresden, Saxony</p>\n </div>\n </article>\n <!-- Project 3 -->\n <article class=\"group\">\n <div class=\"aspect-[4/3] bg-slate-200 rounded-lg overflow-hidden\">\n <div class=\"w-full h-full bg-gradient-to-br from-stone-300/80 to-slate-200 group-hover:scale-105 transition-transform duration-500\"></div>\n </div>\n <div class=\"mt-5\">\n <div class=\"flex items-center gap-2\">\n <span class=\"text-xs font-medium text-slate-500 bg-slate-100 px-2.5 py-1 rounded\">Water Management</span>\n <span class=\"text-xs text-slate-400\">2022</span>\n </div>\n <h3 class=\"mt-2 text-lg font-semibold text-slate-900\">Elbe Levee Flood Protection</h3>\n <p class=\"mt-1 text-sm text-slate-500\">Saxony-Anhalt</p>\n </div>\n </article>\n </div>\n <div class=\"mt-12 text-center\">\n <a href=\"#\" class=\"inline-flex items-center gap-2 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors\">\n View all projects\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17 8l4 4m0 0l-4 4m4-4H3\"/></svg>\n </a>\n </div>\n </div>\n </section>\n\n <!-- About Us -->\n <section id=\"unternehmen\" class=\"py-20 md:py-28\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <div class=\"grid lg:grid-cols-2 gap-16 items-center\">\n <div>\n <p class=\"text-sm font-semibold text-slate-400 uppercase tracking-widest\">About Us</p>\n <h2 class=\"mt-3 text-3xl md:text-4xl font-bold text-slate-900 tracking-tight\">Independent. Interdisciplinary. Since 1979.</h2>\n <div class=\"mt-6 space-y-4 text-slate-600 leading-relaxed\">\n <p>Brückner + Partner was founded in 1979 in Rostock and has grown into one of the leading independent engineering firms in Northern Germany. With 180 employees across 12 offices, we combine local presence with regional expertise.</p>\n <p>Our strength lies in our interdisciplinary approach: architects, civil engineers, environmental planners, and transport experts collaborate from the very beginning. This creates integrated solutions that unite technical excellence with economic efficiency and ecological responsibility.</p>\n <p>We stand for long-term partnerships with our clients — municipalities, state authorities, and private investors. Quality, schedule reliability, and cost certainty are not just promises, but measurable results of our work.</p>\n </div>\n <div class=\"mt-8 flex items-center gap-6\">\n <div>\n <div class=\"text-2xl font-bold text-slate-900\">ISO 9001</div>\n <div class=\"text-sm text-slate-500\">Certified</div>\n </div>\n <div class=\"w-px h-10 bg-slate-200\" aria-hidden=\"true\"></div>\n <div>\n <div class=\"text-2xl font-bold text-slate-900\">BIM</div>\n <div class=\"text-sm text-slate-500\">Level 2 capable</div>\n </div>\n <div class=\"w-px h-10 bg-slate-200\" aria-hidden=\"true\"></div>\n <div>\n <div class=\"text-2xl font-bold text-slate-900\">DGNB</div>\n <div class=\"text-sm text-slate-500\">Auditor</div>\n </div>\n </div>\n </div>\n <div class=\"aspect-[4/3] bg-slate-100 rounded-lg\">\n <div class=\"w-full h-full bg-gradient-to-br from-slate-200 to-slate-100 rounded-lg flex items-center justify-center\">\n <span class=\"text-sm text-slate-400\">Office / Team / Project</span>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Careers -->\n <section id=\"karriere\" class=\"py-20 md:py-28 bg-slate-900 text-white\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <div class=\"max-w-2xl\">\n <p class=\"text-sm font-semibold text-slate-400 uppercase tracking-widest\">Careers</p>\n <h2 class=\"mt-3 text-3xl md:text-4xl font-bold tracking-tight\">Shape the future with us.</h2>\n <p class=\"mt-4 text-lg text-slate-400\">Join a team that plans infrastructure built to last. We are looking for engineers and planners who want to take on responsibility.</p>\n </div>\n <div class=\"mt-14 space-y-0 divide-y divide-slate-700/50\">\n <a href=\"#\" class=\"group flex flex-col md:flex-row md:items-center justify-between py-6 hover:bg-slate-800/50 -mx-4 px-4 rounded transition-colors\">\n <div>\n <h3 class=\"text-lg font-semibold\">Project Engineer — Civil Engineering</h3>\n <p class=\"mt-1 text-sm text-slate-400\">Planning and construction supervision in road and bridge construction</p>\n </div>\n <div class=\"mt-3 md:mt-0 flex items-center gap-4 text-sm text-slate-400\">\n <span>Rostock</span>\n <span class=\"w-1 h-1 bg-slate-600 rounded-full\" aria-hidden=\"true\"></span>\n <span>Full-time</span>\n <svg class=\"w-4 h-4 text-slate-500 group-hover:text-white group-hover:translate-x-1 transition-all\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17 8l4 4m0 0l-4 4m4-4H3\"/></svg>\n </div>\n </a>\n <a href=\"#\" class=\"group flex flex-col md:flex-row md:items-center justify-between py-6 hover:bg-slate-800/50 -mx-4 px-4 rounded transition-colors\">\n <div>\n <h3 class=\"text-lg font-semibold\">Civil Engineer — Water Management</h3>\n <p class=\"mt-1 text-sm text-slate-400\">Flood protection and hydraulic modeling</p>\n </div>\n <div class=\"mt-3 md:mt-0 flex items-center gap-4 text-sm text-slate-400\">\n <span>Dresden</span>\n <span class=\"w-1 h-1 bg-slate-600 rounded-full\" aria-hidden=\"true\"></span>\n <span>Full-time</span>\n <svg class=\"w-4 h-4 text-slate-500 group-hover:text-white group-hover:translate-x-1 transition-all\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17 8l4 4m0 0l-4 4m4-4H3\"/></svg>\n </div>\n </a>\n <a href=\"#\" class=\"group flex flex-col md:flex-row md:items-center justify-between py-6 hover:bg-slate-800/50 -mx-4 px-4 rounded transition-colors\">\n <div>\n <h3 class=\"text-lg font-semibold\">Technical Drafter / BIM Modeler</h3>\n <p class=\"mt-1 text-sm text-slate-400\">3D modeling and plan detailing in Revit and Civil 3D</p>\n </div>\n <div class=\"mt-3 md:mt-0 flex items-center gap-4 text-sm text-slate-400\">\n <span>Rostock</span>\n <span class=\"w-1 h-1 bg-slate-600 rounded-full\" aria-hidden=\"true\"></span>\n <span>Full-/Part-time</span>\n <svg class=\"w-4 h-4 text-slate-500 group-hover:text-white group-hover:translate-x-1 transition-all\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17 8l4 4m0 0l-4 4m4-4H3\"/></svg>\n </div>\n </a>\n </div>\n <div class=\"mt-10\">\n <a href=\"#\" class=\"inline-flex items-center gap-2 bg-white text-slate-900 text-sm font-medium px-6 py-3 rounded hover:bg-slate-100 transition-colors\">\n View all positions\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17 8l4 4m0 0l-4 4m4-4H3\"/></svg>\n </a>\n </div>\n </div>\n </section>\n\n <!-- Contact -->\n <section id=\"kontakt\" class=\"py-20 md:py-28\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <div class=\"grid lg:grid-cols-2 gap-16\">\n <div>\n <p class=\"text-sm font-semibold text-slate-400 uppercase tracking-widest\">Contact</p>\n <h2 class=\"mt-3 text-3xl md:text-4xl font-bold text-slate-900 tracking-tight\">Let's talk about your project.</h2>\n <p class=\"mt-4 text-lg text-slate-500\">Whether feasibility study, design planning, or construction supervision — we are happy to advise you without obligation.</p>\n\n <div class=\"mt-10 space-y-6\">\n <div>\n <h3 class=\"text-sm font-semibold text-slate-900 uppercase tracking-wider\">Headquarters</h3>\n <address class=\"mt-2 text-slate-600 not-italic leading-relaxed\">\n Brückner + Partner Ingenieurgesellschaft mbH<br />\n Schweriner Str. 25<br />\n 18069 Rostock\n </address>\n </div>\n <div class=\"flex flex-col gap-2\">\n <a href=\"tel:+4938112080\" class=\"text-slate-600 hover:text-slate-900 transition-colors\">+49 381 120 80-0</a>\n <a href=\"mailto:info@brueckner-partner.de\" class=\"text-slate-600 hover:text-slate-900 transition-colors\">info@brueckner-partner.de</a>\n </div>\n </div>\n\n <!-- Map placeholder -->\n <div class=\"mt-8 aspect-[16/9] bg-slate-100 rounded-lg flex items-center justify-center\">\n <span class=\"text-sm text-slate-400\">Map view</span>\n </div>\n </div>\n\n <div>\n <form class=\"space-y-6\" aria-label=\"Contact form\">\n <div>\n <label for=\"name\" class=\"block text-sm font-medium text-slate-700\">Name</label>\n <input type=\"text\" id=\"name\" name=\"name\" required autocomplete=\"name\"\n class=\"mt-1.5 block w-full rounded border border-slate-300 px-4 py-3 text-slate-900 placeholder-slate-400 focus:border-slate-500 focus:ring-1 focus:ring-slate-500 focus:outline-none transition-colors\"\n placeholder=\"Your full name\" />\n </div>\n <div>\n <label for=\"email\" class=\"block text-sm font-medium text-slate-700\">Email</label>\n <input type=\"email\" id=\"email\" name=\"email\" required autocomplete=\"email\"\n class=\"mt-1.5 block w-full rounded border border-slate-300 px-4 py-3 text-slate-900 placeholder-slate-400 focus:border-slate-500 focus:ring-1 focus:ring-slate-500 focus:outline-none transition-colors\"\n placeholder=\"your@email.com\" />\n </div>\n <div>\n <label for=\"subject\" class=\"block text-sm font-medium text-slate-700\">Subject</label>\n <select id=\"subject\" name=\"subject\"\n class=\"mt-1.5 block w-full rounded border border-slate-300 px-4 py-3 text-slate-900 focus:border-slate-500 focus:ring-1 focus:ring-slate-500 focus:outline-none transition-colors\">\n <option value=\"\">Please select</option>\n <option value=\"projekt\">Project inquiry</option>\n <option value=\"karriere\">Job application</option>\n <option value=\"allgemein\">General inquiry</option>\n </select>\n </div>\n <div>\n <label for=\"message\" class=\"block text-sm font-medium text-slate-700\">Message</label>\n <textarea id=\"message\" name=\"message\" rows=\"5\" required\n class=\"mt-1.5 block w-full rounded border border-slate-300 px-4 py-3 text-slate-900 placeholder-slate-400 focus:border-slate-500 focus:ring-1 focus:ring-slate-500 focus:outline-none transition-colors resize-none\"\n placeholder=\"Describe your request...\"></textarea>\n </div>\n <button type=\"submit\" class=\"w-full bg-slate-800 text-white text-sm font-medium px-6 py-3 rounded hover:bg-slate-700 transition-colors\">\n Send message\n </button>\n <p class=\"text-xs text-slate-400\">By submitting, you agree to our <a href=\"#\" class=\"underline hover:text-slate-600\">Privacy Policy</a>.</p>\n </form>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Footer -->\n <footer class=\"bg-slate-900 text-slate-400 py-16\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <div class=\"grid md:grid-cols-2 lg:grid-cols-4 gap-10\">\n <div>\n <div class=\"flex items-center gap-3\">\n <div class=\"w-8 h-8 bg-slate-700 rounded-sm flex items-center justify-center\">\n <span class=\"text-white text-xs font-bold leading-none\">B+P</span>\n </div>\n <span class=\"text-base font-semibold text-white\">Brückner + Partner</span>\n </div>\n <p class=\"mt-4 text-sm leading-relaxed\">Ingenieurgesellschaft mbH<br />Plan. Build. Move.</p>\n </div>\n <div>\n <h4 class=\"text-sm font-semibold text-white uppercase tracking-wider\">Services</h4>\n <ul class=\"mt-4 space-y-2 text-sm\">\n <li><a href=\"#kompetenzen\" class=\"hover:text-white transition-colors\">Structural Engineering</a></li>\n <li><a href=\"#kompetenzen\" class=\"hover:text-white transition-colors\">Civil Engineering</a></li>\n <li><a href=\"#kompetenzen\" class=\"hover:text-white transition-colors\">Water Management</a></li>\n <li><a href=\"#kompetenzen\" class=\"hover:text-white transition-colors\">Energy Planning</a></li>\n </ul>\n </div>\n <div>\n <h4 class=\"text-sm font-semibold text-white uppercase tracking-wider\">Company</h4>\n <ul class=\"mt-4 space-y-2 text-sm\">\n <li><a href=\"#unternehmen\" class=\"hover:text-white transition-colors\">About Us</a></li>\n <li><a href=\"#projekte\" class=\"hover:text-white transition-colors\">References</a></li>\n <li><a href=\"#karriere\" class=\"hover:text-white transition-colors\">Careers</a></li>\n <li><a href=\"#kontakt\" class=\"hover:text-white transition-colors\">Contact</a></li>\n </ul>\n </div>\n <div>\n <h4 class=\"text-sm font-semibold text-white uppercase tracking-wider\">Offices</h4>\n <ul class=\"mt-4 space-y-2 text-sm\">\n <li>Rostock (Headquarters)</li>\n <li>Dresden</li>\n <li>Berlin</li>\n <li>Hamburg</li>\n </ul>\n </div>\n </div>\n <div class=\"mt-14 pt-8 border-t border-slate-800 flex flex-col md:flex-row justify-between items-center gap-4 text-sm\">\n <p>&copy; 2026 Brückner + Partner Ingenieurgesellschaft mbH</p>\n <ul class=\"flex items-center gap-6\">\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Legal Notice</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Privacy Policy</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Accessibility</a></li>\n </ul>\n </div>\n </div>\n </footer>\n\n <script>\n const toggle = document.getElementById('menu-toggle');\n const menu = document.getElementById('mobile-menu');\n toggle.addEventListener('click', () => {\n const open = !menu.classList.contains('hidden');\n menu.classList.toggle('hidden');\n toggle.setAttribute('aria-expanded', String(!open));\n });\n document.querySelectorAll('#mobile-menu a').forEach(link => {\n link.addEventListener('click', () => {\n menu.classList.add('hidden');\n toggle.setAttribute('aria-expanded', 'false');\n });\n });\n </script>\n\n</body>\n</html>"
24829
+ },
24830
+ {
24831
+ "id": "company/law-firm",
24832
+ "title": "Company Law Firm",
24833
+ "summary": "Elegant German law firm website with practice areas, attorney profiles, legal news section, and appointment booking — trustworthy and professional.",
24834
+ "description": "A website template for German law firms (Kanzleien). Features practice area grid, attorney team cards, legal news/blog section, and prominent contact with appointment CTA. Navy and gold color scheme conveys authority and trust.",
24835
+ "category": "company",
24836
+ "style": "elegant",
24837
+ "tags": [
24838
+ "company",
24839
+ "law-firm",
24840
+ "kanzlei",
24841
+ "rechtsanwalt",
24842
+ "german",
24843
+ "kmu",
24844
+ "legal",
24845
+ "professional"
24846
+ ],
24847
+ "patterns": [
24848
+ "navbar/base",
24849
+ "hero/base",
24850
+ "cards/base",
24851
+ "features/base",
24852
+ "team/base",
24853
+ "blog/base",
24854
+ "contact/base",
24855
+ "footer/base"
24856
+ ],
24857
+ "sections": [
24858
+ "navbar",
24859
+ "hero",
24860
+ "practice-areas",
24861
+ "team",
24862
+ "about",
24863
+ "news",
24864
+ "contact",
24865
+ "footer"
24866
+ ],
24867
+ "features": {
24868
+ "responsive": true,
24869
+ "darkMode": false,
24870
+ "animations": false,
24871
+ "formHandling": false
24872
+ },
24873
+ "files": {
24874
+ "html": "./law-firm.html",
24875
+ "preview": "./law-firm.png"
24876
+ },
24877
+ "install": {
24878
+ "copyPasteReady": true,
24879
+ "tailwindCdn": true,
24880
+ "vanillaJs": true,
24881
+ "notes": [
24882
+ "Content is in German — adapt for your firm",
24883
+ "Attorney photos should be professional portraits",
24884
+ "News/blog section is static — connect to your CMS"
24885
+ ]
24886
+ },
24887
+ "governance": {
24888
+ "status": "published",
24889
+ "quality": "flagship",
24890
+ "owner": "design-system",
24891
+ "updatedAt": "2026-03-20"
24892
+ },
24893
+ "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Hartmann & Kollegen — Attorneys at Law in Rostock</title>\n <meta name=\"description\" content=\"Your attorneys at law in Rostock. Expert counsel in employment law, family law, tenancy law, and more. Hartmann & Kollegen Law Firm.\" />\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <style>\n body { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; }\n .font-serif { font-family: Georgia, 'Times New Roman', serif; }\n .nav-link { position: relative; }\n .nav-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px;\n background-color: #b45309; transition: width 0.3s ease; }\n .nav-link:hover::after { width: 100%; }\n </style>\n</head>\n<body class=\"bg-white text-slate-800 antialiased\">\n\n <!-- Navbar -->\n <nav class=\"fixed top-0 inset-x-0 z-50 bg-white/95 backdrop-blur-sm border-b border-slate-100\" aria-label=\"Main navigation\">\n <div class=\"max-w-6xl mx-auto flex items-center justify-between px-6 py-4\">\n <a href=\"#\" class=\"flex items-center gap-2\">\n <span class=\"text-amber-700 text-2xl\" aria-hidden=\"true\">&#9878;</span>\n <span class=\"font-serif text-xl text-slate-900 tracking-tight\">Hartmann <span class=\"text-amber-700\">&</span> Kollegen</span>\n </a>\n <ul class=\"hidden md:flex items-center gap-8 text-sm font-medium text-slate-600\">\n <li><a href=\"#kanzlei\" class=\"nav-link hover:text-slate-900 transition-colors\">Our Firm</a></li>\n <li><a href=\"#rechtsgebiete\" class=\"nav-link hover:text-slate-900 transition-colors\">Practice Areas</a></li>\n <li><a href=\"#team\" class=\"nav-link hover:text-slate-900 transition-colors\">Team</a></li>\n <li><a href=\"#aktuelles\" class=\"nav-link hover:text-slate-900 transition-colors\">News</a></li>\n <li><a href=\"#kontakt\" class=\"nav-link hover:text-slate-900 transition-colors\">Contact</a></li>\n </ul>\n <a href=\"#kontakt\" class=\"hidden md:inline-flex items-center gap-2 bg-slate-800 text-white text-sm font-medium px-5 py-2.5 rounded hover:bg-amber-700 transition-colors\">\n Schedule Consultation\n </a>\n <button id=\"menu-toggle\" class=\"md:hidden p-2 -mr-2\" aria-label=\"Open menu\" aria-expanded=\"false\" aria-controls=\"mobile-menu\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M4 6h16M4 12h16M4 18h16\"/>\n </svg>\n </button>\n </div>\n <div id=\"mobile-menu\" class=\"hidden md:hidden border-t border-slate-100 bg-white px-6 pb-6 pt-4\">\n <ul class=\"flex flex-col gap-4 text-base font-medium text-slate-700\">\n <li><a href=\"#kanzlei\" class=\"block py-1\">Our Firm</a></li>\n <li><a href=\"#rechtsgebiete\" class=\"block py-1\">Practice Areas</a></li>\n <li><a href=\"#team\" class=\"block py-1\">Team</a></li>\n <li><a href=\"#aktuelles\" class=\"block py-1\">News</a></li>\n <li><a href=\"#kontakt\" class=\"block py-1\">Contact</a></li>\n </ul>\n <a href=\"#kontakt\" class=\"mt-4 block text-center bg-slate-800 text-white text-sm font-medium px-5 py-2.5 rounded\">\n Schedule Consultation\n </a>\n </div>\n </nav>\n\n <!-- Hero -->\n <section class=\"pt-32 pb-20 md:pt-40 md:pb-28 bg-stone-50\">\n <div class=\"max-w-6xl mx-auto px-6 text-center\">\n <h1 class=\"font-serif text-4xl md:text-6xl lg:text-7xl text-slate-900 leading-tight tracking-tight\">\n Law. Clear.<br class=\"hidden sm:block\" /> Understood.\n </h1>\n <p class=\"mt-6 text-lg md:text-xl text-slate-600 max-w-2xl mx-auto leading-relaxed\">\n Competent legal counsel with personal commitment. For over 20 years, we have represented your interests — reliably, discreetly, and on equal terms.\n </p>\n <div class=\"mt-10 flex flex-col sm:flex-row items-center justify-center gap-4\">\n <a href=\"#kontakt\" class=\"inline-flex items-center gap-2 bg-amber-700 text-white font-medium px-8 py-3.5 rounded hover:bg-amber-800 transition-colors text-base\">\n Schedule Consultation\n </a>\n <a href=\"tel:+4938120354680\" class=\"inline-flex items-center gap-2 text-slate-600 hover:text-slate-900 transition-colors text-base\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z\"/>\n </svg>\n 0381 / 203 546 80\n </a>\n </div>\n </div>\n </section>\n\n <!-- Practice Areas -->\n <section id=\"rechtsgebiete\" class=\"py-20 md:py-28\">\n <div class=\"max-w-6xl mx-auto px-6\">\n <div class=\"text-center mb-16\">\n <p class=\"text-amber-700 font-medium text-sm tracking-widest uppercase mb-3\">Our Focus Areas</p>\n <h2 class=\"font-serif text-3xl md:text-4xl text-slate-900\">Practice Areas</h2>\n <p class=\"mt-4 text-slate-600 max-w-xl mx-auto\">In these areas, we advise and represent you — with experience, diligence, and the necessary assertiveness.</p>\n </div>\n <div class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-6\">\n <div class=\"border border-slate-150 rounded-lg p-7 hover:border-amber-200 hover:bg-amber-50/30 transition-colors\">\n <span class=\"text-2xl mb-4 block\" aria-hidden=\"true\">&#9878;</span>\n <h3 class=\"font-serif text-lg text-slate-900 mb-2\">Employment Law</h3>\n <p class=\"text-sm text-slate-600 leading-relaxed\">Wrongful dismissal protection, severance pay, employment contracts, and settlement agreements. We stand by both employees and employers.</p>\n </div>\n <div class=\"border border-slate-150 rounded-lg p-7 hover:border-amber-200 hover:bg-amber-50/30 transition-colors\">\n <span class=\"text-2xl mb-4 block\" aria-hidden=\"true\">&#9825;</span>\n <h3 class=\"font-serif text-lg text-slate-900 mb-2\">Family Law</h3>\n <p class=\"text-sm text-slate-600 leading-relaxed\">Divorce, custody, alimony, and division of assets. Sensitive matters require empathetic yet determined representation.</p>\n </div>\n <div class=\"border border-slate-150 rounded-lg p-7 hover:border-amber-200 hover:bg-amber-50/30 transition-colors\">\n <span class=\"text-2xl mb-4 block\" aria-hidden=\"true\">&#8962;</span>\n <h3 class=\"font-serif text-lg text-slate-900 mb-2\">Tenancy Law</h3>\n <p class=\"text-sm text-slate-600 leading-relaxed\">Rent increases, utility bill disputes, terminations, and eviction claims — for tenants and landlords alike.</p>\n </div>\n <div class=\"border border-slate-150 rounded-lg p-7 hover:border-amber-200 hover:bg-amber-50/30 transition-colors\">\n <span class=\"text-2xl mb-4 block\" aria-hidden=\"true\">&#128663;</span>\n <h3 class=\"font-serif text-lg text-slate-900 mb-2\">Traffic Law</h3>\n <p class=\"text-sm text-slate-600 leading-relaxed\">Accident claims, fine proceedings, license revocation. Quick assistance after traffic accidents and administrative offenses.</p>\n </div>\n <div class=\"border border-slate-150 rounded-lg p-7 hover:border-amber-200 hover:bg-amber-50/30 transition-colors\">\n <span class=\"text-2xl mb-4 block\" aria-hidden=\"true\">&#128220;</span>\n <h3 class=\"font-serif text-lg text-slate-900 mb-2\">Inheritance Law</h3>\n <p class=\"text-sm text-slate-600 leading-relaxed\">Will drafting, estate distribution, forced heirship claims. Taking precautions and settling estates — timely and legally sound.</p>\n </div>\n <div class=\"border border-slate-150 rounded-lg p-7 hover:border-amber-200 hover:bg-amber-50/30 transition-colors\">\n <span class=\"text-2xl mb-4 block\" aria-hidden=\"true\">&#128188;</span>\n <h3 class=\"font-serif text-lg text-slate-900 mb-2\">Commercial Law</h3>\n <p class=\"text-sm text-slate-600 leading-relaxed\">Partnership agreements, commercial register filings, distribution law, and commercial disputes. Counsel for small and medium enterprises.</p>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Team -->\n <section id=\"team\" class=\"py-20 md:py-28 bg-stone-50\">\n <div class=\"max-w-6xl mx-auto px-6\">\n <div class=\"text-center mb-16\">\n <p class=\"text-amber-700 font-medium text-sm tracking-widest uppercase mb-3\">Your Contacts</p>\n <h2 class=\"font-serif text-3xl md:text-4xl text-slate-900\">Our Team</h2>\n <p class=\"mt-4 text-slate-600 max-w-xl mx-auto\">Experienced attorneys with a clear focus on your interests. Personal, accessible, dedicated.</p>\n </div>\n <div class=\"grid md:grid-cols-3 gap-8\">\n <!-- Attorney 1 -->\n <article class=\"bg-white rounded-lg overflow-hidden shadow-sm border border-slate-100\">\n <div class=\"aspect-[4/5] bg-slate-200 flex items-end justify-center\">\n <div class=\"w-full h-full bg-gradient-to-b from-slate-300 to-slate-400\"></div>\n </div>\n <div class=\"p-6\">\n <h3 class=\"font-serif text-lg text-slate-900\">Attorney Dr. Martin Hartmann</h3>\n <p class=\"text-amber-700 text-sm font-medium mt-1\">Employment Law &middot; Commercial Law</p>\n <p class=\"text-slate-600 text-sm mt-3 leading-relaxed\">Founding partner of the firm. Over 25 years of experience representing employees and medium-sized enterprises.</p>\n <a href=\"#\" class=\"inline-flex items-center gap-1 text-amber-700 text-sm font-medium mt-4 hover:text-amber-800 transition-colors\">\n View profile\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"/></svg>\n </a>\n </div>\n </article>\n <!-- Attorney 2 -->\n <article class=\"bg-white rounded-lg overflow-hidden shadow-sm border border-slate-100\">\n <div class=\"aspect-[4/5] bg-slate-200 flex items-end justify-center\">\n <div class=\"w-full h-full bg-gradient-to-b from-stone-300 to-stone-400\"></div>\n </div>\n <div class=\"p-6\">\n <h3 class=\"font-serif text-lg text-slate-900\">Attorney Katrin Bremer</h3>\n <p class=\"text-amber-700 text-sm font-medium mt-1\">Family Law &middot; Inheritance Law</p>\n <p class=\"text-slate-600 text-sm mt-3 leading-relaxed\">Specialist attorney for family law. Known for her empathetic yet resolute client representation.</p>\n <a href=\"#\" class=\"inline-flex items-center gap-1 text-amber-700 text-sm font-medium mt-4 hover:text-amber-800 transition-colors\">\n View profile\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"/></svg>\n </a>\n </div>\n </article>\n <!-- Attorney 3 -->\n <article class=\"bg-white rounded-lg overflow-hidden shadow-sm border border-slate-100\">\n <div class=\"aspect-[4/5] bg-slate-200 flex items-end justify-center\">\n <div class=\"w-full h-full bg-gradient-to-b from-zinc-300 to-zinc-400\"></div>\n </div>\n <div class=\"p-6\">\n <h3 class=\"font-serif text-lg text-slate-900\">Attorney Jens Petersen</h3>\n <p class=\"text-amber-700 text-sm font-medium mt-1\">Tenancy Law &middot; Traffic Law</p>\n <p class=\"text-slate-600 text-sm mt-3 leading-relaxed\">With the firm since 2010. Specialized in tenancy and traffic law with a particular focus on out-of-court settlements.</p>\n <a href=\"#\" class=\"inline-flex items-center gap-1 text-amber-700 text-sm font-medium mt-4 hover:text-amber-800 transition-colors\">\n View profile\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"/></svg>\n </a>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n <!-- About the Firm -->\n <section id=\"kanzlei\" class=\"py-20 md:py-28\">\n <div class=\"max-w-6xl mx-auto px-6\">\n <div class=\"grid md:grid-cols-2 gap-12 md:gap-16 items-center\">\n <div>\n <p class=\"text-amber-700 font-medium text-sm tracking-widest uppercase mb-3\">About Us</p>\n <h2 class=\"font-serif text-3xl md:text-4xl text-slate-900 leading-snug\">Client-focused,<br />dedicated, discreet.</h2>\n <p class=\"mt-6 text-slate-600 leading-relaxed\">\n Since our founding in 2003, our firm has stood for personal attention and professional competence. We take time for your case, explain matters clearly, and fight for your rights — in court and at the negotiation table.\n </p>\n <p class=\"mt-4 text-slate-600 leading-relaxed\">\n As a mid-sized law firm in Rostock, we combine legal excellence with human closeness. Every client receives a dedicated contact, fast response times, and transparent cost information.\n </p>\n <ul class=\"mt-8 space-y-3\">\n <li class=\"flex items-start gap-3 text-slate-700\">\n <svg class=\"w-5 h-5 text-amber-700 mt-0.5 shrink-0\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\" clip-rule=\"evenodd\"/></svg>\n <span>Over 20 years of experience in Mecklenburg-Vorpommern</span>\n </li>\n <li class=\"flex items-start gap-3 text-slate-700\">\n <svg class=\"w-5 h-5 text-amber-700 mt-0.5 shrink-0\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\" clip-rule=\"evenodd\"/></svg>\n <span>Dedicated contact person for every client</span>\n </li>\n <li class=\"flex items-start gap-3 text-slate-700\">\n <svg class=\"w-5 h-5 text-amber-700 mt-0.5 shrink-0\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\" clip-rule=\"evenodd\"/></svg>\n <span>Transparent costs — no hidden fees</span>\n </li>\n <li class=\"flex items-start gap-3 text-slate-700\">\n <svg class=\"w-5 h-5 text-amber-700 mt-0.5 shrink-0\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\" clip-rule=\"evenodd\"/></svg>\n <span>Member of the Bar Association of Mecklenburg-Vorpommern</span>\n </li>\n </ul>\n </div>\n <div class=\"aspect-[4/3] bg-gradient-to-br from-slate-200 to-slate-300 rounded-lg\" role=\"img\" aria-label=\"Office premises of Hartmann & Kollegen law firm\"></div>\n </div>\n </div>\n </section>\n\n <!-- News -->\n <section id=\"aktuelles\" class=\"py-20 md:py-28 bg-stone-50\">\n <div class=\"max-w-6xl mx-auto px-6\">\n <div class=\"text-center mb-16\">\n <p class=\"text-amber-700 font-medium text-sm tracking-widest uppercase mb-3\">Legal Updates</p>\n <h2 class=\"font-serif text-3xl md:text-4xl text-slate-900\">News</h2>\n <p class=\"mt-4 text-slate-600 max-w-xl mx-auto\">Current developments, rulings, and practical tips from our daily practice.</p>\n </div>\n <div class=\"grid md:grid-cols-3 gap-8\">\n <article class=\"bg-white rounded-lg overflow-hidden shadow-sm border border-slate-100\">\n <div class=\"aspect-[16/9] bg-gradient-to-br from-slate-100 to-slate-200\"></div>\n <div class=\"p-6\">\n <div class=\"flex items-center gap-3 text-xs text-slate-500 mb-3\">\n <time datetime=\"2026-03-15\">March 15, 2026</time>\n <span class=\"bg-amber-100 text-amber-800 px-2 py-0.5 rounded font-medium\">Tenancy Law</span>\n </div>\n <h3 class=\"font-serif text-lg text-slate-900 mb-2\">New Tenancy Law Regulations in 2026</h3>\n <p class=\"text-sm text-slate-600 leading-relaxed\">The rent control has been extended and tightened. What tenants and landlords need to know now — an overview of the most important changes.</p>\n <a href=\"#\" class=\"inline-flex items-center gap-1 text-amber-700 text-sm font-medium mt-4 hover:text-amber-800 transition-colors\">\n Read more\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"/></svg>\n </a>\n </div>\n </article>\n <article class=\"bg-white rounded-lg overflow-hidden shadow-sm border border-slate-100\">\n <div class=\"aspect-[16/9] bg-gradient-to-br from-stone-100 to-stone-200\"></div>\n <div class=\"p-6\">\n <div class=\"flex items-center gap-3 text-xs text-slate-500 mb-3\">\n <time datetime=\"2026-02-28\">February 28, 2026</time>\n <span class=\"bg-amber-100 text-amber-800 px-2 py-0.5 rounded font-medium\">Employment Law</span>\n </div>\n <h3 class=\"font-serif text-lg text-slate-900 mb-2\">Severance Pay Upon Dismissal — Your Rights</h3>\n <p class=\"text-sm text-slate-600 leading-relaxed\">When are you entitled to severance pay? How much should it be? We explain the legal foundations and provide practical recommendations.</p>\n <a href=\"#\" class=\"inline-flex items-center gap-1 text-amber-700 text-sm font-medium mt-4 hover:text-amber-800 transition-colors\">\n Read more\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"/></svg>\n </a>\n </div>\n </article>\n <article class=\"bg-white rounded-lg overflow-hidden shadow-sm border border-slate-100\">\n <div class=\"aspect-[16/9] bg-gradient-to-br from-zinc-100 to-zinc-200\"></div>\n <div class=\"p-6\">\n <div class=\"flex items-center gap-3 text-xs text-slate-500 mb-3\">\n <time datetime=\"2026-02-10\">February 10, 2026</time>\n <span class=\"bg-amber-100 text-amber-800 px-2 py-0.5 rounded font-medium\">Inheritance Law</span>\n </div>\n <h3 class=\"font-serif text-lg text-slate-900 mb-2\">How to Draft a Valid Will</h3>\n <p class=\"text-sm text-slate-600 leading-relaxed\">An invalid will can have serious consequences. Learn about the formal requirements and how to avoid disputes among heirs.</p>\n <a href=\"#\" class=\"inline-flex items-center gap-1 text-amber-700 text-sm font-medium mt-4 hover:text-amber-800 transition-colors\">\n Read more\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"/></svg>\n </a>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n <!-- Contact -->\n <section id=\"kontakt\" class=\"py-20 md:py-28\">\n <div class=\"max-w-6xl mx-auto px-6\">\n <div class=\"grid md:grid-cols-2 gap-12 md:gap-16\">\n <div>\n <p class=\"text-amber-700 font-medium text-sm tracking-widest uppercase mb-3\">Contact</p>\n <h2 class=\"font-serif text-3xl md:text-4xl text-slate-900 leading-snug\">We are here<br />for you.</h2>\n <p class=\"mt-6 text-slate-600 leading-relaxed\">\n Schedule an appointment for a personal initial consultation. We take time to understand your situation and give you an honest assessment.\n </p>\n <p class=\"mt-2 text-sm text-slate-500 italic\">By appointment. Initial consultation also available via video call.</p>\n <dl class=\"mt-8 space-y-5\">\n <div class=\"flex items-start gap-4\">\n <dt class=\"sr-only\">Address</dt>\n <svg class=\"w-5 h-5 text-amber-700 mt-1 shrink-0\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M15 10.5a3 3 0 11-6 0 3 3 0 016 0z\"/>\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z\"/>\n </svg>\n <dd class=\"text-slate-700\">Kröpeliner Str. 42<br />18055 Rostock</dd>\n </div>\n <div class=\"flex items-start gap-4\">\n <dt class=\"sr-only\">Phone</dt>\n <svg class=\"w-5 h-5 text-amber-700 mt-1 shrink-0\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z\"/>\n </svg>\n <dd><a href=\"tel:+4938120354680\" class=\"text-slate-700 hover:text-amber-700 transition-colors\">0381 / 203 546 80</a></dd>\n </div>\n <div class=\"flex items-start gap-4\">\n <dt class=\"sr-only\">Email</dt>\n <svg class=\"w-5 h-5 text-amber-700 mt-1 shrink-0\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75\"/>\n </svg>\n <dd><a href=\"mailto:kanzlei@hartmann-kollegen.de\" class=\"text-slate-700 hover:text-amber-700 transition-colors\">kanzlei@hartmann-kollegen.de</a></dd>\n </div>\n <div class=\"flex items-start gap-4\">\n <dt class=\"sr-only\">Office hours</dt>\n <svg class=\"w-5 h-5 text-amber-700 mt-1 shrink-0\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z\"/>\n </svg>\n <dd class=\"text-slate-700\">Mon – Fri: 9:00 AM – 6:00 PM<br /><span class=\"text-slate-500 text-sm\">and by appointment</span></dd>\n </div>\n </dl>\n <a href=\"#kontakt\" class=\"inline-flex items-center gap-2 bg-amber-700 text-white font-medium px-8 py-3.5 rounded hover:bg-amber-800 transition-colors text-base mt-8\">\n Schedule Consultation\n </a>\n </div>\n <div class=\"aspect-[4/3] bg-gradient-to-br from-slate-100 to-slate-200 rounded-lg flex items-center justify-center\" role=\"img\" aria-label=\"Location of the law firm on the map\">\n <span class=\"text-slate-400 text-sm\">Map view</span>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Footer -->\n <footer class=\"bg-slate-900 text-slate-300 py-16\">\n <div class=\"max-w-6xl mx-auto px-6\">\n <div class=\"grid md:grid-cols-4 gap-10\">\n <div class=\"md:col-span-1\">\n <a href=\"#\" class=\"flex items-center gap-2\">\n <span class=\"text-amber-500 text-xl\" aria-hidden=\"true\">&#9878;</span>\n <span class=\"font-serif text-lg text-white\">Hartmann & Kollegen</span>\n </a>\n <p class=\"mt-4 text-sm text-slate-400 leading-relaxed\">Your attorneys at law in Rostock. Competent, personal, and dedicated since 2003.</p>\n </div>\n <div>\n <h3 class=\"text-white font-medium text-sm mb-4\">Practice Areas</h3>\n <ul class=\"space-y-2 text-sm\">\n <li><a href=\"#rechtsgebiete\" class=\"hover:text-white transition-colors\">Employment Law</a></li>\n <li><a href=\"#rechtsgebiete\" class=\"hover:text-white transition-colors\">Family Law</a></li>\n <li><a href=\"#rechtsgebiete\" class=\"hover:text-white transition-colors\">Tenancy Law</a></li>\n <li><a href=\"#rechtsgebiete\" class=\"hover:text-white transition-colors\">Traffic Law</a></li>\n <li><a href=\"#rechtsgebiete\" class=\"hover:text-white transition-colors\">Inheritance Law</a></li>\n <li><a href=\"#rechtsgebiete\" class=\"hover:text-white transition-colors\">Commercial Law</a></li>\n </ul>\n </div>\n <div>\n <h3 class=\"text-white font-medium text-sm mb-4\">Our Firm</h3>\n <ul class=\"space-y-2 text-sm\">\n <li><a href=\"#kanzlei\" class=\"hover:text-white transition-colors\">About Us</a></li>\n <li><a href=\"#team\" class=\"hover:text-white transition-colors\">Team</a></li>\n <li><a href=\"#aktuelles\" class=\"hover:text-white transition-colors\">News</a></li>\n <li><a href=\"#kontakt\" class=\"hover:text-white transition-colors\">Contact</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Legal Notice</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Privacy Policy</a></li>\n </ul>\n </div>\n <div>\n <h3 class=\"text-white font-medium text-sm mb-4\">Contact</h3>\n <address class=\"not-italic text-sm space-y-2\">\n <p>Kröpeliner Str. 42</p>\n <p>18055 Rostock</p>\n <p class=\"mt-3\"><a href=\"tel:+4938120354680\" class=\"hover:text-white transition-colors\">0381 / 203 546 80</a></p>\n <p><a href=\"mailto:kanzlei@hartmann-kollegen.de\" class=\"hover:text-white transition-colors\">kanzlei@hartmann-kollegen.de</a></p>\n </address>\n </div>\n </div>\n <div class=\"mt-12 pt-8 border-t border-slate-800 flex flex-col md:flex-row items-center justify-between gap-4 text-xs text-slate-500\">\n <p>Member of the Bar Association of Mecklenburg-Vorpommern</p>\n <p>&copy; 2003 – 2026 Hartmann & Kollegen Law Firm. All rights reserved.</p>\n </div>\n </div>\n </footer>\n\n <script>\n const toggle = document.getElementById('menu-toggle');\n const menu = document.getElementById('mobile-menu');\n toggle.addEventListener('click', () => {\n const open = !menu.classList.contains('hidden');\n menu.classList.toggle('hidden');\n toggle.setAttribute('aria-expanded', String(!open));\n toggle.setAttribute('aria-label', open ? 'Open menu' : 'Close menu');\n });\n menu.querySelectorAll('a').forEach(link => {\n link.addEventListener('click', () => {\n menu.classList.add('hidden');\n toggle.setAttribute('aria-expanded', 'false');\n toggle.setAttribute('aria-label', 'Open menu');\n });\n });\n </script>\n\n</body>\n</html>"
24894
+ },
24895
+ {
24896
+ "id": "company/tourism",
24897
+ "title": "Company Tourism Portal",
24898
+ "summary": "Regional German tourism portal with accommodation search, activity highlights, event calendar, and travel information — inviting and practical.",
24899
+ "description": "A tourism portal template for German regions and destinations. Features vibrant hero with search, accommodation cards with pricing, activity discovery, event calendar, and practical travel information. Ocean-blue and sand-warm palette creates an inviting atmosphere.",
24900
+ "category": "company",
24901
+ "style": "playful",
24902
+ "tags": [
24903
+ "company",
24904
+ "tourism",
24905
+ "portal",
24906
+ "travel",
24907
+ "german",
24908
+ "regional",
24909
+ "ostsee",
24910
+ "vacation"
24911
+ ],
24912
+ "patterns": [
24913
+ "navbar/base",
24914
+ "hero/base",
24915
+ "cards/base",
24916
+ "features/base",
24917
+ "newsletter/base",
24918
+ "footer/base"
24919
+ ],
24920
+ "sections": [
24921
+ "navbar",
24922
+ "hero",
24923
+ "highlights",
24924
+ "accommodation",
24925
+ "activities",
24926
+ "events",
24927
+ "travel-info",
24928
+ "newsletter",
24929
+ "footer"
24930
+ ],
24931
+ "features": {
24932
+ "responsive": true,
24933
+ "darkMode": false,
24934
+ "animations": false,
24935
+ "formHandling": false
24936
+ },
24937
+ "files": {
24938
+ "html": "./tourism.html",
24939
+ "preview": "./tourism.png"
24940
+ },
24941
+ "install": {
24942
+ "copyPasteReady": true,
24943
+ "tailwindCdn": true,
24944
+ "vanillaJs": true,
24945
+ "notes": [
24946
+ "Content is in German — adapt for your region",
24947
+ "Accommodation cards are static — connect to booking system",
24948
+ "Events section needs regular content updates",
24949
+ "Search bar is visual only — implement with your backend"
24950
+ ]
24951
+ },
24952
+ "governance": {
24953
+ "status": "published",
24954
+ "quality": "flagship",
24955
+ "owner": "design-system",
24956
+ "updatedAt": "2026-03-20"
24957
+ },
24958
+ "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Discover the Baltic — Holiday on the German Baltic Coast</title>\n <meta name=\"description\" content=\"Discover the most beautiful beaches, Hanseatic cities, and nature parks on the Baltic Sea. Accommodation, activities, and events for your perfect holiday.\" />\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <style>\n @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');\n body { font-family: 'Inter', sans-serif; }\n .wave-border { position: relative; }\n .wave-border::after {\n content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 3px;\n background: linear-gradient(90deg, #0ea5e9, #38bdf8, #0ea5e9);\n border-radius: 2px; transform: scaleX(0); transition: transform 0.3s ease;\n }\n .wave-border:hover::after { transform: scaleX(1); }\n .card-float { transition: transform 0.3s ease, box-shadow 0.3s ease; }\n .card-float:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -12px rgba(0,0,0,0.12); }\n .activity-pill { transition: background-color 0.2s ease, transform 0.2s ease; }\n .activity-pill:hover { transform: scale(1.05); }\n .scroll-row { scrollbar-width: none; -ms-overflow-style: none; }\n .scroll-row::-webkit-scrollbar { display: none; }\n </style>\n</head>\n<body class=\"bg-white text-neutral-800 antialiased\">\n\n <!-- Navbar -->\n <nav class=\"fixed top-0 inset-x-0 z-50 bg-white/95 backdrop-blur-md border-b border-sky-100/60\" aria-label=\"Main navigation\">\n <div class=\"max-w-7xl mx-auto flex items-center justify-between px-6 py-4\">\n <a href=\"#\" class=\"flex items-center gap-2 text-xl font-bold tracking-tight text-sky-700\">\n <svg class=\"w-7 h-7 text-sky-500\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M2 12c1.5-2 3.5-3 6-3s4.5 1.5 6 3c1.5-2 3.5-3 6-3v2c-2 0-3.8.8-5 2.2C13.8 11.8 12 11 10 11s-3.8.8-5 2.2V11c0-1 .3-1.8 1-2.5C4.5 10 3.2 10.8 2 12z\"/>\n <path d=\"M2 17c1.5-2 3.5-3 6-3s4.5 1.5 6 3c1.5-2 3.5-3 6-3v2c-2 0-3.8.8-5 2.2C13.8 16.8 12 16 10 16s-3.8.8-5 2.2V16c0-1 .3-1.8 1-2.5C4.5 15 3.2 15.8 2 17z\"/>\n </svg>\n Discover the<span class=\"text-amber-500\"> Baltic</span>\n </a>\n <ul class=\"hidden md:flex items-center gap-7 text-sm font-medium text-neutral-500\">\n <li><a href=\"#highlights\" class=\"wave-border pb-1 hover:text-sky-600 transition-colors\">Discover</a></li>\n <li><a href=\"#unterkuenfte\" class=\"wave-border pb-1 hover:text-sky-600 transition-colors\">Accommodation</a></li>\n <li><a href=\"#aktivitaeten\" class=\"wave-border pb-1 hover:text-sky-600 transition-colors\">Activities</a></li>\n <li><a href=\"#events\" class=\"wave-border pb-1 hover:text-sky-600 transition-colors\">Events</a></li>\n <li><a href=\"#anreise\" class=\"wave-border pb-1 hover:text-sky-600 transition-colors\">Getting Here</a></li>\n </ul>\n <div class=\"hidden md:flex items-center gap-3\">\n <button class=\"p-2 text-neutral-400 hover:text-sky-600 transition-colors\" aria-label=\"Open search\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-4.35-4.35M11 19a8 8 0 100-16 8 8 0 000 16z\"/>\n </svg>\n </button>\n <a href=\"#unterkuenfte\" class=\"bg-sky-500 text-white text-sm font-semibold px-5 py-2.5 rounded-full hover:bg-sky-600 transition-colors\">\n Plan Your Trip\n </a>\n </div>\n <button id=\"menu-toggle\" class=\"md:hidden p-2 -mr-2\" aria-label=\"Open menu\" aria-expanded=\"false\" aria-controls=\"mobile-menu\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M4 6h16M4 12h16M4 18h16\"/>\n </svg>\n </button>\n </div>\n <div id=\"mobile-menu\" class=\"hidden md:hidden border-t border-sky-100 bg-white px-6 pb-6 pt-4\">\n <ul class=\"flex flex-col gap-3 text-base font-medium text-neutral-700\">\n <li><a href=\"#highlights\" class=\"block py-1.5\">Discover</a></li>\n <li><a href=\"#unterkuenfte\" class=\"block py-1.5\">Accommodation</a></li>\n <li><a href=\"#aktivitaeten\" class=\"block py-1.5\">Activities</a></li>\n <li><a href=\"#events\" class=\"block py-1.5\">Events</a></li>\n <li><a href=\"#anreise\" class=\"block py-1.5\">Getting Here</a></li>\n </ul>\n <a href=\"#unterkuenfte\" class=\"mt-4 block text-center bg-sky-500 text-white text-sm font-semibold px-5 py-2.5 rounded-full\">\n Plan Your Trip\n </a>\n </div>\n </nav>\n\n <!-- Hero -->\n <header class=\"relative min-h-[90vh] flex items-center justify-center overflow-hidden pt-16\">\n <div class=\"absolute inset-0 bg-gradient-to-br from-sky-500 via-sky-400 to-amber-300\"></div>\n <div class=\"absolute inset-0 bg-gradient-to-t from-sky-900/20 to-transparent\"></div>\n <!-- Decorative wave shapes -->\n <div class=\"absolute bottom-0 left-0 right-0\">\n <svg viewBox=\"0 0 1440 120\" class=\"w-full text-white\" fill=\"currentColor\" aria-hidden=\"true\">\n <path d=\"M0,64 C360,120 720,0 1080,64 C1260,96 1380,80 1440,64 L1440,120 L0,120 Z\" opacity=\"0.6\"/>\n <path d=\"M0,80 C240,40 480,100 720,80 C960,60 1200,100 1440,80 L1440,120 L0,120 Z\"/>\n </svg>\n </div>\n <div class=\"relative z-10 text-center px-6 max-w-4xl mx-auto\">\n <p class=\"text-sky-100 text-sm font-semibold tracking-widest uppercase mb-4\">Mecklenburg-Vorpommern</p>\n <h1 class=\"text-5xl sm:text-6xl lg:text-7xl font-extrabold text-white mb-6 leading-tight\">\n The Baltic is Calling.\n </h1>\n <p class=\"text-xl sm:text-2xl text-white/90 font-light max-w-2xl mx-auto mb-10 leading-relaxed\">\n Endless beaches, maritime Hanseatic cities, and untouched nature — discover Germany's most beautiful coastline.\n </p>\n <a href=\"#highlights\" class=\"inline-flex items-center gap-2 bg-white text-sky-700 font-bold text-lg px-8 py-4 rounded-full hover:bg-sky-50 transition-colors shadow-lg shadow-sky-900/20\">\n Explore the Region\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17 8l4 4m0 0l-4 4m4-4H3\"/>\n </svg>\n </a>\n <!-- Search bar -->\n <div class=\"mt-10 max-w-xl mx-auto\">\n <div class=\"bg-white/95 backdrop-blur-sm rounded-2xl shadow-xl shadow-sky-900/10 p-2 flex items-center gap-2\">\n <svg class=\"w-5 h-5 text-neutral-400 ml-3 shrink-0\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-4.35-4.35M11 19a8 8 0 100-16 8 8 0 000 16z\"/>\n </svg>\n <input type=\"search\" placeholder=\"What would you like to experience?\" class=\"flex-1 text-neutral-700 placeholder-neutral-400 bg-transparent border-none outline-none py-2.5 px-2 text-base\" aria-label=\"Search experiences\" />\n <button class=\"bg-sky-500 text-white font-semibold px-6 py-2.5 rounded-xl hover:bg-sky-600 transition-colors text-sm\">\n Search\n </button>\n </div>\n </div>\n </div>\n </header>\n\n <!-- Highlights -->\n <section id=\"highlights\" class=\"py-20 sm:py-28 px-6\">\n <div class=\"max-w-7xl mx-auto\">\n <div class=\"text-center mb-14\">\n <h2 class=\"text-3xl sm:text-4xl font-bold text-neutral-900 mb-4\">Discover the Baltic</h2>\n <p class=\"text-lg text-neutral-500 max-w-2xl mx-auto\">Four ways to experience the coast — from white sandy beaches to historic old towns.</p>\n </div>\n <div class=\"grid sm:grid-cols-2 lg:grid-cols-4 gap-6\">\n <!-- Beach Holiday -->\n <article class=\"card-float group rounded-2xl overflow-hidden bg-white border border-neutral-100 shadow-sm\">\n <div class=\"h-52 bg-gradient-to-br from-sky-400 to-sky-300 flex items-end p-5\">\n <svg class=\"w-10 h-10 text-white/80\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M12 3v1m0 16v1m8.66-13.66l-.71.71M4.05 19.95l-.71.71M21 12h-1M4 12H3m16.66 7.66l-.71-.71M4.05 4.05l-.71-.71M16 12a4 4 0 11-8 0 4 4 0 018 0z\"/>\n </svg>\n </div>\n <div class=\"p-5\">\n <h3 class=\"text-lg font-bold text-neutral-900 mb-2\">Beach Holiday</h3>\n <p class=\"text-sm text-neutral-500 mb-3 leading-relaxed\">Fine sand, beach chairs, and crystal-clear water — over 2,000 km of coastline await you.</p>\n <a href=\"#\" class=\"text-sky-600 text-sm font-semibold hover:text-sky-700 transition-colors inline-flex items-center gap-1\">\n Learn more\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"/></svg>\n </a>\n </div>\n </article>\n <!-- Cycling Trails -->\n <article class=\"card-float group rounded-2xl overflow-hidden bg-white border border-neutral-100 shadow-sm\">\n <div class=\"h-52 bg-gradient-to-br from-emerald-500 to-emerald-400 flex items-end p-5\">\n <svg class=\"w-10 h-10 text-white/80\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M13 7h8m0 0v8m0-8l-8 8-4-4-6 6\"/>\n </svg>\n </div>\n <div class=\"p-5\">\n <h3 class=\"text-lg font-bold text-neutral-900 mb-2\">Cycling Trails</h3>\n <p class=\"text-sm text-neutral-500 mb-3 leading-relaxed\">The Baltic Coast Cycle Route leads through dune landscapes, fishing villages, and beech forests.</p>\n <a href=\"#\" class=\"text-sky-600 text-sm font-semibold hover:text-sky-700 transition-colors inline-flex items-center gap-1\">\n Learn more\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"/></svg>\n </a>\n </div>\n </article>\n <!-- Hanseatic Cities -->\n <article class=\"card-float group rounded-2xl overflow-hidden bg-white border border-neutral-100 shadow-sm\">\n <div class=\"h-52 bg-gradient-to-br from-amber-400 to-amber-300 flex items-end p-5\">\n <svg class=\"w-10 h-10 text-white/80\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0H5m14 0h2m-16 0H3m4-8h2m4 0h2m-8 4h2m4 0h2\"/>\n </svg>\n </div>\n <div class=\"p-5\">\n <h3 class=\"text-lg font-bold text-neutral-900 mb-2\">Hanseatic Cities</h3>\n <p class=\"text-sm text-neutral-500 mb-3 leading-relaxed\">Rostock, Stralsund, Wismar — UNESCO World Heritage, Brick Gothic architecture, and maritime flair.</p>\n <a href=\"#\" class=\"text-sky-600 text-sm font-semibold hover:text-sky-700 transition-colors inline-flex items-center gap-1\">\n Learn more\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"/></svg>\n </a>\n </div>\n </article>\n <!-- Nature Parks -->\n <article class=\"card-float group rounded-2xl overflow-hidden bg-white border border-neutral-100 shadow-sm\">\n <div class=\"h-52 bg-gradient-to-br from-orange-400 to-rose-400 flex items-end p-5\">\n <svg class=\"w-10 h-10 text-white/80\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M5 3l7 4 7-4v11l-7 4-7-4V3zm7 4v15\"/>\n </svg>\n </div>\n <div class=\"p-5\">\n <h3 class=\"text-lg font-bold text-neutral-900 mb-2\">Nature Parks</h3>\n <p class=\"text-sm text-neutral-500 mb-3 leading-relaxed\">Jasmund, Darß, and Bodden Landscape — unique nature between chalk cliffs and reed beds.</p>\n <a href=\"#\" class=\"text-sky-600 text-sm font-semibold hover:text-sky-700 transition-colors inline-flex items-center gap-1\">\n Learn more\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"/></svg>\n </a>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n <!-- Accommodation -->\n <section id=\"unterkuenfte\" class=\"py-20 sm:py-28 px-6 bg-sky-50/50\">\n <div class=\"max-w-7xl mx-auto\">\n <div class=\"text-center mb-14\">\n <h2 class=\"text-3xl sm:text-4xl font-bold text-neutral-900 mb-4\">Accommodation on the Baltic</h2>\n <p class=\"text-lg text-neutral-500 max-w-2xl mx-auto\">From beach hotels to campsites — find your perfect accommodation right by the sea.</p>\n </div>\n <div class=\"grid md:grid-cols-3 gap-8\">\n <!-- Hotel -->\n <article class=\"card-float bg-white rounded-2xl overflow-hidden shadow-sm border border-neutral-100\">\n <div class=\"h-52 bg-gradient-to-br from-sky-200 to-sky-100 flex items-center justify-center\">\n <svg class=\"w-16 h-16 text-sky-300\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1\" d=\"M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0H5m14 0h2m-16 0H3m4-8h2m4 0h2m-8 4h2m4 0h2\"/>\n </svg>\n </div>\n <div class=\"p-6\">\n <div class=\"flex items-start justify-between mb-2\">\n <div>\n <h3 class=\"text-lg font-bold text-neutral-900\">Strandhotel Kühlungsborn</h3>\n <p class=\"text-sm text-neutral-400\">Kühlungsborn, Mecklenburg</p>\n </div>\n <div class=\"flex items-center gap-0.5 text-amber-400\" aria-label=\"4 out of 5 stars\">\n <svg class=\"w-4 h-4\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-4 h-4\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-4 h-4\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-4 h-4\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-4 h-4 text-neutral-200\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n </div>\n </div>\n <p class=\"text-sm text-neutral-500 mb-4\">Direct beachfront location with sea views, spa area, and regional cuisine.</p>\n <div class=\"flex items-center justify-between\">\n <p class=\"text-lg font-bold text-neutral-900\">from <span class=\"text-sky-600\">€129</span><span class=\"text-sm font-normal text-neutral-400\">/night</span></p>\n <a href=\"#\" class=\"bg-sky-500 text-white text-sm font-semibold px-4 py-2 rounded-xl hover:bg-sky-600 transition-colors\">Check Availability</a>\n </div>\n </div>\n </article>\n <!-- Holiday Apartment -->\n <article class=\"card-float bg-white rounded-2xl overflow-hidden shadow-sm border border-neutral-100\">\n <div class=\"h-52 bg-gradient-to-br from-amber-100 to-orange-100 flex items-center justify-center\">\n <svg class=\"w-16 h-16 text-amber-300\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1\" d=\"M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6\"/>\n </svg>\n </div>\n <div class=\"p-6\">\n <div class=\"flex items-start justify-between mb-2\">\n <div>\n <h3 class=\"text-lg font-bold text-neutral-900\">Holiday Apartment Seeblick</h3>\n <p class=\"text-sm text-neutral-400\">Binz, Rügen</p>\n </div>\n <div class=\"flex items-center gap-0.5 text-amber-400\" aria-label=\"5 out of 5 stars\">\n <svg class=\"w-4 h-4\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-4 h-4\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-4 h-4\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-4 h-4\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-4 h-4\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n </div>\n </div>\n <p class=\"text-sm text-neutral-500 mb-4\">Spacious apartment with balcony, fully equipped kitchen, and close to the beach.</p>\n <div class=\"flex items-center justify-between\">\n <p class=\"text-lg font-bold text-neutral-900\">from <span class=\"text-sky-600\">€89</span><span class=\"text-sm font-normal text-neutral-400\">/night</span></p>\n <a href=\"#\" class=\"bg-sky-500 text-white text-sm font-semibold px-4 py-2 rounded-xl hover:bg-sky-600 transition-colors\">Check Availability</a>\n </div>\n </div>\n </article>\n <!-- Camping -->\n <article class=\"card-float bg-white rounded-2xl overflow-hidden shadow-sm border border-neutral-100\">\n <div class=\"h-52 bg-gradient-to-br from-emerald-100 to-teal-100 flex items-center justify-center\">\n <svg class=\"w-16 h-16 text-emerald-300\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1\" d=\"M3 21h18M12 3l8 18H4L12 3z\"/>\n </svg>\n </div>\n <div class=\"p-6\">\n <div class=\"flex items-start justify-between mb-2\">\n <div>\n <h3 class=\"text-lg font-bold text-neutral-900\">Camping Ostseeblick</h3>\n <p class=\"text-sm text-neutral-400\">Prerow, Fischland-Darß</p>\n </div>\n <div class=\"flex items-center gap-0.5 text-amber-400\" aria-label=\"4 out of 5 stars\">\n <svg class=\"w-4 h-4\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-4 h-4\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-4 h-4\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-4 h-4\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-4 h-4 text-neutral-200\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n </div>\n </div>\n <p class=\"text-sm text-neutral-500 mb-4\">Nature-close campsite with dune pitches, sanitary building, and beach access.</p>\n <div class=\"flex items-center justify-between\">\n <p class=\"text-lg font-bold text-neutral-900\">from <span class=\"text-sky-600\">€25</span><span class=\"text-sm font-normal text-neutral-400\">/night</span></p>\n <a href=\"#\" class=\"bg-sky-500 text-white text-sm font-semibold px-4 py-2 rounded-xl hover:bg-sky-600 transition-colors\">Check Availability</a>\n </div>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n <!-- Activities -->\n <section id=\"aktivitaeten\" class=\"py-20 sm:py-28 px-6\">\n <div class=\"max-w-7xl mx-auto\">\n <div class=\"text-center mb-14\">\n <h2 class=\"text-3xl sm:text-4xl font-bold text-neutral-900 mb-4\">Activities & Experiences</h2>\n <p class=\"text-lg text-neutral-500 max-w-2xl mx-auto\">The Baltic offers more than just the beach — discover your next adventure.</p>\n </div>\n <div class=\"flex flex-wrap justify-center gap-4\">\n <a href=\"#\" class=\"activity-pill inline-flex items-center gap-3 bg-sky-50 hover:bg-sky-100 text-sky-700 font-semibold px-6 py-4 rounded-2xl border border-sky-100\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M5 3l7 18L15 10l9-3-18-4z\"/></svg>\n Sailing\n </a>\n <a href=\"#\" class=\"activity-pill inline-flex items-center gap-3 bg-emerald-50 hover:bg-emerald-100 text-emerald-700 font-semibold px-6 py-4 rounded-2xl border border-emerald-100\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M13 7h8m0 0v8m0-8l-8 8-4-4-6 6\"/></svg>\n Hiking\n </a>\n <a href=\"#\" class=\"activity-pill inline-flex items-center gap-3 bg-amber-50 hover:bg-amber-100 text-amber-700 font-semibold px-6 py-4 rounded-2xl border border-amber-100\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8v8m0-8V6m0 8v2\"/></svg>\n Cycling\n </a>\n <a href=\"#\" class=\"activity-pill inline-flex items-center gap-3 bg-teal-50 hover:bg-teal-100 text-teal-700 font-semibold px-6 py-4 rounded-2xl border border-teal-100\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999A5.002 5.002 0 0012 4a5 5 0 00-4.9 4.1A4 4 0 003 15z\"/></svg>\n Canoeing\n </a>\n <a href=\"#\" class=\"activity-pill inline-flex items-center gap-3 bg-rose-50 hover:bg-rose-100 text-rose-700 font-semibold px-6 py-4 rounded-2xl border border-rose-100\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z\"/></svg>\n Wellness\n </a>\n <a href=\"#\" class=\"activity-pill inline-flex items-center gap-3 bg-violet-50 hover:bg-violet-100 text-violet-700 font-semibold px-6 py-4 rounded-2xl border border-violet-100\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253\"/></svg>\n Culture\n </a>\n </div>\n </div>\n </section>\n\n <!-- Events -->\n <section id=\"events\" class=\"py-20 sm:py-28 px-6 bg-gradient-to-br from-sky-50 to-amber-50/30\">\n <div class=\"max-w-7xl mx-auto\">\n <div class=\"text-center mb-14\">\n <h2 class=\"text-3xl sm:text-4xl font-bold text-neutral-900 mb-4\">Events & Festivals</h2>\n <p class=\"text-lg text-neutral-500 max-w-2xl mx-auto\">Maritime flair, music, and traditions — experience the Baltic all year round.</p>\n </div>\n <div class=\"grid md:grid-cols-3 gap-8\">\n <!-- Hanse Sail -->\n <article class=\"card-float bg-white rounded-2xl overflow-hidden shadow-sm border border-neutral-100\">\n <div class=\"p-6\">\n <div class=\"flex items-start gap-4\">\n <div class=\"bg-sky-500 text-white rounded-xl px-3 py-2 text-center min-w-[60px] shrink-0\">\n <p class=\"text-2xl font-bold leading-none\">8</p>\n <p class=\"text-xs font-semibold uppercase tracking-wide mt-0.5\">Aug</p>\n </div>\n <div>\n <h3 class=\"text-lg font-bold text-neutral-900 mb-1\">Hanse Sail Rostock</h3>\n <p class=\"text-sm text-neutral-400 mb-2\">Stadthafen Rostock</p>\n <p class=\"text-sm text-neutral-500 leading-relaxed\">One of the world's largest maritime festivals. Hundreds of traditional sailing ships, live music, and fireworks at the harbor.</p>\n <p class=\"text-xs text-sky-600 font-semibold mt-3\">August 8 – 11, 2026</p>\n </div>\n </div>\n </div>\n </article>\n <!-- Usedom Music Festival -->\n <article class=\"card-float bg-white rounded-2xl overflow-hidden shadow-sm border border-neutral-100\">\n <div class=\"p-6\">\n <div class=\"flex items-start gap-4\">\n <div class=\"bg-amber-500 text-white rounded-xl px-3 py-2 text-center min-w-[60px] shrink-0\">\n <p class=\"text-2xl font-bold leading-none\">19</p>\n <p class=\"text-xs font-semibold uppercase tracking-wide mt-0.5\">Sep</p>\n </div>\n <div>\n <h3 class=\"text-lg font-bold text-neutral-900 mb-1\">Usedom Music Festival</h3>\n <p class=\"text-sm text-neutral-400 mb-2\">Various venues, Usedom</p>\n <p class=\"text-sm text-neutral-500 leading-relaxed\">Chamber music and orchestral concerts in historic churches, castles, and the Baltic Philharmonic.</p>\n <p class=\"text-xs text-amber-600 font-semibold mt-3\">September 19 – October 10, 2026</p>\n </div>\n </div>\n </div>\n </article>\n <!-- Fisherman's Festival -->\n <article class=\"card-float bg-white rounded-2xl overflow-hidden shadow-sm border border-neutral-100\">\n <div class=\"p-6\">\n <div class=\"flex items-start gap-4\">\n <div class=\"bg-emerald-500 text-white rounded-xl px-3 py-2 text-center min-w-[60px] shrink-0\">\n <p class=\"text-2xl font-bold leading-none\">4</p>\n <p class=\"text-xs font-semibold uppercase tracking-wide mt-0.5\">Jul</p>\n </div>\n <div>\n <h3 class=\"text-lg font-bold text-neutral-900 mb-1\">Fisherman's Festival Warnemünde</h3>\n <p class=\"text-sm text-neutral-400 mb-2\">Alter Strom, Warnemünde</p>\n <p class=\"text-sm text-neutral-500 leading-relaxed\">Traditional festival with fresh fish, cutter regatta, shanty choirs, and fisherman's jousting on the Alter Strom.</p>\n <p class=\"text-xs text-emerald-600 font-semibold mt-3\">July 4 – 6, 2026</p>\n </div>\n </div>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n <!-- Map & Getting Here -->\n <section id=\"anreise\" class=\"py-20 sm:py-28 px-6\">\n <div class=\"max-w-7xl mx-auto\">\n <div class=\"text-center mb-14\">\n <h2 class=\"text-3xl sm:text-4xl font-bold text-neutral-900 mb-4\">Getting Here & Orientation</h2>\n <p class=\"text-lg text-neutral-500 max-w-2xl mx-auto\">The Baltic is closer than you think — several routes lead to the sea.</p>\n </div>\n <!-- Map placeholder -->\n <div class=\"bg-gradient-to-br from-sky-100 to-sky-50 rounded-2xl h-64 sm:h-80 flex items-center justify-center mb-12 border border-sky-200/50\">\n <div class=\"text-center\">\n <svg class=\"w-12 h-12 text-sky-300 mx-auto mb-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\"/>\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\"/>\n </svg>\n <p class=\"text-sky-400 font-medium text-sm\">Interactive map — embed map service here</p>\n </div>\n </div>\n <!-- Transport options -->\n <div class=\"grid md:grid-cols-3 gap-8\">\n <div class=\"text-center p-6\">\n <div class=\"w-14 h-14 bg-sky-100 rounded-2xl flex items-center justify-center mx-auto mb-4\">\n <svg class=\"w-7 h-7 text-sky-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z\"/>\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10m10 0H3m10 0h2m4 0a1 1 0 001-1v-3a1 1 0 00-.4-.8l-3-2.25A1 1 0 0016 9h-3v7\"/>\n </svg>\n </div>\n <h3 class=\"text-lg font-bold text-neutral-900 mb-2\">By Car</h3>\n <p class=\"text-sm text-neutral-500 leading-relaxed\">Via the A19 (Berlin–Rostock) or A20 (Lübeck–Stettin). Well-developed federal roads along the entire coast.</p>\n <p class=\"text-xs text-sky-600 font-semibold mt-3\">Berlin to Rostock approx. 2.5 hrs</p>\n </div>\n <div class=\"text-center p-6\">\n <div class=\"w-14 h-14 bg-amber-100 rounded-2xl flex items-center justify-center mx-auto mb-4\">\n <svg class=\"w-7 h-7 text-amber-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M8 7h8M8 11h8m-4 4h4M4 19h16a1 1 0 001-1V6a1 1 0 00-1-1H4a1 1 0 00-1 1v12a1 1 0 001 1z\"/>\n </svg>\n </div>\n <h3 class=\"text-lg font-bold text-neutral-900 mb-2\">By Train</h3>\n <p class=\"text-sm text-neutral-500 leading-relaxed\">IC/ICE connections to Rostock, Stralsund, and Greifswald. Regional trains serve the coastal towns.</p>\n <p class=\"text-xs text-amber-600 font-semibold mt-3\">Hamburg to Rostock approx. 2 hrs (IC)</p>\n </div>\n <div class=\"text-center p-6\">\n <div class=\"w-14 h-14 bg-emerald-100 rounded-2xl flex items-center justify-center mx-auto mb-4\">\n <svg class=\"w-7 h-7 text-emerald-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M12 19l9 2-9-18-9 18 9-2zm0 0v-8\"/>\n </svg>\n </div>\n <h3 class=\"text-lg font-bold text-neutral-900 mb-2\">By Plane</h3>\n <p class=\"text-sm text-neutral-500 leading-relaxed\">Rostock-Laage Airport (RLG) with seasonal connections. Alternatively Hamburg (HAM) with train connections.</p>\n <p class=\"text-xs text-emerald-600 font-semibold mt-3\">Rostock-Laage to coast approx. 40 min</p>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Newsletter -->\n <section class=\"py-20 sm:py-24 px-6 bg-gradient-to-r from-sky-500 to-sky-600\">\n <div class=\"max-w-2xl mx-auto text-center\">\n <h2 class=\"text-3xl sm:text-4xl font-bold text-white mb-4\">Stay Up to Date</h2>\n <p class=\"text-sky-100 text-lg mb-8\">Receive insider tips, event updates, and exclusive offers straight to your inbox.</p>\n <form class=\"flex flex-col sm:flex-row gap-3 max-w-lg mx-auto\" aria-label=\"Newsletter signup\">\n <label for=\"newsletter-email\" class=\"sr-only\">Email address</label>\n <input id=\"newsletter-email\" type=\"email\" placeholder=\"Your email address\" required class=\"flex-1 bg-white/95 text-neutral-800 placeholder-neutral-400 rounded-xl px-5 py-3.5 text-base border-none outline-none focus:ring-2 focus:ring-white/50\" />\n <button type=\"submit\" class=\"bg-amber-400 hover:bg-amber-500 text-neutral-900 font-bold px-7 py-3.5 rounded-xl transition-colors text-base whitespace-nowrap\">\n Subscribe\n </button>\n </form>\n <p class=\"text-sky-200 text-xs mt-4\">No spam. Unsubscribe anytime. We respect your privacy.</p>\n </div>\n </section>\n\n <!-- Footer -->\n <footer class=\"bg-neutral-900 text-neutral-400 py-16 px-6\">\n <div class=\"max-w-7xl mx-auto\">\n <div class=\"grid sm:grid-cols-2 lg:grid-cols-4 gap-10 mb-12\">\n <!-- Region -->\n <div>\n <h3 class=\"text-white font-bold text-sm uppercase tracking-wider mb-4\">Region</h3>\n <ul class=\"space-y-2.5 text-sm\">\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Rügen</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Usedom</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Fischland-Darß-Zingst</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Kühlungsborn</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Warnemünde</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Wismar & Surroundings</a></li>\n </ul>\n </div>\n <!-- Service -->\n <div>\n <h3 class=\"text-white font-bold text-sm uppercase tracking-wider mb-4\">Service</h3>\n <ul class=\"space-y-2.5 text-sm\">\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Book Accommodation</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Trip Planning</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Weather & Water Temperature</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Accessibility</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Tourist Information</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">FAQ</a></li>\n </ul>\n </div>\n <!-- Social -->\n <div>\n <h3 class=\"text-white font-bold text-sm uppercase tracking-wider mb-4\">Follow Us</h3>\n <div class=\"flex items-center gap-3 mb-6\">\n <a href=\"#\" class=\"w-10 h-10 bg-neutral-800 rounded-xl flex items-center justify-center hover:bg-sky-600 transition-colors\" aria-label=\"Instagram\">\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z\"/></svg>\n </a>\n <a href=\"#\" class=\"w-10 h-10 bg-neutral-800 rounded-xl flex items-center justify-center hover:bg-sky-600 transition-colors\" aria-label=\"Facebook\">\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z\"/></svg>\n </a>\n <a href=\"#\" class=\"w-10 h-10 bg-neutral-800 rounded-xl flex items-center justify-center hover:bg-sky-600 transition-colors\" aria-label=\"YouTube\">\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z\"/></svg>\n </a>\n </div>\n <p class=\"text-sm text-neutral-500\">#DiscoverTheBaltic<br/>#MyBalticHoliday</p>\n </div>\n <!-- Partners -->\n <div>\n <h3 class=\"text-white font-bold text-sm uppercase tracking-wider mb-4\">Partners</h3>\n <div class=\"grid grid-cols-2 gap-3\">\n <div class=\"bg-neutral-800 rounded-xl h-12 flex items-center justify-center text-xs text-neutral-500\">Tourism Board</div>\n <div class=\"bg-neutral-800 rounded-xl h-12 flex items-center justify-center text-xs text-neutral-500\">Deutsche Bahn</div>\n <div class=\"bg-neutral-800 rounded-xl h-12 flex items-center justify-center text-xs text-neutral-500\">ADAC</div>\n <div class=\"bg-neutral-800 rounded-xl h-12 flex items-center justify-center text-xs text-neutral-500\">DJH</div>\n </div>\n </div>\n </div>\n <div class=\"border-t border-neutral-800 pt-8 flex flex-col sm:flex-row items-center justify-between gap-4\">\n <a href=\"#\" class=\"text-lg font-bold text-white\">\n Discover the<span class=\"text-amber-400\"> Baltic</span>\n </a>\n <p class=\"text-sm text-neutral-500\">&copy; 2026 Discover the Baltic. All rights reserved.</p>\n <div class=\"flex items-center gap-6 text-sm\">\n <a href=\"#\" class=\"hover:text-white transition-colors\">Legal Notice</a>\n <a href=\"#\" class=\"hover:text-white transition-colors\">Privacy Policy</a>\n <a href=\"#\" class=\"hover:text-white transition-colors\">Terms & Conditions</a>\n </div>\n </div>\n </div>\n </footer>\n\n <!-- Mobile menu script -->\n <script>\n const toggle = document.getElementById('menu-toggle');\n const menu = document.getElementById('mobile-menu');\n toggle.addEventListener('click', () => {\n const open = !menu.classList.contains('hidden');\n menu.classList.toggle('hidden');\n toggle.setAttribute('aria-expanded', String(!open));\n toggle.setAttribute('aria-label', open ? 'Open menu' : 'Close menu');\n });\n // Close menu on link click\n menu.querySelectorAll('a').forEach(link => {\n link.addEventListener('click', () => {\n menu.classList.add('hidden');\n toggle.setAttribute('aria-expanded', 'false');\n toggle.setAttribute('aria-label', 'Open menu');\n });\n });\n </script>\n\n</body>\n</html>"
24959
+ },
24960
+ {
24961
+ "id": "portfolio/designer",
24962
+ "title": "Portfolio Designer",
24963
+ "summary": "Light, vibrant product designer portfolio with full-width case studies, skill matrix, testimonials, and personal bio.",
24964
+ "description": "A portfolio template for UI/UX and product designers. Centered around large case study cards with impact metrics, complemented by a skill matrix, colleague testimonials, and a warm personal about section.",
24965
+ "category": "portfolio",
24966
+ "style": "modern",
24967
+ "tags": [
24968
+ "portfolio",
24969
+ "designer",
24970
+ "ux",
24971
+ "ui",
24972
+ "product-design",
24973
+ "creative"
24974
+ ],
24975
+ "patterns": [
24976
+ "navbar/base",
24977
+ "hero/base",
24978
+ "cards/base",
24979
+ "features/base",
24980
+ "testimonials/base",
24981
+ "contact/base",
24982
+ "footer/base"
24983
+ ],
24984
+ "sections": [
24985
+ "navbar",
24986
+ "hero",
24987
+ "case-studies",
24988
+ "skills",
24989
+ "about",
24990
+ "testimonials",
24991
+ "contact",
24992
+ "footer"
24993
+ ],
24994
+ "features": {
24995
+ "responsive": true,
24996
+ "darkMode": false,
24997
+ "animations": false,
24998
+ "formHandling": false
24999
+ },
25000
+ "files": {
25001
+ "html": "./designer.html",
25002
+ "preview": "./designer.png"
25003
+ },
25004
+ "install": {
25005
+ "copyPasteReady": true,
25006
+ "tailwindCdn": true,
25007
+ "vanillaJs": true,
25008
+ "notes": [
25009
+ "Case study cards are the centerpiece — add real project details",
25010
+ "Skill tags should reflect your actual expertise",
25011
+ "Testimonials work best with real colleague quotes"
25012
+ ]
25013
+ },
25014
+ "governance": {
25015
+ "status": "published",
25016
+ "quality": "flagship",
25017
+ "owner": "design-system",
25018
+ "updatedAt": "2026-03-20"
25019
+ },
25020
+ "html": "<!DOCTYPE html>\n<html lang=\"en\" class=\"scroll-smooth\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Sarah Kim — Product Designer</title>\n <meta name=\"description\" content=\"Senior product designer crafting intuitive, impactful digital experiences. Previously at Figma and Spotify.\" />\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n coral: { DEFAULT: '#f97316', light: '#fb923c', soft: '#fff7ed' },\n violet: { DEFAULT: '#7c3aed', light: '#a78bfa' },\n },\n },\n },\n };\n </script>\n <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\" />\n <style>\n body { font-family: 'Inter', system-ui, sans-serif; }\n </style>\n</head>\n<body class=\"bg-white text-slate-700 antialiased\">\n\n <!-- Navbar -->\n <nav class=\"fixed top-0 inset-x-0 z-50 bg-white/80 backdrop-blur-md border-b border-slate-100\" aria-label=\"Main navigation\">\n <div class=\"mx-auto max-w-6xl flex items-center justify-between px-6 py-4\">\n <a href=\"#\" class=\"text-lg font-bold text-slate-900 tracking-tight\">Sarah Kim</a>\n <ul class=\"hidden md:flex items-center gap-8 text-sm font-medium\" role=\"list\">\n <li><a href=\"#case-studies\" class=\"text-slate-500 hover:text-slate-900 transition-colors\">Case Studies</a></li>\n <li><a href=\"#about\" class=\"text-slate-500 hover:text-slate-900 transition-colors\">About</a></li>\n <li><a href=\"#contact\" class=\"text-slate-500 hover:text-slate-900 transition-colors\">Contact</a></li>\n <li><a href=\"/resume.pdf\" class=\"text-coral font-semibold hover:text-coral-light transition-colors\">Resume</a></li>\n </ul>\n <button\n type=\"button\"\n class=\"md:hidden p-2 text-slate-500 hover:text-slate-900\"\n aria-label=\"Open menu\"\n aria-expanded=\"false\"\n id=\"menu-toggle\"\n >\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16M4 18h16\" />\n </svg>\n </button>\n </div>\n <!-- Mobile menu -->\n <div id=\"mobile-menu\" class=\"hidden md:hidden border-t border-slate-100 bg-white/95 backdrop-blur-md\">\n <ul class=\"flex flex-col gap-1 px-6 py-4 text-sm font-medium\" role=\"list\">\n <li><a href=\"#case-studies\" class=\"block py-2 text-slate-500 hover:text-slate-900 transition-colors\">Case Studies</a></li>\n <li><a href=\"#about\" class=\"block py-2 text-slate-500 hover:text-slate-900 transition-colors\">About</a></li>\n <li><a href=\"#contact\" class=\"block py-2 text-slate-500 hover:text-slate-900 transition-colors\">Contact</a></li>\n <li><a href=\"/resume.pdf\" class=\"block py-2 text-coral font-semibold\">Resume</a></li>\n </ul>\n </div>\n </nav>\n\n <main>\n <!-- Hero -->\n <section class=\"min-h-[85vh] flex items-center pt-20\" aria-label=\"Introduction\">\n <div class=\"mx-auto max-w-6xl px-6 py-24\">\n <p class=\"text-sm font-semibold tracking-widest uppercase text-coral mb-6\">Product Designer</p>\n <h1 class=\"text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-extrabold text-slate-900 tracking-tight leading-[1.08] max-w-4xl\">\n I design products people love to use.\n </h1>\n <p class=\"mt-6 text-lg sm:text-xl text-slate-500 leading-relaxed max-w-2xl\">\n Senior Product Designer at <span class=\"text-slate-900 font-semibold\">Figma</span>, previously at\n <span class=\"text-slate-900 font-semibold\">Spotify</span>. I turn complex problems into simple,\n delightful experiences that drive real business outcomes.\n </p>\n <div class=\"mt-10 flex flex-wrap gap-4\">\n <a href=\"#case-studies\" class=\"inline-flex items-center gap-2 rounded-2xl bg-slate-900 text-white px-7 py-3.5 text-sm font-semibold hover:bg-slate-800 transition-colors\">\n View Case Studies\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\" /></svg>\n </a>\n <a href=\"/resume.pdf\" class=\"inline-flex items-center gap-2 rounded-2xl border-2 border-slate-200 text-slate-700 px-7 py-3.5 text-sm font-semibold hover:border-slate-300 hover:bg-slate-50 transition-colors\">\n Download Resume\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" /></svg>\n </a>\n </div>\n </div>\n </section>\n\n <!-- Case Studies -->\n <section id=\"case-studies\" class=\"py-24\" aria-labelledby=\"cases-heading\">\n <div class=\"mx-auto max-w-6xl px-6\">\n <h2 id=\"cases-heading\" class=\"text-sm font-semibold tracking-widest uppercase text-coral mb-16\">Selected Work</h2>\n\n <!-- Case Study 1 -->\n <article class=\"mb-20 grid gap-8 lg:grid-cols-2 lg:gap-12 items-center\">\n <div class=\"bg-gradient-to-br from-orange-100 via-orange-50 to-amber-50 rounded-2xl aspect-[4/3] flex items-center justify-center\">\n <div class=\"w-3/4 h-2/3 rounded-xl bg-white/60 backdrop-blur-sm border border-white/80 shadow-lg\"></div>\n </div>\n <div class=\"lg:py-8\">\n <p class=\"text-xs font-semibold tracking-widest uppercase text-slate-400 mb-3\">Figma &middot; Lead Designer</p>\n <h3 class=\"text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight\">Reimagining the Onboarding Experience</h3>\n <p class=\"mt-4 text-slate-500 leading-relaxed\">\n Led the end-to-end redesign of Figma's onboarding flow, reducing time-to-first-design from 12 minutes to under 4. Conducted 30+ user interviews and ran a 6-week iterative prototyping sprint with engineering.\n </p>\n <p class=\"mt-4 text-2xl font-bold text-coral\">Increased activation by 34%</p>\n <ul class=\"mt-6 flex flex-wrap gap-2\" role=\"list\" aria-label=\"Skills used\">\n <li class=\"text-xs font-medium bg-slate-100 text-slate-600 rounded-full px-3 py-1\">User Research</li>\n <li class=\"text-xs font-medium bg-slate-100 text-slate-600 rounded-full px-3 py-1\">Prototyping</li>\n <li class=\"text-xs font-medium bg-slate-100 text-slate-600 rounded-full px-3 py-1\">Design Systems</li>\n </ul>\n </div>\n </article>\n\n <!-- Case Study 2 -->\n <article class=\"mb-20 grid gap-8 lg:grid-cols-2 lg:gap-12 items-center\">\n <div class=\"lg:order-2 bg-gradient-to-br from-indigo-100 via-violet-50 to-purple-50 rounded-2xl aspect-[4/3] flex items-center justify-center\">\n <div class=\"w-3/4 h-2/3 rounded-xl bg-white/60 backdrop-blur-sm border border-white/80 shadow-lg\"></div>\n </div>\n <div class=\"lg:order-1 lg:py-8\">\n <p class=\"text-xs font-semibold tracking-widest uppercase text-slate-400 mb-3\">Spotify &middot; Senior Designer</p>\n <h3 class=\"text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight\">Collaborative Playlist Creation</h3>\n <p class=\"mt-4 text-slate-500 leading-relaxed\">\n Designed the collaborative playlist feature that lets friends add, vote, and reorder songs in real time. Built and validated 4 interaction models through 200+ usability tests before shipping to 150M+ users.\n </p>\n <p class=\"mt-4 text-2xl font-bold text-violet\">Grew shared playlists by 52%</p>\n <ul class=\"mt-6 flex flex-wrap gap-2\" role=\"list\" aria-label=\"Skills used\">\n <li class=\"text-xs font-medium bg-slate-100 text-slate-600 rounded-full px-3 py-1\">Interaction Design</li>\n <li class=\"text-xs font-medium bg-slate-100 text-slate-600 rounded-full px-3 py-1\">Usability Testing</li>\n <li class=\"text-xs font-medium bg-slate-100 text-slate-600 rounded-full px-3 py-1\">Motion Design</li>\n </ul>\n </div>\n </article>\n\n <!-- Case Study 3 -->\n <article class=\"grid gap-8 lg:grid-cols-2 lg:gap-12 items-center\">\n <div class=\"bg-gradient-to-br from-teal-100 via-emerald-50 to-cyan-50 rounded-2xl aspect-[4/3] flex items-center justify-center\">\n <div class=\"w-3/4 h-2/3 rounded-xl bg-white/60 backdrop-blur-sm border border-white/80 shadow-lg\"></div>\n </div>\n <div class=\"lg:py-8\">\n <p class=\"text-xs font-semibold tracking-widest uppercase text-slate-400 mb-3\">Spotify &middot; Product Designer</p>\n <h3 class=\"text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight\">Podcast Discovery Redesign</h3>\n <p class=\"mt-4 text-slate-500 leading-relaxed\">\n Rethought the podcast browsing experience to surface relevant content earlier. Designed a card-based exploration model informed by analysis of 2M+ listening patterns and A/B tested across 12 markets.\n </p>\n <p class=\"mt-4 text-2xl font-bold text-teal-600\">Boosted discovery rate by 28%</p>\n <ul class=\"mt-6 flex flex-wrap gap-2\" role=\"list\" aria-label=\"Skills used\">\n <li class=\"text-xs font-medium bg-slate-100 text-slate-600 rounded-full px-3 py-1\">Data-Informed Design</li>\n <li class=\"text-xs font-medium bg-slate-100 text-slate-600 rounded-full px-3 py-1\">A/B Testing</li>\n <li class=\"text-xs font-medium bg-slate-100 text-slate-600 rounded-full px-3 py-1\">Content Strategy</li>\n </ul>\n </div>\n </article>\n </div>\n </section>\n\n <!-- Skills -->\n <section class=\"py-24 bg-slate-50\" aria-labelledby=\"skills-heading\">\n <div class=\"mx-auto max-w-6xl px-6\">\n <div class=\"grid gap-12 lg:grid-cols-5\">\n <div class=\"lg:col-span-2\">\n <h2 id=\"skills-heading\" class=\"text-3xl sm:text-4xl font-bold text-slate-900 tracking-tight\">What I Do</h2>\n <p class=\"mt-4 text-slate-500 leading-relaxed\">\n I operate across the full design process — from early research and strategy through to pixel-perfect delivery and design system governance.\n </p>\n </div>\n <div class=\"lg:col-span-3 grid sm:grid-cols-2 gap-10\">\n <div>\n <h3 class=\"text-xs font-semibold tracking-widest uppercase text-coral mb-4\">Research</h3>\n <ul class=\"space-y-2.5 text-slate-600\" role=\"list\">\n <li class=\"flex items-center gap-2.5\">\n <span class=\"w-1 h-1 rounded-full bg-coral shrink-0\" aria-hidden=\"true\"></span>User Interviews\n </li>\n <li class=\"flex items-center gap-2.5\">\n <span class=\"w-1 h-1 rounded-full bg-coral shrink-0\" aria-hidden=\"true\"></span>Surveys &amp; Analytics\n </li>\n <li class=\"flex items-center gap-2.5\">\n <span class=\"w-1 h-1 rounded-full bg-coral shrink-0\" aria-hidden=\"true\"></span>Usability Testing\n </li>\n <li class=\"flex items-center gap-2.5\">\n <span class=\"w-1 h-1 rounded-full bg-coral shrink-0\" aria-hidden=\"true\"></span>Competitive Analysis\n </li>\n </ul>\n </div>\n <div>\n <h3 class=\"text-xs font-semibold tracking-widest uppercase text-violet mb-4\">Design</h3>\n <ul class=\"space-y-2.5 text-slate-600\" role=\"list\">\n <li class=\"flex items-center gap-2.5\">\n <span class=\"w-1 h-1 rounded-full bg-violet shrink-0\" aria-hidden=\"true\"></span>Wireframing\n </li>\n <li class=\"flex items-center gap-2.5\">\n <span class=\"w-1 h-1 rounded-full bg-violet shrink-0\" aria-hidden=\"true\"></span>High-Fidelity Prototyping\n </li>\n <li class=\"flex items-center gap-2.5\">\n <span class=\"w-1 h-1 rounded-full bg-violet shrink-0\" aria-hidden=\"true\"></span>Design Systems\n </li>\n <li class=\"flex items-center gap-2.5\">\n <span class=\"w-1 h-1 rounded-full bg-violet shrink-0\" aria-hidden=\"true\"></span>Interaction &amp; Motion\n </li>\n </ul>\n </div>\n <div class=\"sm:col-span-2\">\n <h3 class=\"text-xs font-semibold tracking-widest uppercase text-teal-600 mb-4\">Tools</h3>\n <ul class=\"flex flex-wrap gap-2.5\" role=\"list\">\n <li class=\"text-sm font-medium bg-white border border-slate-200 text-slate-600 rounded-full px-4 py-1.5\">Figma</li>\n <li class=\"text-sm font-medium bg-white border border-slate-200 text-slate-600 rounded-full px-4 py-1.5\">Framer</li>\n <li class=\"text-sm font-medium bg-white border border-slate-200 text-slate-600 rounded-full px-4 py-1.5\">Principle</li>\n <li class=\"text-sm font-medium bg-white border border-slate-200 text-slate-600 rounded-full px-4 py-1.5\">Maze</li>\n <li class=\"text-sm font-medium bg-white border border-slate-200 text-slate-600 rounded-full px-4 py-1.5\">Miro</li>\n <li class=\"text-sm font-medium bg-white border border-slate-200 text-slate-600 rounded-full px-4 py-1.5\">Notion</li>\n </ul>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <!-- About -->\n <section id=\"about\" class=\"py-24\" aria-labelledby=\"about-heading\">\n <div class=\"mx-auto max-w-6xl px-6\">\n <div class=\"grid gap-12 lg:grid-cols-5 items-center\">\n <div class=\"lg:col-span-2 flex justify-center\">\n <div class=\"w-72 h-72 sm:w-80 sm:h-80 rounded-2xl bg-gradient-to-br from-orange-100 via-rose-50 to-violet-100 flex items-center justify-center\">\n <span class=\"text-slate-400 text-sm\">Photo</span>\n </div>\n </div>\n <div class=\"lg:col-span-3\">\n <h2 id=\"about-heading\" class=\"text-3xl sm:text-4xl font-bold text-slate-900 tracking-tight mb-6\">A bit about me</h2>\n <div class=\"space-y-4 text-slate-500 leading-relaxed\">\n <p>\n I fell into design through architecture school in Seoul, where I learned that every space — physical or digital — should respect the people who inhabit it. After moving to San Francisco, I spent two years at a tiny startup where I wore every hat imaginable, then joined Spotify's growth team, where I discovered how much I love solving problems at scale.\n </p>\n <p>\n At Figma, I focus on the new-user journey and design system tooling. I'm most energized when I can pair deep user research with rapid prototyping — the moment a messy insight clicks into a clear interface is what keeps me in this craft.\n </p>\n <p>\n When I'm not pushing pixels, you'll find me experimenting with ceramics, running trails in the Marin Headlands, or hunting down the best <span class=\"text-slate-900 font-medium\">jjajangmyeon</span> in the Bay Area. I also volunteer as a design mentor with Out in Tech.\n </p>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Testimonials -->\n <section class=\"py-24 bg-slate-50\" aria-labelledby=\"testimonials-heading\">\n <div class=\"mx-auto max-w-6xl px-6\">\n <h2 id=\"testimonials-heading\" class=\"text-sm font-semibold tracking-widest uppercase text-coral mb-12\">Kind Words</h2>\n <div class=\"grid gap-8 md:grid-cols-2\">\n <blockquote class=\"bg-white rounded-2xl p-8 sm:p-10 border border-slate-100\">\n <p class=\"text-slate-700 leading-relaxed text-lg\">\n \"Sarah has this rare ability to hold the entire problem space in her head while still sweating every pixel. During the onboarding redesign, she'd present research findings in the morning and have a testable prototype by lunch. The team shipped faster because of her clarity.\"\n </p>\n <footer class=\"mt-6 flex items-center gap-4\">\n <div class=\"w-10 h-10 rounded-full bg-gradient-to-br from-orange-200 to-rose-200\" aria-hidden=\"true\"></div>\n <div>\n <p class=\"text-sm font-semibold text-slate-900\">James Okafor</p>\n <p class=\"text-sm text-slate-400\">Engineering Manager, Figma</p>\n </div>\n </footer>\n </blockquote>\n <blockquote class=\"bg-white rounded-2xl p-8 sm:p-10 border border-slate-100\">\n <p class=\"text-slate-700 leading-relaxed text-lg\">\n \"I've worked with many designers, and Sarah stands out because she genuinely listens. She doesn't just hand off mockups — she sits with engineers, understands constraints, and finds solutions that are better than what anyone imagined. The collaborative playlist feature wouldn't exist without her persistence.\"\n </p>\n <footer class=\"mt-6 flex items-center gap-4\">\n <div class=\"w-10 h-10 rounded-full bg-gradient-to-br from-violet-200 to-indigo-200\" aria-hidden=\"true\"></div>\n <div>\n <p class=\"text-sm font-semibold text-slate-900\">Lena Bergstrom</p>\n <p class=\"text-sm text-slate-400\">VP of Product, Spotify</p>\n </div>\n </footer>\n </blockquote>\n </div>\n </div>\n </section>\n\n <!-- Contact -->\n <section id=\"contact\" class=\"py-24\" aria-labelledby=\"contact-heading\">\n <div class=\"mx-auto max-w-2xl px-6 text-center\">\n <h2 id=\"contact-heading\" class=\"text-3xl sm:text-4xl font-bold text-slate-900 tracking-tight\">Let's work together</h2>\n <p class=\"mt-4 text-slate-500 leading-relaxed\">\n I'm always interested in challenging product problems, design leadership roles, and meaningful freelance projects.\n </p>\n <a href=\"mailto:sarah@sarahkim.design\" class=\"mt-8 inline-block text-2xl sm:text-3xl font-bold text-coral hover:text-coral-light transition-colors\">\n sarah@sarahkim.design\n </a>\n <ul class=\"mt-10 flex justify-center gap-6\" role=\"list\" aria-label=\"Social links\">\n <li>\n <a href=\"#\" class=\"text-slate-400 hover:text-coral transition-colors\" aria-label=\"LinkedIn profile\">\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z\" /></svg>\n </a>\n </li>\n <li>\n <a href=\"#\" class=\"text-slate-400 hover:text-coral transition-colors\" aria-label=\"Dribbble profile\">\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 0C5.375 0 0 5.375 0 12s5.375 12 12 12 12-5.375 12-12S18.625 0 12 0zm7.938 5.563a10.18 10.18 0 012.25 6.375c-.328-.063-3.625-.75-6.938-.313-.063-.188-.125-.313-.188-.5-.188-.438-.375-.875-.625-1.313 3.688-1.5 5.313-3.688 5.5-3.938v-.312zM12 1.813c2.688 0 5.125 1.063 6.938 2.75-.188.25-1.688 2.25-5.25 3.563-1.625-3-3.438-5.5-3.75-5.875A10.3 10.3 0 0112 1.812zM8.063 3.063c.25.375 2.063 2.875 3.75 5.813-4.75 1.25-8.938 1.25-9.375 1.25a10.24 10.24 0 015.625-7.063zM1.813 12v-.375c.438.063 5.313.063 10.438-1.438.313.563.563 1.125.813 1.688-.125.063-.313.063-.438.125-5.375 1.75-8.25 6.5-8.438 6.813A10.18 10.18 0 011.813 12zM12 22.188c-2.438 0-4.688-.813-6.5-2.25.188-.313 2.25-4.375 8.188-6.375h.063c1.5 4.063 2.125 7.5 2.25 8.25a10.4 10.4 0 01-4 .375zm5.75-1.813c-.125-.5-.625-3.813-2.063-7.813 3.063-.5 5.75.313 6.125.438a10.23 10.23 0 01-4.063 7.375z\" /></svg>\n </a>\n </li>\n <li>\n <a href=\"#\" class=\"text-slate-400 hover:text-coral transition-colors\" aria-label=\"X (Twitter) profile\">\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\" /></svg>\n </a>\n </li>\n </ul>\n <p class=\"mt-8 text-sm text-slate-400\">Based in San Francisco. Open to freelance.</p>\n </div>\n </section>\n </main>\n\n <!-- Footer -->\n <footer class=\"border-t border-slate-100 py-8\">\n <div class=\"mx-auto max-w-6xl px-6 text-center\">\n <p class=\"text-sm text-slate-400\">\n Designed and built by Sarah Kim\n </p>\n </div>\n </footer>\n\n <script>\n const toggle = document.getElementById('menu-toggle');\n const menu = document.getElementById('mobile-menu');\n if (toggle && menu) {\n toggle.addEventListener('click', () => {\n const expanded = toggle.getAttribute('aria-expanded') === 'true';\n toggle.setAttribute('aria-expanded', String(!expanded));\n menu.classList.toggle('hidden');\n });\n menu.querySelectorAll('a').forEach(link => {\n link.addEventListener('click', () => {\n menu.classList.add('hidden');\n toggle.setAttribute('aria-expanded', 'false');\n });\n });\n }\n </script>\n</body>\n</html>\n"
25021
+ },
25022
+ {
25023
+ "id": "portfolio/developer",
25024
+ "title": "Portfolio Developer",
25025
+ "summary": "Dark developer portfolio with terminal-inspired design, project showcase, tech stack badges, and timeline experience section.",
25026
+ "description": "A personal portfolio template for developers featuring a dark theme with cyan accents, monospace typography touches, project cards with tech tags, experience timeline, blog previews, and contact section.",
25027
+ "category": "portfolio",
25028
+ "style": "dark",
25029
+ "tags": [
25030
+ "portfolio",
25031
+ "developer",
25032
+ "personal-website",
25033
+ "dark-theme",
25034
+ "tech"
25035
+ ],
25036
+ "patterns": [
25037
+ "navbar/base",
25038
+ "hero/base",
25039
+ "cards/base",
25040
+ "steps/base",
25041
+ "blog/base",
25042
+ "contact/base",
25043
+ "footer/base"
25044
+ ],
25045
+ "sections": [
25046
+ "navbar",
25047
+ "hero",
25048
+ "tech-stack",
25049
+ "projects",
25050
+ "experience",
25051
+ "blog",
25052
+ "contact",
25053
+ "footer"
25054
+ ],
25055
+ "features": {
25056
+ "responsive": true,
25057
+ "darkMode": false,
25058
+ "animations": false,
25059
+ "formHandling": false
25060
+ },
25061
+ "files": {
25062
+ "html": "./developer.html",
25063
+ "preview": "./developer.png"
25064
+ },
25065
+ "install": {
25066
+ "copyPasteReady": true,
25067
+ "tailwindCdn": true,
25068
+ "vanillaJs": true,
25069
+ "notes": [
25070
+ "Dark theme is the default design",
25071
+ "Replace Alex Chen with your name and details",
25072
+ "Project links point to"
25073
+ ]
25074
+ },
25075
+ "governance": {
25076
+ "status": "published",
25077
+ "quality": "flagship",
25078
+ "owner": "design-system",
25079
+ "updatedAt": "2026-03-20"
25080
+ },
25081
+ "html": "<!DOCTYPE html>\n<html lang=\"en\" class=\"scroll-smooth\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Alex Chen — Full-Stack Engineer</title>\n <meta name=\"description\" content=\"Full-stack engineer building reliable systems with TypeScript, Go, and cloud-native infrastructure.\" />\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <script>\n tailwind.config = {\n theme: {\n extend: {\n fontFamily: {\n mono: ['\"JetBrains Mono\"', 'ui-monospace', 'SFMono-Regular', 'monospace'],\n },\n colors: {\n accent: { DEFAULT: '#06b6d4', light: '#22d3ee', dark: '#0891b2' },\n },\n },\n },\n };\n </script>\n <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap\" rel=\"stylesheet\" />\n <style>\n body { font-family: 'Inter', system-ui, sans-serif; }\n .font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }\n .grid-bg {\n background-image:\n linear-gradient(rgba(6, 182, 212, 0.03) 1px, transparent 1px),\n linear-gradient(90deg, rgba(6, 182, 212, 0.03) 1px, transparent 1px);\n background-size: 48px 48px;\n }\n .timeline-line::before {\n content: '';\n position: absolute;\n left: 7px;\n top: 28px;\n bottom: 0;\n width: 2px;\n background: linear-gradient(to bottom, #06b6d4, transparent);\n }\n </style>\n</head>\n<body class=\"bg-slate-950 text-slate-300 antialiased grid-bg\">\n\n <!-- Navbar -->\n <nav class=\"fixed top-0 inset-x-0 z-50 border-b border-slate-800/60 bg-slate-950/80 backdrop-blur-md\" aria-label=\"Main navigation\">\n <div class=\"mx-auto max-w-5xl flex items-center justify-between px-6 py-4\">\n <a href=\"#\" class=\"font-mono text-sm font-medium text-white tracking-tight\">\n <span class=\"text-accent\">~/</span>alex.chen\n </a>\n <ul class=\"hidden md:flex items-center gap-8 text-sm\" role=\"list\">\n <li><a href=\"#projects\" class=\"text-slate-400 hover:text-white transition-colors\">Projects</a></li>\n <li><a href=\"#experience\" class=\"text-slate-400 hover:text-white transition-colors\">Experience</a></li>\n <li><a href=\"#writing\" class=\"text-slate-400 hover:text-white transition-colors\">Writing</a></li>\n <li><a href=\"#contact\" class=\"text-slate-400 hover:text-white transition-colors\">Contact</a></li>\n </ul>\n <button\n type=\"button\"\n class=\"md:hidden p-2 text-slate-400 hover:text-white\"\n aria-label=\"Open menu\"\n aria-expanded=\"false\"\n id=\"menu-toggle\"\n >\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16M4 18h16\" />\n </svg>\n </button>\n </div>\n <!-- Mobile menu -->\n <div id=\"mobile-menu\" class=\"hidden md:hidden border-t border-slate-800/60 bg-slate-950/95 backdrop-blur-md\">\n <ul class=\"flex flex-col gap-1 px-6 py-4 text-sm\" role=\"list\">\n <li><a href=\"#projects\" class=\"block py-2 text-slate-400 hover:text-white transition-colors\">Projects</a></li>\n <li><a href=\"#experience\" class=\"block py-2 text-slate-400 hover:text-white transition-colors\">Experience</a></li>\n <li><a href=\"#writing\" class=\"block py-2 text-slate-400 hover:text-white transition-colors\">Writing</a></li>\n <li><a href=\"#contact\" class=\"block py-2 text-slate-400 hover:text-white transition-colors\">Contact</a></li>\n </ul>\n </div>\n </nav>\n\n <main>\n <!-- Hero -->\n <section class=\"min-h-[85vh] flex items-center pt-20\" aria-label=\"Introduction\">\n <div class=\"mx-auto max-w-5xl px-6 py-24\">\n <p class=\"font-mono text-sm text-accent mb-4\">Hi, my name is</p>\n <h1 class=\"text-4xl sm:text-5xl lg:text-6xl font-bold text-white tracking-tight leading-tight\">\n Alex Chen.\n </h1>\n <h2 class=\"mt-2 text-3xl sm:text-4xl lg:text-5xl font-bold text-slate-500 tracking-tight leading-tight\">\n I build things for the web.\n </h2>\n <p class=\"mt-6 max-w-xl text-base sm:text-lg text-slate-400 leading-relaxed\">\n Full-stack engineer with 8 years of experience shipping products at scale.\n I care about clean APIs, resilient infrastructure, and interfaces that get out of the way.\n Currently building developer tools at <span class=\"text-accent\">Vercel</span>.\n </p>\n <div class=\"mt-10 flex flex-wrap gap-4\">\n <a href=\"#projects\" class=\"inline-flex items-center gap-2 rounded-md border border-accent text-accent px-5 py-2.5 text-sm font-medium hover:bg-accent/10 transition-colors\">\n View my work\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\" /></svg>\n </a>\n <a href=\"/resume.pdf\" class=\"inline-flex items-center gap-2 text-slate-400 hover:text-white px-5 py-2.5 text-sm font-medium transition-colors\">\n Resume\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" /></svg>\n </a>\n </div>\n </div>\n </section>\n\n <!-- Tech Stack -->\n <section class=\"py-20 border-t border-slate-800/40\" aria-labelledby=\"stack-heading\">\n <div class=\"mx-auto max-w-5xl px-6\">\n <div class=\"flex items-center gap-3 mb-10\">\n <span class=\"font-mono text-accent text-sm\">01.</span>\n <h2 id=\"stack-heading\" class=\"text-xl font-semibold text-white\">Tech Stack</h2>\n <div class=\"flex-1 h-px bg-slate-800\" aria-hidden=\"true\"></div>\n </div>\n <div class=\"grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3\">\n <div class=\"flex items-center gap-3 rounded-lg border border-slate-800 bg-slate-900/50 px-4 py-3 text-sm\">\n <span class=\"text-lg\" aria-hidden=\"true\">TS</span>\n <span>TypeScript</span>\n </div>\n <div class=\"flex items-center gap-3 rounded-lg border border-slate-800 bg-slate-900/50 px-4 py-3 text-sm\">\n <span class=\"text-lg\" aria-hidden=\"true\">Go</span>\n <span>Golang</span>\n </div>\n <div class=\"flex items-center gap-3 rounded-lg border border-slate-800 bg-slate-900/50 px-4 py-3 text-sm\">\n <span class=\"text-lg\" aria-hidden=\"true\">Rs</span>\n <span>Rust</span>\n </div>\n <div class=\"flex items-center gap-3 rounded-lg border border-slate-800 bg-slate-900/50 px-4 py-3 text-sm\">\n <span class=\"text-lg\" aria-hidden=\"true\">Py</span>\n <span>Python</span>\n </div>\n <div class=\"flex items-center gap-3 rounded-lg border border-slate-800 bg-slate-900/50 px-4 py-3 text-sm\">\n <span class=\"text-lg\" aria-hidden=\"true\">Re</span>\n <span>React</span>\n </div>\n <div class=\"flex items-center gap-3 rounded-lg border border-slate-800 bg-slate-900/50 px-4 py-3 text-sm\">\n <span class=\"text-lg\" aria-hidden=\"true\">Nx</span>\n <span>Next.js</span>\n </div>\n <div class=\"flex items-center gap-3 rounded-lg border border-slate-800 bg-slate-900/50 px-4 py-3 text-sm\">\n <span class=\"text-lg\" aria-hidden=\"true\">Nd</span>\n <span>Node.js</span>\n </div>\n <div class=\"flex items-center gap-3 rounded-lg border border-slate-800 bg-slate-900/50 px-4 py-3 text-sm\">\n <span class=\"text-lg\" aria-hidden=\"true\">Pg</span>\n <span>PostgreSQL</span>\n </div>\n <div class=\"flex items-center gap-3 rounded-lg border border-slate-800 bg-slate-900/50 px-4 py-3 text-sm\">\n <span class=\"text-lg\" aria-hidden=\"true\">Rd</span>\n <span>Redis</span>\n </div>\n <div class=\"flex items-center gap-3 rounded-lg border border-slate-800 bg-slate-900/50 px-4 py-3 text-sm\">\n <span class=\"text-lg\" aria-hidden=\"true\">Dk</span>\n <span>Docker</span>\n </div>\n <div class=\"flex items-center gap-3 rounded-lg border border-slate-800 bg-slate-900/50 px-4 py-3 text-sm\">\n <span class=\"text-lg\" aria-hidden=\"true\">K8</span>\n <span>Kubernetes</span>\n </div>\n <div class=\"flex items-center gap-3 rounded-lg border border-slate-800 bg-slate-900/50 px-4 py-3 text-sm\">\n <span class=\"text-lg\" aria-hidden=\"true\">Aw</span>\n <span>AWS</span>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Projects -->\n <section id=\"projects\" class=\"py-20 border-t border-slate-800/40\" aria-labelledby=\"projects-heading\">\n <div class=\"mx-auto max-w-5xl px-6\">\n <div class=\"flex items-center gap-3 mb-10\">\n <span class=\"font-mono text-accent text-sm\">02.</span>\n <h2 id=\"projects-heading\" class=\"text-xl font-semibold text-white\">Featured Projects</h2>\n <div class=\"flex-1 h-px bg-slate-800\" aria-hidden=\"true\"></div>\n </div>\n <div class=\"grid gap-6 md:grid-cols-3\">\n <!-- Project 1 -->\n <article class=\"group rounded-lg border border-slate-800 bg-slate-900/40 p-6 hover:border-slate-700 transition-colors\">\n <div class=\"flex items-start justify-between mb-4\">\n <svg class=\"w-10 h-10 text-accent\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z\" /></svg>\n <div class=\"flex gap-3\">\n <a href=\"#\" class=\"text-slate-500 hover:text-white transition-colors\" aria-label=\"View Synth CLI on GitHub\">\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z\" /></svg>\n </a>\n <a href=\"#\" class=\"text-slate-500 hover:text-white transition-colors\" aria-label=\"Open Synth CLI live demo\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14\" /></svg>\n </a>\n </div>\n </div>\n <h3 class=\"text-lg font-semibold text-white mb-2 group-hover:text-accent transition-colors\">Synth CLI</h3>\n <p class=\"text-sm text-slate-400 leading-relaxed mb-4\">\n A code generation CLI that scaffolds full-stack TypeScript apps from schema definitions. Supports REST, GraphQL, and tRPC targets.\n </p>\n <ul class=\"flex flex-wrap gap-2\" role=\"list\" aria-label=\"Technologies used\">\n <li class=\"font-mono text-xs text-accent/80 bg-accent/5 border border-accent/10 rounded px-2 py-0.5\">TypeScript</li>\n <li class=\"font-mono text-xs text-accent/80 bg-accent/5 border border-accent/10 rounded px-2 py-0.5\">Node.js</li>\n <li class=\"font-mono text-xs text-accent/80 bg-accent/5 border border-accent/10 rounded px-2 py-0.5\">Zod</li>\n </ul>\n </article>\n\n <!-- Project 2 -->\n <article class=\"group rounded-lg border border-slate-800 bg-slate-900/40 p-6 hover:border-slate-700 transition-colors\">\n <div class=\"flex items-start justify-between mb-4\">\n <svg class=\"w-10 h-10 text-accent\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2\" /></svg>\n <div class=\"flex gap-3\">\n <a href=\"#\" class=\"text-slate-500 hover:text-white transition-colors\" aria-label=\"View Pulse Monitor on GitHub\">\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z\" /></svg>\n </a>\n <a href=\"#\" class=\"text-slate-500 hover:text-white transition-colors\" aria-label=\"Open Pulse Monitor live demo\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14\" /></svg>\n </a>\n </div>\n </div>\n <h3 class=\"text-lg font-semibold text-white mb-2 group-hover:text-accent transition-colors\">Pulse Monitor</h3>\n <p class=\"text-sm text-slate-400 leading-relaxed mb-4\">\n Real-time infrastructure monitoring dashboard with anomaly detection. Processes 50K+ events/sec using Go workers and Redis streams.\n </p>\n <ul class=\"flex flex-wrap gap-2\" role=\"list\" aria-label=\"Technologies used\">\n <li class=\"font-mono text-xs text-accent/80 bg-accent/5 border border-accent/10 rounded px-2 py-0.5\">Go</li>\n <li class=\"font-mono text-xs text-accent/80 bg-accent/5 border border-accent/10 rounded px-2 py-0.5\">Redis</li>\n <li class=\"font-mono text-xs text-accent/80 bg-accent/5 border border-accent/10 rounded px-2 py-0.5\">React</li>\n <li class=\"font-mono text-xs text-accent/80 bg-accent/5 border border-accent/10 rounded px-2 py-0.5\">WebSocket</li>\n </ul>\n </article>\n\n <!-- Project 3 -->\n <article class=\"group rounded-lg border border-slate-800 bg-slate-900/40 p-6 hover:border-slate-700 transition-colors\">\n <div class=\"flex items-start justify-between mb-4\">\n <svg class=\"w-10 h-10 text-accent\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z\" /></svg>\n <div class=\"flex gap-3\">\n <a href=\"#\" class=\"text-slate-500 hover:text-white transition-colors\" aria-label=\"View Edge Functions Kit on GitHub\">\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z\" /></svg>\n </a>\n <a href=\"#\" class=\"text-slate-500 hover:text-white transition-colors\" aria-label=\"Open Edge Functions Kit live demo\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14\" /></svg>\n </a>\n </div>\n </div>\n <h3 class=\"text-lg font-semibold text-white mb-2 group-hover:text-accent transition-colors\">Edge Functions Kit</h3>\n <p class=\"text-sm text-slate-400 leading-relaxed mb-4\">\n A library of composable middleware for Cloudflare Workers and Deno Deploy. Auth, rate limiting, caching, and CORS out of the box.\n </p>\n <ul class=\"flex flex-wrap gap-2\" role=\"list\" aria-label=\"Technologies used\">\n <li class=\"font-mono text-xs text-accent/80 bg-accent/5 border border-accent/10 rounded px-2 py-0.5\">TypeScript</li>\n <li class=\"font-mono text-xs text-accent/80 bg-accent/5 border border-accent/10 rounded px-2 py-0.5\">Workers</li>\n <li class=\"font-mono text-xs text-accent/80 bg-accent/5 border border-accent/10 rounded px-2 py-0.5\">Deno</li>\n </ul>\n </article>\n </div>\n </div>\n </section>\n\n <!-- Experience -->\n <section id=\"experience\" class=\"py-20 border-t border-slate-800/40\" aria-labelledby=\"experience-heading\">\n <div class=\"mx-auto max-w-5xl px-6\">\n <div class=\"flex items-center gap-3 mb-10\">\n <span class=\"font-mono text-accent text-sm\">03.</span>\n <h2 id=\"experience-heading\" class=\"text-xl font-semibold text-white\">Experience</h2>\n <div class=\"flex-1 h-px bg-slate-800\" aria-hidden=\"true\"></div>\n </div>\n <div class=\"space-y-10 max-w-2xl\">\n <!-- Role 1 -->\n <div class=\"relative pl-8 timeline-line\">\n <div class=\"absolute left-0 top-1.5 w-4 h-4 rounded-full border-2 border-accent bg-slate-950\" aria-hidden=\"true\"></div>\n <div class=\"flex flex-col sm:flex-row sm:items-baseline sm:justify-between gap-1 mb-2\">\n <h3 class=\"text-white font-semibold\">Senior Software Engineer <span class=\"text-accent\">@ Vercel</span></h3>\n <span class=\"font-mono text-xs text-slate-500\">2022 -- present</span>\n </div>\n <ul class=\"space-y-2 text-sm text-slate-400\">\n <li class=\"flex gap-2\"><span class=\"text-accent mt-0.5 shrink-0\" aria-hidden=\"true\">></span>Lead development of the edge middleware runtime, serving 2B+ requests/month</li>\n <li class=\"flex gap-2\"><span class=\"text-accent mt-0.5 shrink-0\" aria-hidden=\"true\">></span>Designed the incremental build cache system, reducing cold builds by 60%</li>\n <li class=\"flex gap-2\"><span class=\"text-accent mt-0.5 shrink-0\" aria-hidden=\"true\">></span>Mentoring a team of 4 engineers across the platform infrastructure group</li>\n </ul>\n </div>\n\n <!-- Role 2 -->\n <div class=\"relative pl-8 timeline-line\">\n <div class=\"absolute left-0 top-1.5 w-4 h-4 rounded-full border-2 border-slate-600 bg-slate-950\" aria-hidden=\"true\"></div>\n <div class=\"flex flex-col sm:flex-row sm:items-baseline sm:justify-between gap-1 mb-2\">\n <h3 class=\"text-white font-semibold\">Software Engineer <span class=\"text-accent\">@ Stripe</span></h3>\n <span class=\"font-mono text-xs text-slate-500\">2019 -- 2022</span>\n </div>\n <ul class=\"space-y-2 text-sm text-slate-400\">\n <li class=\"flex gap-2\"><span class=\"text-accent mt-0.5 shrink-0\" aria-hidden=\"true\">></span>Built the real-time fraud detection pipeline processing 500K+ transactions/day</li>\n <li class=\"flex gap-2\"><span class=\"text-accent mt-0.5 shrink-0\" aria-hidden=\"true\">></span>Migrated the payments API from Ruby to Go, improving p99 latency by 40%</li>\n <li class=\"flex gap-2\"><span class=\"text-accent mt-0.5 shrink-0\" aria-hidden=\"true\">></span>Authored internal RFC for the distributed rate-limiting architecture</li>\n </ul>\n </div>\n\n <!-- Role 3 -->\n <div class=\"relative pl-8\">\n <div class=\"absolute left-0 top-1.5 w-4 h-4 rounded-full border-2 border-slate-700 bg-slate-950\" aria-hidden=\"true\"></div>\n <div class=\"flex flex-col sm:flex-row sm:items-baseline sm:justify-between gap-1 mb-2\">\n <h3 class=\"text-white font-semibold\">Full-Stack Developer <span class=\"text-accent\">@ Postman</span></h3>\n <span class=\"font-mono text-xs text-slate-500\">2017 -- 2019</span>\n </div>\n <ul class=\"space-y-2 text-sm text-slate-400\">\n <li class=\"flex gap-2\"><span class=\"text-accent mt-0.5 shrink-0\" aria-hidden=\"true\">></span>Developed the collection runner v2 with parallel execution support</li>\n <li class=\"flex gap-2\"><span class=\"text-accent mt-0.5 shrink-0\" aria-hidden=\"true\">></span>Built the team workspace collaboration features used by 100K+ teams</li>\n <li class=\"flex gap-2\"><span class=\"text-accent mt-0.5 shrink-0\" aria-hidden=\"true\">></span>Shipped the first public GraphQL API integration for Postman</li>\n </ul>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Writing -->\n <section id=\"writing\" class=\"py-20 border-t border-slate-800/40\" aria-labelledby=\"writing-heading\">\n <div class=\"mx-auto max-w-5xl px-6\">\n <div class=\"flex items-center gap-3 mb-10\">\n <span class=\"font-mono text-accent text-sm\">04.</span>\n <h2 id=\"writing-heading\" class=\"text-xl font-semibold text-white\">Writing</h2>\n <div class=\"flex-1 h-px bg-slate-800\" aria-hidden=\"true\"></div>\n </div>\n <div class=\"grid gap-6 md:grid-cols-3\">\n <article class=\"group\">\n <a href=\"#\" class=\"block rounded-lg border border-slate-800 bg-slate-900/40 p-6 hover:border-slate-700 transition-colors h-full\">\n <time class=\"font-mono text-xs text-slate-500\" datetime=\"2026-02-15\">Feb 2026</time>\n <h3 class=\"mt-3 text-white font-semibold group-hover:text-accent transition-colors\">Edge-first Architecture: Patterns That Actually Work</h3>\n <p class=\"mt-2 text-sm text-slate-400 leading-relaxed\">\n Practical patterns for building applications that run at the edge without the usual cold-start headaches.\n </p>\n </a>\n </article>\n <article class=\"group\">\n <a href=\"#\" class=\"block rounded-lg border border-slate-800 bg-slate-900/40 p-6 hover:border-slate-700 transition-colors h-full\">\n <time class=\"font-mono text-xs text-slate-500\" datetime=\"2025-11-08\">Nov 2025</time>\n <h3 class=\"mt-3 text-white font-semibold group-hover:text-accent transition-colors\">Why I Switched from REST to tRPC (and Back Again)</h3>\n <p class=\"mt-2 text-sm text-slate-400 leading-relaxed\">\n A candid look at the tradeoffs of end-to-end type safety versus ecosystem compatibility in large teams.\n </p>\n </a>\n </article>\n <article class=\"group\">\n <a href=\"#\" class=\"block rounded-lg border border-slate-800 bg-slate-900/40 p-6 hover:border-slate-700 transition-colors h-full\">\n <time class=\"font-mono text-xs text-slate-500\" datetime=\"2025-08-22\">Aug 2025</time>\n <h3 class=\"mt-3 text-white font-semibold group-hover:text-accent transition-colors\">Building a Code Generator That Developers Don't Hate</h3>\n <p class=\"mt-2 text-sm text-slate-400 leading-relaxed\">\n Lessons learned from Synth CLI: how to make generated code feel hand-written.\n </p>\n </a>\n </article>\n </div>\n </div>\n </section>\n\n <!-- Contact -->\n <section id=\"contact\" class=\"py-24 border-t border-slate-800/40\" aria-labelledby=\"contact-heading\">\n <div class=\"mx-auto max-w-xl px-6 text-center\">\n <span class=\"font-mono text-accent text-sm\">05. What's next?</span>\n <h2 id=\"contact-heading\" class=\"mt-4 text-3xl sm:text-4xl font-bold text-white\">Get In Touch</h2>\n <p class=\"mt-4 text-slate-400 leading-relaxed\">\n I'm always interested in hearing about new opportunities, open-source collaborations,\n or just a good conversation about distributed systems. My inbox is open.\n </p>\n <a href=\"mailto:alex@alexchen.dev\" class=\"mt-8 inline-flex items-center gap-2 rounded-md border border-accent text-accent px-6 py-3 text-sm font-medium hover:bg-accent/10 transition-colors\">\n Say Hello\n </a>\n <ul class=\"mt-10 flex justify-center gap-6\" role=\"list\" aria-label=\"Social links\">\n <li>\n <a href=\"#\" class=\"text-slate-500 hover:text-accent transition-colors\" aria-label=\"GitHub profile\">\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z\" /></svg>\n </a>\n </li>\n <li>\n <a href=\"#\" class=\"text-slate-500 hover:text-accent transition-colors\" aria-label=\"LinkedIn profile\">\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z\" /></svg>\n </a>\n </li>\n <li>\n <a href=\"#\" class=\"text-slate-500 hover:text-accent transition-colors\" aria-label=\"X (Twitter) profile\">\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\" /></svg>\n </a>\n </li>\n </ul>\n </div>\n </section>\n </main>\n\n <!-- Footer -->\n <footer class=\"border-t border-slate-800/40 py-8\">\n <div class=\"mx-auto max-w-5xl px-6 flex flex-col sm:flex-row items-center justify-between gap-4\">\n <p class=\"font-mono text-xs text-slate-600\">\n Designed &amp; built by Alex Chen\n </p>\n <a href=\"https://github.com/alexchen/portfolio\" class=\"font-mono text-xs text-slate-600 hover:text-accent transition-colors\" aria-label=\"View source code on GitHub\">\n source on github\n </a>\n </div>\n </footer>\n\n <script>\n const toggle = document.getElementById('menu-toggle');\n const menu = document.getElementById('mobile-menu');\n if (toggle && menu) {\n toggle.addEventListener('click', () => {\n const expanded = toggle.getAttribute('aria-expanded') === 'true';\n toggle.setAttribute('aria-expanded', String(!expanded));\n menu.classList.toggle('hidden');\n });\n menu.querySelectorAll('a').forEach(link => {\n link.addEventListener('click', () => {\n menu.classList.add('hidden');\n toggle.setAttribute('aria-expanded', 'false');\n });\n });\n }\n </script>\n</body>\n</html>\n"
25082
+ },
25083
+ {
25084
+ "id": "portfolio/photographer",
25085
+ "title": "Portfolio Photographer",
25086
+ "summary": "Moody photographer portfolio with masonry grid, full-viewport hero, services with pricing, and dark contact section.",
25087
+ "description": "A photography portfolio template with editorial sensibility. Masonry-style image grid, split about section with awards, service cards with pricing, and a moody dark-light contrast that lets work speak for itself.",
25088
+ "category": "portfolio",
25089
+ "style": "elegant",
25090
+ "tags": [
25091
+ "portfolio",
25092
+ "photographer",
25093
+ "photography",
25094
+ "creative",
25095
+ "editorial",
25096
+ "moody"
25097
+ ],
25098
+ "patterns": [
25099
+ "navbar/base",
25100
+ "hero/dark",
25101
+ "gallery/base",
25102
+ "contact/base",
25103
+ "footer/base"
25104
+ ],
25105
+ "sections": [
25106
+ "navbar",
25107
+ "hero",
25108
+ "portfolio-grid",
25109
+ "about",
25110
+ "services",
25111
+ "contact",
25112
+ "footer"
25113
+ ],
25114
+ "features": {
25115
+ "responsive": true,
25116
+ "darkMode": false,
25117
+ "animations": false,
25118
+ "formHandling": false
25119
+ },
25120
+ "files": {
25121
+ "html": "./photographer.html",
25122
+ "preview": "./photographer.png"
25123
+ },
25124
+ "install": {
25125
+ "copyPasteReady": true,
25126
+ "tailwindCdn": true,
25127
+ "vanillaJs": true,
25128
+ "notes": [
25129
+ "Replace colored placeholders with real photographs",
25130
+ "Masonry grid uses CSS columns (no JS library)",
25131
+ "Services pricing is static — adjust for your market"
25132
+ ]
25133
+ },
25134
+ "governance": {
25135
+ "status": "published",
25136
+ "quality": "flagship",
25137
+ "owner": "design-system",
25138
+ "updatedAt": "2026-03-20"
25139
+ },
25140
+ "html": "<!DOCTYPE html>\n<html lang=\"en\" class=\"scroll-smooth\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Elena Vasquez — Documentary &amp; Portrait Photography</title>\n <meta name=\"description\" content=\"Documentary and portrait photographer based in Barcelona. Real moments, natural light, honest storytelling.\" />\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <script>\n tailwind.config = {\n theme: {\n extend: {\n fontFamily: {\n serif: ['\"Playfair Display\"', 'Georgia', 'serif'],\n sans: ['\"Inter\"', 'system-ui', 'sans-serif'],\n },\n colors: {\n cream: '#fafaf5',\n warm: { 50: '#fdf8f0', 100: '#f5ebe0', 200: '#e8d5c4', 300: '#d4b896' },\n rose: { accent: '#be185d' },\n },\n },\n },\n };\n </script>\n <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n <link href=\"https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Inter:wght@300;400;500&display=swap\" rel=\"stylesheet\" />\n <style>\n body { font-family: 'Inter', system-ui, sans-serif; color: #2d2a26; }\n .font-serif { font-family: 'Playfair Display', Georgia, serif; }\n .masonry { columns: 3; column-gap: 1rem; }\n .masonry-item { break-inside: avoid; margin-bottom: 1rem; }\n @media (max-width: 1023px) { .masonry { columns: 2; } }\n @media (max-width: 639px) { .masonry { columns: 1; } }\n .photo-placeholder { position: relative; overflow: hidden; }\n .photo-placeholder .overlay {\n position: absolute; inset: 0;\n background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%);\n opacity: 0; transition: opacity 0.4s ease;\n display: flex; align-items: flex-end; padding: 1.5rem;\n }\n .photo-placeholder:hover .overlay { opacity: 1; }\n .scroll-indicator {\n animation: bounce-down 2s ease infinite;\n }\n @keyframes bounce-down {\n 0%, 100% { transform: translateY(0); opacity: 0.6; }\n 50% { transform: translateY(10px); opacity: 1; }\n }\n nav.scrolled { background: rgba(24, 22, 20, 0.95); backdrop-filter: blur(8px); }\n </style>\n</head>\n<body class=\"bg-cream\">\n\n <!-- Navbar -->\n <nav id=\"navbar\" class=\"fixed top-0 left-0 right-0 z-50 transition-all duration-500\">\n <div class=\"max-w-7xl mx-auto px-6 py-5 flex items-center justify-between\">\n <a href=\"#\" class=\"font-serif text-xl text-white tracking-wide\">Elena Vasquez</a>\n <div class=\"hidden md:flex items-center gap-8\">\n <a href=\"#portfolio\" class=\"text-white/80 hover:text-white text-sm tracking-widest uppercase transition-colors\">Portfolio</a>\n <a href=\"#about\" class=\"text-white/80 hover:text-white text-sm tracking-widest uppercase transition-colors\">About</a>\n <a href=\"#services\" class=\"text-white/80 hover:text-white text-sm tracking-widest uppercase transition-colors\">Services</a>\n <a href=\"#contact\" class=\"text-white/80 hover:text-white text-sm tracking-widest uppercase transition-colors\">Contact</a>\n </div>\n <button id=\"menu-toggle\" class=\"md:hidden text-white\" aria-label=\"Open menu\" aria-expanded=\"false\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M4 6h16M4 12h16M4 18h16\"/></svg>\n </button>\n </div>\n <!-- Mobile menu -->\n <div id=\"mobile-menu\" class=\"hidden md:hidden bg-neutral-900/95 backdrop-blur-md px-6 pb-6\">\n <a href=\"#portfolio\" class=\"block py-3 text-white/80 hover:text-white text-sm tracking-widest uppercase border-b border-white/10\">Portfolio</a>\n <a href=\"#about\" class=\"block py-3 text-white/80 hover:text-white text-sm tracking-widest uppercase border-b border-white/10\">About</a>\n <a href=\"#services\" class=\"block py-3 text-white/80 hover:text-white text-sm tracking-widest uppercase border-b border-white/10\">Services</a>\n <a href=\"#contact\" class=\"block py-3 text-white/80 hover:text-white text-sm tracking-widest uppercase\">Contact</a>\n </div>\n </nav>\n\n <!-- Hero -->\n <section class=\"relative min-h-screen flex items-center justify-center overflow-hidden\">\n <div class=\"absolute inset-0 bg-gradient-to-br from-neutral-900 via-neutral-800 to-stone-900\"></div>\n <div class=\"absolute inset-0 bg-black/40\"></div>\n <div class=\"relative z-10 text-center px-6\">\n <h1 class=\"font-serif text-6xl sm:text-7xl md:text-8xl lg:text-9xl text-white tracking-tight leading-none\">Elena Vasquez</h1>\n <p class=\"mt-6 text-white/60 text-lg sm:text-xl tracking-[0.3em] uppercase font-light\">Documentary &amp; Portrait Photography</p>\n </div>\n <div class=\"absolute bottom-10 left-1/2 -translate-x-1/2 z-10 scroll-indicator\">\n <svg class=\"w-5 h-8 text-white/50\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 20 32\"><rect x=\"1\" y=\"1\" width=\"18\" height=\"30\" rx=\"9\" stroke-width=\"1.5\"/><circle cx=\"10\" cy=\"10\" r=\"2\" fill=\"currentColor\"/></svg>\n </div>\n </section>\n\n <!-- Portfolio Grid -->\n <section id=\"portfolio\" class=\"py-24 sm:py-32 px-6\">\n <div class=\"max-w-7xl mx-auto\">\n <h2 class=\"font-serif text-4xl sm:text-5xl text-center mb-4\">Selected Work</h2>\n <p class=\"text-center text-neutral-500 mb-12 max-w-xl mx-auto\">A curated selection of stories told through light, shadow, and the quiet moments in between.</p>\n\n <!-- Filter Pills -->\n <div class=\"flex flex-wrap justify-center gap-3 mb-14\">\n <span class=\"px-5 py-2 bg-neutral-900 text-white text-xs tracking-widest uppercase rounded-full cursor-pointer\">All</span>\n <span class=\"px-5 py-2 bg-transparent text-neutral-500 text-xs tracking-widest uppercase rounded-full border border-neutral-300 hover:border-neutral-900 hover:text-neutral-900 transition-colors cursor-pointer\">Documentary</span>\n <span class=\"px-5 py-2 bg-transparent text-neutral-500 text-xs tracking-widest uppercase rounded-full border border-neutral-300 hover:border-neutral-900 hover:text-neutral-900 transition-colors cursor-pointer\">Portrait</span>\n <span class=\"px-5 py-2 bg-transparent text-neutral-500 text-xs tracking-widest uppercase rounded-full border border-neutral-300 hover:border-neutral-900 hover:text-neutral-900 transition-colors cursor-pointer\">Street</span>\n <span class=\"px-5 py-2 bg-transparent text-neutral-500 text-xs tracking-widest uppercase rounded-full border border-neutral-300 hover:border-neutral-900 hover:text-neutral-900 transition-colors cursor-pointer\">Editorial</span>\n </div>\n\n <!-- Masonry Grid -->\n <div class=\"masonry\">\n <!-- 1: Portrait — warm charcoal -->\n <div class=\"masonry-item\">\n <div class=\"photo-placeholder rounded-sm cursor-pointer\" style=\"aspect-ratio: 3/4; background: linear-gradient(145deg, #4a4543, #3d3835);\">\n <div class=\"overlay rounded-sm\"><span class=\"text-white font-serif text-lg\">The Fisherman's Dawn</span></div>\n </div>\n </div>\n <!-- 2: Landscape — dusty sage -->\n <div class=\"masonry-item\">\n <div class=\"photo-placeholder rounded-sm cursor-pointer\" style=\"aspect-ratio: 16/10; background: linear-gradient(135deg, #8a9a7e, #6b7d60);\">\n <div class=\"overlay rounded-sm\"><span class=\"text-white font-serif text-lg\">Andalusian Light</span></div>\n </div>\n </div>\n <!-- 3: Square — muted rose -->\n <div class=\"masonry-item\">\n <div class=\"photo-placeholder rounded-sm cursor-pointer\" style=\"aspect-ratio: 1/1; background: linear-gradient(150deg, #a0757a, #8b5e63);\">\n <div class=\"overlay rounded-sm\"><span class=\"text-white font-serif text-lg\">Maria, Age 84</span></div>\n </div>\n </div>\n <!-- 4: Tall portrait — deep warm -->\n <div class=\"masonry-item\">\n <div class=\"photo-placeholder rounded-sm cursor-pointer\" style=\"aspect-ratio: 2/3; background: linear-gradient(160deg, #5c4f42, #3e342a);\">\n <div class=\"overlay rounded-sm\"><span class=\"text-white font-serif text-lg\">Smoke &amp; Silence</span></div>\n </div>\n </div>\n <!-- 5: Wide landscape — warm gray -->\n <div class=\"masonry-item\">\n <div class=\"photo-placeholder rounded-sm cursor-pointer\" style=\"aspect-ratio: 16/9; background: linear-gradient(130deg, #7a7570, #5e5954);\">\n <div class=\"overlay rounded-sm\"><span class=\"text-white font-serif text-lg\">The Last Café</span></div>\n </div>\n </div>\n <!-- 6: Portrait — amber tone -->\n <div class=\"masonry-item\">\n <div class=\"photo-placeholder rounded-sm cursor-pointer\" style=\"aspect-ratio: 3/4; background: linear-gradient(145deg, #9a8264, #7d6847);\">\n <div class=\"overlay rounded-sm\"><span class=\"text-white font-serif text-lg\">Barcelona, 6AM</span></div>\n </div>\n </div>\n <!-- 7: Landscape — cool stone -->\n <div class=\"masonry-item\">\n <div class=\"photo-placeholder rounded-sm cursor-pointer\" style=\"aspect-ratio: 3/2; background: linear-gradient(140deg, #6e6d6a, #545350);\">\n <div class=\"overlay rounded-sm\"><span class=\"text-white font-serif text-lg\">Hands That Built</span></div>\n </div>\n </div>\n <!-- 8: Square — deep olive -->\n <div class=\"masonry-item\">\n <div class=\"photo-placeholder rounded-sm cursor-pointer\" style=\"aspect-ratio: 1/1; background: linear-gradient(155deg, #6b6e56, #4e513d);\">\n <div class=\"overlay rounded-sm\"><span class=\"text-white font-serif text-lg\">Still Life, Moving</span></div>\n </div>\n </div>\n <!-- 9: Portrait — warm shadow -->\n <div class=\"masonry-item\">\n <div class=\"photo-placeholder rounded-sm cursor-pointer\" style=\"aspect-ratio: 4/5; background: linear-gradient(140deg, #635750, #4a3f39);\">\n <div class=\"overlay rounded-sm\"><span class=\"text-white font-serif text-lg\">The Dancer Rests</span></div>\n </div>\n </div>\n <!-- 10: Landscape — dusty rose -->\n <div class=\"masonry-item\">\n <div class=\"photo-placeholder rounded-sm cursor-pointer\" style=\"aspect-ratio: 16/10; background: linear-gradient(135deg, #8c6b6e, #6e5255);\">\n <div class=\"overlay rounded-sm\"><span class=\"text-white font-serif text-lg\">Traces of Home</span></div>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <!-- About -->\n <section id=\"about\" class=\"py-24 sm:py-32 bg-warm-50\">\n <div class=\"max-w-7xl mx-auto px-6\">\n <div class=\"grid lg:grid-cols-2 gap-16 lg:gap-24 items-center\">\n <!-- Portrait placeholder -->\n <div class=\"photo-placeholder rounded-sm\" style=\"aspect-ratio: 3/4; background: linear-gradient(160deg, #5c524a, #3e3630);\">\n </div>\n <!-- Text -->\n <div>\n <h2 class=\"font-serif text-4xl sm:text-5xl mb-8\">About Elena</h2>\n <p class=\"text-neutral-600 leading-relaxed mb-6\">\n I believe the most powerful photographs are the ones you almost didn't take. The half-glance, the hand reaching for a door, the light that lasts exactly three seconds before it's gone. My work lives in documentary and portrait photography — not because I chose the genre, but because it chose me. I follow natural light and real moments, never staged, never interrupted.\n </p>\n <p class=\"text-neutral-600 leading-relaxed mb-10\">\n Over fifteen years, I've moved through conflict zones and quiet villages alike, always looking for the same thing: the story a person carries in their posture, their silence, their worn-out shoes. Every session begins with listening. The camera comes second.\n </p>\n <div class=\"border-t border-neutral-200 pt-8\">\n <p class=\"text-xs tracking-widest uppercase text-neutral-400 mb-4\">Featured &amp; Recognized</p>\n <div class=\"flex flex-wrap gap-x-8 gap-y-3\">\n <span class=\"text-neutral-700 font-medium text-sm\">TIME Magazine</span>\n <span class=\"text-neutral-300\">|</span>\n <span class=\"text-neutral-700 font-medium text-sm\">National Geographic</span>\n <span class=\"text-neutral-300\">|</span>\n <span class=\"text-neutral-700 font-medium text-sm\">Sony World Photography Awards</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Services -->\n <section id=\"services\" class=\"py-24 sm:py-32 px-6\">\n <div class=\"max-w-5xl mx-auto\">\n <h2 class=\"font-serif text-4xl sm:text-5xl text-center mb-4\">Services</h2>\n <p class=\"text-center text-neutral-500 mb-16 max-w-lg mx-auto\">Thoughtful photography for people who value substance over spectacle.</p>\n\n <div class=\"grid md:grid-cols-3 gap-8\">\n <!-- Wedding -->\n <div class=\"group border border-neutral-200 rounded-sm p-8 hover:border-neutral-400 transition-colors\">\n <h3 class=\"font-serif text-2xl mb-4\">Wedding</h3>\n <p class=\"text-neutral-500 text-sm leading-relaxed mb-8\">\n Unscripted coverage of your day as it unfolds. No checklists, no forced poses — just the real story of two people and everyone who came to celebrate them.\n </p>\n <p class=\"text-xs tracking-widest uppercase text-neutral-400 mb-2\">Starting from</p>\n <p class=\"font-serif text-2xl text-neutral-800 mb-6\">&euro;2,500</p>\n <a href=\"#contact\" class=\"text-sm tracking-widest uppercase text-neutral-900 border-b border-neutral-900 pb-0.5 hover:text-rose-accent hover:border-rose-accent transition-colors\">Inquire</a>\n </div>\n\n <!-- Editorial -->\n <div class=\"group border border-neutral-200 rounded-sm p-8 hover:border-neutral-400 transition-colors\">\n <h3 class=\"font-serif text-2xl mb-4\">Editorial</h3>\n <p class=\"text-neutral-500 text-sm leading-relaxed mb-8\">\n Magazine-ready portraits and visual narratives. Collaboration with art directors, stylists, and subjects who want to be seen — not just photographed.\n </p>\n <p class=\"text-xs tracking-widest uppercase text-neutral-400 mb-2\">Starting from</p>\n <p class=\"font-serif text-2xl text-neutral-800 mb-6\">&euro;1,800</p>\n <a href=\"#contact\" class=\"text-sm tracking-widest uppercase text-neutral-900 border-b border-neutral-900 pb-0.5 hover:text-rose-accent hover:border-rose-accent transition-colors\">Inquire</a>\n </div>\n\n <!-- Commercial -->\n <div class=\"group border border-neutral-200 rounded-sm p-8 hover:border-neutral-400 transition-colors\">\n <h3 class=\"font-serif text-2xl mb-4\">Commercial</h3>\n <p class=\"text-neutral-500 text-sm leading-relaxed mb-8\">\n Brand photography with a documentary eye. For companies that want to show who they are, not who they think they should be. Authentic, not corporate.\n </p>\n <p class=\"text-xs tracking-widest uppercase text-neutral-400 mb-2\">Starting from</p>\n <p class=\"font-serif text-2xl text-neutral-800 mb-6\">&euro;3,200</p>\n <a href=\"#contact\" class=\"text-sm tracking-widest uppercase text-neutral-900 border-b border-neutral-900 pb-0.5 hover:text-rose-accent hover:border-rose-accent transition-colors\">Inquire</a>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Contact -->\n <section id=\"contact\" class=\"py-24 sm:py-32 bg-neutral-900 text-white\">\n <div class=\"max-w-5xl mx-auto px-6\">\n <div class=\"grid lg:grid-cols-2 gap-16 lg:gap-24\">\n <!-- Left: Info -->\n <div>\n <h2 class=\"font-serif text-4xl sm:text-5xl mb-6\">Let's Create Together</h2>\n <p class=\"text-neutral-400 leading-relaxed mb-10\">Every project starts with a conversation. Tell me about the story you want to tell, and we'll figure out the rest.</p>\n\n <div class=\"space-y-6\">\n <div>\n <p class=\"text-xs tracking-widest uppercase text-neutral-500 mb-2\">Email</p>\n <a href=\"mailto:hello@elenavasquez.com\" class=\"text-xl hover:text-warm-200 transition-colors\">hello@elenavasquez.com</a>\n </div>\n <div>\n <p class=\"text-xs tracking-widest uppercase text-neutral-500 mb-2\">Instagram</p>\n <a href=\"#\" class=\"text-xl hover:text-warm-200 transition-colors\">@elenavasquez</a>\n </div>\n <div>\n <p class=\"text-xs tracking-widest uppercase text-neutral-500 mb-2\">Location</p>\n <p class=\"text-lg text-neutral-300\">Based in Barcelona, available worldwide</p>\n </div>\n </div>\n </div>\n\n <!-- Right: Form -->\n <form class=\"space-y-6\" onsubmit=\"return false;\">\n <div>\n <label for=\"name\" class=\"block text-xs tracking-widest uppercase text-neutral-500 mb-2\">Name</label>\n <input type=\"text\" id=\"name\" name=\"name\" required class=\"w-full bg-transparent border-b border-neutral-700 focus:border-white py-3 text-white placeholder-neutral-600 outline-none transition-colors\" placeholder=\"Your name\" />\n </div>\n <div>\n <label for=\"email\" class=\"block text-xs tracking-widest uppercase text-neutral-500 mb-2\">Email</label>\n <input type=\"email\" id=\"email\" name=\"email\" required class=\"w-full bg-transparent border-b border-neutral-700 focus:border-white py-3 text-white placeholder-neutral-600 outline-none transition-colors\" placeholder=\"your@email.com\" />\n </div>\n <div>\n <label for=\"project-type\" class=\"block text-xs tracking-widest uppercase text-neutral-500 mb-2\">Project Type</label>\n <select id=\"project-type\" name=\"project-type\" class=\"w-full bg-transparent border-b border-neutral-700 focus:border-white py-3 text-white outline-none transition-colors cursor-pointer appearance-none\">\n <option value=\"\" class=\"bg-neutral-900\">Select a project type</option>\n <option value=\"wedding\" class=\"bg-neutral-900\">Wedding</option>\n <option value=\"editorial\" class=\"bg-neutral-900\">Editorial</option>\n <option value=\"commercial\" class=\"bg-neutral-900\">Commercial</option>\n <option value=\"personal\" class=\"bg-neutral-900\">Personal Portrait</option>\n <option value=\"other\" class=\"bg-neutral-900\">Something Else</option>\n </select>\n </div>\n <div>\n <label for=\"message\" class=\"block text-xs tracking-widest uppercase text-neutral-500 mb-2\">Message</label>\n <textarea id=\"message\" name=\"message\" rows=\"4\" class=\"w-full bg-transparent border-b border-neutral-700 focus:border-white py-3 text-white placeholder-neutral-600 outline-none transition-colors resize-none\" placeholder=\"Tell me about your project...\"></textarea>\n </div>\n <button type=\"submit\" class=\"mt-4 px-8 py-3 bg-white text-neutral-900 text-sm tracking-widest uppercase hover:bg-warm-100 transition-colors\">Send Inquiry</button>\n </form>\n </div>\n </div>\n </section>\n\n <!-- Footer -->\n <footer class=\"bg-neutral-950 text-neutral-500 py-10 px-6\">\n <div class=\"max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4\">\n <p class=\"text-sm\">&copy; 2026 Elena Vasquez. All rights reserved.</p>\n <div class=\"flex items-center gap-6\">\n <a href=\"#\" class=\"text-sm hover:text-white transition-colors\" aria-label=\"Instagram\">Instagram</a>\n <a href=\"#\" class=\"text-sm hover:text-white transition-colors\">Privacy</a>\n <a href=\"#\" class=\"text-sm hover:text-white transition-colors\">Imprint</a>\n </div>\n </div>\n </footer>\n\n <!-- Minimal JS: mobile menu + navbar scroll -->\n <script>\n const toggle = document.getElementById('menu-toggle');\n const menu = document.getElementById('mobile-menu');\n toggle.addEventListener('click', () => {\n const open = !menu.classList.contains('hidden');\n menu.classList.toggle('hidden');\n toggle.setAttribute('aria-expanded', !open);\n });\n menu.querySelectorAll('a').forEach(a => a.addEventListener('click', () => {\n menu.classList.add('hidden');\n toggle.setAttribute('aria-expanded', 'false');\n }));\n\n const nav = document.getElementById('navbar');\n window.addEventListener('scroll', () => {\n nav.classList.toggle('scrolled', window.scrollY > 80);\n }, { passive: true });\n </script>\n\n</body>\n</html>\n"
25141
+ },
25142
+ {
25143
+ "id": "saas-landing/bold",
25144
+ "title": "SaaS Landing Bold",
25145
+ "summary": "Dark, high-contrast SaaS landing with vibrant accents, glass cards, and bold typography for developer tools.",
25146
+ "description": "A striking dark-themed landing page with emerald accents, glass-effect cards, stats bar, feature showcase, pricing comparison, and bold conversion sections.",
25147
+ "category": "saas-landing",
25148
+ "style": "bold",
25149
+ "tags": [
25150
+ "saas",
25151
+ "landing-page",
25152
+ "dark-theme",
25153
+ "developer-tools",
25154
+ "bold"
25155
+ ],
25156
+ "patterns": [
25157
+ "navbar/base",
25158
+ "hero/dark",
25159
+ "stats/base",
25160
+ "features/base",
25161
+ "pricing/base",
25162
+ "testimonials/base",
25163
+ "cta/base",
25164
+ "footer/base"
25165
+ ],
25166
+ "sections": [
25167
+ "navbar",
25168
+ "hero",
25169
+ "stats",
25170
+ "features",
25171
+ "pricing",
25172
+ "testimonials",
25173
+ "cta",
25174
+ "footer"
25175
+ ],
25176
+ "features": {
25177
+ "responsive": true,
25178
+ "darkMode": false,
25179
+ "animations": false,
25180
+ "formHandling": false
25181
+ },
25182
+ "files": {
25183
+ "html": "./bold.html",
25184
+ "preview": "./bold.png"
25185
+ },
25186
+ "install": {
25187
+ "copyPasteReady": true,
25188
+ "tailwindCdn": true,
25189
+ "vanillaJs": true,
25190
+ "notes": [
25191
+ "Dark theme is the default — not a dark mode toggle",
25192
+ "Glass effects use backdrop-blur",
25193
+ "Replace DevPulse branding with your product"
25194
+ ]
25195
+ },
25196
+ "governance": {
25197
+ "status": "published",
25198
+ "quality": "flagship",
25199
+ "owner": "design-system",
25200
+ "updatedAt": "2026-03-20"
25201
+ },
25202
+ "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>DevPulse — Real-Time Developer Analytics</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <script>\n tailwind.config = {\n theme: {\n extend: {\n fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },\n }\n }\n }\n </script>\n <style>\n @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');\n .glass { background: rgba(255,255,255,0.04); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.08); }\n .glow-border { box-shadow: 0 0 0 1px rgba(16,185,129,0.2), 0 0 24px -4px rgba(16,185,129,0.15); }\n .gradient-text { background: linear-gradient(135deg, #10b981 0%, #34d399 50%, #6ee7b7 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }\n .hero-glow { background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(16,185,129,0.12) 0%, transparent 70%); }\n .card-hover { transition: transform 0.25s ease, box-shadow 0.25s ease; }\n .card-hover:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(16,185,129,0.3), 0 0 32px -4px rgba(16,185,129,0.2); }\n </style>\n</head>\n<body class=\"bg-slate-950 text-slate-100 font-sans antialiased\">\n\n <!-- Navbar -->\n <nav class=\"fixed top-0 inset-x-0 z-50 glass\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex items-center justify-between h-16\">\n <a href=\"#\" class=\"flex items-center gap-2 text-xl font-extrabold tracking-tight\">\n <svg class=\"w-8 h-8 text-emerald-400\" viewBox=\"0 0 32 32\" fill=\"none\" aria-hidden=\"true\">\n <rect width=\"32\" height=\"32\" rx=\"8\" fill=\"currentColor\" fill-opacity=\"0.15\"/>\n <path d=\"M8 22 L12 12 L16 18 L20 8 L24 16\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"/>\n </svg>\n <span>Dev<span class=\"gradient-text\">Pulse</span></span>\n </a>\n\n <div class=\"hidden md:flex items-center gap-8 text-sm font-medium text-slate-300\">\n <a href=\"#features\" class=\"hover:text-emerald-400 transition-colors\">Features</a>\n <a href=\"#pricing\" class=\"hover:text-emerald-400 transition-colors\">Pricing</a>\n <a href=\"#testimonials\" class=\"hover:text-emerald-400 transition-colors\">Testimonials</a>\n <a href=\"#\" class=\"text-slate-400 hover:text-slate-200 transition-colors\">Docs</a>\n </div>\n\n <div class=\"hidden md:flex items-center gap-3\">\n <a href=\"#\" class=\"text-sm font-medium text-slate-300 hover:text-white transition-colors px-4 py-2\">Sign in</a>\n <a href=\"#\" class=\"text-sm font-semibold bg-emerald-500 hover:bg-emerald-400 text-slate-950 px-5 py-2 rounded-lg transition-colors\">Start Free</a>\n </div>\n\n <button id=\"mobile-toggle\" class=\"md:hidden p-2 text-slate-400 hover:text-white\" aria-label=\"Toggle navigation menu\" aria-expanded=\"false\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16M4 18h16\"/></svg>\n </button>\n </div>\n </div>\n\n <div id=\"mobile-menu\" class=\"hidden md:hidden border-t border-white/5 bg-slate-950/95 backdrop-blur-xl\">\n <div class=\"px-4 py-4 space-y-3\">\n <a href=\"#features\" class=\"block text-sm font-medium text-slate-300 hover:text-emerald-400\">Features</a>\n <a href=\"#pricing\" class=\"block text-sm font-medium text-slate-300 hover:text-emerald-400\">Pricing</a>\n <a href=\"#testimonials\" class=\"block text-sm font-medium text-slate-300 hover:text-emerald-400\">Testimonials</a>\n <a href=\"#\" class=\"block text-sm font-medium text-slate-300 hover:text-emerald-400\">Docs</a>\n <div class=\"pt-3 border-t border-white/5 flex flex-col gap-2\">\n <a href=\"#\" class=\"text-sm text-center text-slate-300 py-2\">Sign in</a>\n <a href=\"#\" class=\"text-sm text-center font-semibold bg-emerald-500 text-slate-950 py-2 rounded-lg\">Start Free</a>\n </div>\n </div>\n </div>\n </nav>\n\n <!-- Hero -->\n <section class=\"relative pt-32 pb-20 sm:pt-40 sm:pb-28 hero-glow overflow-hidden\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center\">\n <div class=\"inline-flex items-center gap-2 glass rounded-full px-4 py-1.5 text-xs font-medium text-emerald-400 mb-8\">\n <span class=\"w-1.5 h-1.5 bg-emerald-400 rounded-full animate-pulse\"></span>\n Now tracking 2.4B events/day\n </div>\n\n <h1 class=\"text-4xl sm:text-6xl lg:text-7xl font-black tracking-tight leading-[1.08] mb-6\">\n Ship faster with<br>\n <span class=\"gradient-text\">real-time insights</span>\n </h1>\n\n <p class=\"max-w-2xl mx-auto text-lg sm:text-xl text-slate-400 leading-relaxed mb-10\">\n DevPulse gives engineering teams instant visibility into deployments, errors, and performance.\n From commit to production — every metric that matters, in&nbsp;one&nbsp;dashboard.\n </p>\n\n <div class=\"flex flex-col sm:flex-row items-center justify-center gap-4\">\n <a href=\"#\" class=\"w-full sm:w-auto text-center bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold text-base px-8 py-3.5 rounded-xl transition-colors\">\n Start Free Trial\n </a>\n <a href=\"#\" class=\"w-full sm:w-auto text-center glass hover:bg-white/[0.06] text-slate-200 font-semibold text-base px-8 py-3.5 rounded-xl transition-colors group\">\n Live Demo\n <span class=\"inline-block ml-1 group-hover:translate-x-0.5 transition-transform\" aria-hidden=\"true\">&rarr;</span>\n </a>\n </div>\n\n <p class=\"mt-6 text-xs text-slate-500\">No credit card required &middot; 14-day free trial &middot; Cancel anytime</p>\n </div>\n </section>\n\n <!-- Stats Bar -->\n <section class=\"border-y border-white/5 bg-slate-900/50\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 grid grid-cols-2 md:grid-cols-4 gap-8 text-center\">\n <div>\n <p class=\"text-3xl sm:text-4xl font-extrabold gradient-text\">4,200+</p>\n <p class=\"mt-1 text-sm text-slate-400\">Engineering Teams</p>\n </div>\n <div>\n <p class=\"text-3xl sm:text-4xl font-extrabold gradient-text\">99.99%</p>\n <p class=\"mt-1 text-sm text-slate-400\">Uptime SLA</p>\n </div>\n <div>\n <p class=\"text-3xl sm:text-4xl font-extrabold gradient-text\">&lt;50ms</p>\n <p class=\"mt-1 text-sm text-slate-400\">Avg Latency</p>\n </div>\n <div>\n <p class=\"text-3xl sm:text-4xl font-extrabold gradient-text\">2.4B</p>\n <p class=\"mt-1 text-sm text-slate-400\">Events / Day</p>\n </div>\n </div>\n </section>\n\n <!-- Features -->\n <section id=\"features\" class=\"py-24 sm:py-32\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center mb-16\">\n <p class=\"text-sm font-semibold text-emerald-400 tracking-widest uppercase mb-3\">Capabilities</p>\n <h2 class=\"text-3xl sm:text-5xl font-extrabold tracking-tight\">Everything your team needs</h2>\n <p class=\"mt-4 max-w-2xl mx-auto text-lg text-slate-400\">From real-time error tracking to deployment analytics, DevPulse covers the full engineering lifecycle.</p>\n </div>\n\n <div class=\"grid sm:grid-cols-2 lg:grid-cols-3 gap-6\">\n <!-- Feature 1 -->\n <div class=\"glass rounded-2xl p-8 card-hover\">\n <div class=\"w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-5\">\n <svg class=\"w-6 h-6 text-emerald-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z\"/></svg>\n </div>\n <h3 class=\"text-lg font-bold mb-2\">Real-Time Alerts</h3>\n <p class=\"text-sm text-slate-400 leading-relaxed\">Get notified in Slack, PagerDuty, or email the moment an error spike or performance regression is detected.</p>\n </div>\n <!-- Feature 2 -->\n <div class=\"glass rounded-2xl p-8 card-hover\">\n <div class=\"w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-5\">\n <svg class=\"w-6 h-6 text-emerald-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M7.5 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z\"/></svg>\n </div>\n <h3 class=\"text-lg font-bold mb-2\">Deploy Analytics</h3>\n <p class=\"text-sm text-slate-400 leading-relaxed\">Track deployment frequency, lead time, failure rate, and MTTR. Measure DORA metrics without spreadsheets.</p>\n </div>\n <!-- Feature 3 -->\n <div class=\"glass rounded-2xl p-8 card-hover\">\n <div class=\"w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-5\">\n <svg class=\"w-6 h-6 text-emerald-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M12 9v3.75m0-10.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.75c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.57-.598-3.75h-.152c-3.196 0-6.1-1.249-8.25-3.286zm0 13.036h.008v.008H12v-.008z\"/></svg>\n </div>\n <h3 class=\"text-lg font-bold mb-2\">Error Intelligence</h3>\n <p class=\"text-sm text-slate-400 leading-relaxed\">AI-powered error grouping with stack trace deduplication. See root causes, not noise. Fix issues 3x faster.</p>\n </div>\n <!-- Feature 4 -->\n <div class=\"glass rounded-2xl p-8 card-hover\">\n <div class=\"w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-5\">\n <svg class=\"w-6 h-6 text-emerald-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5\"/></svg>\n </div>\n <h3 class=\"text-lg font-bold mb-2\">SDK & API First</h3>\n <p class=\"text-sm text-slate-400 leading-relaxed\">Lightweight SDKs for Node, Python, Go, and Rust. Open API with webhooks, GraphQL, and Terraform provider.</p>\n </div>\n <!-- Feature 5 -->\n <div class=\"glass rounded-2xl p-8 card-hover\">\n <div class=\"w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-5\">\n <svg class=\"w-6 h-6 text-emerald-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z\"/></svg>\n </div>\n <h3 class=\"text-lg font-bold mb-2\">Team Insights</h3>\n <p class=\"text-sm text-slate-400 leading-relaxed\">Understand engineering throughput across squads. Spot bottlenecks and celebrate wins with transparent metrics.</p>\n </div>\n <!-- Feature 6 -->\n <div class=\"glass rounded-2xl p-8 card-hover\">\n <div class=\"w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-5\">\n <svg class=\"w-6 h-6 text-emerald-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z\"/></svg>\n </div>\n <h3 class=\"text-lg font-bold mb-2\">SOC 2 Compliant</h3>\n <p class=\"text-sm text-slate-400 leading-relaxed\">Enterprise-grade security with SOC 2 Type II, GDPR compliance, SSO/SAML, role-based access, and audit logs.</p>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Pricing -->\n <section id=\"pricing\" class=\"py-24 sm:py-32 bg-slate-900/40\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center mb-16\">\n <p class=\"text-sm font-semibold text-emerald-400 tracking-widest uppercase mb-3\">Pricing</p>\n <h2 class=\"text-3xl sm:text-5xl font-extrabold tracking-tight\">Simple, transparent pricing</h2>\n <p class=\"mt-4 max-w-xl mx-auto text-lg text-slate-400\">Start free. Scale as you grow. No surprise invoices.</p>\n </div>\n\n <div class=\"grid md:grid-cols-3 gap-6 lg:gap-8 max-w-5xl mx-auto items-start\">\n <!-- Starter -->\n <div class=\"glass rounded-2xl p-8 card-hover\">\n <h3 class=\"text-lg font-bold\">Starter</h3>\n <p class=\"text-sm text-slate-400 mt-1\">For small teams getting started</p>\n <p class=\"mt-6 flex items-baseline gap-1\">\n <span class=\"text-4xl font-extrabold\">$0</span>\n <span class=\"text-slate-500 text-sm\">/month</span>\n </p>\n <a href=\"#\" class=\"mt-8 block text-center glass hover:bg-white/[0.06] text-slate-200 font-semibold text-sm py-3 rounded-xl transition-colors\">Get Started</a>\n <ul class=\"mt-8 space-y-3 text-sm text-slate-300\">\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-emerald-400 shrink-0 mt-0.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"/></svg>Up to 100K events/mo</li>\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-emerald-400 shrink-0 mt-0.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"/></svg>3 team members</li>\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-emerald-400 shrink-0 mt-0.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"/></svg>7-day data retention</li>\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-emerald-400 shrink-0 mt-0.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"/></svg>Email alerts</li>\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-emerald-400 shrink-0 mt-0.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"/></svg>Community support</li>\n </ul>\n </div>\n\n <!-- Pro (highlighted) -->\n <div class=\"relative rounded-2xl glow-border bg-gradient-to-b from-emerald-500/[0.08] to-transparent card-hover\">\n <div class=\"absolute -top-3.5 left-1/2 -translate-x-1/2 bg-emerald-500 text-slate-950 text-xs font-bold px-4 py-1 rounded-full\">Most Popular</div>\n <div class=\"glass rounded-2xl p-8 border-0\" style=\"border:none;background:transparent;backdrop-filter:none;\">\n <h3 class=\"text-lg font-bold\">Pro</h3>\n <p class=\"text-sm text-slate-400 mt-1\">For growing engineering orgs</p>\n <p class=\"mt-6 flex items-baseline gap-1\">\n <span class=\"text-4xl font-extrabold gradient-text\">$49</span>\n <span class=\"text-slate-500 text-sm\">/month</span>\n </p>\n <a href=\"#\" class=\"mt-8 block text-center bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold text-sm py-3 rounded-xl transition-colors\">Start Free Trial</a>\n <ul class=\"mt-8 space-y-3 text-sm text-slate-300\">\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-emerald-400 shrink-0 mt-0.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"/></svg>Up to 10M events/mo</li>\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-emerald-400 shrink-0 mt-0.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"/></svg>Unlimited team members</li>\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-emerald-400 shrink-0 mt-0.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"/></svg>90-day data retention</li>\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-emerald-400 shrink-0 mt-0.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"/></svg>Slack & PagerDuty alerts</li>\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-emerald-400 shrink-0 mt-0.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"/></svg>DORA metrics dashboard</li>\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-emerald-400 shrink-0 mt-0.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"/></svg>Priority email support</li>\n </ul>\n </div>\n </div>\n\n <!-- Enterprise -->\n <div class=\"glass rounded-2xl p-8 card-hover\">\n <h3 class=\"text-lg font-bold\">Enterprise</h3>\n <p class=\"text-sm text-slate-400 mt-1\">For large-scale operations</p>\n <p class=\"mt-6 flex items-baseline gap-1\">\n <span class=\"text-4xl font-extrabold\">Custom</span>\n </p>\n <a href=\"#\" class=\"mt-8 block text-center glass hover:bg-white/[0.06] text-slate-200 font-semibold text-sm py-3 rounded-xl transition-colors\">Contact Sales</a>\n <ul class=\"mt-8 space-y-3 text-sm text-slate-300\">\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-emerald-400 shrink-0 mt-0.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"/></svg>Unlimited events</li>\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-emerald-400 shrink-0 mt-0.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"/></svg>SSO / SAML</li>\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-emerald-400 shrink-0 mt-0.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"/></svg>1-year data retention</li>\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-emerald-400 shrink-0 mt-0.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"/></svg>Custom integrations</li>\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-emerald-400 shrink-0 mt-0.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"/></svg>SOC 2 &amp; GDPR</li>\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-emerald-400 shrink-0 mt-0.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"/></svg>Dedicated account manager</li>\n </ul>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Testimonials -->\n <section id=\"testimonials\" class=\"py-24 sm:py-32\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center mb-16\">\n <p class=\"text-sm font-semibold text-emerald-400 tracking-widest uppercase mb-3\">Testimonials</p>\n <h2 class=\"text-3xl sm:text-5xl font-extrabold tracking-tight\">Loved by engineering teams</h2>\n </div>\n\n <div class=\"grid md:grid-cols-3 gap-6\">\n <div class=\"glass rounded-2xl p-8\">\n <div class=\"flex gap-1 mb-4\" aria-label=\"5 out of 5 stars\">\n <svg class=\"w-5 h-5 text-emerald-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5 text-emerald-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5 text-emerald-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5 text-emerald-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5 text-emerald-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n </div>\n <blockquote class=\"text-sm text-slate-300 leading-relaxed mb-6\">\"DevPulse cut our incident response time by 60%. The real-time error grouping is a game-changer — we stopped drowning in duplicate alerts overnight.\"</blockquote>\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10 rounded-full bg-emerald-500/20 flex items-center justify-center text-sm font-bold text-emerald-400\">SK</div>\n <div>\n <p class=\"text-sm font-semibold\">Sarah Kim</p>\n <p class=\"text-xs text-slate-500\">VP Engineering, Stackline</p>\n </div>\n </div>\n </div>\n\n <div class=\"glass rounded-2xl p-8\">\n <div class=\"flex gap-1 mb-4\" aria-label=\"5 out of 5 stars\">\n <svg class=\"w-5 h-5 text-emerald-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5 text-emerald-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5 text-emerald-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5 text-emerald-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5 text-emerald-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n </div>\n <blockquote class=\"text-sm text-slate-300 leading-relaxed mb-6\">\"We replaced three separate tools with DevPulse. The DORA metrics dashboard alone justified the switch — our leadership finally has visibility into delivery velocity.\"</blockquote>\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10 rounded-full bg-emerald-500/20 flex items-center justify-center text-sm font-bold text-emerald-400\">MR</div>\n <div>\n <p class=\"text-sm font-semibold\">Marcus Rivera</p>\n <p class=\"text-xs text-slate-500\">CTO, Buildkraft</p>\n </div>\n </div>\n </div>\n\n <div class=\"glass rounded-2xl p-8\">\n <div class=\"flex gap-1 mb-4\" aria-label=\"5 out of 5 stars\">\n <svg class=\"w-5 h-5 text-emerald-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5 text-emerald-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5 text-emerald-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5 text-emerald-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5 text-emerald-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n </div>\n <blockquote class=\"text-sm text-slate-300 leading-relaxed mb-6\">\"The SDK integration took 15 minutes. Within an hour we had full observability across our microservices. The sub-50ms latency means zero performance overhead.\"</blockquote>\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10 rounded-full bg-emerald-500/20 flex items-center justify-center text-sm font-bold text-emerald-400\">JT</div>\n <div>\n <p class=\"text-sm font-semibold\">Jenna Torres</p>\n <p class=\"text-xs text-slate-500\">Lead SRE, NovaPay</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <!-- CTA -->\n <section class=\"py-24 sm:py-32\">\n <div class=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center\">\n <div class=\"glass rounded-3xl p-12 sm:p-16 glow-border relative overflow-hidden\">\n <div class=\"absolute inset-0 hero-glow pointer-events-none\" aria-hidden=\"true\"></div>\n <div class=\"relative\">\n <h2 class=\"text-3xl sm:text-5xl font-black tracking-tight mb-4\">Ready to ship with confidence?</h2>\n <p class=\"text-lg text-slate-400 max-w-xl mx-auto mb-8\">Join 4,200+ engineering teams using DevPulse to deploy faster, catch errors sooner, and build better software.</p>\n <div class=\"flex flex-col sm:flex-row items-center justify-center gap-4\">\n <a href=\"#\" class=\"w-full sm:w-auto text-center bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold text-base px-8 py-3.5 rounded-xl transition-colors\">Start Your Free Trial</a>\n <a href=\"#\" class=\"w-full sm:w-auto text-center text-slate-300 hover:text-white font-semibold text-base px-8 py-3.5 transition-colors\">Talk to Sales</a>\n </div>\n <p class=\"mt-5 text-xs text-slate-500\">Free 14-day trial &middot; No credit card required</p>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Footer -->\n <footer class=\"border-t border-white/5 bg-slate-950\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12\">\n <div class=\"grid grid-cols-2 md:grid-cols-5 gap-8\">\n <div class=\"col-span-2 md:col-span-1\">\n <a href=\"#\" class=\"flex items-center gap-2 text-lg font-extrabold tracking-tight\">\n <svg class=\"w-7 h-7 text-emerald-400\" viewBox=\"0 0 32 32\" fill=\"none\" aria-hidden=\"true\">\n <rect width=\"32\" height=\"32\" rx=\"8\" fill=\"currentColor\" fill-opacity=\"0.15\"/>\n <path d=\"M8 22 L12 12 L16 18 L20 8 L24 16\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"/>\n </svg>\n <span>Dev<span class=\"gradient-text\">Pulse</span></span>\n </a>\n <p class=\"mt-3 text-sm text-slate-500 leading-relaxed\">Real-time developer analytics for modern engineering teams.</p>\n </div>\n\n <div>\n <h4 class=\"text-xs font-semibold uppercase tracking-widest text-slate-400 mb-4\">Product</h4>\n <ul class=\"space-y-2.5 text-sm text-slate-500\">\n <li><a href=\"#\" class=\"hover:text-slate-300 transition-colors\">Features</a></li>\n <li><a href=\"#\" class=\"hover:text-slate-300 transition-colors\">Pricing</a></li>\n <li><a href=\"#\" class=\"hover:text-slate-300 transition-colors\">Integrations</a></li>\n <li><a href=\"#\" class=\"hover:text-slate-300 transition-colors\">Changelog</a></li>\n </ul>\n </div>\n\n <div>\n <h4 class=\"text-xs font-semibold uppercase tracking-widest text-slate-400 mb-4\">Developers</h4>\n <ul class=\"space-y-2.5 text-sm text-slate-500\">\n <li><a href=\"#\" class=\"hover:text-slate-300 transition-colors\">Documentation</a></li>\n <li><a href=\"#\" class=\"hover:text-slate-300 transition-colors\">API Reference</a></li>\n <li><a href=\"#\" class=\"hover:text-slate-300 transition-colors\">SDKs</a></li>\n <li><a href=\"#\" class=\"hover:text-slate-300 transition-colors\">Status</a></li>\n </ul>\n </div>\n\n <div>\n <h4 class=\"text-xs font-semibold uppercase tracking-widest text-slate-400 mb-4\">Company</h4>\n <ul class=\"space-y-2.5 text-sm text-slate-500\">\n <li><a href=\"#\" class=\"hover:text-slate-300 transition-colors\">About</a></li>\n <li><a href=\"#\" class=\"hover:text-slate-300 transition-colors\">Blog</a></li>\n <li><a href=\"#\" class=\"hover:text-slate-300 transition-colors\">Careers</a></li>\n <li><a href=\"#\" class=\"hover:text-slate-300 transition-colors\">Contact</a></li>\n </ul>\n </div>\n\n <div>\n <h4 class=\"text-xs font-semibold uppercase tracking-widest text-slate-400 mb-4\">Legal</h4>\n <ul class=\"space-y-2.5 text-sm text-slate-500\">\n <li><a href=\"#\" class=\"hover:text-slate-300 transition-colors\">Privacy</a></li>\n <li><a href=\"#\" class=\"hover:text-slate-300 transition-colors\">Terms</a></li>\n <li><a href=\"#\" class=\"hover:text-slate-300 transition-colors\">Security</a></li>\n <li><a href=\"#\" class=\"hover:text-slate-300 transition-colors\">GDPR</a></li>\n </ul>\n </div>\n </div>\n\n <div class=\"mt-12 pt-8 border-t border-white/5 flex flex-col sm:flex-row items-center justify-between gap-4\">\n <p class=\"text-xs text-slate-600\">&copy; 2026 DevPulse, Inc. All rights reserved.</p>\n <div class=\"flex items-center gap-5\">\n <a href=\"#\" class=\"text-slate-600 hover:text-slate-400 transition-colors\" aria-label=\"GitHub\">\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z\"/></svg>\n </a>\n <a href=\"#\" class=\"text-slate-600 hover:text-slate-400 transition-colors\" aria-label=\"X (Twitter)\">\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\"/></svg>\n </a>\n <a href=\"#\" class=\"text-slate-600 hover:text-slate-400 transition-colors\" aria-label=\"LinkedIn\">\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z\"/></svg>\n </a>\n </div>\n </div>\n </div>\n </footer>\n\n <script>\n const toggle = document.getElementById('mobile-toggle');\n const menu = document.getElementById('mobile-menu');\n toggle.addEventListener('click', () => {\n const open = !menu.classList.contains('hidden');\n menu.classList.toggle('hidden');\n toggle.setAttribute('aria-expanded', String(!open));\n });\n // Close mobile menu on link click\n menu.querySelectorAll('a').forEach(link => {\n link.addEventListener('click', () => {\n menu.classList.add('hidden');\n toggle.setAttribute('aria-expanded', 'false');\n });\n });\n </script>\n\n</body>\n</html>"
25203
+ },
25204
+ {
25205
+ "id": "saas-landing/minimal",
25206
+ "title": "SaaS Landing Minimal",
25207
+ "summary": "Ultra-clean monochrome landing page with typography-first design, maximum whitespace, and zero visual noise.",
25208
+ "description": "A deliberately restrained landing page that lets content breathe. No gradients, no shadows, no color accents — just clean typography and generous spacing for a notes/writing application.",
25209
+ "category": "saas-landing",
25210
+ "style": "minimal",
25211
+ "tags": [
25212
+ "saas",
25213
+ "landing-page",
25214
+ "minimal",
25215
+ "typography",
25216
+ "monochrome"
25217
+ ],
25218
+ "patterns": [
25219
+ "navbar/base",
25220
+ "hero/minimal",
25221
+ "features/base",
25222
+ "cta/base",
25223
+ "footer/base"
25224
+ ],
25225
+ "sections": [
25226
+ "navbar",
25227
+ "hero",
25228
+ "features",
25229
+ "social-proof",
25230
+ "pricing",
25231
+ "cta",
25232
+ "footer"
25233
+ ],
25234
+ "features": {
25235
+ "responsive": true,
25236
+ "darkMode": false,
25237
+ "animations": false,
25238
+ "formHandling": false
25239
+ },
25240
+ "files": {
25241
+ "html": "./minimal.html",
25242
+ "preview": "./minimal.png"
25243
+ },
25244
+ "install": {
25245
+ "copyPasteReady": true,
25246
+ "tailwindCdn": true,
25247
+ "vanillaJs": false,
25248
+ "notes": [
25249
+ "Zero JavaScript — pure HTML and CSS",
25250
+ "Monochrome design — add accent color to taste",
25251
+ "Replace Cleartype branding with your product"
25252
+ ]
25253
+ },
25254
+ "governance": {
25255
+ "status": "published",
25256
+ "quality": "flagship",
25257
+ "owner": "design-system",
25258
+ "updatedAt": "2026-03-20"
25259
+ },
25260
+ "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Cleartype — Writing, distilled</title>\n <meta name=\"description\" content=\"A minimal notes app that gets out of your way. No folders, no tags, no friction. Just you and your words.\">\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap\" rel=\"stylesheet\">\n <style>\n body { font-family: 'Inter', system-ui, sans-serif; }\n </style>\n</head>\n<body class=\"bg-white text-slate-900 antialiased\">\n\n <!-- Navbar -->\n <nav class=\"max-w-3xl mx-auto px-6 py-8 flex items-center justify-between\" aria-label=\"Main navigation\">\n <a href=\"#\" class=\"text-base font-medium tracking-tight\">Cleartype</a>\n <div class=\"flex items-center gap-8\">\n <a href=\"#features\" class=\"text-sm text-slate-500 hover:text-slate-900 transition-colors\">Features</a>\n <a href=\"#pricing\" class=\"text-sm text-slate-500 hover:text-slate-900 transition-colors\">Pricing</a>\n <a href=\"#start\" class=\"text-sm font-medium\">Sign in</a>\n </div>\n </nav>\n\n <!-- Hero -->\n <header class=\"max-w-3xl mx-auto px-6 pt-24 pb-32 sm:pt-36 sm:pb-44\">\n <h1 class=\"text-4xl sm:text-5xl md:text-6xl font-medium tracking-tight leading-[1.1]\">\n Writing,<br>distilled.\n </h1>\n <p class=\"mt-8 text-lg sm:text-xl text-slate-500 max-w-md leading-relaxed\">\n A notes app that gets out of your way. No folders, no tags, no friction. Just you and your words.\n </p>\n <div class=\"mt-12 flex items-center gap-6\">\n <a href=\"#start\" class=\"text-sm font-medium border-b border-slate-900 pb-0.5 hover:border-slate-500 hover:text-slate-600 transition-colors\">\n Start writing free\n </a>\n <span class=\"text-sm text-slate-400\">No credit card</span>\n </div>\n </header>\n\n <hr class=\"max-w-3xl mx-auto border-slate-100\">\n\n <!-- Features -->\n <section id=\"features\" class=\"max-w-3xl mx-auto px-6 py-28 sm:py-36\" aria-labelledby=\"features-heading\">\n <h2 id=\"features-heading\" class=\"text-2xl sm:text-3xl font-medium tracking-tight\">Less is everything.</h2>\n <p class=\"mt-4 text-slate-500 max-w-md\">We removed every feature that slowed you down, then removed a few more.</p>\n\n <dl class=\"mt-16 space-y-12\">\n <div>\n <dt class=\"text-base font-medium\">Instant capture</dt>\n <dd class=\"mt-2 text-slate-500 leading-relaxed max-w-lg\">\n Open the app and start typing. No templates, no prompts, no decisions. Your cursor is already blinking.\n </dd>\n </div>\n <div>\n <dt class=\"text-base font-medium\">Flat structure</dt>\n <dd class=\"mt-2 text-slate-500 leading-relaxed max-w-lg\">\n Every note lives at the same level. Search finds anything in milliseconds. Hierarchy is overhead you don't need.\n </dd>\n </div>\n <div>\n <dt class=\"text-base font-medium\">Offline always</dt>\n <dd class=\"mt-2 text-slate-500 leading-relaxed max-w-lg\">\n Your notes live on your device first, cloud second. Write on a plane, in a tunnel, anywhere thoughts happen.\n </dd>\n </div>\n <div>\n <dt class=\"text-base font-medium\">Plain text, forever</dt>\n <dd class=\"mt-2 text-slate-500 leading-relaxed max-w-lg\">\n Markdown in, Markdown out. No proprietary format. Export everything in one click. Your words belong to you.\n </dd>\n </div>\n <div>\n <dt class=\"text-base font-medium\">Fast, then faster</dt>\n <dd class=\"mt-2 text-slate-500 leading-relaxed max-w-lg\">\n Under 50ms to open. Under 10ms to search 10,000 notes. We measure in milliseconds because you think in them.\n </dd>\n </div>\n </dl>\n </section>\n\n <hr class=\"max-w-3xl mx-auto border-slate-100\">\n\n <!-- Social Proof -->\n <section class=\"max-w-3xl mx-auto px-6 py-28 sm:py-36\" aria-labelledby=\"proof-heading\">\n <h2 id=\"proof-heading\" class=\"sr-only\">What people say</h2>\n\n <figure>\n <blockquote class=\"text-xl sm:text-2xl font-medium leading-relaxed tracking-tight\">\n \"I've tried every notes app. Cleartype is the first one that feels like it isn't there. I just write.\"\n </blockquote>\n <figcaption class=\"mt-6 text-sm text-slate-500\">\n Ana Kowalski, Staff Engineer at Vercel\n </figcaption>\n </figure>\n\n <figure class=\"mt-20\">\n <blockquote class=\"text-xl sm:text-2xl font-medium leading-relaxed tracking-tight\">\n \"Most tools add complexity. Cleartype removes it. My writing output doubled in the first week.\"\n </blockquote>\n <figcaption class=\"mt-6 text-sm text-slate-500\">\n James Odera, Author of <cite>Thinking in Systems</cite>\n </figcaption>\n </figure>\n\n <p class=\"mt-20 text-sm text-slate-400\">\n Trusted by writers, engineers, and founders at Linear, Raycast, Resend, and Supabase.\n </p>\n </section>\n\n <hr class=\"max-w-3xl mx-auto border-slate-100\">\n\n <!-- Pricing -->\n <section id=\"pricing\" class=\"max-w-3xl mx-auto px-6 py-28 sm:py-36\" aria-labelledby=\"pricing-heading\">\n <h2 id=\"pricing-heading\" class=\"text-2xl sm:text-3xl font-medium tracking-tight\">One plan. No surprises.</h2>\n <p class=\"mt-4 text-slate-500 max-w-md\">Free to start. Pay when you need sync across devices.</p>\n\n <div class=\"mt-16 grid sm:grid-cols-2 gap-16\">\n <div>\n <p class=\"text-sm text-slate-400 uppercase tracking-wider\">Free</p>\n <p class=\"mt-3 text-4xl font-medium tracking-tight\">$0</p>\n <p class=\"mt-1 text-sm text-slate-500\">forever</p>\n <ul class=\"mt-8 space-y-3 text-sm text-slate-600\" role=\"list\">\n <li>Unlimited notes</li>\n <li>Full-text search</li>\n <li>Markdown export</li>\n <li>Single device</li>\n </ul>\n </div>\n <div>\n <p class=\"text-sm text-slate-400 uppercase tracking-wider\">Pro</p>\n <p class=\"mt-3 text-4xl font-medium tracking-tight\">$8<span class=\"text-lg text-slate-400 font-normal\">/mo</span></p>\n <p class=\"mt-1 text-sm text-slate-500\">billed yearly, or $10 monthly</p>\n <ul class=\"mt-8 space-y-3 text-sm text-slate-600\" role=\"list\">\n <li>Everything in Free</li>\n <li>Cross-device sync</li>\n <li>End-to-end encryption</li>\n <li>API access</li>\n <li>Priority support</li>\n </ul>\n </div>\n </div>\n </section>\n\n <hr class=\"max-w-3xl mx-auto border-slate-100\">\n\n <!-- CTA -->\n <section id=\"start\" class=\"max-w-3xl mx-auto px-6 py-28 sm:py-36 text-center\" aria-labelledby=\"cta-heading\">\n <h2 id=\"cta-heading\" class=\"text-3xl sm:text-4xl font-medium tracking-tight\">Start writing today.</h2>\n <p class=\"mt-4 text-slate-500\">Free forever. No credit card required.</p>\n <div class=\"mt-10\">\n <a href=\"#\" class=\"inline-block text-sm font-medium border-b border-slate-900 pb-0.5 hover:border-slate-500 hover:text-slate-600 transition-colors\">\n Create your account\n </a>\n </div>\n </section>\n\n <!-- Footer -->\n <footer class=\"max-w-3xl mx-auto px-6 py-12 flex flex-col sm:flex-row items-center justify-between gap-4 text-sm text-slate-400\">\n <p>&copy; 2026 Cleartype</p>\n <nav class=\"flex gap-6\" aria-label=\"Footer navigation\">\n <a href=\"#\" class=\"hover:text-slate-600 transition-colors\">Privacy</a>\n <a href=\"#\" class=\"hover:text-slate-600 transition-colors\">Terms</a>\n <a href=\"#\" class=\"hover:text-slate-600 transition-colors\">Twitter</a>\n <a href=\"#\" class=\"hover:text-slate-600 transition-colors\">GitHub</a>\n </nav>\n </footer>\n\n</body>\n</html>"
25261
+ },
25262
+ {
25263
+ "id": "saas-landing/modern",
25264
+ "title": "SaaS Landing Modern",
25265
+ "summary": "Clean, modern SaaS product landing page with gradient accents, feature grid, pricing tiers, and FAQ section.",
25266
+ "description": "A complete landing page template for SaaS products featuring a hero with CTA, logo cloud, 3-column feature grid, step-by-step how it works, three pricing tiers, customer testimonials, FAQ accordion, and a conversion CTA section.",
25267
+ "category": "saas-landing",
25268
+ "style": "modern",
25269
+ "tags": [
25270
+ "saas",
25271
+ "landing-page",
25272
+ "marketing",
25273
+ "startup",
25274
+ "product"
25275
+ ],
25276
+ "patterns": [
25277
+ "navbar/base",
25278
+ "hero/base",
25279
+ "features/base",
25280
+ "pricing/base",
25281
+ "faq/base",
25282
+ "testimonials/base",
25283
+ "cta/base",
25284
+ "footer/base"
25285
+ ],
25286
+ "sections": [
25287
+ "navbar",
25288
+ "hero",
25289
+ "logo-cloud",
25290
+ "features",
25291
+ "how-it-works",
25292
+ "pricing",
25293
+ "testimonials",
25294
+ "faq",
25295
+ "cta",
25296
+ "footer"
25297
+ ],
25298
+ "features": {
25299
+ "responsive": true,
25300
+ "darkMode": false,
25301
+ "animations": false,
25302
+ "formHandling": false
25303
+ },
25304
+ "files": {
25305
+ "html": "./modern.html",
25306
+ "preview": "./modern.png"
25307
+ },
25308
+ "install": {
25309
+ "copyPasteReady": true,
25310
+ "tailwindCdn": true,
25311
+ "vanillaJs": true,
25312
+ "notes": [
25313
+ "Uses Tailwind CDN for zero-build setup",
25314
+ "Mobile menu requires minimal vanilla JS",
25315
+ "Replace Flowboard branding with your product"
25316
+ ]
25317
+ },
25318
+ "governance": {
25319
+ "status": "published",
25320
+ "quality": "flagship",
25321
+ "owner": "design-system",
25322
+ "updatedAt": "2026-03-20"
25323
+ },
25324
+ "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Flowboard — Project Management That Flows</title>\n <meta name=\"description\" content=\"Streamline your team's workflow with Flowboard. Visual project boards, real-time collaboration, and smart automation — all in one place.\" />\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <style>\n html { scroll-behavior: smooth; }\n details[open] summary svg { transform: rotate(180deg); }\n </style>\n</head>\n<body class=\"bg-white text-slate-800 antialiased\">\n\n <!-- Navbar -->\n <nav class=\"sticky top-0 z-50 bg-white/80 backdrop-blur-lg border-b border-slate-100\" aria-label=\"Main navigation\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16\">\n <a href=\"#\" class=\"flex items-center gap-2 text-xl font-bold text-indigo-600\" aria-label=\"Flowboard home\">\n <svg class=\"w-8 h-8\" viewBox=\"0 0 32 32\" fill=\"none\" aria-hidden=\"true\"><rect width=\"32\" height=\"32\" rx=\"8\" fill=\"#4F46E5\"/><path d=\"M10 11h12M10 16h8M10 21h10\" stroke=\"#fff\" stroke-width=\"2\" stroke-linecap=\"round\"/></svg>\n Flowboard\n </a>\n <div class=\"hidden md:flex items-center gap-8 text-sm font-medium text-slate-600\">\n <a href=\"#features\" class=\"hover:text-indigo-600 transition-colors\">Features</a>\n <a href=\"#how-it-works\" class=\"hover:text-indigo-600 transition-colors\">How It Works</a>\n <a href=\"#pricing\" class=\"hover:text-indigo-600 transition-colors\">Pricing</a>\n <a href=\"#faq\" class=\"hover:text-indigo-600 transition-colors\">FAQ</a>\n </div>\n <div class=\"hidden md:flex items-center gap-3\">\n <a href=\"#\" class=\"text-sm font-medium text-slate-600 hover:text-indigo-600 transition-colors\">Sign in</a>\n <a href=\"#\" class=\"text-sm font-semibold px-4 py-2 rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 transition-colors shadow-sm\">Start Free</a>\n </div>\n <button id=\"mobile-menu-btn\" class=\"md:hidden p-2 rounded-lg hover:bg-slate-100\" aria-label=\"Toggle menu\" aria-expanded=\"false\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" d=\"M4 6h16M4 12h16M4 18h16\"/></svg>\n </button>\n </div>\n <div id=\"mobile-menu\" class=\"hidden md:hidden border-t border-slate-100 bg-white px-4 pb-4 pt-2 space-y-2\">\n <a href=\"#features\" class=\"block py-2 text-sm font-medium text-slate-600 hover:text-indigo-600\">Features</a>\n <a href=\"#how-it-works\" class=\"block py-2 text-sm font-medium text-slate-600 hover:text-indigo-600\">How It Works</a>\n <a href=\"#pricing\" class=\"block py-2 text-sm font-medium text-slate-600 hover:text-indigo-600\">Pricing</a>\n <a href=\"#faq\" class=\"block py-2 text-sm font-medium text-slate-600 hover:text-indigo-600\">FAQ</a>\n <div class=\"pt-2 flex flex-col gap-2\">\n <a href=\"#\" class=\"text-sm font-medium text-slate-600 text-center py-2\">Sign in</a>\n <a href=\"#\" class=\"text-sm font-semibold px-4 py-2 rounded-lg bg-indigo-600 text-white text-center\">Start Free</a>\n </div>\n </div>\n </nav>\n\n <!-- Hero -->\n <section class=\"relative overflow-hidden\">\n <div class=\"absolute inset-0 bg-gradient-to-br from-indigo-50 via-white to-blue-50 -z-10\" aria-hidden=\"true\"></div>\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-24 sm:pt-28 sm:pb-32 text-center\">\n <div class=\"inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-100 text-indigo-700 text-xs font-semibold mb-6 ring-1 ring-indigo-200\">\n <svg class=\"w-3.5 h-3.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n Trusted by 2,400+ teams worldwide\n </div>\n <h1 class=\"text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight text-slate-900 max-w-4xl mx-auto leading-tight\">\n Project management<br class=\"hidden sm:block\" /> that actually <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-blue-500\">flows</span>\n </h1>\n <p class=\"mt-6 text-lg sm:text-xl text-slate-500 max-w-2xl mx-auto leading-relaxed\">\n Visual boards, real-time collaboration, and smart automation. Flowboard helps your team ship faster without the chaos.\n </p>\n <div class=\"mt-10 flex flex-col sm:flex-row items-center justify-center gap-4\">\n <a href=\"#\" class=\"w-full sm:w-auto px-8 py-3.5 rounded-xl bg-indigo-600 text-white font-semibold text-base hover:bg-indigo-700 transition-colors shadow-lg shadow-indigo-200\">Start Free Trial</a>\n <a href=\"#how-it-works\" class=\"w-full sm:w-auto px-8 py-3.5 rounded-xl bg-white text-slate-700 font-semibold text-base ring-1 ring-slate-200 hover:ring-slate-300 transition-colors\">See How It Works</a>\n </div>\n <p class=\"mt-4 text-sm text-slate-400\">No credit card required. Free for teams up to 5.</p>\n </div>\n </section>\n\n <!-- Logo Cloud -->\n <section class=\"border-y border-slate-100 bg-slate-50/50 py-10\" aria-label=\"Trusted by leading companies\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <p class=\"text-center text-xs font-semibold uppercase tracking-widest text-slate-400 mb-8\">Trusted by forward-thinking teams</p>\n <div class=\"flex flex-wrap items-center justify-center gap-x-12 gap-y-6 opacity-50\">\n <span class=\"text-xl font-bold text-slate-400 tracking-tight\">Acme Corp</span>\n <span class=\"text-xl font-bold text-slate-400 tracking-tight\">NovaTech</span>\n <span class=\"text-xl font-bold text-slate-400 tracking-tight\">Meridian</span>\n <span class=\"text-xl font-bold text-slate-400 tracking-tight\">Quantum AI</span>\n <span class=\"text-xl font-bold text-slate-400 tracking-tight\">Basecamp</span>\n <span class=\"text-xl font-bold text-slate-400 tracking-tight\">Skyline</span>\n </div>\n </div>\n </section>\n\n <!-- Features -->\n <section id=\"features\" class=\"py-20 sm:py-28\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center max-w-2xl mx-auto mb-16\">\n <p class=\"text-sm font-semibold text-indigo-600 uppercase tracking-wide mb-3\">Features</p>\n <h2 class=\"text-3xl sm:text-4xl font-bold text-slate-900\">Everything your team needs to ship</h2>\n <p class=\"mt-4 text-lg text-slate-500\">Powerful enough for enterprise workflows, simple enough to start in minutes.</p>\n </div>\n <div class=\"grid sm:grid-cols-2 lg:grid-cols-3 gap-8\">\n <div class=\"bg-white rounded-2xl p-8 ring-1 ring-slate-100 hover:ring-indigo-200 hover:shadow-lg transition-all\">\n <div class=\"w-12 h-12 rounded-xl bg-indigo-100 text-indigo-600 flex items-center justify-center mb-5\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z\"/></svg>\n </div>\n <h3 class=\"text-lg font-semibold text-slate-900 mb-2\">Visual Boards</h3>\n <p class=\"text-slate-500 leading-relaxed\">Kanban, timeline, and calendar views that adapt to how your team thinks. Drag, drop, and reorganize in real time.</p>\n </div>\n <div class=\"bg-white rounded-2xl p-8 ring-1 ring-slate-100 hover:ring-indigo-200 hover:shadow-lg transition-all\">\n <div class=\"w-12 h-12 rounded-xl bg-blue-100 text-blue-600 flex items-center justify-center mb-5\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z\"/></svg>\n </div>\n <h3 class=\"text-lg font-semibold text-slate-900 mb-2\">Real-Time Collaboration</h3>\n <p class=\"text-slate-500 leading-relaxed\">See who's working on what, leave contextual comments, and get notified the moment things change. No more status meetings.</p>\n </div>\n <div class=\"bg-white rounded-2xl p-8 ring-1 ring-slate-100 hover:ring-indigo-200 hover:shadow-lg transition-all\">\n <div class=\"w-12 h-12 rounded-xl bg-violet-100 text-violet-600 flex items-center justify-center mb-5\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z\"/></svg>\n </div>\n <h3 class=\"text-lg font-semibold text-slate-900 mb-2\">Smart Automation</h3>\n <p class=\"text-slate-500 leading-relaxed\">Set rules once and let Flowboard handle the rest. Auto-assign tasks, move cards, send reminders, and trigger webhooks.</p>\n </div>\n <div class=\"bg-white rounded-2xl p-8 ring-1 ring-slate-100 hover:ring-indigo-200 hover:shadow-lg transition-all\">\n <div class=\"w-12 h-12 rounded-xl bg-emerald-100 text-emerald-600 flex items-center justify-center mb-5\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z\"/></svg>\n </div>\n <h3 class=\"text-lg font-semibold text-slate-900 mb-2\">Built-In Analytics</h3>\n <p class=\"text-slate-500 leading-relaxed\">Track velocity, cycle time, and bottlenecks with dashboards that update in real time. Export reports in one click.</p>\n </div>\n <div class=\"bg-white rounded-2xl p-8 ring-1 ring-slate-100 hover:ring-indigo-200 hover:shadow-lg transition-all\">\n <div class=\"w-12 h-12 rounded-xl bg-amber-100 text-amber-600 flex items-center justify-center mb-5\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 002.25-2.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v2.25A2.25 2.25 0 006 10.5zm0 9.75h2.25A2.25 2.25 0 0010.5 18v-2.25a2.25 2.25 0 00-2.25-2.25H6a2.25 2.25 0 00-2.25 2.25V18A2.25 2.25 0 006 20.25zm9.75-9.75H18a2.25 2.25 0 002.25-2.25V6A2.25 2.25 0 0018 3.75h-2.25A2.25 2.25 0 0013.5 6v2.25a2.25 2.25 0 002.25 2.25z\"/></svg>\n </div>\n <h3 class=\"text-lg font-semibold text-slate-900 mb-2\">200+ Integrations</h3>\n <p class=\"text-slate-500 leading-relaxed\">Connect Slack, GitHub, Figma, Google Drive, and more. Keep your existing tools and let Flowboard be the connective tissue.</p>\n </div>\n <div class=\"bg-white rounded-2xl p-8 ring-1 ring-slate-100 hover:ring-indigo-200 hover:shadow-lg transition-all\">\n <div class=\"w-12 h-12 rounded-xl bg-rose-100 text-rose-600 flex items-center justify-center mb-5\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z\"/></svg>\n </div>\n <h3 class=\"text-lg font-semibold text-slate-900 mb-2\">Enterprise Security</h3>\n <p class=\"text-slate-500 leading-relaxed\">SOC 2 Type II certified, SSO with SAML, granular permissions, audit logs, and data residency options. Your data stays yours.</p>\n </div>\n </div>\n </div>\n </section>\n\n <!-- How It Works -->\n <section id=\"how-it-works\" class=\"py-20 sm:py-28 bg-gradient-to-b from-slate-50 to-white\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center max-w-2xl mx-auto mb-16\">\n <p class=\"text-sm font-semibold text-indigo-600 uppercase tracking-wide mb-3\">How It Works</p>\n <h2 class=\"text-3xl sm:text-4xl font-bold text-slate-900\">Up and running in three steps</h2>\n <p class=\"mt-4 text-lg text-slate-500\">No migration headaches. Import your existing projects or start fresh in minutes.</p>\n </div>\n <div class=\"grid md:grid-cols-3 gap-12\">\n <div class=\"text-center\">\n <div class=\"w-16 h-16 rounded-2xl bg-indigo-600 text-white text-2xl font-bold flex items-center justify-center mx-auto mb-6 shadow-lg shadow-indigo-200\">1</div>\n <h3 class=\"text-xl font-semibold text-slate-900 mb-3\">Create Your Workspace</h3>\n <p class=\"text-slate-500 leading-relaxed\">Sign up with your email, name your workspace, and invite your team. Takes less than 60 seconds.</p>\n </div>\n <div class=\"text-center\">\n <div class=\"w-16 h-16 rounded-2xl bg-indigo-600 text-white text-2xl font-bold flex items-center justify-center mx-auto mb-6 shadow-lg shadow-indigo-200\">2</div>\n <h3 class=\"text-xl font-semibold text-slate-900 mb-3\">Set Up Your Boards</h3>\n <p class=\"text-slate-500 leading-relaxed\">Choose a template or build from scratch. Import from Trello, Asana, or Jira with one click.</p>\n </div>\n <div class=\"text-center\">\n <div class=\"w-16 h-16 rounded-2xl bg-indigo-600 text-white text-2xl font-bold flex items-center justify-center mx-auto mb-6 shadow-lg shadow-indigo-200\">3</div>\n <h3 class=\"text-xl font-semibold text-slate-900 mb-3\">Start Shipping</h3>\n <p class=\"text-slate-500 leading-relaxed\">Assign tasks, set deadlines, automate workflows, and watch your team's velocity climb.</p>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Pricing -->\n <section id=\"pricing\" class=\"py-20 sm:py-28\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center max-w-2xl mx-auto mb-16\">\n <p class=\"text-sm font-semibold text-indigo-600 uppercase tracking-wide mb-3\">Pricing</p>\n <h2 class=\"text-3xl sm:text-4xl font-bold text-slate-900\">Simple, transparent pricing</h2>\n <p class=\"mt-4 text-lg text-slate-500\">Start free, upgrade when you're ready. No hidden fees, no surprises.</p>\n </div>\n <div class=\"grid md:grid-cols-3 gap-8 max-w-5xl mx-auto\">\n <!-- Free -->\n <div class=\"rounded-2xl p-8 ring-1 ring-slate-200 bg-white flex flex-col\">\n <h3 class=\"text-lg font-semibold text-slate-900\">Starter</h3>\n <p class=\"text-sm text-slate-500 mt-1\">For small teams getting started</p>\n <div class=\"mt-6 mb-8\">\n <span class=\"text-4xl font-extrabold text-slate-900\">$0</span>\n <span class=\"text-slate-500 text-sm\">/month</span>\n </div>\n <ul class=\"space-y-3 text-sm text-slate-600 mb-8 flex-1\">\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-indigo-500 shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\" clip-rule=\"evenodd\"/></svg>Up to 5 team members</li>\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-indigo-500 shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\" clip-rule=\"evenodd\"/></svg>3 project boards</li>\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-indigo-500 shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\" clip-rule=\"evenodd\"/></svg>Basic integrations</li>\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-indigo-500 shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\" clip-rule=\"evenodd\"/></svg>Community support</li>\n </ul>\n <a href=\"#\" class=\"block text-center py-3 rounded-xl text-sm font-semibold ring-1 ring-slate-200 text-slate-700 hover:ring-indigo-300 hover:text-indigo-600 transition-all\">Get Started</a>\n </div>\n <!-- Pro (highlighted) -->\n <div class=\"rounded-2xl p-8 bg-indigo-600 text-white flex flex-col relative shadow-xl shadow-indigo-200 ring-2 ring-indigo-600\">\n <div class=\"absolute -top-3.5 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full bg-indigo-500 text-xs font-semibold text-white shadow-sm\">Most Popular</div>\n <h3 class=\"text-lg font-semibold\">Pro</h3>\n <p class=\"text-sm text-indigo-200 mt-1\">For growing teams that need more</p>\n <div class=\"mt-6 mb-8\">\n <span class=\"text-4xl font-extrabold\">$12</span>\n <span class=\"text-indigo-200 text-sm\">/user/month</span>\n </div>\n <ul class=\"space-y-3 text-sm text-indigo-100 mb-8 flex-1\">\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-indigo-300 shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\" clip-rule=\"evenodd\"/></svg>Unlimited members</li>\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-indigo-300 shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\" clip-rule=\"evenodd\"/></svg>Unlimited boards</li>\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-indigo-300 shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\" clip-rule=\"evenodd\"/></svg>Advanced automation</li>\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-indigo-300 shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\" clip-rule=\"evenodd\"/></svg>Priority support</li>\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-indigo-300 shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\" clip-rule=\"evenodd\"/></svg>Analytics dashboard</li>\n </ul>\n <a href=\"#\" class=\"block text-center py-3 rounded-xl text-sm font-semibold bg-white text-indigo-600 hover:bg-indigo-50 transition-colors\">Start Free Trial</a>\n </div>\n <!-- Enterprise -->\n <div class=\"rounded-2xl p-8 ring-1 ring-slate-200 bg-white flex flex-col\">\n <h3 class=\"text-lg font-semibold text-slate-900\">Enterprise</h3>\n <p class=\"text-sm text-slate-500 mt-1\">For organizations at scale</p>\n <div class=\"mt-6 mb-8\">\n <span class=\"text-4xl font-extrabold text-slate-900\">Custom</span>\n </div>\n <ul class=\"space-y-3 text-sm text-slate-600 mb-8 flex-1\">\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-indigo-500 shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\" clip-rule=\"evenodd\"/></svg>Everything in Pro</li>\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-indigo-500 shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\" clip-rule=\"evenodd\"/></svg>SSO / SAML</li>\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-indigo-500 shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\" clip-rule=\"evenodd\"/></svg>Audit logs</li>\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-indigo-500 shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\" clip-rule=\"evenodd\"/></svg>Custom SLA</li>\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-indigo-500 shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\" clip-rule=\"evenodd\"/></svg>Dedicated account manager</li>\n </ul>\n <a href=\"#\" class=\"block text-center py-3 rounded-xl text-sm font-semibold ring-1 ring-slate-200 text-slate-700 hover:ring-indigo-300 hover:text-indigo-600 transition-all\">Contact Sales</a>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Testimonials -->\n <section class=\"py-20 sm:py-28 bg-gradient-to-b from-slate-50 to-white\" aria-label=\"Customer testimonials\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center max-w-2xl mx-auto mb-16\">\n <p class=\"text-sm font-semibold text-indigo-600 uppercase tracking-wide mb-3\">Testimonials</p>\n <h2 class=\"text-3xl sm:text-4xl font-bold text-slate-900\">Loved by teams everywhere</h2>\n </div>\n <div class=\"grid md:grid-cols-3 gap-8\">\n <blockquote class=\"bg-white rounded-2xl p-8 ring-1 ring-slate-100 shadow-sm\">\n <div class=\"flex items-center gap-1 text-amber-400 mb-4\" aria-label=\"5 out of 5 stars\">\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n </div>\n <p class=\"text-slate-600 leading-relaxed mb-6\">\"We switched from Jira and our sprint velocity went up 40%. The visual boards make standups a breeze — everyone sees the big picture instantly.\"</p>\n <footer class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center text-sm font-bold\" aria-hidden=\"true\">SR</div>\n <div>\n <p class=\"text-sm font-semibold text-slate-900\">Sarah Rodriguez</p>\n <p class=\"text-xs text-slate-500\">VP of Engineering, NovaTech</p>\n </div>\n </footer>\n </blockquote>\n <blockquote class=\"bg-white rounded-2xl p-8 ring-1 ring-slate-100 shadow-sm\">\n <div class=\"flex items-center gap-1 text-amber-400 mb-4\" aria-label=\"5 out of 5 stars\">\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n </div>\n <p class=\"text-slate-600 leading-relaxed mb-6\">\"The automation rules alone save us 10 hours a week. We set up workflows once and forgot about them — tasks just move themselves now.\"</p>\n <footer class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-sm font-bold\" aria-hidden=\"true\">MK</div>\n <div>\n <p class=\"text-sm font-semibold text-slate-900\">Marcus Kim</p>\n <p class=\"text-xs text-slate-500\">Product Lead, Meridian</p>\n </div>\n </footer>\n </blockquote>\n <blockquote class=\"bg-white rounded-2xl p-8 ring-1 ring-slate-100 shadow-sm\">\n <div class=\"flex items-center gap-1 text-amber-400 mb-4\" aria-label=\"5 out of 5 stars\">\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n </div>\n <p class=\"text-slate-600 leading-relaxed mb-6\">\"Flowboard replaced three tools for us: project tracker, team wiki, and standup bot. Our onboarding time for new hires dropped by half.\"</p>\n <footer class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10 rounded-full bg-violet-100 text-violet-600 flex items-center justify-center text-sm font-bold\" aria-hidden=\"true\">AL</div>\n <div>\n <p class=\"text-sm font-semibold text-slate-900\">Anna Lindberg</p>\n <p class=\"text-xs text-slate-500\">CTO, Skyline Studios</p>\n </div>\n </footer>\n </blockquote>\n </div>\n </div>\n </section>\n\n <!-- FAQ -->\n <section id=\"faq\" class=\"py-20 sm:py-28\">\n <div class=\"max-w-3xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center mb-16\">\n <p class=\"text-sm font-semibold text-indigo-600 uppercase tracking-wide mb-3\">FAQ</p>\n <h2 class=\"text-3xl sm:text-4xl font-bold text-slate-900\">Frequently asked questions</h2>\n </div>\n <div class=\"space-y-4\">\n <details class=\"group rounded-2xl ring-1 ring-slate-200 overflow-hidden\" open>\n <summary class=\"flex items-center justify-between cursor-pointer px-6 py-5 text-left font-semibold text-slate-900 hover:bg-slate-50 transition-colors\">\n Is there really a free plan?\n <svg class=\"w-5 h-5 text-slate-400 transition-transform duration-200 shrink-0 ml-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" d=\"M19 9l-7 7-7-7\"/></svg>\n </summary>\n <div class=\"px-6 pb-5 text-slate-500 leading-relaxed\">Yes. Our Starter plan is free forever for teams of up to 5 people with 3 project boards. No credit card required, no trial period — it just works.</div>\n </details>\n <details class=\"group rounded-2xl ring-1 ring-slate-200 overflow-hidden\">\n <summary class=\"flex items-center justify-between cursor-pointer px-6 py-5 text-left font-semibold text-slate-900 hover:bg-slate-50 transition-colors\">\n Can I import from Jira, Trello, or Asana?\n <svg class=\"w-5 h-5 text-slate-400 transition-transform duration-200 shrink-0 ml-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" d=\"M19 9l-7 7-7-7\"/></svg>\n </summary>\n <div class=\"px-6 pb-5 text-slate-500 leading-relaxed\">Absolutely. We have one-click importers for Jira, Trello, Asana, Monday.com, and Linear. Your projects, tasks, and attachments transfer seamlessly.</div>\n </details>\n <details class=\"group rounded-2xl ring-1 ring-slate-200 overflow-hidden\">\n <summary class=\"flex items-center justify-between cursor-pointer px-6 py-5 text-left font-semibold text-slate-900 hover:bg-slate-50 transition-colors\">\n How does billing work for the Pro plan?\n <svg class=\"w-5 h-5 text-slate-400 transition-transform duration-200 shrink-0 ml-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" d=\"M19 9l-7 7-7-7\"/></svg>\n </summary>\n <div class=\"px-6 pb-5 text-slate-500 leading-relaxed\">Pro is billed per active user per month. You only pay for team members who log in during the billing period. Annual billing saves you 20%.</div>\n </details>\n <details class=\"group rounded-2xl ring-1 ring-slate-200 overflow-hidden\">\n <summary class=\"flex items-center justify-between cursor-pointer px-6 py-5 text-left font-semibold text-slate-900 hover:bg-slate-50 transition-colors\">\n Is my data secure?\n <svg class=\"w-5 h-5 text-slate-400 transition-transform duration-200 shrink-0 ml-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" d=\"M19 9l-7 7-7-7\"/></svg>\n </summary>\n <div class=\"px-6 pb-5 text-slate-500 leading-relaxed\">We take security seriously. Flowboard is SOC 2 Type II certified, encrypts data at rest and in transit, and offers SSO with SAML for Enterprise customers. We also support data residency in the EU and US.</div>\n </details>\n <details class=\"group rounded-2xl ring-1 ring-slate-200 overflow-hidden\">\n <summary class=\"flex items-center justify-between cursor-pointer px-6 py-5 text-left font-semibold text-slate-900 hover:bg-slate-50 transition-colors\">\n Can I cancel anytime?\n <svg class=\"w-5 h-5 text-slate-400 transition-transform duration-200 shrink-0 ml-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" d=\"M19 9l-7 7-7-7\"/></svg>\n </summary>\n <div class=\"px-6 pb-5 text-slate-500 leading-relaxed\">Yes. There are no long-term contracts. You can cancel your Pro plan anytime and you'll retain access until the end of your billing period. We'll even help you export your data.</div>\n </details>\n </div>\n </div>\n </section>\n\n <!-- CTA -->\n <section class=\"py-20 sm:py-28\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"rounded-3xl bg-gradient-to-br from-indigo-600 to-blue-600 px-8 py-16 sm:px-16 sm:py-20 text-center relative overflow-hidden\">\n <div class=\"absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(255,255,255,0.15),transparent_50%)]\" aria-hidden=\"true\"></div>\n <div class=\"relative\">\n <h2 class=\"text-3xl sm:text-4xl font-bold text-white mb-4\">Ready to make your projects flow?</h2>\n <p class=\"text-lg text-indigo-100 max-w-2xl mx-auto mb-8\">Join 2,400+ teams who shipped faster with Flowboard. Start your free trial today — no credit card required.</p>\n <div class=\"flex flex-col sm:flex-row items-center justify-center gap-4\">\n <a href=\"#\" class=\"w-full sm:w-auto px-8 py-3.5 rounded-xl bg-white text-indigo-600 font-semibold text-base hover:bg-indigo-50 transition-colors shadow-lg\">Start Free Trial</a>\n <a href=\"#\" class=\"w-full sm:w-auto px-8 py-3.5 rounded-xl text-white font-semibold text-base ring-1 ring-white/30 hover:bg-white/10 transition-colors\">Schedule a Demo</a>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Footer -->\n <footer class=\"border-t border-slate-100 bg-slate-50 py-12\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"grid sm:grid-cols-2 lg:grid-cols-4 gap-8 mb-12\">\n <div>\n <a href=\"#\" class=\"flex items-center gap-2 text-lg font-bold text-slate-900 mb-4\" aria-label=\"Flowboard home\">\n <svg class=\"w-7 h-7\" viewBox=\"0 0 32 32\" fill=\"none\" aria-hidden=\"true\"><rect width=\"32\" height=\"32\" rx=\"8\" fill=\"#4F46E5\"/><path d=\"M10 11h12M10 16h8M10 21h10\" stroke=\"#fff\" stroke-width=\"2\" stroke-linecap=\"round\"/></svg>\n Flowboard\n </a>\n <p class=\"text-sm text-slate-500 leading-relaxed\">Project management that flows. Built for modern teams who value clarity over complexity.</p>\n </div>\n <nav aria-label=\"Product links\">\n <h4 class=\"text-sm font-semibold text-slate-900 mb-4\">Product</h4>\n <ul class=\"space-y-2.5 text-sm text-slate-500\">\n <li><a href=\"#features\" class=\"hover:text-indigo-600 transition-colors\">Features</a></li>\n <li><a href=\"#pricing\" class=\"hover:text-indigo-600 transition-colors\">Pricing</a></li>\n <li><a href=\"#\" class=\"hover:text-indigo-600 transition-colors\">Integrations</a></li>\n <li><a href=\"#\" class=\"hover:text-indigo-600 transition-colors\">Changelog</a></li>\n </ul>\n </nav>\n <nav aria-label=\"Company links\">\n <h4 class=\"text-sm font-semibold text-slate-900 mb-4\">Company</h4>\n <ul class=\"space-y-2.5 text-sm text-slate-500\">\n <li><a href=\"#\" class=\"hover:text-indigo-600 transition-colors\">About</a></li>\n <li><a href=\"#\" class=\"hover:text-indigo-600 transition-colors\">Blog</a></li>\n <li><a href=\"#\" class=\"hover:text-indigo-600 transition-colors\">Careers</a></li>\n <li><a href=\"#\" class=\"hover:text-indigo-600 transition-colors\">Contact</a></li>\n </ul>\n </nav>\n <nav aria-label=\"Legal links\">\n <h4 class=\"text-sm font-semibold text-slate-900 mb-4\">Legal</h4>\n <ul class=\"space-y-2.5 text-sm text-slate-500\">\n <li><a href=\"#\" class=\"hover:text-indigo-600 transition-colors\">Privacy Policy</a></li>\n <li><a href=\"#\" class=\"hover:text-indigo-600 transition-colors\">Terms of Service</a></li>\n <li><a href=\"#\" class=\"hover:text-indigo-600 transition-colors\">Security</a></li>\n <li><a href=\"#\" class=\"hover:text-indigo-600 transition-colors\">GDPR</a></li>\n </ul>\n </nav>\n </div>\n <div class=\"border-t border-slate-200 pt-8 flex flex-col sm:flex-row items-center justify-between gap-4\">\n <p class=\"text-sm text-slate-400\">&copy; 2026 Flowboard, Inc. All rights reserved.</p>\n <div class=\"flex items-center gap-4\">\n <a href=\"#\" class=\"text-slate-400 hover:text-indigo-600 transition-colors\" aria-label=\"Flowboard on Twitter\">\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\"/></svg>\n </a>\n <a href=\"#\" class=\"text-slate-400 hover:text-indigo-600 transition-colors\" aria-label=\"Flowboard on GitHub\">\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z\" clip-rule=\"evenodd\"/></svg>\n </a>\n <a href=\"#\" class=\"text-slate-400 hover:text-indigo-600 transition-colors\" aria-label=\"Flowboard on LinkedIn\">\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z\"/></svg>\n </a>\n </div>\n </div>\n </div>\n </footer>\n\n <script>\n const btn = document.getElementById('mobile-menu-btn');\n const menu = document.getElementById('mobile-menu');\n btn.addEventListener('click', () => {\n const open = !menu.classList.contains('hidden');\n menu.classList.toggle('hidden');\n btn.setAttribute('aria-expanded', String(!open));\n });\n menu.querySelectorAll('a').forEach(link => {\n link.addEventListener('click', () => {\n menu.classList.add('hidden');\n btn.setAttribute('aria-expanded', 'false');\n });\n });\n </script>\n\n</body>\n</html>"
25325
+ },
25326
+ {
25327
+ "id": "shop/catalog",
25328
+ "title": "Shop Catalog",
25329
+ "summary": "Multi-product shop catalog with category sidebar, filter options, sortable product grid, and pagination.",
25330
+ "description": "A full ecommerce catalog page featuring a filterable sidebar with categories, price range, and color filters. Products displayed in a responsive grid with hover quick-view, sorting controls, and pagination.",
25331
+ "category": "shop",
25332
+ "style": "modern",
25333
+ "tags": [
25334
+ "shop",
25335
+ "ecommerce",
25336
+ "catalog",
25337
+ "products",
25338
+ "filter",
25339
+ "grid"
25340
+ ],
25341
+ "patterns": [
25342
+ "navbar/base",
25343
+ "sidebar/base",
25344
+ "cards/base",
25345
+ "footer/base"
25346
+ ],
25347
+ "sections": [
25348
+ "navbar",
25349
+ "sidebar-filter",
25350
+ "product-grid",
25351
+ "pagination",
25352
+ "footer"
25353
+ ],
25354
+ "features": {
25355
+ "responsive": true,
25356
+ "darkMode": false,
25357
+ "animations": false,
25358
+ "formHandling": false
25359
+ },
25360
+ "files": {
25361
+ "html": "./catalog.html",
25362
+ "preview": "./catalog.png"
25363
+ },
25364
+ "install": {
25365
+ "copyPasteReady": true,
25366
+ "tailwindCdn": true,
25367
+ "vanillaJs": true,
25368
+ "notes": [
25369
+ "Replace product placeholders with real images",
25370
+ "Category filters are visual only — connect to your backend",
25371
+ "Pagination links point to"
25372
+ ]
25373
+ },
25374
+ "governance": {
25375
+ "status": "published",
25376
+ "quality": "flagship",
25377
+ "owner": "design-system",
25378
+ "updatedAt": "2026-03-20"
25379
+ },
25380
+ "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Atelier Craft — Shop Catalog</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <style>\n @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');\n body { font-family: 'Inter', sans-serif; }\n .quick-view { opacity: 0; transition: opacity 0.25s ease; }\n .product-card:hover .quick-view { opacity: 1; }\n .product-card:hover .product-img { transform: scale(1.03); }\n .product-img { transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }\n .color-dot { transition: box-shadow 0.2s ease; }\n .color-dot:hover, .color-dot[aria-checked=\"true\"] { box-shadow: 0 0 0 2px white, 0 0 0 4px currentColor; }\n </style>\n</head>\n<body class=\"bg-slate-50 text-slate-900 antialiased\">\n\n <!-- Navbar -->\n <nav class=\"sticky top-0 z-50 bg-white border-b border-slate-200\" aria-label=\"Main navigation\">\n <div class=\"max-w-7xl mx-auto flex items-center justify-between px-4 sm:px-6 py-3.5\">\n <a href=\"#\" class=\"text-xl font-bold tracking-tight\">Atelier<span class=\"text-slate-400 font-light\"> Craft</span></a>\n\n <div class=\"hidden md:flex flex-1 max-w-md mx-8\">\n <label for=\"search\" class=\"sr-only\">Search products</label>\n <div class=\"relative w-full\">\n <svg class=\"absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"/>\n </svg>\n <input id=\"search\" type=\"search\" placeholder=\"Search products...\" class=\"w-full pl-10 pr-4 py-2 text-sm bg-slate-50 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-slate-900 focus:border-transparent\" />\n </div>\n </div>\n\n <div class=\"flex items-center gap-4\">\n <a href=\"#\" class=\"relative p-2 text-slate-600 hover:text-slate-900 transition-colors\" aria-label=\"Shopping cart, 3 items\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z\"/>\n </svg>\n <span class=\"absolute -top-0.5 -right-0.5 flex items-center justify-center w-4.5 h-4.5 text-[10px] font-bold text-white bg-slate-900 rounded-full\" aria-hidden=\"true\">3</span>\n </a>\n <button id=\"filter-toggle\" class=\"md:hidden p-2 -mr-2 text-slate-600\" aria-label=\"Toggle filters\" aria-expanded=\"false\" aria-controls=\"sidebar-filters\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z\"/>\n </svg>\n </button>\n </div>\n </div>\n </nav>\n\n <!-- Main layout -->\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 py-8\">\n <!-- Breadcrumb -->\n <nav aria-label=\"Breadcrumb\" class=\"mb-6\">\n <ol class=\"flex items-center gap-2 text-sm text-slate-500\">\n <li><a href=\"#\" class=\"hover:text-slate-900 transition-colors\">Home</a></li>\n <li aria-hidden=\"true\">/</li>\n <li><a href=\"#\" class=\"hover:text-slate-900 transition-colors\">Shop</a></li>\n <li aria-hidden=\"true\">/</li>\n <li class=\"text-slate-900 font-medium\" aria-current=\"page\">All Products</li>\n </ol>\n </nav>\n\n <div class=\"flex gap-8\">\n\n <!-- Sidebar -->\n <aside id=\"sidebar-filters\" class=\"hidden md:block w-64 shrink-0\" aria-label=\"Product filters\">\n <div class=\"sticky top-20 space-y-8\">\n\n <!-- Categories -->\n <div>\n <h3 class=\"text-xs font-semibold uppercase tracking-wider text-slate-400 mb-3\">Categories</h3>\n <ul class=\"space-y-1\" role=\"list\">\n <li><a href=\"#\" class=\"flex items-center justify-between px-3 py-2 text-sm font-medium bg-slate-900 text-white rounded-lg\">All <span class=\"text-slate-300\">42</span></a></li>\n <li><a href=\"#\" class=\"flex items-center justify-between px-3 py-2 text-sm text-slate-600 hover:bg-slate-100 rounded-lg transition-colors\">Bags <span class=\"text-slate-400\">12</span></a></li>\n <li><a href=\"#\" class=\"flex items-center justify-between px-3 py-2 text-sm text-slate-600 hover:bg-slate-100 rounded-lg transition-colors\">Accessories <span class=\"text-slate-400\">9</span></a></li>\n <li><a href=\"#\" class=\"flex items-center justify-between px-3 py-2 text-sm text-slate-600 hover:bg-slate-100 rounded-lg transition-colors\">Shoes <span class=\"text-slate-400\">8</span></a></li>\n <li><a href=\"#\" class=\"flex items-center justify-between px-3 py-2 text-sm text-slate-600 hover:bg-slate-100 rounded-lg transition-colors\">Clothing <span class=\"text-slate-400\">7</span></a></li>\n <li><a href=\"#\" class=\"flex items-center justify-between px-3 py-2 text-sm text-slate-600 hover:bg-slate-100 rounded-lg transition-colors\">Sale <span class=\"text-red-500\">6</span></a></li>\n </ul>\n </div>\n\n <!-- Price Range -->\n <div>\n <h3 class=\"text-xs font-semibold uppercase tracking-wider text-slate-400 mb-3\">Price Range</h3>\n <div class=\"flex items-center gap-3\">\n <div class=\"flex-1\">\n <label for=\"price-min\" class=\"sr-only\">Minimum price</label>\n <input id=\"price-min\" type=\"text\" value=\"$0\" class=\"w-full px-3 py-2 text-sm text-center bg-white border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-slate-900\" />\n </div>\n <span class=\"text-slate-300\" aria-hidden=\"true\">&ndash;</span>\n <div class=\"flex-1\">\n <label for=\"price-max\" class=\"sr-only\">Maximum price</label>\n <input id=\"price-max\" type=\"text\" value=\"$500\" class=\"w-full px-3 py-2 text-sm text-center bg-white border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-slate-900\" />\n </div>\n </div>\n </div>\n\n <!-- Color -->\n <div>\n <h3 class=\"text-xs font-semibold uppercase tracking-wider text-slate-400 mb-3\">Color</h3>\n <div class=\"flex items-center gap-3\" role=\"radiogroup\" aria-label=\"Filter by color\">\n <button class=\"color-dot w-7 h-7 rounded-full bg-stone-800 border-2 border-white shadow-sm\" style=\"color: #44403c;\" role=\"radio\" aria-checked=\"false\" aria-label=\"Brown\"></button>\n <button class=\"color-dot w-7 h-7 rounded-full bg-slate-900 border-2 border-white shadow-sm\" style=\"color: #0f172a;\" role=\"radio\" aria-checked=\"false\" aria-label=\"Black\"></button>\n <button class=\"color-dot w-7 h-7 rounded-full bg-amber-100 border-2 border-slate-200 shadow-sm\" style=\"color: #d97706;\" role=\"radio\" aria-checked=\"false\" aria-label=\"Natural\"></button>\n <button class=\"color-dot w-7 h-7 rounded-full bg-rose-200 border-2 border-white shadow-sm\" style=\"color: #e11d48;\" role=\"radio\" aria-checked=\"false\" aria-label=\"Rose\"></button>\n </div>\n </div>\n\n <!-- Apply -->\n <button class=\"w-full py-2.5 text-sm font-medium bg-slate-900 text-white rounded-lg hover:bg-slate-800 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-900\">\n Apply Filters\n </button>\n </div>\n </aside>\n\n <!-- Product Grid -->\n <main class=\"flex-1 min-w-0\">\n <!-- Grid header -->\n <div class=\"flex items-center justify-between mb-6\">\n <p class=\"text-sm text-slate-500\">Showing <span class=\"font-medium text-slate-900\">42 results</span></p>\n <div class=\"flex items-center gap-2\">\n <label for=\"sort\" class=\"text-sm text-slate-500 hidden sm:inline\">Sort by:</label>\n <select id=\"sort\" class=\"text-sm font-medium text-slate-900 bg-white border border-slate-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-slate-900\">\n <option>Newest</option>\n <option>Price: Low to High</option>\n <option>Price: High to Low</option>\n <option>Best Selling</option>\n </select>\n </div>\n </div>\n\n <!-- Products -->\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5\">\n\n <!-- Product 1 -->\n <article class=\"product-card group bg-white rounded-xl border border-slate-200 overflow-hidden hover:shadow-lg hover:border-slate-300 transition-all duration-300\">\n <div class=\"relative overflow-hidden\">\n <div class=\"product-img aspect-[4/3] bg-stone-100\" role=\"img\" aria-label=\"Canvas Weekender bag\"></div>\n <button class=\"quick-view absolute inset-0 flex items-center justify-center bg-slate-900/40 text-white text-sm font-medium focus:opacity-100\" aria-label=\"Quick view Canvas Weekender\">\n <span class=\"bg-white text-slate-900 px-5 py-2 rounded-lg text-sm font-medium shadow-lg\">Quick View</span>\n </button>\n </div>\n <div class=\"p-4\">\n <h3 class=\"font-medium text-slate-900\">Canvas Weekender</h3>\n <p class=\"text-sm text-slate-500 mt-0.5\">Waxed cotton carryall for short trips</p>\n <p class=\"text-sm font-semibold text-slate-900 mt-2\">$149</p>\n </div>\n </article>\n\n <!-- Product 2 -->\n <article class=\"product-card group bg-white rounded-xl border border-slate-200 overflow-hidden hover:shadow-lg hover:border-slate-300 transition-all duration-300\">\n <div class=\"relative overflow-hidden\">\n <div class=\"product-img aspect-[4/3] bg-amber-50\" role=\"img\" aria-label=\"Leather Crossbody bag\"></div>\n <button class=\"quick-view absolute inset-0 flex items-center justify-center bg-slate-900/40 text-white text-sm font-medium focus:opacity-100\" aria-label=\"Quick view Leather Crossbody\">\n <span class=\"bg-white text-slate-900 px-5 py-2 rounded-lg text-sm font-medium shadow-lg\">Quick View</span>\n </button>\n </div>\n <div class=\"p-4\">\n <h3 class=\"font-medium text-slate-900\">Leather Crossbody</h3>\n <p class=\"text-sm text-slate-500 mt-0.5\">Full-grain leather with brass hardware</p>\n <p class=\"text-sm font-semibold text-slate-900 mt-2\">$189</p>\n </div>\n </article>\n\n <!-- Product 3 -->\n <article class=\"product-card group bg-white rounded-xl border border-slate-200 overflow-hidden hover:shadow-lg hover:border-slate-300 transition-all duration-300\">\n <div class=\"relative overflow-hidden\">\n <div class=\"product-img aspect-[4/3] bg-slate-100\" role=\"img\" aria-label=\"Merino Scarf\"></div>\n <span class=\"absolute top-3 left-3 bg-slate-900 text-white text-[10px] font-bold uppercase tracking-wide px-2 py-1 rounded\">New</span>\n <button class=\"quick-view absolute inset-0 flex items-center justify-center bg-slate-900/40 text-white text-sm font-medium focus:opacity-100\" aria-label=\"Quick view Merino Scarf\">\n <span class=\"bg-white text-slate-900 px-5 py-2 rounded-lg text-sm font-medium shadow-lg\">Quick View</span>\n </button>\n </div>\n <div class=\"p-4\">\n <h3 class=\"font-medium text-slate-900\">Merino Scarf</h3>\n <p class=\"text-sm text-slate-500 mt-0.5\">Lightweight wool blend, hand-finished edges</p>\n <p class=\"text-sm font-semibold text-slate-900 mt-2\">$68</p>\n </div>\n </article>\n\n <!-- Product 4 -->\n <article class=\"product-card group bg-white rounded-xl border border-slate-200 overflow-hidden hover:shadow-lg hover:border-slate-300 transition-all duration-300\">\n <div class=\"relative overflow-hidden\">\n <div class=\"product-img aspect-[4/3] bg-rose-50\" role=\"img\" aria-label=\"Suede Chelsea Boots\"></div>\n <button class=\"quick-view absolute inset-0 flex items-center justify-center bg-slate-900/40 text-white text-sm font-medium focus:opacity-100\" aria-label=\"Quick view Suede Chelsea Boots\">\n <span class=\"bg-white text-slate-900 px-5 py-2 rounded-lg text-sm font-medium shadow-lg\">Quick View</span>\n </button>\n </div>\n <div class=\"p-4\">\n <h3 class=\"font-medium text-slate-900\">Suede Chelsea Boots</h3>\n <p class=\"text-sm text-slate-500 mt-0.5\">Italian suede, Goodyear welted sole</p>\n <p class=\"text-sm font-semibold text-slate-900 mt-2\">$295</p>\n </div>\n </article>\n\n <!-- Product 5 -->\n <article class=\"product-card group bg-white rounded-xl border border-slate-200 overflow-hidden hover:shadow-lg hover:border-slate-300 transition-all duration-300\">\n <div class=\"relative overflow-hidden\">\n <div class=\"product-img aspect-[4/3] bg-sky-50\" role=\"img\" aria-label=\"Denim Tote\"></div>\n <button class=\"quick-view absolute inset-0 flex items-center justify-center bg-slate-900/40 text-white text-sm font-medium focus:opacity-100\" aria-label=\"Quick view Denim Tote\">\n <span class=\"bg-white text-slate-900 px-5 py-2 rounded-lg text-sm font-medium shadow-lg\">Quick View</span>\n </button>\n </div>\n <div class=\"p-4\">\n <h3 class=\"font-medium text-slate-900\">Denim Tote</h3>\n <p class=\"text-sm text-slate-500 mt-0.5\">Selvedge denim with reinforced handles</p>\n <p class=\"text-sm font-semibold text-slate-900 mt-2\">$79</p>\n </div>\n </article>\n\n <!-- Product 6 -->\n <article class=\"product-card group bg-white rounded-xl border border-slate-200 overflow-hidden hover:shadow-lg hover:border-slate-300 transition-all duration-300\">\n <div class=\"relative overflow-hidden\">\n <div class=\"product-img aspect-[4/3] bg-emerald-50\" role=\"img\" aria-label=\"Linen Camp Shirt\"></div>\n <button class=\"quick-view absolute inset-0 flex items-center justify-center bg-slate-900/40 text-white text-sm font-medium focus:opacity-100\" aria-label=\"Quick view Linen Camp Shirt\">\n <span class=\"bg-white text-slate-900 px-5 py-2 rounded-lg text-sm font-medium shadow-lg\">Quick View</span>\n </button>\n </div>\n <div class=\"p-4\">\n <h3 class=\"font-medium text-slate-900\">Linen Camp Shirt</h3>\n <p class=\"text-sm text-slate-500 mt-0.5\">Relaxed fit, coconut shell buttons</p>\n <p class=\"text-sm font-semibold text-slate-900 mt-2\">$115</p>\n </div>\n </article>\n\n <!-- Product 7 -->\n <article class=\"product-card group bg-white rounded-xl border border-slate-200 overflow-hidden hover:shadow-lg hover:border-slate-300 transition-all duration-300\">\n <div class=\"relative overflow-hidden\">\n <div class=\"product-img aspect-[4/3] bg-violet-50\" role=\"img\" aria-label=\"Ceramic Watch\"></div>\n <button class=\"quick-view absolute inset-0 flex items-center justify-center bg-slate-900/40 text-white text-sm font-medium focus:opacity-100\" aria-label=\"Quick view Ceramic Watch\">\n <span class=\"bg-white text-slate-900 px-5 py-2 rounded-lg text-sm font-medium shadow-lg\">Quick View</span>\n </button>\n </div>\n <div class=\"p-4\">\n <h3 class=\"font-medium text-slate-900\">Ceramic Watch</h3>\n <p class=\"text-sm text-slate-500 mt-0.5\">Minimalist dial, Japanese quartz movement</p>\n <p class=\"text-sm font-semibold text-slate-900 mt-2\">$245</p>\n </div>\n </article>\n\n <!-- Product 8 -->\n <article class=\"product-card group bg-white rounded-xl border border-slate-200 overflow-hidden hover:shadow-lg hover:border-slate-300 transition-all duration-300\">\n <div class=\"relative overflow-hidden\">\n <div class=\"product-img aspect-[4/3] bg-orange-50\" role=\"img\" aria-label=\"Woven Belt\"></div>\n <span class=\"absolute top-3 left-3 bg-red-500 text-white text-[10px] font-bold uppercase tracking-wide px-2 py-1 rounded\">Sale</span>\n <button class=\"quick-view absolute inset-0 flex items-center justify-center bg-slate-900/40 text-white text-sm font-medium focus:opacity-100\" aria-label=\"Quick view Woven Belt\">\n <span class=\"bg-white text-slate-900 px-5 py-2 rounded-lg text-sm font-medium shadow-lg\">Quick View</span>\n </button>\n </div>\n <div class=\"p-4\">\n <h3 class=\"font-medium text-slate-900\">Woven Belt</h3>\n <p class=\"text-sm text-slate-500 mt-0.5\">Braided elastic with brushed nickel buckle</p>\n <p class=\"text-sm font-semibold text-slate-900 mt-2\"><span class=\"line-through text-slate-400 font-normal mr-1.5\">$55</span>$39</p>\n </div>\n </article>\n\n <!-- Product 9 -->\n <article class=\"product-card group bg-white rounded-xl border border-slate-200 overflow-hidden hover:shadow-lg hover:border-slate-300 transition-all duration-300\">\n <div class=\"relative overflow-hidden\">\n <div class=\"product-img aspect-[4/3] bg-teal-50\" role=\"img\" aria-label=\"Leather Bifold Wallet\"></div>\n <button class=\"quick-view absolute inset-0 flex items-center justify-center bg-slate-900/40 text-white text-sm font-medium focus:opacity-100\" aria-label=\"Quick view Leather Bifold Wallet\">\n <span class=\"bg-white text-slate-900 px-5 py-2 rounded-lg text-sm font-medium shadow-lg\">Quick View</span>\n </button>\n </div>\n <div class=\"p-4\">\n <h3 class=\"font-medium text-slate-900\">Leather Bifold Wallet</h3>\n <p class=\"text-sm text-slate-500 mt-0.5\">Vegetable-tanned, six card slots</p>\n <p class=\"text-sm font-semibold text-slate-900 mt-2\">$95</p>\n </div>\n </article>\n\n </div>\n\n <!-- Pagination -->\n <nav class=\"flex items-center justify-center gap-1 mt-10\" aria-label=\"Pagination\">\n <a href=\"#\" class=\"flex items-center justify-center w-10 h-10 text-sm font-semibold bg-slate-900 text-white rounded-lg\" aria-current=\"page\" aria-label=\"Page 1\">1</a>\n <a href=\"#\" class=\"flex items-center justify-center w-10 h-10 text-sm font-medium text-slate-600 hover:bg-slate-100 rounded-lg transition-colors\" aria-label=\"Page 2\">2</a>\n <a href=\"#\" class=\"flex items-center justify-center w-10 h-10 text-sm font-medium text-slate-600 hover:bg-slate-100 rounded-lg transition-colors\" aria-label=\"Page 3\">3</a>\n <a href=\"#\" class=\"flex items-center justify-center h-10 px-4 text-sm font-medium text-slate-600 hover:bg-slate-100 rounded-lg transition-colors ml-1\" aria-label=\"Next page\">\n Next\n <svg class=\"w-4 h-4 ml-1\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"/>\n </svg>\n </a>\n </nav>\n </main>\n\n </div>\n </div>\n\n <!-- Footer -->\n <footer class=\"bg-white border-t border-slate-200 mt-16\" aria-label=\"Site footer\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 py-12\">\n <div class=\"grid grid-cols-2 md:grid-cols-4 gap-8\">\n <div>\n <h4 class=\"text-sm font-semibold text-slate-900 mb-4\">Shop</h4>\n <ul class=\"space-y-2.5 text-sm text-slate-500\">\n <li><a href=\"#\" class=\"hover:text-slate-900 transition-colors\">New Arrivals</a></li>\n <li><a href=\"#\" class=\"hover:text-slate-900 transition-colors\">Best Sellers</a></li>\n <li><a href=\"#\" class=\"hover:text-slate-900 transition-colors\">Sale</a></li>\n <li><a href=\"#\" class=\"hover:text-slate-900 transition-colors\">Gift Cards</a></li>\n </ul>\n </div>\n <div>\n <h4 class=\"text-sm font-semibold text-slate-900 mb-4\">Company</h4>\n <ul class=\"space-y-2.5 text-sm text-slate-500\">\n <li><a href=\"#\" class=\"hover:text-slate-900 transition-colors\">Our Story</a></li>\n <li><a href=\"#\" class=\"hover:text-slate-900 transition-colors\">Sustainability</a></li>\n <li><a href=\"#\" class=\"hover:text-slate-900 transition-colors\">Careers</a></li>\n <li><a href=\"#\" class=\"hover:text-slate-900 transition-colors\">Press</a></li>\n </ul>\n </div>\n <div>\n <h4 class=\"text-sm font-semibold text-slate-900 mb-4\">Support</h4>\n <ul class=\"space-y-2.5 text-sm text-slate-500\">\n <li><a href=\"#\" class=\"hover:text-slate-900 transition-colors\">Shipping & Returns</a></li>\n <li><a href=\"#\" class=\"hover:text-slate-900 transition-colors\">Size Guide</a></li>\n <li><a href=\"#\" class=\"hover:text-slate-900 transition-colors\">Contact Us</a></li>\n <li><a href=\"#\" class=\"hover:text-slate-900 transition-colors\">FAQ</a></li>\n </ul>\n </div>\n <div>\n <h4 class=\"text-sm font-semibold text-slate-900 mb-4\">Connect</h4>\n <ul class=\"space-y-2.5 text-sm text-slate-500\">\n <li><a href=\"#\" class=\"hover:text-slate-900 transition-colors\">Instagram</a></li>\n <li><a href=\"#\" class=\"hover:text-slate-900 transition-colors\">Pinterest</a></li>\n <li><a href=\"#\" class=\"hover:text-slate-900 transition-colors\">Newsletter</a></li>\n <li><a href=\"#\" class=\"hover:text-slate-900 transition-colors\">Journal</a></li>\n </ul>\n </div>\n </div>\n <div class=\"flex flex-col sm:flex-row items-center justify-between mt-10 pt-8 border-t border-slate-100\">\n <p class=\"text-sm text-slate-400\">&copy; 2026 Atelier Craft. All rights reserved.</p>\n <div class=\"flex items-center gap-6 mt-4 sm:mt-0\">\n <a href=\"#\" class=\"text-sm text-slate-400 hover:text-slate-900 transition-colors\">Privacy</a>\n <a href=\"#\" class=\"text-sm text-slate-400 hover:text-slate-900 transition-colors\">Terms</a>\n <a href=\"#\" class=\"text-sm text-slate-400 hover:text-slate-900 transition-colors\">Cookies</a>\n </div>\n </div>\n </div>\n </footer>\n\n <script>\n const filterToggle = document.getElementById('filter-toggle');\n const sidebar = document.getElementById('sidebar-filters');\n if (filterToggle && sidebar) {\n filterToggle.addEventListener('click', () => {\n const isOpen = !sidebar.classList.contains('hidden');\n sidebar.classList.toggle('hidden');\n sidebar.classList.toggle('fixed');\n sidebar.classList.toggle('inset-0');\n sidebar.classList.toggle('z-40');\n sidebar.classList.toggle('bg-white');\n sidebar.classList.toggle('p-6');\n sidebar.classList.toggle('overflow-y-auto');\n filterToggle.setAttribute('aria-expanded', String(!isOpen));\n });\n }\n </script>\n\n</body>\n</html>\n"
25381
+ },
25382
+ {
25383
+ "id": "shop/organic",
25384
+ "title": "Shop Organic",
25385
+ "summary": "Warm, earthy organic products shop with category showcase, featured products, brand values, and newsletter signup.",
25386
+ "description": "A natural/organic shop homepage with earthy sage-green palette. Features category cards, featured product grid with prices, three-column brand values section, customer testimonials, and newsletter signup.",
25387
+ "category": "shop",
25388
+ "style": "elegant",
25389
+ "tags": [
25390
+ "shop",
25391
+ "ecommerce",
25392
+ "organic",
25393
+ "natural",
25394
+ "wellness",
25395
+ "green"
25396
+ ],
25397
+ "patterns": [
25398
+ "navbar/base",
25399
+ "hero/base",
25400
+ "cards/base",
25401
+ "features/base",
25402
+ "testimonials/base",
25403
+ "newsletter/base",
25404
+ "footer/base"
25405
+ ],
25406
+ "sections": [
25407
+ "navbar",
25408
+ "hero",
25409
+ "categories",
25410
+ "featured-products",
25411
+ "values",
25412
+ "testimonials",
25413
+ "newsletter",
25414
+ "footer"
25415
+ ],
25416
+ "features": {
25417
+ "responsive": true,
25418
+ "darkMode": false,
25419
+ "animations": false,
25420
+ "formHandling": false
25421
+ },
25422
+ "files": {
25423
+ "html": "./organic.html",
25424
+ "preview": "./organic.png"
25425
+ },
25426
+ "install": {
25427
+ "copyPasteReady": true,
25428
+ "tailwindCdn": true,
25429
+ "vanillaJs": true,
25430
+ "notes": [
25431
+ "Replace product placeholders with real product images",
25432
+ "Newsletter form requires backend integration",
25433
+ "Replace Terra Botanica branding with your store"
25434
+ ]
25435
+ },
25436
+ "governance": {
25437
+ "status": "published",
25438
+ "quality": "flagship",
25439
+ "owner": "design-system",
25440
+ "updatedAt": "2026-03-20"
25441
+ },
25442
+ "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Terra Botanica — Organic Wellness, Rooted in Nature</title>\n <meta name=\"description\" content=\"Premium organic skincare, herbal teas, and natural supplements. Sustainably sourced, beautifully crafted, delivered to your door.\" />\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n sage: { 50: '#f4f7f4', 100: '#e6ede6', 200: '#cddcce', 300: '#a8c3aa', 400: '#7da67f', 500: '#6b8f71', 600: '#4e7054', 700: '#3f5a43', 800: '#354a38', 900: '#2c3d2f' },\n cream: { 50: '#fefdfb', 100: '#fdf9f0', 200: '#faf3e3', 300: '#f5e8cc' },\n terracotta: { 100: '#f5e1d0', 200: '#ebc8a8', 400: '#c4835a', 500: '#b06d3f' },\n sand: { 100: '#f5eee4', 200: '#ebe0cf', 400: '#c9b48f' },\n olive: { 100: '#eef1e5', 200: '#dbe3cd', 400: '#96a572' },\n },\n fontFamily: {\n serif: ['\"Georgia\"', '\"Times New Roman\"', 'serif'],\n }\n }\n }\n }\n </script>\n <style>\n html { scroll-behavior: smooth; }\n body { font-family: 'Georgia', 'Times New Roman', serif; }\n </style>\n</head>\n<body class=\"bg-cream-50 text-stone-800 antialiased\">\n\n <!-- Navbar -->\n <nav class=\"sticky top-0 z-50 bg-cream-50/90 backdrop-blur-md border-b border-sage-100\" aria-label=\"Main navigation\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16\">\n <a href=\"#\" class=\"flex items-center gap-2 text-xl font-bold text-sage-700\" aria-label=\"Terra Botanica home\">\n <span class=\"text-2xl\" aria-hidden=\"true\">🌿</span>\n <span class=\"tracking-wide\">Terra Botanica</span>\n </a>\n <div class=\"hidden md:flex items-center gap-8 text-sm font-medium text-stone-600\">\n <a href=\"#categories\" class=\"hover:text-sage-600 transition-colors\">Shop</a>\n <a href=\"#featured\" class=\"hover:text-sage-600 transition-colors\">Bestsellers</a>\n <a href=\"#values\" class=\"hover:text-sage-600 transition-colors\">Our Values</a>\n <a href=\"#testimonials\" class=\"hover:text-sage-600 transition-colors\">Reviews</a>\n </div>\n <div class=\"hidden md:flex items-center gap-4\">\n <a href=\"#\" class=\"text-sm font-medium text-stone-600 hover:text-sage-600 transition-colors\">Account</a>\n <a href=\"#\" class=\"text-sm font-semibold px-5 py-2 rounded-full bg-sage-600 text-white hover:bg-sage-700 transition-colors\">Cart (0)</a>\n </div>\n <button id=\"mobile-menu-btn\" class=\"md:hidden p-2 rounded-lg hover:bg-sage-50\" aria-label=\"Toggle menu\" aria-expanded=\"false\">\n <svg class=\"w-6 h-6 text-stone-700\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" d=\"M4 6h16M4 12h16M4 18h16\"/></svg>\n </button>\n </div>\n <div id=\"mobile-menu\" class=\"hidden md:hidden border-t border-sage-100 bg-cream-50 px-4 pb-4 pt-2 space-y-2\">\n <a href=\"#categories\" class=\"block py-2 text-sm font-medium text-stone-600 hover:text-sage-600\">Shop</a>\n <a href=\"#featured\" class=\"block py-2 text-sm font-medium text-stone-600 hover:text-sage-600\">Bestsellers</a>\n <a href=\"#values\" class=\"block py-2 text-sm font-medium text-stone-600 hover:text-sage-600\">Our Values</a>\n <a href=\"#testimonials\" class=\"block py-2 text-sm font-medium text-stone-600 hover:text-sage-600\">Reviews</a>\n <div class=\"pt-2 flex flex-col gap-2\">\n <a href=\"#\" class=\"text-sm font-medium text-stone-600 text-center py-2\">Account</a>\n <a href=\"#\" class=\"text-sm font-semibold px-4 py-2 rounded-full bg-sage-600 text-white text-center\">Cart (0)</a>\n </div>\n </div>\n </nav>\n\n <!-- Hero -->\n <section class=\"relative overflow-hidden bg-sage-50\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 sm:py-32 lg:py-40\">\n <div class=\"max-w-3xl mx-auto text-center\">\n <p class=\"text-sage-600 text-sm font-semibold tracking-widest uppercase mb-4\">Rooted in Nature</p>\n <h1 class=\"text-4xl sm:text-5xl lg:text-6xl font-bold text-stone-900 leading-tight mb-6\">\n Pure Ingredients,<br />Honest Wellness\n </h1>\n <p class=\"text-lg sm:text-xl text-stone-600 leading-relaxed mb-10 max-w-2xl mx-auto\">\n Carefully sourced botanicals and organic formulations crafted for those who believe what goes on your body matters as much as what goes in it.\n </p>\n <div class=\"flex flex-col sm:flex-row items-center justify-center gap-4\">\n <a href=\"#categories\" class=\"px-8 py-3.5 rounded-full bg-sage-600 text-white font-semibold hover:bg-sage-700 transition-colors shadow-sm text-base\">\n Explore the Collection\n </a>\n <a href=\"#values\" class=\"px-8 py-3.5 rounded-full border-2 border-sage-300 text-sage-700 font-semibold hover:bg-sage-100 transition-colors text-base\">\n Our Story\n </a>\n </div>\n </div>\n </div>\n <!-- Decorative bottom wave -->\n <div class=\"absolute bottom-0 left-0 right-0\">\n <svg viewBox=\"0 0 1440 60\" fill=\"none\" class=\"w-full\" aria-hidden=\"true\">\n <path d=\"M0 60V20C240 50 480 0 720 20C960 40 1200 10 1440 30V60H0Z\" fill=\"#fefdfb\"/>\n </svg>\n </div>\n </section>\n\n <!-- Categories -->\n <section id=\"categories\" class=\"py-20 sm:py-28 bg-cream-50\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center mb-14\">\n <p class=\"text-sage-600 text-sm font-semibold tracking-widest uppercase mb-3\">Curated Collections</p>\n <h2 class=\"text-3xl sm:text-4xl font-bold text-stone-900\">Shop by Category</h2>\n </div>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6\">\n <!-- Skincare -->\n <a href=\"#\" class=\"group block rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition-shadow\">\n <div class=\"h-52 bg-sage-200 flex items-center justify-center\">\n <span class=\"text-5xl opacity-60 group-hover:scale-110 transition-transform\" aria-hidden=\"true\">🧴</span>\n </div>\n <div class=\"bg-white p-5\">\n <h3 class=\"text-lg font-bold text-stone-900 group-hover:text-sage-700 transition-colors\">Skincare</h3>\n <p class=\"text-sm text-stone-500 mt-1\">Serums, oils, and cleansers from nature's apothecary</p>\n </div>\n </a>\n <!-- Supplements -->\n <a href=\"#\" class=\"group block rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition-shadow\">\n <div class=\"h-52 bg-terracotta-100 flex items-center justify-center\">\n <span class=\"text-5xl opacity-60 group-hover:scale-110 transition-transform\" aria-hidden=\"true\">🌱</span>\n </div>\n <div class=\"bg-white p-5\">\n <h3 class=\"text-lg font-bold text-stone-900 group-hover:text-sage-700 transition-colors\">Supplements</h3>\n <p class=\"text-sm text-stone-500 mt-1\">Adaptogens, vitamins, and plant-based nutrition</p>\n </div>\n </a>\n <!-- Teas -->\n <a href=\"#\" class=\"group block rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition-shadow\">\n <div class=\"h-52 bg-sand-200 flex items-center justify-center\">\n <span class=\"text-5xl opacity-60 group-hover:scale-110 transition-transform\" aria-hidden=\"true\">🍵</span>\n </div>\n <div class=\"bg-white p-5\">\n <h3 class=\"text-lg font-bold text-stone-900 group-hover:text-sage-700 transition-colors\">Herbal Teas</h3>\n <p class=\"text-sm text-stone-500 mt-1\">Hand-blended loose-leaf teas for ritual and rest</p>\n </div>\n </a>\n <!-- Essentials -->\n <a href=\"#\" class=\"group block rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition-shadow\">\n <div class=\"h-52 bg-olive-200 flex items-center justify-center\">\n <span class=\"text-5xl opacity-60 group-hover:scale-110 transition-transform\" aria-hidden=\"true\">🪴</span>\n </div>\n <div class=\"bg-white p-5\">\n <h3 class=\"text-lg font-bold text-stone-900 group-hover:text-sage-700 transition-colors\">Essentials</h3>\n <p class=\"text-sm text-stone-500 mt-1\">Everyday organic basics for home and body</p>\n </div>\n </a>\n </div>\n </div>\n </section>\n\n <!-- Featured Products -->\n <section id=\"featured\" class=\"py-20 sm:py-28 bg-cream-100\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center mb-14\">\n <p class=\"text-sage-600 text-sm font-semibold tracking-widest uppercase mb-3\">Most Loved</p>\n <h2 class=\"text-3xl sm:text-4xl font-bold text-stone-900\">Featured Products</h2>\n </div>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8\">\n <!-- Product 1 -->\n <article class=\"group bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition-shadow\">\n <div class=\"h-64 bg-sage-100 flex items-center justify-center relative\">\n <span class=\"text-6xl opacity-40\" aria-hidden=\"true\">🌸</span>\n <span class=\"absolute top-4 left-4 bg-sage-600 text-white text-xs font-semibold px-3 py-1 rounded-full\">Bestseller</span>\n </div>\n <div class=\"p-5\">\n <p class=\"text-xs text-sage-600 font-semibold uppercase tracking-wide mb-1\">Skincare</p>\n <h3 class=\"text-lg font-bold text-stone-900 group-hover:text-sage-700 transition-colors\">Lavender Face Serum</h3>\n <p class=\"text-sm text-stone-500 mt-1 mb-4\">Cold-pressed lavender and jojoba. Calms, hydrates, restores.</p>\n <div class=\"flex items-center justify-between\">\n <span class=\"text-xl font-bold text-stone-900\">&euro;34</span>\n <button class=\"px-4 py-2 rounded-full bg-sage-600 text-white text-sm font-semibold hover:bg-sage-700 transition-colors\">Add to Cart</button>\n </div>\n </div>\n </article>\n <!-- Product 2 -->\n <article class=\"group bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition-shadow\">\n <div class=\"h-64 bg-olive-100 flex items-center justify-center\">\n <span class=\"text-6xl opacity-40\" aria-hidden=\"true\">🍃</span>\n </div>\n <div class=\"p-5\">\n <p class=\"text-xs text-sage-600 font-semibold uppercase tracking-wide mb-1\">Supplements</p>\n <h3 class=\"text-lg font-bold text-stone-900 group-hover:text-sage-700 transition-colors\">Matcha Powder</h3>\n <p class=\"text-sm text-stone-500 mt-1 mb-4\">Ceremonial-grade matcha from Uji, Japan. Stone-ground, vibrant.</p>\n <div class=\"flex items-center justify-between\">\n <span class=\"text-xl font-bold text-stone-900\">&euro;28</span>\n <button class=\"px-4 py-2 rounded-full bg-sage-600 text-white text-sm font-semibold hover:bg-sage-700 transition-colors\">Add to Cart</button>\n </div>\n </div>\n </article>\n <!-- Product 3 -->\n <article class=\"group bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition-shadow\">\n <div class=\"h-64 bg-terracotta-100 flex items-center justify-center relative\">\n <span class=\"text-6xl opacity-40\" aria-hidden=\"true\">🌹</span>\n <span class=\"absolute top-4 left-4 bg-terracotta-500 text-white text-xs font-semibold px-3 py-1 rounded-full\">New</span>\n </div>\n <div class=\"p-5\">\n <p class=\"text-xs text-sage-600 font-semibold uppercase tracking-wide mb-1\">Skincare</p>\n <h3 class=\"text-lg font-bold text-stone-900 group-hover:text-sage-700 transition-colors\">Rose Hip Oil</h3>\n <p class=\"text-sm text-stone-500 mt-1 mb-4\">Wild-harvested rosehip. Rich in Vitamin C and essential fatty acids.</p>\n <div class=\"flex items-center justify-between\">\n <span class=\"text-xl font-bold text-stone-900\">&euro;42</span>\n <button class=\"px-4 py-2 rounded-full bg-sage-600 text-white text-sm font-semibold hover:bg-sage-700 transition-colors\">Add to Cart</button>\n </div>\n </div>\n </article>\n <!-- Product 4 -->\n <article class=\"group bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition-shadow\">\n <div class=\"h-64 bg-sand-100 flex items-center justify-center\">\n <span class=\"text-6xl opacity-40\" aria-hidden=\"true\">🌼</span>\n </div>\n <div class=\"p-5\">\n <p class=\"text-xs text-sage-600 font-semibold uppercase tracking-wide mb-1\">Herbal Teas</p>\n <h3 class=\"text-lg font-bold text-stone-900 group-hover:text-sage-700 transition-colors\">Chamomile Tea Blend</h3>\n <p class=\"text-sm text-stone-500 mt-1 mb-4\">Chamomile, lemon balm, and passionflower. Your evening ritual.</p>\n <div class=\"flex items-center justify-between\">\n <span class=\"text-xl font-bold text-stone-900\">&euro;18</span>\n <button class=\"px-4 py-2 rounded-full bg-sage-600 text-white text-sm font-semibold hover:bg-sage-700 transition-colors\">Add to Cart</button>\n </div>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n <!-- Our Values -->\n <section id=\"values\" class=\"py-20 sm:py-28 bg-cream-50\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center mb-14\">\n <p class=\"text-sage-600 text-sm font-semibold tracking-widest uppercase mb-3\">What We Stand For</p>\n <h2 class=\"text-3xl sm:text-4xl font-bold text-stone-900\">Our Values</h2>\n <p class=\"text-stone-600 mt-4 max-w-2xl mx-auto text-lg\">Every product we carry reflects a commitment to people, planet, and purity. No exceptions.</p>\n </div>\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8 lg:gap-12\">\n <div class=\"text-center bg-white rounded-2xl p-8 shadow-sm\">\n <div class=\"w-16 h-16 bg-sage-100 rounded-2xl flex items-center justify-center mx-auto mb-6\">\n <span class=\"text-3xl\" aria-hidden=\"true\">🌿</span>\n </div>\n <h3 class=\"text-xl font-bold text-stone-900 mb-3\">Certified Organic</h3>\n <p class=\"text-stone-600 leading-relaxed\">Every ingredient is certified organic or wildcrafted. No synthetics, no fillers, no compromise. We publish full ingredient provenance for every product.</p>\n </div>\n <div class=\"text-center bg-white rounded-2xl p-8 shadow-sm\">\n <div class=\"w-16 h-16 bg-sage-100 rounded-2xl flex items-center justify-center mx-auto mb-6\">\n <span class=\"text-3xl\" aria-hidden=\"true\">🌍</span>\n </div>\n <h3 class=\"text-xl font-bold text-stone-900 mb-3\">Sustainable Packaging</h3>\n <p class=\"text-stone-600 leading-relaxed\">Amber glass, compostable labels, recycled cardboard. We have eliminated single-use plastic from our entire supply chain since day one.</p>\n </div>\n <div class=\"text-center bg-white rounded-2xl p-8 shadow-sm\">\n <div class=\"w-16 h-16 bg-sage-100 rounded-2xl flex items-center justify-center mx-auto mb-6\">\n <span class=\"text-3xl\" aria-hidden=\"true\">🤝</span>\n </div>\n <h3 class=\"text-xl font-bold text-stone-900 mb-3\">Fair Trade Partners</h3>\n <p class=\"text-stone-600 leading-relaxed\">We work directly with small-scale farmers and cooperatives. Fair wages, long-term relationships, and transparent pricing are not optional — they are foundational.</p>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Testimonials -->\n <section id=\"testimonials\" class=\"py-20 sm:py-28 bg-sage-50\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center mb-14\">\n <p class=\"text-sage-600 text-sm font-semibold tracking-widest uppercase mb-3\">Kind Words</p>\n <h2 class=\"text-3xl sm:text-4xl font-bold text-stone-900\">What Our Customers Say</h2>\n </div>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto\">\n <blockquote class=\"bg-white rounded-2xl p-8 shadow-sm\">\n <div class=\"flex gap-1 mb-4\" aria-label=\"5 out of 5 stars\">\n <span class=\"text-amber-400 text-lg\" aria-hidden=\"true\">&#9733;&#9733;&#9733;&#9733;&#9733;</span>\n </div>\n <p class=\"text-stone-700 leading-relaxed text-lg italic mb-6\">\"The Lavender Face Serum has completely transformed my evening routine. My skin feels calmer, looks brighter, and I love knowing every ingredient is pure. Terra Botanica is the real thing.\"</p>\n <footer class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10 rounded-full bg-sage-200 flex items-center justify-center text-sage-700 font-bold text-sm\" aria-hidden=\"true\">SL</div>\n <div>\n <p class=\"font-semibold text-stone-900 text-sm\">Sophie Lindström</p>\n <p class=\"text-stone-500 text-xs\">Customer since 2024</p>\n </div>\n </footer>\n </blockquote>\n <blockquote class=\"bg-white rounded-2xl p-8 shadow-sm\">\n <div class=\"flex gap-1 mb-4\" aria-label=\"5 out of 5 stars\">\n <span class=\"text-amber-400 text-lg\" aria-hidden=\"true\">&#9733;&#9733;&#9733;&#9733;&#9733;</span>\n </div>\n <p class=\"text-stone-700 leading-relaxed text-lg italic mb-6\">\"I have tried dozens of matcha powders, and this is by far the most vibrant and smooth. The packaging is beautiful, too — glass jar, no plastic. This is how shopping should feel.\"</p>\n <footer class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10 rounded-full bg-terracotta-100 flex items-center justify-center text-terracotta-500 font-bold text-sm\" aria-hidden=\"true\">MK</div>\n <div>\n <p class=\"font-semibold text-stone-900 text-sm\">Marco Kowalski</p>\n <p class=\"text-stone-500 text-xs\">Customer since 2025</p>\n </div>\n </footer>\n </blockquote>\n </div>\n </div>\n </section>\n\n <!-- Newsletter -->\n <section id=\"newsletter\" class=\"py-20 sm:py-28 bg-cream-50\">\n <div class=\"max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center\">\n <div class=\"bg-white rounded-2xl p-10 sm:p-14 shadow-sm border border-sage-100\">\n <span class=\"text-4xl mb-4 block\" aria-hidden=\"true\">🌾</span>\n <h2 class=\"text-2xl sm:text-3xl font-bold text-stone-900 mb-3\">Stay Rooted</h2>\n <p class=\"text-stone-600 mb-8 text-lg max-w-lg mx-auto\">Seasonal product drops, wellness guides, and behind-the-scenes stories from our partner farms. No spam, ever.</p>\n <form class=\"flex flex-col sm:flex-row gap-3 max-w-md mx-auto\" aria-label=\"Newsletter signup\">\n <label for=\"newsletter-email\" class=\"sr-only\">Email address</label>\n <input\n id=\"newsletter-email\"\n type=\"email\"\n placeholder=\"your@email.com\"\n required\n class=\"flex-1 px-5 py-3 rounded-full border border-sage-200 bg-cream-50 text-stone-800 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-sage-400 focus:border-transparent text-sm\"\n />\n <button type=\"submit\" class=\"px-7 py-3 rounded-full bg-sage-600 text-white font-semibold hover:bg-sage-700 transition-colors text-sm whitespace-nowrap\">\n Subscribe\n </button>\n </form>\n <p class=\"text-xs text-stone-400 mt-4\">Unsubscribe anytime. We respect your inbox.</p>\n </div>\n </div>\n </section>\n\n <!-- Footer -->\n <footer class=\"bg-sage-900 text-sage-200 py-16\" role=\"contentinfo\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 mb-12\">\n <div>\n <a href=\"#\" class=\"flex items-center gap-2 text-xl font-bold text-white mb-4\" aria-label=\"Terra Botanica home\">\n <span aria-hidden=\"true\">🌿</span>\n Terra Botanica\n </a>\n <p class=\"text-sage-300 text-sm leading-relaxed\">Premium organic wellness rooted in transparency, sustainability, and the simple power of plants.</p>\n </div>\n <nav aria-label=\"Shop links\">\n <h4 class=\"text-white font-semibold mb-4 text-sm uppercase tracking-wide\">Shop</h4>\n <ul class=\"space-y-2 text-sm\">\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Skincare</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Supplements</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Herbal Teas</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Essentials</a></li>\n </ul>\n </nav>\n <nav aria-label=\"Company links\">\n <h4 class=\"text-white font-semibold mb-4 text-sm uppercase tracking-wide\">Company</h4>\n <ul class=\"space-y-2 text-sm\">\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Our Story</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Sustainability</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Partner Farms</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Careers</a></li>\n </ul>\n </nav>\n <nav aria-label=\"Support links\">\n <h4 class=\"text-white font-semibold mb-4 text-sm uppercase tracking-wide\">Support</h4>\n <ul class=\"space-y-2 text-sm\">\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Shipping & Returns</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">FAQ</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Contact Us</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Privacy Policy</a></li>\n </ul>\n </nav>\n </div>\n <div class=\"border-t border-sage-700 pt-8 flex flex-col sm:flex-row items-center justify-between gap-4\">\n <p class=\"text-sage-400 text-sm\">&copy; 2026 Terra Botanica. All rights reserved.</p>\n <div class=\"flex items-center gap-6\">\n <a href=\"#\" class=\"text-sage-400 hover:text-white transition-colors text-sm\" aria-label=\"Terra Botanica on Instagram\">Instagram</a>\n <a href=\"#\" class=\"text-sage-400 hover:text-white transition-colors text-sm\" aria-label=\"Terra Botanica on Pinterest\">Pinterest</a>\n <a href=\"#\" class=\"text-sage-400 hover:text-white transition-colors text-sm\" aria-label=\"Terra Botanica on TikTok\">TikTok</a>\n </div>\n </div>\n </div>\n </footer>\n\n <!-- Mobile Menu Script -->\n <script>\n const btn = document.getElementById('mobile-menu-btn');\n const menu = document.getElementById('mobile-menu');\n btn.addEventListener('click', () => {\n const expanded = btn.getAttribute('aria-expanded') === 'true';\n btn.setAttribute('aria-expanded', String(!expanded));\n menu.classList.toggle('hidden');\n });\n // Close mobile menu when a link is clicked\n menu.querySelectorAll('a').forEach(link => {\n link.addEventListener('click', () => {\n menu.classList.add('hidden');\n btn.setAttribute('aria-expanded', 'false');\n });\n });\n </script>\n</body>\n</html>\n"
25443
+ },
25444
+ {
25445
+ "id": "shop/product-brand",
25446
+ "title": "Shop Product Brand",
25447
+ "summary": "Editorial, design-forward product page with full-bleed imagery, brand storytelling, and minimal purchase flow — inspired by Apple and B&O.",
25448
+ "description": "A premium brand product page that prioritizes storytelling and visual impact over conventional ecommerce patterns. Full-bleed hero, editorial sections, craftsmanship showcase, and a deliberately minimal purchase flow.",
25449
+ "category": "shop",
25450
+ "style": "dark",
25451
+ "tags": [
25452
+ "shop",
25453
+ "ecommerce",
25454
+ "product-page",
25455
+ "brand",
25456
+ "premium",
25457
+ "editorial",
25458
+ "luxury"
25459
+ ],
25460
+ "patterns": [
25461
+ "hero/dark",
25462
+ "features/base",
25463
+ "footer/base"
25464
+ ],
25465
+ "sections": [
25466
+ "hero",
25467
+ "product-showcase",
25468
+ "story",
25469
+ "craftsmanship",
25470
+ "specs",
25471
+ "purchase",
25472
+ "footer"
25473
+ ],
25474
+ "features": {
25475
+ "responsive": true,
25476
+ "darkMode": false,
25477
+ "animations": false,
25478
+ "formHandling": false
25479
+ },
25480
+ "files": {
25481
+ "html": "./product-brand.html",
25482
+ "preview": "./product-brand.png"
25483
+ },
25484
+ "install": {
25485
+ "copyPasteReady": true,
25486
+ "tailwindCdn": true,
25487
+ "vanillaJs": false,
25488
+ "notes": [
25489
+ "Dark theme is the default — not a dark mode toggle",
25490
+ "Replace image placeholders with high-quality product photography",
25491
+ "Brand storytelling sections should be rewritten for your product",
25492
+ "No discount badges or quantity selectors — designed for premium positioning"
25493
+ ]
25494
+ },
25495
+ "governance": {
25496
+ "status": "published",
25497
+ "quality": "flagship",
25498
+ "owner": "design-system",
25499
+ "updatedAt": "2026-03-20"
25500
+ },
25501
+ "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Arc Speaker — Sonance</title>\n <meta name=\"description\" content=\"Arc Speaker by Sonance. Precision-engineered wireless audio in a sculptural form. €349.\" />\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n <link href=\"https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap\" rel=\"stylesheet\" />\n <style>\n html { scroll-behavior: smooth; }\n .font-serif-editorial { font-family: 'Playfair Display', Georgia, serif; }\n </style>\n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n accent: { 400: '#fb7185', 500: '#f43f5e', 600: '#e11d48' }\n }\n }\n }\n }\n </script>\n</head>\n<body class=\"bg-slate-950 text-slate-200 antialiased\">\n\n <!-- ════════════════════════════════════════════════════════════════════\n HERO — Full-bleed, massive typography, zero clutter\n ════════════════════════════════════════════════════════════════════ -->\n <header class=\"relative min-h-screen flex flex-col\">\n <!-- Minimal top bar -->\n <div class=\"relative z-10 flex items-center justify-between px-6 sm:px-10 lg:px-16 py-6\">\n <a href=\"#\" class=\"text-sm tracking-[0.25em] uppercase text-slate-400 hover:text-white transition-colors\" aria-label=\"Sonance home\">\n Sonance\n </a>\n <button aria-label=\"Shopping bag, 0 items\" class=\"p-2 text-slate-400 hover:text-white transition-colors\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007z\" />\n </svg>\n </button>\n </div>\n\n <!-- Hero content -->\n <div class=\"flex-1 flex flex-col items-center justify-center px-6 text-center -mt-16\">\n <p class=\"text-sm tracking-[0.3em] uppercase text-slate-500 mb-6\">Introducing</p>\n <h1 class=\"font-serif-editorial text-6xl sm:text-7xl md:text-8xl lg:text-9xl font-bold text-white tracking-tight leading-none\">\n Arc Speaker\n </h1>\n <p class=\"mt-6 text-lg sm:text-xl text-slate-400 max-w-md leading-relaxed\">\n Sound, sculpted.\n </p>\n <a href=\"#showcase\" class=\"mt-12 text-sm tracking-[0.2em] uppercase text-slate-500 hover:text-white transition-colors\">\n Discover\n <svg class=\"w-4 h-4 inline-block ml-1 animate-bounce\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3\" />\n </svg>\n </a>\n </div>\n </header>\n\n <!-- ════════════════════════════════════════════════════════════════════\n PRODUCT SHOWCASE — Cinematic image + feature highlights\n ════════════════════════════════════════════════════════════════════ -->\n <section id=\"showcase\" class=\"px-6 sm:px-10 lg:px-16 py-24 md:py-32\">\n <!-- Full-width product image -->\n <div class=\"aspect-[16/9] w-full rounded-sm bg-gradient-to-br from-slate-800 via-slate-900 to-slate-950 flex items-center justify-center overflow-hidden\">\n <div class=\"text-center\">\n <svg class=\"w-16 h-16 text-slate-700 mx-auto\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"0.5\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0022.5 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z\" />\n </svg>\n <p class=\"mt-3 text-sm text-slate-600\">Product image — 16:9</p>\n </div>\n </div>\n\n <!-- Three feature highlights -->\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-0 mt-16 md:mt-24\">\n <div class=\"py-8 md:py-0 md:pr-12\">\n <p class=\"text-sm tracking-[0.2em] uppercase text-accent-500 mb-3\">360° Audio</p>\n <p class=\"text-slate-400 leading-relaxed\">\n Room-filling sound that adapts to your space. Six precision drivers, tuned by ear.\n </p>\n </div>\n <div class=\"py-8 md:py-0 md:px-12 border-t md:border-t-0 md:border-l md:border-r border-slate-800/60\">\n <p class=\"text-sm tracking-[0.2em] uppercase text-accent-500 mb-3\">18-Hour Battery</p>\n <p class=\"text-slate-400 leading-relaxed\">\n All-day listening without compromise. USB-C fast charge gives 4 hours in 20 minutes.\n </p>\n </div>\n <div class=\"py-8 md:py-0 md:pl-12 border-t md:border-t-0\">\n <p class=\"text-sm tracking-[0.2em] uppercase text-accent-500 mb-3\">AirPlay & Bluetooth 5.3</p>\n <p class=\"text-slate-400 leading-relaxed\">\n Seamless connectivity with lossless streaming. Works with everything you own.\n </p>\n </div>\n </div>\n </section>\n\n <!-- ════════════════════════════════════════════════════════════════════\n BRAND STORY — Editorial split layout\n ════════════════════════════════════════════════════════════════════ -->\n <section class=\"px-6 sm:px-10 lg:px-16 py-24 md:py-32\">\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center\">\n <!-- Text -->\n <div class=\"order-2 lg:order-1 max-w-lg\">\n <p class=\"text-sm tracking-[0.2em] uppercase text-slate-500 mb-6\">The Philosophy</p>\n <h2 class=\"font-serif-editorial text-4xl sm:text-5xl text-white leading-tight mb-8\">\n Designed for<br />the way you<br /><em class=\"text-accent-500\">listen</em>\n </h2>\n <p class=\"text-slate-400 leading-relaxed mb-6\">\n Most speakers are designed to be heard. Arc is designed to be experienced. We spent\n three years refining the acoustic architecture — not in a lab, but in living rooms,\n kitchens, and studios where music actually lives.\n </p>\n <p class=\"text-slate-400 leading-relaxed\">\n The result is a speaker that doesn't just play sound. It shapes it around you,\n filling every corner without force, without distortion, without asking you to\n sit in the sweet spot.\n </p>\n </div>\n <!-- Image -->\n <div class=\"order-1 lg:order-2 aspect-[3/4] w-full rounded-sm bg-gradient-to-b from-slate-800 via-slate-900 to-slate-950 flex items-center justify-center\">\n <div class=\"text-center\">\n <svg class=\"w-12 h-12 text-slate-700 mx-auto\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"0.5\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0022.5 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z\" />\n </svg>\n <p class=\"mt-3 text-sm text-slate-600\">Lifestyle image — 3:4</p>\n </div>\n </div>\n </div>\n </section>\n\n <!-- ════════════════════════════════════════════════════════════════════\n CRAFTSMANSHIP — Magazine editorial cards\n ════════════════════════════════════════════════════════════════════ -->\n <section class=\"px-6 sm:px-10 lg:px-16 py-24 md:py-32\">\n <div class=\"text-center mb-16 md:mb-24\">\n <p class=\"text-sm tracking-[0.2em] uppercase text-slate-500 mb-4\">Materials &amp; Craft</p>\n <h2 class=\"font-serif-editorial text-4xl sm:text-5xl text-white\">\n Every detail, considered\n </h2>\n </div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\n <!-- Card 1 -->\n <div class=\"relative aspect-[3/4] rounded-sm overflow-hidden group\">\n <div class=\"absolute inset-0 bg-gradient-to-b from-slate-800 to-slate-900\"></div>\n <div class=\"absolute inset-0 bg-gradient-to-t from-slate-950/90 via-transparent to-transparent\"></div>\n <div class=\"absolute bottom-0 left-0 right-0 p-6 sm:p-8\">\n <p class=\"text-sm tracking-[0.2em] uppercase text-accent-500 mb-2\">Acoustic Mesh</p>\n <p class=\"text-white text-lg font-light leading-snug mb-2\">\n Woven from recycled marine plastic\n </p>\n <p class=\"text-slate-400 text-sm leading-relaxed\">\n Acoustically transparent. Environmentally conscious. Each grille is unique.\n </p>\n </div>\n </div>\n\n <!-- Card 2 -->\n <div class=\"relative aspect-[3/4] rounded-sm overflow-hidden group\">\n <div class=\"absolute inset-0 bg-gradient-to-b from-slate-700 to-slate-800\"></div>\n <div class=\"absolute inset-0 bg-gradient-to-t from-slate-950/90 via-transparent to-transparent\"></div>\n <div class=\"absolute bottom-0 left-0 right-0 p-6 sm:p-8\">\n <p class=\"text-sm tracking-[0.2em] uppercase text-accent-500 mb-2\">Solid Aluminum</p>\n <p class=\"text-white text-lg font-light leading-snug mb-2\">\n CNC-machined from a single block\n </p>\n <p class=\"text-slate-400 text-sm leading-relaxed\">\n Cold to the touch. Warm in tone. The enclosure doubles as a heat sink.\n </p>\n </div>\n </div>\n\n <!-- Card 3 -->\n <div class=\"relative aspect-[3/4] rounded-sm overflow-hidden group\">\n <div class=\"absolute inset-0 bg-gradient-to-b from-slate-800 via-slate-850 to-slate-900\"></div>\n <div class=\"absolute inset-0 bg-gradient-to-t from-slate-950/90 via-transparent to-transparent\"></div>\n <div class=\"absolute bottom-0 left-0 right-0 p-6 sm:p-8\">\n <p class=\"text-sm tracking-[0.2em] uppercase text-accent-500 mb-2\">Neodymium Drivers</p>\n <p class=\"text-white text-lg font-light leading-snug mb-2\">\n Six drivers, hand-matched in pairs\n </p>\n <p class=\"text-slate-400 text-sm leading-relaxed\">\n Frequency response from 35Hz to 40kHz. You'll hear things you missed.\n </p>\n </div>\n </div>\n </div>\n </section>\n\n <!-- ════════════════════════════════════════════════════════════════════\n SPECIFICATIONS — Minimal, borderless\n ════════════════════════════════════════════════════════════════════ -->\n <section class=\"px-6 sm:px-10 lg:px-16 py-24 md:py-32\">\n <div class=\"max-w-2xl mx-auto\">\n <p class=\"text-sm tracking-[0.2em] uppercase text-slate-500 mb-12 text-center\">Specifications</p>\n\n <dl class=\"space-y-0\">\n <div class=\"flex justify-between py-5 border-b border-slate-800/60\">\n <dt class=\"text-slate-400\">Drivers</dt>\n <dd class=\"text-white text-right\">6 x 40mm neodymium</dd>\n </div>\n <div class=\"flex justify-between py-5 border-b border-slate-800/60\">\n <dt class=\"text-slate-400\">Frequency Response</dt>\n <dd class=\"text-white text-right\">35 Hz — 40 kHz</dd>\n </div>\n <div class=\"flex justify-between py-5 border-b border-slate-800/60\">\n <dt class=\"text-slate-400\">Battery</dt>\n <dd class=\"text-white text-right\">18 hours / USB-C fast charge</dd>\n </div>\n <div class=\"flex justify-between py-5 border-b border-slate-800/60\">\n <dt class=\"text-slate-400\">Connectivity</dt>\n <dd class=\"text-white text-right\">AirPlay 2, Bluetooth 5.3, Wi-Fi 6</dd>\n </div>\n <div class=\"flex justify-between py-5 border-b border-slate-800/60\">\n <dt class=\"text-slate-400\">Dimensions</dt>\n <dd class=\"text-white text-right\">168 x 168 x 252 mm</dd>\n </div>\n <div class=\"flex justify-between py-5\">\n <dt class=\"text-slate-400\">Weight</dt>\n <dd class=\"text-white text-right\">2.4 kg</dd>\n </div>\n </dl>\n </div>\n </section>\n\n <!-- ════════════════════════════════════════════════════════════════════\n PURCHASE — Centered, prominent, deliberately minimal\n ════════════════════════════════════════════════════════════════════ -->\n <section class=\"px-6 sm:px-10 lg:px-16 py-24 md:py-40\">\n <div class=\"max-w-lg mx-auto text-center\">\n <h2 class=\"font-serif-editorial text-4xl sm:text-5xl text-white mb-4\">\n Arc Speaker\n </h2>\n <p class=\"text-3xl sm:text-4xl text-white font-light mb-12\">\n &euro;349\n </p>\n\n <!-- Color selection -->\n <fieldset class=\"mb-12\">\n <legend class=\"text-sm tracking-[0.2em] uppercase text-slate-500 mb-6\">Color</legend>\n <div class=\"flex items-center justify-center gap-5\" role=\"radiogroup\" aria-label=\"Choose color\">\n <button\n role=\"radio\"\n aria-checked=\"true\"\n aria-label=\"Midnight Black\"\n class=\"w-10 h-10 rounded-full bg-slate-900 ring-2 ring-white ring-offset-2 ring-offset-slate-950 transition-all hover:scale-110 focus:outline-none focus:ring-accent-500\"\n ></button>\n <button\n role=\"radio\"\n aria-checked=\"false\"\n aria-label=\"Lunar Silver\"\n class=\"w-10 h-10 rounded-full bg-slate-400 ring-2 ring-transparent ring-offset-2 ring-offset-slate-950 transition-all hover:scale-110 focus:outline-none focus:ring-accent-500\"\n ></button>\n <button\n role=\"radio\"\n aria-checked=\"false\"\n aria-label=\"Desert Sand\"\n class=\"w-10 h-10 rounded-full bg-amber-200 ring-2 ring-transparent ring-offset-2 ring-offset-slate-950 transition-all hover:scale-110 focus:outline-none focus:ring-accent-500\"\n ></button>\n </div>\n </fieldset>\n\n <!-- Add to bag -->\n <button class=\"w-full sm:w-auto px-16 py-4 bg-accent-500 hover:bg-accent-600 text-white text-sm tracking-[0.15em] uppercase rounded-sm transition-colors focus:outline-none focus:ring-2 focus:ring-accent-500 focus:ring-offset-2 focus:ring-offset-slate-950\">\n Add to Bag\n </button>\n\n <p class=\"mt-6 text-sm text-slate-500\">\n Free shipping. 30-day returns. 2-year warranty.\n </p>\n </div>\n </section>\n\n <!-- ════════════════════════════════════════════════════════════════════\n FULL-WIDTH CLOSING IMAGE\n ════════════════════════════════════════════════════════════════════ -->\n <section class=\"px-6 sm:px-10 lg:px-16 pb-24 md:pb-32\">\n <div class=\"aspect-[21/9] w-full rounded-sm bg-gradient-to-br from-slate-900 via-slate-800 to-slate-950 flex items-center justify-center\">\n <div class=\"text-center\">\n <svg class=\"w-12 h-12 text-slate-700 mx-auto\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"0.5\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0022.5 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z\" />\n </svg>\n <p class=\"mt-3 text-sm text-slate-600\">Cinematic closing image — 21:9</p>\n </div>\n </div>\n </section>\n\n <!-- ════════════════════════════════════════════════════════════════════\n FOOTER — Minimal, dark\n ════════════════════════════════════════════════════════════════════ -->\n <footer class=\"border-t border-slate-800/60 px-6 sm:px-10 lg:px-16 py-12\" role=\"contentinfo\">\n <div class=\"max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-6\">\n <a href=\"#\" class=\"text-sm tracking-[0.25em] uppercase text-slate-500 hover:text-white transition-colors\" aria-label=\"Sonance home\">\n Sonance\n </a>\n <nav class=\"flex items-center gap-8 text-sm text-slate-500\" aria-label=\"Footer navigation\">\n <a href=\"#\" class=\"hover:text-white transition-colors\">Support</a>\n <a href=\"#\" class=\"hover:text-white transition-colors\">Shipping</a>\n <a href=\"#\" class=\"hover:text-white transition-colors\">Returns</a>\n <a href=\"#\" class=\"hover:text-white transition-colors\">Contact</a>\n </nav>\n <p class=\"text-xs text-slate-600\">&copy; 2026 Sonance</p>\n </div>\n </footer>\n\n</body>\n</html>\n"
25502
+ },
25503
+ {
25504
+ "id": "shop/product-standard",
25505
+ "title": "Shop Product Standard",
25506
+ "summary": "Conventional ecommerce product page with image gallery, specs tabs, reviews, and trust badges — the industry standard layout.",
25507
+ "description": "A familiar, trust-building product detail page following ecommerce conventions. Image gallery with thumbnails, structured specifications, star ratings with review distribution, quantity selector, and cross-sell recommendations.",
25508
+ "category": "shop",
25509
+ "style": "modern",
25510
+ "tags": [
25511
+ "shop",
25512
+ "ecommerce",
25513
+ "product-page",
25514
+ "standard",
25515
+ "conventional"
25516
+ ],
25517
+ "patterns": [
25518
+ "navbar/base",
25519
+ "tabs/base",
25520
+ "cards/base",
25521
+ "footer/base"
25522
+ ],
25523
+ "sections": [
25524
+ "breadcrumb",
25525
+ "product-detail",
25526
+ "tabs",
25527
+ "related-products",
25528
+ "footer"
25529
+ ],
25530
+ "features": {
25531
+ "responsive": true,
25532
+ "darkMode": false,
25533
+ "animations": false,
25534
+ "formHandling": false
25535
+ },
25536
+ "files": {
25537
+ "html": "./product-standard.html",
25538
+ "preview": "./product-standard.png"
25539
+ },
25540
+ "install": {
25541
+ "copyPasteReady": true,
25542
+ "tailwindCdn": true,
25543
+ "vanillaJs": true,
25544
+ "notes": [
25545
+ "Replace image placeholders with real product photos",
25546
+ "Tab switching uses minimal vanilla JS",
25547
+ "Cart/buy functionality requires backend integration"
25548
+ ]
25549
+ },
25550
+ "governance": {
25551
+ "status": "published",
25552
+ "quality": "flagship",
25553
+ "owner": "design-system",
25554
+ "updatedAt": "2026-03-20"
25555
+ },
25556
+ "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>SoundPeak Pro Max — AudioTech</title>\n <meta name=\"description\" content=\"SoundPeak Pro Max wireless headphones by AudioTech. Premium noise-cancelling, 40h battery, Hi-Res Audio. €179.99 with free shipping.\" />\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <style>\n html { scroll-behavior: smooth; }\n .tab-btn.active { color: #2563eb; border-color: #2563eb; }\n .tab-btn { border-bottom: 2px solid transparent; }\n .thumb.active { ring-width: 2px; box-shadow: 0 0 0 2px #2563eb; }\n .color-opt.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2563eb; }\n .star-filled { color: #f59e0b; }\n .star-empty { color: #d1d5db; }\n </style>\n</head>\n<body class=\"bg-white text-slate-800 antialiased\">\n\n <!-- Breadcrumb -->\n <nav class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3\" aria-label=\"Breadcrumb\">\n <ol class=\"flex items-center gap-1.5 text-sm text-slate-500\">\n <li><a href=\"#\" class=\"hover:text-blue-600 transition-colors\">Home</a></li>\n <li aria-hidden=\"true\">\n <svg class=\"w-4 h-4 text-slate-400\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.25 4.5l7.5 7.5-7.5 7.5\"/></svg>\n </li>\n <li><a href=\"#\" class=\"hover:text-blue-600 transition-colors\">Electronics</a></li>\n <li aria-hidden=\"true\">\n <svg class=\"w-4 h-4 text-slate-400\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.25 4.5l7.5 7.5-7.5 7.5\"/></svg>\n </li>\n <li><a href=\"#\" class=\"hover:text-blue-600 transition-colors\">Headphones</a></li>\n <li aria-hidden=\"true\">\n <svg class=\"w-4 h-4 text-slate-400\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.25 4.5l7.5 7.5-7.5 7.5\"/></svg>\n </li>\n <li class=\"text-slate-800 font-medium\" aria-current=\"page\">SoundPeak Pro Max</li>\n </ol>\n </nav>\n\n <!-- Product Section -->\n <section class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-16\">\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-14\">\n\n <!-- Left: Image Gallery -->\n <div>\n <!-- Main Image -->\n <div id=\"main-image\" class=\"aspect-square bg-slate-100 rounded-xl border border-slate-200 flex items-center justify-center mb-4\">\n <div class=\"text-center text-slate-400\">\n <svg class=\"w-16 h-16 mx-auto mb-2\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z\"/><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z\"/></svg>\n <span class=\"text-sm font-medium\" id=\"main-image-label\">Front View</span>\n </div>\n </div>\n <!-- Thumbnails -->\n <div class=\"grid grid-cols-4 gap-3\" role=\"list\" aria-label=\"Product image thumbnails\">\n <button class=\"thumb active aspect-square bg-slate-100 rounded-lg border border-slate-200 flex items-center justify-center text-xs text-slate-400 hover:border-blue-300 transition-colors cursor-pointer\" data-view=\"Front View\" aria-label=\"View front image\" aria-pressed=\"true\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z\"/><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z\"/></svg>\n </button>\n <button class=\"thumb aspect-square bg-slate-50 rounded-lg border border-slate-200 flex items-center justify-center text-xs text-slate-400 hover:border-blue-300 transition-colors cursor-pointer\" data-view=\"Side View\" aria-label=\"View side image\" aria-pressed=\"false\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z\"/><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z\"/></svg>\n </button>\n <button class=\"thumb aspect-square bg-slate-50 rounded-lg border border-slate-200 flex items-center justify-center text-xs text-slate-400 hover:border-blue-300 transition-colors cursor-pointer\" data-view=\"Detail View\" aria-label=\"View detail image\" aria-pressed=\"false\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z\"/><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z\"/></svg>\n </button>\n <button class=\"thumb aspect-square bg-slate-50 rounded-lg border border-slate-200 flex items-center justify-center text-xs text-slate-400 hover:border-blue-300 transition-colors cursor-pointer\" data-view=\"Lifestyle View\" aria-label=\"View lifestyle image\" aria-pressed=\"false\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z\"/><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z\"/></svg>\n </button>\n </div>\n </div>\n\n <!-- Right: Product Info -->\n <div class=\"lg:pt-2\">\n <!-- Brand -->\n <a href=\"#\" class=\"text-sm font-medium text-blue-600 hover:underline\">AudioTech</a>\n\n <!-- Title -->\n <h1 class=\"text-2xl sm:text-3xl font-bold text-slate-900 mt-1 leading-tight\">SoundPeak Pro Max Wireless Noise-Cancelling Headphones</h1>\n\n <!-- Rating -->\n <div class=\"flex items-center gap-2 mt-3\">\n <div class=\"flex items-center\" aria-label=\"Rating: 4.7 out of 5 stars\">\n <svg class=\"w-5 h-5 star-filled\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5 star-filled\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5 star-filled\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5 star-filled\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5 star-filled\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n </div>\n <span class=\"text-sm font-medium text-slate-700\">4.7</span>\n <a href=\"#reviews-tab\" class=\"text-sm text-blue-600 hover:underline\">(2,341 reviews)</a>\n </div>\n\n <!-- Price -->\n <div class=\"flex items-baseline gap-3 mt-4\">\n <span class=\"text-3xl font-bold text-slate-900\">&euro;179.99</span>\n <span class=\"text-lg text-slate-400 line-through\">&euro;229.99</span>\n <span class=\"inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-red-100 text-red-700\">-22%</span>\n </div>\n <p class=\"text-sm text-green-600 font-medium mt-1\">In stock &mdash; ships within 24h</p>\n\n <!-- Divider -->\n <hr class=\"my-5 border-slate-200\" />\n\n <!-- Key Features -->\n <ul class=\"space-y-2 text-sm text-slate-600\">\n <li class=\"flex items-start gap-2\">\n <svg class=\"w-5 h-5 text-blue-600 shrink-0 mt-0.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"/></svg>\n Adaptive noise cancellation with Transparency mode\n </li>\n <li class=\"flex items-start gap-2\">\n <svg class=\"w-5 h-5 text-blue-600 shrink-0 mt-0.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"/></svg>\n 40-hour battery life &mdash; 5 min charge = 3 hours playback\n </li>\n <li class=\"flex items-start gap-2\">\n <svg class=\"w-5 h-5 text-blue-600 shrink-0 mt-0.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"/></svg>\n Hi-Res Audio with LDAC and aptX Adaptive support\n </li>\n <li class=\"flex items-start gap-2\">\n <svg class=\"w-5 h-5 text-blue-600 shrink-0 mt-0.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"/></svg>\n Multipoint connection &mdash; pair 2 devices simultaneously\n </li>\n </ul>\n\n <!-- Divider -->\n <hr class=\"my-5 border-slate-200\" />\n\n <!-- Color Selector -->\n <div>\n <span class=\"text-sm font-medium text-slate-700\">Color: <span id=\"color-label\" class=\"font-normal text-slate-500\">Matte Black</span></span>\n <div class=\"flex items-center gap-3 mt-2\" role=\"radiogroup\" aria-label=\"Select color\">\n <button class=\"color-opt active w-8 h-8 rounded-full bg-slate-900 cursor-pointer border-0\" role=\"radio\" aria-checked=\"true\" aria-label=\"Matte Black\" data-color=\"Matte Black\"></button>\n <button class=\"color-opt w-8 h-8 rounded-full bg-slate-300 cursor-pointer border-0\" role=\"radio\" aria-checked=\"false\" aria-label=\"Silver Frost\" data-color=\"Silver Frost\"></button>\n <button class=\"color-opt w-8 h-8 rounded-full bg-blue-900 cursor-pointer border-0\" role=\"radio\" aria-checked=\"false\" aria-label=\"Midnight Blue\" data-color=\"Midnight Blue\"></button>\n </div>\n </div>\n\n <!-- Quantity Selector -->\n <div class=\"mt-5\">\n <span class=\"text-sm font-medium text-slate-700\">Quantity</span>\n <div class=\"flex items-center gap-0 mt-2 w-fit border border-slate-300 rounded-lg overflow-hidden\">\n <button id=\"qty-minus\" class=\"px-3 py-2 text-slate-600 hover:bg-slate-50 transition-colors text-lg font-medium\" aria-label=\"Decrease quantity\">&minus;</button>\n <span id=\"qty-value\" class=\"px-4 py-2 text-sm font-medium text-slate-800 min-w-[3rem] text-center border-x border-slate-300 bg-white\" aria-live=\"polite\" aria-label=\"Quantity\">1</span>\n <button id=\"qty-plus\" class=\"px-3 py-2 text-slate-600 hover:bg-slate-50 transition-colors text-lg font-medium\" aria-label=\"Increase quantity\">+</button>\n </div>\n </div>\n\n <!-- CTA Buttons -->\n <div class=\"flex flex-col sm:flex-row gap-3 mt-6\">\n <button class=\"flex-1 bg-blue-600 text-white font-semibold py-3 px-6 rounded-lg hover:bg-blue-700 transition-colors text-sm cursor-pointer\">\n <span class=\"flex items-center justify-center gap-2\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z\"/></svg>\n Add to Cart\n </span>\n </button>\n <button class=\"flex-1 bg-slate-900 text-white font-semibold py-3 px-6 rounded-lg hover:bg-slate-800 transition-colors text-sm cursor-pointer\">\n Buy Now\n </button>\n </div>\n\n <!-- Delivery Info -->\n <div class=\"mt-6 space-y-2\">\n <div class=\"flex items-center gap-2 text-sm text-slate-600\">\n <svg class=\"w-5 h-5 text-green-600 shrink-0\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 00-3.213-9.193 2.056 2.056 0 00-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 00-10.026 0 1.106 1.106 0 00-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12\"/></svg>\n <span><strong>Free shipping</strong> &mdash; Express delivery available</span>\n </div>\n <div class=\"flex items-center gap-2 text-sm text-slate-600\">\n <svg class=\"w-5 h-5 text-slate-400 shrink-0\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5\"/></svg>\n <span>Estimated delivery: <strong>March 24 &ndash; 26</strong></span>\n </div>\n </div>\n\n <!-- Trust Badges -->\n <div class=\"grid grid-cols-3 gap-3 mt-6 pt-5 border-t border-slate-200\">\n <div class=\"text-center\">\n <svg class=\"w-6 h-6 mx-auto text-slate-500 mb-1\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z\"/></svg>\n <span class=\"text-xs text-slate-500 font-medium\">Secure Payment</span>\n </div>\n <div class=\"text-center\">\n <svg class=\"w-6 h-6 mx-auto text-slate-500 mb-1\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182\"/></svg>\n <span class=\"text-xs text-slate-500 font-medium\">30-Day Returns</span>\n </div>\n <div class=\"text-center\">\n <svg class=\"w-6 h-6 mx-auto text-slate-500 mb-1\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M11.42 15.17l-5.1-5.1m0 0L11.42 4.97m-5.1 5.1H21m-5.58 5.1l5.1-5.1m0 0l-5.1-5.1m5.1 5.1H3\"/></svg>\n <span class=\"text-xs text-slate-500 font-medium\">2-Year Warranty</span>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Tabs Section -->\n <section class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-20\" id=\"reviews-tab\">\n <!-- Tab Navigation -->\n <div class=\"border-b border-slate-200\" role=\"tablist\" aria-label=\"Product information tabs\">\n <div class=\"flex gap-8\">\n <button class=\"tab-btn active py-3 text-sm font-medium transition-colors\" role=\"tab\" aria-selected=\"true\" aria-controls=\"tab-description\" id=\"btn-description\">Description</button>\n <button class=\"tab-btn py-3 text-sm font-medium text-slate-500 hover:text-slate-700 transition-colors\" role=\"tab\" aria-selected=\"false\" aria-controls=\"tab-specifications\" id=\"btn-specifications\">Specifications</button>\n <button class=\"tab-btn py-3 text-sm font-medium text-slate-500 hover:text-slate-700 transition-colors\" role=\"tab\" aria-selected=\"false\" aria-controls=\"tab-reviews\" id=\"btn-reviews\">Reviews (2,341)</button>\n </div>\n </div>\n\n <!-- Tab: Description -->\n <div id=\"tab-description\" class=\"py-8\" role=\"tabpanel\" aria-labelledby=\"btn-description\">\n <div class=\"max-w-3xl prose prose-slate\">\n <p class=\"text-slate-600 leading-relaxed\">The SoundPeak Pro Max represents a new benchmark in wireless audio. Featuring AudioTech's proprietary NoiseSense technology, these headphones deliver industry-leading noise cancellation that adapts to your environment in real time. Whether you're on a crowded train, in a busy office, or enjoying music at home, the Pro Max creates your perfect listening space.</p>\n <p class=\"text-slate-600 leading-relaxed mt-4\">Engineered with custom 40mm dynamic drivers and support for Hi-Res Audio codecs including LDAC and aptX Adaptive, every note is reproduced with stunning clarity and depth. The premium memory foam ear cushions wrapped in protein leather provide exceptional comfort for extended listening sessions, while the foldable design makes them the ideal travel companion. With 40 hours of battery life and fast charging that delivers 3 hours of playback from just 5 minutes of charging, the Pro Max keeps up with your life.</p>\n </div>\n </div>\n\n <!-- Tab: Specifications -->\n <div id=\"tab-specifications\" class=\"py-8 hidden\" role=\"tabpanel\" aria-labelledby=\"btn-specifications\">\n <div class=\"max-w-2xl\">\n <table class=\"w-full text-sm\">\n <caption class=\"sr-only\">Product specifications</caption>\n <tbody>\n <tr class=\"border-b border-slate-100\">\n <th scope=\"row\" class=\"py-3 pr-4 text-left font-medium text-slate-500 w-1/3\">Brand</th>\n <td class=\"py-3 text-slate-800\">AudioTech</td>\n </tr>\n <tr class=\"border-b border-slate-100\">\n <th scope=\"row\" class=\"py-3 pr-4 text-left font-medium text-slate-500\">Model</th>\n <td class=\"py-3 text-slate-800\">SoundPeak Pro Max</td>\n </tr>\n <tr class=\"border-b border-slate-100\">\n <th scope=\"row\" class=\"py-3 pr-4 text-left font-medium text-slate-500\">Weight</th>\n <td class=\"py-3 text-slate-800\">254 g</td>\n </tr>\n <tr class=\"border-b border-slate-100\">\n <th scope=\"row\" class=\"py-3 pr-4 text-left font-medium text-slate-500\">Battery Life</th>\n <td class=\"py-3 text-slate-800\">Up to 40 hours (ANC on)</td>\n </tr>\n <tr class=\"border-b border-slate-100\">\n <th scope=\"row\" class=\"py-3 pr-4 text-left font-medium text-slate-500\">Driver Size</th>\n <td class=\"py-3 text-slate-800\">40 mm dynamic</td>\n </tr>\n <tr class=\"border-b border-slate-100\">\n <th scope=\"row\" class=\"py-3 pr-4 text-left font-medium text-slate-500\">Connectivity</th>\n <td class=\"py-3 text-slate-800\">Bluetooth 5.3, USB-C, 3.5 mm</td>\n </tr>\n <tr class=\"border-b border-slate-100\">\n <th scope=\"row\" class=\"py-3 pr-4 text-left font-medium text-slate-500\">Codecs</th>\n <td class=\"py-3 text-slate-800\">SBC, AAC, LDAC, aptX Adaptive</td>\n </tr>\n <tr>\n <th scope=\"row\" class=\"py-3 pr-4 text-left font-medium text-slate-500\">In the Box</th>\n <td class=\"py-3 text-slate-800\">Headphones, USB-C cable, 3.5 mm cable, carry case, quick start guide</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n\n <!-- Tab: Reviews -->\n <div id=\"tab-reviews\" class=\"py-8 hidden\" role=\"tabpanel\" aria-labelledby=\"btn-reviews\">\n <div class=\"max-w-3xl\">\n\n <!-- Star Distribution -->\n <div class=\"flex flex-col sm:flex-row gap-8 mb-10\">\n <div class=\"text-center sm:text-left shrink-0\">\n <div class=\"text-5xl font-bold text-slate-900\">4.7</div>\n <div class=\"flex items-center justify-center sm:justify-start mt-1\" aria-hidden=\"true\">\n <svg class=\"w-5 h-5 star-filled\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5 star-filled\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5 star-filled\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5 star-filled\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5 star-filled\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n </div>\n <p class=\"text-sm text-slate-500 mt-1\">2,341 reviews</p>\n </div>\n <div class=\"flex-1 space-y-2\">\n <div class=\"flex items-center gap-3\">\n <span class=\"text-sm text-slate-600 w-8\">5 <span class=\"sr-only\">stars</span></span>\n <div class=\"flex-1 h-2.5 bg-slate-100 rounded-full overflow-hidden\"><div class=\"h-full bg-amber-400 rounded-full\" style=\"width: 68%\"></div></div>\n <span class=\"text-sm text-slate-500 w-10 text-right\">68%</span>\n </div>\n <div class=\"flex items-center gap-3\">\n <span class=\"text-sm text-slate-600 w-8\">4 <span class=\"sr-only\">stars</span></span>\n <div class=\"flex-1 h-2.5 bg-slate-100 rounded-full overflow-hidden\"><div class=\"h-full bg-amber-400 rounded-full\" style=\"width: 21%\"></div></div>\n <span class=\"text-sm text-slate-500 w-10 text-right\">21%</span>\n </div>\n <div class=\"flex items-center gap-3\">\n <span class=\"text-sm text-slate-600 w-8\">3 <span class=\"sr-only\">stars</span></span>\n <div class=\"flex-1 h-2.5 bg-slate-100 rounded-full overflow-hidden\"><div class=\"h-full bg-amber-400 rounded-full\" style=\"width: 7%\"></div></div>\n <span class=\"text-sm text-slate-500 w-10 text-right\">7%</span>\n </div>\n <div class=\"flex items-center gap-3\">\n <span class=\"text-sm text-slate-600 w-8\">2 <span class=\"sr-only\">stars</span></span>\n <div class=\"flex-1 h-2.5 bg-slate-100 rounded-full overflow-hidden\"><div class=\"h-full bg-amber-400 rounded-full\" style=\"width: 3%\"></div></div>\n <span class=\"text-sm text-slate-500 w-10 text-right\">3%</span>\n </div>\n <div class=\"flex items-center gap-3\">\n <span class=\"text-sm text-slate-600 w-8\">1 <span class=\"sr-only\">star</span></span>\n <div class=\"flex-1 h-2.5 bg-slate-100 rounded-full overflow-hidden\"><div class=\"h-full bg-amber-400 rounded-full\" style=\"width: 1%\"></div></div>\n <span class=\"text-sm text-slate-500 w-10 text-right\">1%</span>\n </div>\n </div>\n </div>\n\n <!-- Individual Reviews -->\n <div class=\"space-y-6\">\n <!-- Review 1 -->\n <article class=\"border-b border-slate-100 pb-6\">\n <div class=\"flex items-center justify-between mb-2\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-sm font-semibold text-blue-700\">M</div>\n <div>\n <span class=\"text-sm font-medium text-slate-800\">Markus T.</span>\n <span class=\"ml-2 inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-green-50 text-green-700\">Verified Purchase</span>\n </div>\n </div>\n <time class=\"text-xs text-slate-400\" datetime=\"2026-03-12\">March 12, 2026</time>\n </div>\n <div class=\"flex items-center mb-2\" aria-label=\"5 out of 5 stars\">\n <svg class=\"w-4 h-4 star-filled\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-4 h-4 star-filled\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-4 h-4 star-filled\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-4 h-4 star-filled\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-4 h-4 star-filled\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n </div>\n <h3 class=\"text-sm font-semibold text-slate-800 mb-1\">Best headphones I've ever owned</h3>\n <p class=\"text-sm text-slate-600 leading-relaxed\">The noise cancellation is on another level. I use these daily on my commute and in the office. Battery easily lasts the whole week with moderate use. Sound quality is exceptional — crisp highs and deep, controlled bass. Worth every cent.</p>\n </article>\n\n <!-- Review 2 -->\n <article class=\"border-b border-slate-100 pb-6\">\n <div class=\"flex items-center justify-between mb-2\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center text-sm font-semibold text-purple-700\">S</div>\n <div>\n <span class=\"text-sm font-medium text-slate-800\">Sarah K.</span>\n <span class=\"ml-2 inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-green-50 text-green-700\">Verified Purchase</span>\n </div>\n </div>\n <time class=\"text-xs text-slate-400\" datetime=\"2026-03-05\">March 5, 2026</time>\n </div>\n <div class=\"flex items-center mb-2\" aria-label=\"4 out of 5 stars\">\n <svg class=\"w-4 h-4 star-filled\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-4 h-4 star-filled\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-4 h-4 star-filled\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-4 h-4 star-filled\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-4 h-4 star-empty\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n </div>\n <h3 class=\"text-sm font-semibold text-slate-800 mb-1\">Great sound, slightly tight fit</h3>\n <p class=\"text-sm text-slate-600 leading-relaxed\">Sound quality and ANC are outstanding. The multipoint feature is a game-changer for switching between laptop and phone. Only minor complaint: they feel a bit snug at first, but they loosen up after a week of use. The carry case is a nice premium touch.</p>\n </article>\n\n <!-- Review 3 -->\n <article class=\"pb-6\">\n <div class=\"flex items-center justify-between mb-2\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-8 h-8 rounded-full bg-amber-100 flex items-center justify-center text-sm font-semibold text-amber-700\">J</div>\n <div>\n <span class=\"text-sm font-medium text-slate-800\">Jan P.</span>\n <span class=\"ml-2 inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-green-50 text-green-700\">Verified Purchase</span>\n </div>\n </div>\n <time class=\"text-xs text-slate-400\" datetime=\"2026-02-28\">February 28, 2026</time>\n </div>\n <div class=\"flex items-center mb-2\" aria-label=\"5 out of 5 stars\">\n <svg class=\"w-4 h-4 star-filled\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-4 h-4 star-filled\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-4 h-4 star-filled\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-4 h-4 star-filled\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-4 h-4 star-filled\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n </div>\n <h3 class=\"text-sm font-semibold text-slate-800 mb-1\">Replaced my expensive brand-name pair</h3>\n <p class=\"text-sm text-slate-600 leading-relaxed\">I was skeptical switching from a well-known premium brand, but these are genuinely better in every way. The ANC is more effective, the battery lasts significantly longer, and the app gives you great EQ customization. The fast charging is incredibly convenient — plug in during a coffee break and you're set for the rest of the day.</p>\n </article>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Related Products -->\n <section class=\"bg-slate-50 py-16\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <h2 class=\"text-xl font-bold text-slate-900 mb-8\">You might also like</h2>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6\">\n\n <!-- Related Product 1 -->\n <article class=\"bg-white rounded-xl border border-slate-200 overflow-hidden hover:shadow-md transition-shadow\">\n <div class=\"aspect-square bg-slate-100 flex items-center justify-center\">\n <svg class=\"w-10 h-10 text-slate-300\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z\"/><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z\"/></svg>\n </div>\n <div class=\"p-4\">\n <p class=\"text-xs text-slate-500\">AudioTech</p>\n <h3 class=\"text-sm font-medium text-slate-800 mt-0.5 line-clamp-2\">SoundPeak Lite Wireless Earbuds</h3>\n <div class=\"flex items-center gap-1 mt-1.5\">\n <svg class=\"w-3.5 h-3.5 star-filled\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <span class=\"text-xs text-slate-500\">4.5 (892)</span>\n </div>\n <p class=\"text-base font-bold text-slate-900 mt-2\">&euro;79.99</p>\n </div>\n </article>\n\n <!-- Related Product 2 -->\n <article class=\"bg-white rounded-xl border border-slate-200 overflow-hidden hover:shadow-md transition-shadow\">\n <div class=\"aspect-square bg-slate-100 flex items-center justify-center\">\n <svg class=\"w-10 h-10 text-slate-300\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z\"/><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z\"/></svg>\n </div>\n <div class=\"p-4\">\n <p class=\"text-xs text-slate-500\">AudioTech</p>\n <h3 class=\"text-sm font-medium text-slate-800 mt-0.5 line-clamp-2\">SoundPeak Travel Case Premium</h3>\n <div class=\"flex items-center gap-1 mt-1.5\">\n <svg class=\"w-3.5 h-3.5 star-filled\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <span class=\"text-xs text-slate-500\">4.8 (345)</span>\n </div>\n <p class=\"text-base font-bold text-slate-900 mt-2\">&euro;34.99</p>\n </div>\n </article>\n\n <!-- Related Product 3 -->\n <article class=\"bg-white rounded-xl border border-slate-200 overflow-hidden hover:shadow-md transition-shadow\">\n <div class=\"aspect-square bg-slate-100 flex items-center justify-center\">\n <svg class=\"w-10 h-10 text-slate-300\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z\"/><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z\"/></svg>\n </div>\n <div class=\"p-4\">\n <p class=\"text-xs text-slate-500\">AudioTech</p>\n <h3 class=\"text-sm font-medium text-slate-800 mt-0.5 line-clamp-2\">SoundPeak Pro Replacement Ear Cushions</h3>\n <div class=\"flex items-center gap-1 mt-1.5\">\n <svg class=\"w-3.5 h-3.5 star-filled\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <span class=\"text-xs text-slate-500\">4.3 (128)</span>\n </div>\n <p class=\"text-base font-bold text-slate-900 mt-2\">&euro;24.99</p>\n </div>\n </article>\n\n <!-- Related Product 4 -->\n <article class=\"bg-white rounded-xl border border-slate-200 overflow-hidden hover:shadow-md transition-shadow\">\n <div class=\"aspect-square bg-slate-100 flex items-center justify-center\">\n <svg class=\"w-10 h-10 text-slate-300\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z\"/><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z\"/></svg>\n </div>\n <div class=\"p-4\">\n <p class=\"text-xs text-slate-500\">SoundWave</p>\n <h3 class=\"text-sm font-medium text-slate-800 mt-0.5 line-clamp-2\">StudioMax Over-Ear Monitor Headphones</h3>\n <div class=\"flex items-center gap-1 mt-1.5\">\n <svg class=\"w-3.5 h-3.5 star-filled\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <span class=\"text-xs text-slate-500\">4.6 (1,204)</span>\n </div>\n <p class=\"text-base font-bold text-slate-900 mt-2\">&euro;149.99</p>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n <!-- Footer -->\n <footer class=\"bg-slate-900 text-slate-400 py-12\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"grid grid-cols-2 md:grid-cols-4 gap-8\">\n <div>\n <h3 class=\"text-sm font-semibold text-white mb-4\">Shop</h3>\n <ul class=\"space-y-2 text-sm\">\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Headphones</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Earbuds</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Speakers</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Accessories</a></li>\n </ul>\n </div>\n <div>\n <h3 class=\"text-sm font-semibold text-white mb-4\">Support</h3>\n <ul class=\"space-y-2 text-sm\">\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Help Center</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Shipping Info</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Returns</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Warranty</a></li>\n </ul>\n </div>\n <div>\n <h3 class=\"text-sm font-semibold text-white mb-4\">Company</h3>\n <ul class=\"space-y-2 text-sm\">\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">About Us</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Careers</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Press</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Blog</a></li>\n </ul>\n </div>\n <div>\n <h3 class=\"text-sm font-semibold text-white mb-4\">Legal</h3>\n <ul class=\"space-y-2 text-sm\">\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Privacy Policy</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Terms of Service</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Cookie Policy</a></li>\n <li><a href=\"#\" class=\"hover:text-white transition-colors\">Imprint</a></li>\n </ul>\n </div>\n </div>\n <div class=\"border-t border-slate-800 mt-10 pt-8 flex flex-col sm:flex-row items-center justify-between gap-4\">\n <p class=\"text-sm\">&copy; 2026 AudioTech. All rights reserved.</p>\n <div class=\"flex items-center gap-4\">\n <a href=\"#\" class=\"hover:text-white transition-colors\" aria-label=\"AudioTech on Twitter\">\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\"/></svg>\n </a>\n <a href=\"#\" class=\"hover:text-white transition-colors\" aria-label=\"AudioTech on Instagram\">\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z\" clip-rule=\"evenodd\"/></svg>\n </a>\n <a href=\"#\" class=\"hover:text-white transition-colors\" aria-label=\"AudioTech on YouTube\">\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z\" clip-rule=\"evenodd\"/></svg>\n </a>\n </div>\n </div>\n </div>\n </footer>\n\n <!-- JavaScript -->\n <script>\n // Tabs\n const tabBtns = document.querySelectorAll('.tab-btn');\n const tabPanels = document.querySelectorAll('[role=\"tabpanel\"]');\n\n tabBtns.forEach(btn => {\n btn.addEventListener('click', () => {\n tabBtns.forEach(b => {\n b.classList.remove('active');\n b.setAttribute('aria-selected', 'false');\n });\n tabPanels.forEach(p => p.classList.add('hidden'));\n\n btn.classList.add('active');\n btn.setAttribute('aria-selected', 'true');\n const target = document.getElementById(btn.getAttribute('aria-controls'));\n if (target) target.classList.remove('hidden');\n });\n });\n\n // Quantity selector\n const qtyValue = document.getElementById('qty-value');\n let qty = 1;\n\n document.getElementById('qty-minus').addEventListener('click', () => {\n if (qty > 1) {\n qty--;\n qtyValue.textContent = qty;\n }\n });\n\n document.getElementById('qty-plus').addEventListener('click', () => {\n if (qty < 10) {\n qty++;\n qtyValue.textContent = qty;\n }\n });\n\n // Thumbnail selection\n const thumbs = document.querySelectorAll('.thumb');\n const mainImageLabel = document.getElementById('main-image-label');\n\n thumbs.forEach(thumb => {\n thumb.addEventListener('click', () => {\n thumbs.forEach(t => {\n t.classList.remove('active');\n t.setAttribute('aria-pressed', 'false');\n });\n thumb.classList.add('active');\n thumb.setAttribute('aria-pressed', 'true');\n if (mainImageLabel) {\n mainImageLabel.textContent = thumb.dataset.view;\n }\n });\n });\n\n // Color selector\n const colorOpts = document.querySelectorAll('.color-opt');\n const colorLabel = document.getElementById('color-label');\n\n colorOpts.forEach(opt => {\n opt.addEventListener('click', () => {\n colorOpts.forEach(o => {\n o.classList.remove('active');\n o.setAttribute('aria-checked', 'false');\n });\n opt.classList.add('active');\n opt.setAttribute('aria-checked', 'true');\n if (colorLabel) {\n colorLabel.textContent = opt.dataset.color;\n }\n });\n });\n </script>\n\n</body>\n</html>"
25557
+ },
25558
+ {
25559
+ "id": "shop/single-product",
25560
+ "title": "Shop Single Product",
25561
+ "summary": "Premium single-product landing page with image gallery, variant selector, reviews, and related products section.",
25562
+ "description": "A conversion-focused product detail page for premium goods. Features large product image, price display, size and color selectors, customer reviews with star ratings, related product cards, and FAQ.",
25563
+ "category": "shop",
25564
+ "style": "elegant",
25565
+ "tags": [
25566
+ "shop",
25567
+ "ecommerce",
25568
+ "product",
25569
+ "single-product",
25570
+ "landing-page"
25571
+ ],
25572
+ "patterns": [
25573
+ "navbar/base",
25574
+ "faq/base",
25575
+ "footer/base",
25576
+ "cards/base",
25577
+ "testimonials/base"
25578
+ ],
25579
+ "sections": [
25580
+ "navbar",
25581
+ "product-hero",
25582
+ "features",
25583
+ "reviews",
25584
+ "related-products",
25585
+ "faq",
25586
+ "footer"
25587
+ ],
25588
+ "features": {
25589
+ "responsive": true,
25590
+ "darkMode": false,
25591
+ "animations": false,
25592
+ "formHandling": false
25593
+ },
25594
+ "files": {
25595
+ "html": "./single-product.html",
25596
+ "preview": "./single-product.png"
25597
+ },
25598
+ "install": {
25599
+ "copyPasteReady": true,
25600
+ "tailwindCdn": true,
25601
+ "vanillaJs": true,
25602
+ "notes": [
25603
+ "Replace product image placeholder with real images",
25604
+ "Replace Atelier Craft branding with your store",
25605
+ "Cart functionality requires backend integration"
25606
+ ]
25607
+ },
25608
+ "governance": {
25609
+ "status": "published",
25610
+ "quality": "flagship",
25611
+ "owner": "design-system",
25612
+ "updatedAt": "2026-03-20"
25613
+ },
25614
+ "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>The Voyager — Atelier Craft</title>\n <meta name=\"description\" content=\"The Voyager by Atelier Craft. Full-grain Italian leather, hand-stitched details, and timeless silhouette. Designed to age beautifully.\" />\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <style>\n html { scroll-behavior: smooth; }\n details[open] summary svg { transform: rotate(180deg); }\n .size-btn.active { background-color: #1e293b; color: #fff; }\n .color-swatch.active { ring-width: 2px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1e293b; }\n </style>\n</head>\n<body class=\"bg-white text-slate-800 antialiased\">\n\n <!-- Navbar -->\n <nav class=\"sticky top-0 z-50 bg-white/90 backdrop-blur-md border-b border-slate-100\" aria-label=\"Main navigation\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16\">\n <a href=\"#\" class=\"text-lg font-semibold tracking-tight text-slate-900\" aria-label=\"Atelier Craft home\">\n Atelier Craft\n </a>\n <div class=\"hidden md:flex items-center gap-8 text-sm font-medium text-slate-500\">\n <a href=\"#product\" class=\"hover:text-slate-900 transition-colors\">Shop</a>\n <a href=\"#features\" class=\"hover:text-slate-900 transition-colors\">Details</a>\n <a href=\"#reviews\" class=\"hover:text-slate-900 transition-colors\">Reviews</a>\n <a href=\"#faq\" class=\"hover:text-slate-900 transition-colors\">FAQ</a>\n </div>\n <div class=\"flex items-center gap-4\">\n <button aria-label=\"Shopping cart, 0 items\" class=\"relative p-2 rounded-lg hover:bg-slate-50 transition-colors\">\n <svg class=\"w-5 h-5 text-slate-600\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007z\"/></svg>\n </button>\n <button id=\"mobile-menu-btn\" class=\"md:hidden p-2 rounded-lg hover:bg-slate-50\" aria-label=\"Toggle menu\" aria-expanded=\"false\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\"/></svg>\n </button>\n </div>\n </div>\n <div id=\"mobile-menu\" class=\"hidden md:hidden border-t border-slate-100 bg-white px-4 pb-4 pt-2 space-y-1\">\n <a href=\"#product\" class=\"block py-2.5 text-sm font-medium text-slate-600 hover:text-slate-900\">Shop</a>\n <a href=\"#features\" class=\"block py-2.5 text-sm font-medium text-slate-600 hover:text-slate-900\">Details</a>\n <a href=\"#reviews\" class=\"block py-2.5 text-sm font-medium text-slate-600 hover:text-slate-900\">Reviews</a>\n <a href=\"#faq\" class=\"block py-2.5 text-sm font-medium text-slate-600 hover:text-slate-900\">FAQ</a>\n </div>\n </nav>\n\n <!-- Product Hero -->\n <section id=\"product\" class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-20\">\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16 items-start\">\n <!-- Product Image -->\n <div class=\"space-y-4\">\n <div class=\"aspect-[4/5] rounded-2xl bg-stone-200 flex items-center justify-center\">\n <span class=\"text-stone-400 text-lg font-medium tracking-wide\">Product Image</span>\n </div>\n <div class=\"grid grid-cols-3 gap-3\">\n <div class=\"aspect-square rounded-xl bg-stone-200 flex items-center justify-center cursor-pointer ring-2 ring-slate-900 ring-offset-2\">\n <span class=\"text-stone-400 text-xs\">Front</span>\n </div>\n <div class=\"aspect-square rounded-xl bg-stone-100 flex items-center justify-center cursor-pointer hover:ring-2 hover:ring-slate-300 hover:ring-offset-2 transition-shadow\">\n <span class=\"text-stone-400 text-xs\">Side</span>\n </div>\n <div class=\"aspect-square rounded-xl bg-stone-100 flex items-center justify-center cursor-pointer hover:ring-2 hover:ring-slate-300 hover:ring-offset-2 transition-shadow\">\n <span class=\"text-stone-400 text-xs\">Detail</span>\n </div>\n </div>\n </div>\n\n <!-- Product Details -->\n <div class=\"lg:sticky lg:top-24 space-y-6\">\n <div>\n <p class=\"text-sm font-medium text-amber-600 tracking-wide uppercase\">Atelier Craft</p>\n <h1 class=\"mt-2 text-3xl sm:text-4xl font-bold text-slate-900 tracking-tight\">The Voyager</h1>\n <p class=\"mt-3 text-2xl font-semibold text-slate-900\">$289</p>\n <p class=\"mt-1 text-sm text-slate-500\">Free shipping on orders over $150</p>\n </div>\n\n <p class=\"text-slate-600 leading-relaxed\">\n Full-grain Italian leather, hand-stitched by artisans in Florence. The Voyager is built to carry your essentials with quiet confidence — a bag designed not to impress, but to last. Vegetable-tanned hide develops a rich patina unique to you.\n </p>\n\n <!-- Color Selector -->\n <fieldset>\n <legend class=\"text-sm font-medium text-slate-900 mb-3\">Color &mdash; <span id=\"color-label\">Natural Tan</span></legend>\n <div class=\"flex items-center gap-3\" role=\"radiogroup\" aria-label=\"Select color\">\n <button type=\"button\" role=\"radio\" aria-checked=\"true\" aria-label=\"Natural Tan\" data-color=\"Natural Tan\" class=\"color-swatch active w-8 h-8 rounded-full bg-[#c4a882] cursor-pointer transition-shadow\"></button>\n <button type=\"button\" role=\"radio\" aria-checked=\"false\" aria-label=\"Black\" data-color=\"Black\" class=\"color-swatch w-8 h-8 rounded-full bg-slate-900 cursor-pointer transition-shadow\"></button>\n <button type=\"button\" role=\"radio\" aria-checked=\"false\" aria-label=\"Cognac\" data-color=\"Cognac\" class=\"color-swatch w-8 h-8 rounded-full bg-[#8b4513] cursor-pointer transition-shadow\"></button>\n </div>\n </fieldset>\n\n <!-- Size Selector -->\n <fieldset>\n <legend class=\"text-sm font-medium text-slate-900 mb-3\">Size</legend>\n <div class=\"flex items-center gap-2\" role=\"radiogroup\" aria-label=\"Select size\">\n <button type=\"button\" role=\"radio\" aria-checked=\"false\" data-size=\"S\" class=\"size-btn px-5 py-2.5 text-sm font-medium rounded-lg border border-slate-200 text-slate-700 hover:border-slate-400 transition-colors cursor-pointer\">S</button>\n <button type=\"button\" role=\"radio\" aria-checked=\"true\" data-size=\"M\" class=\"size-btn active px-5 py-2.5 text-sm font-medium rounded-lg border border-slate-200 text-slate-700 hover:border-slate-400 transition-colors cursor-pointer\">M</button>\n <button type=\"button\" role=\"radio\" aria-checked=\"false\" data-size=\"L\" class=\"size-btn px-5 py-2.5 text-sm font-medium rounded-lg border border-slate-200 text-slate-700 hover:border-slate-400 transition-colors cursor-pointer\">L</button>\n </div>\n </fieldset>\n\n <!-- Add to Cart -->\n <button type=\"button\" class=\"w-full py-3.5 px-6 text-base font-semibold rounded-xl bg-amber-600 text-white hover:bg-amber-700 active:bg-amber-800 transition-colors shadow-sm shadow-amber-600/20\">\n Add to Cart &mdash; $289\n </button>\n\n <!-- Trust Signals -->\n <div class=\"grid grid-cols-3 gap-4 pt-2\">\n <div class=\"text-center\">\n <svg class=\"w-5 h-5 mx-auto text-slate-400 mb-1\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0H6.375c-.621 0-1.125-.504-1.125-1.125V14.25m17.25 0V6.375c0-.621-.504-1.125-1.125-1.125H15M2.25 14.25h20.25M2.25 14.25V7.5a2.25 2.25 0 012.25-2.25h3\"/></svg>\n <p class=\"text-xs text-slate-500\">Free Shipping</p>\n </div>\n <div class=\"text-center\">\n <svg class=\"w-5 h-5 mx-auto text-slate-400 mb-1\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z\"/></svg>\n <p class=\"text-xs text-slate-500\">2-Year Warranty</p>\n </div>\n <div class=\"text-center\">\n <svg class=\"w-5 h-5 mx-auto text-slate-400 mb-1\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182\"/></svg>\n <p class=\"text-xs text-slate-500\">30-Day Returns</p>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Features -->\n <section id=\"features\" class=\"bg-stone-50 border-y border-stone-100\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24\">\n <h2 class=\"text-center text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight\">Crafted With Intention</h2>\n <p class=\"mt-3 text-center text-slate-500 max-w-xl mx-auto\">Every detail of The Voyager serves a purpose. No superfluous hardware, no trend-driven embellishments.</p>\n <div class=\"mt-14 grid grid-cols-1 md:grid-cols-3 gap-10 md:gap-12\">\n <div class=\"text-center\">\n <div class=\"w-12 h-12 mx-auto rounded-xl bg-amber-100 text-amber-700 flex items-center justify-center\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z\"/></svg>\n </div>\n <h3 class=\"mt-5 text-base font-semibold text-slate-900\">Full-Grain Italian Leather</h3>\n <p class=\"mt-2 text-sm text-slate-500 leading-relaxed\">Sourced from a family-run tannery in Tuscany. Vegetable-tanned for 30 days to develop its signature suppleness and rich aroma.</p>\n </div>\n <div class=\"text-center\">\n <div class=\"w-12 h-12 mx-auto rounded-xl bg-amber-100 text-amber-700 flex items-center justify-center\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M11.42 15.17l-5.1-5.1a1.5 1.5 0 010-2.12l.88-.88a1.5 1.5 0 012.12 0l2.1 2.1 5.1-5.1a1.5 1.5 0 012.12 0l.88.88a1.5 1.5 0 010 2.12l-7.98 7.98a1.5 1.5 0 01-2.12 0z\"/></svg>\n </div>\n <h3 class=\"mt-5 text-base font-semibold text-slate-900\">Hand-Stitched Saddle Seams</h3>\n <p class=\"mt-2 text-sm text-slate-500 leading-relaxed\">Double-needle saddle stitching with waxed linen thread. If one stitch breaks, the others hold — built to outlast machine-sewn alternatives.</p>\n </div>\n <div class=\"text-center\">\n <div class=\"w-12 h-12 mx-auto rounded-xl bg-amber-100 text-amber-700 flex items-center justify-center\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z\"/></svg>\n </div>\n <h3 class=\"mt-5 text-base font-semibold text-slate-900\">Ages Beautifully</h3>\n <p class=\"mt-2 text-sm text-slate-500 leading-relaxed\">No two Voyagers are alike after a year. The leather develops a unique patina from sunlight, oils, and use — a journal of where you've been.</p>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Reviews -->\n <section id=\"reviews\" class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24\">\n <div class=\"text-center\">\n <h2 class=\"text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight\">What Owners Say</h2>\n <div class=\"mt-3 flex items-center justify-center gap-2\">\n <div class=\"flex\" aria-label=\"4.9 out of 5 stars\">\n <svg class=\"w-5 h-5 text-amber-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5 text-amber-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5 text-amber-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5 text-amber-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-5 h-5 text-amber-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n </div>\n <span class=\"text-sm text-slate-500\">4.9 / 5 from 127 reviews</span>\n </div>\n </div>\n\n <div class=\"mt-12 grid grid-cols-1 md:grid-cols-3 gap-6\">\n <!-- Review 1 -->\n <article class=\"rounded-2xl border border-slate-100 bg-white p-6 shadow-sm\">\n <div class=\"flex items-center gap-1 mb-1\" aria-label=\"5 out of 5 stars\">\n <svg class=\"w-4 h-4 text-amber-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-4 h-4 text-amber-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-4 h-4 text-amber-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-4 h-4 text-amber-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-4 h-4 text-amber-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n </div>\n <h3 class=\"mt-3 text-sm font-semibold text-slate-900\">Worth every penny</h3>\n <p class=\"mt-2 text-sm text-slate-500 leading-relaxed\">Six months in and the patina is gorgeous. I've traveled through three countries with it and the leather just gets better. The craftsmanship is immediately obvious when you hold it.</p>\n <p class=\"mt-4 text-xs font-medium text-slate-400\">Marcus T. &mdash; Verified Buyer</p>\n </article>\n\n <!-- Review 2 -->\n <article class=\"rounded-2xl border border-slate-100 bg-white p-6 shadow-sm\">\n <div class=\"flex items-center gap-1 mb-1\" aria-label=\"5 out of 5 stars\">\n <svg class=\"w-4 h-4 text-amber-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-4 h-4 text-amber-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-4 h-4 text-amber-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-4 h-4 text-amber-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-4 h-4 text-amber-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n </div>\n <h3 class=\"mt-3 text-sm font-semibold text-slate-900\">Replaced my entire collection</h3>\n <p class=\"mt-2 text-sm text-slate-500 leading-relaxed\">I used to rotate between five cheaper bags. Now I only carry The Voyager. The cognac color deepens beautifully over time. My partner loved it so much I ordered a second in black.</p>\n <p class=\"mt-4 text-xs font-medium text-slate-400\">Elena R. &mdash; Verified Buyer</p>\n </article>\n\n <!-- Review 3 -->\n <article class=\"rounded-2xl border border-slate-100 bg-white p-6 shadow-sm\">\n <div class=\"flex items-center gap-1 mb-1\" aria-label=\"5 out of 5 stars\">\n <svg class=\"w-4 h-4 text-amber-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-4 h-4 text-amber-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-4 h-4 text-amber-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-4 h-4 text-amber-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n <svg class=\"w-4 h-4 text-amber-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"/></svg>\n </div>\n <h3 class=\"mt-3 text-sm font-semibold text-slate-900\">The smell alone is worth it</h3>\n <p class=\"mt-2 text-sm text-slate-500 leading-relaxed\">You know that real leather smell? This is it. The size M fits my 14\" laptop perfectly with room for notebooks and cables. Brass hardware is a nice touch — no cheap zippers.</p>\n <p class=\"mt-4 text-xs font-medium text-slate-400\">James K. &mdash; Verified Buyer</p>\n </article>\n </div>\n </section>\n\n <!-- Related Products -->\n <section class=\"bg-stone-50 border-y border-stone-100\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24\">\n <h2 class=\"text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight\">Complete the Collection</h2>\n <p class=\"mt-2 text-slate-500\">Pieces designed to pair with The Voyager.</p>\n <div class=\"mt-10 grid grid-cols-1 sm:grid-cols-3 gap-6\">\n <article class=\"group rounded-2xl bg-white border border-stone-100 overflow-hidden shadow-sm hover:shadow-md transition-shadow\">\n <div class=\"aspect-[4/3] bg-stone-200 flex items-center justify-center\">\n <span class=\"text-stone-400 text-sm\">Product Image</span>\n </div>\n <div class=\"p-5\">\n <h3 class=\"text-sm font-semibold text-slate-900 group-hover:text-amber-700 transition-colors\">The Passport Wallet</h3>\n <p class=\"mt-1 text-sm text-slate-500\">Slim bifold, 6 card slots</p>\n <p class=\"mt-2 text-base font-semibold text-slate-900\">$89</p>\n </div>\n </article>\n <article class=\"group rounded-2xl bg-white border border-stone-100 overflow-hidden shadow-sm hover:shadow-md transition-shadow\">\n <div class=\"aspect-[4/3] bg-stone-200 flex items-center justify-center\">\n <span class=\"text-stone-400 text-sm\">Product Image</span>\n </div>\n <div class=\"p-5\">\n <h3 class=\"text-sm font-semibold text-slate-900 group-hover:text-amber-700 transition-colors\">The Weekend Belt</h3>\n <p class=\"mt-1 text-sm text-slate-500\">32mm, solid brass buckle</p>\n <p class=\"mt-2 text-base font-semibold text-slate-900\">$125</p>\n </div>\n </article>\n <article class=\"group rounded-2xl bg-white border border-stone-100 overflow-hidden shadow-sm hover:shadow-md transition-shadow\">\n <div class=\"aspect-[4/3] bg-stone-200 flex items-center justify-center\">\n <span class=\"text-stone-400 text-sm\">Product Image</span>\n </div>\n <div class=\"p-5\">\n <h3 class=\"text-sm font-semibold text-slate-900 group-hover:text-amber-700 transition-colors\">Leather Care Kit</h3>\n <p class=\"mt-1 text-sm text-slate-500\">Conditioner, cloth, brush</p>\n <p class=\"mt-2 text-base font-semibold text-slate-900\">$45</p>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n <!-- FAQ -->\n <section id=\"faq\" class=\"max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24\">\n <h2 class=\"text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight text-center\">Frequently Asked Questions</h2>\n <div class=\"mt-10 space-y-3\">\n <details class=\"group rounded-xl border border-slate-100 bg-white\">\n <summary class=\"flex items-center justify-between px-6 py-4 cursor-pointer text-sm font-semibold text-slate-900 select-none\">\n What size should I choose?\n <svg class=\"w-4 h-4 text-slate-400 transition-transform duration-200\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\"/></svg>\n </summary>\n <div class=\"px-6 pb-4 text-sm text-slate-500 leading-relaxed\">\n <strong class=\"text-slate-700\">Small</strong> fits essentials (phone, wallet, keys, small notebook). <strong class=\"text-slate-700\">Medium</strong> fits a 14\" laptop plus daily carry. <strong class=\"text-slate-700\">Large</strong> is our weekender size for overnight trips. When in doubt, Medium is our most popular choice.\n </div>\n </details>\n <details class=\"group rounded-xl border border-slate-100 bg-white\">\n <summary class=\"flex items-center justify-between px-6 py-4 cursor-pointer text-sm font-semibold text-slate-900 select-none\">\n How do I care for the leather?\n <svg class=\"w-4 h-4 text-slate-400 transition-transform duration-200\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\"/></svg>\n </summary>\n <div class=\"px-6 pb-4 text-sm text-slate-500 leading-relaxed\">\n Wipe with a dry cloth after use. Apply leather conditioner every 3-6 months. Avoid prolonged exposure to direct sunlight or heavy rain. If it gets wet, let it air dry naturally — never use heat. The leather will develop character and patina over time; that's a feature, not a flaw.\n </div>\n </details>\n <details class=\"group rounded-xl border border-slate-100 bg-white\">\n <summary class=\"flex items-center justify-between px-6 py-4 cursor-pointer text-sm font-semibold text-slate-900 select-none\">\n What is your return policy?\n <svg class=\"w-4 h-4 text-slate-400 transition-transform duration-200\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\"/></svg>\n </summary>\n <div class=\"px-6 pb-4 text-sm text-slate-500 leading-relaxed\">\n 30-day no-questions-asked returns for unused items in original packaging. We cover return shipping within the US. For international orders, return shipping is the buyer's responsibility. Refunds are processed within 5 business days of receiving the return.\n </div>\n </details>\n <details class=\"group rounded-xl border border-slate-100 bg-white\">\n <summary class=\"flex items-center justify-between px-6 py-4 cursor-pointer text-sm font-semibold text-slate-900 select-none\">\n How long does shipping take?\n <svg class=\"w-4 h-4 text-slate-400 transition-transform duration-200\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\"/></svg>\n </summary>\n <div class=\"px-6 pb-4 text-sm text-slate-500 leading-relaxed\">\n US orders ship within 1-2 business days via USPS Priority (2-3 day delivery). International orders ship via DHL Express (5-7 business days). Free shipping on all orders over $150.\n </div>\n </details>\n <details class=\"group rounded-xl border border-slate-100 bg-white\">\n <summary class=\"flex items-center justify-between px-6 py-4 cursor-pointer text-sm font-semibold text-slate-900 select-none\">\n Is the leather ethically sourced?\n <svg class=\"w-4 h-4 text-slate-400 transition-transform duration-200\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path stroke-linecap=\"round\" d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\"/></svg>\n </summary>\n <div class=\"px-6 pb-4 text-sm text-slate-500 leading-relaxed\">\n Yes. Our leather is a byproduct of the Italian food industry — no animals are raised specifically for their hides. Our tannery partner uses vegetable-based tanning agents instead of chromium, and their wastewater treatment exceeds EU standards.\n </div>\n </details>\n </div>\n </section>\n\n <!-- Footer -->\n <footer class=\"border-t border-slate-100 bg-slate-50\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16\">\n <div class=\"grid grid-cols-2 md:grid-cols-4 gap-8\">\n <div class=\"col-span-2 md:col-span-1\">\n <p class=\"text-base font-semibold text-slate-900 tracking-tight\">Atelier Craft</p>\n <p class=\"mt-2 text-sm text-slate-500 leading-relaxed\">Leather goods designed to outlast trends. Made in Florence, shipped worldwide.</p>\n </div>\n <div>\n <h3 class=\"text-xs font-semibold text-slate-400 uppercase tracking-wider\">Shop</h3>\n <ul class=\"mt-3 space-y-2\">\n <li><a href=\"#\" class=\"text-sm text-slate-500 hover:text-slate-900 transition-colors\">All Products</a></li>\n <li><a href=\"#\" class=\"text-sm text-slate-500 hover:text-slate-900 transition-colors\">Gift Cards</a></li>\n <li><a href=\"#\" class=\"text-sm text-slate-500 hover:text-slate-900 transition-colors\">Care Products</a></li>\n </ul>\n </div>\n <div>\n <h3 class=\"text-xs font-semibold text-slate-400 uppercase tracking-wider\">Company</h3>\n <ul class=\"mt-3 space-y-2\">\n <li><a href=\"#\" class=\"text-sm text-slate-500 hover:text-slate-900 transition-colors\">Our Story</a></li>\n <li><a href=\"#\" class=\"text-sm text-slate-500 hover:text-slate-900 transition-colors\">Craftsmanship</a></li>\n <li><a href=\"#\" class=\"text-sm text-slate-500 hover:text-slate-900 transition-colors\">Sustainability</a></li>\n </ul>\n </div>\n <div>\n <h3 class=\"text-xs font-semibold text-slate-400 uppercase tracking-wider\">Support</h3>\n <ul class=\"mt-3 space-y-2\">\n <li><a href=\"#\" class=\"text-sm text-slate-500 hover:text-slate-900 transition-colors\">Contact</a></li>\n <li><a href=\"#\" class=\"text-sm text-slate-500 hover:text-slate-900 transition-colors\">Shipping & Returns</a></li>\n <li><a href=\"#\" class=\"text-sm text-slate-500 hover:text-slate-900 transition-colors\">Warranty</a></li>\n </ul>\n </div>\n </div>\n <div class=\"mt-10 pt-6 border-t border-slate-200 flex flex-col sm:flex-row items-center justify-between gap-4\">\n <p class=\"text-xs text-slate-400\">&copy; 2026 Atelier Craft. All rights reserved.</p>\n <div class=\"flex items-center gap-4\">\n <a href=\"#\" class=\"text-slate-400 hover:text-slate-600 transition-colors\" aria-label=\"Instagram\">\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z\" clip-rule=\"evenodd\"/></svg>\n </a>\n <a href=\"#\" class=\"text-slate-400 hover:text-slate-600 transition-colors\" aria-label=\"Pinterest\">\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 0C5.373 0 0 5.372 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 01.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z\"/></svg>\n </a>\n </div>\n </div>\n </div>\n </footer>\n\n <!-- Minimal JS for interactivity -->\n <script>\n // Mobile menu toggle\n const menuBtn = document.getElementById('mobile-menu-btn');\n const mobileMenu = document.getElementById('mobile-menu');\n menuBtn.addEventListener('click', () => {\n const isOpen = !mobileMenu.classList.contains('hidden');\n mobileMenu.classList.toggle('hidden');\n menuBtn.setAttribute('aria-expanded', String(!isOpen));\n });\n\n // Size selector\n document.querySelectorAll('.size-btn').forEach(btn => {\n btn.addEventListener('click', () => {\n document.querySelectorAll('.size-btn').forEach(b => {\n b.classList.remove('active');\n b.setAttribute('aria-checked', 'false');\n });\n btn.classList.add('active');\n btn.setAttribute('aria-checked', 'true');\n });\n });\n\n // Color selector\n document.querySelectorAll('.color-swatch').forEach(swatch => {\n swatch.addEventListener('click', () => {\n document.querySelectorAll('.color-swatch').forEach(s => {\n s.classList.remove('active');\n s.setAttribute('aria-checked', 'false');\n });\n swatch.classList.add('active');\n swatch.setAttribute('aria-checked', 'true');\n document.getElementById('color-label').textContent = swatch.dataset.color;\n });\n });\n </script>\n\n</body>\n</html>"
25615
+ }
24521
25616
  ]
24522
25617
  }