Coholt AI Agent

# Act as an Elite Full-Stack Developer & Award-Winning UI Designer

Build a premium, production-ready, high-conversion landing page for **Cohort**, an AI Agency platform. The aesthetic must be "Linear-meets-Stripe": ultra-clean, dark-mode sophisticated, and fluidly animated.

## 1. Core Technology Stack
- **Framework:** Vite + React 18 (TypeScript)
- **Styling:** Tailwind CSS (Utility-first, JIT engine)
- **Animations:** Framer Motion (Layout transitions, AnimatePresence, Gesture-based interactions)
- **Icons:** Lucide-react
- **Typography:** Inter Tight (Weights: 400, 500, 600, 700) from Google Fonts.
- **Performance:** -webkit-font-smoothing: antialiased; smooth scroll; overflow-x: hidden.

## 2. Design System & Aesthetics
- **Color Palette:**
  - `brand.bg`: #0A0B12 (Deep Obsidian)
  - `brand.panel`: #14161F (Elevated Glass)
  - `brand.violet`: #7C5CFF (Primary Action)
  - `brand.cyan`: #22D3EE (Accent/Highlight)
  - `brand.text`: #E6E8F0 (High-contrast Silver)
  - `brand.muted`: #94A3B8 (Subtext)
- **Global Styles:**
  - Tailwind Config: Extend `fontFamily` with `sans: ['Inter Tight', 'sans-serif']`.
  - Glassmorphism: `bg-opacity-70 backdrop-blur-xl border border-white/10`.
  - Gradients: Use `bg-gradient-to-br from-[#7C5CFF] to-[#22D3EE]` for primary accents.

## 3. Section-By-Section Implementation

### A. Navbar
- **Layout:** Fixed top, 100% width, glass effect (`rgba(10,11,18,0.7)`), `border-b border-white/5`.
- **Logo:** A gradient orb (Violet to Cyan) next to the text "Cohort" (Weight 700, tracking-tighter).
- **Navigation:** Links for "Product", "Agents", "Pricing", "Docs" with subtle hover color shifts.
- **CTA:** "Start free" button as a gradient pill with a `whileHover={{ scale: 1.05 }}` effect.

### B. Hero Section
- **Eyebrow:** A small chip "New: Agent Swarms" featuring a pulsing green dot (`animate-ping`).
- **Headline:** `h1` with `clamp(2.4rem, 7vw, 5.5rem)`, weight 700, tracking -0.03em. Use a text gradient (Violet to Cyan).
- **Animated Keyword Swap:** The sentence "Deploy AI agents that actually [ship] work." The word in brackets should cycle through ['ship', 'close', 'research', 'optimize'] every 2.4s using Framer Motion `AnimatePresence` with a vertical Y-axis flip.
- **Floating Product UI:** A glass panel mock-up below the text. 
  - **Interactive Element:** A fake "Agent Log" terminal window showing line-by-line staggered text reveal.
  - **Progress Bar:** A thin cyan line looping from 0% to 100%.
  - **Floating Bubble:** A large, translucent 3D-style bubble behind the UI with a slow floating animation (`y: [0, -20, 0]`).

### C. Live Demo Strip (Interactive Diagram)
- **Concept:** A "Workflow Orchestrator" diagram.
- **Visuals:** Central "Core AI" node connected to 4 peripheral "Task" nodes via animated SVG paths.
- **Interaction:** Use `framer-motion` to animate "data pulses" (small glowing circles) traveling along the paths from the core to the nodes.

### D. Features (Bento Grid)
- **Layout:** 6-card grid using `grid-cols-1 md:grid-cols-3` with varied `col-span` and `row-span`.
- **Card Styles:** `bg-brand.panel`, `border-white/5`, `hover:border-violet-500/30` with a subtle outer glow.
- **Specific Tiles:**
  - **Tile 1 (Live Analytics):** Animated vertical bars that grow/shrink using `animate={{ height: ... }}`.
  - **Tile 2 (Agent Swarm):** A central SVG icon with 3 smaller "agent dots" orbiting it in a 16s linear infinite rotation.
  - **Tile 3 (Global Reach):** A simplified SVG map with glowing pings on major cities.

### E. Pricing Section
- **Toggle:** Monthly/Yearly switch with a sliding background pill.
- **Tiers:** 3 cards (Starter, Scale, Enterprise).
- **Highlight:** The "Scale" plan should have a `violet` ring, a "Popular" badge, and a `scale: 1.03` effect when it enters the viewport (`whileInView`).
- **Logic:** Prices should animate (count up/down) when the toggle is switched.

### F. Footer
- **Layout:** 4-column grid.
- **Content:** Product, Company, Resources, and Legal links.
- **Bottom Bar:** Copyright text and social icons (Twitter, GitHub, LinkedIn) using `lucide-react`.

## 4. Animations & Micro-Interactions
- **Magnetic Buttons:** Implement a custom hook to make primary CTAs "magnetic," pulling toward the cursor within a 30px radius.
- **Scroll Reveals:** Use `useInView` with `once: true` and a stagger effect of `0.08s` for all list items and grid cards.
- **Count-up Numbers:** For metrics (e.g., "10k+ Agents Deployed"), animate the number from 0 to the target value on scroll.
- **Accessibility:** Wrap all loops in a check for `prefers-reduced-motion` to disable heavy animations for sensitive users.

## 5. Technical Requirements
- **Responsive Design:** Mobile-first approach. Ensure the Bento grid collapses to a single column on screens `< 768px`.
- **Image Strategy:** Use high-quality Unsplash URLs for placeholders:
  - Abstract AI: `https://images.unsplash.com/photo-1677442136019-21780ecad995?auto=format&fit=crop&q=80&w=800`
  - Team/Agency: `https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&q=80&w=800`
- **Code Quality:** Use functional components, clean TypeScript interfaces for props, and modularize the components (Hero.tsx, BentoGrid.tsx, etc.).
- **Tailwind Optimization:** Use arbitrary values only where necessary; stick to the defined design tokens.