kruk/kamatura-landing/src/App.jsx

Command Line Tool for CrUX Rest API

import { useState, useEffect, useRef } from 'react'
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { Activity, Zap, Twitter, Github, Linkedin, Moon, Sun } from 'lucide-react'
import './index.css'

gsap.registerPlugin(ScrollTrigger)

const NoiseOverlay = () => (
  <svg className="noise-overlay">
    <filter id="noise">
      <feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch" />
      <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 0.5 0" />
    </filter>
    <rect width="100%" height="100%" filter="url(#noise)" />
  </svg>
)

const ThemeToggle = ({ isDark, toggle }) => (
  <button
    onClick={toggle}
    className="btn-magnetic overflow-hidden relative w-10 h-10 rounded-full flex items-center justify-center transition-colors duration-500"
    style={{
      backgroundColor: isDark ? '#F2F0E9' : '#2E4036',
      boxShadow: '0 2px 8px rgba(0,0,0,0.15)'
    }}
  >
    {isDark ? <Sun size={18} className="text-moss" /> : <Moon size={18} className="text-cream" />}
  </button>
)

const Navbar = ({ isDark, toggleTheme }) => {
  const navRef = useRef(null)
  const [scrolled, setScrolled] = useState(false)

  useEffect(() => {
    const nav = navRef.current
    ScrollTrigger.create({
      start: 'top -300',
      onEnter: () => setScrolled(true),
      onLeaveBack: () => setScrolled(false)
    })
  }, [])

  const scrollToSection = (id) => (e) => {
    e.preventDefault()
    const element = document.getElementById(id)
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' })
    }
  }

  return (
    <nav
      ref={navRef}
      className={`fixed top-8 left-1/2 -translate-x-1/2 z-50 px-8 py-4 rounded-full transition-all duration-500 ${
        scrolled || isDark
          ? 'bg-cream/90 dark:bg-dark-surface/90 backdrop-blur-xl border border-moss/20 shadow-lg'
          : 'bg-transparent border-transparent'
      }`}
    >
      <div className="flex items-center gap-6">
        <span className={`font-sans font-semibold text-lg transition-colors duration-500 ${
          scrolled || isDark ? 'text-moss dark:text-cream' : 'text-cream'
        }`}>Kamatura</span>
        <div className="hidden md:flex items-center gap-6">
          <a href="#features" onClick={scrollToSection('features')} className={`font-sans font-medium text-sm transition-colors duration-500 hover:-translate-y-0.5 transition-transform ${
            scrolled || isDark ? 'text-charcoal dark:text-cream/90 hover:text-moss dark:hover:text-moss-light' : 'text-cream/90 hover:text-white'
          }`}>Work</a>
          <a href="#philosophy" onClick={scrollToSection('philosophy')} className={`font-sans font-medium text-sm transition-colors duration-500 hover:-translate-y-0.5 transition-transform ${
            scrolled || isDark ? 'text-charcoal dark:text-cream/90 hover:text-moss dark:hover:text-moss-light' : 'text-cream/90 hover:text-white'
          }`}>About</a>
          <a href="#pricing" onClick={scrollToSection('pricing')} className={`font-sans font-medium text-sm transition-colors duration-500 hover:-translate-y-0.5 transition-transform ${
            scrolled || isDark ? 'text-charcoal dark:text-cream/90 hover:text-moss dark:hover:text-moss-light' : 'text-cream/90 hover:text-white'
          }`}>Pricing</a>
        </div>
        <div className="flex items-center gap-4">
          <button className="btn-magnetic overflow-hidden relative px-5 py-2.5 rounded-full bg-clay text-cream font-sans font-medium text-sm shadow-md hover:shadow-lg">
            <span className="btn-bg bg-moss" />
            <span className="relative z-10">Get Started</span>
          </button>
          <ThemeToggle isDark={isDark} toggle={toggleTheme} />
        </div>
      </div>
    </nav>
  )
}

