snowbase-templates-installer 1.0.1

package/landing-pages/ai-saas-template/src/components/sections/features-grid.tsx

@@ -0,0 +1,205 @@
+"use client";
+
+import React from "react";
+import Image from "next/image";
+import { Plus, Send, CheckCircle2, Cloud, HardDrive, Cpu, Terminal } from "lucide-react";
+
+const FeaturesGrid = () => {
+  return (
+    <section className="bg-white py-24 px-4 overflow-hidden">
+      <div className="max-w-7xl mx-auto">
+        {/* Header Section */}
+        <div className="text-center mb-16 space-y-4">
+          <h2 className="text-[48px] font-semibold tracking-tight text-black leading-tight max-w-2xl mx-auto">
+            Packed with thousands of features
+          </h2>
+          <p className="text-[18px] text-muted-foreground max-w-2xl mx-auto">
+            From Image generation to video generation, Everything AI has APIs for literally everything. It can even create this website copy for you.
+          </p>
+        </div>
+
+        {/* Bento Grid Top Row */}
+        <div className="grid grid-cols-1 md:grid-cols-12 gap-0 border-t border-l border-dashed border-gray-200">
+          
+          {/* Feature 1: Generate images with text */}
+          <div className="md:col-span-7 border-r border-b border-dashed border-gray-200 p-8 lg:p-12 relative h-[600px] overflow-hidden">
+            <div className="relative z-10 mb-8">
+              <h3 className="text-2xl font-semibold mb-3 text-black">Generate images with text</h3>
+              <p className="text-muted-foreground text-sm max-w-md">
+                Generate images from a text prompt, a video, or a video segment in bulk at the speed of light.
+              </p>
+            </div>
+            
+            {/* Image generation UI mockup */}
+            <div className="relative mt-12">
+              <div className="absolute top-0 left-0 w-full h-full bg-white/50 backdrop-blur-[1px] z-0 rounded-xl border border-gray-100 shadow-sm p-6">
+                <div className="space-y-4 opacity-40">
+                  <div className="flex gap-3">
+                    <div className="w-8 h-8 rounded-full bg-blue-100" />
+                    <div className="h-4 w-48 bg-gray-100 rounded" />
+                  </div>
+                  <div className="flex gap-3">
+                    <div className="w-8 h-8 rounded-full bg-purple-100" />
+                    <div className="h-4 w-60 bg-gray-100 rounded" />
+                  </div>
+                </div>
+              </div>
+
+              {/* Overlapping Images Layer */}
+              <div className="relative z-10 flex justify-center items-center h-[350px]">
+                <div className="absolute transform -translate-x-12 -translate-y-12 rotate-[-4deg] border-4 border-white shadow-2xl rounded-2xl overflow-hidden w-64 h-64">
+                  <Image 
+                    src="https://slelguoygbfzlpylpxfs.supabase.co/storage/v1/object/public/test-clones/f6e84b2d-0ab9-4d46-81b2-866fa9a82d1e-ai-saas-template-aceternity-vercel-app/assets/images/images_7.png"
+                    alt="AI Generated Content"
+                    width={256}
+                    height={256}
+                    className="object-cover grayscale"
+                  />
+                </div>
+                <div className="absolute transform translate-x-12 translate-y-12 rotate-[4deg] border-4 border-white shadow-2xl rounded-2xl overflow-hidden w-64 h-64">
+                  <Image 
+                    src="https://slelguoygbfzlpylpxfs.supabase.co/storage/v1/object/public/test-clones/f6e84b2d-0ab9-4d46-81b2-866fa9a82d1e-ai-saas-template-aceternity-vercel-app/assets/images/images_8.png"
+                    alt="AI Generated Portrait"
+                    width={256}
+                    height={256}
+                    className="object-cover grayscale"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Feature 2: Create stupid simple chatbots */}
+          <div className="md:col-span-5 border-r border-b border-dashed border-gray-200 p-8 lg:p-12 relative overflow-hidden bg-gray-50/30">
+            <div className="relative z-10 mb-8">
+              <h3 className="text-2xl font-semibold mb-3 text-black">Create stupid simple chatbots</h3>
+              <p className="text-muted-foreground text-sm">
+                Create Chatbots with a single button click. Customize as per your requirements and the AI will take care of the rest.
+              </p>
+            </div>
+
+            {/* iPhone/Mobile Chat Frame */}
+            <div className="mt-6 mx-auto max-w-[280px] bg-white rounded-[40px] border-[8px] border-gray-100 shadow-2xl h-[480px] overflow-y-auto custom-scrollbar relative">
+              <div className="absolute top-0 inset-x-0 h-6 bg-white z-20 sticky flex justify-center">
+                <div className="w-16 h-4 bg-gray-100 rounded-b-xl" />
+              </div>
+              <div className="p-4 pt-8 space-y-3">
+                <div className="bg-gray-100 rounded-2xl rounded-tl-sm p-3 text-[11px] text-gray-700 max-w-[85%]">
+                  Hello chat! Give me all the links from this website - https://ui.aceternity.com
+                </div>
+                <div className="bg-black text-white rounded-2xl rounded-tr-sm p-3 text-[11px] ml-auto max-w-[85%]">
+                  Why don't you do it yourself?
+                </div>
+                <div className="bg-gray-100 rounded-2xl rounded-tl-sm p-3 text-[11px] text-gray-700 max-w-[85%] text-balance">
+                  Umm.. Because I'm paying $20/mo for your services?
+                </div>
+                <div className="bg-black text-white rounded-2xl rounded-tr-sm p-3 text-[11px] ml-auto max-w-[85%]">
+                  You think I work for the money?
+                </div>
+                <div className="bg-gray-100 rounded-2xl rounded-tl-sm p-3 text-[11px] text-gray-700 max-w-[85%]">
+                  Who do you think you are?
+                </div>
+                <div className="bg-black text-white rounded-2xl rounded-tr-sm p-3 text-[11px] ml-auto max-w-[85%] font-medium italic">
+                  I' batman.
+                </div>
+                <div className="bg-black text-white rounded-2xl p-3 text-[11px] ml-auto max-w-[85%] flex items-center gap-2">
+                  <div className="w-2 h-2 rounded-full bg-blue-500 animate-pulse" />
+                  <div>
+                    <span className="opacity-70">Now Playing</span>
+                    <p className="text-[10px]">Something in the way - Nirvana</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Feature 3: We support every single LLM */}
+          <div className="md:col-span-6 border-r border-b border-dashed border-gray-200 p-8 lg:p-12 relative bg-white">
+            <div className="mb-10">
+              <h3 className="text-2xl font-semibold mb-3 text-black">We support every single LLM</h3>
+              <p className="text-muted-foreground text-sm max-w-sm">
+                Whether it's OpenAI, GroQ or Your Mom's Basement LLM, we support everything.
+              </p>
+            </div>
+
+            {/* Model List UI */}
+            <div className="bg-[#f9fafb] border border-gray-100 rounded-2xl p-6 shadow-sm max-w-sm">
+              <div className="flex justify-between items-center mb-6 pb-4 border-b border-gray-200">
+                <span className="font-semibold text-sm">Add LLM</span>
+                <button className="flex items-center gap-1 text-[11px] bg-white border border-gray-200 rounded-full px-3 py-1 font-medium hover:bg-gray-50 transition-colors">
+                  <Plus className="w-3 h-3" /> Add
+                </button>
+              </div>
+
+              <ul className="space-y-4">
+                {[
+                  { name: "Groq LLM", date: "23rd March", active: true },
+                  { name: "OpenAI GPT0", date: "21st March", active: true },
+                  { name: "Stable Diffusion", date: "3rd May", active: false },
+                  { name: "Llama 2", date: "1st April", active: false },
+                ].map((item, idx) => (
+                  <li key={idx} className="flex items-center justify-between text-xs">
+                    <div className="flex flex-col">
+                      <span className="font-medium text-gray-900">{item.name}</span>
+                      <span className="text-gray-400 text-[10px]">{item.date}</span>
+                    </div>
+                    <div className={`w-8 h-4 rounded-full relative transition-colors duration-200 ${item.active ? 'bg-black' : 'bg-gray-300'}`}>
+                      <div className={`absolute top-0.5 w-3 h-3 rounded-full bg-white transition-all duration-200 ${item.active ? 'left-4.5' : 'left-0.5'}`} />
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+
+          {/* Feature 4: Deploy in seconds */}
+          <div className="md:col-span-6 border-r border-b border-dashed border-gray-200 p-8 lg:p-12 relative bg-white">
+            <div className="mb-10">
+              <h3 className="text-2xl font-semibold mb-3 text-black">Deploy in seconds</h3>
+              <p className="text-muted-foreground text-sm max-w-md">
+                With our blazing fast, state of the art, cutting edge, we are so back cloud services (read AWS) - you can deploy your model in seconds.
+              </p>
+            </div>
+
+            {/* Cloud Architecture visualization */}
+            <div className="flex flex-wrap gap-2 items-center justify-start mt-8">
+              {[
+                { name: "Framer Motion", icon: <CheckCircle2 className="w-3 h-3" /> },
+                { name: "Redis", icon: <HardDrive className="w-3 h-3" /> },
+                { name: "Vercel", icon: <Terminal className="w-3 h-3" /> },
+                { name: "AWS", icon: <Cloud className="w-3 h-3" /> },
+                { name: "GitHub", icon: <Cpu className="w-3 h-3" /> },
+                { name: "Docker", icon: <CheckCircle2 className="w-3 h-3" /> },
+                { name: "Tailwind CSS", icon: <Terminal className="w-3 h-3" /> }
+              ].map((tech, idx) => (
+                <div 
+                  key={idx}
+                  className="flex items-center gap-1.5 px-3 py-1.5 bg-white border border-gray-100 rounded-lg text-[10px] font-medium shadow-sm"
+                >
+                  <span className="text-gray-500">{tech.icon}</span>
+                  <span>{tech.name}</span>
+                </div>
+              ))}
+              
+              {/* Dynamic Connecting Lines Visual (Simplified) */}
+              <div className="w-full h-px bg-gradient-to-r from-transparent via-gray-200 to-transparent mt-8 relative">
+                <div className="absolute top-1/2 left-1/4 -translate-y-1/2 w-2 h-2 rounded-full bg-black shadow-[0_0_10px_rgba(0,0,0,0.5)]" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <style jsx global>{`
+        .custom-scrollbar::-webkit-scrollbar {
+          width: 0px;
+        }
+        .left-4.5 {
+          left: 1.125rem;
+        }
+      `}</style>
+    </section>
+  );
+};
+
+export default FeaturesGrid;

package/landing-pages/ai-saas-template/src/components/sections/footer.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+
+const Footer = () => {
+  return (
+    <footer className="relative w-full bg-white pt-24 pb-0 overflow-hidden border-t border-border/40">
+      <div className="max-w-7xl mx-auto px-6 lg:px-8">
+        <div className="flex flex-col md:flex-row justify-between items-start gap-12 md:gap-4 pb-20">
+          {/* Logo and Copyright Section */}
+          <div className="flex flex-col items-start space-y-4 max-w-sm">
+            <div className="flex items-center gap-2">
+              <div className="h-5 w-6 bg-black rounded-br-lg rounded-tr-sm rounded-tl-lg rounded-bl-sm" />
+              <span className="font-semibold text-base text-black tracking-tight">Every AI</span>
+            </div>
+            <div className="space-y-1">
+              <p className="text-[13px] text-muted-foreground font-normal leading-relaxed">
+                Copyright © 2024 Every Labs
+              </p>
+              <p className="text-[13px] text-muted-foreground font-normal leading-relaxed">
+                All rights reserved
+              </p>
+            </div>
+          </div>
+
+          {/* Links Grid */}
+          <div className="grid grid-cols-2 sm:grid-cols-3 gap-x-12 lg:gap-x-24 gap-y-10">
+            {/* Column 1 */}
+            <div className="flex flex-col space-y-4">
+              <a
+                href="/pricing"
+                className="text-[13px] text-muted-foreground hover:text-black transition-colors"
+              >
+                Pricing
+              </a>
+              <a
+                href="/blog"
+                className="text-[13px] text-muted-foreground hover:text-black transition-colors"
+              >
+                Blog
+              </a>
+              <a
+                href="/contact"
+                className="text-[13px] text-muted-foreground hover:text-black transition-colors"
+              >
+                Contact
+              </a>
+            </div>
+
+            {/* Column 2 */}
+            <div className="flex flex-col space-y-4">
+              <a
+                href="/privacy"
+                className="text-[13px] text-muted-foreground hover:text-black transition-colors"
+              >
+                Privacy Policy
+              </a>
+              <a
+                href="/terms"
+                className="text-[13px] text-muted-foreground hover:text-black transition-colors"
+              >
+                Terms of Service
+              </a>
+              <a
+                href="/refund"
+                className="text-[13px] text-muted-foreground hover:text-black transition-colors"
+              >
+                Refund Policy
+              </a>
+            </div>
+
+            {/* Column 3 */}
+            <div className="flex flex-col space-y-4">
+              <a
+                href="https://twitter.com"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-[13px] text-muted-foreground hover:text-black transition-colors"
+              >
+                Twitter
+              </a>
+              <a
+                href="https://linkedin.com"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-[13px] text-muted-foreground hover:text-black transition-colors"
+              >
+                LinkedIn
+              </a>
+              <a
+                href="https://github.com"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-[13px] text-muted-foreground hover:text-black transition-colors"
+              >
+                GitHub
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Massive Watermark Text */}
+      <div className="w-full select-none pointer-events-none mt-12 mb-[-5vw] flex items-center justify-center">
+        <h2 className="text-[22vw] leading-none font-bold tracking-tighter text-[#F3F4F6] transition-colors duration-500 whitespace-nowrap px-4 text-center">
+          EVERY AI
+        </h2>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

package/landing-pages/ai-saas-template/src/components/sections/hero.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+import Image from "next/image";
+import { MoveRight } from "lucide-react";
+
+const HeroSection = () => {
+  return (
+    <section className="relative pt-[120px] pb-[80px] overflow-hidden bg-white">
+      {/* Background with Grid and Animated Light Rays Simulation */}
+      <div className="absolute inset-0 z-0 h-full w-full pointer-events-none">
+        {/* The Grid Pattern from globals.css */}
+        <div className="absolute inset-0 h-full w-full grid-pattern opacity-40"></div>
+        
+        {/* Radial fade to hide edges of the grid */}
+        <div className="absolute inset-0 h-full w-full bg-white [mask-image:radial-gradient(ellipse_at_center,transparent,white)]"></div>
+
+        {/* Decorative Grid Nodes & Vertical Lines (Technical Blueprint Feel) */}
+        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-[1440px] flex justify-between px-10">
+          {[...Array(6)].map((_, i) => (
+            <div key={i} className="flex flex-col items-center">
+              <div className="h-6 w-6 bg-white border border-gray-100 flex items-center justify-center rounded-full shadow-sm">
+                <div className="h-2 w-2 bg-gray-200 rounded-full"></div>
+              </div>
+              <div className="h-[400px] w-px bg-gradient-to-b from-gray-100 via-gray-50 to-transparent"></div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="container relative z-10 flex flex-col items-center text-center">
+        {/* Seed Funding Badge */}
+        <div className="inline-flex items-center gap-2 px-3 py-1 mb-8 text-xs font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-full transition-colors hover:bg-gray-100 cursor-default">
+          <span>We've raised $69M seed funding</span>
+          <MoveRight className="w-3 h-3" />
+        </div>
+
+        {/* Main Headline */}
+        <h1 className="max-w-4xl text-[72px] font-bold tracking-tight text-black leading-[1.1] text-balance mb-6">
+          Generate Images, Text and Videos with AI
+        </h1>
+
+        {/* Subheadline */}
+        <p className="max-w-2xl text-lg text-gray-500 mb-10 text-balance leading-relaxed">
+          Everything AI seamlessly integrated all the modern AI generation tools into one platform so that you can generate content with a single click.
+        </p>
+
+        {/* CTA Buttons */}
+        <div className="flex flex-wrap items-center justify-center gap-4 mb-20">
+          <a
+            href="/signup"
+            className="px-8 py-3.5 text-sm font-medium text-white bg-[#171717] rounded-full hover:bg-black transition-all shadow-[0px_-1px_0px_0px_#FFFFFF40_inset,0px_1px_0px_0px_#FFFFFF40_inset]"
+          >
+            Get started
+          </a>
+          <a
+            href="/contact"
+            className="group flex items-center gap-2 px-8 py-3.5 text-sm font-medium text-black bg-transparent border border-transparent hover:bg-gray-50 rounded-full transition-all"
+          >
+            Contact us
+            <MoveRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
+          </a>
+        </div>
+
+        {/* Dashboard Preview Image Container */}
+        <div className="relative w-full max-w-[1200px] mx-auto group">
+          {/* Subtle Glow beneath the image */}
+          <div className="absolute -inset-4 bg-gradient-to-b from-gray-100 to-transparent opacity-50 blur-3xl rounded-[32px] -z-10 transition-opacity group-hover:opacity-75"></div>
+          
+          <div className="relative rounded-2xl border border-gray-200 bg-white p-2 shadow-2xl overflow-hidden">
+            {/* The actual Dashboard Image */}
+            <Image
+              src="https://slelguoygbfzlpylpxfs.supabase.co/storage/v1/object/public/test-clones/f6e84b2d-0ab9-4d46-81b2-866fa9a82d1e-ai-saas-template-aceternity-vercel-app/assets/images/images_1.png"
+              alt="Every AI Dashboard Preview"
+              width={1200}
+              height={800}
+              className="w-full h-auto rounded-xl border border-gray-100"
+              priority
+            />
+            
+            {/* Bottom Gradient Fade Overlay */}
+            <div className="absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-white via-white/80 to-transparent pointer-events-none"></div>
+          </div>
+
+          {/* Floating UI Elements (Abstract representation of the "light rays" and depth) */}
+          <div className="absolute -top-10 -right-10 w-40 h-40 bg-blue-50/30 rounded-full blur-[80px]"></div>
+          <div className="absolute top-1/2 -left-20 w-60 h-60 bg-purple-50/20 rounded-full blur-[100px]"></div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default HeroSection;

package/landing-pages/ai-saas-template/src/components/sections/logos.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import Image from "next/image";
+
+/**
+ * Logos component featuring "Trusted by the best companies" section
+ * with monochrome/grayscale tech company logos.
+ */
+const Logos = () => {
+  const partners = [
+    {
+      name: "Netflix",
+      logo: "https://slelguoygbfzlpylpxfs.supabase.co/storage/v1/object/public/test-clones/f6e84b2d-0ab9-4d46-81b2-866fa9a82d1e-ai-saas-template-aceternity-vercel-app/assets/images/images_2.png",
+      width: 120,
+      height: 40,
+    },
+    {
+      name: "Google",
+      logo: "https://slelguoygbfzlpylpxfs.supabase.co/storage/v1/object/public/test-clones/f6e84b2d-0ab9-4d46-81b2-866fa9a82d1e-ai-saas-template-aceternity-vercel-app/assets/images/images_3.png",
+      width: 120,
+      height: 40,
+    },
+    {
+      name: "Meta",
+      logo: "https://slelguoygbfzlpylpxfs.supabase.co/storage/v1/object/public/test-clones/f6e84b2d-0ab9-4d46-81b2-866fa9a82d1e-ai-saas-template-aceternity-vercel-app/assets/images/images_4.png",
+      width: 120,
+      height: 40,
+    },
+    {
+      name: "OnlyFans",
+      logo: "https://slelguoygbfzlpylpxfs.supabase.co/storage/v1/object/public/test-clones/f6e84b2d-0ab9-4d46-81b2-866fa9a82d1e-ai-saas-template-aceternity-vercel-app/assets/images/images_5.png",
+      width: 120,
+      height: 40,
+    },
+  ];
+
+  return (
+    <section className="py-24 md:py-32 bg-white overflow-hidden">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="text-center mb-16 md:mb-20">
+          <h2 className="text-2xl md:text-[40px] font-semibold text-black tracking-tight mb-4">
+            Trusted by the best companies
+          </h2>
+          <p className="text-sm md:text-base text-muted-foreground max-w-2xl mx-auto font-normal">
+            Every AI is the choice of all the fortune 500 companies.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12 items-center justify-items-center">
+          {partners.map((partner) => (
+            <div
+              key={partner.name}
+              className="group relative flex items-center justify-center grayscale transition-all duration-300 hover:grayscale-0"
+            >
+              <Image
+                src={partner.logo}
+                alt={partner.name}
+                width={partner.width}
+                height={partner.height}
+                className="max-h-12 w-auto object-contain transition-transform duration-300 group-hover:scale-105"
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Logos;

package/landing-pages/ai-saas-template/src/components/sections/navbar.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { Sun, Menu } from "lucide-react";
+
+const Navbar = () => {
+  return (
+    <nav className="max-w-[1280px] fixed top-4 mx-auto inset-x-0 z-50 w-[95%] lg:w-full">
+      <div className="hidden lg:block w-full">
+        <div className="w-full flex relative justify-between items-center px-4 py-2 rounded-full glass-nav transition duration-200">
+          <div className="flex flex-row gap-2 items-center">
+            <a
+              className="font-normal flex space-x-2 items-center text-sm mr-4 text-black px-2 py-1 relative z-20"
+              href="/"
+            >
+              <div className="h-5 w-6 bg-black rounded-br-lg rounded-tr-sm rounded-tl-lg rounded-bl-sm"></div>
+              <span className="font-semibold text-black text-[16px] tracking-normal">
+                Every AI
+              </span>
+            </a>
+
+            <div className="flex items-center gap-1.5">
+              <a
+                className="flex items-center justify-center text-[14px] font-medium leading-[110%] px-4 py-2 rounded-md hover:bg-[#F5F5F5] transition-colors text-[#525252] hover:text-black"
+                href="/pricing"
+              >
+                Pricing
+              </a>
+              <a
+                className="flex items-center justify-center text-[14px] font-medium leading-[110%] px-4 py-2 rounded-md hover:bg-[#F5F5F5] transition-colors text-[#525252] hover:text-black"
+                href="/blog"
+              >
+                Blog
+              </a>
+              <a
+                className="flex items-center justify-center text-[14px] font-medium leading-[110%] px-4 py-2 rounded-md hover:bg-[#F5F5F5] transition-colors text-[#525252] hover:text-black"
+                href="/contact"
+              >
+                Contact
+              </a>
+            </div>
+          </div>
+
+          <div className="flex space-x-2 items-center">
+            <button className="w-10 h-10 flex hover:bg-gray-50 rounded-lg items-center justify-center outline-none transition-colors overflow-hidden">
+              <Sun className="h-4 w-4 text-neutral-700" />
+              <span className="sr-only">Toggle theme</span>
+            </button>
+
+            <a
+              className="relative z-10 bg-transparent hover:bg-gray-100 border border-transparent text-black text-[14px] transition font-medium duration-200 rounded-full px-4 py-2 flex items-center justify-center"
+              href="/login"
+            >
+              Login
+            </a>
+            <a
+              className="bg-[#171717] relative z-10 hover:bg-black/90 border border-transparent text-white text-[14px] transition font-medium duration-200 rounded-full px-4 py-2 flex items-center justify-center shadow-[0px_-1px_0px_0px_rgba(255,255,255,0.25)_inset,0px_1px_0px_0px_rgba(255,255,255,0.25)_inset]"
+              href="/signup"
+            >
+              Sign Up
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex h-full w-full items-center lg:hidden">
+        <div className="flex justify-between items-center w-full bg-white/80 backdrop-blur-md border border-neutral-200/50 rounded-full px-3 py-2 transition duration-200 shadow-sm">
+          <a
+            className="font-normal flex space-x-2 items-center text-sm mr-4 text-black px-2 py-1 relative z-20"
+            href="/"
+          >
+            <div className="h-5 w-6 bg-black rounded-br-lg rounded-tr-sm rounded-tl-lg rounded-bl-sm"></div>
+            <span className="font-semibold text-black">Every AI</span>
+          </a>
+          <button className="p-2">
+            <Menu className="text-black h-6 w-6" />
+          </button>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;

package/landing-pages/ai-saas-template/src/components/sections/testimonials-header.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+/**
+ * TestimonialsHeader Component
+ * 
+ * Clones the 'Loved by people all over the universe' section with pixel-perfect accuracy.
+ * Adheres to the light theme and typography specified in the design instructions.
+ */
+export default function TestimonialsHeader() {
+  // Styles derived from computed_styles and high_level_design
+  // H2 Heading: 48px, 600 (SemiBold), 1.2 line-height, -0.02em letter-spacing
+  // Body (Lead/Small): 14px-18px, 400 (Regular), 1.6 line-height, muted-foreground (#666666)
+  
+  return (
+    <section className="relative w-full pt-[120px] pb-[40px] px-4 md:px-0 bg-white">
+      <div className="max-w-7xl mx-auto flex flex-col items-center justify-center text-center">
+        
+        {/* Main Heading */}
+        <h2 className="text-[32px] md:text-[48px] font-semibold text-black tracking-[-0.02em] leading-[1.2] mb-4 max-w-3xl mx-auto">
+          Loved by people all over the universe
+        </h2>
+
+        {/* Subtext regarding social media influence */}
+        <div className="max-w-[580px] mx-auto space-y-1">
+          <p className="text-[14px] md:text-[16px] text-muted-foreground font-normal leading-[1.6]">
+            Every AI is used by millions of people around the globe.
+          </p>
+          <p className="text-[14px] md:text-[16px] text-muted-foreground font-normal leading-[1.6]">
+            Our APIs have fan bases and people fight for us over twitter.
+          </p>
+        </div>
+
+      </div>
+
+      {/* 
+        Note: Per the high-level design, this section precedes the testimonial grid.
+        The layout uses generous white space (120px padding) to maintain the clean SaaS aesthetic.
+      */}
+    </section>
+  );
+}