snowbase-templates-installer 1.0.1

package/landing-pages/open-engineer-template/src/components/sections/faq.tsx

@@ -0,0 +1,188 @@
+"use client";
+
+import React, { useState } from "react";
+import { Plus, Minus } from "lucide-react";
+
+interface FAQItem {
+  id: string;
+  question: string;
+  answer: string;
+}
+
+const productFaqs: FAQItem[] = [
+  {
+    id: "p1",
+    question: "1. What exactly is this ai agent?",
+    answer: "This is your personal AI productivity agent that automates repetitive tasks, efficiently manages workflows, and helps you stay organised across all your essential tools.",
+  },
+  {
+    id: "p2",
+    question: "2. Do I need to install any software?",
+    answer: "No installation required. Open Engineer is a cloud-based platform that works directly in your browser. You can access it from any device with an internet connection.",
+  },
+  {
+    id: "p3",
+    question: "3. How does this tool keep my data secure?",
+    answer: "We use industry-standard encryption protocols (AES-256) and secure API integrations. Your data is never used to train global models without your explicit consent.",
+  },
+  {
+    id: "p4",
+    question: "4. What kind of tasks can agent automate?",
+    answer: "From lead qualification and meeting preparation to routine data entry and complex cross-app synchronisations, the agent handles any logic-based workflow.",
+  },
+  {
+    id: "p5",
+    question: "5. Can I use this tool for my team?",
+    answer: "Yes, Open Engineer is built for collaboration. You can invite team members, share automated workflows, and maintain a centralized dashboard for operations.",
+  },
+];
+
+const billingFaqs: FAQItem[] = [
+  {
+    id: "b1",
+    question: "1. Can I switch plans anytime?",
+    answer: "Yes, you can upgrade or downgrade your plan at any time from your account settings. Changes are applied immediately and prorated accordingly.",
+  },
+  {
+    id: "b2",
+    question: "2. Do you offer a free trial?",
+    answer: "Absolutely. We offer a 14-day free trial on our Pro plan so you can experience the full power of the AI agent before committing.",
+  },
+  {
+    id: "b3",
+    question: "3. What happens if I exceed my task limit?",
+    answer: "Once you reach your monthly limit, your automations will pause until your next billing cycle. You can upgrade anytime for more capacity. We send notifications at 80% and 95% usage to help you plan ahead.",
+  },
+  {
+    id: "b4",
+    question: "4. Can multiple team members use one account?",
+    answer: "Our Pro and Enterprise plans support multi-user collaboration. Each team member will have their own credentials linked to the organization's workspace.",
+  },
+  {
+    id: "b5",
+    question: "5. How secure is my data?",
+    answer: "Your security is our priority. We are SOC2 compliant and undergo regular third-party security audits to ensure your business data remains protected.",
+  },
+];
+
+export default function FAQSection() {
+  const [openItems, setOpenItems] = useState<Record<string, boolean>>({
+    p1: true,
+    b3: true,
+  });
+
+  const toggleItem = (id: string) => {
+    setOpenItems((prev) => ({
+      ...prev,
+      [id]: !prev[id],
+    }));
+  };
+
+  return (
+    <section id="faq" className="w-full bg-background">
+      {/* Header Divider */}
+      <div className="border-y px-4 sm:px-6 lg:px-8">
+        <div className="mx-auto flex max-w-7xl flex-col items-center border-x px-4 py-8 text-center sm:px-6 lg:px-8 lg:py-12">
+          <span className="text-sm font-semibold tracking-wider text-muted-foreground uppercase mb-4">
+            FAQ
+          </span>
+          <p className="text-muted-foreground text-sm">
+            Essential answers about using and integrating the AI agent.
+          </p>
+        </div>
+      </div>
+
+      {/* Main Content Area */}
+      <div className="border-b px-4 sm:px-6 lg:px-8">
+        <div className="mx-auto flex max-w-7xl flex-col border-x bg-white/30 backdrop-blur-sm">
+          {/* Section Hero */}
+          <div className="flex flex-col items-center gap-6 px-4 py-12 pt-16 text-center sm:px-6 lg:px-8">
+            <h2 className="text-3xl font-semibold tracking-tight text-foreground sm:text-4xl">
+              Need Help? We&apos;ve Got Answers
+            </h2>
+            <p className="max-w-2xl text-lg text-muted-foreground">
+              Explore Our Most Commonly Asked Questions and Find the Information You Need.
+            </p>
+            <div className="flex items-center gap-3">
+              <a
+                href="/docs"
+                className="btn-3d-primary inline-flex h-10 items-center justify-center rounded-md bg-primary px-8 text-sm font-medium text-primary-foreground shadow-[inset_0_2px_3px_0_rgba(255,255,255,0.35),inset_2px_-4px_4px_0_rgba(0,0,0,0.15)] transition-all hover:opacity-90 active:scale-95"
+              >
+                Docs
+              </a>
+              <a
+                href="/contact"
+                className="btn-3d-secondary inline-flex h-10 items-center justify-center rounded-md bg-secondary px-8 text-sm font-medium text-secondary-foreground shadow-[inset_0_2px_3px_0_rgba(255,255,255,0.45),inset_2px_-4px_4px_0_rgba(0,0,0,0.1)] transition-all hover:opacity-90 active:scale-95"
+              >
+                Contact Us
+              </a>
+            </div>
+          </div>
+
+          {/* FAQ Accordion Grid */}
+          <div className="grid grid-cols-1 gap-x-12 px-4 pb-24 sm:px-6 lg:grid-cols-2 lg:px-12">
+            {/* Left Column - Product */}
+            <div className="flex flex-col">
+              {productFaqs.map((faq) => (
+                <div key={faq.id} className="border-b border-border last:border-0">
+                  <button
+                    onClick={() => toggleItem(faq.id)}
+                    className="flex w-full items-center justify-between py-6 text-left transition-all hover:text-primary"
+                  >
+                    <span className="text-base font-medium text-foreground">
+                      {faq.question}
+                    </span>
+                    {openItems[faq.id] ? (
+                      <Minus className="size-4 shrink-0 text-muted-foreground" />
+                    ) : (
+                      <Plus className="size-4 shrink-0 text-muted-foreground" />
+                    )}
+                  </button>
+                  <div
+                    className={`overflow-hidden transition-all duration-300 ease-in-out ${
+                      openItems[faq.id] ? "max-h-96 opacity-100 pb-6" : "max-h-0 opacity-0"
+                    }`}
+                  >
+                    <p className="text-sm leading-relaxed text-muted-foreground">
+                      {faq.answer}
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {/* Right Column - Billing */}
+            <div className="flex flex-col max-lg:mt-6">
+              {billingFaqs.map((faq) => (
+                <div key={faq.id} className="border-b border-border last:border-0">
+                  <button
+                    onClick={() => toggleItem(faq.id)}
+                    className="flex w-full items-center justify-between py-6 text-left transition-all hover:text-primary"
+                  >
+                    <span className="text-base font-medium text-foreground">
+                      {faq.question}
+                    </span>
+                    {openItems[faq.id] ? (
+                      <Minus className="size-4 shrink-0 text-muted-foreground" />
+                    ) : (
+                      <Plus className="size-4 shrink-0 text-muted-foreground" />
+                    )}
+                  </button>
+                  <div
+                    className={`overflow-hidden transition-all duration-300 ease-in-out ${
+                      openItems[faq.id] ? "max-h-96 opacity-100 pb-6" : "max-h-0 opacity-0"
+                    }`}
+                  >
+                    <p className="text-sm leading-relaxed text-muted-foreground">
+                      {faq.answer}
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/landing-pages/open-engineer-template/src/components/sections/features-grid.tsx

@@ -0,0 +1,193 @@
+import React from 'react';
+import Image from 'next/image';
+
+const FeaturesGrid = () => {
+  return (
+    <section id="features" className="relative border-b bg-background">
+      {/* Header Area */}
+      <div className="border-b px-4 sm:px-6 lg:px-8">
+        <div className="mx-auto flex max-w-7xl flex-col items-center gap-4 border-x px-4 py-12 sm:px-6 lg:px-8 lg:py-16 text-center">
+          <span className="text-primary text-sm font-semibold tracking-wider uppercase">
+            FEATURES
+          </span>
+          <h2 className="max-w-3xl text-3xl font-semibold sm:text-4xl lg:text-4xl">
+            Boost your efficiency with an AI agent that eliminates manual work and streamlines your operations.
+          </h2>
+        </div>
+      </div>
+
+      {/* Bento Grid */}
+      <div className="border-b px-4 sm:px-6 lg:px-8">
+        <div className="mx-auto max-w-7xl border-x">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+            
+              {/* Secure & Transparent */}
+              <div className="flex flex-col border-b md:border-r p-8 lg:p-10">
+                <div className="relative mb-8 flex h-48 w-full items-center justify-center overflow-hidden rounded-xl bg-muted/30">
+                  <div className="absolute inset-0 flex items-center justify-center opacity-10">
+                    <div className="grid grid-cols-4 gap-4 text-[10px] font-mono leading-none">
+                      {Array.from({ length: 40 }).map((_, i) => (
+                        <div key={i}>AI_SECURE_PROTO_{i}</div>
+                      ))}
+                    </div>
+                  </div>
+                  <div className="relative z-10 flex h-24 w-20 items-center justify-center">
+                    <div className="absolute inset-0 bg-foreground/20 blur-xl rounded-full"></div>
+                    <svg
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      className="h-16 w-16 text-foreground drop-shadow-[0_0_15px_rgba(0,0,0,0.3)]"
+                      stroke="currentColor"
+                      strokeWidth="1.5"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10" />
+                      <path d="m9 12 2 2 4-4" />
+                    </svg>
+                  </div>
+                </div>
+              <div className="space-y-4">
+                <h3 className="text-xl font-semibold">Secure & Transparent</h3>
+                <p className="text-muted-foreground text-sm leading-relaxed">
+                  Ensures that all workflows are secure with encryption and gives you full transparency into the tasks your AI performs.
+                </p>
+              </div>
+            </div>
+
+              {/* Smart Workflow Automation */}
+              <div className="flex flex-col border-b lg:border-r p-8 lg:p-10">
+                <div className="mb-8 flex h-48 w-full items-center justify-center rounded-xl bg-zinc-50">
+                  <div className="flex flex-col gap-2 w-full max-w-[240px]">
+                    <div className="flex items-center gap-2 rounded-lg border bg-white p-2 text-xs shadow-sm">
+                      <span className="text-muted-foreground">Searching the web...</span>
+                    </div>
+                    <div className="ml-4 flex flex-col gap-1 rounded-lg border bg-muted/40 p-3 text-[11px] leading-tight">
+                      <div className="flex items-center gap-2 opacity-50"><div className="h-1 w-1 rounded-full bg-foreground" /> Initializing web search...</div>
+                      <div className="flex items-center gap-2"><div className="h-1 w-1 rounded-full bg-foreground" /> 2. Scanning web pages...</div>
+                      <div className="flex items-center gap-2"><div className="h-1 w-1 rounded-full bg-foreground" /> 3. Visiting 5 websites...</div>
+                      <div className="flex items-center gap-2"><div className="h-1 w-1 rounded-full bg-foreground" /> 4. Analyzing content...</div>
+                      <div className="flex items-center gap-2"><div className="h-1 w-1 rounded-full bg-foreground" /> 5. Generating summary...</div>
+                    </div>
+                  </div>
+                </div>
+              <div className="space-y-4">
+                <h3 className="text-xl font-semibold">Smart Workflow Automation</h3>
+                <p className="text-muted-foreground text-sm leading-relaxed">
+                  Automates repetitive tasks seamlessly across multiple apps, saving you valuable time and effort every single day.
+                </p>
+              </div>
+            </div>
+
+              {/* Cross-Platform Synchronisation */}
+              <div className="flex flex-col border-b md:border-r lg:border-r-0 p-8 lg:p-10">
+                <div className="relative mb-8 flex h-48 w-full items-center justify-center rounded-xl bg-muted/30">
+                  <div className="relative">
+                    {/* Central Node */}
+                    <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-foreground text-white shadow-lg ring-4 ring-background">
+                      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L4.5 20.29l.71.71L12 18l6.79 3 .71-.71z" /></svg>
+                    </div>
+                  {/* Surrounding Nodes */}
+                  <div className="absolute -top-10 -left-10 flex h-8 w-8 items-center justify-center rounded-full bg-white border shadow-sm">
+                    <svg className="size-4 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 4h16v16H4z"/></svg>
+                  </div>
+                  <div className="absolute -top-12 right-0 flex h-8 w-8 items-center justify-center rounded-full bg-white border shadow-sm">
+                     <svg className="size-4 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/></svg>
+                  </div>
+                  <div className="absolute -right-12 top-2 flex h-8 w-8 items-center justify-center rounded-full bg-white border shadow-sm">
+                    <svg className="size-4 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
+                  </div>
+                  {/* Connector Lines (placeholder styling) */}
+                  <div className="absolute h-px w-12 bg-border -left-8 top-1/2 -rotate-[30deg] -z-10"></div>
+                  <div className="absolute h-px w-12 bg-border -right-10 top-2 rotate-[15deg] -z-10"></div>
+                </div>
+              </div>
+              <div className="space-y-4">
+                <h3 className="text-xl font-semibold">Cross-Platform Synchronisation</h3>
+                <p className="text-muted-foreground text-sm leading-relaxed">
+                  Keeps your tools and apps perfectly synced, ensuring consistency and reliability across your entire workflow.
+                </p>
+              </div>
+            </div>
+
+              {/* Multi-AI Integration */}
+              <div className="flex flex-col border-b md:border-r lg:col-span-2 p-8 lg:p-10">
+                <div className="relative mb-8 flex h-56 w-full items-center justify-center overflow-hidden rounded-xl bg-zinc-50">
+                  <div className="relative w-full max-w-md p-6 bg-white border rounded-2xl shadow-xl flex flex-col gap-4">
+                    <div className="flex items-center gap-3">
+                         <div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center">
+                            <span className="text-[10px] font-bold">GPT</span>
+                         </div>
+                         <div className="flex-1 h-3 bg-muted/60 rounded-full max-w-[120px]" />
+                    </div>
+                    <div className="space-y-3">
+                        <div className="h-4 bg-muted/40 rounded w-full" />
+                        <div className="h-4 bg-muted/40 rounded w-[90%]" />
+                    </div>
+                    {/* Floating integration icons */}
+                    <div className="absolute -top-4 -left-4 flex h-10 w-10 items-center justify-center rounded-full border bg-white shadow-md">
+                        <Image src="https://slelguoygbfzlpylpxfs.supabase.co/storage/v1/object/public/test-clones/73098f9c-15b9-43d6-98e6-96ab2eba390e-shadcn-nextjs-orion-landing-page-vercel-app/assets/images/15-19.webp" alt="tool" width={24} height={24} className="rounded-full" />
+                    </div>
+                    <div className="absolute -bottom-4 -right-4 flex h-10 w-10 items-center justify-center rounded-full border bg-white shadow-md">
+                        <Image src="https://slelguoygbfzlpylpxfs.supabase.co/storage/v1/object/public/test-clones/73098f9c-15b9-43d6-98e6-96ab2eba390e-shadcn-nextjs-orion-landing-page-vercel-app/assets/images/18-22.webp" alt="tool" width={24} height={24} className="rounded-full" />
+                    </div>
+                    <div className="absolute top-1/2 -right-8 flex h-10 w-10 items-center justify-center rounded-full border bg-white shadow-md">
+                        <Image src="https://slelguoygbfzlpylpxfs.supabase.co/storage/v1/object/public/test-clones/73098f9c-15b9-43d6-98e6-96ab2eba390e-shadcn-nextjs-orion-landing-page-vercel-app/assets/images/16-20.webp" alt="tool" width={24} height={24} className="rounded-full" />
+                    </div>
+                </div>
+              </div>
+              <div className="space-y-4">
+                <h3 className="text-xl font-semibold">Multi-AI Integration</h3>
+                <p className="text-muted-foreground text-sm leading-relaxed max-w-2xl">
+                  Seamlessly integrates with over 100 popular tools and apps, significantly enhancing your workflow and productivity effortlessly every day.
+                </p>
+              </div>
+            </div>
+
+              {/* Real-Time Notifications */}
+              <div className="flex flex-col border-b md:border-r-0 p-8 lg:p-10">
+                <div className="mb-8 flex h-56 w-full flex-col gap-2 rounded-xl bg-zinc-50 p-6 overflow-hidden">
+                  <div className="flex items-center gap-3 rounded-lg border bg-white p-3 shadow-sm scale-95 origin-left">
+                    <div className="bg-foreground/10 p-1.5 rounded-md">
+                      <svg className="size-4 text-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/><circle cx="9" cy="9" r="2"/><path d="M5 21l8-8"/><path d="M21 21L12 12"/></svg>
+                    </div>
+                    <div className="flex-1 space-y-1">
+                      <div className="h-2 w-32 bg-foreground/10 rounded" />
+                      <div className="h-1.5 w-48 bg-foreground/5 rounded" />
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-3 rounded-lg border bg-white p-3 shadow-sm scale-110 translate-x-4">
+                    <div className="bg-zinc-200 p-1.5 rounded-md">
+                      <svg className="size-4 text-zinc-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/></svg>
+                    </div>
+                     <div className="flex-1 space-y-1">
+                      <div className="h-2 w-24 bg-foreground/10 rounded" />
+                      <div className="h-1.5 w-40 bg-foreground/5 rounded" />
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-3 rounded-lg border bg-white p-3 shadow-sm scale-90 translate-x-2">
+                    <div className="bg-zinc-300 p-1.5 rounded-md">
+                       <svg className="size-4 text-zinc-700" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2v20"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
+                    </div>
+                    <div className="flex-1 space-y-1">
+                      <div className="h-2 w-28 bg-foreground/10 rounded" />
+                      <div className="h-1.5 w-36 bg-foreground/5 rounded" />
+                    </div>
+                  </div>
+                </div>
+              <div className="space-y-4">
+                <h3 className="text-xl font-semibold">Real-Time Notifications</h3>
+                <p className="text-muted-foreground text-sm leading-relaxed">
+                  Get instant updates on the status of your workflows, tasks, and deadlines.
+                </p>
+              </div>
+            </div>
+
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default FeaturesGrid;

package/landing-pages/open-engineer-template/src/components/sections/footer.tsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import Link from 'next/link';
+import { Mail } from 'lucide-react';
+
+const Footer = () => {
+  const currentYear = 2026; // Matching the design year
+
+  const footerLinks = [
+    {
+      title: 'Pages',
+      links: [
+        { label: 'Features', href: '#features' },
+        { label: 'Use cases', href: '#use-cases' },
+        { label: 'Testimonials', href: '#testimonials' },
+        { label: 'Pricing', href: '#pricing' },
+      ],
+    },
+    {
+      title: 'Company',
+      links: [
+        { label: 'About Us', href: '/about' },
+        { label: 'Careers', href: '/careers' },
+        { label: 'News', href: '/news' },
+        { label: 'Media kit', href: '/media' },
+        { label: 'Contact', href: '/contact' },
+      ],
+    },
+    {
+      title: 'Resources',
+      links: [
+        { label: 'Blog', href: '/blog' },
+        { label: 'Help Center', href: '/help' },
+        { label: 'Tutorials', href: '/tutorials' },
+        { label: 'Api Docs', href: '/api' },
+        { label: 'Community', href: '/community' },
+        { label: 'Support', href: '/support' },
+      ],
+    },
+    {
+      title: 'Social',
+      links: [
+        { label: 'X', href: 'https://x.com' },
+        { label: 'LinkedIn', href: 'https://linkedin.com' },
+        { label: 'Facebook', href: 'https://facebook.com' },
+        { label: 'Github', href: 'https://github.com' },
+        { label: 'Product Hunt', href: 'https://producthunt.com' },
+      ],
+    },
+    {
+      title: 'Legal',
+      links: [
+        { label: 'Terms of Service', href: '/terms' },
+        { label: 'Privacy Policy', href: '/privacy' },
+        { label: 'Cookie Policy', href: '/cookies' },
+        { label: 'Licenses', href: '/licenses' },
+        { label: 'Security', href: '/security' },
+        { label: 'Accessibility', href: '/accessibility' },
+      ],
+    },
+  ];
+
+  return (
+    <footer className="w-full bg-background mt-auto">
+      {/* Newsletter and Links Section */}
+      <div className="border-t px-4 sm:px-6 lg:px-8">
+        <div className="mx-auto max-w-7xl border-x px-4 py-16 sm:px-6 lg:px-12">
+            {/* Newsletter Section */}
+            <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-12 mb-20">
+              <div className="max-w-xl">
+                <h2 className="text-2xl font-semibold mb-4 text-foreground">Subscribe to our newsletter</h2>
+                <p className="text-muted-foreground text-base leading-relaxed">
+                  Stay in the loop with the latest updates on AI productivity, automation tips, and new features. One email a week no spam, just smart insights.
+                </p>
+              </div>
+              <div className="flex w-full max-w-md items-center gap-2">
+                <div className="relative flex-1">
+                  <input
+                    type="email"
+                    placeholder="Your Email"
+                    className="h-11 w-full rounded-md border border-border bg-white px-4 text-sm outline-none transition-all focus:border-foreground focus:ring-1 focus:ring-foreground"
+                  />
+                </div>
+                <button
+                  type="submit"
+                  className="h-11 px-6 rounded-md bg-foreground text-white text-sm font-medium shadow-[inset_0_2px_3px_0_rgba(255,255,255,0.15),inset_2px_-4px_4px_0_rgba(0,0,0,0.15)] hover:opacity-90 transition-all active:scale-95"
+                >
+                  Subscribe
+                </button>
+              </div>
+            </div>
+
+          {/* Site Links Grid */}
+          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-y-12 gap-x-8">
+            {footerLinks.map((section) => (
+              <div key={section.title} className="flex flex-col gap-4">
+                <h3 className="text-sm font-semibold text-foreground tracking-wide uppercase">
+                  {section.title}
+                </h3>
+                <ul className="flex flex-col gap-3">
+                  {section.links.map((link) => (
+                    <li key={link.label}>
+                      <a
+                        href={link.href}
+                        className="text-muted-foreground text-sm hover:text-foreground transition-colors duration-200"
+                      >
+                        {link.label}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+        {/* Copyright Bar */}
+        <div className="border-t px-4 sm:px-6 lg:px-8">
+          <div className="mx-auto max-w-7xl border-x px-4 h-24 flex items-center justify-between sm:px-6 lg:px-12">
+            <div className="flex items-center gap-2.5">
+              <div className="bg-foreground p-1.5 rounded-lg flex items-center justify-center shadow-lg">
+                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="text-white">
+                      <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" fill="currentColor"/>
+                  </svg>
+              </div>
+              <span className="text-xl font-semibold text-foreground">Open Engineer</span>
+            </div>
+            <p className="text-muted-foreground text-sm font-normal">
+              &copy;{currentYear} Open Engineer. Made with passion and creativity.
+            </p>
+          </div>
+        </div>
+    </footer>
+  );
+};
+
+export default Footer;

package/landing-pages/open-engineer-template/src/components/sections/header.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import Link from 'next/link';
+import { ChevronDown, MoonStar, Sun, Menu } from 'lucide-react';
+
+const Header = () => {
+  return (
+    <header className="sticky top-0 z-50 h-16 w-full border-b px-4 transition-all duration-300 sm:px-6 lg:px-8 bg-card/75 shadow-xl backdrop-blur">
+      <div className="mx-auto flex h-full max-w-7xl items-center justify-between gap-4 border-x border-border px-4 sm:px-6 lg:px-8">
+          {/* Logo Section */}
+          <a href="#home" className="flex items-center gap-3">
+            <div className="flex items-center gap-2">
+              <svg 
+                width="32" 
+                height="32" 
+                viewBox="0 0 32 32" 
+                fill="none" 
+                xmlns="http://www.w3.org/2000/svg"
+                className="size-8"
+              >
+                <rect width="32" height="32" rx="8" fill="#18181B" />
+                <path 
+                  d="M16 8L18.5 13.5L24 16L18.5 18.5L16 24L13.5 18.5L8 16L13.5 13.5L16 8Z" 
+                  fill="white" 
+                />
+              </svg>
+              <span className="text-xl font-semibold text-foreground tracking-tight">Open Engineer</span>
+            </div>
+          </a>
+
+        {/* Desktop Navigation */}
+        <nav className="hidden lg:block">
+          <ul className="flex items-center gap-2">
+            <li>
+              <a 
+                href="#features" 
+                className="inline-flex h-9 items-center justify-center rounded-md px-3 text-base font-medium text-muted-foreground transition-colors hover:text-primary focus:text-primary"
+              >
+                Features
+              </a>
+            </li>
+            <li>
+              <button 
+                className="group inline-flex h-9 items-center justify-center rounded-md px-3 text-base font-medium text-muted-foreground transition-colors hover:text-primary focus:text-primary"
+              >
+                Use cases
+                <ChevronDown className="ml-1 size-3 transition-transform duration-300 group-hover:rotate-180" />
+              </button>
+            </li>
+            <li>
+              <a 
+                href="#testimonials" 
+                className="inline-flex h-9 items-center justify-center rounded-md px-3 text-base font-medium text-muted-foreground transition-colors hover:text-primary focus:text-primary"
+              >
+                Testimonials
+              </a>
+            </li>
+            <li>
+              <a 
+                href="#pricing" 
+                className="inline-flex h-9 items-center justify-center rounded-md px-3 text-base font-medium text-muted-foreground transition-colors hover:text-primary focus:text-primary"
+              >
+                Pricing
+              </a>
+            </li>
+          </ul>
+        </nav>
+
+        {/* Action Buttons */}
+        <div className="flex items-center gap-3">
+          {/* Theme Toggle Button */}
+          <button 
+            className="relative inline-flex size-9 items-center justify-center rounded-md border border-border bg-background text-sm font-medium shadow-sm transition-all hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            aria-label="Toggle theme"
+          >
+            <MoonStar className="size-4 scale-100 dark:scale-0 transition-transform" />
+            <Sun className="absolute size-4 scale-0 dark:scale-100 transition-transform" />
+            <span className="sr-only">Toggle theme</span>
+          </button>
+
+            {/* Sign Up Button with 3D shadow effect */}
+            <a 
+              href="/register" 
+              className="inline-flex h-10 items-center justify-center rounded-md px-6 text-base font-medium text-primary-foreground bg-primary transition-all duration-300 hover:bg-primary/90 
+              shadow-[inset_0_2px_3px_0_rgba(255,255,255,0.15),inset_2px_-4px_4px_0_rgba(0,0,0,0.25),inset_-2px_4px_4px_0_rgba(255,255,255,0.15)] 
+              hover:shadow-[inset_0_0_0_0_var(--color-primary),inset_1px_-1.5px_2px_0_rgba(0,0,0,0.25),inset_-1px_1.5px_2px_0_rgba(255,255,255,0.15)]"
+            >
+              Sign up
+            </a>
+
+            {/* Mobile Menu Trigger */}
+            <button 
+              className="inline-flex lg:hidden size-10 items-center justify-center rounded-md bg-primary text-primary-foreground transition-all duration-300 hover:bg-primary/90
+              shadow-[inset_0_2px_3px_0_rgba(255,255,255,0.15),inset_2px_-4px_4px_0_rgba(0,0,0,0.25),inset_-2px_4px_4px_0_rgba(255,255,255,0.15)]
+              hover:shadow-[inset_0_0_0_0_var(--color-primary),inset_1px_-1.5px_2px_0_rgba(0,0,0,0.25),inset_-1px_1.5px_2px_0_rgba(255,255,255,0.15)]"
+              aria-label="Menu"
+            >
+              <Menu className="size-5" />
+            </button>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default Header;