const Hero = () => {
  const heroRef = useRef(null)

  useEffect(() => {
    const ctx = gsap.context(() => {
      gsap.from('.hero-text', {
        y: 40,
        opacity: 0,
        duration: 1,
        stagger: 0.08,
        ease: 'power3.out'
      })
    }, heroRef)

    return () => ctx.revert()
  }, [])

  return (
    <section id="hero" ref={heroRef} className="relative min-h-screen flex items-end px-8 pb-20 md:px-32 md:pb-32 overflow-hidden">
      <div className="absolute inset-0 z-0">
        <img
          src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=1920&q=80"
          alt="Dark forest organic textures"
          className="w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-moss/90 via-moss/60 to-charcoal/95 dark:from-dark-bg/95 dark:via-charcoal/90 dark:to-charcoal/95" />
      </div>
      <div className="relative z-10 max-w-4xl space-y-8">
        <h1 className="hero-text font-sans font-semibold text-5xl md:text-7xl text-cream tracking-tight leading-none">
          Engineering is
        </h1>
        <h2 className="hero-text font-serif italic text-7xl md:text-9xl text-cream tracking-tight leading-none">
          Future.
        </h2>
        <button className="btn-magnetic overflow-hidden relative hero-text inline-flex px-8 py-4 rounded-full bg-clay text-cream font-sans font-semibold text-lg">
          <span className="btn-bg bg-moss" />
          <span className="relative z-10">Think. Build. Deploy.</span>
        </button>
      </div>
    </section>
  )
}

