================================================================
  DIGITAL MORSE — FULL WEBSITE SOURCE CODE
  React + Vite + Tailwind CSS + Framer Motion
================================================================

FOLDER STRUCTURE:
-----------------
src/
  main.tsx
  App.tsx
  index.css
  components/
    layout/
      Navbar.tsx
      Footer.tsx
    sections/
      Hero.tsx
      Services.tsx
      Process.tsx
      About.tsx
      Contact.tsx

DEPENDENCIES (package.json):
  framer-motion
  lucide-react
  wouter
  react-hook-form
  @hookform/resolvers
  zod
  tailwindcss
  @tailwindcss/vite
  @vitejs/plugin-react
  @tanstack/react-query
  tw-animate-css

================================================================
FILE: src/main.tsx
================================================================

import { createRoot } from 'react-dom/client';
import App from './App';
import './index.css';

createRoot(document.getElementById('root')!).render(<App />);


================================================================
FILE: src/index.css
================================================================

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&display=swap');
@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));

  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));

  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));

  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));

  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));

  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));

  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));

  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));

  --font-sans: var(--app-font-sans);
  --font-heading: var(--app-font-heading);
  --font-mono: var(--app-font-mono);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 9%;
  --border: 0 0% 91%;
  --input: 0 0% 91%;
  --ring: 14 100% 50%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 9%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 9%;
  /* Primary: #FF3C00 — Digital Morse orange-red */
  --primary: 14 100% 50%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 96%;
  --secondary-foreground: 0 0% 9%;
  --muted: 0 0% 96%;
  --muted-foreground: 0 0% 45%;
  --accent: 14 100% 97%;
  --accent-foreground: 14 100% 40%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --app-font-sans: 'DM Sans', sans-serif;
  --app-font-heading: 'Bricolage Grotesque', sans-serif;
  --app-font-mono: 'Menlo', monospace;
  --radius: 0.5rem;
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply font-sans antialiased bg-background text-foreground;
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--app-font-heading);
  }
}


================================================================
FILE: src/App.tsx
================================================================

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { Toaster } from '@/components/ui/toaster';
import { TooltipProvider } from '@/components/ui/tooltip';
import { Route, Switch, Router as WouterRouter } from 'wouter';

import { Navbar } from '@/components/layout/Navbar';
import { Footer } from '@/components/layout/Footer';
import { Hero } from '@/components/sections/Hero';
import { Services } from '@/components/sections/Services';
import { Process } from '@/components/sections/Process';
import { About } from '@/components/sections/About';
import { Contact } from '@/components/sections/Contact';

const queryClient = new QueryClient();

function LandingPage() {
  return (
    <div className="min-h-[100dvh] bg-background flex flex-col">
      <Navbar />
      <main className="flex-1">
        <Hero />
        <Services />
        <Process />
        <About />
        <Contact />
      </main>
      <Footer />
    </div>
  );
}

function Router() {
  return (
    <Switch>
      <Route path="/" component={LandingPage} />
      <Route component={LandingPage} />
    </Switch>
  );
}

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <TooltipProvider>
        <WouterRouter base={import.meta.env.BASE_URL.replace(/\/$/, '')}>
          <Router />
        </WouterRouter>
        <Toaster />
      </TooltipProvider>
    </QueryClientProvider>
  );
}

export default App;


================================================================
FILE: src/components/layout/Navbar.tsx
================================================================

import { useState } from 'react';
import { motion, useScroll, useMotionValueEvent } from 'framer-motion';
import { Button } from '@/components/ui/button';

