[V0_FILE]plaintext:file=".gitignore" isMerged="true" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" isMerged="true" # Landing page hero *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/rajs-projects-a7283d3f/v0-landing-page-hero) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/projects/TDZy0S0ZtGl) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/rajs-projects-a7283d3f/v0-landing-page-hero](https://vercel.com/rajs-projects-a7283d3f/v0-landing-page-hero)** ## Build your app Continue building your app on: **[https://v0.app/chat/projects/TDZy0S0ZtGl](https://v0.app/chat/projects/TDZy0S0ZtGl)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Analytics } from "@vercel/analytics/next" import "./globals.css" import { Suspense } from "react" import { Open_Sans, Rubik, Instrument_Serif, Geist as V0_Font_Geist, Geist_Mono as V0_Font_Geist_Mono, Source_Serif_4 as V0_Font_Source_Serif_4 } from 'next/font/google' // Initialize fonts const _geist = V0_Font_Geist({ subsets: ['latin'], weight: ["100","200","300","400","500","600","700","800","900"] }) const _geistMono = V0_Font_Geist_Mono({ subsets: ['latin'], weight: ["100","200","300","400","500","600","700","800","900"] }) const _sourceSerif_4 = V0_Font_Source_Serif_4({ subsets: ['latin'], weight: ["200","300","400","500","600","700","800","900"] }) const openSans = Open_Sans({ subsets: ["latin"], weight: ["300", "400", "500", "600", "700", "800"], variable: "--font-open-sans", display: "swap", }) const rubik = Rubik({ subsets: ["latin"], weight: ["300", "400", "500", "600", "700", "800", "900"], variable: "--font-rubik", display: "swap", }) const instrumentSerif = Instrument_Serif({ subsets: ["latin"], weight: ["400"], style: ["italic"], variable: "--font-instrument", display: "swap", }) export const metadata: Metadata = { title: "v0 App", description: "Created with v0", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]json:file="components.json" isMerged="true" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/liquid-metal-background.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { LiquidMetal } from "@paper-design/shaders-react" export function LiquidMetalBackground() { const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) }, []) if (!mounted) { return

} return (

) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true" import * as React from 'react' import { Slot } from '@radix-ui/react-slot' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' const buttonVariants = cva( "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", { variants: { variant: { default: 'bg-primary text-primary-foreground hover:bg-primary/90', destructive: 'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60', outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50', secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50', link: 'text-primary underline-offset-4 hover:underline', }, size: { default: 'h-9 px-4 py-2 has-[>svg]:px-3', sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5', lg: 'h-10 rounded-md px-6 has-[>svg]:px-4', icon: 'size-9', 'icon-sm': 'size-8', 'icon-lg': 'size-10', }, }, defaultVariants: { variant: 'default', size: 'default', }, }, ) function Button({ className, variant, size, asChild = false, ...props }: React.ComponentProps<'button'> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : 'button' return ( ) } export { Button, buttonVariants } [V0_FILE]typescript:file="lib/utils.ts" isMerged="true" import { clsx, type ClassValue } from 'clsx' import { twMerge } from 'tailwind-merge' export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]javascript:file="next.config.mjs" isMerged="true" /** @type {import('next').NextConfig} */ const nextConfig = { eslint: { ignoreDuringBuilds: true, }, typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, }, async headers() { return [ { source: '/:path*', headers: [ { key: 'Cross-Origin-Embedder-Policy', value: 'credentialless', }, { key: 'Cross-Origin-Opener-Policy', value: 'same-origin', }, ], }, ] }, } export default nextConfig [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "build": "next build", "dev": "next dev", "lint": "next lint", "start": "next start" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@paper-design/shaders-react": "latest", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "latest", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.2.4", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76", "framer-motion": "12.23.24" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]javascript:file="postcss.config.mjs" isMerged="true" /** @type {import('postcss-load-config').Config} */ const config = { plugins: { '@tailwindcss/postcss': {}, }, } export default config [V0_FILE]css:file="styles/globals.css" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]json:file="tsconfig.json" isMerged="true" { "compilerOptions": { "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "target": "ES6", "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } [V0_FILE]png:file="public/images/holographic-arrow.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_fMdAovezwa1iq4KXwxrv4er7pKaj/1c0TUzMyXIl4TH-VtQ-2hh/public/images/holographic-arrow.png" isMerged="true" [V0_FILE]png:file="public/images/holographic-star.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_fMdAovezwa1iq4KXwxrv4er7pKaj/x3TAdvY9YJLQ72R1DesdsE/public/images/holographic-star.png" isMerged="true" [V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_fMdAovezwa1iq4KXwxrv4er7pKaj/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png" isMerged="true" [V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_fMdAovezwa1iq4KXwxrv4er7pKaj/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg" isMerged="true" [V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_fMdAovezwa1iq4KXwxrv4er7pKaj/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg" isMerged="true" [V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_fMdAovezwa1iq4KXwxrv4er7pKaj/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_fMdAovezwa1iq4KXwxrv4er7pKaj/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg" isMerged="true" [V0_FILE]typescriptreact:file="components/ui/shiny-button.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { motion, type AnimationProps } from "framer-motion" import { cn } from "@/lib/utils" const animationProps: AnimationProps = { initial: { "--x": "100%", scale: 0.8 }, animate: { "--x": "-100%", scale: 1 }, whileTap: { scale: 0.95 }, transition: { repeat: Number.POSITIVE_INFINITY, repeatType: "loop", repeatDelay: 1, type: "spring", stiffness: 20, damping: 15, mass: 2, scale: { type: "spring", stiffness: 200, damping: 5, mass: 0.5, }, }, } interface ShinyButtonProps extends React.ButtonHTMLAttributes { children: React.ReactNode className?: string } export const ShinyButton: React.FC = ({ children, className, ...props }) => { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.98 0 0); --foreground: oklch(0.145 0 0); --card: oklch(0.98 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(0.98 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.145 0 0); --primary-foreground: oklch(0.98 0 0); --secondary: oklch(0.95 0 0); --secondary-foreground: oklch(0.145 0 0); --muted: oklch(0.95 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.5 0.15 280); --accent-foreground: oklch(0.98 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.98 0 0); --border: oklch(0.88 0 0); --input: oklch(0.88 0 0); --ring: oklch(0.5 0.15 280); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); --font-open-sans: "Open Sans", sans-serif; --font-rubik: "Rubik", sans-serif; --font-instrument: "Instrument Serif", serif; } .dark { --background: oklch(0.08 0.02 280); --foreground: oklch(0.98 0 0); --card: oklch(0.12 0.02 280); --card-foreground: oklch(0.98 0 0); --popover: oklch(0.12 0.02 280); --popover-foreground: oklch(0.98 0 0); --primary: oklch(0.98 0 0); --primary-foreground: oklch(0.145 0 0); --secondary: oklch(0.18 0.02 280); --secondary-foreground: oklch(0.98 0 0); --muted: oklch(0.18 0.02 280); --muted-foreground: oklch(0.65 0 0); --accent: oklch(0.55 0.18 280); --accent-foreground: oklch(0.98 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.98 0 0); --border: oklch(0.18 0.02 280); --input: oklch(0.18 0.02 280); --ring: oklch(0.55 0.18 280); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: var(--font-open-sans); --font-heading: var(--font-rubik); --font-serif: var(--font-instrument); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } .font-open-sans-custom { font-family: "Open Sans", sans-serif; font-optical-sizing: auto; font-weight: 700; font-variation-settings: "wdth" 100; } } /* Added infinite scroll animation for text carousel */ @keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .animate-scroll-left { animation: scroll-left 25s linear infinite; } [V0_FILE]typescriptreact:file="app/features/page.tsx" isMerged="true" import { LiquidMetalBackground } from "@/components/liquid-metal-background" import { FloatingNavbar } from "@/components/floating-navbar" import { Feature } from "@/components/ui/feature-with-advantages" export default function FeaturesPage() { return (

{/* Features Section */}

) } [V0_FILE]typescriptreact:file="app/pricing/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { LiquidMetalBackground } from "@/components/liquid-metal-background" import { FloatingNavbar } from "@/components/floating-navbar" import { BentoPricing } from "@/components/ui/bento-pricing" import { cn } from "@/lib/utils" export default function PricingPage() { return (

{/* Dark opacity mask */}

{/* Dots pattern overlay */}

) } [V0_FILE]typescriptreact:file="components/ui/feature-with-advantages.tsx" isEdit="true" isMerged="true" import { Check } from "lucide-react" import { Badge } from "@/components/ui/badge" function Feature() { return (

Platform

Our Key Features

Discover the powerful features that make our platform the best choice for your business.

Seamless Collaboration

Team collaboration made seamless and efficient.

Automated Workflows

Workflow automation made powerful and simple.

Scalable Infrastructure

Infrastructure that scales dynamically with your needs.

Robust Security

Security made robust and comprehensive.

Code Review Made Easy

Code review made intuitive and efficient.

Cloud-based Deployment

Cloud deployment made quick and reliable.

) } export { Feature } [V0_FILE]typescriptreact:file="components/ui/dot-pattern.tsx" isMerged="true" import { useId } from "react" import { cn } from "@/lib/utils" interface DotPatternProps { width?: number height?: number x?: number y?: number cx?: number cy?: number cr?: number className?: string [key: string]: any } export function DotPattern({ width = 24, height = 24, x = 0, y = 0, cx = 1, cy = 0.5, cr = 0.5, className, ...props }: DotPatternProps) { const id = useId() return ( ) } export default DotPattern [V0_FILE]typescriptreact:file="components/floating-navbar.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" export function FloatingNavbar() { const scrollToSection = (sectionId: string) => { const section = document.getElementById(sectionId) if (section) { section.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "start" }) } } return (

{/* Logo */} {/* Navigation Links */}

{/* CTA Button */}

) } [V0_FILE]typescriptreact:file="components/ui/about-quote.tsx" isEdit="true" isMerged="true" "use client" import DotPattern from "@/components/ui/dot-pattern" export function AboutQuote() { return (

{/* Corner decorations */}

We believe building beautiful, functional products should be simple. This template shows how AI and smart prompting make it easy to turn ideas into clean, professional interfaces.

It's designed to highlight key features, scale with your content, and let your AI-powered product shine - without extra setup or complexity.

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { LiquidMetalBackground } from "@/components/liquid-metal-background" import { FloatingNavbar } from "@/components/floating-navbar" import { ShinyButton } from "@/components/ui/shiny-button" import { Feature } from "@/components/ui/feature-with-advantages" import { BentoPricing } from "@/components/ui/bento-pricing" import { ContactCard } from "@/components/ui/contact-card" import { AboutQuote } from "@/components/ui/about-quote" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { MailIcon, PhoneIcon, MapPinIcon } from "lucide-react" import { cn } from "@/lib/utils" import { useEffect, useRef } from "react" export default function Home() { const scrollContainerRef = useRef(null) const pricingSectionRef = useRef(null) const aboutSectionRef = useRef(null) const contactSectionRef = useRef(null) useEffect(() => { const scrollContainer = scrollContainerRef.current if (!scrollContainer) return const handleWheel = (e: WheelEvent) => { const delta = e.deltaY const currentScroll = scrollContainer.scrollLeft const containerWidth = scrollContainer.offsetWidth const currentSection = Math.round(currentScroll / containerWidth) if (currentSection === 2 && pricingSectionRef.current) { const pricingSection = pricingSectionRef.current const isAtTop = pricingSection.scrollTop === 0 const isAtBottom = pricingSection.scrollTop + pricingSection.clientHeight >= pricingSection.scrollHeight - 1 if (delta > 0 && !isAtBottom) { return } if (delta < 0 && !isAtTop) { return } if (delta < 0 && isAtTop) { e.preventDefault() scrollContainer.scrollTo({ left: 1 * containerWidth, behavior: "smooth", }) return } if (delta > 0 && isAtBottom) { e.preventDefault() scrollContainer.scrollTo({ left: 3 * containerWidth, behavior: "smooth", }) return } } if (currentSection === 3 && aboutSectionRef.current) { const aboutSection = aboutSectionRef.current const isAtTop = aboutSection.scrollTop === 0 const isAtBottom = aboutSection.scrollTop + aboutSection.clientHeight >= aboutSection.scrollHeight - 1 if (delta > 0 && !isAtBottom) { return } if (delta < 0 && !isAtTop) { return } if (delta < 0 && isAtTop) { e.preventDefault() scrollContainer.scrollTo({ left: 2 * containerWidth, behavior: "smooth", }) return } if (delta > 0 && isAtBottom) { e.preventDefault() scrollContainer.scrollTo({ left: 4 * containerWidth, behavior: "smooth", }) return } } if (currentSection === 4 && contactSectionRef.current) { const contactSection = contactSectionRef.current const isAtTop = contactSection.scrollTop === 0 const isAtBottom = contactSection.scrollTop + contactSection.clientHeight >= contactSection.scrollHeight - 1 if (delta > 0 && !isAtBottom) { return } if (delta < 0 && !isAtTop) { return } if (delta < 0 && isAtTop) { e.preventDefault() scrollContainer.scrollTo({ left: 3 * containerWidth, behavior: "smooth", }) return } if (delta > 0 && isAtBottom) { e.preventDefault() return } } e.preventDefault() if (Math.abs(delta) > 10) { let targetSection = currentSection if (delta > 0) { targetSection = Math.min(currentSection + 1, 4) } else { targetSection = Math.max(currentSection - 1, 0) } scrollContainer.scrollTo({ left: targetSection * containerWidth, behavior: "smooth", }) } } scrollContainer.addEventListener("wheel", handleWheel, { passive: false }) return () => scrollContainer.removeEventListener("wheel", handleWheel) }, []) return (

Ideate.{" "} Prompt.{" "} Build.

whether you are a designer, a developer, or just curious, take an idea,{" "} prompt it, and watch it come alive

start building

Name

Phone

Message

</div>
                <Button
                  className="w-full bg-white text-black hover:bg-gray-100 [text-shadow:_0_1px_2px_rgb(0_0_0_/_10%)] font-open-sans-custom"
                  type="button"
                >
                  Submit
                </Button>
              </form>
            </ContactCard>
          </div>
        </section>
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/ui/bento-pricing.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Check, SparklesIcon } from "lucide-react"
import DotPattern from "@/components/ui/dot-pattern"

type PricingCardProps = {
  titleBadge: string
  priceLabel: string
  priceSuffix?: string
  features: string[]
  cta?: string
  className?: string
}

function PricingCard({
  titleBadge,
  priceLabel,
  priceSuffix = "/month",
  features,
  cta = "Subscribe",
  className,
}: PricingCardProps) {
  return (
    <div
      className={cn(
        "bg-white/5 border-white/10 relative overflow-hidden rounded-md border-2",
        "backdrop-blur-sm",
        className,
      )}
    >
      <DotPattern width={5} height={5} />
      <div className="flex items-center gap-3 p-3">
        <Badge variant="secondary" className="bg-white/10 text-white border-white/20 font-open-sans-custom text-xs">
          {titleBadge}
        </Badge>
        <div className="ml-auto">
          <Button
            variant="outline"
            size="sm"
            className="bg-white/5 text-white border-white/20 hover:bg-white/10 font-open-sans-custom text-xs"
          >
            {cta}
          </Button>
        </div>
      </div>

<div className="flex items-end gap-2 px-3 py-1">
        <span className="font-mono text-3xl font-semibold tracking-tight text-white [text-shadow:_0_4px_20px_rgb(0_0_0_/_60%)]">
          {priceLabel}
        </span>
        {priceLabel.toLowerCase() !== "free" && (
          <span className="text-gray-300 text-xs font-open-sans-custom">{priceSuffix}</span>
        )}
      </div>

<ul className="text-gray-300 grid gap-2 p-3 text-xs font-open-sans-custom">
        {features.map((f, i) => (
          <li key={i} className="flex items-center gap-2">
            <Check className="w-[1.05rem] h-[1.05rem] text-white flex-shrink-0" strokeWidth={3} />
            <span>{f}</span>
          </li>
        ))}
      </ul>
    </div>
  )
}

export function BentoPricing() {
  return (
    <div className="grid grid-cols-1 gap-1.5 md:grid-cols-2 lg:grid-cols-8">
      <div
        className={cn(
          "bg-white/5 border-white/10 relative w-full overflow-hidden rounded-md border-2",
          "backdrop-blur-sm",
          "lg:col-span-5",
        )}
      >
        <DotPattern width={5} height={5} />
        <div className="pointer-events-none absolute top-0 left-1/2 -mt-2 -ml-20 h-full w-full [mask-image:linear-gradient(white,transparent)]">
          <div className="from-white/5 to-white/2 absolute inset-0 bg-gradient-to-r [mask-image:radial-gradient(farthest-side_at_top,white,transparent)]">
            <div
              aria-hidden="true"
              className={cn(
                "absolute inset-0 size-full mix-blend-overlay",
                "bg-[linear-gradient(to_right,rgba(255,255,255,0.1)_1px,transparent_1px)]",
                "bg-[size:24px]",
              )}
            />
          </div>
        </div>
        <div className="flex items-center gap-3 p-3">
          <Badge variant="secondary" className="bg-white/10 text-white border-white/20 font-open-sans-custom text-xs">
            PREMIUM
          </Badge>
          <Badge
            variant="outline"
            className="hidden lg:flex bg-white/5 text-white border-white/20 font-open-sans-custom text-xs"
          >
            <SparklesIcon className="me-1 size-3" /> Popular
          </Badge>
          <div className="ml-auto">
            <Button size="sm" className="bg-white text-black hover:bg-gray-100 font-open-sans-custom text-xs">
              Subscribe
            </Button>
          </div>
        </div>
        <div className="flex flex-col p-3 lg:flex-row">
          <div className="pb-2 lg:w-[30%]">
            <span className="font-mono text-3xl font-semibold tracking-tight text-white [text-shadow:_0_4px_20px_rgb(0_0_0_/_60%)]">
              $20
            </span>
            <span className="text-gray-300 text-xs font-open-sans-custom">/month</span>
          </div>
          <ul className="text-gray-300 grid gap-2 text-xs lg:w-[70%] font-open-sans-custom">
            {[
              "$20 of included monthly credits",
              "Purchase additional credits outside of your monthly usage",
              "5x higher attachment size limits",
              "Import from Figma",
            ].map((f, i) => (
              <li key={i} className="flex items-center gap-2">
                <Check className="w-[1.05rem] h-[1.05rem] text-white flex-shrink-0" strokeWidth={3} />
                <span className="leading-relaxed">{f}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>

<PricingCard
        titleBadge="ENTERPRISE"
        priceLabel="Custom"
        priceSuffix=""
        features={[
          "Training opt-out by default",
          "SAML SSO",
          "Priority access for better performance",
          "Dedicated customer support",
        ]}
        className="lg:col-span-8"
        cta="Contact Sales"
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/contact-card.tsx" isEdit="true" isQuickEdit="true"
import type React from "react"
import { cn } from "@/lib/utils"
import { type LucideIcon, PlusIcon } from "lucide-react"
import DotPattern from "@/components/ui/dot-pattern"

type ContactInfoProps = React.ComponentProps<"div"> & {
  icon: LucideIcon
  label: string
  value: string
}

type ContactCardProps = React.ComponentProps<"div"> & {
  title?: string
  description?: string
  contactInfo?: ContactInfoProps[]
  formSectionClassName?: string
}

export function ContactCard({
  title = "Contact With Us",
  description = "If you have any questions regarding our Services or need help, please fill out the form here. We do our best to respond within 1 business day.",
  contactInfo,
  className,
  formSectionClassName,
  children,
  ...props
}: ContactCardProps) {
  return (
    <div
      className={cn(
        "relative grid h-full w-full border-2 border-white/10 bg-white/5 backdrop-blur-sm shadow-lg md:grid-cols-2 lg:grid-cols-3 rounded-lg",
        className,
      )}
      {...props}
    >
      <DotPattern width={5} height={5} />
      <PlusIcon className="absolute -top-3 -left-3 h-6 w-6 text-white [text-shadow:_0_2px_8px_rgb(0_0_0_/_60%)]" />
      <PlusIcon className="absolute -top-3 -right-3 h-6 w-6 text-white [text-shadow:_0_2px_8px_rgb(0_0_0_/_60%)]" />
      <PlusIcon className="absolute -bottom-3 -left-3 h-6 w-6 text-white [text-shadow:_0_2px_8px_rgb(0_0_0_/_60%)]" />
      <PlusIcon className="absolute -right-3 -bottom-3 h-6 w-6 text-white [text-shadow:_0_2px_8px_rgb(0_0_0_/_60%)]" />
      <div className="flex flex-col justify-between lg:col-span-2">
        <div className="relative h-full space-y-4 px-4 py-8 md:p-8">
          <h1 className="text-3xl font-bold md:text-4xl lg:text-5xl text-white [text-shadow:_0_4px_20px_rgb(0_0_0_/_60%)] font-open-sans-custom">
            {title}
          </h1>
          <p className="max-w-xl text-sm md:text-base lg:text-lg text-gray-300 [text-shadow:_0_2px_10px_rgb(0_0_0_/_50%)] font-open-sans-custom">
            {description}
          </p>
          <div className="grid gap-4 md:grid md:grid-cols-2 lg:grid-cols-3">
            {contactInfo?.map((info, index) => (
              <ContactInfo key={index} {...info} />
            ))}
          </div>
        </div>
      </div>
      <div
        className={cn(
          "flex h-full w-full items-center border-t border-white/10 bg-white/10 p-5 md:col-span-1 md:border-t-0 md:border-l",
          formSectionClassName,
        )}
      >
        {children}
      </div>
    </div>
  )
}

function ContactInfo({ icon: Icon, label, value, className, ...props }: ContactInfoProps) {
  return (
    <div className={cn("flex items-center gap-3 py-3", className)} {...props}>
      <div className="rounded-lg bg-white/10 p-3">
        <Icon className="h-5 w-5 text-white" />
      </div>
      <div>
        <p className="font-medium text-white [text-shadow:_0_2px_8px_rgb(0_0_0_/_40%)] font-open-sans-custom">
          {label}
        </p>
        <p className="text-xs text-gray-300 [text-shadow:_0_2px_6px_rgb(0_0_0_/_40%)] font-open-sans-custom">{value}</p>
      </div>
    </div>
  )
}</article></body></html>

Plans and Pricing

Our Key Features

Ideate.{" "} Prompt.{" "} Build.

Plans and Pricing

About Us

About

Tags

Share

About

Tags

Share

More from rajoninternet

More Templates Like This

About

Tags

Share

About

Tags

Share

More from rajoninternet

More Templates Like This