const Features = () => {
  const featuresRef = useRef(null)

  useEffect(() => {
    const ctx = gsap.context(() => {
      gsap.from('.feature-card', {
        y: 60,
        opacity: 0,
        duration: 1,
        stagger: 0.15,
        ease: 'power3.out',
        scrollTrigger: {
          trigger: featuresRef.current,
          start: 'top 80%'
        }
      })
    }, featuresRef)

    return () => ctx.revert()
  }, [])

  return (
    <section id="features" ref={featuresRef} className="py-20 px-8 md:px-32 bg-cream dark:bg-dark-bg transition-colors duration-500">
      <div className="max-w-6xl mx-auto">
        <h2 className="font-sans font-semibold text-4xl md:text-5xl text-charcoal dark:text-cream tracking-tight mb-4">
          Our Approach
        </h2>
        <p className="font-sans text-lg text-moss dark:text-cream/70 mb-16">AI-native engineering for pragmatic programmers</p>
        <div className="grid md:grid-cols-3 gap-8">
          <div className="feature-card bg-white dark:bg-dark-surface rounded-3xl p-8 border border-moss/20 dark:border-moss/30 space-y-6">
            <span className="font-mono text-xs font-semibold text-clay tracking-wider">AI NATIVE</span>
            <h3 className="font-sans font-semibold text-2xl text-charcoal dark:text-cream">Intelligence First</h3>
            <p className="font-sans text-moss dark:text-cream/70">AI-powered diagnostics and predictive modeling built into every layer.</p>
            <div className="bg-cream dark:bg-dark-bg rounded-2xl p-4 space-y-2">
              <div className="bg-white dark:bg-dark-surface rounded-xl p-3 flex items-center gap-2">
                <Activity size={16} className="text-clay" />
                <span className="font-mono text-xs text-moss dark:text-cream/80">Analyzing patterns...</span>
              </div>
              <div className="bg-white dark:bg-dark-surface rounded-xl p-3 flex items-center gap-2">
                <Zap size={16} className="text-clay" />
                <span className="font-mono text-xs text-moss dark:text-cream/80">Optimizing...</span>
              </div>
            </div>
          </div>

          <div className="feature-card bg-white dark:bg-dark-surface rounded-3xl p-8 border border-moss/20 dark:border-moss/30 space-y-6">
            <span className="font-mono text-xs font-semibold text-clay tracking-wider">PRAGMATIC</span>
            <h3 className="font-sans font-semibold text-2xl text-charcoal dark:text-cream">Practical Results</h3>
            <p className="font-sans text-moss dark:text-cream/70">Real-world solutions that ship fast and scale efficiently.</p>
            <div className="bg-cream dark:bg-dark-bg rounded-2xl p-4 space-y-3">
              <div className="flex items-center gap-2">
                <div className="w-2 h-2 rounded-full bg-clay animate-pulse-slow" />
                <span className="font-mono text-xs font-semibold text-clay tracking-wider">LIVE FEED</span>
              </div>
              <div className="bg-charcoal dark:bg-dark-bg rounded-lg p-3 space-y-1.5">
                <p className="font-mono text-xs text-cream">&gt; Initializing build pipeline...</p>
                <p className="font-mono text-xs text-cream">&gt; Optimizing dependencies_</p>
              </div>
            </div>
          </div>

          <div className="feature-card bg-white dark:bg-dark-surface rounded-3xl p-8 border border-moss/20 dark:border-moss/30 space-y-6">
            <span className="font-mono text-xs font-semibold text-clay tracking-wider">PROGRAMMERS</span>
            <h3 className="font-sans font-semibold text-2xl text-charcoal dark:text-cream">Developer Focus</h3>
            <p className="font-sans text-moss dark:text-cream/70">Built by developers, for developers. Tools that respect your craft.</p>
            <div className="bg-cream dark:bg-dark-bg rounded-2xl p-4">
              <div className="flex items-center gap-1">
                {['M', 'T', 'W', 'T', 'F', 'S', 'S'].map((day, i) => (
                  <div
                    key={i}
                    className={`w-9 h-9 rounded-lg flex items-center justify-center font-mono text-sm font-medium ${
                      i === 1 ? 'bg-clay text-cream' : 'bg-white dark:bg-dark-surface text-moss dark:text-cream/80'
                    }`}
                  >
                    {day}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

const Philosophy = () => {
  const philRef = useRef(null)

  useEffect(() => {
    const ctx = gsap.context(() => {
      gsap.from('.phil-text', {
        y: 30,
        opacity: 0,
        duration: 1,
        stagger: 0.1,
        ease: 'power3.out',
        scrollTrigger: {
          trigger: philRef.current,
          start: 'top 80%'
        }
      })
    }, philRef)

    return () => ctx.revert()
  }, [])

  return (
    <section id="philosophy" ref={philRef} className="relative py-32 px-8 md:px-32 bg-charcoal dark:bg-dark-bg overflow-hidden">
      <div className="absolute inset-0 z-0">
        <img
          src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=1920&q=80"
          alt="Parallax texture"
          className="w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-charcoal/95 dark:bg-dark-bg/97" />
      </div>
      <div className="relative z-10 max-w-4xl mx-auto space-y-12">
        <p className="phil-text font-sans text-xl md:text-2xl text-gray-400 dark:text-cream/60">Most engineering agencies focus on:</p>
        <p className="phil-text font-sans text-xl md:text-2xl text-gray-400 dark:text-cream/60">Bleeding-edge hype that never ships.</p>
        <div className="phil-text w-32 h-0.5 bg-clay" />
        <p className="phil-text font-sans text-2xl md:text-3xl text-cream dark:text-cream font-medium">We focus on:</p>
        <h2 className="phil-text font-serif italic text-4xl md:text-6xl text-clay tracking-tight">
          Pragmatic solutions that
        </h2>
        <h3 className="phil-text font-sans text-4xl md:text-6xl text-cream dark:text-cream tracking-tight font-medium">
          actually work.
        </h3>
      </div>
    </section>
  )
}

const Protocol = () => {
  const protocolRef = useRef(null)

  useEffect(() => {
    const ctx = gsap.context(() => {
      gsap.utils.toArray('.protocol-card').forEach((card, i) => {
        gsap.from(card, {
          y: 100,
          opacity: 0,
          duration: 1,
          ease: 'power3.out',
          scrollTrigger: {
            trigger: card,
            start: 'top 80%'
          }
        })
      })
    }, protocolRef)

    return () => ctx.revert()
  }, [])

  return (
    <section ref={protocolRef} className="py-20 px-8 md:px-32 bg-cream dark:bg-dark-bg transition-colors duration-500">
      <h2 className="font-sans font-semibold text-4xl md:text-5xl text-charcoal dark:text-cream tracking-tight mb-16 text-center">
        Our Process
      </h2>
      <div className="max-w-6xl mx-auto space-y-8">
        {[
          { num: '01', title: 'Discover', desc1: 'We dive deep into your challenges,', desc2: 'understanding nuances before we build.', icon: 'rings' },
          { num: '02', title: 'Design', desc1: 'Crafting elegant solutions that', desc2: 'balance innovation with practicality.', icon: 'laser' },
          { num: '03', title: 'Deliver', desc1: 'Ship production-ready code', desc2: 'that scales from day one.', icon: 'wave' }
        ].map((step, i) => (
          <div key={i} className={`protocol-card bg-white dark:bg-dark-surface rounded-3xl p-8 md:p-16 border border-moss/20 dark:border-moss/50 flex flex-col md:flex-row gap-12 items-center ${i > 0 ? 'md:-mt-20' : ''} shadow-sm dark:shadow-2xl dark:shadow-clay/20`}>
            <span className="font-mono font-semibold text-9xl text-moss/10 dark:text-moss/20">{step.num}</span>
            <div className="flex-1 space-y-6">
              <h3 className="font-sans font-semibold text-3xl md:text-4xl text-charcoal dark:text-cream tracking-tight">{step.title}</h3>
              <p className="font-sans text-lg text-moss dark:text-cream/70">{step.desc1}</p>
              <p className="font-sans text-lg text-moss dark:text-cream/70">{step.desc2}</p>
            </div>
            <div className={`w-64 h-64 md:w-96 md:h-96 rounded-full flex items-center justify-center transition-all duration-500 ${
              i === 0 ? 'bg-cream dark:bg-dark-bg dark:shadow-inner dark:shadow-moss/20' :
              i === 1 ? 'bg-cream dark:bg-dark-bg dark:shadow-inner dark:shadow-clay/20' :
                        'bg-cream dark:bg-dark-bg dark:shadow-inner dark:shadow-moss/20'
            }`}>
              {step.icon === 'rings' && (
                <div className="relative w-48 h-48">
                  <div className="absolute inset-0 rounded-full border-2 border-moss dark:border-moss-light dark:shadow-0 0 20px -4px rgba(46, 64, 54, 0.2)" />
                  <div className="absolute inset-8 rounded-full border-2 border-clay dark:shadow-[0_0_15px_-3px_rgba(204, 88, 51, 0.3)]" />
                  <div className="absolute inset-16 rounded-full border-2 border-moss dark:border-moss-light dark:shadow-0 0 10px -2px rgba(46, 64, 54, 0.15)" />
                </div>
              )}
              {step.icon === 'laser' && (
                <div className="w-full h-full grid grid-cols-4 gap-2 p-8 relative">
                  {Array.from({ length: 16 }).map((_, i) => (
                    <div key={i} className="bg-moss/20 dark:bg-moss/30 dark:shadow-inner rounded-sm" />
                  ))}
                  <div className="absolute top-1/2 w-full h-0.5 bg-gradient-to-r from-transparent via-clay to-transparent dark:via-moss-light" />
                </div>
              )}
              {step.icon === 'wave' && (
                <svg width="200" height="100" viewBox="0 0 200 100" className="overflow-visible">
                  <defs>
                    <linearGradient id="waveGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                      <stop offset="0%" stopColor="#CC5833" />
                      <stop offset="100%" stopColor="#2E4036" />
                    </linearGradient>
                  </defs>
                  <path
                    d="M 0 50 Q 50 0 100 50 T 200 50"
                    stroke="url(#waveGradient)"
                    strokeWidth="3"
                    fill="none"
                    strokeLinecap="round"
                    className="animate-pulse-slow"
                    filter="drop-shadow(0 0 8px rgba(204, 88, 51, 0.4))"
                  />
                </svg>
              )}
            </div>
          </div>
        ))}
      </div>
    </section>
  )
}

const Pricing = () => {
  return (
    <section id="pricing" className="py-32 px-8 md:px-32 bg-cream dark:bg-dark-bg transition-colors duration-500">
      <div className="max-w-6xl mx-auto">
        <h2 className="font-sans font-semibold text-4xl md:text-5xl text-charcoal dark:text-cream tracking-tight mb-4 text-center">
          Get Started
        </h2>
        <p className="font-sans text-lg text-moss dark:text-cream/70 mb-16 text-center">
          Choose engagement model that fits your needs.
        </p>
        <div className="grid md:grid-cols-3 gap-8 items-center">
          <div className="bg-white dark:bg-dark-surface rounded-3xl p-10 border border-moss/20 dark:border-moss/30 space-y-6">
            <h3 className="font-sans font-semibold text-2xl text-charcoal dark:text-cream">Essential</h3>
            <div>
              <span className="font-serif text-5xl font-semibold text-charcoal dark:text-cream">$15K</span>
              <span className="font-sans text-gray-400 dark:text-cream/60 ml-2">per project</span>
            </div>
            <p className="font-sans text-moss dark:text-cream/70">Perfect for early-stage startups and MVPs.</p>
            <button className="btn-magnetic overflow-hidden relative w-full px-6 py-3 rounded-full bg-moss text-cream font-sans font-semibold">
              <span className="btn-bg bg-clay" />
              <span className="relative z-10">Get Started</span>
            </button>
          </div>

          <div className="bg-moss dark:bg-dark-bg rounded-3xl p-10 border-2 border-clay space-y-6 transform md:scale-105 shadow-2xl relative overflow-hidden">
            <div className="absolute inset-0 bg-gradient-to-br from-moss via-moss-light to-moss dark:from-dark-surface dark:via-dark-bg dark:to-dark-bg" />
            <div className="relative z-10">
              <h3 className="font-sans font-semibold text-2xl text-cream">Performance</h3>
              <div>
                <span className="font-serif text-6xl font-semibold text-cream">$45K</span>
                <span className="font-sans text-gray-400 dark:text-cream/60 ml-2">per project</span>
              </div>
              <p className="font-sans text-cream">Full-stack engineering with AI integration.</p>
              <button className="btn-magnetic overflow-hidden relative w-full px-6 py-3 rounded-full bg-clay text-cream font-sans font-semibold">
                <span className="btn-bg bg-cream dark:bg-dark-bg" />
                <span className="relative z-10">Get Started</span>
              </button>
            </div>
          </div>

          <div className="bg-white dark:bg-dark-surface rounded-3xl p-10 border border-moss/20 dark:border-moss/30 space-y-6">
            <h3 className="font-sans font-semibold text-2xl text-charcoal dark:text-cream">Enterprise</h3>
            <div>
              <span className="font-serif text-5xl font-semibold text-charcoal dark:text-cream">Custom</span>
              <span className="font-sans text-gray-400 dark:text-cream/60 ml-2">let's talk</span>
            </div>
            <p className="font-sans text-moss dark:text-cream/70">Dedicated teams and long-term partnerships.</p>
            <button className="btn-magnetic overflow-hidden relative w-full px-6 py-3 rounded-full bg-moss text-cream font-sans font-semibold">
              <span className="btn-bg bg-clay" />
              <span className="relative z-10">Contact Us</span>
            </button>
          </div>
        </div>
      </div>
    </section>
  )
}

const Footer = () => (
  <footer className="bg-charcoal dark:bg-dark-bg rounded-t-[4rem] pt-20 pb-10 px-8 md:px-32 transition-colors duration-500">
    <div className="max-w-6xl mx-auto">
      <div className="grid md:grid-cols-4 gap-16 mb-16">
        <div className="space-y-4">
          <h3 className="font-sans font-semibold text-2xl text-cream">Kamatura</h3>
          <p className="font-sans text-gray-400 dark:text-cream/70 max-w-xs">AI-native engineering for pragmatic programmers.</p>
          <div className="flex items-center gap-2">
            <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
            <span className="font-mono text-xs font-semibold text-green-500 tracking-wider">SYSTEM OPERATIONAL</span>
          </div>
        </div>
        <div className="space-y-4">
          <h4 className="font-sans font-semibold text-cream">Company</h4>
          <div className="space-y-2">
            <a href="#" className="font-sans text-gray-400 dark:text-cream/70 hover:text-cream dark:hover:text-cream transition-colors">About</a>
            <a href="#" className="font-sans text-gray-400 dark:text-cream/70 hover:text-cream dark:hover:text-cream transition-colors">Careers</a>
            <a href="#" className="font-sans text-gray-400 dark:text-cream/70 hover:text-cream dark:hover:text-cream transition-colors">Blog</a>
          </div>
        </div>
        <div className="space-y-4">
          <h4 className="font-sans font-semibold text-cream">Product</h4>
          <div className="space-y-2">
            <a href="#" className="font-sans text-gray-400 dark:text-cream/70 hover:text-cream dark:hover:text-cream transition-colors">Services</a>
            <a href="#" className="font-sans text-gray-400 dark:text-cream/70 hover:text-cream dark:hover:text-cream transition-colors">Case Studies</a>
            <a href="#" className="font-sans text-gray-400 dark:text-cream/70 hover:text-cream dark:hover:text-cream transition-colors">Documentation</a>
          </div>
        </div>
        <div className="space-y-4">
          <h4 className="font-sans font-semibold text-cream">Legal</h4>
          <div className="space-y-2">
            <a href="#" className="font-sans text-gray-400 dark:text-cream/70 hover:text-cream dark:hover:text-cream transition-colors">Privacy</a>
            <a href="#" className="font-sans text-gray-400 dark:text-cream/70 hover:text-cream dark:hover:text-cream transition-colors">Terms</a>
          </div>
        </div>
      </div>
      <div className="border-t border-moss/20 dark:border-moss/10 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
        <p className="font-sans text-gray-400 dark:text-cream/70 text-sm">© 2024 Kamatura Media. All rights reserved.</p>
        <div className="flex items-center gap-6">
          <a href="#" className="text-gray-400 dark:text-cream/70 hover:text-cream dark:hover:text-cream transition-colors"><Twitter size={20} /></a>
          <a href="#" className="text-gray-400 dark:text-cream/70 hover:text-cream dark:hover:text-cream transition-colors"><Github size={20} /></a>
          <a href="#" className="text-gray-400 dark:text-cream/70 hover:text-cream dark:hover:text-cream transition-colors"><Linkedin size={20} /></a>
        </div>
      </div>
    </div>
  </footer>
)

const App = () => {
  const [isDark, setIsDark] = useState(() => {
    if (typeof window !== 'undefined') {
      const saved = localStorage.getItem('theme')
      if (saved) {
        return saved === 'dark'
      }
      return window.matchMedia('(prefers-color-scheme: dark)').matches
    }
    return false
  })

  useEffect(() => {
    const root = document.documentElement
    if (isDark) {
      root.classList.add('dark')
    } else {
      root.classList.remove('dark')
    }
    localStorage.setItem('theme', isDark ? 'dark' : 'light')
  }, [isDark])

  useEffect(() => {
    window.scrollTo(0, 0)
  }, [])

  const toggleTheme = () => {
    setIsDark(!isDark)
  }

  return (
    <>
      <NoiseOverlay />
      <Navbar isDark={isDark} toggleTheme={toggleTheme} />
      <main className="transition-colors duration-500">
        <Hero />
        <Features />
        <Philosophy />
        <Protocol />
        <Pricing />
      </main>
      <Footer />
    </>
  )
}

export default App