export function Navbar() {
  const [isScrolled, setIsScrolled] = useState(false);
  const { scrollY } = useScroll();

  useMotionValueEvent(scrollY, "change", (latest) => {
    setIsScrolled(latest > 20);
  });

  const handleNavClick = (e: React.MouseEvent<HTMLAnchorElement>, targetId: string) => {
    e.preventDefault();
    const target = document.getElementById(targetId);
    if (target) {
      target.scrollIntoView({ behavior: 'smooth' });
    }
  };

  return (
    <motion.header
      initial={{ y: -100 }}
      animate={{ y: 0 }}
      transition={{ type: "spring", stiffness: 300, damping: 30 }}
      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
        isScrolled ? 'bg-background/90 backdrop-blur-md border-b border-border shadow-sm' : 'bg-transparent'
      }`}
    >
      <div className="container mx-auto px-6 h-20 flex items-center justify-between">
        <div className="flex items-center gap-1 font-heading text-xl font-bold tracking-tight">
          Digital Morse<span className="w-2 h-2 rounded-full bg-primary mt-1 inline-block"></span>
        </div>

        <nav className="hidden lg:flex items-center gap-8 text-sm font-medium">
          <a href="#services" onClick={(e) => handleNavClick(e, 'services')} className="hover:text-primary transition-colors">Services</a>
          <a href="#process" onClick={(e) => handleNavClick(e, 'process')} className="hover:text-primary transition-colors">Process</a>
          <a href="#about" onClick={(e) => handleNavClick(e, 'about')} className="hover:text-primary transition-colors">About</a>
        </nav>

        <div>
          <Button onClick={() => document.getElementById('contact')?.scrollIntoView({ behavior: 'smooth' })}>
            Get Started
          </Button>
        </div>
      </div>
    </motion.header>
  );
}


================================================================
FILE: src/components/layout/Footer.tsx
================================================================

export function Footer() {
  const scrollTo = (e: React.MouseEvent<HTMLAnchorElement>, id: string) => {
    e.preventDefault();
    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <footer className="bg-foreground text-background pt-20 pb-10 border-t border-background/10">
      <div className="container mx-auto px-6">
        <div className="grid grid-cols-1 md:grid-cols-12 gap-12 mb-16">
          <div className="md:col-span-6 lg:col-span-5">
            <div className="flex items-center gap-1 font-heading text-2xl font-bold tracking-tight mb-6">
              Digital Morse<span className="w-2.5 h-2.5 rounded-full bg-primary mt-1 inline-block"></span>
            </div>
            <p className="text-background/70 text-lg max-w-sm leading-relaxed">
              Growth architecture for competitive niches. Predictable, data-backed, and engineered for ROI.
            </p>
          </div>

          <div className="md:col-span-3 lg:col-span-3 lg:col-start-7">
            <h4 className="font-heading font-bold text-lg mb-6">Capabilities</h4>
            <ul className="space-y-4">
              <li><a href="#services" onClick={(e) => scrollTo(e, 'services')} className="text-background/70 hover:text-primary transition-colors">Search Architecture</a></li>
              <li><a href="#services" onClick={(e) => scrollTo(e, 'services')} className="text-background/70 hover:text-primary transition-colors">Authority Acquisition</a></li>
              <li><a href="#services" onClick={(e) => scrollTo(e, 'services')} className="text-background/70 hover:text-primary transition-colors">Performance Ads</a></li>
              <li><a href="#services" onClick={(e) => scrollTo(e, 'services')} className="text-background/70 hover:text-primary transition-colors">Digital Ecosystems</a></li>
            </ul>
          </div>

          <div className="md:col-span-3 lg:col-span-3">
            <h4 className="font-heading font-bold text-lg mb-6">Headquarters</h4>
            <ul className="space-y-4 text-background/70">
              <li>Suite 400</li>
              <li>San Francisco, CA 94105</li>
              <li><a href="mailto:hello@digitalmorse.com" className="hover:text-primary transition-colors">hello@digitalmorse.com</a></li>
              <li><a href="tel:+15550123456" className="hover:text-primary transition-colors">+1 (555) 012-3456</a></li>
            </ul>
          </div>
        </div>

        <div className="pt-8 border-t border-background/10 flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-background/50">
          <div>© 2025 Digital Morse. All rights reserved.</div>
          <div className="flex gap-6">
            <a href="#" className="hover:text-background transition-colors">Privacy Policy</a>
            <a href="#" className="hover:text-background transition-colors">Terms of Service</a>
          </div>
        </div>
      </div>
    </footer>
  );
}


================================================================
FILE: src/components/sections/Hero.tsx
================================================================

import { motion } from 'framer-motion';
import { Button } from '@/components/ui/button';
import { ArrowRight, Activity, TrendingUp, BarChart3 } from 'lucide-react';

export function Hero() {
  const scrollTo = (id: string) => {
    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
  };

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1,
      }
    }
  };

  const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0, transition: { type: "spring", stiffness: 300, damping: 24 } }
  };

  return (
    <section className="relative min-h-[100dvh] flex items-center pt-20 overflow-hidden bg-background">
      {/* Glow blobs */}
      <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-primary/10 rounded-full blur-[100px] opacity-70 translate-x-1/3 -translate-y-1/3 pointer-events-none"></div>
      <div className="absolute bottom-0 left-0 w-[600px] h-[600px] bg-accent rounded-full blur-[120px] opacity-60 -translate-x-1/3 translate-y-1/3 pointer-events-none"></div>

      <div className="container mx-auto px-6 relative z-10">
        <div className="grid lg:grid-cols-12 gap-12 items-center">
          <motion.div
            className="lg:col-span-6 flex flex-col items-start"
            variants={containerVariants}
            initial="hidden"
            animate="visible"
          >
            <motion.div variants={itemVariants} className="flex items-center gap-2 bg-secondary/80 backdrop-blur-sm border border-border rounded-full px-4 py-1.5 mb-8">
              <span className="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
              <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Data-Driven Growth Partners</span>
            </motion.div>

            <motion.h1 variants={itemVariants} className="text-5xl sm:text-6xl lg:text-7xl font-bold font-heading leading-[1.1] tracking-tight text-foreground mb-6">
              Predictable growth,<br />
              engineered<span className="text-primary">.</span>
            </motion.h1>

            <motion.p variants={itemVariants} className="text-lg sm:text-xl text-muted-foreground leading-relaxed mb-8 max-w-[540px]">
              We are a specialized growth squad for competitive niches. We build digital ecosystems, scale organic search, and run performance campaigns that generate measurable pipeline.
            </motion.p>

            <motion.div variants={itemVariants} className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
              <Button size="lg" onClick={() => scrollTo('contact')} className="h-14 px-8 text-base">
                Book a Consultation
              </Button>
              <Button size="lg" variant="outline" onClick={() => scrollTo('services')} className="h-14 px-8 text-base group">
                Explore Services
                <ArrowRight className="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform" />
              </Button>
            </motion.div>
          </motion.div>

          <motion.div
            className="lg:col-span-6 relative"
            initial={{ opacity: 0, x: 40 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ delay: 0.4, type: "spring", stiffness: 200, damping: 24 }}
          >
            <div className="relative rounded-2xl bg-card border border-border shadow-2xl overflow-hidden aspect-[4/3] flex flex-col justify-between p-8">
              <div className="absolute top-0 right-0 w-32 h-32 bg-primary/5 blur-[50px] rounded-full pointer-events-none"></div>

              <div className="flex justify-between items-start mb-12 relative z-10">
                <div>
                  <div className="flex items-center gap-2 mb-2 text-muted-foreground">
                    <Activity className="w-4 h-4 text-primary" />
                    <span className="text-sm font-medium">Performance Metrics</span>
                  </div>
                  <h3 className="font-heading text-xl">Campaign Alpha</h3>
                </div>
                <div className="h-10 w-10 rounded-full bg-secondary flex items-center justify-center">
                  <TrendingUp className="w-5 h-5 text-primary" />
                </div>
              </div>

              <div className="relative z-10">
                <div className="text-6xl sm:text-7xl font-bold font-heading tracking-tighter mb-2 text-foreground">
                  +142<span className="text-primary">%</span>
                </div>
                <p className="text-lg text-muted-foreground font-medium flex items-center gap-2">
                  Average ROAS Increase <BarChart3 className="w-4 h-4" />
                </p>
              </div>

              {/* Decorative grid */}
              <div className="absolute bottom-0 left-0 right-0 h-32 opacity-10 pointer-events-none" style={{
                backgroundImage: 'linear-gradient(to right, hsl(var(--foreground)) 1px, transparent 1px), linear-gradient(to bottom, hsl(var(--foreground)) 1px, transparent 1px)',
                backgroundSize: '24px 24px'
              }}></div>
            </div>

            {/* Floating badge */}
            <div className="absolute -bottom-6 -left-6 bg-card border border-border shadow-lg rounded-xl p-4 flex items-center gap-4 animate-in fade-in slide-in-from-bottom-4 duration-1000 delay-700">
              <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
                <span className="w-3 h-3 rounded-full bg-primary animate-ping"></span>
              </div>
              <div>
                <div className="text-sm font-bold">Pipeline Active</div>
                <div className="text-xs text-muted-foreground">Monitoring 24/7</div>
              </div>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}


================================================================
FILE: src/components/sections/Services.tsx
================================================================

import { motion } from 'framer-motion';
import { Search, Link as LinkIcon, BarChart2, Globe, ArrowRight } from 'lucide-react';
import { Button } from '@/components/ui/button';

const services = [
  {
    icon: <Search className="w-6 h-6 text-primary" />,
    title: "Search Architecture",
    subtitle: "Capture high-intent organic traffic.",
    description: "We reconstruct your site architecture and content strategy to capture the exact organic traffic that converts. No vanity keywords, just measurable pipeline generation built on technical excellence.",
    tags: ["Technical Core", "Intent Match"]
  },
  {
    icon: <LinkIcon className="w-6 h-6 text-primary" />,
    title: "Authority Acquisition",
    subtitle: "Earn trust from search algorithms.",
    description: "Manual outreach to high-authority, relevant domains. We secure contextual placements that build undeniable trust signals, turning your digital real estate into an industry authority.",
    tags: ["Domain Rating", "Spam Score"]
  },
  {
    icon: <BarChart2 className="w-6 h-6 text-primary" />,
    title: "Performance Ads",
    subtitle: "Precision targeting. Absolute accountability.",
    description: "Multi-channel campaigns optimized strictly for CAC and LTV. We scale ad spend only when the unit economics dictate it makes sense, continuously testing creative and targeting.",
    tags: ["Target ROAS", "Data Latency"]
  },
  {
    icon: <Globe className="w-6 h-6 text-primary" />,
    title: "Digital Ecosystems",
    subtitle: "Conversion-obsessed engineering.",
    description: "Blazing-fast, modern frontends that serve as the ultimate conversion mechanism for your newly acquired traffic. Accessible, responsive, and engineered to load in milliseconds.",
    tags: ["Load Time", "Uptime"]
  }
];

export function Services() {
  const scrollTo = (id: string) => {
    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <section id="services" className="py-24 sm:py-32 bg-secondary/30 relative">
      <div className="container mx-auto px-6">
        <div className="max-w-2xl mb-16">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="inline-flex items-center rounded-full border border-border bg-background px-3 py-1 text-sm font-semibold mb-6 uppercase tracking-wider text-muted-foreground"
          >
            Core Capabilities
          </motion.div>
          <motion.h2
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.1 }}
            className="text-4xl sm:text-5xl font-bold font-heading mb-6"
          >
            Four specialized disciplines run by experts.
          </motion.h2>
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.2 }}
            className="text-lg text-muted-foreground"
          >
            No bloated retainer fees, just focused execution on the channels that drive revenue.
          </motion.p>
        </div>

        <div className="grid md:grid-cols-2 gap-6 sm:gap-8">
          {services.map((service, index) => (
            <motion.div
              key={service.title}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: index * 0.1 }}
              className="group bg-card border border-border rounded-2xl p-8 hover:border-primary/50 transition-colors flex flex-col"
            >
              <div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center mb-6">
                {service.icon}
              </div>
              <h3 className="text-2xl font-bold font-heading mb-2">{service.title}</h3>
              <div className="text-primary font-medium mb-4 text-sm">{service.subtitle}</div>
              <p className="text-muted-foreground mb-8 flex-1">{service.description}</p>

              <div className="flex flex-wrap gap-2 mb-8 mt-auto">
                {service.tags.map(tag => (
                  <span key={tag} className="text-xs font-semibold uppercase tracking-wider bg-secondary px-3 py-1 rounded-full text-muted-foreground">
                    {tag}
                  </span>
                ))}
              </div>

              <Button variant="ghost" className="w-fit p-0 hover:bg-transparent hover:text-primary group/btn" onClick={() => scrollTo('contact')}>
                Discuss this service <ArrowRight className="ml-2 w-4 h-4 group-hover/btn:translate-x-1 transition-transform" />
              </Button>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}


================================================================
FILE: src/components/sections/Process.tsx
================================================================

import { motion } from 'framer-motion';
import { BarChart2, Unlock, Cpu, MessageSquare } from 'lucide-react';

const protocols = [
  {
    icon: <BarChart2 className="w-6 h-6 text-primary" />,
    title: "Absolute Telemetry",
    description: "Every action is tracked, measured, and assigned an ROI. We build clear, unfiltered dashboards so you always know your exact return on investment."
  },
  {
    icon: <Unlock className="w-6 h-6 text-primary" />,
    title: "Contract Fluidity",
    description: "Zero long-term lock-ins. We operate on performance, not legal capture. We retain our clients by consistently proving our financial value every single month."
  },
  {
    icon: <Cpu className="w-6 h-6 text-primary" />,
    title: "Algorithmic Precision",
    description: "Hypotheses are tested rigorously. When the data demands a pivot, execution is immediate. No ego, only continuous optimization."
  },
  {
    icon: <MessageSquare className="w-6 h-6 text-primary" />,
    title: "Direct Access",
    description: "No account managers playing telephone. You communicate directly with the engineers and strategists deploying your capital and executing your campaigns."
  }
];

export function Process() {
  return (
    <section id="process" className="py-24 sm:py-32 bg-foreground text-background relative overflow-hidden">
      <div className="container mx-auto px-6 relative z-10">
        <div className="flex flex-col items-center text-center max-w-3xl mx-auto mb-20">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="inline-flex items-center rounded-full border border-background/20 bg-background/5 px-3 py-1 text-sm font-semibold mb-6 uppercase tracking-wider text-background/80"
          >
            Operational Protocols
          </motion.div>
          <motion.h2
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.1 }}
            className="text-4xl sm:text-5xl font-bold font-heading mb-6"
          >
            Built on absolute clarity.
          </motion.h2>
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.2 }}
            className="text-lg text-background/70"
          >
            We operate as an extension of your infrastructure. Methodologies are open-source to you, goals are ruthlessly aligned, and agency-client friction is engineered out of the system entirely.
          </motion.p>
        </div>

        <div className="grid sm:grid-cols-2 gap-x-8 gap-y-12 lg:gap-y-16 max-w-5xl mx-auto">
          {protocols.map((protocol, index) => (
            <motion.div
              key={protocol.title}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: index * 0.1 }}
              className="flex gap-6"
            >
              <div className="shrink-0 w-12 h-12 rounded-xl bg-background/10 flex items-center justify-center">
                {protocol.icon}
              </div>
              <div>
                <h3 className="text-xl font-bold font-heading mb-3">{protocol.title}</h3>
                <p className="text-background/70 leading-relaxed">{protocol.description}</p>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}


================================================================
FILE: src/components/sections/About.tsx
================================================================

import { motion } from 'framer-motion';
import { Button } from '@/components/ui/button';
import { Database, Ban, ActivitySquare, Scale } from 'lucide-react';

export function About() {
  const scrollTo = (id: string) => {
    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <section id="about" className="py-24 sm:py-32 bg-background border-b border-border">
      <div className="container mx-auto px-6">
        <div className="grid lg:grid-cols-2 gap-16 items-center">
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            className="max-w-xl"
          >
            <h2 className="text-4xl sm:text-5xl font-bold font-heading mb-6">Growth is a science.</h2>
            <p className="text-lg text-muted-foreground mb-8 leading-relaxed">
              We approach digital growth with the precision of an engineering discipline. Every strategy is rooted in data, tested rigorously, and scaled only when unit economics are proven. No guesswork, no fluff—just systematic pipeline generation.
            </p>
            <Button size="lg" onClick={() => scrollTo('contact')} className="h-14 px-8 text-base">
              Work with us
            </Button>
          </motion.div>

          <div className="grid grid-cols-2 gap-4 sm:gap-6">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: 0.1 }}
              className="bg-secondary/50 border border-border p-8 rounded-2xl flex flex-col items-center text-center"
            >
              <div className="w-12 h-12 bg-background rounded-full flex items-center justify-center shadow-sm mb-4">
                <Database className="w-5 h-5 text-primary" />
              </div>
              <div className="text-4xl font-bold font-heading mb-2">100%</div>
              <div className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">Data Backed</div>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: 0.2 }}
              className="bg-secondary/50 border border-border p-8 rounded-2xl flex flex-col items-center text-center"
            >
              <div className="w-12 h-12 bg-background rounded-full flex items-center justify-center shadow-sm mb-4">
                <Ban className="w-5 h-5 text-primary" />
              </div>
              <div className="text-4xl font-bold font-heading mb-2">0</div>
              <div className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">Vanity Metrics</div>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: 0.3 }}
              className="bg-secondary/50 border border-border p-8 rounded-2xl flex flex-col items-center text-center"
            >
              <div className="w-12 h-12 bg-background rounded-full flex items-center justify-center shadow-sm mb-4">
                <ActivitySquare className="w-5 h-5 text-primary" />
              </div>
              <div className="text-4xl font-bold font-heading mb-2">24/7</div>
              <div className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">Monitoring</div>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: 0.4 }}
              className="bg-secondary/50 border border-border p-8 rounded-2xl flex flex-col items-center text-center"
            >
              <div className="w-12 h-12 bg-background rounded-full flex items-center justify-center shadow-sm mb-4">
                <Scale className="w-5 h-5 text-primary" />
              </div>
              <div className="text-4xl font-bold font-heading mb-2">∞</div>
              <div className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">Scalability</div>
            </motion.div>
          </div>
        </div>
      </div>
    </section>
  );
}


================================================================
FILE: src/components/sections/Contact.tsx
================================================================

import { useState } from 'react';
import { motion } from 'framer-motion';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Mail, Phone, CheckCircle2 } from 'lucide-react';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';

const contactSchema = z.object({
  firstName: z.string().min(2, "First name is required"),
  lastName: z.string().min(2, "Last name is required"),
  email: z.string().email("Invalid email address"),
  website: z.string().url("Must be a valid URL (include https://)").or(z.literal("")),
  objective: z.string().min(10, "Please provide more detail about your objective")
});

type ContactFormValues = z.infer<typeof contactSchema>;

export function Contact() {
  const [isSubmitted, setIsSubmitted] = useState(false);

  const form = useForm<ContactFormValues>({
    resolver: zodResolver(contactSchema),
    defaultValues: {
      firstName: "",
      lastName: "",
      email: "",
      website: "",
      objective: ""
    }
  });

  const onSubmit = (data: ContactFormValues) => {
    console.log("Form data:", data);
    setIsSubmitted(true);
  };

  return (
    <section id="contact" className="py-24 sm:py-32 bg-foreground text-background">
      <div className="container mx-auto px-6">
        <div className="grid lg:grid-cols-2 gap-16 lg:gap-24">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
          >
            <h2 className="text-4xl sm:text-5xl font-bold font-heading mb-6">Let's discuss your growth.</h2>
            <p className="text-lg text-background/70 mb-12 leading-relaxed max-w-md">
              Fill out the details. Our strategic team will review your current digital footprint and respond with a preliminary execution plan within 24 hours.
            </p>

            <div className="space-y-6">
              <div className="flex items-center gap-4">
                <div className="w-12 h-12 rounded-full bg-background/10 flex items-center justify-center">
                  <Mail className="w-5 h-5 text-primary" />
                </div>
                <div>
                  <div className="text-sm text-background/60 mb-1">Email us</div>
                  <a href="mailto:hello@digitalmorse.com" className="text-lg font-medium hover:text-primary transition-colors">hello@digitalmorse.com</a>
                </div>
              </div>

              <div className="flex items-center gap-4">
                <div className="w-12 h-12 rounded-full bg-background/10 flex items-center justify-center">
                  <Phone className="w-5 h-5 text-primary" />
                </div>
                <div>
                  <div className="text-sm text-background/60 mb-1">Call us</div>
                  <a href="tel:+15550123456" className="text-lg font-medium hover:text-primary transition-colors">+1 (555) 012-3456</a>
                </div>
              </div>
            </div>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.2 }}
            className="bg-background text-foreground p-8 sm:p-10 rounded-2xl"
          >
            {isSubmitted ? (
              <div className="h-full flex flex-col items-center justify-center text-center py-12">
                <div className="w-20 h-20 bg-primary/10 rounded-full flex items-center justify-center mb-6">
                  <CheckCircle2 className="w-10 h-10 text-primary" />
                </div>
                <h3 className="text-3xl font-bold font-heading mb-4">Request Received</h3>
                <p className="text-muted-foreground text-lg mb-8 max-w-sm mx-auto">
                  We've received your information and our strategy team will be in touch within 24 hours.
                </p>
                <Button variant="outline" onClick={() => {
                  form.reset();
                  setIsSubmitted(false);
                }}>
                  Submit another request
                </Button>
              </div>
            ) : (
              <Form {...form}>
                <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
                  <div className="grid sm:grid-cols-2 gap-6">
                    <FormField
                      control={form.control}
                      name="firstName"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>First Name</FormLabel>
                          <FormControl>
                            <Input placeholder="John" {...field} className="bg-secondary/50 border-transparent focus-visible:border-primary" />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    <FormField
                      control={form.control}
                      name="lastName"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Last Name</FormLabel>
                          <FormControl>
                            <Input placeholder="Doe" {...field} className="bg-secondary/50 border-transparent focus-visible:border-primary" />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                  </div>

                  <FormField
                    control={form.control}
                    name="email"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Work Email</FormLabel>
                        <FormControl>
                          <Input placeholder="john@company.com" {...field} className="bg-secondary/50 border-transparent focus-visible:border-primary" />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

                  <FormField
                    control={form.control}
                    name="website"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Company Website</FormLabel>
                        <FormControl>
                          <Input placeholder="https://company.com" {...field} className="bg-secondary/50 border-transparent focus-visible:border-primary" />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

                  <FormField
                    control={form.control}
                    name="objective"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Strategic Objective</FormLabel>
                        <FormControl>
                          <Textarea
                            placeholder="Tell us what metric you need to move..."
                            className="resize-none h-32 bg-secondary/50 border-transparent focus-visible:border-primary"
                            {...field}
                          />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

                  <Button type="submit" size="lg" className="w-full h-14 text-base">
                    Request Proposal
                  </Button>
                </form>
              </Form>
            )}
          </motion.div>
        </div>
      </div>
    </section>
  );
}


================================================================
FILE: vite.config.ts
================================================================

import path from 'path';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  base: '/',
  plugins: [
    react(),
    tailwindcss(),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
    dedupe: ['react', 'react-dom'],
  },
  server: {
    port: 5173,
    host: '0.0.0.0',
  },
});


================================================================
FILE: package.json  (key dependencies)
================================================================

{
  "name": "digital-morse",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@tanstack/react-query": "^5.0.0",
    "@radix-ui/react-label": "^2.1.3",
    "@radix-ui/react-slot": "^1.2.0",
    "@radix-ui/react-toast": "^1.2.7",
    "@radix-ui/react-tooltip": "^1.2.0",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "framer-motion": "^11.0.0",
    "lucide-react": "^0.400.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-hook-form": "^7.55.0",
    "tailwind-merge": "^2.0.0",
    "tw-animate-css": "^1.4.0",
    "wouter": "^3.3.5",
    "zod": "^3.22.0"
  },
  "devDependencies": {
    "@tailwindcss/vite": "^4.0.0",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@vitejs/plugin-react": "^4.0.0",
    "tailwindcss": "^4.0.0",
    "typescript": "^5.0.0",
    "vite": "^6.0.0"
  }
}


================================================================
HOW TO RUN LOCALLY
================================================================

1. Install dependencies:
   npm install

2. Start development server:
   npm run dev

3. Open browser at:
   http://localhost:5173

4. Build for production:
   npm run build

================================================================
NOTES
================================================================

- Primary brand color: #FF3C00 (orange-red) — set as --primary in CSS
- Heading font: Bricolage Grotesque (loaded from Google Fonts)
- Body font: DM Sans (loaded from Google Fonts)
- All navigation uses smooth-scroll (no page reloads)
- Contact form is frontend-only (no backend required)
- Framer Motion handles all entry animations
- Fully responsive (mobile, tablet, desktop)

================================================================
END OF FILE
================================================================