Sinar Terang

Recreate this exact high-performance, single-page web experience — pixel-perfect match.

═══════════════════════════════════════
1. TECH STACK & EXECUTION SCOPE
═══════════════════════════════════════
- Framework & Stack: React + Vite, TypeScript, Tailwind CSS, Framer Motion, Lucide Icons
- Icons: lucide-react (Play, ArrowUpRight, Menu, X, Check, Star, Sparkles, Layers)
- Page Layout: Full-viewport responsive single-page (`w-full min-h-screen overflow-x-hidden`)
- Target Category: Architecture & Interior
- Main Title: "Sinar Terang"

═══════════════════════════════════════
2. FONTS & DESIGN TOKENS (EXACT)
═══════════════════════════════════════
Google Fonts / Imports:
1) Heading Font: 'Instrument Serif', serif/display (Headlines, Hero title, Key Stats)
2) Body & UI Font: 'Inter', sans-serif (Buttons, Nav, Body copy, Badges)

Color Palette Tokens:
- Page Background: `#fcfcff` (Deep slate obsidian)
- Primary Brand Accent: `#cc2525` (Electric brand highlight)
- Secondary Ambient Glow: `#f73939` (Glow overlay & active states)
- Surface Cards: `bg-white/5 backdrop-blur-md border border-white/10 text-white`
- Visual Style Theme: Luxury Editorial

═══════════════════════════════════════
3. COMPONENT HIERARCHY & LAYOUT STRUCTURE
═══════════════════════════════════════
Outer Wrapper: `relative min-h-screen w-full bg-[#fcfcff] text-white overflow-x-hidden`

── SECTION A: NAVIGATION BAR ──
- Sticky Glass Header: `sticky top-0 z-50 backdrop-blur-xl bg-black/40 border-b border-white/10`
- Left: Brand Logo & Title ("Sinar Terang")
- Center: Desktop Nav Links (About, Features, Showcase, Pricing, FAQ)
- Right: Action Buttons (Theme Toggle, Live Demo, Action CTA)

── SECTION B: HERO CANVAS & HEADLINE ──
- High-impact Hero Pill Badge: `px-4 py-1.5 rounded-full bg-[#cc2525]/10 border border-[#cc2525]/30 text-[#cc2525] text-xs uppercase tracking-widest`
- Giant Typography Headline: Font 'Instrument Serif', responsive size (48px mobile -> 110px desktop), `-0.04em` letter-spacing, line-height 0.9
- Dual Action CTAs: Primary Button (`bg-[#cc2525] hover:opacity-90`) + Secondary Demo Button (`border border-white/20 hover:bg-white/10`)

── SECTION C: REQUIRED SECTIONS & CONTENT BLOCK ──
1. **Cinematic Full-Screen Hero**
2. **Scroll-Triggered Editorial Manifesto**
3. **Signature Projects Timeline Showcase**
4. **Materials & Craftsmanship Reveal**
5. **Immersive Light & Space Animation**
6. **Client & Press Carousel**
7. **Sticky Glass Footer CTA**

── SECTION D: FOOTER & MARQUEE ──
- Multi-column layout with quick links, newsletter form, social icons, and animated scrolling marquee text.

═══════════════════════════════════════
4. ANIMATIONS & MOTION PHYSICS
═══════════════════════════════════════
- Motion Spec: Cinematic (Scroll-Driven Timeline)
- Keyframe Animations:
  * `wordReveal`: `from { opacity: 0; transform: translateY(100%); filter: blur(4px); } to { opacity: 1; transform: translateY(0); filter: blur(0); }`
  * `fadeUp`: `from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); }`
  * `scaleIn`: `from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); }`
- Hover States: Cards scale `1.02x` with `#f73939` border glow and spring easing `cubic-bezier(0.16, 1, 0.3, 1)`.

═══════════════════════════════════════
5. STRICT CONSTRAINTS (DO NOT)
═══════════════════════════════════════
- DO NOT use generic plain colors or browser defaults; stick to the specified token palette.
- DO NOT omit responsive breakpoints (`sm:`, `md:`, `lg:`, `xl:`).
- DO NOT use placeholder text where specific section copy can be generated cleanly.
- DO NOT break visual hierarchy; preserve dark obsidian theme with crisp typography contrast.