From 533d16937c182c475d6f44e0894c76624a7c43cf Mon Sep 17 00:00:00 2001 From: superezz <248160976+superezz@users.noreply.github.com> Date: Tue, 4 Aug 2026 20:13:35 +0530 Subject: [PATCH] feat: implement AI video generator landing page --- .gitignore | 41 + AGENTS.md | 9 + CLAUDE.md | 1 + README.md | 38 +- Theme.md | 419 ++ app/globals.css | 348 + app/layout.tsx | 64 + app/page.tsx | 35 + components.json | 25 + components/icons/github.tsx | 18 + components/landing/CTA.tsx | 72 + components/landing/FAQ.tsx | 75 + components/landing/Features.tsx | 101 + components/landing/Footer.tsx | 142 + components/landing/GitHubRepo.tsx | 133 + components/landing/Header.tsx | 149 + components/landing/Hero.tsx | 272 + components/landing/HowItWorks.tsx | 98 + components/landing/Pricing.tsx | 190 + components/landing/Showcase.tsx | 331 + components/landing/TrustedBy.tsx | 46 + components/landing/WhyChooseUs.tsx | 148 + components/landing/index.ts | 12 + components/ui/accordion.tsx | 72 + components/ui/alert-dialog.tsx | 187 + components/ui/alert.tsx | 76 + components/ui/aspect-ratio.tsx | 22 + components/ui/attachment.tsx | 207 + components/ui/avatar.tsx | 109 + components/ui/badge.tsx | 52 + components/ui/breadcrumb.tsx | 125 + components/ui/bubble.tsx | 128 + components/ui/button-group.tsx | 87 + components/ui/button.tsx | 58 + components/ui/calendar.tsx | 221 + components/ui/card.tsx | 103 + components/ui/carousel.tsx | 242 + components/ui/chart.tsx | 373 + components/ui/checkbox.tsx | 29 + components/ui/collapsible.tsx | 21 + components/ui/combobox.tsx | 297 + components/ui/command.tsx | 196 + components/ui/context-menu.tsx | 271 + components/ui/dialog.tsx | 157 + components/ui/direction.tsx | 6 + components/ui/drawer.tsx | 225 + components/ui/dropdown-menu.tsx | 268 + components/ui/empty.tsx | 104 + components/ui/field.tsx | 238 + components/ui/hover-card.tsx | 51 + components/ui/input-group.tsx | 158 + components/ui/input-otp.tsx | 87 + components/ui/input.tsx | 20 + components/ui/item.tsx | 201 + components/ui/kbd.tsx | 26 + components/ui/label.tsx | 20 + components/ui/marker.tsx | 71 + components/ui/menubar.tsx | 280 + components/ui/message-scroller.tsx | 131 + components/ui/message.tsx | 92 + components/ui/native-select.tsx | 61 + components/ui/navigation-menu.tsx | 168 + components/ui/pagination.tsx | 130 + components/ui/popover.tsx | 90 + components/ui/progress.tsx | 83 + components/ui/radio-group.tsx | 38 + components/ui/resizable.tsx | 50 + components/ui/scroll-area.tsx | 55 + components/ui/select.tsx | 201 + components/ui/separator.tsx | 25 + components/ui/sheet.tsx | 135 + components/ui/sidebar.tsx | 723 ++ components/ui/skeleton.tsx | 13 + components/ui/slider.tsx | 52 + components/ui/spinner.tsx | 10 + components/ui/switch.tsx | 32 + components/ui/table.tsx | 116 + components/ui/tabs.tsx | 82 + components/ui/textarea.tsx | 18 + components/ui/toast.tsx | 234 + components/ui/toggle-group.tsx | 89 + components/ui/toggle.tsx | 45 + components/ui/tooltip.tsx | 66 + constants/index.ts | 337 + eslint.config.mjs | 18 + hooks/use-mobile.ts | 19 + lib/animations.ts | 107 + lib/utils.ts | 6 + next.config.ts | 7 + package-lock.json | 10706 +++++++++++++++++++++++++++ package.json | 42 + postcss.config.mjs | 7 + public/file.svg | 1 + public/globe.svg | 1 + public/next.svg | 1 + public/vercel.svg | 1 + public/window.svg | 1 + tsconfig.json | 34 + types/index.ts | 57 + 99 files changed, 21637 insertions(+), 2 deletions(-) create mode 100644 .gitignore create mode 100644 AGENTS.md create mode 100644 CLAUDE.md create mode 100644 Theme.md create mode 100644 app/globals.css create mode 100644 app/layout.tsx create mode 100644 app/page.tsx create mode 100644 components.json create mode 100644 components/icons/github.tsx create mode 100644 components/landing/CTA.tsx create mode 100644 components/landing/FAQ.tsx create mode 100644 components/landing/Features.tsx create mode 100644 components/landing/Footer.tsx create mode 100644 components/landing/GitHubRepo.tsx create mode 100644 components/landing/Header.tsx create mode 100644 components/landing/Hero.tsx create mode 100644 components/landing/HowItWorks.tsx create mode 100644 components/landing/Pricing.tsx create mode 100644 components/landing/Showcase.tsx create mode 100644 components/landing/TrustedBy.tsx create mode 100644 components/landing/WhyChooseUs.tsx create mode 100644 components/landing/index.ts create mode 100644 components/ui/accordion.tsx create mode 100644 components/ui/alert-dialog.tsx create mode 100644 components/ui/alert.tsx create mode 100644 components/ui/aspect-ratio.tsx create mode 100644 components/ui/attachment.tsx create mode 100644 components/ui/avatar.tsx create mode 100644 components/ui/badge.tsx create mode 100644 components/ui/breadcrumb.tsx create mode 100644 components/ui/bubble.tsx create mode 100644 components/ui/button-group.tsx create mode 100644 components/ui/button.tsx create mode 100644 components/ui/calendar.tsx create mode 100644 components/ui/card.tsx create mode 100644 components/ui/carousel.tsx create mode 100644 components/ui/chart.tsx create mode 100644 components/ui/checkbox.tsx create mode 100644 components/ui/collapsible.tsx create mode 100644 components/ui/combobox.tsx create mode 100644 components/ui/command.tsx create mode 100644 components/ui/context-menu.tsx create mode 100644 components/ui/dialog.tsx create mode 100644 components/ui/direction.tsx create mode 100644 components/ui/drawer.tsx create mode 100644 components/ui/dropdown-menu.tsx create mode 100644 components/ui/empty.tsx create mode 100644 components/ui/field.tsx create mode 100644 components/ui/hover-card.tsx create mode 100644 components/ui/input-group.tsx create mode 100644 components/ui/input-otp.tsx create mode 100644 components/ui/input.tsx create mode 100644 components/ui/item.tsx create mode 100644 components/ui/kbd.tsx create mode 100644 components/ui/label.tsx create mode 100644 components/ui/marker.tsx create mode 100644 components/ui/menubar.tsx create mode 100644 components/ui/message-scroller.tsx create mode 100644 components/ui/message.tsx create mode 100644 components/ui/native-select.tsx create mode 100644 components/ui/navigation-menu.tsx create mode 100644 components/ui/pagination.tsx create mode 100644 components/ui/popover.tsx create mode 100644 components/ui/progress.tsx create mode 100644 components/ui/radio-group.tsx create mode 100644 components/ui/resizable.tsx create mode 100644 components/ui/scroll-area.tsx create mode 100644 components/ui/select.tsx create mode 100644 components/ui/separator.tsx create mode 100644 components/ui/sheet.tsx create mode 100644 components/ui/sidebar.tsx create mode 100644 components/ui/skeleton.tsx create mode 100644 components/ui/slider.tsx create mode 100644 components/ui/spinner.tsx create mode 100644 components/ui/switch.tsx create mode 100644 components/ui/table.tsx create mode 100644 components/ui/tabs.tsx create mode 100644 components/ui/textarea.tsx create mode 100644 components/ui/toast.tsx create mode 100644 components/ui/toggle-group.tsx create mode 100644 components/ui/toggle.tsx create mode 100644 components/ui/tooltip.tsx create mode 100644 constants/index.ts create mode 100644 eslint.config.mjs create mode 100644 hooks/use-mobile.ts create mode 100644 lib/animations.ts create mode 100644 lib/utils.ts create mode 100644 next.config.ts create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 postcss.config.mjs create mode 100644 public/file.svg create mode 100644 public/globe.svg create mode 100644 public/next.svg create mode 100644 public/vercel.svg create mode 100644 public/window.svg create mode 100644 tsconfig.json create mode 100644 types/index.ts diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..5ef6a52 --- /dev/null +++ b/.gitignore @@ -0,0 +1,41 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.* +.yarn/* +!.yarn/patches +!.yarn/plugins +!.yarn/releases +!.yarn/versions + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# env files (can opt-in for committing if needed) +.env* + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 0000000..643577d --- /dev/null +++ b/AGENTS.md @@ -0,0 +1,9 @@ + + +# This is NOT the Next.js you know + +This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` (resolved from this file's directory; in monorepos the `next` package may not be visible from the repo root) before writing any code. Heed deprecation notices. + +This block is written and re-added by `next dev` — verify at `node_modules/next/dist/server/lib/generate-agent-files.js`. Removing it from a diff only re-creates the uncommitted change; committing it with your work keeps the tree clean. + + diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..43c994c --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1 @@ +@AGENTS.md diff --git a/README.md b/README.md index 15f7405..e215bc4 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,36 @@ -# Veodit -𝙰𝚗 𝚘𝚙𝚎𝚗-𝚜𝚘𝚞𝚛𝚌𝚎 𝙰𝙸-𝚙𝚘𝚠𝚎𝚛𝚎𝚍 𝚟𝚒𝚍𝚎𝚘 𝚎𝚍𝚒𝚝𝚒𝚗𝚐 𝚙𝚕𝚊𝚝𝚏𝚘𝚛𝚖 𝚝𝚑𝚊𝚝 𝚝𝚛𝚊𝚗𝚜𝚏𝚘𝚛𝚖𝚜 𝚛𝚊𝚠 𝚏𝚘𝚘𝚝𝚊𝚐𝚎 𝚒𝚗𝚝𝚘 𝚙𝚘𝚕𝚒𝚜𝚑𝚎𝚍 𝚟𝚒𝚍𝚎𝚘𝚜 𝚊𝚞𝚝𝚘𝚖𝚊𝚝𝚒𝚌𝚊𝚕𝚕𝚢. +This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). + +## Getting Started + +First, run the development server: + +```bash +npm run dev +# or +yarn dev +# or +pnpm dev +# or +bun dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. + +This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. + +## Learn More + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! + +## Deploy on Vercel + +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. + +Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. diff --git a/Theme.md b/Theme.md new file mode 100644 index 0000000..3d9618d --- /dev/null +++ b/Theme.md @@ -0,0 +1,419 @@ +# Veodit Design System — Theme.md + +> **Source of Truth for all design decisions in this project.** +> Future contributors and AI agents must read this file before making any UI changes. + +--- + +## 1. Dark Theme Color Palette + +Veodit uses a **dark-first** design with near-black backgrounds and carefully selected accent colors. + +### Background Scale + +| Token | Value | Usage | +|-------|-------|-------| +| `bg-[#09090b]` | `oklch(0.09 0 0)` | Page background (root) | +| `bg-zinc-950` | `oklch(0.09 0 0)` | Equivalent Tailwind token | +| `bg-white/[0.02]` | 2% white alpha | Card surface | +| `bg-white/[0.03]` | 3% white alpha | Slightly elevated card | +| `bg-white/5` | 5% white alpha | Hover states, inputs | +| `bg-white/8` | 8% white alpha | Glassmorphism base | + +### Text Scale + +| Role | Class | Color | +|------|-------|-------| +| Headings | `text-white` | Pure white — `oklch(0.985 0 0)` | +| Body | `text-zinc-300` | `oklch(0.872 0 0)` | +| Secondary | `text-zinc-400` | `oklch(0.708 0 0)` | +| Muted | `text-zinc-500` | `oklch(0.556 0 0)` | +| Disabled | `text-zinc-600` | `oklch(0.439 0 0)` | + +### Accent Gradient (Primary Brand Colors) + +``` +Violet → Cyan → Indigo +from-violet-500 #8b5cf6 oklch(0.606 0.195 293) +to-cyan-500 #06b6d4 oklch(0.717 0.133 215) +``` + +Usage: +- `bg-gradient-to-r from-violet-600 to-cyan-500` — CTA buttons, highlights +- `gradient-text` utility — Headline accents +- `text-violet-400` — Icon colors, labels, badges + +### Border Colors + +| Token | Value | Usage | +|-------|-------|-------| +| `border-white/5` | 5% white | Default card border | +| `border-white/[0.06]` | 6% white | Subtle card border | +| `border-white/[0.08]` | 8% white | Glassmorphism border | +| `border-white/10` | 10% white | Interactive element borders | +| `border-violet-500/20` | Violet accent | Featured/highlighted borders | + +--- + +## 2. Typography Rules + +### Fonts + +- **Primary**: Inter (variable font, loaded via `next/font/google`) +- **Monospace**: Geist Mono (for code, timestamps, editor UI) +- **CSS Variable**: `--font-sans` → Inter, `--font-geist-mono` → Geist Mono + +### Scale + +| Element | Classes | Notes | +|---------|---------|-------| +| Hero H1 | `text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight` | Max `max-w-4xl` | +| Section H2 | `text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight` | | +| Card H3 | `text-base font-semibold` or `text-xl font-semibold` | | +| Body | `text-lg leading-relaxed` | Sections | +| Body small | `text-sm leading-relaxed` | Cards | +| Label | `text-sm font-medium uppercase tracking-widest` | Section labels | +| Caption | `text-xs` | Meta, timestamps | + +### Rules +- **Always** use `tracking-tight` on headings ≥ `text-3xl` +- **Never** use system fonts — always load Inter +- Gradient text uses `gradient-text` utility class (see globals.css) +- No `font-light` — minimum weight is `font-normal` + +--- + +## 3. Spacing Rules + +### Section Spacing +``` +py-24 md:py-32 → Standard sections (96px / 128px vertical) +py-16 md:py-20 → Compact sections (e.g. TrustedBy) +``` + +### Content Width +``` +max-w-7xl mx-auto px-6 → All section containers +max-w-5xl → Pricing grid +max-w-4xl → Hero headline +max-w-2xl mx-auto → Section subheadings +max-w-xl mx-auto → Narrow content blocks +``` + +### Component Internal Spacing +``` +p-6 → Cards (standard) +p-8 → Pricing cards +p-4 → Compact UI panels (editor mockup) +gap-4 → Grid gaps (mobile) +gap-6 → Grid gaps (desktop) +gap-3 → Flex row items +gap-2 → Icon + text pairs +``` + +### Section Header → Content Gap +``` +mb-16 md:mb-20 → Between section header and grid content +``` + +--- + +## 4. Border Radius Rules + +| Size | Value | Usage | +|------|-------|-------| +| `rounded-xl` | 12px | Buttons, inputs, small cards | +| `rounded-2xl` | 16px | Feature cards, modals | +| `rounded-3xl` | 24px | Large showcase panels | +| `rounded-full` | 999px | Badges, pills, toggles, icons | + +> **Rule**: Never use `rounded-md` or smaller on hero/showcase elements. Reserve `rounded-sm` for timeline track segments only. + +--- + +## 5. Shadow Rules + +Only use **soft, subtle** shadows. Never hard-edge or default browser shadows. + +```css +/* Card glow */ +shadow-2xl shadow-violet-500/5 + +/* CTA button hover */ +hover:shadow-[0_0_30px_rgba(139,92,246,0.3)] + +/* Large CTA */ +hover:shadow-[0_0_40px_rgba(139,92,246,0.3)] + +/* Floating card */ +shadow-xl +``` + +> **Rule**: All shadows use the brand violet/cyan or are colorless (`shadow-black/50`). Never use `shadow-gray-*`. + +--- + +## 6. Glassmorphism + +Two utility classes defined in `globals.css`: + +```css +/* Standard glass */ +.glass { + background: oklch(1 0 0 / 5%); + backdrop-filter: blur(16px); + border: 1px solid oklch(1 0 0 / 8%); +} + +/* Strong glass (header on scroll) */ +.glass-strong { + background: oklch(1 0 0 / 8%); + backdrop-filter: blur(24px); + border: 1px solid oklch(1 0 0 / 12%); +} +``` + +**Use glassmorphism on:** +- Sticky header (after scroll) +- Floating accent cards (hero) +- Mobile nav overlay + +**Do NOT use glassmorphism on:** +- Main feature cards (use flat `bg-white/[0.02]`) +- Pricing cards +- Footer + +--- + +## 7. Animation Rules + +All animations use **Framer Motion** (`motion/react`). Variants live in `lib/animations.ts`. + +### Principles +1. **Subtle, not distracting** — max y-offset is 24px for scroll reveals +2. **Performance** — use `transform` and `opacity` only (no width/height animations) +3. **Stagger** — child elements stagger by 80ms (fast) or 150ms (slow) +4. **Duration** — 0.6s with `ease: [0.22, 1, 0.36, 1]` (custom cubic-bezier) +5. **Once** — `whileInView` always uses `viewport={{ once: true }}` +6. **Reduced motion** — CSS `@media (prefers-reduced-motion: reduce)` disables all CSS animations + +### Standard Variants + +```ts +// Use for most scroll reveals +fadeInUp → opacity: 0, y: 24 → opacity: 1, y: 0 +fadeIn → opacity: 0 → opacity: 1 +scaleIn → opacity: 0, scale: 0.92 → opacity: 1, scale: 1 +slideInLeft → opacity: 0, x: -40 → opacity: 1, x: 0 +slideInRight → opacity: 0, x: 40 → opacity: 1, x: 0 + +// Wrap a grid of children +staggerContainer → children stagger 80ms +staggerContainerSlow → children stagger 150ms +``` + +### Hover Interactions + +```ts +whileHover={hoverLift} → y: -4 (card lift) +whileHover={hoverScale} → scale: 1.02 +whileHover={hoverGlow} → boxShadow violet glow +``` + +### CSS-only Background Animations + +```css +.animate-float → translateY 0→-12px, 6s ease-in-out infinite +.animate-float-slow → translateY + slight rotate, 8s +.animate-pulse-glow → opacity + scale pulse, 3s +.animate-marquee → translateX for infinite scroll, 30s +.animate-shimmer → background-position sweep, 2.5s +.animate-gradient-shift → background-position 8s +``` + +--- + +## 8. Component Styling Rules + +### Buttons + +```tsx +// Primary CTA +"bg-gradient-to-r from-violet-600 to-cyan-500 text-white border-0 rounded-xl h-11 px-8 hover:opacity-90 transition-all" + +// Secondary/ghost +"bg-white/5 border border-white/10 text-zinc-300 rounded-xl h-11 px-8 hover:bg-white/10 hover:text-white" + +// White (for header) +"bg-white text-zinc-950 rounded-xl h-9 px-4 hover:bg-zinc-200" +``` + +> This project uses `@base-ui/react/button` under the hood. **Do NOT use `asChild` prop** — it is not supported. For link buttons, use a plain `` tag with button-like classes. + +### Cards + +```tsx +// Standard feature card +"rounded-2xl border border-white/[0.06] bg-white/[0.02] p-6 transition-colors hover:bg-white/[0.04] hover:border-white/[0.1]" + +// Featured/highlighted card (e.g. pricing) +"rounded-2xl border border-violet-500/20 bg-gradient-to-b from-violet-500/[0.06] to-transparent" +``` + +### Inputs + +```tsx +"h-9 rounded-xl border border-white/10 bg-white/5 px-3 text-sm text-white placeholder:text-zinc-600 + outline-none focus:border-violet-500/50 focus:ring-1 focus:ring-violet-500/20" +``` + +### Badges + +```tsx +// Label +"bg-violet-500/10 text-violet-300 border border-violet-500/20 text-xs px-2 py-0.5 rounded-full" + +// Muted +"bg-white/5 text-zinc-500 border border-white/5 text-[10px] px-1.5 h-5 rounded-full" +``` + +--- + +## 9. Accessibility Rules + +1. **Color contrast**: All text must meet WCAG AA (4.5:1 for normal text, 3:1 for large) + - `text-zinc-400` on `bg-[#09090b]` → ✅ passes + - `text-zinc-500` on `bg-white/[0.02]` → Use for non-essential text only +2. **Focus rings**: All interactive elements use `focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50` (inherited from shadcn Button) +3. **Keyboard nav**: Header mobile menu and accordion are keyboard-navigable +4. **Semantic HTML**: Use `
`, `
`, `