cinematic-web 0.1.0

package/assets/templates/base-react/src/sections/Features.jsx

@@ -0,0 +1,238 @@
+import { useEffect, useRef, useState } from 'react'
+import { gsap } from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+
+// ─── Card 1: Diagnostic Shuffler ──────────────────────────────────────────────
+function DiagnosticShuffler({ title, description }) {
+  const ITEMS = [
+    { label: 'Analyzing', value: '98.7%', color: 'var(--color-accent)' },
+    { label: 'Processing', value: '< 2ms', color: 'var(--color-primary)' },
+    { label: 'Verified', value: '✓ Pass', color: '#22c55e' },
+  ]
+  const [active, setActive] = useState(0)
+
+  useEffect(() => {
+    const id = setInterval(() => setActive((a) => (a + 1) % ITEMS.length), 2200)
+    return () => clearInterval(id)
+  }, [])
+
+  return (
+    <div className="relative h-48 flex flex-col justify-end mb-6">
+      {ITEMS.map((item, i) => {
+        const offset = i - active
+        const isVisible = Math.abs(offset) <= 1
+        return (
+          <div
+            key={item.label}
+            className="absolute w-full transition-all duration-700"
+            style={{
+              transform: `translateY(${offset * 52}px) scale(${i === active ? 1 : 0.94})`,
+              opacity: i === active ? 1 : isVisible ? 0.45 : 0,
+              zIndex: i === active ? 10 : 5 - Math.abs(offset),
+            }}
+          >
+            <div
+              className="flex items-center justify-between px-5 py-3 rounded-2xl font-data text-sm"
+              style={{
+                background: i === active ? 'var(--color-dark)' : 'var(--color-primary)/10',
+                border: `1px solid ${i === active ? item.color : 'transparent'}`,
+              }}
+            >
+              <span className="text-white/60">{item.label}</span>
+              <span style={{ color: item.color }} className="font-bold">{item.value}</span>
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+// ─── Card 2: Telemetry Typewriter ──────────────────────────────────────────────
+const TELEMETRY_LINES = [
+  '> Initializing protocol...',
+  '> Data stream: active',
+  '> Running analysis...',
+  '> Signal strength: 99.2%',
+  '> All systems nominal',
+  '> Ready.',
+]
+
+function TelemetryTypewriter({ title, description }) {
+  const [lines, setLines] = useState([])
+  const [charIdx, setCharIdx] = useState(0)
+  const [lineIdx, setLineIdx] = useState(0)
+  const [showCursor, setShowCursor] = useState(true)
+
+  useEffect(() => {
+    const cursorId = setInterval(() => setShowCursor((c) => !c), 530)
+    return () => clearInterval(cursorId)
+  }, [])
+
+  useEffect(() => {
+    if (lineIdx >= TELEMETRY_LINES.length) return
+    const current = TELEMETRY_LINES[lineIdx] ?? ''
+    if (charIdx < current.length) {
+      const id = setTimeout(() => setCharIdx((c) => c + 1), 42)
+      return () => clearTimeout(id)
+    } else {
+      const id = setTimeout(() => {
+        setLines((l) => [...l, current])
+        setCharIdx(0)
+        setLineIdx((l) => l + 1)
+      }, 400)
+      return () => clearTimeout(id)
+    }
+  }, [charIdx, lineIdx])
+
+  const currentLine = TELEMETRY_LINES[lineIdx] ?? ''
+
+  return (
+    <div
+      className="h-48 overflow-hidden rounded-2xl p-4 mb-6 font-data text-xs leading-6"
+      style={{ background: 'var(--color-dark)' }}
+    >
+      {lines.map((l, i) => (
+        <div key={i} className="text-white/40">{l}</div>
+      ))}
+      {lineIdx < TELEMETRY_LINES.length && (
+        <div className="text-white/90">
+          {currentLine.slice(0, charIdx)}
+          <span
+            className="inline-block w-1.5 h-4 ml-0.5 align-middle"
+            style={{
+              background: 'var(--color-accent)',
+              opacity: showCursor ? 1 : 0,
+            }}
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ─── Card 3: Cursor Protocol Scheduler ────────────────────────────────────────
+const DAYS = ['M', 'T', 'W', 'T', 'F', 'S', 'S']
+const HOURS = ['9', '11', '13', '15', '17']
+
+function ProtocolScheduler({ title, description }) {
+  const [cursor, setCursor] = useState({ col: 0, row: 0 })
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      setCursor({
+        col: Math.floor(Math.random() * DAYS.length),
+        row: Math.floor(Math.random() * HOURS.length),
+      })
+    }, 1800)
+    return () => clearInterval(id)
+  }, [])
+
+  return (
+    <div className="h-48 mb-6 flex flex-col justify-center">
+      <div className="grid gap-1" style={{ gridTemplateColumns: `repeat(${DAYS.length}, 1fr)` }}>
+        {DAYS.map((d, ci) => (
+          <div key={ci} className="font-data text-xs text-center text-white/30 pb-1">{d}</div>
+        ))}
+        {HOURS.flatMap((h, ri) =>
+          DAYS.map((_, ci) => {
+            const isActive = cursor.col === ci && cursor.row === ri
+            return (
+              <div
+                key={`${ri}-${ci}`}
+                className="rounded-md h-6 transition-all duration-500"
+                style={{
+                  background: isActive
+                    ? 'var(--color-accent)'
+                    : (ri + ci) % 3 === 0
+                    ? 'var(--color-primary)/30'
+                    : 'var(--color-dark)/30',
+                  transform: isActive ? 'scale(1.1)' : 'scale(1)',
+                  boxShadow: isActive ? '0 0 12px var(--color-accent)' : 'none',
+                }}
+              />
+            )
+          })
+        )}
+      </div>
+    </div>
+  )
+}
+
+// ─── Main Features Section ─────────────────────────────────────────────────────
+const CARD_COMPONENTS = [DiagnosticShuffler, TelemetryTypewriter, ProtocolScheduler]
+
+export default function Features() {
+  const sectionRef = useRef(null)
+  const cardsRef = useRef([])
+
+  const VALUE_PROPS = [
+    { title: '{{valueProp0}}', description: 'Precision diagnostics that surface signal from noise, delivering actionable insights in real time.' },
+    { title: '{{valueProp1}}', description: 'Live telemetry stream keeping you informed at every step with zero latency.' },
+    { title: '{{valueProp2}}', description: 'Intelligent scheduling that optimizes your workflow and eliminates friction.' },
+  ]
+
+  useEffect(() => {
+    const ctx = gsap.context(() => {
+      cardsRef.current.forEach((card, i) => {
+        gsap.from(card, {
+          y: 50,
+          opacity: 0,
+          duration: 0.9,
+          ease: 'power3.out',
+          delay: i * 0.15,
+          scrollTrigger: {
+            trigger: card,
+            start: 'top 80%',
+            toggleActions: 'play none none none',
+          },
+        })
+      })
+    }, sectionRef)
+    return () => ctx.revert()
+  }, [])
+
+  return (
+    <section
+      ref={sectionRef}
+      id="features"
+      className="py-24 md:py-32 px-8 md:px-16 lg:px-24"
+      style={{ background: 'var(--color-background)' }}
+    >
+      <div className="max-w-6xl mx-auto">
+        <p className="font-data text-xs tracking-widest uppercase mb-4" style={{ color: 'var(--color-accent)' }}>
+          Capabilities
+        </p>
+        <h2 className="font-heading font-bold text-4xl md:text-5xl mb-16 tracking-tight" style={{ color: 'var(--color-dark)' }}>
+          Built for precision.
+        </h2>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {VALUE_PROPS.map((prop, i) => {
+            const CardWidget = CARD_COMPONENTS[i]
+            return (
+              <div
+                key={i}
+                ref={(el) => { cardsRef.current[i] = el }}
+                className="rounded-3xl p-6 flex flex-col"
+                style={{
+                  background: i === 1 ? 'var(--color-primary)' : 'var(--color-dark)',
+                }}
+              >
+                <CardWidget title={prop.title} description={prop.description} />
+                <div className="mt-auto">
+                  <h3 className="font-heading font-bold text-lg text-white mb-2 tracking-tight">
+                    {prop.title}
+                  </h3>
+                  <p className="font-heading text-sm text-white/50 leading-relaxed">
+                    {prop.description}
+                  </p>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}

package/assets/templates/base-react/src/sections/Footer.jsx

@@ -0,0 +1,120 @@
+import { useEffect, useRef } from 'react'
+import { gsap } from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+
+const FOOTER_LINKS = {
+  Product: ['Features', 'Protocol', 'Pricing', 'API'],
+  Company: ['About', 'Blog', 'Careers', 'Press'],
+  Legal: ['Privacy', 'Terms', 'Security', 'Cookies'],
+}
+
+export default function Footer() {
+  const footerRef = useRef(null)
+  const dotRef = useRef(null)
+
+  useEffect(() => {
+    const ctx = gsap.context(() => {
+      // Pulsing status dot
+      gsap.to(dotRef.current, {
+        opacity: 0.3,
+        duration: 1.2,
+        ease: 'power2.inOut',
+        repeat: -1,
+        yoyo: true,
+      })
+
+      gsap.from(footerRef.current, {
+        opacity: 0,
+        y: 30,
+        duration: 1,
+        ease: 'power3.out',
+        scrollTrigger: {
+          trigger: footerRef.current,
+          start: 'top 90%',
+          toggleActions: 'play none none none',
+        },
+      })
+    }, footerRef)
+
+    return () => ctx.revert()
+  }, [])
+
+  return (
+    <footer
+      ref={footerRef}
+      className="rounded-t-[4rem] px-8 md:px-16 lg:px-24 pt-16 pb-12"
+      style={{ background: 'var(--color-dark)' }}
+    >
+      <div className="max-w-6xl mx-auto">
+        {/* Top row */}
+        <div className="flex flex-col md:flex-row justify-between items-start gap-12 mb-16">
+          {/* Brand */}
+          <div className="max-w-xs">
+            <p className="font-heading font-bold text-white text-xl mb-3 tracking-tight">
+              {{brand}}
+            </p>
+            <p className="font-heading text-sm text-white/40 leading-relaxed">
+              {{purpose}}
+            </p>
+
+            {/* System status */}
+            <div className="flex items-center gap-2 mt-6">
+              <span
+                ref={dotRef}
+                className="w-2 h-2 rounded-full"
+                style={{ background: '#22c55e' }}
+              />
+              <span className="font-data text-xs text-white/40 tracking-wide">
+                System Operational
+              </span>
+            </div>
+          </div>
+
+          {/* Link columns */}
+          <div className="grid grid-cols-3 gap-8 md:gap-16">
+            {Object.entries(FOOTER_LINKS).map(([group, links]) => (
+              <div key={group}>
+                <p className="font-data text-xs tracking-widest uppercase text-white/30 mb-4">
+                  {group}
+                </p>
+                <ul className="space-y-2.5">
+                  {links.map((link) => (
+                    <li key={link}>
+                      <a
+                        href="#"
+                        className="font-heading text-sm text-white/50 hover:text-white interactive-lift transition-colors duration-200"
+                      >
+                        {link}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Divider */}
+        <div className="h-px mb-8" style={{ background: 'rgba(255,255,255,0.06)' }} />
+
+        {/* Bottom row */}
+        <div className="flex flex-col md:flex-row justify-between items-center gap-4">
+          <p className="font-data text-xs text-white/25">
+            © {new Date().getFullYear()} {{brand}}. All rights reserved.
+          </p>
+          <p className="font-data text-xs text-white/20">
+            Built with{' '}
+            <a
+              href="https://github.com/pushkar-verma/cinematic-web"
+              className="text-white/40 hover:text-white/60 interactive-lift transition-colors duration-200"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              cinematic-web
+            </a>
+          </p>
+        </div>
+      </div>
+    </footer>
+  )
+}

package/assets/templates/base-react/src/sections/Hero.jsx

@@ -0,0 +1,96 @@
+import { useEffect, useRef } from 'react'
+import { gsap } from 'gsap'
+
+// Unsplash image matching preset imageMood
+const HERO_IMAGE = 'https://images.unsplash.com/photo-{{unsplashPhotoId}}?auto=format&fit=crop&w=1920&q=80'
+
+export default function Hero() {
+  const containerRef = useRef(null)
+  const line1Ref = useRef(null)
+  const line2Ref = useRef(null)
+  const subtitleRef = useRef(null)
+  const ctaRef = useRef(null)
+
+  useEffect(() => {
+    const ctx = gsap.context(() => {
+      const tl = gsap.timeline({ defaults: { ease: 'power3.out' } })
+
+      tl.from(line1Ref.current, { y: 40, opacity: 0, duration: 1 })
+        .from(line2Ref.current, { y: 40, opacity: 0, duration: 1.1 }, '-=0.6')
+        .from(subtitleRef.current, { y: 30, opacity: 0, duration: 0.9 }, '-=0.5')
+        .from(ctaRef.current, { y: 20, opacity: 0, duration: 0.8 }, '-=0.4')
+    }, containerRef)
+
+    return () => ctx.revert()
+  }, [])
+
+  return (
+    <section
+      ref={containerRef}
+      id="hero"
+      className="relative w-full"
+      style={{ height: '100dvh' }}
+    >
+      {/* Background image with gradient overlay */}
+      <div
+        className="absolute inset-0 bg-cover bg-center"
+        style={{ backgroundImage: `url('${HERO_IMAGE}')` }}
+        aria-hidden="true"
+      />
+      <div
+        className="absolute inset-0"
+        style={{
+          background: 'linear-gradient(to top, var(--color-primary) 0%, var(--color-dark) 30%, transparent 70%)',
+          opacity: 0.85,
+        }}
+        aria-hidden="true"
+      />
+
+      {/* Content — bottom-left third */}
+      <div className="relative z-10 flex flex-col justify-end h-full px-8 md:px-16 lg:px-24 pb-16 md:pb-24 max-w-5xl">
+        {/* Line 1: bold sans */}
+        <p
+          ref={line1Ref}
+          className="font-heading font-bold text-white/80 text-xl md:text-2xl lg:text-3xl tracking-tight mb-2"
+        >
+          {{heroLine1}}
+        </p>
+
+        {/* Line 2: massive serif italic */}
+        <h1
+          ref={line2Ref}
+          className="font-drama text-white leading-none mb-6"
+          style={{
+            fontSize: 'clamp(3.5rem, 10vw, 9rem)',
+            fontStyle: 'italic',
+          }}
+        >
+          {{heroLine2}}
+        </h1>
+
+        {/* Subtitle */}
+        <p
+          ref={subtitleRef}
+          className="font-heading text-white/60 text-base md:text-lg max-w-xl mb-8 leading-relaxed"
+        >
+          {{purpose}}
+        </p>
+
+        {/* CTA */}
+        <div ref={ctaRef}>
+          <a
+            href="#features"
+            className="btn-magnetic relative inline-flex items-center px-8 py-4 rounded-full text-base font-semibold font-heading text-white overflow-hidden"
+            style={{ background: 'var(--color-accent)' }}
+          >
+            <span
+              className="btn-fill"
+              style={{ background: 'rgba(255,255,255,0.15)' }}
+            />
+            <span className="relative z-10">{{cta}}</span>
+          </a>
+        </div>
+      </div>
+    </section>
+  )
+}

package/assets/templates/base-react/src/sections/Navbar.jsx

@@ -0,0 +1,119 @@
+import { useEffect, useRef, useState } from 'react'
+import { gsap } from 'gsap'
+
+const NAV_LINKS = ['About', 'Features', 'Protocol', 'Pricing']
+
+export default function Navbar() {
+  const navRef = useRef(null)
+  const [scrolled, setScrolled] = useState(false)
+  const [menuOpen, setMenuOpen] = useState(false)
+
+  useEffect(() => {
+    const handleScroll = () => setScrolled(window.scrollY > 80)
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [])
+
+  useEffect(() => {
+    const ctx = gsap.context(() => {
+      gsap.from(navRef.current, {
+        y: -60,
+        opacity: 0,
+        duration: 1,
+        ease: 'power3.out',
+        delay: 0.2,
+      })
+    })
+    return () => ctx.revert()
+  }, [])
+
+  return (
+    <nav
+      ref={navRef}
+      className={`fixed top-4 left-1/2 -translate-x-1/2 z-50 px-6 py-3 rounded-full transition-all duration-500 ${
+        scrolled
+          ? 'bg-[color:var(--color-background)]/60 backdrop-blur-xl border border-[color:var(--color-primary)]/20 shadow-lg'
+          : 'bg-transparent'
+      }`}
+    >
+      <div className="flex items-center gap-8">
+        {/* Logo */}
+        <a
+          href="#"
+          className={`font-heading font-bold text-sm tracking-tight interactive-lift transition-colors duration-300 ${
+            scrolled ? 'text-[color:var(--color-dark)]' : 'text-white'
+          }`}
+        >
+          {{brand}}
+        </a>
+
+        {/* Desktop nav links */}
+        <div className="hidden md:flex items-center gap-6">
+          {NAV_LINKS.map((link) => (
+            <a
+              key={link}
+              href={`#${link.toLowerCase()}`}
+              className={`font-heading text-sm font-medium interactive-lift transition-colors duration-300 ${
+                scrolled
+                  ? 'text-[color:var(--color-dark)]/70 hover:text-[color:var(--color-dark)]'
+                  : 'text-white/70 hover:text-white'
+              }`}
+            >
+              {link}
+            </a>
+          ))}
+        </div>
+
+        {/* CTA */}
+        <a
+          href="#pricing"
+          className="btn-magnetic relative hidden md:inline-flex items-center px-5 py-2 rounded-full text-sm font-semibold font-heading text-white overflow-hidden"
+          style={{ background: 'var(--color-accent)' }}
+        >
+          <span className="btn-fill" style={{ background: 'var(--color-primary)' }} />
+          <span className="relative z-10">{{cta}}</span>
+        </a>
+
+        {/* Mobile hamburger */}
+        <button
+          onClick={() => setMenuOpen(!menuOpen)}
+          className={`md:hidden p-1 transition-colors duration-300 ${
+            scrolled ? 'text-[color:var(--color-dark)]' : 'text-white'
+          }`}
+          aria-label="Toggle menu"
+        >
+          <div className="w-5 flex flex-col gap-1">
+            <span className={`block h-0.5 bg-current transition-transform duration-300 ${menuOpen ? 'rotate-45 translate-y-1.5' : ''}`} />
+            <span className={`block h-0.5 bg-current transition-opacity duration-300 ${menuOpen ? 'opacity-0' : ''}`} />
+            <span className={`block h-0.5 bg-current transition-transform duration-300 ${menuOpen ? '-rotate-45 -translate-y-1.5' : ''}`} />
+          </div>
+        </button>
+      </div>
+
+      {/* Mobile menu */}
+      {menuOpen && (
+        <div className="md:hidden mt-4 pb-2 flex flex-col gap-3">
+          {NAV_LINKS.map((link) => (
+            <a
+              key={link}
+              href={`#${link.toLowerCase()}`}
+              onClick={() => setMenuOpen(false)}
+              className="font-heading text-sm font-medium text-[color:var(--color-dark)] interactive-lift"
+            >
+              {link}
+            </a>
+          ))}
+          <a
+            href="#pricing"
+            onClick={() => setMenuOpen(false)}
+            className="btn-magnetic relative inline-flex items-center justify-center px-5 py-2 rounded-full text-sm font-semibold font-heading text-white overflow-hidden mt-2"
+            style={{ background: 'var(--color-accent)' }}
+          >
+            <span className="btn-fill" style={{ background: 'var(--color-primary)' }} />
+            <span className="relative z-10">{{cta}}</span>
+          </a>
+        </div>
+      )}
+    </nav>
+  )
+}

package/assets/templates/base-react/src/sections/Philosophy.jsx

@@ -0,0 +1,67 @@
+import { useEffect, useRef } from 'react'
+import { gsap } from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+
+const MANIFESTO_WORDS = `{{manifesto}}`.split(' ')
+
+export default function Philosophy() {
+  const sectionRef = useRef(null)
+  const wordsRef = useRef([])
+
+  useEffect(() => {
+    const ctx = gsap.context(() => {
+      gsap.from(wordsRef.current, {
+        opacity: 0.1,
+        duration: 0.6,
+        ease: 'power2.inOut',
+        stagger: 0.05,
+        scrollTrigger: {
+          trigger: sectionRef.current,
+          start: 'top 70%',
+          end: 'bottom 40%',
+          scrub: 1.5,
+        },
+      })
+    }, sectionRef)
+    return () => ctx.revert()
+  }, [])
+
+  return (
+    <section
+      ref={sectionRef}
+      id="about"
+      className="relative py-32 md:py-48 px-8 md:px-16 lg:px-24 overflow-hidden"
+      style={{ background: 'var(--color-dark)' }}
+    >
+      {/* Parallax texture */}
+      <div
+        className="absolute inset-0 opacity-5"
+        style={{
+          backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 0h60v60H0z' fill='none'/%3E%3Ccircle cx='30' cy='30' r='1' fill='white'/%3E%3C/svg%3E")`,
+          backgroundSize: '60px 60px',
+        }}
+        aria-hidden="true"
+      />
+
+      <div className="relative z-10 max-w-4xl mx-auto">
+        <p className="font-data text-xs tracking-widest uppercase mb-12" style={{ color: 'var(--color-accent)' }}>
+          Philosophy
+        </p>
+        <p
+          className="font-drama text-3xl md:text-5xl lg:text-6xl leading-tight"
+          style={{ color: 'var(--color-background)', fontStyle: 'italic' }}
+        >
+          {MANIFESTO_WORDS.map((word, i) => (
+            <span
+              key={i}
+              ref={(el) => { wordsRef.current[i] = el }}
+              className="inline-block mr-[0.25em]"
+            >
+              {word}
+            </span>
+          ))}
+        </p>
+      </div>
+    </section>
+  )
+}