├── src
    ├── lib
    │   ├── index.ts
    │   └── cn.ts
    ├── utils
    │   ├── index.ts
    │   └── metadata.ts
    ├── components
    │   ├── ui
    │   │   ├── aspect-ratio.tsx
    │   │   ├── skeleton.tsx
    │   │   ├── collapsible.tsx
    │   │   ├── textarea.tsx
    │   │   ├── label.tsx
    │   │   ├── input.tsx
    │   │   ├── separator.tsx
    │   │   ├── progress.tsx
    │   │   ├── toaster.tsx
    │   │   ├── sonner.tsx
    │   │   ├── checkbox.tsx
    │   │   ├── slider.tsx
    │   │   ├── switch.tsx
    │   │   ├── badge.tsx
    │   │   ├── tooltip.tsx
    │   │   ├── hover-card.tsx
    │   │   ├── popover.tsx
    │   │   ├── avatar.tsx
    │   │   ├── radio-group.tsx
    │   │   ├── toggle.tsx
    │   │   ├── alert.tsx
    │   │   ├── scroll-area.tsx
    │   │   ├── resizable.tsx
    │   │   ├── toggle-group.tsx
    │   │   ├── tabs.tsx
    │   │   ├── card.tsx
    │   │   ├── accordion.tsx
    │   │   ├── ripple.tsx
    │   │   ├── input-otp.tsx
    │   │   ├── button.tsx
    │   │   ├── orbiting-circles.tsx
    │   │   ├── calendar.tsx
    │   │   ├── breadcrumb.tsx
    │   │   ├── pagination.tsx
    │   │   ├── table.tsx
    │   │   ├── drawer.tsx
    │   │   ├── magic-card.tsx
    │   │   ├── dialog.tsx
    │   │   ├── sheet.tsx
    │   │   ├── form.tsx
    │   │   ├── alert-dialog.tsx
    │   │   ├── toast.tsx
    │   │   ├── command.tsx
    │   │   ├── navigation-menu.tsx
    │   │   ├── select.tsx
    │   │   ├── carousel.tsx
    │   │   ├── context-menu.tsx
    │   │   └── dropdown-menu.tsx
    │   ├── global
    │   │   ├── wrapper.tsx
    │   │   └── container.tsx
    │   └── marketing
    │   │   ├── companies.tsx
    │   │   ├── mobile-menu.tsx
    │   │   ├── navbar.tsx
    │   │   ├── lang-support.tsx
    │   │   ├── cta.tsx
    │   │   ├── features.tsx
    │   │   ├── integration.tsx
    │   │   ├── hero.tsx
    │   │   └── pricing.tsx
    ├── constants
    │   ├── links.ts
    │   ├── index.ts
    │   ├── fonts.ts
    │   ├── features.ts
    │   ├── countries.ts
    │   └── plans.ts
    ├── app
    │   ├── loading.tsx
    │   ├── (marketing)
    │   │   ├── layout.tsx
    │   │   └── page.tsx
    │   ├── layout.tsx
    │   └── not-found.tsx
    ├── hooks
    │   ├── use-mobile.tsx
    │   └── use-toast.ts
    └── styles
    │   └── globals.css
├── public
    ├── icons
    │   ├── icon.png
    │   └── icon-dark.png
    ├── images
    │   ├── dashboard.png
    │   └── feature-five.svg
    └── fonts
    │   ├── Satoshi-Black.woff2
    │   ├── Satoshi-Bold.woff2
    │   ├── Satoshi-Light.woff2
    │   ├── Satoshi-Medium.woff2
    │   ├── Satoshi-Regular.woff2
    │   └── Satoshi-Variable.woff2
├── postcss.config.mjs
├── next.config.ts
├── eslint.config.mjs
├── components.json
├── .gitignore
├── tsconfig.json
├── LICENSE
├── package.json
├── README.md
└── tailwind.config.ts


/src/lib/index.ts:
--------------------------------------------------------------------------------
1 | import { cn } from "./cn";
2 | 
3 | export {
4 |     cn,
5 |  };
6 | 


--------------------------------------------------------------------------------
/public/icons/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shreyas-29/vetra/HEAD/public/icons/icon.png


--------------------------------------------------------------------------------
/public/icons/icon-dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shreyas-29/vetra/HEAD/public/icons/icon-dark.png


--------------------------------------------------------------------------------
/public/images/dashboard.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shreyas-29/vetra/HEAD/public/images/dashboard.png


--------------------------------------------------------------------------------
/public/fonts/Satoshi-Black.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shreyas-29/vetra/HEAD/public/fonts/Satoshi-Black.woff2


--------------------------------------------------------------------------------
/public/fonts/Satoshi-Bold.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shreyas-29/vetra/HEAD/public/fonts/Satoshi-Bold.woff2


--------------------------------------------------------------------------------
/public/fonts/Satoshi-Light.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shreyas-29/vetra/HEAD/public/fonts/Satoshi-Light.woff2


--------------------------------------------------------------------------------
/public/fonts/Satoshi-Medium.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shreyas-29/vetra/HEAD/public/fonts/Satoshi-Medium.woff2


--------------------------------------------------------------------------------
/src/utils/index.ts:
--------------------------------------------------------------------------------
1 | import { generateMetadata } from "./metadata";
2 | 
3 | export {
4 |     generateMetadata,
5 | };


--------------------------------------------------------------------------------
/public/fonts/Satoshi-Regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shreyas-29/vetra/HEAD/public/fonts/Satoshi-Regular.woff2


--------------------------------------------------------------------------------
/public/fonts/Satoshi-Variable.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shreyas-29/vetra/HEAD/public/fonts/Satoshi-Variable.woff2


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     tailwindcss: {},
5 |   },
6 | };
7 | 
8 | export default config;
9 | 


--------------------------------------------------------------------------------
/src/lib/cn.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/next.config.ts:
--------------------------------------------------------------------------------
 1 | import type { NextConfig } from "next";
 2 | 
 3 | const nextConfig: NextConfig = {
 4 |   eslint: {
 5 |     ignoreDuringBuilds: true,
 6 |   }
 7 | };
 8 | 
 9 | export default nextConfig;
10 | 


--------------------------------------------------------------------------------
/src/components/ui/aspect-ratio.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 | 
3 | import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
4 | 
5 | const AspectRatio = AspectRatioPrimitive.Root
6 | 
7 | export { AspectRatio }
8 | 


--------------------------------------------------------------------------------
/src/components/ui/skeleton.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib"
 2 | 
 3 | function Skeleton({
 4 |   className,
 5 |   ...props
 6 | }: React.HTMLAttributes<HTMLDivElement>) {
 7 |   return (
 8 |     <div
 9 |       className={cn("animate-pulse rounded-md bg-muted", className)}
10 |       {...props}
11 |     />
12 |   )
13 | }
14 | 
15 | export { Skeleton }
16 | 


--------------------------------------------------------------------------------
/src/constants/links.ts:
--------------------------------------------------------------------------------
 1 | export const NAV_LINKS = [
 2 |     {
 3 |         name: "Pricing",
 4 |         href: "#"
 5 |     },
 6 |     {
 7 |         name: "Features",
 8 |         href: "#"
 9 |     },
10 |     {
11 |         name: "Blog",
12 |         href: "#"
13 |     },
14 |     {
15 |         name: "Contact",
16 |         href: "#"
17 |     },
18 | ];
19 | 


--------------------------------------------------------------------------------
/src/constants/index.ts:
--------------------------------------------------------------------------------
 1 | import { base, heading } from "./fonts";
 2 | import { PLANS } from "./plans";
 3 | import { NAV_LINKS } from "./links";
 4 | import { SUPPORTED_LANGUAGES } from "./countries";
 5 | import { FEATURES } from "./features";
 6 | 
 7 | export {
 8 |     base,
 9 |     heading,
10 |     PLANS,
11 |     NAV_LINKS,
12 |     SUPPORTED_LANGUAGES,
13 |     FEATURES,
14 | };


--------------------------------------------------------------------------------
/src/components/ui/collapsible.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
 4 | 
 5 | const Collapsible = CollapsiblePrimitive.Root
 6 | 
 7 | const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
 8 | 
 9 | const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
10 | 
11 | export { Collapsible, CollapsibleTrigger, CollapsibleContent }
12 | 


--------------------------------------------------------------------------------
/src/app/loading.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | const Loader = () => {
 4 |     return (
 5 |         <div className="w-full min-h-screen h-dvh flex flex-col items-center justify-center bg-background/80 backdrop-blur-md fixed inset-0 z-[9999]">
 6 |             <div className="border-2 border-t-primary border-border rounded-full w-8 h-8 animate-spin"></div>
 7 |         </div>
 8 |     )
 9 | };
10 | 
11 | export default Loader
12 | 


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
 1 | import { dirname } from "path";
 2 | import { fileURLToPath } from "url";
 3 | import { FlatCompat } from "@eslint/eslintrc";
 4 | 
 5 | const __filename = fileURLToPath(import.meta.url);
 6 | const __dirname = dirname(__filename);
 7 | 
 8 | const compat = new FlatCompat({
 9 |   baseDirectory: __dirname,
10 | });
11 | 
12 | const eslintConfig = [
13 |   ...compat.extends("next/core-web-vitals", "next/typescript"),
14 | ];
15 | 
16 | export default eslintConfig;
17 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "default",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.ts",
 8 |     "css": "src/app/globals.css",
 9 |     "baseColor": "neutral",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib",
16 |     "ui": "@/components/ui",
17 |     "lib": "@/lib",
18 |     "hooks": "@/hooks"
19 |   },
20 |   "iconLibrary": "lucide"
21 | }


--------------------------------------------------------------------------------
/src/components/global/wrapper.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { cn } from "@/lib";
 3 | 
 4 | interface Props {
 5 |     className?: string;
 6 |     children: React.ReactNode;
 7 | }
 8 | 
 9 | const Wrapper = ({ children, className }: Props) => {
10 |     return (
11 |         <div
12 |             className={cn(
13 |                 "w-full mx-auto lg:max-w-screen-xl lg:mx-auto px-4 md:px-12",
14 |                 className
15 |             )}
16 |         >
17 |             {children}
18 |         </div>
19 |     )
20 | };
21 | 
22 | export default Wrapper
23 | 


--------------------------------------------------------------------------------
/src/app/(marketing)/layout.tsx:
--------------------------------------------------------------------------------
 1 | import Footer from "@/components/marketing/footer";
 2 | import Navbar from "@/components/marketing/navbar";
 3 | import React from 'react';
 4 | 
 5 | interface Props {
 6 |     children: React.ReactNode
 7 | }
 8 | 
 9 | const MarketingLayout = ({ children }: Props) => {
10 |     return (
11 |         <>
12 |             <Navbar />
13 |             <main className="mx-auto w-full z-40 relative">
14 |                 {children}
15 |             </main>
16 |             <Footer />
17 |         </>
18 |     );
19 | };
20 | 
21 | export default MarketingLayout
22 | 


--------------------------------------------------------------------------------
/src/hooks/use-mobile.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | const MOBILE_BREAKPOINT = 768
 4 | 
 5 | export function useIsMobile() {
 6 |   const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
 7 | 
 8 |   React.useEffect(() => {
 9 |     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
10 |     const onChange = () => {
11 |       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
12 |     }
13 |     mql.addEventListener("change", onChange)
14 |     setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
15 |     return () => mql.removeEventListener("change", onChange)
16 |   }, [])
17 | 
18 |   return !!isMobile
19 | }
20 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.*
 7 | .yarn/*
 8 | !.yarn/patches
 9 | !.yarn/plugins
10 | !.yarn/releases
11 | !.yarn/versions
12 | 
13 | # testing
14 | /coverage
15 | 
16 | # next.js
17 | /.next/
18 | /out/
19 | 
20 | # production
21 | /build
22 | 
23 | # misc
24 | .DS_Store
25 | *.pem
26 | 
27 | # debug
28 | npm-debug.log*
29 | yarn-debug.log*
30 | yarn-error.log*
31 | .pnpm-debug.log*
32 | 
33 | # env files (can opt-in for committing if needed)
34 | .env*
35 | 
36 | # vercel
37 | .vercel
38 | 
39 | # typescript
40 | *.tsbuildinfo
41 | next-env.d.ts
42 | 
43 | dummy
44 | ignore


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2017",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./src/*"]
23 |     }
24 |   },
25 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 |   "exclude": ["node_modules"]
27 | }
28 | 


--------------------------------------------------------------------------------
/src/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib"
 4 | 
 5 | const Textarea = React.forwardRef<
 6 |   HTMLTextAreaElement,
 7 |   React.ComponentProps<"textarea">
 8 | >(({ className, ...props }, ref) => {
 9 |   return (
10 |     <textarea
11 |       className={cn(
12 |         "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
13 |         className
14 |       )}
15 |       ref={ref}
16 |       {...props}
17 |     />
18 |   )
19 | })
20 | Textarea.displayName = "Textarea"
21 | 
22 | export { Textarea }
23 | 


--------------------------------------------------------------------------------
/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as LabelPrimitive from "@radix-ui/react-label"
 5 | import { cva, type VariantProps } from "class-variance-authority"
 6 | 
 7 | import { cn } from "@/lib"
 8 | 
 9 | const labelVariants = cva(
10 |   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11 | )
12 | 
13 | const Label = React.forwardRef<
14 |   React.ElementRef<typeof LabelPrimitive.Root>,
15 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
16 |   VariantProps<typeof labelVariants>
17 | >(({ className, ...props }, ref) => (
18 |   <LabelPrimitive.Root
19 |     ref={ref}
20 |     className={cn(labelVariants(), className)}
21 |     {...props}
22 |   />
23 | ))
24 | Label.displayName = LabelPrimitive.Root.displayName
25 | 
26 | export { Label }
27 | 


--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib"
 4 | 
 5 | const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
 6 |   ({ className, type, ...props }, ref) => {
 7 |     return (
 8 |       <input
 9 |         type={type}
10 |         className={cn(
11 |           "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
12 |           className
13 |         )}
14 |         ref={ref}
15 |         {...props}
16 |       />
17 |     )
18 |   }
19 | )
20 | Input.displayName = "Input"
21 | 
22 | export { Input }
23 | 


--------------------------------------------------------------------------------
/src/components/global/container.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { cn } from "@/lib";
 4 | import { motion } from "framer-motion";
 5 | 
 6 | interface Props {
 7 |     className?: string;
 8 |     children: React.ReactNode;
 9 |     delay?: number;
10 |     reverse?: boolean;
11 |     simple?: boolean;
12 | }
13 | 
14 | const Container = ({ children, className, delay = 0.2, reverse, simple }: Props) => {
15 |     return (
16 |         <motion.div
17 |             className={cn("w-full h-full", className)}
18 |             initial={{ opacity: 0, y: reverse ? -20 : 20 }}
19 |             whileInView={{ opacity: 1, y: 0 }}
20 |             viewport={{ once: true }}
21 |             transition={{ delay: delay, duration: simple ? 0.2 : 0.4, type: simple ? "keyframes" : "spring", stiffness: simple && 100 }}
22 |         >
23 |             {children}
24 |         </motion.div>
25 |     )
26 | };
27 | 
28 | export default Container
29 | 


--------------------------------------------------------------------------------
/src/components/ui/separator.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as SeparatorPrimitive from "@radix-ui/react-separator"
 5 | 
 6 | import { cn } from "@/lib"
 7 | 
 8 | const Separator = React.forwardRef<
 9 |   React.ElementRef<typeof SeparatorPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
11 | >(
12 |   (
13 |     { className, orientation = "horizontal", decorative = true, ...props },
14 |     ref
15 |   ) => (
16 |     <SeparatorPrimitive.Root
17 |       ref={ref}
18 |       decorative={decorative}
19 |       orientation={orientation}
20 |       className={cn(
21 |         "shrink-0 bg-border",
22 |         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
23 |         className
24 |       )}
25 |       {...props}
26 |     />
27 |   )
28 | )
29 | Separator.displayName = SeparatorPrimitive.Root.displayName
30 | 
31 | export { Separator }
32 | 


--------------------------------------------------------------------------------
/src/components/ui/progress.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as ProgressPrimitive from "@radix-ui/react-progress"
 5 | 
 6 | import { cn } from "@/lib"
 7 | 
 8 | const Progress = React.forwardRef<
 9 |   React.ElementRef<typeof ProgressPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
11 | >(({ className, value, ...props }, ref) => (
12 |   <ProgressPrimitive.Root
13 |     ref={ref}
14 |     className={cn(
15 |       "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
16 |       className
17 |     )}
18 |     {...props}
19 |   >
20 |     <ProgressPrimitive.Indicator
21 |       className="h-full w-full flex-1 bg-primary transition-all"
22 |       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
23 |     />
24 |   </ProgressPrimitive.Root>
25 | ))
26 | Progress.displayName = ProgressPrimitive.Root.displayName
27 | 
28 | export { Progress }
29 | 


--------------------------------------------------------------------------------
/src/components/ui/toaster.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { useToast } from "@/hooks/use-toast"
 4 | import {
 5 |   Toast,
 6 |   ToastClose,
 7 |   ToastDescription,
 8 |   ToastProvider,
 9 |   ToastTitle,
10 |   ToastViewport,
11 | } from "@/components/ui/toast"
12 | 
13 | export function Toaster() {
14 |   const { toasts } = useToast()
15 | 
16 |   return (
17 |     <ToastProvider>
18 |       {toasts.map(function ({ id, title, description, action, ...props }) {
19 |         return (
20 |           <Toast key={id} {...props}>
21 |             <div className="grid gap-1">
22 |               {title && <ToastTitle>{title}</ToastTitle>}
23 |               {description && (
24 |                 <ToastDescription>{description}</ToastDescription>
25 |               )}
26 |             </div>
27 |             {action}
28 |             <ToastClose />
29 |           </Toast>
30 |         )
31 |       })}
32 |       <ToastViewport />
33 |     </ToastProvider>
34 |   )
35 | }
36 | 


--------------------------------------------------------------------------------
/src/app/(marketing)/page.tsx:
--------------------------------------------------------------------------------
 1 | import Wrapper from "@/components/global/wrapper";
 2 | import Analysis from "@/components/marketing/analysis";
 3 | import Companies from "@/components/marketing/companies";
 4 | import CTA from "@/components/marketing/cta";
 5 | import Features from "@/components/marketing/features";
 6 | import Hero from "@/components/marketing/hero";
 7 | import Integration from "@/components/marketing/integration";
 8 | import LanguageSupport from "@/components/marketing/lang-support";
 9 | import Pricing from "@/components/marketing/pricing";
10 | 
11 | const HomePage = () => {
12 |     return (
13 |         <Wrapper className="py-20 relative">
14 |             <Hero />
15 |             <Companies />
16 |             <Features />
17 |             <Analysis />
18 |             <Integration />
19 |             <Pricing />
20 |             <LanguageSupport />
21 |             <CTA />
22 |         </Wrapper>
23 |     )
24 | };
25 | 
26 | export default HomePage
27 | 


--------------------------------------------------------------------------------
/src/components/ui/sonner.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { useTheme } from "next-themes"
 4 | import { Toaster as Sonner } from "sonner"
 5 | 
 6 | type ToasterProps = React.ComponentProps<typeof Sonner>
 7 | 
 8 | const Toaster = ({ ...props }: ToasterProps) => {
 9 |   const { theme = "system" } = useTheme()
10 | 
11 |   return (
12 |     <Sonner
13 |       theme={theme as ToasterProps["theme"]}
14 |       className="toaster group"
15 |       toastOptions={{
16 |         classNames: {
17 |           toast:
18 |             "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
19 |           description: "group-[.toast]:text-muted-foreground",
20 |           actionButton:
21 |             "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
22 |           cancelButton:
23 |             "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
24 |         },
25 |       }}
26 |       {...props}
27 |     />
28 |   )
29 | }
30 | 
31 | export { Toaster }
32 | 


--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import "@/styles/globals.css";
 2 | import { cn } from "@/lib";
 3 | import { generateMetadata } from "@/utils";
 4 | import { base, heading } from "@/constants";
 5 | import { Toaster } from "@/components/ui/sonner";
 6 | import { subheading } from "@/constants/fonts";
 7 | 
 8 | export const metadata = generateMetadata();
 9 | 
10 | export default function RootLayout({
11 |     children,
12 | }: Readonly<{
13 |     children: React.ReactNode;
14 | }>) {
15 |     return (
16 |         <html lang="en" suppressHydrationWarning>
17 |             <body
18 |                 className={cn(
19 |                     "min-h-screen bg-background text-foreground antialiased font-heading overflow-x-hidden !scrollbar-hide",
20 |                     base.variable,
21 |                     heading.variable,
22 |                     subheading.variable,
23 |                 )}
24 |             >
25 |                     <Toaster richColors theme="dark" position="top-right" />
26 |                     {children}
27 |             </body>
28 |         </html>
29 |     );
30 | };
31 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2025 Shreyas Sihasane
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/components/ui/checkbox.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 5 | import { Check } from "lucide-react"
 6 | 
 7 | import { cn } from "@/lib"
 8 | 
 9 | const Checkbox = React.forwardRef<
10 |   React.ElementRef<typeof CheckboxPrimitive.Root>,
11 |   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
12 | >(({ className, ...props }, ref) => (
13 |   <CheckboxPrimitive.Root
14 |     ref={ref}
15 |     className={cn(
16 |       "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
17 |       className
18 |     )}
19 |     {...props}
20 |   >
21 |     <CheckboxPrimitive.Indicator
22 |       className={cn("flex items-center justify-center text-current")}
23 |     >
24 |       <Check className="h-4 w-4" />
25 |     </CheckboxPrimitive.Indicator>
26 |   </CheckboxPrimitive.Root>
27 | ))
28 | Checkbox.displayName = CheckboxPrimitive.Root.displayName
29 | 
30 | export { Checkbox }
31 | 


--------------------------------------------------------------------------------
/src/components/ui/slider.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as SliderPrimitive from "@radix-ui/react-slider"
 5 | 
 6 | import { cn } from "@/lib"
 7 | 
 8 | const Slider = React.forwardRef<
 9 |   React.ElementRef<typeof SliderPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
11 | >(({ className, ...props }, ref) => (
12 |   <SliderPrimitive.Root
13 |     ref={ref}
14 |     className={cn(
15 |       "relative flex w-full touch-none select-none items-center",
16 |       className
17 |     )}
18 |     {...props}
19 |   >
20 |     <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
21 |       <SliderPrimitive.Range className="absolute h-full bg-primary" />
22 |     </SliderPrimitive.Track>
23 |     <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
24 |   </SliderPrimitive.Root>
25 | ))
26 | Slider.displayName = SliderPrimitive.Root.displayName
27 | 
28 | export { Slider }
29 | 


--------------------------------------------------------------------------------
/src/components/ui/switch.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as SwitchPrimitives from "@radix-ui/react-switch"
 5 | 
 6 | import { cn } from "@/lib"
 7 | 
 8 | const Switch = React.forwardRef<
 9 |   React.ElementRef<typeof SwitchPrimitives.Root>,
10 |   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
11 | >(({ className, ...props }, ref) => (
12 |   <SwitchPrimitives.Root
13 |     className={cn(
14 |       "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
15 |       className
16 |     )}
17 |     {...props}
18 |     ref={ref}
19 |   >
20 |     <SwitchPrimitives.Thumb
21 |       className={cn(
22 |         "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
23 |       )}
24 |     />
25 |   </SwitchPrimitives.Root>
26 | ))
27 | Switch.displayName = SwitchPrimitives.Root.displayName
28 | 
29 | export { Switch }
30 | 


--------------------------------------------------------------------------------
/src/components/ui/badge.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { cva, type VariantProps } from "class-variance-authority"
 3 | 
 4 | import { cn } from "@/lib"
 5 | 
 6 | const badgeVariants = cva(
 7 |   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default:
12 |           "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
13 |         secondary:
14 |           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
15 |         destructive:
16 |           "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
17 |         outline: "text-foreground",
18 |       },
19 |     },
20 |     defaultVariants: {
21 |       variant: "default",
22 |     },
23 |   }
24 | )
25 | 
26 | export interface BadgeProps
27 |   extends React.HTMLAttributes<HTMLDivElement>,
28 |   VariantProps<typeof badgeVariants> { }
29 | 
30 | function Badge({ className, variant, ...props }: BadgeProps) {
31 |   return (
32 |     <div className={cn(badgeVariants({ variant }), className)} {...props} />
33 |   )
34 | }
35 | 
36 | export { Badge, badgeVariants }
37 | 


--------------------------------------------------------------------------------
/src/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 5 | 
 6 | import { cn } from "@/lib"
 7 | 
 8 | const TooltipProvider = TooltipPrimitive.Provider
 9 | 
10 | const Tooltip = TooltipPrimitive.Root
11 | 
12 | const TooltipTrigger = TooltipPrimitive.Trigger
13 | 
14 | const TooltipContent = React.forwardRef<
15 |   React.ElementRef<typeof TooltipPrimitive.Content>,
16 |   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
17 | >(({ className, sideOffset = 4, ...props }, ref) => (
18 |   <TooltipPrimitive.Content
19 |     ref={ref}
20 |     sideOffset={sideOffset}
21 |     className={cn(
22 |       "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
23 |       className
24 |     )}
25 |     {...props}
26 |   />
27 | ))
28 | TooltipContent.displayName = TooltipPrimitive.Content.displayName
29 | 
30 | export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
31 | 


--------------------------------------------------------------------------------
/src/constants/fonts.ts:
--------------------------------------------------------------------------------
 1 | import { Inter, DM_Sans, Instrument_Serif } from "next/font/google";
 2 | import localFont from "next/font/local";
 3 | 
 4 | export const heading = localFont({
 5 |     src: [
 6 |         {
 7 |             path: '../../public/fonts/Satoshi-Light.woff2',
 8 |             weight: '300',
 9 |             style: 'normal',
10 |         },
11 |         {
12 |             path: '../../public/fonts/Satoshi-Regular.woff2',
13 |             weight: '400',
14 |             style: 'normal',
15 |         },
16 |         {
17 |             path: '../../public/fonts/Satoshi-Medium.woff2', 
18 |             weight: '500',
19 |             style: 'normal',
20 |         },
21 |         {
22 |             path: '../../public/fonts/Satoshi-Bold.woff2',
23 |             weight: '700', 
24 |             style: 'normal',
25 |         },
26 |         {
27 |             path: '../../public/fonts/Satoshi-Black.woff2',
28 |             weight: '900',
29 |             style: 'normal',
30 |         }
31 |     ],
32 |     variable: '--font-heading'
33 | });
34 | 
35 | export const base = Inter({
36 |     subsets: ["latin"],
37 |     variable: "--font-base",
38 | });
39 | 
40 | export const subheading = Instrument_Serif({
41 |     subsets: ["latin"],
42 |     weight: ["400"],
43 |     variable: "--font-subheading",
44 | });


--------------------------------------------------------------------------------
/src/components/ui/hover-card.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
 5 | 
 6 | import { cn } from "@/lib"
 7 | 
 8 | const HoverCard = HoverCardPrimitive.Root
 9 | 
10 | const HoverCardTrigger = HoverCardPrimitive.Trigger
11 | 
12 | const HoverCardContent = React.forwardRef<
13 |   React.ElementRef<typeof HoverCardPrimitive.Content>,
14 |   React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
15 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
16 |   <HoverCardPrimitive.Content
17 |     ref={ref}
18 |     align={align}
19 |     sideOffset={sideOffset}
20 |     className={cn(
21 |       "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
22 |       className
23 |     )}
24 |     {...props}
25 |   />
26 | ))
27 | HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
28 | 
29 | export { HoverCard, HoverCardTrigger, HoverCardContent }
30 | 


--------------------------------------------------------------------------------
/src/constants/features.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |     ChartColumnBigIcon,
 3 |     DatabaseIcon,
 4 |     TrendingUpIcon,
 5 |     WandSparklesIcon,
 6 |     ZapIcon
 7 | } from "lucide-react";
 8 | 
 9 | export const FEATURES = [
10 |     {
11 |         title: "Enhance User Experience",
12 |         description: "Efficiently manage user data and interactions with advanced AI tools",
13 |         icon: WandSparklesIcon,
14 |         image: "/images/feature-two.svg",
15 |     },
16 |     {
17 |         title: "Comprehensive Insights",
18 |         description: "Gain deep insights into your audience and campaign performance",
19 |         icon: ChartColumnBigIcon,
20 |         image: "/images/feature-one.svg",
21 |     },
22 |     {
23 |         title: "Data Management",
24 |         description: "Manage your data with ease and efficiency",
25 |         icon: DatabaseIcon,
26 |         image: "/images/feature-three.svg",
27 |     },
28 |     {
29 |         title: "Real-Time Analytics",
30 |         description: "Track and analyze your marketing performance in real-time",
31 |         icon: TrendingUpIcon,
32 |         image: "/images/feature-four.svg",
33 |     },
34 |     {
35 |         title: "Dynamic Optimization",
36 |         description: "AI-powered optimization for smarter marketing",
37 |         icon: ZapIcon,
38 |         image: "/images/feature-five.svg",
39 |     }
40 | ]


--------------------------------------------------------------------------------
/src/components/ui/popover.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as PopoverPrimitive from "@radix-ui/react-popover"
 5 | 
 6 | import { cn } from "@/lib"
 7 | 
 8 | const Popover = PopoverPrimitive.Root
 9 | 
10 | const PopoverTrigger = PopoverPrimitive.Trigger
11 | 
12 | const PopoverContent = React.forwardRef<
13 |   React.ElementRef<typeof PopoverPrimitive.Content>,
14 |   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
15 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
16 |   <PopoverPrimitive.Portal>
17 |     <PopoverPrimitive.Content
18 |       ref={ref}
19 |       align={align}
20 |       sideOffset={sideOffset}
21 |       className={cn(
22 |         "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
23 |         className
24 |       )}
25 |       {...props}
26 |     />
27 |   </PopoverPrimitive.Portal>
28 | ))
29 | PopoverContent.displayName = PopoverPrimitive.Content.displayName
30 | 
31 | export { Popover, PopoverTrigger, PopoverContent }
32 | 


--------------------------------------------------------------------------------
/src/components/marketing/companies.tsx:
--------------------------------------------------------------------------------
 1 | import Container from "../global/container";
 2 | import Images from "../global/images";
 3 | 
 4 | const Companies = () => {
 5 |     return (
 6 |         <div className="relative flex flex-col items-center justify-center w-full py-20 mt-16 companies overflow-hidden">
 7 |             <Container>
 8 |                 <div className="flex flex-col items-center justify-center">
 9 |                     <h4 className="text-2xl lg:text-4xl font-medium">
10 |                         Trusted by <span className="font-subheading italic">leading</span> brands
11 |                     </h4>
12 |                 </div>
13 |             </Container>
14 | 
15 |             <Container delay={0.1}>
16 |                 <div className="flex flex-row flex-wrap items-center justify-center gap-8 max-w-xl mx-auto pt-16 text-muted-foreground transition-all">
17 |                     <Images.company1 className="h-7 w-auto hover:text-foreground" />
18 |                     <Images.company2 className="h-7 w-auto hover:text-foreground" />
19 |                     <Images.company3 className="h-7 w-auto hover:text-foreground" />
20 |                     <Images.company6 className="h-7 w-auto hover:text-foreground" />
21 |                     <Images.company7 className="h-7 w-auto hover:text-foreground" />
22 |                     <Images.company9 className="h-7 w-auto hover:text-foreground" />
23 |                     <Images.company10 className="h-7 w-auto hover:text-foreground" />
24 |                 </div>
25 |             </Container>
26 |         </div>
27 |     )
28 | };
29 | 
30 | export default Companies
31 | 


--------------------------------------------------------------------------------
/src/components/ui/avatar.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as AvatarPrimitive from "@radix-ui/react-avatar"
 5 | 
 6 | import { cn } from "@/lib"
 7 | 
 8 | const Avatar = React.forwardRef<
 9 |   React.ElementRef<typeof AvatarPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
11 | >(({ className, ...props }, ref) => (
12 |   <AvatarPrimitive.Root
13 |     ref={ref}
14 |     className={cn(
15 |       "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
16 |       className
17 |     )}
18 |     {...props}
19 |   />
20 | ))
21 | Avatar.displayName = AvatarPrimitive.Root.displayName
22 | 
23 | const AvatarImage = React.forwardRef<
24 |   React.ElementRef<typeof AvatarPrimitive.Image>,
25 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
26 | >(({ className, ...props }, ref) => (
27 |   <AvatarPrimitive.Image
28 |     ref={ref}
29 |     className={cn("aspect-square h-full w-full", className)}
30 |     {...props}
31 |   />
32 | ))
33 | AvatarImage.displayName = AvatarPrimitive.Image.displayName
34 | 
35 | const AvatarFallback = React.forwardRef<
36 |   React.ElementRef<typeof AvatarPrimitive.Fallback>,
37 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
38 | >(({ className, ...props }, ref) => (
39 |   <AvatarPrimitive.Fallback
40 |     ref={ref}
41 |     className={cn(
42 |       "flex h-full w-full items-center justify-center rounded-full bg-muted",
43 |       className
44 |     )}
45 |     {...props}
46 |   />
47 | ))
48 | AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
49 | 
50 | export { Avatar, AvatarImage, AvatarFallback }
51 | 


--------------------------------------------------------------------------------
/src/components/ui/radio-group.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
 5 | import { Circle } from "lucide-react"
 6 | 
 7 | import { cn } from "@/lib"
 8 | 
 9 | const RadioGroup = React.forwardRef<
10 |   React.ElementRef<typeof RadioGroupPrimitive.Root>,
11 |   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
12 | >(({ className, ...props }, ref) => {
13 |   return (
14 |     <RadioGroupPrimitive.Root
15 |       className={cn("grid gap-2", className)}
16 |       {...props}
17 |       ref={ref}
18 |     />
19 |   )
20 | })
21 | RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
22 | 
23 | const RadioGroupItem = React.forwardRef<
24 |   React.ElementRef<typeof RadioGroupPrimitive.Item>,
25 |   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
26 | >(({ className, ...props }, ref) => {
27 |   return (
28 |     <RadioGroupPrimitive.Item
29 |       ref={ref}
30 |       className={cn(
31 |         "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
32 |         className
33 |       )}
34 |       {...props}
35 |     >
36 |       <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
37 |         <Circle className="h-2.5 w-2.5 fill-current text-current" />
38 |       </RadioGroupPrimitive.Indicator>
39 |     </RadioGroupPrimitive.Item>
40 |   )
41 | })
42 | RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
43 | 
44 | export { RadioGroup, RadioGroupItem }
45 | 


--------------------------------------------------------------------------------
/src/components/ui/toggle.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as TogglePrimitive from "@radix-ui/react-toggle"
 5 | import { cva, type VariantProps } from "class-variance-authority"
 6 | 
 7 | import { cn } from "@/lib"
 8 | 
 9 | const toggleVariants = cva(
10 |   "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
11 |   {
12 |     variants: {
13 |       variant: {
14 |         default: "bg-transparent",
15 |         outline:
16 |           "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
17 |       },
18 |       size: {
19 |         default: "h-10 px-3 min-w-10",
20 |         sm: "h-9 px-2.5 min-w-9",
21 |         lg: "h-11 px-5 min-w-11",
22 |       },
23 |     },
24 |     defaultVariants: {
25 |       variant: "default",
26 |       size: "default",
27 |     },
28 |   }
29 | )
30 | 
31 | const Toggle = React.forwardRef<
32 |   React.ElementRef<typeof TogglePrimitive.Root>,
33 |   React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
34 |   VariantProps<typeof toggleVariants>
35 | >(({ className, variant, size, ...props }, ref) => (
36 |   <TogglePrimitive.Root
37 |     ref={ref}
38 |     className={cn(toggleVariants({ variant, size, className }))}
39 |     {...props}
40 |   />
41 | ))
42 | 
43 | Toggle.displayName = TogglePrimitive.Root.displayName
44 | 
45 | export { Toggle, toggleVariants }
46 | 


--------------------------------------------------------------------------------
/src/components/ui/alert.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { cva, type VariantProps } from "class-variance-authority"
 3 | 
 4 | import { cn } from "@/lib"
 5 | 
 6 | const alertVariants = cva(
 7 |   "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default: "bg-background text-foreground",
12 |         destructive:
13 |           "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
14 |       },
15 |     },
16 |     defaultVariants: {
17 |       variant: "default",
18 |     },
19 |   }
20 | )
21 | 
22 | const Alert = React.forwardRef<
23 |   HTMLDivElement,
24 |   React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
25 | >(({ className, variant, ...props }, ref) => (
26 |   <div
27 |     ref={ref}
28 |     role="alert"
29 |     className={cn(alertVariants({ variant }), className)}
30 |     {...props}
31 |   />
32 | ))
33 | Alert.displayName = "Alert"
34 | 
35 | const AlertTitle = React.forwardRef<
36 |   HTMLParagraphElement,
37 |   React.HTMLAttributes<HTMLHeadingElement>
38 | >(({ className, ...props }, ref) => (
39 |   <h5
40 |     ref={ref}
41 |     className={cn("mb-1 font-medium leading-none tracking-tight", className)}
42 |     {...props}
43 |   />
44 | ))
45 | AlertTitle.displayName = "AlertTitle"
46 | 
47 | const AlertDescription = React.forwardRef<
48 |   HTMLParagraphElement,
49 |   React.HTMLAttributes<HTMLParagraphElement>
50 | >(({ className, ...props }, ref) => (
51 |   <div
52 |     ref={ref}
53 |     className={cn("text-sm [&_p]:leading-relaxed", className)}
54 |     {...props}
55 |   />
56 | ))
57 | AlertDescription.displayName = "AlertDescription"
58 | 
59 | export { Alert, AlertTitle, AlertDescription }
60 | 


--------------------------------------------------------------------------------
/src/components/ui/scroll-area.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 5 | 
 6 | import { cn } from "@/lib"
 7 | 
 8 | const ScrollArea = React.forwardRef<
 9 |   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
11 | >(({ className, children, ...props }, ref) => (
12 |   <ScrollAreaPrimitive.Root
13 |     ref={ref}
14 |     className={cn("relative overflow-hidden", className)}
15 |     {...props}
16 |   >
17 |     <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
18 |       {children}
19 |     </ScrollAreaPrimitive.Viewport>
20 |     <ScrollBar />
21 |     <ScrollAreaPrimitive.Corner />
22 |   </ScrollAreaPrimitive.Root>
23 | ))
24 | ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
25 | 
26 | const ScrollBar = React.forwardRef<
27 |   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
28 |   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
29 | >(({ className, orientation = "vertical", ...props }, ref) => (
30 |   <ScrollAreaPrimitive.ScrollAreaScrollbar
31 |     ref={ref}
32 |     orientation={orientation}
33 |     className={cn(
34 |       "flex touch-none select-none transition-colors",
35 |       orientation === "vertical" &&
36 |       "h-full w-2.5 border-l border-l-transparent p-[1px]",
37 |       orientation === "horizontal" &&
38 |       "h-2.5 flex-col border-t border-t-transparent p-[1px]",
39 |       className
40 |     )}
41 |     {...props}
42 |   >
43 |     <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
44 |   </ScrollAreaPrimitive.ScrollAreaScrollbar>
45 | ))
46 | ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
47 | 
48 | export { ScrollArea, ScrollBar }
49 | 


--------------------------------------------------------------------------------
/src/components/marketing/mobile-menu.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { Button } from "@/components/ui/button";
 4 | import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
 5 | import { NAV_LINKS } from "@/constants";
 6 | import { Menu } from "lucide-react";
 7 | import Link from "next/link";
 8 | 
 9 | const MobileMenu = () => {
10 |     return (
11 |         <Sheet>
12 |             <SheetTrigger asChild className="lg:hidden">
13 |                 <Button variant="ghost" size="icon" className="lg:hidden">
14 |                     <Menu className="h-6 w-6" />
15 |                 </Button>
16 |             </SheetTrigger>
17 |             <SheetContent side="right" className="w-full sm:w-[300px] pt-12">
18 |                 <SheetHeader className="mb-8">
19 |                     <SheetTitle className="text-left">Menu</SheetTitle>
20 |                 </SheetHeader>
21 |                 <nav className="flex flex-col space-y-4">
22 |                     {NAV_LINKS.map((link, index) => (
23 |                         <Link
24 |                             key={index}
25 |                             href={link.href}
26 |                             className="text-base font-medium transition-colors hover:text-primary"
27 |                         >
28 |                             {link.name}
29 |                         </Link>
30 |                     ))}
31 |                     <div className="pt-4 mt-4 border-t border-border">
32 |                         <Link href="#" className="w-full">
33 |                             <Button className="w-full" variant="blue">
34 |                                 Get Started
35 |                             </Button>
36 |                         </Link>
37 |                     </div>
38 |                 </nav>
39 |             </SheetContent>
40 |         </Sheet>
41 |     )
42 | };
43 | 
44 | export default MobileMenu
45 | 


--------------------------------------------------------------------------------
/src/components/ui/resizable.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { GripVertical } from "lucide-react"
 4 | import * as ResizablePrimitive from "react-resizable-panels"
 5 | 
 6 | import { cn } from "@/lib"
 7 | 
 8 | const ResizablePanelGroup = ({
 9 |   className,
10 |   ...props
11 | }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
12 |   <ResizablePrimitive.PanelGroup
13 |     className={cn(
14 |       "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
15 |       className
16 |     )}
17 |     {...props}
18 |   />
19 | )
20 | 
21 | const ResizablePanel = ResizablePrimitive.Panel
22 | 
23 | const ResizableHandle = ({
24 |   withHandle,
25 |   className,
26 |   ...props
27 | }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
28 |   withHandle?: boolean
29 | }) => (
30 |   <ResizablePrimitive.PanelResizeHandle
31 |     className={cn(
32 |       "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
33 |       className
34 |     )}
35 |     {...props}
36 |   >
37 |     {withHandle && (
38 |       <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
39 |         <GripVertical className="h-2.5 w-2.5" />
40 |       </div>
41 |     )}
42 |   </ResizablePrimitive.PanelResizeHandle>
43 | )
44 | 
45 | export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
46 | 


--------------------------------------------------------------------------------
/src/app/not-found.tsx:
--------------------------------------------------------------------------------
 1 | import Container from "@/components/global/container";
 2 | import Wrapper from "@/components/global/wrapper";
 3 | import { Button } from "@/components/ui/button";
 4 | import { generateMetadata } from "@/utils";
 5 | import { ArrowLeftIcon } from "lucide-react";
 6 | import Link from 'next/link';
 7 | 
 8 | export const metadata = generateMetadata({
 9 |     title: "404",
10 |     description: "The page you're looking for doesn't exist or has been moved.",
11 |     noIndex: true,
12 | });
13 | 
14 | const NotFoundPage = () => {
15 |     return (
16 |         <main className="relative flex flex-col items-center justify-center px-4 h-dvh">
17 |             <Wrapper>
18 |                 <Container className="flex flex-col items-center justify-center mx-auto py-16">
19 |                     <div className="flex items-center justify-center h-full flex-col">
20 |                         <span className="text-sm px-3.5 py-1 rounded-md bg-gradient-to-br from-sky-400 to-blue-600 text-neutral-50 custom-shadow">
21 |                             404
22 |                         </span>
23 |                         <h1 className="text-3xl md:text-5xl font-bold mt-5">
24 |                             Not Found
25 |                         </h1>
26 |                         <p className="text-base text-muted-foreground mt-5 text-center mx-auto max-w-xl">
27 |                             This page doesn&apos;t exist. Please check the URL and try again.
28 |                         </p>
29 |                         <Link href="/">
30 |                             <Button variant="subtle" className="mt-8">
31 |                                 <ArrowLeftIcon className="size-4" />
32 |                                 Back
33 |                             </Button>
34 |                         </Link>
35 |                     </div>
36 |                 </Container>
37 |             </Wrapper>
38 |         </main>
39 |     )
40 | };
41 | 
42 | export default NotFoundPage;
43 | 


--------------------------------------------------------------------------------
/src/constants/countries.ts:
--------------------------------------------------------------------------------
 1 | export const SUPPORTED_LANGUAGES = [
 2 |     {
 3 |         name: "English",
 4 |         flag: "🇺🇸",
 5 |         code: "en"
 6 |     },
 7 |     {
 8 |         name: "Spanish",
 9 |         flag: "🇪🇸",
10 |         code: "es"
11 |     },
12 |     {
13 |         name: "French",
14 |         flag: "🇫🇷",
15 |         code: "fr"
16 |     },
17 |     {
18 |         name: "Russian",
19 |         flag: "🇷🇺",
20 |         code: "ru"
21 |     },
22 |     {
23 |         name: "German",
24 |         flag: "🇩🇪",
25 |         code: "de"
26 |     },
27 |     {
28 |         name: "Chinese",
29 |         flag: "🇨🇳",
30 |         code: "zh"
31 |     },
32 |     {
33 |         name: "Japanese",
34 |         flag: "🇯🇵",
35 |         code: "ja"
36 |     },
37 |     {
38 |         name: "Korean",
39 |         flag: "🇰🇷",
40 |         code: "ko"
41 |     },
42 |     {
43 |         name: "Vietnamese",
44 |         flag: "🇻🇳",
45 |         code: "vi"
46 |     },
47 |     {
48 |         name: "Thai",
49 |         flag: "🇹🇭",
50 |         code: "th"
51 |     },
52 |     {
53 |         name: "Italian",
54 |         flag: "🇮🇹",
55 |         code: "it"
56 |     },
57 |     {
58 |         name: "Kazakh",
59 |         flag: "🇰🇿",
60 |         code: "kk"
61 |     },
62 |     {
63 |         name: "Indian",
64 |         flag: "🇮🇳",
65 |         code: "hi"
66 |     },
67 |     {
68 |         name: "Georgian",
69 |         flag: "🇬🇪",
70 |         code: "ka"
71 |     },
72 |     {
73 |         name: "Romanian",
74 |         flag: "🇷🇴",
75 |         code: "ro"
76 |     },
77 |     {
78 |         name: "Polish",
79 |         flag: "🇵🇱",
80 |         code: "pl"
81 |     },
82 |     {
83 |         name: "Ukrainian",
84 |         flag: "🇺🇦",
85 |         code: "uk"
86 |     },
87 |     {
88 |         name: "Turkish",
89 |         flag: "🇹🇷",
90 |         code: "tr"
91 |     },
92 |     {
93 |         name: "Belarusian",
94 |         flag: "🇧🇾",
95 |         code: "be"
96 |     }
97 | ]; 


--------------------------------------------------------------------------------
/src/components/ui/toggle-group.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
 5 | import { type VariantProps } from "class-variance-authority"
 6 | 
 7 | import { cn } from "@/lib"
 8 | import { toggleVariants } from "@/components/ui/toggle"
 9 | 
10 | const ToggleGroupContext = React.createContext<
11 |   VariantProps<typeof toggleVariants>
12 | >({
13 |   size: "default",
14 |   variant: "default",
15 | })
16 | 
17 | const ToggleGroup = React.forwardRef<
18 |   React.ElementRef<typeof ToggleGroupPrimitive.Root>,
19 |   React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
20 |   VariantProps<typeof toggleVariants>
21 | >(({ className, variant, size, children, ...props }, ref) => (
22 |   <ToggleGroupPrimitive.Root
23 |     ref={ref}
24 |     className={cn("flex items-center justify-center gap-1", className)}
25 |     {...props}
26 |   >
27 |     <ToggleGroupContext.Provider value={{ variant, size }}>
28 |       {children}
29 |     </ToggleGroupContext.Provider>
30 |   </ToggleGroupPrimitive.Root>
31 | ))
32 | 
33 | ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
34 | 
35 | const ToggleGroupItem = React.forwardRef<
36 |   React.ElementRef<typeof ToggleGroupPrimitive.Item>,
37 |   React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
38 |   VariantProps<typeof toggleVariants>
39 | >(({ className, children, variant, size, ...props }, ref) => {
40 |   const context = React.useContext(ToggleGroupContext)
41 | 
42 |   return (
43 |     <ToggleGroupPrimitive.Item
44 |       ref={ref}
45 |       className={cn(
46 |         toggleVariants({
47 |           variant: context.variant || variant,
48 |           size: context.size || size,
49 |         }),
50 |         className
51 |       )}
52 |       {...props}
53 |     >
54 |       {children}
55 |     </ToggleGroupPrimitive.Item>
56 |   )
57 | })
58 | 
59 | ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
60 | 
61 | export { ToggleGroup, ToggleGroupItem }
62 | 


--------------------------------------------------------------------------------
/src/components/marketing/navbar.tsx:
--------------------------------------------------------------------------------
 1 | import { NAV_LINKS } from "@/constants";
 2 | import Link from "next/link";
 3 | import Icons from "../global/icons";
 4 | import Wrapper from "../global/wrapper";
 5 | import { Button } from "../ui/button";
 6 | import MobileMenu from "./mobile-menu";
 7 | 
 8 | const Navbar = () => {
 9 |     return (
10 |         <header className="sticky top-0 w-full h-16 bg-background/80 backdrop-blur-sm z-50">
11 |             <Wrapper className="h-full">
12 |                 <div className="flex items-center justify-between h-full">
13 |                     <div className="flex items-center">
14 |                         <Link href="/" className="flex items-center gap-2">
15 |                             <Icons.icon className="w-6" />
16 |                             <span className="text-xl font-semibold hidden lg:block">
17 |                                 Vetra
18 |                             </span>
19 |                         </Link>
20 |                     </div>
21 | 
22 |                     <div className="hidden lg:flex items-center gap-4">
23 |                         <ul className="flex items-center gap-8">
24 |                             {NAV_LINKS.map((link, index) => (
25 |                                 <li key={index} className="text-sm font-medium -1 link">
26 |                                     <Link href={link.href}>
27 |                                         {link.name}
28 |                                     </Link>
29 |                                 </li>
30 |                             ))}
31 |                         </ul>
32 |                     </div>
33 | 
34 |                     <div className="flex items-center gap-4">
35 |                         <Link href="#" className="hidden lg:block">
36 |                             <Button variant="blue">
37 |                                 Get Started
38 |                             </Button>
39 |                         </Link>
40 |                         <MobileMenu />
41 |                     </div>
42 |                 </div>
43 |             </Wrapper>
44 |         </header>
45 |     )
46 | };
47 | 
48 | export default Navbar
49 | 


--------------------------------------------------------------------------------
/src/components/ui/tabs.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as TabsPrimitive from "@radix-ui/react-tabs"
 5 | 
 6 | import { cn } from "@/lib"
 7 | 
 8 | const Tabs = TabsPrimitive.Root
 9 | 
10 | const TabsList = React.forwardRef<
11 |   React.ElementRef<typeof TabsPrimitive.List>,
12 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
13 | >(({ className, ...props }, ref) => (
14 |   <TabsPrimitive.List
15 |     ref={ref}
16 |     className={cn(
17 |       "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
18 |       className
19 |     )}
20 |     {...props}
21 |   />
22 | ))
23 | TabsList.displayName = TabsPrimitive.List.displayName
24 | 
25 | const TabsTrigger = React.forwardRef<
26 |   React.ElementRef<typeof TabsPrimitive.Trigger>,
27 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
28 | >(({ className, ...props }, ref) => (
29 |   <TabsPrimitive.Trigger
30 |     ref={ref}
31 |     className={cn(
32 |       "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
33 |       className
34 |     )}
35 |     {...props}
36 |   />
37 | ))
38 | TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
39 | 
40 | const TabsContent = React.forwardRef<
41 |   React.ElementRef<typeof TabsPrimitive.Content>,
42 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
43 | >(({ className, ...props }, ref) => (
44 |   <TabsPrimitive.Content
45 |     ref={ref}
46 |     className={cn(
47 |       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
48 |       className
49 |     )}
50 |     {...props}
51 |   />
52 | ))
53 | TabsContent.displayName = TabsPrimitive.Content.displayName
54 | 
55 | export { Tabs, TabsList, TabsTrigger, TabsContent }
56 | 


--------------------------------------------------------------------------------
/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib"
 4 | 
 5 | const Card = React.forwardRef<
 6 |   HTMLDivElement,
 7 |   React.HTMLAttributes<HTMLDivElement>
 8 | >(({ className, ...props }, ref) => (
 9 |   <div
10 |     ref={ref}
11 |     className={cn(
12 |       "rounded-lg border bg-card text-card-foreground shadow-sm",
13 |       className
14 |     )}
15 |     {...props}
16 |   />
17 | ))
18 | Card.displayName = "Card"
19 | 
20 | const CardHeader = React.forwardRef<
21 |   HTMLDivElement,
22 |   React.HTMLAttributes<HTMLDivElement>
23 | >(({ className, ...props }, ref) => (
24 |   <div
25 |     ref={ref}
26 |     className={cn("flex flex-col space-y-1.5 p-6", className)}
27 |     {...props}
28 |   />
29 | ))
30 | CardHeader.displayName = "CardHeader"
31 | 
32 | const CardTitle = React.forwardRef<
33 |   HTMLDivElement,
34 |   React.HTMLAttributes<HTMLDivElement>
35 | >(({ className, ...props }, ref) => (
36 |   <div
37 |     ref={ref}
38 |     className={cn(
39 |       "text-2xl font-semibold leading-none tracking-tight",
40 |       className
41 |     )}
42 |     {...props}
43 |   />
44 | ))
45 | CardTitle.displayName = "CardTitle"
46 | 
47 | const CardDescription = React.forwardRef<
48 |   HTMLDivElement,
49 |   React.HTMLAttributes<HTMLDivElement>
50 | >(({ className, ...props }, ref) => (
51 |   <div
52 |     ref={ref}
53 |     className={cn("text-sm text-muted-foreground", className)}
54 |     {...props}
55 |   />
56 | ))
57 | CardDescription.displayName = "CardDescription"
58 | 
59 | const CardContent = React.forwardRef<
60 |   HTMLDivElement,
61 |   React.HTMLAttributes<HTMLDivElement>
62 | >(({ className, ...props }, ref) => (
63 |   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
64 | ))
65 | CardContent.displayName = "CardContent"
66 | 
67 | const CardFooter = React.forwardRef<
68 |   HTMLDivElement,
69 |   React.HTMLAttributes<HTMLDivElement>
70 | >(({ className, ...props }, ref) => (
71 |   <div
72 |     ref={ref}
73 |     className={cn("flex items-center p-6 pt-0", className)}
74 |     {...props}
75 |   />
76 | ))
77 | CardFooter.displayName = "CardFooter"
78 | 
79 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
80 | 


--------------------------------------------------------------------------------
/src/components/marketing/lang-support.tsx:
--------------------------------------------------------------------------------
 1 | import { SUPPORTED_LANGUAGES } from "@/constants/countries";
 2 | import { Plus } from "lucide-react";
 3 | import Container from "../global/container";
 4 | 
 5 | const LanguageSupport = () => {
 6 |     return (
 7 |         <div className="relative flex flex-col items-center justify-center max-w-5xl py-20 mx-auto">
 8 |             <Container>
 9 |                 <div className="flex flex-col items-center justify-center w-full max-w-3xl mx-auto text-center">
10 |                     <h2 className="text-2xl md:text-4xl lg:text-5xl font-heading font-medium !leading-snug mb-6">
11 |                         Instantly translate your content into 60+ <span className="font-subheading italic">languages</span>
12 |                     </h2>
13 |                 </div>
14 |             </Container>
15 | 
16 |             <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6 items-start justify-start max-w-4xl mx-auto pt-10 relative w-full">
17 | 
18 |                 <div className="absolute top-1/2 -translate-y-1/2 right-1/4 w-3/5 h-14 lg:h-20 bg-gradient-to-r from-blue-400 to-indigo-500 rounded-full -rotate-12 blur-[10rem] -z-10"></div>
19 | 
20 |                 {SUPPORTED_LANGUAGES.map((language, idx) => (
21 |                     <Container
22 |                         key={language.code}
23 |                         delay={0.05 * idx}
24 |                         className="flex items-center space-x-2 text-sm text-muted-foreground hover:text-primary transition-colors h-auto"
25 |                     >
26 |                         <span className="text-2xl">{language.flag}</span>
27 |                         <span className="text-lg lg:text-xl">{language.name}</span>
28 |                     </Container>
29 |                 ))}
30 |                 <div className="flex items-center space-x-2 text-sm text-muted-foreground">
31 |                     <span className="flex items-center justify-center w-6 h-6 rounded-full bg-muted">
32 |                         <Plus size={14} />
33 |                     </span>
34 |                     <span>And more</span>
35 |                 </div>
36 |             </div>
37 |         </div>
38 |     )
39 | };
40 | 
41 | export default LanguageSupport
42 | 


--------------------------------------------------------------------------------
/src/components/ui/accordion.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as AccordionPrimitive from "@radix-ui/react-accordion"
 5 | import { ChevronDown } from "lucide-react"
 6 | 
 7 | import { cn } from "@/lib"
 8 | 
 9 | const Accordion = AccordionPrimitive.Root
10 | 
11 | const AccordionItem = React.forwardRef<
12 |   React.ElementRef<typeof AccordionPrimitive.Item>,
13 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
14 | >(({ className, ...props }, ref) => (
15 |   <AccordionPrimitive.Item
16 |     ref={ref}
17 |     className={cn("border-b", className)}
18 |     {...props}
19 |   />
20 | ))
21 | AccordionItem.displayName = "AccordionItem"
22 | 
23 | const AccordionTrigger = React.forwardRef<
24 |   React.ElementRef<typeof AccordionPrimitive.Trigger>,
25 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
26 | >(({ className, children, ...props }, ref) => (
27 |   <AccordionPrimitive.Header className="flex">
28 |     <AccordionPrimitive.Trigger
29 |       ref={ref}
30 |       className={cn(
31 |         "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
32 |         className
33 |       )}
34 |       {...props}
35 |     >
36 |       {children}
37 |       <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
38 |     </AccordionPrimitive.Trigger>
39 |   </AccordionPrimitive.Header>
40 | ))
41 | AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
42 | 
43 | const AccordionContent = React.forwardRef<
44 |   React.ElementRef<typeof AccordionPrimitive.Content>,
45 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
46 | >(({ className, children, ...props }, ref) => (
47 |   <AccordionPrimitive.Content
48 |     ref={ref}
49 |     className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
50 |     {...props}
51 |   >
52 |     <div className={cn("pb-4 pt-0", className)}>{children}</div>
53 |   </AccordionPrimitive.Content>
54 | ))
55 | 
56 | AccordionContent.displayName = AccordionPrimitive.Content.displayName
57 | 
58 | export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
59 | 


--------------------------------------------------------------------------------
/src/components/ui/ripple.tsx:
--------------------------------------------------------------------------------
 1 | import React, { CSSProperties } from "react";
 2 | 
 3 | import { cn } from "@/lib";
 4 | 
 5 | interface RippleProps {
 6 |     mainCircleSize?: number;
 7 |     mainCircleOpacity?: number;
 8 |     numCircles?: number;
 9 |     className?: string;
10 | }
11 | 
12 | const Ripple = React.memo(function Ripple({
13 |     mainCircleSize = 170,
14 |     mainCircleOpacity = 0.24,
15 |     numCircles = 6,
16 |     className,
17 | }: RippleProps) {
18 |     return (
19 |         <div
20 |             className={cn(
21 |                 "pointer-events-none select-none absolute inset-0 [mask-image:linear-gradient(to_bottom,white,transparent)]",
22 |                 className,
23 |             )}
24 |         >
25 |             {Array.from({ length: numCircles }, (_, i) => {
26 |                 const size = mainCircleSize + i * 110;
27 |                 const opacity = mainCircleOpacity - i * 0.03;
28 |                 const animationDelay = `${i * 0.06}s`;
29 |                 const borderStyle = i === numCircles - 1 ? "dashed" : "solid";
30 |                 const borderOpacity = 5 + i * 5;
31 | 
32 |                 return (
33 |                     <div
34 |                         key={i}
35 |                         className={`absolute animate-ripple rounded-full bg-foreground/25 shadow-xl border [--i:${i}]`}
36 |                         style={
37 |                             {
38 |                                 width: `${size}px`,
39 |                                 height: `${size}px`,
40 |                                 opacity,
41 |                                 animationDelay,
42 |                                 borderStyle,
43 |                                 borderWidth: "1px",
44 |                                 borderColor: `hsl(var(--foreground), ${borderOpacity / 100})`,
45 |                                 top: "50%",
46 |                                 left: "50%",
47 |                                 transform: "translate(-50%, -50%) scale(1)",
48 |                             } as CSSProperties
49 |                         }
50 |                     />
51 |                 );
52 |             })}
53 |         </div>
54 |     );
55 | });
56 | 
57 | Ripple.displayName = "Ripple";
58 | 
59 | export default Ripple;
60 | 


--------------------------------------------------------------------------------
/src/utils/metadata.ts:
--------------------------------------------------------------------------------
 1 | import { Metadata } from "next";
 2 | 
 3 | interface MetadataProps {
 4 |     title?: string;
 5 |     description?: string;
 6 |     icons?: Metadata["icons"];
 7 |     noIndex?: boolean;
 8 |     keywords?: string[];
 9 |     author?: string;
10 |     twitterHandle?: string;
11 |     type?: "website" | "article" | "profile";
12 |     locale?: string;
13 |     alternates?: Record<string, string>;
14 |     publishedTime?: string;
15 |     modifiedTime?: string;
16 | }
17 | 
18 | export const generateMetadata = ({
19 |     title = `Vetra - AI-Powered Project Management & Team Collaboration`,
20 |     description = `Vetra is an intelligent project management platform that transforms how teams work together. Leverage AI to automate workflows, enhance collaboration, and boost productivity. Experience smarter project management today.`,
21 |     icons = [
22 |         {
23 |             rel: "icon",
24 |             url: "/icons/icon-dark.png",
25 |             media: "(prefers-color-scheme: light)",
26 |         },
27 |         {
28 |             rel: "icon",
29 |             url: "/icons/icon.png",
30 |             media: "(prefers-color-scheme: dark)",
31 |         },
32 |     ],
33 |     noIndex = false,
34 |     keywords = [
35 |         "AI marketing automation",
36 |         "social media marketing",
37 |         "content generation",
38 |         "marketing analytics",
39 |         "campaign management",
40 |         "multilingual marketing",
41 |         "AI copywriting",
42 |         "marketing workflow",
43 |         "performance tracking",
44 |         "digital marketing tools"
45 |     ],
46 |     author = process.env.NEXT_PUBLIC_AUTHOR_NAME,
47 |     type = "website",
48 | }: MetadataProps = {}): Metadata => {
49 |     const metadataBase = new URL(process.env.NEXT_PUBLIC_APP_URL || "https://vertra-ai.vercel.app");
50 | 
51 |     return {
52 |         metadataBase,
53 |         title: {
54 |             template: `%s | ${process.env.NEXT_PUBLIC_APP_NAME}`,
55 |             default: title
56 |         },
57 |         description,
58 |         keywords,
59 |         authors: [{ name: author }],
60 |         creator: author,
61 |         publisher: process.env.NEXT_PUBLIC_APP_NAME,
62 |         formatDetection: {
63 |             email: false,
64 |             address: false,
65 |             telephone: false,
66 |         },
67 |         icons,
68 |     };
69 | };


--------------------------------------------------------------------------------
/src/components/ui/input-otp.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import { OTPInput, OTPInputContext } from "input-otp"
 5 | import { Dot } from "lucide-react"
 6 | 
 7 | import { cn } from "@/lib"
 8 | 
 9 | const InputOTP = React.forwardRef<
10 |   React.ElementRef<typeof OTPInput>,
11 |   React.ComponentPropsWithoutRef<typeof OTPInput>
12 | >(({ className, containerClassName, ...props }, ref) => (
13 |   <OTPInput
14 |     ref={ref}
15 |     containerClassName={cn(
16 |       "flex items-center gap-2 has-[:disabled]:opacity-50",
17 |       containerClassName
18 |     )}
19 |     className={cn("disabled:cursor-not-allowed", className)}
20 |     {...props}
21 |   />
22 | ))
23 | InputOTP.displayName = "InputOTP"
24 | 
25 | const InputOTPGroup = React.forwardRef<
26 |   React.ElementRef<"div">,
27 |   React.ComponentPropsWithoutRef<"div">
28 | >(({ className, ...props }, ref) => (
29 |   <div ref={ref} className={cn("flex items-center", className)} {...props} />
30 | ))
31 | InputOTPGroup.displayName = "InputOTPGroup"
32 | 
33 | const InputOTPSlot = React.forwardRef<
34 |   React.ElementRef<"div">,
35 |   React.ComponentPropsWithoutRef<"div"> & { index: number }
36 | >(({ index, className, ...props }, ref) => {
37 |   const inputOTPContext = React.useContext(OTPInputContext)
38 |   const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
39 | 
40 |   return (
41 |     <div
42 |       ref={ref}
43 |       className={cn(
44 |         "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
45 |         isActive && "z-10 ring-2 ring-ring ring-offset-background",
46 |         className
47 |       )}
48 |       {...props}
49 |     >
50 |       {char}
51 |       {hasFakeCaret && (
52 |         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
53 |           <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
54 |         </div>
55 |       )}
56 |     </div>
57 |   )
58 | })
59 | InputOTPSlot.displayName = "InputOTPSlot"
60 | 
61 | const InputOTPSeparator = React.forwardRef<
62 |   React.ElementRef<"div">,
63 |   React.ComponentPropsWithoutRef<"div">
64 | >(({ ...props }, ref) => (
65 |   <div ref={ref} role="separator" {...props}>
66 |     <Dot />
67 |   </div>
68 | ))
69 | InputOTPSeparator.displayName = "InputOTPSeparator"
70 | 
71 | export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
72 | 


--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:-translate-y-0.5 transition-all duration-300",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-primary text-primary-foreground hover:opacity-70 hover:ring-4 hover:ring-primary/10",
13 |         destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
14 |         outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
15 |         subtle: "border border-input bg-accent/20 hover:bg-white/10 hover:text-accent-foreground",
16 |         blue: "border border-input bg-blue-500 text-white hover:bg-blue-600",
17 |         secondary: "text-secondary-foreground btn-secondary font-normal",
18 |         ghost: "hover:bg-white/10 hover:text-accent-foreground",
19 |         link: "text-primary underline-offset-4 hover:underline",
20 |         white: "bg-foreground text-background hover:opacity-70",
21 |       },
22 |       size: {
23 |         default: "h-9 px-4 py-2",
24 |         xs: "h-7 px-2",
25 |         sm: "h-8 px-3",
26 |         lg: "h-10 px-8",
27 |         xl: "h-12 px-10",
28 |         icon: "h-8 w-8",
29 |         iconlg: "h-10 w-10",
30 |       },
31 |     },
32 |     defaultVariants: {
33 |       variant: "default",
34 |       size: "default",
35 |     },
36 |   }
37 | )
38 | 
39 | export interface ButtonProps
40 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
41 |     VariantProps<typeof buttonVariants> {
42 |   asChild?: boolean
43 | }
44 | 
45 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
46 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
47 |     const Comp = asChild ? Slot : "button"
48 |     return (
49 |       <Comp
50 |         className={cn(buttonVariants({ variant, size, className }))}
51 |         ref={ref}
52 |         {...props}
53 |       />
54 |     )
55 |   }
56 | )
57 | Button.displayName = "Button"
58 | 
59 | export { Button, buttonVariants }
60 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vetra",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@hookform/resolvers": "^3.10.0",
13 |     "@number-flow/react": "^0.5.5",
14 |     "@radix-ui/react-accordion": "^1.2.2",
15 |     "@radix-ui/react-alert-dialog": "^1.1.4",
16 |     "@radix-ui/react-aspect-ratio": "^1.1.1",
17 |     "@radix-ui/react-avatar": "^1.1.2",
18 |     "@radix-ui/react-checkbox": "^1.1.3",
19 |     "@radix-ui/react-collapsible": "^1.1.2",
20 |     "@radix-ui/react-context-menu": "^2.2.4",
21 |     "@radix-ui/react-dialog": "^1.1.4",
22 |     "@radix-ui/react-dropdown-menu": "^2.1.4",
23 |     "@radix-ui/react-hover-card": "^1.1.4",
24 |     "@radix-ui/react-label": "^2.1.1",
25 |     "@radix-ui/react-menubar": "^1.1.4",
26 |     "@radix-ui/react-navigation-menu": "^1.2.3",
27 |     "@radix-ui/react-popover": "^1.1.4",
28 |     "@radix-ui/react-progress": "^1.1.1",
29 |     "@radix-ui/react-radio-group": "^1.2.2",
30 |     "@radix-ui/react-scroll-area": "^1.2.2",
31 |     "@radix-ui/react-select": "^2.1.4",
32 |     "@radix-ui/react-separator": "^1.1.1",
33 |     "@radix-ui/react-slider": "^1.2.2",
34 |     "@radix-ui/react-slot": "^1.1.1",
35 |     "@radix-ui/react-switch": "^1.1.2",
36 |     "@radix-ui/react-tabs": "^1.1.2",
37 |     "@radix-ui/react-toast": "^1.2.4",
38 |     "@radix-ui/react-toggle": "^1.1.1",
39 |     "@radix-ui/react-toggle-group": "^1.1.1",
40 |     "@radix-ui/react-tooltip": "^1.1.6",
41 |     "class-variance-authority": "^0.7.1",
42 |     "clsx": "^2.1.1",
43 |     "cmdk": "1.0.0",
44 |     "date-fns": "^4.1.0",
45 |     "embla-carousel-react": "^8.5.2",
46 |     "framer-motion": "^11.18.0",
47 |     "input-otp": "^1.4.2",
48 |     "lucide-react": "^0.471.1",
49 |     "next": "15.1.4",
50 |     "next-themes": "^0.4.4",
51 |     "react": "^19.0.0",
52 |     "react-day-picker": "8.10.1",
53 |     "react-dom": "^19.0.0",
54 |     "react-hook-form": "^7.54.2",
55 |     "react-resizable-panels": "^2.1.7",
56 |     "recharts": "^2.15.0",
57 |     "sonner": "^1.7.2",
58 |     "tailwind-merge": "^2.6.0",
59 |     "tailwindcss-animate": "^1.0.7",
60 |     "vaul": "^1.1.2",
61 |     "zod": "^3.24.1"
62 |   },
63 |   "devDependencies": {
64 |     "@eslint/eslintrc": "^3",
65 |     "@types/node": "^20",
66 |     "@types/react": "^19",
67 |     "@types/react-dom": "^19",
68 |     "eslint": "^9",
69 |     "eslint-config-next": "15.1.4",
70 |     "postcss": "^8",
71 |     "tailwindcss": "^3.4.1",
72 |     "typescript": "^5"
73 |   }
74 | }
75 | 


--------------------------------------------------------------------------------
/src/components/ui/orbiting-circles.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib";
 2 | import React from "react";
 3 | 
 4 | export interface OrbitingCirclesProps
 5 |     extends React.HTMLAttributes<HTMLDivElement> {
 6 |     className?: string;
 7 |     children?: React.ReactNode;
 8 |     reverse?: boolean;
 9 |     duration?: number;
10 |     delay?: number;
11 |     radius?: number;
12 |     path?: boolean;
13 |     iconSize?: number;
14 |     speed?: number;
15 |     stroke?: string;
16 | }
17 | 
18 | export function OrbitingCircles({
19 |     className,
20 |     children,
21 |     reverse,
22 |     duration = 20,
23 |     radius = 160,
24 |     path = true,
25 |     iconSize = 30,
26 |     speed = 1,
27 |     stroke = "currentColor",
28 |     ...props
29 | }: OrbitingCirclesProps) {
30 |     const calculatedDuration = duration / speed;
31 |     return (
32 |         <>
33 |             {path && (
34 |                 <svg
35 |                     xmlns="http://www.w3.org/2000/svg"
36 |                     version="1.1"
37 |                     className="pointer-events-none absolute inset-0 size-full"
38 |                 >
39 |                     <circle
40 |                         className={cn(
41 |                             "stroke-white/10 stroke-1",
42 |                             stroke && stroke
43 |                         )}
44 |                         strokeDasharray="5 5"
45 |                         cx="50%"
46 |                         cy="50%"
47 |                         r={radius}
48 |                         fill="none"
49 |                     />
50 |                 </svg>
51 |             )}
52 |             {React.Children.map(children, (child, index) => {
53 |                 const angle = (360 / React.Children.count(children)) * index;
54 |                 return (
55 |                     <div
56 |                         style={
57 |                             {
58 |                                 "--duration": calculatedDuration,
59 |                                 "--radius": radius,
60 |                                 "--angle": angle,
61 |                                 "--icon-size": `${iconSize}px`,
62 |                             } as React.CSSProperties
63 |                         }
64 |                         className={cn(
65 |                             `absolute flex size-[var(--icon-size)] transform-gpu animate-orbit items-center justify-center rounded-full`,
66 |                             { "[animation-direction:reverse]": reverse },
67 |                             className,
68 |                         )}
69 |                         {...props}
70 |                     >
71 |                         {child}
72 |                     </div>
73 |                 );
74 |             })}
75 |         </>
76 |     );
77 | };
78 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <img src="https://github.com/user-attachments/assets/9594d359-0988-4fec-b588-0dcee51168e3" alt="Vetra Logo" width="50" height="50">
 2 | 
 3 | # 🚀 Vetra - AI Marketing Automation Platform
 4 | 
 5 | <img src="https://github.com/user-attachments/assets/df541304-ea1c-4ebe-b6fd-2e093680314f" alt="Vetra Thumbnail">
 6 | 
 7 | ## 🌟 Introduction
 8 | Vetra is an AI-powered marketing automation platform that transforms your marketing workflow in seconds. Built with modern technologies, it offers a sleek interface for managing marketing campaigns, content generation, and performance analytics.
 9 | 
10 | ## 🔗 Live Preview
11 | 
12 | Check out the live demo of caps.ai here: [Live Preview](https://vetra-app.vercel.app/)
13 | 
14 | ## 🎥 Watch the Preview Video on YouTube
15 | 
16 | Take a look at YouTube video by watching the demo: [Watch the Video](https://youtu.be/dfQ_WwWV6g8) 
17 | 
18 | ## 💻 Tech Stack
19 | 
20 | - **Next.js 15** – React framework for production
21 | - **TailwindCSS** – Utility-first CSS framework
22 | - **Shadcn UI** – Reusable component system
23 | - **Framer Motion** – Smooth animations
24 | - **TypeScript** – Type-safe code
25 | - **Number Flow** – Smooth number animations
26 | 
27 | ## 🛠️ Installation
28 | 
29 | 1. Clone the repository:
30 |     ```bash
31 |     git clone https://github.com/Shreyas-29/vetra.git
32 |     ```
33 | 
34 | 2. Install dependencies:
35 |     ```bash
36 |     pnpm install
37 |     # or
38 |     yarn install
39 |     ```
40 | 
41 | 3. Run the development server:
42 |     ```bash
43 |     pnpm run dev
44 |     # or
45 |     yarn dev
46 |     ```
47 | 
48 | 4. Open [http://localhost:3000](http://localhost:3000) in your browser
49 | 
50 | ## 🔧 Environment Variables
51 | 
52 | Create a `.env` file in the root directory:
53 | 
54 | ```env
55 | NEXT_PUBLIC_APP_URL=your_app_url
56 | ```
57 | 
58 | ## 🚀 Deploy on Vercel
59 | 
60 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new) from the creators of Next.js.
61 | 
62 | Check out the [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
63 | 
64 | 
65 | ## 🤝 Contributing
66 | 
67 | Contributions are welcome! Please feel free to submit a Pull Request.
68 | 
69 | 1. Fork the project
70 | 2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
71 | 3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
72 | 4. Push to the branch (`git push origin feature/AmazingFeature`)
73 | 5. Open a Pull Request
74 | 
75 | 
76 | ## 📜 License
77 | 
78 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
79 | 
80 | 
81 | ## ☕ Buy Me a Coffee
82 | If you enjoy using this project, consider supporting my work!  
83 | [Buy Me a Coffee ☕](https://buymeacoffee.com/shreyas29)
84 | 
85 | ---
86 | 
87 | Built with ❤️ by [Shreyas Sihasane](https://shreyas-sihasane.vercel.app)
88 | 


--------------------------------------------------------------------------------
/src/components/marketing/cta.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { motion } from "framer-motion";
 4 | import Link from "next/link";
 5 | import Container from "../global/container";
 6 | import { Button } from "../ui/button";
 7 | import Particles from "../ui/particles";
 8 | 
 9 | const CTA = () => {
10 |     return (
11 |         <div className="relative flex flex-col items-center justify-center w-full py-20">
12 |             <Container className="py-20 max-w-6xl mx-auto">
13 |                 <div className="relative flex flex-col items-center justify-center py-12 lg:py-20 px-0 rounded-2xl lg:rounded-3xl bg-background/20 text-center border border-foreground/20 overflow-hidden">
14 |                     <Particles
15 |                         refresh
16 |                         ease={80}
17 |                         quantity={80}
18 |                         color="#d4d4d4"
19 |                         className="hidden lg:block absolute inset-0 z-0"
20 |                     />
21 |                     <Particles
22 |                         refresh
23 |                         ease={80}
24 |                         quantity={35}
25 |                         color="#d4d4d4"
26 |                         className="block lg:hidden absolute inset-0 z-0"
27 |                     />
28 | 
29 |                     <motion.div
30 |                         className="absolute -bottom-1/8 left-1/3 -translate-x-1/2 w-44 h-32 lg:h-52 lg:w-1/3 rounded-full blur-[5rem] lg:blur-[10rem] -z-10"
31 |                         style={{
32 |                             background: 'conic-gradient(from 0deg at 50% 50%, #a855f7 0deg, #3b82f6 180deg, #06b6d4 360deg)',
33 |                         }}
34 |                         animate={{
35 |                             rotate: 360
36 |                         }}
37 |                         transition={{
38 |                             duration: 8,
39 |                             repeat: Infinity,
40 |                             ease: "linear"
41 |                         }}
42 |                     />
43 |                     <h2 className="text-3xl md:text-5xl lg:text-6xl font-heading font-medium !leading-snug">
44 |                         Ready to boost your <br /> <span className="font-subheading italic">marketing</span> ?
45 |                     </h2>
46 |                     <p className="text-sm md:text-lg text-center text-accent-foreground/80 max-w-2xl mx-auto mt-4">
47 |                         Transform your marketing with AI-powered automation. Create campaigns faster, generate better content <span className="hidden lg:inline">and make smarter decisions in minutes.</span>
48 |                     </p>
49 |                     <Link href="#pricing" className="mt-8">
50 |                         <Button size="lg">
51 |                             Let&apos;s get started
52 |                         </Button>
53 |                     </Link>
54 |                 </div>
55 |             </Container>
56 |         </div>
57 |     )
58 | };
59 | 
60 | export default CTA
61 | 


--------------------------------------------------------------------------------
/src/components/ui/calendar.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import { ChevronLeft, ChevronRight } from "lucide-react"
 5 | import { DayPicker } from "react-day-picker"
 6 | 
 7 | import { cn } from "@/lib"
 8 | import { buttonVariants } from "@/components/ui/button"
 9 | 
10 | export type CalendarProps = React.ComponentProps<typeof DayPicker>
11 | 
12 | function Calendar({
13 |   className,
14 |   classNames,
15 |   showOutsideDays = true,
16 |   ...props
17 | }: CalendarProps) {
18 |   return (
19 |     <DayPicker
20 |       showOutsideDays={showOutsideDays}
21 |       className={cn("p-3", className)}
22 |       classNames={{
23 |         months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
24 |         month: "space-y-4",
25 |         caption: "flex justify-center pt-1 relative items-center",
26 |         caption_label: "text-sm font-medium",
27 |         nav: "space-x-1 flex items-center",
28 |         nav_button: cn(
29 |           buttonVariants({ variant: "outline" }),
30 |           "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
31 |         ),
32 |         nav_button_previous: "absolute left-1",
33 |         nav_button_next: "absolute right-1",
34 |         table: "w-full border-collapse space-y-1",
35 |         head_row: "flex",
36 |         head_cell:
37 |           "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
38 |         row: "flex w-full mt-2",
39 |         cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
40 |         day: cn(
41 |           buttonVariants({ variant: "ghost" }),
42 |           "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
43 |         ),
44 |         day_range_end: "day-range-end",
45 |         day_selected:
46 |           "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
47 |         day_today: "bg-accent text-accent-foreground",
48 |         day_outside:
49 |           "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
50 |         day_disabled: "text-muted-foreground opacity-50",
51 |         day_range_middle:
52 |           "aria-selected:bg-accent aria-selected:text-accent-foreground",
53 |         day_hidden: "invisible",
54 |         ...classNames,
55 |       }}
56 |       components={{
57 |         IconLeft: ({ className, ...props }) => (
58 |           <ChevronLeft className={cn("h-4 w-4", className)} {...props} />
59 |         ),
60 |         IconRight: ({ className, ...props }) => (
61 |           <ChevronRight className={cn("h-4 w-4", className)} {...props} />
62 |         ),
63 |       }}
64 |       {...props}
65 |     />
66 |   )
67 | }
68 | Calendar.displayName = "Calendar"
69 | 
70 | export { Calendar }
71 | 


--------------------------------------------------------------------------------
/src/components/marketing/features.tsx:
--------------------------------------------------------------------------------
 1 | import { FEATURES } from "@/constants";
 2 | import { cn } from "@/lib";
 3 | import Image from "next/image";
 4 | import Container from "../global/container";
 5 | import { MagicCard } from "../ui/magic-card";
 6 | 
 7 | const Features = () => {
 8 |     return (
 9 |         <div className="relative flex flex-col items-center justify-center w-full py-20">
10 |             <Container>
11 |                 <div className="flex flex-col items-center text-center max-w-2xl mx-auto">
12 |                     <h2 className="text-2xl md:text-4xl lg:text-5xl font-heading font-medium !leading-snug mt-6">
13 |                         AI-Powered marketing <br /> made <span className="font-subheading italic">simple</span>
14 |                     </h2>
15 |                     <p className="text-base md:text-lg text-center text-accent-foreground/80 mt-6">
16 |                         Transform your marketing with AI-powered automation. Create campaigns faster, generate better content, and make smarter decisions in minutes.
17 |                     </p>
18 |                 </div>
19 |             </Container>
20 | 
21 |             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8 relative overflow-visible">
22 | 
23 |                 {FEATURES.map((feature, index) => (
24 |                     <Container key={feature.title} delay={0.1 + index * 0.1} className={cn(
25 |                         "relative flex flex-col rounded-2xl lg:rounded-3xl bg-card border border-border/50 hover:border-border/100 transition-colors",
26 |                         index === 3 && "lg:col-span-2",
27 |                         index === 2 && "md:col-span-2 lg:col-span-1",
28 |                     )}>
29 |                         <MagicCard
30 |                             gradientFrom="#38bdf8"
31 |                             gradientTo="#3b82f6"
32 |                             className="p-4 lg:p-6 lg:rounded-3xl"
33 |                             gradientColor="rgba(59,130,246,0.1)"
34 |                         >
35 |                             <div className="flex items-center space-x-4 mb-4">
36 |                                 <h3 className="text-xl font-semibold flex items-center gap-2">
37 |                                     <feature.icon className="size-5 text-primary" />
38 |                                     {feature.title}
39 |                                 </h3>
40 |                             </div>
41 |                             <p className="text-sm text-muted-foreground">
42 |                                 {feature.description}
43 |                             </p>
44 | 
45 |                             <div className="mt-6 w-full bg-card/50 overflow-hidden">
46 |                                 <Image
47 |                                     src={feature.image}
48 |                                     alt={feature.title}
49 |                                     width={500}
50 |                                     height={500}
51 |                                     className="w-full h-full object-cover"
52 |                                 />
53 |                             </div>
54 |                         </MagicCard>
55 |                     </Container>
56 |                 ))}
57 |             </div>
58 |         </div>
59 |     )
60 | };
61 | 
62 | export default Features
63 | 


--------------------------------------------------------------------------------
/src/components/ui/breadcrumb.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import { Slot } from "@radix-ui/react-slot"
  3 | import { ChevronRight, MoreHorizontal } from "lucide-react"
  4 | 
  5 | import { cn } from "@/lib"
  6 | 
  7 | const Breadcrumb = React.forwardRef<
  8 |   HTMLElement,
  9 |   React.ComponentPropsWithoutRef<"nav"> & {
 10 |     separator?: React.ReactNode
 11 |   }
 12 | >(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
 13 | Breadcrumb.displayName = "Breadcrumb"
 14 | 
 15 | const BreadcrumbList = React.forwardRef<
 16 |   HTMLOListElement,
 17 |   React.ComponentPropsWithoutRef<"ol">
 18 | >(({ className, ...props }, ref) => (
 19 |   <ol
 20 |     ref={ref}
 21 |     className={cn(
 22 |       "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
 23 |       className
 24 |     )}
 25 |     {...props}
 26 |   />
 27 | ))
 28 | BreadcrumbList.displayName = "BreadcrumbList"
 29 | 
 30 | const BreadcrumbItem = React.forwardRef<
 31 |   HTMLLIElement,
 32 |   React.ComponentPropsWithoutRef<"li">
 33 | >(({ className, ...props }, ref) => (
 34 |   <li
 35 |     ref={ref}
 36 |     className={cn("inline-flex items-center gap-1.5", className)}
 37 |     {...props}
 38 |   />
 39 | ))
 40 | BreadcrumbItem.displayName = "BreadcrumbItem"
 41 | 
 42 | const BreadcrumbLink = React.forwardRef<
 43 |   HTMLAnchorElement,
 44 |   React.ComponentPropsWithoutRef<"a"> & {
 45 |     asChild?: boolean
 46 |   }
 47 | >(({ asChild, className, ...props }, ref) => {
 48 |   const Comp = asChild ? Slot : "a"
 49 | 
 50 |   return (
 51 |     <Comp
 52 |       ref={ref}
 53 |       className={cn("transition-colors hover:text-foreground", className)}
 54 |       {...props}
 55 |     />
 56 |   )
 57 | })
 58 | BreadcrumbLink.displayName = "BreadcrumbLink"
 59 | 
 60 | const BreadcrumbPage = React.forwardRef<
 61 |   HTMLSpanElement,
 62 |   React.ComponentPropsWithoutRef<"span">
 63 | >(({ className, ...props }, ref) => (
 64 |   <span
 65 |     ref={ref}
 66 |     role="link"
 67 |     aria-disabled="true"
 68 |     aria-current="page"
 69 |     className={cn("font-normal text-foreground", className)}
 70 |     {...props}
 71 |   />
 72 | ))
 73 | BreadcrumbPage.displayName = "BreadcrumbPage"
 74 | 
 75 | const BreadcrumbSeparator = ({
 76 |   children,
 77 |   className,
 78 |   ...props
 79 | }: React.ComponentProps<"li">) => (
 80 |   <li
 81 |     role="presentation"
 82 |     aria-hidden="true"
 83 |     className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
 84 |     {...props}
 85 |   >
 86 |     {children ?? <ChevronRight />}
 87 |   </li>
 88 | )
 89 | BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
 90 | 
 91 | const BreadcrumbEllipsis = ({
 92 |   className,
 93 |   ...props
 94 | }: React.ComponentProps<"span">) => (
 95 |   <span
 96 |     role="presentation"
 97 |     aria-hidden="true"
 98 |     className={cn("flex h-9 w-9 items-center justify-center", className)}
 99 |     {...props}
100 |   >
101 |     <MoreHorizontal className="h-4 w-4" />
102 |     <span className="sr-only">More</span>
103 |   </span>
104 | )
105 | BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
106 | 
107 | export {
108 |   Breadcrumb,
109 |   BreadcrumbList,
110 |   BreadcrumbItem,
111 |   BreadcrumbLink,
112 |   BreadcrumbPage,
113 |   BreadcrumbSeparator,
114 |   BreadcrumbEllipsis,
115 | }
116 | 


--------------------------------------------------------------------------------
/src/components/ui/pagination.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
  3 | 
  4 | import { cn } from "@/lib"
  5 | import { ButtonProps, buttonVariants } from "@/components/ui/button"
  6 | 
  7 | const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
  8 |   <nav
  9 |     role="navigation"
 10 |     aria-label="pagination"
 11 |     className={cn("mx-auto flex w-full justify-center", className)}
 12 |     {...props}
 13 |   />
 14 | )
 15 | Pagination.displayName = "Pagination"
 16 | 
 17 | const PaginationContent = React.forwardRef<
 18 |   HTMLUListElement,
 19 |   React.ComponentProps<"ul">
 20 | >(({ className, ...props }, ref) => (
 21 |   <ul
 22 |     ref={ref}
 23 |     className={cn("flex flex-row items-center gap-1", className)}
 24 |     {...props}
 25 |   />
 26 | ))
 27 | PaginationContent.displayName = "PaginationContent"
 28 | 
 29 | const PaginationItem = React.forwardRef<
 30 |   HTMLLIElement,
 31 |   React.ComponentProps<"li">
 32 | >(({ className, ...props }, ref) => (
 33 |   <li ref={ref} className={cn("", className)} {...props} />
 34 | ))
 35 | PaginationItem.displayName = "PaginationItem"
 36 | 
 37 | type PaginationLinkProps = {
 38 |   isActive?: boolean
 39 | } & Pick<ButtonProps, "size"> &
 40 |   React.ComponentProps<"a">
 41 | 
 42 | const PaginationLink = ({
 43 |   className,
 44 |   isActive,
 45 |   size = "icon",
 46 |   ...props
 47 | }: PaginationLinkProps) => (
 48 |   <a
 49 |     aria-current={isActive ? "page" : undefined}
 50 |     className={cn(
 51 |       buttonVariants({
 52 |         variant: isActive ? "outline" : "ghost",
 53 |         size,
 54 |       }),
 55 |       className
 56 |     )}
 57 |     {...props}
 58 |   />
 59 | )
 60 | PaginationLink.displayName = "PaginationLink"
 61 | 
 62 | const PaginationPrevious = ({
 63 |   className,
 64 |   ...props
 65 | }: React.ComponentProps<typeof PaginationLink>) => (
 66 |   <PaginationLink
 67 |     aria-label="Go to previous page"
 68 |     size="default"
 69 |     className={cn("gap-1 pl-2.5", className)}
 70 |     {...props}
 71 |   >
 72 |     <ChevronLeft className="h-4 w-4" />
 73 |     <span>Previous</span>
 74 |   </PaginationLink>
 75 | )
 76 | PaginationPrevious.displayName = "PaginationPrevious"
 77 | 
 78 | const PaginationNext = ({
 79 |   className,
 80 |   ...props
 81 | }: React.ComponentProps<typeof PaginationLink>) => (
 82 |   <PaginationLink
 83 |     aria-label="Go to next page"
 84 |     size="default"
 85 |     className={cn("gap-1 pr-2.5", className)}
 86 |     {...props}
 87 |   >
 88 |     <span>Next</span>
 89 |     <ChevronRight className="h-4 w-4" />
 90 |   </PaginationLink>
 91 | )
 92 | PaginationNext.displayName = "PaginationNext"
 93 | 
 94 | const PaginationEllipsis = ({
 95 |   className,
 96 |   ...props
 97 | }: React.ComponentProps<"span">) => (
 98 |   <span
 99 |     aria-hidden
100 |     className={cn("flex h-9 w-9 items-center justify-center", className)}
101 |     {...props}
102 |   >
103 |     <MoreHorizontal className="h-4 w-4" />
104 |     <span className="sr-only">More pages</span>
105 |   </span>
106 | )
107 | PaginationEllipsis.displayName = "PaginationEllipsis"
108 | 
109 | export {
110 |   Pagination,
111 |   PaginationContent,
112 |   PaginationEllipsis,
113 |   PaginationItem,
114 |   PaginationLink,
115 |   PaginationNext,
116 |   PaginationPrevious,
117 | }
118 | 


--------------------------------------------------------------------------------
/src/components/ui/table.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | 
  3 | import { cn } from "@/lib"
  4 | 
  5 | const Table = React.forwardRef<
  6 |   HTMLTableElement,
  7 |   React.HTMLAttributes<HTMLTableElement>
  8 | >(({ className, ...props }, ref) => (
  9 |   <div className="relative w-full overflow-auto">
 10 |     <table
 11 |       ref={ref}
 12 |       className={cn("w-full caption-bottom text-sm", className)}
 13 |       {...props}
 14 |     />
 15 |   </div>
 16 | ))
 17 | Table.displayName = "Table"
 18 | 
 19 | const TableHeader = React.forwardRef<
 20 |   HTMLTableSectionElement,
 21 |   React.HTMLAttributes<HTMLTableSectionElement>
 22 | >(({ className, ...props }, ref) => (
 23 |   <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
 24 | ))
 25 | TableHeader.displayName = "TableHeader"
 26 | 
 27 | const TableBody = React.forwardRef<
 28 |   HTMLTableSectionElement,
 29 |   React.HTMLAttributes<HTMLTableSectionElement>
 30 | >(({ className, ...props }, ref) => (
 31 |   <tbody
 32 |     ref={ref}
 33 |     className={cn("[&_tr:last-child]:border-0", className)}
 34 |     {...props}
 35 |   />
 36 | ))
 37 | TableBody.displayName = "TableBody"
 38 | 
 39 | const TableFooter = React.forwardRef<
 40 |   HTMLTableSectionElement,
 41 |   React.HTMLAttributes<HTMLTableSectionElement>
 42 | >(({ className, ...props }, ref) => (
 43 |   <tfoot
 44 |     ref={ref}
 45 |     className={cn(
 46 |       "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
 47 |       className
 48 |     )}
 49 |     {...props}
 50 |   />
 51 | ))
 52 | TableFooter.displayName = "TableFooter"
 53 | 
 54 | const TableRow = React.forwardRef<
 55 |   HTMLTableRowElement,
 56 |   React.HTMLAttributes<HTMLTableRowElement>
 57 | >(({ className, ...props }, ref) => (
 58 |   <tr
 59 |     ref={ref}
 60 |     className={cn(
 61 |       "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
 62 |       className
 63 |     )}
 64 |     {...props}
 65 |   />
 66 | ))
 67 | TableRow.displayName = "TableRow"
 68 | 
 69 | const TableHead = React.forwardRef<
 70 |   HTMLTableCellElement,
 71 |   React.ThHTMLAttributes<HTMLTableCellElement>
 72 | >(({ className, ...props }, ref) => (
 73 |   <th
 74 |     ref={ref}
 75 |     className={cn(
 76 |       "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
 77 |       className
 78 |     )}
 79 |     {...props}
 80 |   />
 81 | ))
 82 | TableHead.displayName = "TableHead"
 83 | 
 84 | const TableCell = React.forwardRef<
 85 |   HTMLTableCellElement,
 86 |   React.TdHTMLAttributes<HTMLTableCellElement>
 87 | >(({ className, ...props }, ref) => (
 88 |   <td
 89 |     ref={ref}
 90 |     className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
 91 |     {...props}
 92 |   />
 93 | ))
 94 | TableCell.displayName = "TableCell"
 95 | 
 96 | const TableCaption = React.forwardRef<
 97 |   HTMLTableCaptionElement,
 98 |   React.HTMLAttributes<HTMLTableCaptionElement>
 99 | >(({ className, ...props }, ref) => (
100 |   <caption
101 |     ref={ref}
102 |     className={cn("mt-4 text-sm text-muted-foreground", className)}
103 |     {...props}
104 |   />
105 | ))
106 | TableCaption.displayName = "TableCaption"
107 | 
108 | export {
109 |   Table,
110 |   TableHeader,
111 |   TableBody,
112 |   TableFooter,
113 |   TableHead,
114 |   TableRow,
115 |   TableCell,
116 |   TableCaption,
117 | }
118 | 


--------------------------------------------------------------------------------
/src/components/ui/drawer.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import { Drawer as DrawerPrimitive } from "vaul"
  5 | 
  6 | import { cn } from "@/lib"
  7 | 
  8 | const Drawer = ({
  9 |   shouldScaleBackground = true,
 10 |   ...props
 11 | }: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
 12 |   <DrawerPrimitive.Root
 13 |     shouldScaleBackground={shouldScaleBackground}
 14 |     {...props}
 15 |   />
 16 | )
 17 | Drawer.displayName = "Drawer"
 18 | 
 19 | const DrawerTrigger = DrawerPrimitive.Trigger
 20 | 
 21 | const DrawerPortal = DrawerPrimitive.Portal
 22 | 
 23 | const DrawerClose = DrawerPrimitive.Close
 24 | 
 25 | const DrawerOverlay = React.forwardRef<
 26 |   React.ElementRef<typeof DrawerPrimitive.Overlay>,
 27 |   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
 28 | >(({ className, ...props }, ref) => (
 29 |   <DrawerPrimitive.Overlay
 30 |     ref={ref}
 31 |     className={cn("fixed inset-0 z-50 bg-black/80", className)}
 32 |     {...props}
 33 |   />
 34 | ))
 35 | DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
 36 | 
 37 | const DrawerContent = React.forwardRef<
 38 |   React.ElementRef<typeof DrawerPrimitive.Content>,
 39 |   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
 40 | >(({ className, children, ...props }, ref) => (
 41 |   <DrawerPortal>
 42 |     <DrawerOverlay />
 43 |     <DrawerPrimitive.Content
 44 |       ref={ref}
 45 |       className={cn(
 46 |         "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
 47 |         className
 48 |       )}
 49 |       {...props}
 50 |     >
 51 |       <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
 52 |       {children}
 53 |     </DrawerPrimitive.Content>
 54 |   </DrawerPortal>
 55 | ))
 56 | DrawerContent.displayName = "DrawerContent"
 57 | 
 58 | const DrawerHeader = ({
 59 |   className,
 60 |   ...props
 61 | }: React.HTMLAttributes<HTMLDivElement>) => (
 62 |   <div
 63 |     className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
 64 |     {...props}
 65 |   />
 66 | )
 67 | DrawerHeader.displayName = "DrawerHeader"
 68 | 
 69 | const DrawerFooter = ({
 70 |   className,
 71 |   ...props
 72 | }: React.HTMLAttributes<HTMLDivElement>) => (
 73 |   <div
 74 |     className={cn("mt-auto flex flex-col gap-2 p-4", className)}
 75 |     {...props}
 76 |   />
 77 | )
 78 | DrawerFooter.displayName = "DrawerFooter"
 79 | 
 80 | const DrawerTitle = React.forwardRef<
 81 |   React.ElementRef<typeof DrawerPrimitive.Title>,
 82 |   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
 83 | >(({ className, ...props }, ref) => (
 84 |   <DrawerPrimitive.Title
 85 |     ref={ref}
 86 |     className={cn(
 87 |       "text-lg font-semibold leading-none tracking-tight",
 88 |       className
 89 |     )}
 90 |     {...props}
 91 |   />
 92 | ))
 93 | DrawerTitle.displayName = DrawerPrimitive.Title.displayName
 94 | 
 95 | const DrawerDescription = React.forwardRef<
 96 |   React.ElementRef<typeof DrawerPrimitive.Description>,
 97 |   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
 98 | >(({ className, ...props }, ref) => (
 99 |   <DrawerPrimitive.Description
100 |     ref={ref}
101 |     className={cn("text-sm text-muted-foreground", className)}
102 |     {...props}
103 |   />
104 | ))
105 | DrawerDescription.displayName = DrawerPrimitive.Description.displayName
106 | 
107 | export {
108 |   Drawer,
109 |   DrawerPortal,
110 |   DrawerOverlay,
111 |   DrawerTrigger,
112 |   DrawerClose,
113 |   DrawerContent,
114 |   DrawerHeader,
115 |   DrawerFooter,
116 |   DrawerTitle,
117 |   DrawerDescription,
118 | }
119 | 


--------------------------------------------------------------------------------
/src/components/ui/magic-card.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { motion, useMotionTemplate, useMotionValue } from "framer-motion";
  4 | import React, { useCallback, useEffect, useRef } from "react";
  5 | 
  6 | import { cn } from "@/lib";
  7 | 
  8 | interface MagicCardProps extends React.HTMLAttributes<HTMLDivElement> {
  9 |     gradientSize?: number;
 10 |     gradientColor?: string;
 11 |     gradientOpacity?: number;
 12 |     gradientFrom?: string;
 13 |     gradientTo?: string;
 14 | }
 15 | 
 16 | export function MagicCard({
 17 |     children,
 18 |     className,
 19 |     gradientSize = 200,
 20 |     gradientColor = "#262626",
 21 |     gradientOpacity = 0.8,
 22 |     gradientFrom = "#9E7AFF",
 23 |     gradientTo = "#FE8BBB",
 24 | }: MagicCardProps) {
 25 |     const cardRef = useRef<HTMLDivElement>(null);
 26 |     const mouseX = useMotionValue(-gradientSize);
 27 |     const mouseY = useMotionValue(-gradientSize);
 28 | 
 29 |     const handleMouseMove = useCallback(
 30 |         (e: MouseEvent) => {
 31 |             if (cardRef.current) {
 32 |                 const { left, top } = cardRef.current.getBoundingClientRect();
 33 |                 const clientX = e.clientX;
 34 |                 const clientY = e.clientY;
 35 |                 mouseX.set(clientX - left);
 36 |                 mouseY.set(clientY - top);
 37 |             }
 38 |         },
 39 |         [mouseX, mouseY],
 40 |     );
 41 | 
 42 |     const handleMouseOut = useCallback(
 43 |         (e: MouseEvent) => {
 44 |             if (!e.relatedTarget) {
 45 |                 document.removeEventListener("mousemove", handleMouseMove);
 46 |                 mouseX.set(-gradientSize);
 47 |                 mouseY.set(-gradientSize);
 48 |             }
 49 |         },
 50 |         [handleMouseMove, mouseX, gradientSize, mouseY],
 51 |     );
 52 | 
 53 |     const handleMouseEnter = useCallback(() => {
 54 |         document.addEventListener("mousemove", handleMouseMove);
 55 |         mouseX.set(-gradientSize);
 56 |         mouseY.set(-gradientSize);
 57 |     }, [handleMouseMove, mouseX, gradientSize, mouseY]);
 58 | 
 59 |     useEffect(() => {
 60 |         document.addEventListener("mousemove", handleMouseMove);
 61 |         document.addEventListener("mouseout", handleMouseOut);
 62 |         document.addEventListener("mouseenter", handleMouseEnter);
 63 | 
 64 |         return () => {
 65 |             document.removeEventListener("mousemove", handleMouseMove);
 66 |             document.removeEventListener("mouseout", handleMouseOut);
 67 |             document.removeEventListener("mouseenter", handleMouseEnter);
 68 |         };
 69 |     }, [handleMouseEnter, handleMouseMove, handleMouseOut]);
 70 | 
 71 |     useEffect(() => {
 72 |         mouseX.set(-gradientSize);
 73 |         mouseY.set(-gradientSize);
 74 |     }, [gradientSize, mouseX, mouseY]);
 75 | 
 76 |     return (
 77 |         <div
 78 |             ref={cardRef}
 79 |             className={cn("group relative flex size-full rounded-xl", className)}
 80 |         >
 81 |             <div className="absolute inset-px z-10 rounded-xl bg-background" />
 82 |             <div className="relative z-30 w-full">{children}</div>
 83 |             <motion.div
 84 |                 className="pointer-events-none absolute inset-px z-10 rounded-xl opacity-0 transition-opacity duration-300 group-hover:opacity-100"
 85 |                 style={{
 86 |                     background: useMotionTemplate`
 87 |             radial-gradient(${gradientSize}px circle at ${mouseX}px ${mouseY}px, ${gradientColor}, transparent 100%)
 88 |           `,
 89 |                     opacity: gradientOpacity,
 90 |                 }}
 91 |             />
 92 |             <motion.div
 93 |                 className="pointer-events-none absolute inset-0 rounded-xl bg-border duration-300 group-hover:opacity-100"
 94 |                 style={{
 95 |                     background: useMotionTemplate`
 96 |             radial-gradient(${gradientSize}px circle at ${mouseX}px ${mouseY}px,
 97 |               ${gradientFrom}, 
 98 |               ${gradientTo}, 
 99 |               hsl(var(--border)) 100%
100 |             )
101 |           `,
102 |                 }}
103 |             />
104 |         </div>
105 |     );
106 | };
107 | 


--------------------------------------------------------------------------------
/src/styles/globals.css:
--------------------------------------------------------------------------------
  1 | @tailwind base;
  2 | @tailwind components;
  3 | @tailwind utilities;
  4 | 
  5 | @layer base {
  6 |   .dark {
  7 |     --background: 0 0% 100%;
  8 |     --foreground: 0 0% 3.9%;
  9 |     --card: 0 0% 100%;
 10 |     --card-foreground: 0 0% 3.9%;
 11 |     --popover: 0 0% 100%;
 12 |     --popover-foreground: 0 0% 3.9%;
 13 |     --primary: 0 0% 9%;
 14 |     --primary-foreground: 0 0% 98%;
 15 |     --secondary: 0 0% 96.1%;
 16 |     --secondary-foreground: 0 0% 9%;
 17 |     --muted: 0 0% 96.1%;
 18 |     --muted-foreground: 0 0% 45.1%;
 19 |     --accent: 0 0% 96.1%;
 20 |     --accent-foreground: 0 0% 9%;
 21 |     --destructive: 0 84.2% 60.2%;
 22 |     --destructive-foreground: 0 0% 98%;
 23 |     --border: 0 0% 89.8%;
 24 |     --input: 0 0% 89.8%;
 25 |     --ring: 0 0% 3.9%;
 26 |     --chart-1: 12 76% 61%;
 27 |     --chart-2: 173 58% 39%;
 28 |     --chart-3: 197 37% 24%;
 29 |     --chart-4: 43 74% 66%;
 30 |     --chart-5: 27 87% 67%;
 31 |     --radius: 0.5rem;
 32 |     --sidebar-background: 0 0% 98%;
 33 |     --sidebar-foreground: 240 5.3% 26.1%;
 34 |     --sidebar-primary: 240 5.9% 10%;
 35 |     --sidebar-primary-foreground: 0 0% 98%;
 36 |     --sidebar-accent: 240 4.8% 95.9%;
 37 |     --sidebar-accent-foreground: 240 5.9% 10%;
 38 |     --sidebar-border: 220 13% 91%;
 39 |     --sidebar-ring: 217.2 91.2% 59.8%;
 40 |   }
 41 | 
 42 |   :root {
 43 |     --background: 240 10% 4%;
 44 |     /* --background: 240 2% 8%; */
 45 |     --foreground: 0 0% 98%;
 46 |     --card: 0 0% 3.9%;
 47 |     --card-foreground: 0 0% 98%;
 48 |     --popover: 0 0% 3.9%;
 49 |     --popover-foreground: 0 0% 98%;
 50 |     --primary: 0 0% 98%;
 51 |     --primary-foreground: 0 0% 9%;
 52 |     --secondary: 0 0% 14.9%;
 53 |     --secondary-foreground: 0 0% 98%;
 54 |     --muted: 0 0% 14.9%;
 55 |     --muted-foreground: 0 0% 63.9%;
 56 |     --accent: 0 0% 14.9%;
 57 |     --accent-foreground: 0 0% 98%;
 58 |     --destructive: 0 62.8% 30.6%;
 59 |     --destructive-foreground: 0 0% 98%;
 60 |     --border: 0 0% 14.9%;
 61 |     --input: 0 0% 14.9%;
 62 |     --ring: 0 0% 83.1%;
 63 |     --radius: 0.6rem;
 64 |     --chart-1: 220 70% 50%;
 65 |     --chart-2: 160 60% 45%;
 66 |     --chart-3: 30 80% 55%;
 67 |     --chart-4: 280 65% 60%;
 68 |     --chart-5: 340 75% 55%;
 69 |     --sidebar-background: 240 5.9% 10%;
 70 |     --sidebar-foreground: 240 4.8% 95.9%;
 71 |     --sidebar-primary: 224.3 76.3% 48%;
 72 |     --sidebar-primary-foreground: 0 0% 100%;
 73 |     --sidebar-accent: 240 3.7% 15.9%;
 74 |     --sidebar-accent-foreground: 240 4.8% 95.9%;
 75 |     --sidebar-border: 240 3.7% 15.9%;
 76 |     --sidebar-ring: 217.2 91.2% 59.8%;
 77 |   }
 78 | }
 79 | 
 80 | ::-webkit-scrollbar {
 81 |   width: 4px;
 82 | }
 83 | 
 84 | ::-webkit-scrollbar-thumb {
 85 |   background: hsl(var(--foreground)/0.1);
 86 |   border-radius: 10px;
 87 | }
 88 | 
 89 | ::-webkit-scrollbar-track {
 90 |   background: hsl(var(--background));
 91 | }
 92 | 
 93 | img {
 94 |   user-select: none;
 95 |   pointer-events: none;
 96 | }
 97 | 
 98 | .link {
 99 |   position: relative;
100 |   transition: color 0.3s ease-in-out;
101 | }
102 | 
103 | .link::after {
104 |   content: "";
105 |   position: absolute;
106 |   bottom: -2px;
107 |   left: 0;
108 |   width: 0;
109 |   height: 1px;
110 |   background-color: hsl(var(--foreground));
111 |   transition: width 0.3s ease-in-out;
112 |   cursor: pointer;
113 |   border-radius: 10px;
114 | }
115 | 
116 | .link:hover::after {
117 |   width: 100%;
118 | }
119 | 
120 | .companies::before {
121 |   content: "";
122 |   position: absolute;
123 |   top: 0%;
124 |   left: 0;
125 |   height: 1px;
126 |   width: 100%;
127 |   color: rgb(48, 48, 48);
128 |   background: radial-gradient(50% 56400% at 50% 100%, rgb(34, 41, 57) 0%, rgba(169, 163, 194, 0) 100%);
129 | }
130 | 
131 | .companies::after {
132 |   content: "";
133 |   position: absolute;
134 |   top: 0;
135 |   left: 50%;
136 |   transform: translateX(-50%);
137 |   height: 20px;
138 |   width: 70%;
139 |   border-radius: 100%;
140 |   filter: blur(6rem);
141 |   background: rgb(85, 145, 243);
142 | }
143 | 
144 | .footer::before {
145 |   background: radial-gradient(50% 56400% at 50% 100%, rgb(34, 44, 57) 0%, rgba(169, 163, 194, 0) 100%);
146 |   top: 0;
147 |   content: "";
148 |   height: 1px;
149 |   left: 0;
150 |   position: absolute;
151 |   width: 100%;
152 |   color: rgb(23, 23, 23);
153 | }
154 | 


--------------------------------------------------------------------------------
/public/images/feature-five.svg:
--------------------------------------------------------------------------------
 1 | <svg width="560" height="474" viewBox="0 0 560 474" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0_682_263)">
 3 | <rect width="560" height="474" rx="24" fill="white" fill-opacity="0.01"/>
 4 | <g filter="url(#filter0_i_682_263)">
 5 | <rect x="221" y="31" width="239" height="121" rx="16" fill="white" fill-opacity="0.03"/>
 6 | <rect x="220" y="30" width="241" height="123" rx="17" stroke="white" stroke-opacity="0.1" stroke-width="2"/>
 7 | <line x1="270" y1="76.5" x2="293" y2="76.5" stroke="#262626" stroke-width="3"/>
 8 | <line x1="270" y1="92.5" x2="333" y2="92.5" stroke="#262626" stroke-width="3"/>
 9 | <line x1="270" y1="108.5" x2="411" y2="108.5" stroke="#262626" stroke-width="3"/>
10 | </g>
11 | <rect x="221" y="322" width="239" height="121" rx="16" fill="white" fill-opacity="0.03"/>
12 | <rect x="220" y="321" width="241" height="123" rx="17" stroke="white" stroke-opacity="0.1" stroke-width="2"/>
13 | <line x1="270" y1="367.5" x2="293" y2="367.5" stroke="#262626" stroke-width="3"/>
14 | <line x1="270" y1="383.5" x2="333" y2="383.5" stroke="#262626" stroke-width="3"/>
15 | <line x1="270" y1="399.5" x2="411" y2="399.5" stroke="#262626" stroke-width="3"/>
16 | <rect x="-40" y="322" width="239" height="121" rx="16" fill="white" fill-opacity="0.01"/>
17 | <rect x="-41" y="321" width="241" height="123" rx="17" stroke="white" stroke-opacity="0.1" stroke-width="2"/>
18 | <rect x="-160" y="176" width="239" height="121" rx="16" fill="white" fill-opacity="0.01"/>
19 | <rect x="-161" y="175" width="241" height="123" rx="17" stroke="white" stroke-opacity="0.1" stroke-width="2"/>
20 | <rect x="-41" y="30" width="239" height="121" rx="16" fill="white" fill-opacity="0.01"/>
21 | <rect x="-42" y="29" width="241" height="123" rx="17" stroke="white" stroke-opacity="0.1" stroke-width="2"/>
22 | <rect x="482" y="322" width="239" height="121" rx="16" fill="white" fill-opacity="0.01"/>
23 | <rect x="481" y="321" width="241" height="123" rx="17" stroke="white" stroke-opacity="0.1" stroke-width="2"/>
24 | <rect x="482" y="176" width="239" height="121" rx="16" fill="white" fill-opacity="0.01"/>
25 | <rect x="481" y="175" width="241" height="123" rx="17" stroke="white" stroke-opacity="0.1" stroke-width="2"/>
26 | <rect x="482" y="30" width="239" height="121" rx="16" fill="white" fill-opacity="0.01"/>
27 | <rect x="481" y="29" width="241" height="123" rx="17" stroke="white" stroke-opacity="0.1" stroke-width="2"/>
28 | <rect x="103" y="177" width="239" height="121" rx="16" fill="white" fill-opacity="0.03"/>
29 | <rect x="102" y="176" width="241" height="123" rx="17" stroke="white" stroke-opacity="0.1" stroke-width="2"/>
30 | <line x1="152" y1="222" x2="175" y2="222" stroke="#6B6B6F" stroke-width="4"/>
31 | <line x1="152" y1="238.5" x2="215" y2="238.5" stroke="#262626" stroke-width="3"/>
32 | <line x1="152" y1="254.5" x2="293" y2="254.5" stroke="#262626" stroke-width="3"/>
33 | <circle cx="417" cy="237" r="32" fill="white" fill-opacity="0.1"/>
34 | <path d="M415.255 241.356L430.086 226.525C430.436 226.175 430.844 226 431.311 226C431.778 226 432.186 226.175 432.536 226.525C432.886 226.875 433.061 227.291 433.061 227.773C433.061 228.255 432.886 228.67 432.536 229.019L416.48 245.119C416.13 245.469 415.721 245.644 415.255 245.644C414.788 245.644 414.38 245.469 414.03 245.119L406.505 237.594C406.155 237.244 405.987 236.828 406.001 236.348C406.015 235.867 406.197 235.451 406.549 235.1C406.9 234.749 407.316 234.574 407.796 234.575C408.277 234.576 408.692 234.751 409.042 235.1L415.255 241.356Z" fill="white"/>
35 | </g>
36 | <rect x="1" y="1" width="558" height="472" rx="23" stroke="white" stroke-opacity="0.1" stroke-width="2"/>
37 | <defs>
38 | <filter id="filter0_i_682_263" x="219" y="29" width="243" height="125" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
39 | <feFlood flood-opacity="0" result="BackgroundImageFix"/>
40 | <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
41 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
42 | <feOffset/>
43 | <feGaussianBlur stdDeviation="2"/>
44 | <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
45 | <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/>
46 | <feBlend mode="normal" in2="shape" result="effect1_innerShadow_682_263"/>
47 | </filter>
48 | <clipPath id="clip0_682_263">
49 | <rect width="560" height="474" rx="24" fill="white"/>
50 | </clipPath>
51 | </defs>
52 | </svg>
53 | 


--------------------------------------------------------------------------------
/src/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as DialogPrimitive from "@radix-ui/react-dialog"
  5 | import { X } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib"
  8 | 
  9 | const Dialog = DialogPrimitive.Root
 10 | 
 11 | const DialogTrigger = DialogPrimitive.Trigger
 12 | 
 13 | const DialogPortal = DialogPrimitive.Portal
 14 | 
 15 | const DialogClose = DialogPrimitive.Close
 16 | 
 17 | const DialogOverlay = React.forwardRef<
 18 |   React.ElementRef<typeof DialogPrimitive.Overlay>,
 19 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 20 | >(({ className, ...props }, ref) => (
 21 |   <DialogPrimitive.Overlay
 22 |     ref={ref}
 23 |     className={cn(
 24 |       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 25 |       className
 26 |     )}
 27 |     {...props}
 28 |   />
 29 | ))
 30 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 31 | 
 32 | const DialogContent = React.forwardRef<
 33 |   React.ElementRef<typeof DialogPrimitive.Content>,
 34 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 35 | >(({ className, children, ...props }, ref) => (
 36 |   <DialogPortal>
 37 |     <DialogOverlay />
 38 |     <DialogPrimitive.Content
 39 |       ref={ref}
 40 |       className={cn(
 41 |         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
 42 |         className
 43 |       )}
 44 |       {...props}
 45 |     >
 46 |       {children}
 47 |       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
 48 |         <X className="h-4 w-4" />
 49 |         <span className="sr-only">Close</span>
 50 |       </DialogPrimitive.Close>
 51 |     </DialogPrimitive.Content>
 52 |   </DialogPortal>
 53 | ))
 54 | DialogContent.displayName = DialogPrimitive.Content.displayName
 55 | 
 56 | const DialogHeader = ({
 57 |   className,
 58 |   ...props
 59 | }: React.HTMLAttributes<HTMLDivElement>) => (
 60 |   <div
 61 |     className={cn(
 62 |       "flex flex-col space-y-1.5 text-center sm:text-left",
 63 |       className
 64 |     )}
 65 |     {...props}
 66 |   />
 67 | )
 68 | DialogHeader.displayName = "DialogHeader"
 69 | 
 70 | const DialogFooter = ({
 71 |   className,
 72 |   ...props
 73 | }: React.HTMLAttributes<HTMLDivElement>) => (
 74 |   <div
 75 |     className={cn(
 76 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 77 |       className
 78 |     )}
 79 |     {...props}
 80 |   />
 81 | )
 82 | DialogFooter.displayName = "DialogFooter"
 83 | 
 84 | const DialogTitle = React.forwardRef<
 85 |   React.ElementRef<typeof DialogPrimitive.Title>,
 86 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 87 | >(({ className, ...props }, ref) => (
 88 |   <DialogPrimitive.Title
 89 |     ref={ref}
 90 |     className={cn(
 91 |       "text-lg font-semibold leading-none tracking-tight",
 92 |       className
 93 |     )}
 94 |     {...props}
 95 |   />
 96 | ))
 97 | DialogTitle.displayName = DialogPrimitive.Title.displayName
 98 | 
 99 | const DialogDescription = React.forwardRef<
100 |   React.ElementRef<typeof DialogPrimitive.Description>,
101 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
102 | >(({ className, ...props }, ref) => (
103 |   <DialogPrimitive.Description
104 |     ref={ref}
105 |     className={cn("text-sm text-muted-foreground", className)}
106 |     {...props}
107 |   />
108 | ))
109 | DialogDescription.displayName = DialogPrimitive.Description.displayName
110 | 
111 | export {
112 |   Dialog,
113 |   DialogPortal,
114 |   DialogOverlay,
115 |   DialogClose,
116 |   DialogTrigger,
117 |   DialogContent,
118 |   DialogHeader,
119 |   DialogFooter,
120 |   DialogTitle,
121 |   DialogDescription,
122 | }
123 | 


--------------------------------------------------------------------------------
/src/components/ui/sheet.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as SheetPrimitive from "@radix-ui/react-dialog"
  5 | import { cva, type VariantProps } from "class-variance-authority"
  6 | import { X } from "lucide-react"
  7 | 
  8 | import { cn } from "@/lib"
  9 | 
 10 | const Sheet = SheetPrimitive.Root
 11 | 
 12 | const SheetTrigger = SheetPrimitive.Trigger
 13 | 
 14 | const SheetClose = SheetPrimitive.Close
 15 | 
 16 | const SheetPortal = SheetPrimitive.Portal
 17 | 
 18 | const SheetOverlay = React.forwardRef<
 19 |   React.ElementRef<typeof SheetPrimitive.Overlay>,
 20 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
 21 | >(({ className, ...props }, ref) => (
 22 |   <SheetPrimitive.Overlay
 23 |     className={cn(
 24 |       "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 25 |       className
 26 |     )}
 27 |     {...props}
 28 |     ref={ref}
 29 |   />
 30 | ))
 31 | SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 32 | 
 33 | const sheetVariants = cva(
 34 |   "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
 35 |   {
 36 |     variants: {
 37 |       side: {
 38 |         top: "inset-x-0 top-0 data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
 39 |         bottom:
 40 |           "inset-x-0 bottom-0 data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
 41 |         left: "inset-y-0 left-0 h-full w-3/4 data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
 42 |         right:
 43 |           "inset-y-0 right-0 h-full w-3/4 data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
 44 |       },
 45 |     },
 46 |     defaultVariants: {
 47 |       side: "right",
 48 |     },
 49 |   }
 50 | )
 51 | 
 52 | interface SheetContentProps
 53 |   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
 54 |   VariantProps<typeof sheetVariants> { }
 55 | 
 56 | const SheetContent = React.forwardRef<
 57 |   React.ElementRef<typeof SheetPrimitive.Content>,
 58 |   SheetContentProps
 59 | >(({ side = "right", className, children, ...props }, ref) => (
 60 |   <SheetPortal>
 61 |     <SheetOverlay />
 62 |     <SheetPrimitive.Content
 63 |       ref={ref}
 64 |       className={cn(sheetVariants({ side }), className)}
 65 |       {...props}
 66 |     >
 67 |       {children}
 68 |       <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
 69 |         <X className="h-4 w-4" />
 70 |         <span className="sr-only">Close</span>
 71 |       </SheetPrimitive.Close>
 72 |     </SheetPrimitive.Content>
 73 |   </SheetPortal>
 74 | ))
 75 | SheetContent.displayName = SheetPrimitive.Content.displayName
 76 | 
 77 | const SheetHeader = ({
 78 |   className,
 79 |   ...props
 80 | }: React.HTMLAttributes<HTMLDivElement>) => (
 81 |   <div
 82 |     className={cn(
 83 |       "flex flex-col space-y-2 text-center sm:text-left",
 84 |       className
 85 |     )}
 86 |     {...props}
 87 |   />
 88 | )
 89 | SheetHeader.displayName = "SheetHeader"
 90 | 
 91 | const SheetFooter = ({
 92 |   className,
 93 |   ...props
 94 | }: React.HTMLAttributes<HTMLDivElement>) => (
 95 |   <div
 96 |     className={cn(
 97 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 98 |       className
 99 |     )}
100 |     {...props}
101 |   />
102 | )
103 | SheetFooter.displayName = "SheetFooter"
104 | 
105 | const SheetTitle = React.forwardRef<
106 |   React.ElementRef<typeof SheetPrimitive.Title>,
107 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
108 | >(({ className, ...props }, ref) => (
109 |   <SheetPrimitive.Title
110 |     ref={ref}
111 |     className={cn("text-lg font-semibold text-foreground", className)}
112 |     {...props}
113 |   />
114 | ))
115 | SheetTitle.displayName = SheetPrimitive.Title.displayName
116 | 
117 | const SheetDescription = React.forwardRef<
118 |   React.ElementRef<typeof SheetPrimitive.Description>,
119 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
120 | >(({ className, ...props }, ref) => (
121 |   <SheetPrimitive.Description
122 |     ref={ref}
123 |     className={cn("text-sm text-muted-foreground", className)}
124 |     {...props}
125 |   />
126 | ))
127 | SheetDescription.displayName = SheetPrimitive.Description.displayName
128 | 
129 | export {
130 |   Sheet,
131 |   SheetPortal,
132 |   SheetOverlay,
133 |   SheetTrigger,
134 |   SheetClose,
135 |   SheetContent,
136 |   SheetHeader,
137 |   SheetFooter,
138 |   SheetTitle,
139 |   SheetDescription,
140 | }
141 | 


--------------------------------------------------------------------------------
/src/hooks/use-toast.ts:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | // Inspired by react-hot-toast library
  4 | import * as React from "react"
  5 | 
  6 | import type {
  7 |   ToastActionElement,
  8 |   ToastProps,
  9 | } from "@/components/ui/toast"
 10 | 
 11 | const TOAST_LIMIT = 1
 12 | const TOAST_REMOVE_DELAY = 1000000
 13 | 
 14 | type ToasterToast = ToastProps & {
 15 |   id: string
 16 |   title?: React.ReactNode
 17 |   description?: React.ReactNode
 18 |   action?: ToastActionElement
 19 | }
 20 | 
 21 | const actionTypes = {
 22 |   ADD_TOAST: "ADD_TOAST",
 23 |   UPDATE_TOAST: "UPDATE_TOAST",
 24 |   DISMISS_TOAST: "DISMISS_TOAST",
 25 |   REMOVE_TOAST: "REMOVE_TOAST",
 26 | } as const
 27 | 
 28 | let count = 0
 29 | 
 30 | function genId() {
 31 |   count = (count + 1) % Number.MAX_SAFE_INTEGER
 32 |   return count.toString()
 33 | }
 34 | 
 35 | type ActionType = typeof actionTypes
 36 | 
 37 | type Action =
 38 |   | {
 39 |       type: ActionType["ADD_TOAST"]
 40 |       toast: ToasterToast
 41 |     }
 42 |   | {
 43 |       type: ActionType["UPDATE_TOAST"]
 44 |       toast: Partial<ToasterToast>
 45 |     }
 46 |   | {
 47 |       type: ActionType["DISMISS_TOAST"]
 48 |       toastId?: ToasterToast["id"]
 49 |     }
 50 |   | {
 51 |       type: ActionType["REMOVE_TOAST"]
 52 |       toastId?: ToasterToast["id"]
 53 |     }
 54 | 
 55 | interface State {
 56 |   toasts: ToasterToast[]
 57 | }
 58 | 
 59 | const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
 60 | 
 61 | const addToRemoveQueue = (toastId: string) => {
 62 |   if (toastTimeouts.has(toastId)) {
 63 |     return
 64 |   }
 65 | 
 66 |   const timeout = setTimeout(() => {
 67 |     toastTimeouts.delete(toastId)
 68 |     dispatch({
 69 |       type: "REMOVE_TOAST",
 70 |       toastId: toastId,
 71 |     })
 72 |   }, TOAST_REMOVE_DELAY)
 73 | 
 74 |   toastTimeouts.set(toastId, timeout)
 75 | }
 76 | 
 77 | export const reducer = (state: State, action: Action): State => {
 78 |   switch (action.type) {
 79 |     case "ADD_TOAST":
 80 |       return {
 81 |         ...state,
 82 |         toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
 83 |       }
 84 | 
 85 |     case "UPDATE_TOAST":
 86 |       return {
 87 |         ...state,
 88 |         toasts: state.toasts.map((t) =>
 89 |           t.id === action.toast.id ? { ...t, ...action.toast } : t
 90 |         ),
 91 |       }
 92 | 
 93 |     case "DISMISS_TOAST": {
 94 |       const { toastId } = action
 95 | 
 96 |       // ! Side effects ! - This could be extracted into a dismissToast() action,
 97 |       // but I'll keep it here for simplicity
 98 |       if (toastId) {
 99 |         addToRemoveQueue(toastId)
100 |       } else {
101 |         state.toasts.forEach((toast) => {
102 |           addToRemoveQueue(toast.id)
103 |         })
104 |       }
105 | 
106 |       return {
107 |         ...state,
108 |         toasts: state.toasts.map((t) =>
109 |           t.id === toastId || toastId === undefined
110 |             ? {
111 |                 ...t,
112 |                 open: false,
113 |               }
114 |             : t
115 |         ),
116 |       }
117 |     }
118 |     case "REMOVE_TOAST":
119 |       if (action.toastId === undefined) {
120 |         return {
121 |           ...state,
122 |           toasts: [],
123 |         }
124 |       }
125 |       return {
126 |         ...state,
127 |         toasts: state.toasts.filter((t) => t.id !== action.toastId),
128 |       }
129 |   }
130 | }
131 | 
132 | const listeners: Array<(state: State) => void> = []
133 | 
134 | let memoryState: State = { toasts: [] }
135 | 
136 | function dispatch(action: Action) {
137 |   memoryState = reducer(memoryState, action)
138 |   listeners.forEach((listener) => {
139 |     listener(memoryState)
140 |   })
141 | }
142 | 
143 | type Toast = Omit<ToasterToast, "id">
144 | 
145 | function toast({ ...props }: Toast) {
146 |   const id = genId()
147 | 
148 |   const update = (props: ToasterToast) =>
149 |     dispatch({
150 |       type: "UPDATE_TOAST",
151 |       toast: { ...props, id },
152 |     })
153 |   const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
154 | 
155 |   dispatch({
156 |     type: "ADD_TOAST",
157 |     toast: {
158 |       ...props,
159 |       id,
160 |       open: true,
161 |       onOpenChange: (open) => {
162 |         if (!open) dismiss()
163 |       },
164 |     },
165 |   })
166 | 
167 |   return {
168 |     id: id,
169 |     dismiss,
170 |     update,
171 |   }
172 | }
173 | 
174 | function useToast() {
175 |   const [state, setState] = React.useState<State>(memoryState)
176 | 
177 |   React.useEffect(() => {
178 |     listeners.push(setState)
179 |     return () => {
180 |       const index = listeners.indexOf(setState)
181 |       if (index > -1) {
182 |         listeners.splice(index, 1)
183 |       }
184 |     }
185 |   }, [state])
186 | 
187 |   return {
188 |     ...state,
189 |     toast,
190 |     dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
191 |   }
192 | }
193 | 
194 | export { useToast, toast }
195 | 


--------------------------------------------------------------------------------
/src/components/ui/form.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as LabelPrimitive from "@radix-ui/react-label"
  5 | import { Slot } from "@radix-ui/react-slot"
  6 | import {
  7 |   Controller,
  8 |   ControllerProps,
  9 |   FieldPath,
 10 |   FieldValues,
 11 |   FormProvider,
 12 |   useFormContext,
 13 | } from "react-hook-form"
 14 | 
 15 | import { cn } from "@/lib"
 16 | import { Label } from "@/components/ui/label"
 17 | 
 18 | const Form = FormProvider
 19 | 
 20 | type FormFieldContextValue<
 21 |   TFieldValues extends FieldValues = FieldValues,
 22 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 23 | > = {
 24 |   name: TName
 25 | }
 26 | 
 27 | const FormFieldContext = React.createContext<FormFieldContextValue>(
 28 |   {} as FormFieldContextValue
 29 | )
 30 | 
 31 | const FormField = <
 32 |   TFieldValues extends FieldValues = FieldValues,
 33 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 34 | >({
 35 |   ...props
 36 | }: ControllerProps<TFieldValues, TName>) => {
 37 |   return (
 38 |     <FormFieldContext.Provider value={{ name: props.name }}>
 39 |       <Controller {...props} />
 40 |     </FormFieldContext.Provider>
 41 |   )
 42 | }
 43 | 
 44 | const useFormField = () => {
 45 |   const fieldContext = React.useContext(FormFieldContext)
 46 |   const itemContext = React.useContext(FormItemContext)
 47 |   const { getFieldState, formState } = useFormContext()
 48 | 
 49 |   const fieldState = getFieldState(fieldContext.name, formState)
 50 | 
 51 |   if (!fieldContext) {
 52 |     throw new Error("useFormField should be used within <FormField>")
 53 |   }
 54 | 
 55 |   const { id } = itemContext
 56 | 
 57 |   return {
 58 |     id,
 59 |     name: fieldContext.name,
 60 |     formItemId: `${id}-form-item`,
 61 |     formDescriptionId: `${id}-form-item-description`,
 62 |     formMessageId: `${id}-form-item-message`,
 63 |     ...fieldState,
 64 |   }
 65 | }
 66 | 
 67 | type FormItemContextValue = {
 68 |   id: string
 69 | }
 70 | 
 71 | const FormItemContext = React.createContext<FormItemContextValue>(
 72 |   {} as FormItemContextValue
 73 | )
 74 | 
 75 | const FormItem = React.forwardRef<
 76 |   HTMLDivElement,
 77 |   React.HTMLAttributes<HTMLDivElement>
 78 | >(({ className, ...props }, ref) => {
 79 |   const id = React.useId()
 80 | 
 81 |   return (
 82 |     <FormItemContext.Provider value={{ id }}>
 83 |       <div ref={ref} className={cn("space-y-2", className)} {...props} />
 84 |     </FormItemContext.Provider>
 85 |   )
 86 | })
 87 | FormItem.displayName = "FormItem"
 88 | 
 89 | const FormLabel = React.forwardRef<
 90 |   React.ElementRef<typeof LabelPrimitive.Root>,
 91 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 92 | >(({ className, ...props }, ref) => {
 93 |   const { error, formItemId } = useFormField()
 94 | 
 95 |   return (
 96 |     <Label
 97 |       ref={ref}
 98 |       className={cn(error && "text-destructive", className)}
 99 |       htmlFor={formItemId}
100 |       {...props}
101 |     />
102 |   )
103 | })
104 | FormLabel.displayName = "FormLabel"
105 | 
106 | const FormControl = React.forwardRef<
107 |   React.ElementRef<typeof Slot>,
108 |   React.ComponentPropsWithoutRef<typeof Slot>
109 | >(({ ...props }, ref) => {
110 |   const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
111 | 
112 |   return (
113 |     <Slot
114 |       ref={ref}
115 |       id={formItemId}
116 |       aria-describedby={
117 |         !error
118 |           ? `${formDescriptionId}`
119 |           : `${formDescriptionId} ${formMessageId}`
120 |       }
121 |       aria-invalid={!!error}
122 |       {...props}
123 |     />
124 |   )
125 | })
126 | FormControl.displayName = "FormControl"
127 | 
128 | const FormDescription = React.forwardRef<
129 |   HTMLParagraphElement,
130 |   React.HTMLAttributes<HTMLParagraphElement>
131 | >(({ className, ...props }, ref) => {
132 |   const { formDescriptionId } = useFormField()
133 | 
134 |   return (
135 |     <p
136 |       ref={ref}
137 |       id={formDescriptionId}
138 |       className={cn("text-sm text-muted-foreground", className)}
139 |       {...props}
140 |     />
141 |   )
142 | })
143 | FormDescription.displayName = "FormDescription"
144 | 
145 | const FormMessage = React.forwardRef<
146 |   HTMLParagraphElement,
147 |   React.HTMLAttributes<HTMLParagraphElement>
148 | >(({ className, children, ...props }, ref) => {
149 |   const { error, formMessageId } = useFormField()
150 |   const body = error ? String(error?.message) : children
151 | 
152 |   if (!body) {
153 |     return null
154 |   }
155 | 
156 |   return (
157 |     <p
158 |       ref={ref}
159 |       id={formMessageId}
160 |       className={cn("text-sm font-medium text-destructive", className)}
161 |       {...props}
162 |     >
163 |       {body}
164 |     </p>
165 |   )
166 | })
167 | FormMessage.displayName = "FormMessage"
168 | 
169 | export {
170 |   useFormField,
171 |   Form,
172 |   FormItem,
173 |   FormLabel,
174 |   FormControl,
175 |   FormDescription,
176 |   FormMessage,
177 |   FormField,
178 | }
179 | 


--------------------------------------------------------------------------------
/src/components/ui/alert-dialog.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
  5 | 
  6 | import { cn } from "@/lib"
  7 | import { buttonVariants } from "@/components/ui/button"
  8 | 
  9 | const AlertDialog = AlertDialogPrimitive.Root
 10 | 
 11 | const AlertDialogTrigger = AlertDialogPrimitive.Trigger
 12 | 
 13 | const AlertDialogPortal = AlertDialogPrimitive.Portal
 14 | 
 15 | const AlertDialogOverlay = React.forwardRef<
 16 |   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
 17 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
 18 | >(({ className, ...props }, ref) => (
 19 |   <AlertDialogPrimitive.Overlay
 20 |     className={cn(
 21 |       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 22 |       className
 23 |     )}
 24 |     {...props}
 25 |     ref={ref}
 26 |   />
 27 | ))
 28 | AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
 29 | 
 30 | const AlertDialogContent = React.forwardRef<
 31 |   React.ElementRef<typeof AlertDialogPrimitive.Content>,
 32 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
 33 | >(({ className, ...props }, ref) => (
 34 |   <AlertDialogPortal>
 35 |     <AlertDialogOverlay />
 36 |     <AlertDialogPrimitive.Content
 37 |       ref={ref}
 38 |       className={cn(
 39 |         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
 40 |         className
 41 |       )}
 42 |       {...props}
 43 |     />
 44 |   </AlertDialogPortal>
 45 | ))
 46 | AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
 47 | 
 48 | const AlertDialogHeader = ({
 49 |   className,
 50 |   ...props
 51 | }: React.HTMLAttributes<HTMLDivElement>) => (
 52 |   <div
 53 |     className={cn(
 54 |       "flex flex-col space-y-2 text-center sm:text-left",
 55 |       className
 56 |     )}
 57 |     {...props}
 58 |   />
 59 | )
 60 | AlertDialogHeader.displayName = "AlertDialogHeader"
 61 | 
 62 | const AlertDialogFooter = ({
 63 |   className,
 64 |   ...props
 65 | }: React.HTMLAttributes<HTMLDivElement>) => (
 66 |   <div
 67 |     className={cn(
 68 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 69 |       className
 70 |     )}
 71 |     {...props}
 72 |   />
 73 | )
 74 | AlertDialogFooter.displayName = "AlertDialogFooter"
 75 | 
 76 | const AlertDialogTitle = React.forwardRef<
 77 |   React.ElementRef<typeof AlertDialogPrimitive.Title>,
 78 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
 79 | >(({ className, ...props }, ref) => (
 80 |   <AlertDialogPrimitive.Title
 81 |     ref={ref}
 82 |     className={cn("text-lg font-semibold", className)}
 83 |     {...props}
 84 |   />
 85 | ))
 86 | AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
 87 | 
 88 | const AlertDialogDescription = React.forwardRef<
 89 |   React.ElementRef<typeof AlertDialogPrimitive.Description>,
 90 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
 91 | >(({ className, ...props }, ref) => (
 92 |   <AlertDialogPrimitive.Description
 93 |     ref={ref}
 94 |     className={cn("text-sm text-muted-foreground", className)}
 95 |     {...props}
 96 |   />
 97 | ))
 98 | AlertDialogDescription.displayName =
 99 |   AlertDialogPrimitive.Description.displayName
100 | 
101 | const AlertDialogAction = React.forwardRef<
102 |   React.ElementRef<typeof AlertDialogPrimitive.Action>,
103 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
104 | >(({ className, ...props }, ref) => (
105 |   <AlertDialogPrimitive.Action
106 |     ref={ref}
107 |     className={cn(buttonVariants(), className)}
108 |     {...props}
109 |   />
110 | ))
111 | AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
112 | 
113 | const AlertDialogCancel = React.forwardRef<
114 |   React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
115 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
116 | >(({ className, ...props }, ref) => (
117 |   <AlertDialogPrimitive.Cancel
118 |     ref={ref}
119 |     className={cn(
120 |       buttonVariants({ variant: "outline" }),
121 |       "mt-2 sm:mt-0",
122 |       className
123 |     )}
124 |     {...props}
125 |   />
126 | ))
127 | AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
128 | 
129 | export {
130 |   AlertDialog,
131 |   AlertDialogPortal,
132 |   AlertDialogOverlay,
133 |   AlertDialogTrigger,
134 |   AlertDialogContent,
135 |   AlertDialogHeader,
136 |   AlertDialogFooter,
137 |   AlertDialogTitle,
138 |   AlertDialogDescription,
139 |   AlertDialogAction,
140 |   AlertDialogCancel,
141 | }
142 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
  1 | import type { Config } from "tailwindcss";
  2 | 
  3 | export default {
  4 | 	darkMode: ["class"],
  5 | 	content: [
  6 | 		"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
  7 | 		"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
  8 | 		"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  9 | 	],
 10 | 	theme: {
 11 | 		extend: {
 12 | 			colors: {
 13 | 				background: 'hsl(var(--background))',
 14 | 				foreground: 'hsl(var(--foreground))',
 15 | 				card: {
 16 | 					DEFAULT: 'hsl(var(--card))',
 17 | 					foreground: 'hsl(var(--card-foreground))'
 18 | 				},
 19 | 				popover: {
 20 | 					DEFAULT: 'hsl(var(--popover))',
 21 | 					foreground: 'hsl(var(--popover-foreground))'
 22 | 				},
 23 | 				primary: {
 24 | 					DEFAULT: 'hsl(var(--primary))',
 25 | 					foreground: 'hsl(var(--primary-foreground))'
 26 | 				},
 27 | 				secondary: {
 28 | 					DEFAULT: 'hsl(var(--secondary))',
 29 | 					foreground: 'hsl(var(--secondary-foreground))'
 30 | 				},
 31 | 				muted: {
 32 | 					DEFAULT: 'hsl(var(--muted))',
 33 | 					foreground: 'hsl(var(--muted-foreground))'
 34 | 				},
 35 | 				accent: {
 36 | 					DEFAULT: 'hsl(var(--accent))',
 37 | 					foreground: 'hsl(var(--accent-foreground))'
 38 | 				},
 39 | 				destructive: {
 40 | 					DEFAULT: 'hsl(var(--destructive))',
 41 | 					foreground: 'hsl(var(--destructive-foreground))'
 42 | 				},
 43 | 				border: 'hsl(var(--border))',
 44 | 				input: 'hsl(var(--input))',
 45 | 				ring: 'hsl(var(--ring))',
 46 | 				chart: {
 47 | 					'1': 'hsl(var(--chart-1))',
 48 | 					'2': 'hsl(var(--chart-2))',
 49 | 					'3': 'hsl(var(--chart-3))',
 50 | 					'4': 'hsl(var(--chart-4))',
 51 | 					'5': 'hsl(var(--chart-5))'
 52 | 				},
 53 | 				sidebar: {
 54 | 					DEFAULT: 'hsl(var(--sidebar-background))',
 55 | 					foreground: 'hsl(var(--sidebar-foreground))',
 56 | 					primary: 'hsl(var(--sidebar-primary))',
 57 | 					'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
 58 | 					accent: 'hsl(var(--sidebar-accent))',
 59 | 					'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
 60 | 					border: 'hsl(var(--sidebar-border))',
 61 | 					ring: 'hsl(var(--sidebar-ring))'
 62 | 				}
 63 | 			},
 64 | 			borderRadius: {
 65 | 				lg: 'var(--radius)',
 66 | 				md: 'calc(var(--radius) - 2px)',
 67 | 				sm: 'calc(var(--radius) - 4px)'
 68 | 			},
 69 | 			keyframes: {
 70 | 				'accordion-down': {
 71 | 					from: {
 72 | 						height: '0'
 73 | 					},
 74 | 					to: {
 75 | 						height: 'var(--radix-accordion-content-height)'
 76 | 					}
 77 | 				},
 78 | 				'accordion-up': {
 79 | 					from: {
 80 | 						height: 'var(--radix-accordion-content-height)'
 81 | 					},
 82 | 					to: {
 83 | 						height: '0'
 84 | 					}
 85 | 				},
 86 | 				"loading": {
 87 | 					"to": {
 88 | 						transform: "rotate(360deg)"
 89 | 					},
 90 | 				},
 91 | 				flip: {
 92 | 					to: {
 93 | 						transform: "rotate(360deg)",
 94 | 					},
 95 | 				},
 96 | 				rotate: {
 97 | 					to: {
 98 | 						transform: "rotate(90deg)",
 99 | 					},
100 | 				},
101 | 				orbit: {
102 | 					"0%": {
103 | 						transform:
104 | 							"rotate(calc(var(--angle) * 1deg)) translateY(calc(var(--radius) * 1px)) rotate(calc(var(--angle) * -1deg))",
105 | 					},
106 | 					"100%": {
107 | 						transform:
108 | 							"rotate(calc(var(--angle) * 1deg + 360deg)) translateY(calc(var(--radius) * 1px)) rotate(calc((var(--angle) * -1deg) - 360deg))",
109 | 					},
110 | 				},
111 | 				ripple: {
112 | 					"0%, 100%": {
113 | 						transform: "translate(-50%, -50%) scale(1)",
114 | 					},
115 | 					"50%": {
116 | 						transform: "translate(-50%, -50%) scale(0.9)",
117 | 					},
118 | 				},
119 | 				blob: {
120 | 					"0%": {
121 | 						transform: "translate(-50%, -50%) rotate(0deg) scale(1)",
122 | 					},
123 | 					"33%": {
124 | 						transform: "translate(-50%, -50%) rotate(120deg) scale(1.1)",
125 | 					},
126 | 					"66%": {
127 | 						transform: "translate(-50%, -50%) rotate(240deg) scale(0.9)",
128 | 					},
129 | 					"100%": {
130 | 						transform: "translate(-50%, -50%) rotate(360deg) scale(1)",
131 | 					},
132 | 				},
133 | 				"image-glow": {
134 | 					"0%": {
135 | 						"opacity": "0",
136 | 						"animation-timing-function": "cubic-bezier(.74, .25, .76, 1)",
137 | 					},
138 | 					"10%": {
139 | 						"opacity": "0.5",
140 | 						"animation-timing-function": "cubic-bezier(.12, .01, .08, .99)",
141 | 					},
142 | 					"100%": {
143 | 						"opacity": "1",
144 | 					},
145 | 				},
146 | 			},
147 | 			animation: {
148 | 				'accordion-down': 'accordion-down 0.2s ease-out',
149 | 				'accordion-up': 'accordion-up 0.2s ease-out',
150 | 				'loading': 'loading 0.6s linear infinite',
151 | 				flip: "flip 6s infinite steps(2, end)",
152 | 				rotate: "rotate 3s linear infinite both",
153 | 				orbit: "orbit calc(var(--duration)*1s) linear infinite",
154 | 				ripple: "ripple var(--duration,2s) ease calc(var(--i, 0)*.2s) infinite",
155 | 				blob: "blob 7s infinite",
156 | 				"image-glow": "image-glow 6s ease-out 0.6s forwards",
157 | 			},
158 | 			spacing: {
159 | 				"1/8": "12.5%",
160 | 			},
161 | 			fontFamily: {
162 | 				heading: ['var(--font-heading)'],
163 | 				subheading: ['var(--font-subheading)'],
164 | 				base: ['var(--font-base)'],
165 | 			},
166 | 		}
167 | 	},
168 | 	plugins: [require("tailwindcss-animate")],
169 | } satisfies Config;
170 | 


--------------------------------------------------------------------------------
/src/components/ui/toast.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as ToastPrimitives from "@radix-ui/react-toast"
  5 | import { cva, type VariantProps } from "class-variance-authority"
  6 | import { X } from "lucide-react"
  7 | 
  8 | import { cn } from "@/lib"
  9 | 
 10 | const ToastProvider = ToastPrimitives.Provider
 11 | 
 12 | const ToastViewport = React.forwardRef<
 13 |   React.ElementRef<typeof ToastPrimitives.Viewport>,
 14 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
 15 | >(({ className, ...props }, ref) => (
 16 |   <ToastPrimitives.Viewport
 17 |     ref={ref}
 18 |     className={cn(
 19 |       "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
 20 |       className
 21 |     )}
 22 |     {...props}
 23 |   />
 24 | ))
 25 | ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 26 | 
 27 | const toastVariants = cva(
 28 |   "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
 29 |   {
 30 |     variants: {
 31 |       variant: {
 32 |         default: "border bg-background text-foreground",
 33 |         destructive:
 34 |           "destructive group border-destructive bg-destructive text-destructive-foreground",
 35 |       },
 36 |     },
 37 |     defaultVariants: {
 38 |       variant: "default",
 39 |     },
 40 |   }
 41 | )
 42 | 
 43 | const Toast = React.forwardRef<
 44 |   React.ElementRef<typeof ToastPrimitives.Root>,
 45 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
 46 |   VariantProps<typeof toastVariants>
 47 | >(({ className, variant, ...props }, ref) => {
 48 |   return (
 49 |     <ToastPrimitives.Root
 50 |       ref={ref}
 51 |       className={cn(toastVariants({ variant }), className)}
 52 |       {...props}
 53 |     />
 54 |   )
 55 | })
 56 | Toast.displayName = ToastPrimitives.Root.displayName
 57 | 
 58 | const ToastAction = React.forwardRef<
 59 |   React.ElementRef<typeof ToastPrimitives.Action>,
 60 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
 61 | >(({ className, ...props }, ref) => (
 62 |   <ToastPrimitives.Action
 63 |     ref={ref}
 64 |     className={cn(
 65 |       "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
 66 |       className
 67 |     )}
 68 |     {...props}
 69 |   />
 70 | ))
 71 | ToastAction.displayName = ToastPrimitives.Action.displayName
 72 | 
 73 | const ToastClose = React.forwardRef<
 74 |   React.ElementRef<typeof ToastPrimitives.Close>,
 75 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
 76 | >(({ className, ...props }, ref) => (
 77 |   <ToastPrimitives.Close
 78 |     ref={ref}
 79 |     className={cn(
 80 |       "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
 81 |       className
 82 |     )}
 83 |     toast-close=""
 84 |     {...props}
 85 |   >
 86 |     <X className="h-4 w-4" />
 87 |   </ToastPrimitives.Close>
 88 | ))
 89 | ToastClose.displayName = ToastPrimitives.Close.displayName
 90 | 
 91 | const ToastTitle = React.forwardRef<
 92 |   React.ElementRef<typeof ToastPrimitives.Title>,
 93 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
 94 | >(({ className, ...props }, ref) => (
 95 |   <ToastPrimitives.Title
 96 |     ref={ref}
 97 |     className={cn("text-sm font-semibold", className)}
 98 |     {...props}
 99 |   />
100 | ))
101 | ToastTitle.displayName = ToastPrimitives.Title.displayName
102 | 
103 | const ToastDescription = React.forwardRef<
104 |   React.ElementRef<typeof ToastPrimitives.Description>,
105 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
106 | >(({ className, ...props }, ref) => (
107 |   <ToastPrimitives.Description
108 |     ref={ref}
109 |     className={cn("text-sm opacity-90", className)}
110 |     {...props}
111 |   />
112 | ))
113 | ToastDescription.displayName = ToastPrimitives.Description.displayName
114 | 
115 | type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
116 | 
117 | type ToastActionElement = React.ReactElement<typeof ToastAction>
118 | 
119 | export {
120 |   type ToastProps,
121 |   type ToastActionElement,
122 |   ToastProvider,
123 |   ToastViewport,
124 |   Toast,
125 |   ToastTitle,
126 |   ToastDescription,
127 |   ToastClose,
128 |   ToastAction,
129 | }
130 | 


--------------------------------------------------------------------------------
/src/components/ui/command.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import { type DialogProps } from "@radix-ui/react-dialog"
  5 | import { Command as CommandPrimitive } from "cmdk"
  6 | import { Search } from "lucide-react"
  7 | 
  8 | import { cn } from "@/lib"
  9 | import { Dialog, DialogContent } from "@/components/ui/dialog"
 10 | 
 11 | const Command = React.forwardRef<
 12 |   React.ElementRef<typeof CommandPrimitive>,
 13 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive>
 14 | >(({ className, ...props }, ref) => (
 15 |   <CommandPrimitive
 16 |     ref={ref}
 17 |     className={cn(
 18 |       "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
 19 |       className
 20 |     )}
 21 |     {...props}
 22 |   />
 23 | ))
 24 | Command.displayName = CommandPrimitive.displayName
 25 | 
 26 | const CommandDialog = ({ children, ...props }: DialogProps) => {
 27 |   return (
 28 |     <Dialog {...props}>
 29 |       <DialogContent className="overflow-hidden p-0 shadow-lg">
 30 |         <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
 31 |           {children}
 32 |         </Command>
 33 |       </DialogContent>
 34 |     </Dialog>
 35 |   )
 36 | }
 37 | 
 38 | const CommandInput = React.forwardRef<
 39 |   React.ElementRef<typeof CommandPrimitive.Input>,
 40 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 41 | >(({ className, ...props }, ref) => (
 42 |   <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
 43 |     <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
 44 |     <CommandPrimitive.Input
 45 |       ref={ref}
 46 |       className={cn(
 47 |         "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
 48 |         className
 49 |       )}
 50 |       {...props}
 51 |     />
 52 |   </div>
 53 | ))
 54 | 
 55 | CommandInput.displayName = CommandPrimitive.Input.displayName
 56 | 
 57 | const CommandList = React.forwardRef<
 58 |   React.ElementRef<typeof CommandPrimitive.List>,
 59 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
 60 | >(({ className, ...props }, ref) => (
 61 |   <CommandPrimitive.List
 62 |     ref={ref}
 63 |     className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
 64 |     {...props}
 65 |   />
 66 | ))
 67 | 
 68 | CommandList.displayName = CommandPrimitive.List.displayName
 69 | 
 70 | const CommandEmpty = React.forwardRef<
 71 |   React.ElementRef<typeof CommandPrimitive.Empty>,
 72 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
 73 | >((props, ref) => (
 74 |   <CommandPrimitive.Empty
 75 |     ref={ref}
 76 |     className="py-6 text-center text-sm"
 77 |     {...props}
 78 |   />
 79 | ))
 80 | 
 81 | CommandEmpty.displayName = CommandPrimitive.Empty.displayName
 82 | 
 83 | const CommandGroup = React.forwardRef<
 84 |   React.ElementRef<typeof CommandPrimitive.Group>,
 85 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
 86 | >(({ className, ...props }, ref) => (
 87 |   <CommandPrimitive.Group
 88 |     ref={ref}
 89 |     className={cn(
 90 |       "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
 91 |       className
 92 |     )}
 93 |     {...props}
 94 |   />
 95 | ))
 96 | 
 97 | CommandGroup.displayName = CommandPrimitive.Group.displayName
 98 | 
 99 | const CommandSeparator = React.forwardRef<
100 |   React.ElementRef<typeof CommandPrimitive.Separator>,
101 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
102 | >(({ className, ...props }, ref) => (
103 |   <CommandPrimitive.Separator
104 |     ref={ref}
105 |     className={cn("-mx-1 h-px bg-border", className)}
106 |     {...props}
107 |   />
108 | ))
109 | CommandSeparator.displayName = CommandPrimitive.Separator.displayName
110 | 
111 | const CommandItem = React.forwardRef<
112 |   React.ElementRef<typeof CommandPrimitive.Item>,
113 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
114 | >(({ className, ...props }, ref) => (
115 |   <CommandPrimitive.Item
116 |     ref={ref}
117 |     className={cn(
118 |       "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
119 |       className
120 |     )}
121 |     {...props}
122 |   />
123 | ))
124 | 
125 | CommandItem.displayName = CommandPrimitive.Item.displayName
126 | 
127 | const CommandShortcut = ({
128 |   className,
129 |   ...props
130 | }: React.HTMLAttributes<HTMLSpanElement>) => {
131 |   return (
132 |     <span
133 |       className={cn(
134 |         "ml-auto text-xs tracking-widest text-muted-foreground",
135 |         className
136 |       )}
137 |       {...props}
138 |     />
139 |   )
140 | }
141 | CommandShortcut.displayName = "CommandShortcut"
142 | 
143 | export {
144 |   Command,
145 |   CommandDialog,
146 |   CommandInput,
147 |   CommandList,
148 |   CommandEmpty,
149 |   CommandGroup,
150 |   CommandItem,
151 |   CommandShortcut,
152 |   CommandSeparator,
153 | }
154 | 


--------------------------------------------------------------------------------
/src/components/ui/navigation-menu.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
  3 | import { cva } from "class-variance-authority"
  4 | import { ChevronDown } from "lucide-react"
  5 | 
  6 | import { cn } from "@/lib"
  7 | 
  8 | const NavigationMenu = React.forwardRef<
  9 |   React.ElementRef<typeof NavigationMenuPrimitive.Root>,
 10 |   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
 11 | >(({ className, children, ...props }, ref) => (
 12 |   <NavigationMenuPrimitive.Root
 13 |     ref={ref}
 14 |     className={cn(
 15 |       "relative z-10 flex max-w-max flex-1 items-center justify-center",
 16 |       className
 17 |     )}
 18 |     {...props}
 19 |   >
 20 |     {children}
 21 |     <NavigationMenuViewport />
 22 |   </NavigationMenuPrimitive.Root>
 23 | ))
 24 | NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
 25 | 
 26 | const NavigationMenuList = React.forwardRef<
 27 |   React.ElementRef<typeof NavigationMenuPrimitive.List>,
 28 |   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
 29 | >(({ className, ...props }, ref) => (
 30 |   <NavigationMenuPrimitive.List
 31 |     ref={ref}
 32 |     className={cn(
 33 |       "group flex flex-1 list-none items-center justify-center space-x-1",
 34 |       className
 35 |     )}
 36 |     {...props}
 37 |   />
 38 | ))
 39 | NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
 40 | 
 41 | const NavigationMenuItem = NavigationMenuPrimitive.Item
 42 | 
 43 | const navigationMenuTriggerStyle = cva(
 44 |   "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
 45 | )
 46 | 
 47 | const NavigationMenuTrigger = React.forwardRef<
 48 |   React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
 49 |   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
 50 | >(({ className, children, ...props }, ref) => (
 51 |   <NavigationMenuPrimitive.Trigger
 52 |     ref={ref}
 53 |     className={cn(navigationMenuTriggerStyle(), "group", className)}
 54 |     {...props}
 55 |   >
 56 |     {children}{" "}
 57 |     <ChevronDown
 58 |       className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
 59 |       aria-hidden="true"
 60 |     />
 61 |   </NavigationMenuPrimitive.Trigger>
 62 | ))
 63 | NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
 64 | 
 65 | const NavigationMenuContent = React.forwardRef<
 66 |   React.ElementRef<typeof NavigationMenuPrimitive.Content>,
 67 |   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
 68 | >(({ className, ...props }, ref) => (
 69 |   <NavigationMenuPrimitive.Content
 70 |     ref={ref}
 71 |     className={cn(
 72 |       "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
 73 |       className
 74 |     )}
 75 |     {...props}
 76 |   />
 77 | ))
 78 | NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
 79 | 
 80 | const NavigationMenuLink = NavigationMenuPrimitive.Link
 81 | 
 82 | const NavigationMenuViewport = React.forwardRef<
 83 |   React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
 84 |   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
 85 | >(({ className, ...props }, ref) => (
 86 |   <div className={cn("absolute left-0 top-full flex justify-center")}>
 87 |     <NavigationMenuPrimitive.Viewport
 88 |       className={cn(
 89 |         "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
 90 |         className
 91 |       )}
 92 |       ref={ref}
 93 |       {...props}
 94 |     />
 95 |   </div>
 96 | ))
 97 | NavigationMenuViewport.displayName =
 98 |   NavigationMenuPrimitive.Viewport.displayName
 99 | 
100 | const NavigationMenuIndicator = React.forwardRef<
101 |   React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
102 |   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
103 | >(({ className, ...props }, ref) => (
104 |   <NavigationMenuPrimitive.Indicator
105 |     ref={ref}
106 |     className={cn(
107 |       "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
108 |       className
109 |     )}
110 |     {...props}
111 |   >
112 |     <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
113 |   </NavigationMenuPrimitive.Indicator>
114 | ))
115 | NavigationMenuIndicator.displayName =
116 |   NavigationMenuPrimitive.Indicator.displayName
117 | 
118 | export {
119 |   navigationMenuTriggerStyle,
120 |   NavigationMenu,
121 |   NavigationMenuList,
122 |   NavigationMenuItem,
123 |   NavigationMenuContent,
124 |   NavigationMenuTrigger,
125 |   NavigationMenuLink,
126 |   NavigationMenuIndicator,
127 |   NavigationMenuViewport,
128 | }
129 | 


--------------------------------------------------------------------------------
/src/components/marketing/integration.tsx:
--------------------------------------------------------------------------------
  1 | import { cn } from "@/lib";
  2 | import { ArrowRightIcon } from "lucide-react";
  3 | import Image from "next/image";
  4 | import Link from "next/link";
  5 | import Container from "../global/container";
  6 | import Icons from "../global/icons";
  7 | import Images from "../global/images";
  8 | import { Button } from "../ui/button";
  9 | import Ripple from "../ui/ripple";
 10 | 
 11 | const SOCIAL_PLATFORMS = [
 12 |     { icon: Icons.linkedin, position: "left-3", size: "small", iconSize: "small", className: "hidden lg:flex" },
 13 |     { icon: Icons.tiktok, position: "left-2", size: "medium", iconSize: "medium" },
 14 |     { icon: Icons.insta, position: "left-1", size: "large", iconSize: "large" },
 15 |     { icon: Icons.youtube, position: "right-1", size: "large", iconSize: "large" },
 16 |     { icon: Icons.x, position: "right-2", size: "medium", iconSize: "medium" },
 17 |     { icon: Icons.facebook, position: "right-3", size: "small", iconSize: "small", className: "hidden lg:flex" }
 18 | ];
 19 | 
 20 | const Integration = () => {
 21 | 
 22 |     const getPositionClasses = (position: string) => {
 23 |         switch (position) {
 24 |             case "left-3": return "-translate-x-[285px]";
 25 |             case "left-2": return "-translate-x-[210px]";
 26 |             case "left-1": return "-translate-x-[125px]";
 27 |             case "right-1": return "translate-x-[125px]";
 28 |             case "right-2": return "translate-x-[210px]";
 29 |             case "right-3": return "translate-x-[285px]";
 30 |             default: return "";
 31 |         }
 32 |     };
 33 | 
 34 |     const getSizeClasses = (size: string) => {
 35 |         switch (size) {
 36 |             case "large": return "size-20";
 37 |             case "medium": return "size-16";
 38 |             case "small": return "size-12";
 39 |             default: return "size-20";
 40 |         }
 41 |     };
 42 | 
 43 |     const getIconSizeClasses = (size: string) => {
 44 |         switch (size) {
 45 |             case "large": return "size-10";
 46 |             case "medium": return "size-7";
 47 |             case "small": return "size-5";
 48 |             default: return "size-10";
 49 |         }
 50 |     };
 51 | 
 52 |     return (
 53 |         <div className="relative flex flex-col items-center justify-center w-full py-20 scale-">
 54 |             <Container className="relative">
 55 |                 <div className="relative flex flex-col lg:hidden items-center justify-center overflow-visible">
 56 |                     <div className="absolute top-1/2 -translate-y-1/2 right-1/4 w-3/5 h-14 lg:h-20 bg-gradient-to-r from-blue-400 to-indigo-500 rounded-full -rotate-12 blur-[6.5rem] -z-10"></div>
 57 | 
 58 |                     <div className="max-w-sm w-full h-auto mx-auto mt-8">
 59 |                         <Image
 60 |                             src="/images/integration.svg"
 61 |                             alt="Integration"
 62 |                             width={1000}
 63 |                             height={1000}
 64 |                             className="w-full h-auto"
 65 |                         />
 66 |                     </div>
 67 | 
 68 |                 </div>
 69 |             </Container>
 70 | 
 71 |             <div className="flex flex-col items-center text-center max-w-3xl mx-auto lg:absolute lg:top-1/4 inset-x-0 mt-12 lg:mt-0">
 72 |                 <h2 className="text-2xl md:text-4xl lg:text-6xl font-heading font-semibold !leading-snug">
 73 |                     Social Media Integration
 74 |                 </h2>
 75 |             </div>
 76 |             <div className="flex flex-col items-center text-center max-w-3xl mx-auto lg:absolute lg:bottom-1/4 inset-x-0 z-20 mt-8 lg:mt-0">
 77 |                 <Link href="#">
 78 |                     <Button size="lg">
 79 |                         See all Integrations
 80 |                         <ArrowRightIcon className="size-4" />
 81 |                     </Button>
 82 |                 </Link>
 83 |             </div>
 84 | 
 85 |             <Container delay={0.3}>
 86 |                 <div className="relative hidden lg:flex items-center justify-center overflow-visible">
 87 |                     <div className="absolute top-1/2 -translate-y-1/2 right-1/4 w-3/5 h-14 lg:h-20 bg-gradient-to-r from-blue-400 to-indigo-500 rounded-full -rotate-12 blur-[6.5rem] -z-10"></div>
 88 | 
 89 |                     <div className="relative flex h-dvh w-full flex-col items-center justify-center overflow-visible">
 90 |                         <Ripple />
 91 |                     </div>
 92 | 
 93 |                     <div className="absolute z-20 flex items-center justify-center group">
 94 |                         <Images.logo className="size-24 group-hover:scale-110 transition-all duration-500" />
 95 |                     </div>
 96 | 
 97 |                     {SOCIAL_PLATFORMS.map((platform, index) => (
 98 |                         <div
 99 |                             key={index}
100 |                             className={cn(
101 |                                 "absolute z-20 size-16 p-3 rounded-full flex items-center justify-center bg-gradient-to-b from-foreground/5 to-transparent shadow-xl shadow-black/10 backdrop-blur-lg transition-all duration-300 hover:scale-110",
102 |                                 getPositionClasses(platform.position),
103 |                                 getSizeClasses(platform.size),
104 |                                 platform.className
105 |                             )}
106 |                         >
107 |                             <platform.icon
108 |                                 className={cn(
109 |                                     "size-auto text-foreground",
110 |                                     getIconSizeClasses(platform.iconSize)
111 |                                 )}
112 |                             />
113 |                         </div>
114 |                     ))}
115 | 
116 |                 </div>
117 |             </Container>
118 |         </div>
119 |     )
120 | };
121 | 
122 | export default Integration;
123 | 


--------------------------------------------------------------------------------
/src/components/ui/select.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as SelectPrimitive from "@radix-ui/react-select"
  5 | import { Check, ChevronDown, ChevronUp } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib"
  8 | 
  9 | const Select = SelectPrimitive.Root
 10 | 
 11 | const SelectGroup = SelectPrimitive.Group
 12 | 
 13 | const SelectValue = SelectPrimitive.Value
 14 | 
 15 | const SelectTrigger = React.forwardRef<
 16 |   React.ElementRef<typeof SelectPrimitive.Trigger>,
 17 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 18 | >(({ className, children, ...props }, ref) => (
 19 |   <SelectPrimitive.Trigger
 20 |     ref={ref}
 21 |     className={cn(
 22 |       "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
 23 |       className
 24 |     )}
 25 |     {...props}
 26 |   >
 27 |     {children}
 28 |     <SelectPrimitive.Icon asChild>
 29 |       <ChevronDown className="h-4 w-4 opacity-50" />
 30 |     </SelectPrimitive.Icon>
 31 |   </SelectPrimitive.Trigger>
 32 | ))
 33 | SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 34 | 
 35 | const SelectScrollUpButton = React.forwardRef<
 36 |   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
 37 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
 38 | >(({ className, ...props }, ref) => (
 39 |   <SelectPrimitive.ScrollUpButton
 40 |     ref={ref}
 41 |     className={cn(
 42 |       "flex cursor-default items-center justify-center py-1",
 43 |       className
 44 |     )}
 45 |     {...props}
 46 |   >
 47 |     <ChevronUp className="h-4 w-4" />
 48 |   </SelectPrimitive.ScrollUpButton>
 49 | ))
 50 | SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
 51 | 
 52 | const SelectScrollDownButton = React.forwardRef<
 53 |   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
 54 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
 55 | >(({ className, ...props }, ref) => (
 56 |   <SelectPrimitive.ScrollDownButton
 57 |     ref={ref}
 58 |     className={cn(
 59 |       "flex cursor-default items-center justify-center py-1",
 60 |       className
 61 |     )}
 62 |     {...props}
 63 |   >
 64 |     <ChevronDown className="h-4 w-4" />
 65 |   </SelectPrimitive.ScrollDownButton>
 66 | ))
 67 | SelectScrollDownButton.displayName =
 68 |   SelectPrimitive.ScrollDownButton.displayName
 69 | 
 70 | const SelectContent = React.forwardRef<
 71 |   React.ElementRef<typeof SelectPrimitive.Content>,
 72 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 73 | >(({ className, children, position = "popper", ...props }, ref) => (
 74 |   <SelectPrimitive.Portal>
 75 |     <SelectPrimitive.Content
 76 |       ref={ref}
 77 |       className={cn(
 78 |         "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 79 |         position === "popper" &&
 80 |         "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 81 |         className
 82 |       )}
 83 |       position={position}
 84 |       {...props}
 85 |     >
 86 |       <SelectScrollUpButton />
 87 |       <SelectPrimitive.Viewport
 88 |         className={cn(
 89 |           "p-1",
 90 |           position === "popper" &&
 91 |           "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
 92 |         )}
 93 |       >
 94 |         {children}
 95 |       </SelectPrimitive.Viewport>
 96 |       <SelectScrollDownButton />
 97 |     </SelectPrimitive.Content>
 98 |   </SelectPrimitive.Portal>
 99 | ))
100 | SelectContent.displayName = SelectPrimitive.Content.displayName
101 | 
102 | const SelectLabel = React.forwardRef<
103 |   React.ElementRef<typeof SelectPrimitive.Label>,
104 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
105 | >(({ className, ...props }, ref) => (
106 |   <SelectPrimitive.Label
107 |     ref={ref}
108 |     className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
109 |     {...props}
110 |   />
111 | ))
112 | SelectLabel.displayName = SelectPrimitive.Label.displayName
113 | 
114 | const SelectItem = React.forwardRef<
115 |   React.ElementRef<typeof SelectPrimitive.Item>,
116 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
117 | >(({ className, children, ...props }, ref) => (
118 |   <SelectPrimitive.Item
119 |     ref={ref}
120 |     className={cn(
121 |       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
122 |       className
123 |     )}
124 |     {...props}
125 |   >
126 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
127 |       <SelectPrimitive.ItemIndicator>
128 |         <Check className="h-4 w-4" />
129 |       </SelectPrimitive.ItemIndicator>
130 |     </span>
131 | 
132 |     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
133 |   </SelectPrimitive.Item>
134 | ))
135 | SelectItem.displayName = SelectPrimitive.Item.displayName
136 | 
137 | const SelectSeparator = React.forwardRef<
138 |   React.ElementRef<typeof SelectPrimitive.Separator>,
139 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
140 | >(({ className, ...props }, ref) => (
141 |   <SelectPrimitive.Separator
142 |     ref={ref}
143 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
144 |     {...props}
145 |   />
146 | ))
147 | SelectSeparator.displayName = SelectPrimitive.Separator.displayName
148 | 
149 | export {
150 |   Select,
151 |   SelectGroup,
152 |   SelectValue,
153 |   SelectTrigger,
154 |   SelectContent,
155 |   SelectLabel,
156 |   SelectItem,
157 |   SelectSeparator,
158 |   SelectScrollUpButton,
159 |   SelectScrollDownButton,
160 | }
161 | 


--------------------------------------------------------------------------------
/src/components/marketing/hero.tsx:
--------------------------------------------------------------------------------
  1 | import { ArrowRightIcon } from "lucide-react";
  2 | import Image from "next/image";
  3 | import Link from "next/link";
  4 | import Container from "../global/container";
  5 | import Icons from "../global/icons";
  6 | import { Button } from "../ui/button";
  7 | import { OrbitingCircles } from "../ui/orbiting-circles";
  8 | 
  9 | const Hero = () => {
 10 |     return (
 11 |         <div className="relative flex flex-col items-center justify-center w-full py-20">
 12 | 
 13 |             <div className="absolute flex lg:hidden size-40 rounded-full bg-blue-500 blur-[10rem] top-0 left-1/2 -translate-x-1/2 -z-10"></div>
 14 | 
 15 |             <div className="flex flex-col items-center justify-center gap-y-8 relative">
 16 |                 <Container className="hidden lg:flex absolute inset-0 top-0 mb-auto flex-col items-center justify-center w-full min-h-screen -z-10">
 17 |                     <OrbitingCircles
 18 |                         speed={0.5}
 19 |                         radius={300}
 20 |                     >
 21 |                         <Icons.circle1 className="size-4 text-foreground/70" />
 22 |                         <Icons.circle2 className="size-1 text-foreground/80" />
 23 |                     </OrbitingCircles>
 24 |                     <OrbitingCircles
 25 |                         speed={0.25}
 26 |                         radius={400}
 27 |                     >
 28 |                         <Icons.circle2 className="size-1 text-foreground/50" />
 29 |                         <Icons.circle1 className="size-4 text-foreground/60" />
 30 |                         <Icons.circle2 className="size-1 text-foreground/90" />
 31 |                     </OrbitingCircles>
 32 |                     <OrbitingCircles
 33 |                         speed={0.1}
 34 |                         radius={500}
 35 |                     >
 36 |                         <Icons.circle2 className="size-1 text-foreground/50" />
 37 |                         <Icons.circle2 className="size-1 text-foreground/90" />
 38 |                         <Icons.circle1 className="size-4 text-foreground/60" />
 39 |                         <Icons.circle2 className="size-1 text-foreground/90" />
 40 |                     </OrbitingCircles>
 41 |                 </Container>
 42 | 
 43 |                 <div className="flex flex-col items-center justify-center text-center gap-y-4 bg-background/0">
 44 |                     <Container className="relative hidden lg:block overflow-hidden">
 45 |                         <button className="group relative grid overflow-hidden rounded-full px-2 py-1 shadow-[0_1000px_0_0_hsl(0_0%_15%)_inset] transition-colors duration-200 mx-auto">
 46 |                             <span>
 47 |                                 <span className="spark mask-gradient absolute inset-0 h-[100%] w-[100%] animate-flip overflow-hidden rounded-full [mask:linear-gradient(white,_transparent_50%)] before:absolute before:aspect-square before:w-[200%] before:rotate-[-90deg] before:animate-rotate before:bg-[conic-gradient(from_0deg,transparent_0_340deg,white_360deg)] before:content-[''] before:[inset:0_auto_auto_50%] before:[translate:-50%_-15%]" />
 48 |                             </span>
 49 |                             <span className="backdrop absolute inset-[1px] rounded-full bg-background transition-colors duration-200 group-hover:bg-neutral-800" />
 50 |                             <span className="z-10 py-0.5 text-sm text-neutral-100 flex items-center">
 51 |                                 <span className="px-2 py-[0.5px] h-[18px] tracking-wide flex items-center justify-center rounded-full bg-gradient-to-r from-sky-400 to-blue-600 text-[9px] font-medium mr-2 text-white">
 52 |                                     NEW
 53 |                                 </span>
 54 |                                 Explore the 2024 recap
 55 |                             </span>
 56 |                         </button>
 57 |                     </Container>
 58 |                     <Container delay={0.15}>
 59 |                         <h1 className="text-4xl md:text-4xl lg:text-7xl font-bold text-center !leading-tight max-w-4xl mx-auto">
 60 |                             Transform your {" "}
 61 |                             <span className="">
 62 |                                 marketing {" "}
 63 |                             </span>
 64 |                             with AI Precision
 65 |                         </h1>
 66 |                     </Container>
 67 |                     <Container delay={0.2}>
 68 |                         <p className="max-w-xl mx-auto mt-2 text-base lg:text-lg text-center text-muted-foreground">
 69 |                             AI-powered automation and insights to maximize your campaigns and grow your brand.
 70 |                         </p>
 71 |                     </Container>
 72 |                     <Container delay={0.25} className="z-20">
 73 |                         <div className="flex items-center justify-center mt-6 gap-x-4">
 74 |                             <Link href="#" className="flex items-center gap-2 group">
 75 |                                 <Button size="lg">
 76 |                                     Start Free Trial
 77 |                                     <ArrowRightIcon className="size-4 group-hover:translate-x-1 transition-all duration-300" />
 78 |                                 </Button>
 79 |                             </Link>
 80 |                         </div>
 81 |                     </Container>
 82 |                     <Container delay={0.3} className="relative">
 83 |                         <div className="relative rounded-xl lg:rounded-[32px] border border-border p-2 backdrop-blur-lg mt-10 max-w-6xl mx-auto">
 84 |                             <div className="absolute top-1/8 left-1/2 -z-10 bg-gradient-to-r from-sky-500 to-blue-600 w-1/2 lg:w-3/4 -translate-x-1/2 h-1/4 -translate-y-1/2 inset-0 blur-[4rem] lg:blur-[10rem] animate-image-glow"></div>
 85 |                             <div className="hidden lg:block absolute -top-1/8 left-1/2 -z-20 bg-blue-600 w-1/4 -translate-x-1/2 h-1/4 -translate-y-1/2 inset-0 blur-[10rem] animate-image-glow"></div>
 86 | 
 87 |                             <div className="rounded-lg lg:rounded-[22px] border border-border bg-background">
 88 |                                 <Image
 89 |                                     src="/images/dashboard.png"
 90 |                                     alt="dashboard"
 91 |                                     width={1920}
 92 |                                     height={1080}
 93 |                                     className="rounded-lg lg:rounded-[20px]"
 94 |                                 />
 95 |                             </div>
 96 | 
 97 |                         </div>
 98 |                         <div className="bg-gradient-to-t from-background to-transparent absolute bottom-0 inset-x-0 w-full h-1/2"></div>
 99 |                     </Container>
100 | 
101 |                 </div>
102 |             </div>
103 |         </div>
104 |     )
105 | };
106 | 
107 | export default Hero
108 | 


--------------------------------------------------------------------------------
/src/components/marketing/pricing.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { PLANS } from "@/constants";
  4 | import { PLAN } from "@/constants/plans";
  5 | import { cn } from "@/lib";
  6 | import NumberFlow from "@number-flow/react";
  7 | import { AnimatePresence, motion } from "framer-motion";
  8 | import { CheckIcon } from "lucide-react";
  9 | import { useState } from "react";
 10 | import Container from "../global/container";
 11 | import { Button } from "../ui/button";
 12 | 
 13 | type Plan = "monthly" | "annually";
 14 | 
 15 | const Pricing = () => {
 16 | 
 17 |     const [billPlan, setBillPlan] = useState<Plan>("monthly");
 18 | 
 19 |     const handleSwitch = () => {
 20 |         setBillPlan((prev) => (prev === "monthly" ? "annually" : "monthly"));
 21 |     };
 22 | 
 23 |     return (
 24 |         <div className="relative flex flex-col items-center justify-center max-w-5xl py-20 mx-auto">
 25 | 
 26 |             <div className="flex flex-col items-center justify-center max-w-2xl mx-auto">
 27 |                 <Container>
 28 |                     <div className="flex flex-col items-center text-center max-w-2xl mx-auto">
 29 |                         <h2 className="text-2xl md:text-4xl lg:text-5xl font-heading font-medium !leading-snug mt-6">
 30 |                             Find the right plan that suits <br className="hidden lg:block" /> <span className="font-subheading italic">your needs</span>
 31 |                         </h2>
 32 |                         <p className="text-base md:text-lg text-center text-accent-foreground/80 mt-6">
 33 |                             Transform your marketing with AI-powered automation. Create campaigns faster, generate better content, and make smarter decisions in minutes.
 34 |                         </p>
 35 |                     </div>
 36 |                 </Container>
 37 | 
 38 |                 <Container delay={0.2}>
 39 |                     <div className="flex items-center justify-center space-x-4 mt-6">
 40 |                         <span className="text-base font-medium">Monthly</span>
 41 |                         <button onClick={handleSwitch} className="relative rounded-full focus:outline-none">
 42 |                             <div className="w-12 h-6 transition rounded-full shadow-md outline-none bg-blue-500"></div>
 43 |                             <div
 44 |                                 className={cn(
 45 |                                     "absolute inline-flex items-center justify-center w-4 h-4 transition-all duration-500 ease-in-out top-1 left-1 rounded-full bg-white",
 46 |                                     billPlan === "annually" ? "translate-x-6" : "translate-x-0"
 47 |                                 )}
 48 |                             />
 49 |                         </button>
 50 |                         <span className="text-base font-medium">Annually</span>
 51 |                     </div>
 52 |                 </Container>
 53 |             </div>
 54 | 
 55 |             <div className="grid w-full grid-cols-1 lg:grid-cols-2 pt-8 lg:pt-12 gap-4 lg:gap-6 max-w-4xl mx-auto">
 56 |                 {PLANS.map((plan, idx) => (
 57 |                     <Container key={idx} delay={0.1 * idx + 0.2}>
 58 |                         <Plan key={plan.id} plan={plan} billPlan={billPlan} />
 59 |                     </Container>
 60 |                 ))}
 61 |             </div>
 62 |         </div>
 63 |     );
 64 | };
 65 | 
 66 | const Plan = ({ plan, billPlan }: { plan: PLAN, billPlan: Plan }) => {
 67 |     return (
 68 |         <div className={cn(
 69 |             "flex flex-col relative rounded-2xl lg:rounded-3xl transition-all bg-background/ items-start w-full border border-foreground/10 overflow-hidden",
 70 |             plan.title === "Mastermind" && "border-blue-500"
 71 |         )}>
 72 |             {plan.title === "Mastermind" && (
 73 |                 <div className="absolute top-1/2 inset-x-0 mx-auto h-12 -rotate-45 w-full bg-blue-600 rounded-2xl lg:rounded-3xl blur-[8rem] -z-10"></div>
 74 |             )}
 75 | 
 76 |             <div className="p-4 md:p-8 flex rounded-t-2xl lg:rounded-t-3xl flex-col items-start w-full relative">
 77 |                 <h2 className="font-medium text-xl text-foreground pt-5">
 78 |                     {plan.title}
 79 |                 </h2>
 80 |                 <h3 className="mt-3 text-3xl font-medium md:text-5xl">
 81 |                     <NumberFlow
 82 |                         value={billPlan === "monthly" ? plan.monthlyPrice : plan.annuallyPrice}
 83 |                         suffix={billPlan === "monthly" ? "/mo" : "/yr"}
 84 |                         format={{
 85 |                             currency: "USD",
 86 |                             style: "currency",
 87 |                             currencySign: "standard",
 88 |                             minimumFractionDigits: 0,
 89 |                             maximumFractionDigits: 0,
 90 |                             currencyDisplay: "narrowSymbol"
 91 |                         }}
 92 |                     />
 93 |                 </h3>
 94 |                 <p className="text-sm md:text-base text-muted-foreground mt-2">
 95 |                     {plan.desc}
 96 |                 </p>
 97 |             </div>
 98 |             <div className="flex flex-col items-start w-full px-4 py-2 md:px-8">
 99 |                 <Button size="lg" variant={plan.title === "Mastermind" ? "blue" : "white"} className="w-full">
100 |                     {plan.buttonText}
101 |                 </Button>
102 |                 <div className="h-8 overflow-hidden w-full mx-auto">
103 |                     <AnimatePresence mode="wait">
104 |                         <motion.span
105 |                             key={billPlan}
106 |                             initial={{ y: 20, opacity: 0 }}
107 |                             animate={{ y: 0, opacity: 1 }}
108 |                             exit={{ y: -20, opacity: 0 }}
109 |                             transition={{ duration: 0.2, ease: "easeOut" }}
110 |                             className="text-sm text-center text-muted-foreground mt-3 mx-auto block"
111 |                         >
112 |                             {billPlan === "monthly" ? (
113 |                                 "Billed monthly"
114 |                             ) : (
115 |                                 "Billed in one annual payment"
116 |                             )}
117 |                         </motion.span>
118 |                     </AnimatePresence>
119 |                 </div>
120 |             </div>
121 |             <div className="flex flex-col items-start w-full p-5 mb-4 ml-1 gap-y-2">
122 |                 <span className="text-base text-left mb-2">
123 |                     Includes: 
124 |                 </span>
125 |                 {plan.features.map((feature, index) => (
126 |                     <div key={index} className="flex items-center justify-start gap-2">
127 |                         <div className="flex items-center justify-center">
128 |                             <CheckIcon className="size-5" />
129 |                         </div>
130 |                         <span>{feature}</span>
131 |                     </div>
132 |                 ))}
133 |             </div>
134 |         </div>
135 |     );
136 | };
137 | 
138 | export default Pricing;
139 | 


--------------------------------------------------------------------------------
/src/constants/plans.ts:
--------------------------------------------------------------------------------
  1 | export type PLAN = {
  2 |     id: string;
  3 |     title: string;
  4 |     desc: string;
  5 |     monthlyPrice: number;
  6 |     annuallyPrice: number;
  7 |     badge?: string;
  8 |     buttonText: string;
  9 |     features: string[];
 10 |     link: string;
 11 | };
 12 | 
 13 | export const PLANS: PLAN[] = [
 14 |     {
 15 |         id: "standard",
 16 |         title: "Standard",
 17 |         desc: "Perfect for solopreneurs and small teams looking to automate their content creation and social media with AI tools.",
 18 |         monthlyPrice: 29,
 19 |         annuallyPrice: 306,
 20 |         buttonText: "Upgrade to Standard",
 21 |         features: [
 22 |             "AI content (1,000 words/mo)",
 23 |             "3 social media channels",
 24 |             "Basic post scheduling",
 25 |             "Content calendar",
 26 |             "Basic analytics dashboard",
 27 |             "2 team members",
 28 |             "Email support"
 29 |         ],
 30 |         link: "#"
 31 |     },
 32 |     {
 33 |         id: "mastermind",
 34 |         title: "Mastermind",
 35 |         desc: "Ideal for growing businesses and agencies who need advanced AI capabilities and automation to scale their marketing.",
 36 |         monthlyPrice: 79,
 37 |         annuallyPrice: 834,
 38 |         badge: "Most Popular",
 39 |         buttonText: "Upgrade to Mastermind",
 40 |         features: [
 41 |             "AI content (10,000 words/mo)",
 42 |             "Advanced AI copywriting",
 43 |             "Multi-language content generation",
 44 |             "Custom brand voice training",
 45 |             "Custom workflow automation",
 46 |             "Priority 24/7 support",
 47 |             "Up to 10 team members"
 48 |         ],
 49 |         link: "#"
 50 |     },
 51 |     // {
 52 |     //     id: "enterprise",
 53 |     //     title: "Enterprise",
 54 |     //     desc: "Full-scale AI marketing solution for large organizations",
 55 |     //     monthlyPrice: 199,
 56 |     //     annuallyPrice: 2101,
 57 |     //     badge: "Custom AI Solutions",
 58 |     //     buttonText: "Contact Sales",
 59 |     //     features: [
 60 |     //         "Unlimited AI content",
 61 |     //         "Custom AI model training",
 62 |     //         "Advanced automation workflows",
 63 |     //         "Multi-brand management",
 64 |     //         "API access",
 65 |     //         "Unlimited team members",
 66 |     //         "24/7 priority support",
 67 |     //         "Dedicated success manager",
 68 |     //     ],
 69 |     //     link: "https://stripe.com/enterprise-plan-link"
 70 |     // }
 71 | ];
 72 | 
 73 | export const PLANS_FAQ = [
 74 |     {
 75 |         id: 1,
 76 |         question: "How does the AI content generation work?",
 77 |         answer: "Our AI generates high-quality marketing content across various formats including social media posts, email campaigns, and blog articles, while maintaining your brand voice."
 78 |     },
 79 |     {
 80 |         id: 2,
 81 |         question: "Can I manage multiple brands or clients?",
 82 |         answer: "Yes! The Scale Pro plan supports up to 5 brands, while Enterprise offers unlimited brand management capabilities."
 83 |     },
 84 |     {
 85 |         id: 3,
 86 |         question: "Is there a discount for annual billing?",
 87 |         answer: "Yes, you can save 15% by choosing annual billing over monthly billing for any of our plans."
 88 |     },
 89 |     {
 90 |         id: 4,
 91 |         question: "Do you offer special pricing for contractors?",
 92 |         answer: "Yes, we offer special rates for independent contractors and small construction firms. Contact our sales team for more information."
 93 |     },
 94 |     {
 95 |         id: 5,
 96 |         question: "How does the BIM integration work?",
 97 |         answer: "Our Enterprise plan includes full BIM integration, allowing you to view and manage 3D models, coordinate with team members, and track changes in real-time."
 98 |     },
 99 |     {
100 |         id: 6,
101 |         question: "What kind of support do you provide?",
102 |         answer: "We offer email support for Starter plans, priority support for Professional plans, and 24/7 dedicated support with a personal account manager for Enterprise plans."
103 |     },
104 |     {
105 |         id: 7,
106 |         question: "Can I upgrade or downgrade my plan?",
107 |         answer: "Yes, you can change your plan at any time. If you upgrade, you'll be prorated for the remainder of your billing period. Downgrades take effect at the next billing cycle."
108 |     },
109 |     {
110 |         id: 8,
111 |         question: "Is mobile access available?",
112 |         answer: "Yes, all plans include access to our mobile app for iOS and Android, allowing you to manage projects on the go."
113 |     },
114 |     {
115 |         id: 9,
116 |         question: "What security measures do you have in place?",
117 |         answer: "We offer industry-standard security for all plans, with additional features like SSO, audit logs, and custom security policies available in the Enterprise plan."
118 |     }
119 | ];
120 | 
121 | export const PLANS_TABLE = [
122 |     {
123 |         id: 1,
124 |         title: 'Growth Starter',
125 |         priceMonthly: '$29',
126 |         priceYearly: "$290",
127 |         buttonText: 'Start free trial',
128 |         usage: {
129 |             members: '2 members',
130 |             contentGeneration: '1,000 words/mo',
131 |             socialChannels: '3 channels',
132 |             brands: '1 brand',
133 |         },
134 |         features: [
135 |             'Basic AI content generation',
136 |             'Social media scheduling',
137 |             'Content calendar',
138 |             'Basic analytics',
139 |             'Email marketing templates',
140 |             'Basic automation',
141 |             'Mobile app access',
142 |             'Community support',
143 |         ],
144 |     },
145 |     {
146 |         id: 2,
147 |         title: 'Scale Pro',
148 |         priceMonthly: '$79',
149 |         priceYearly: "$790",
150 |         buttonText: 'Scale now',
151 |         usage: {
152 |             members: '5 members',
153 |             contentGeneration: '10,000 words/mo',
154 |             socialChannels: 'All platforms',
155 |             brands: '5 brands',
156 |         },
157 |         features: [
158 |             'Advanced AI content generation',
159 |             'Custom AI training',
160 |             'Advanced automation',
161 |             'Campaign tracking',
162 |             'Performance analytics',
163 |             'A/B testing',
164 |             'Priority support',
165 |             'API access',
166 |             'Advanced reporting',
167 |         ],
168 |     },
169 |     {
170 |         id: 3,
171 |         title: 'Enterprise AI',
172 |         priceMonthly: '$199',
173 |         priceYearly: "$1990",
174 |         buttonText: 'Contact sales',
175 |         usage: {
176 |             members: 'Unlimited',
177 |             contentGeneration: 'Unlimited',
178 |             socialChannels: 'Unlimited',
179 |             brands: 'Unlimited',
180 |         },
181 |         features: [
182 |             'Custom AI solutions',
183 |             'Enterprise automation',
184 |             'Multi-brand management',
185 |             'Advanced security',
186 |             'Custom integrations',
187 |             'Dedicated support',
188 |             'Custom training',
189 |             'Enterprise analytics',
190 |             'Custom workflows',
191 |         ],
192 |     },
193 | ];
194 | 


--------------------------------------------------------------------------------
/src/components/ui/carousel.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import useEmblaCarousel, {
  5 |   type UseEmblaCarouselType,
  6 | } from "embla-carousel-react"
  7 | import { ArrowLeft, ArrowRight } from "lucide-react"
  8 | 
  9 | import { cn } from "@/lib"
 10 | import { Button } from "@/components/ui/button"
 11 | 
 12 | type CarouselApi = UseEmblaCarouselType[1]
 13 | type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
 14 | type CarouselOptions = UseCarouselParameters[0]
 15 | type CarouselPlugin = UseCarouselParameters[1]
 16 | 
 17 | type CarouselProps = {
 18 |   opts?: CarouselOptions
 19 |   plugins?: CarouselPlugin
 20 |   orientation?: "horizontal" | "vertical"
 21 |   setApi?: (api: CarouselApi) => void
 22 | }
 23 | 
 24 | type CarouselContextProps = {
 25 |   carouselRef: ReturnType<typeof useEmblaCarousel>[0]
 26 |   api: ReturnType<typeof useEmblaCarousel>[1]
 27 |   scrollPrev: () => void
 28 |   scrollNext: () => void
 29 |   canScrollPrev: boolean
 30 |   canScrollNext: boolean
 31 | } & CarouselProps
 32 | 
 33 | const CarouselContext = React.createContext<CarouselContextProps | null>(null)
 34 | 
 35 | function useCarousel() {
 36 |   const context = React.useContext(CarouselContext)
 37 | 
 38 |   if (!context) {
 39 |     throw new Error("useCarousel must be used within a <Carousel />")
 40 |   }
 41 | 
 42 |   return context
 43 | }
 44 | 
 45 | const Carousel = React.forwardRef<
 46 |   HTMLDivElement,
 47 |   React.HTMLAttributes<HTMLDivElement> & CarouselProps
 48 | >(
 49 |   (
 50 |     {
 51 |       orientation = "horizontal",
 52 |       opts,
 53 |       setApi,
 54 |       plugins,
 55 |       className,
 56 |       children,
 57 |       ...props
 58 |     },
 59 |     ref
 60 |   ) => {
 61 |     const [carouselRef, api] = useEmblaCarousel(
 62 |       {
 63 |         ...opts,
 64 |         axis: orientation === "horizontal" ? "x" : "y",
 65 |       },
 66 |       plugins
 67 |     )
 68 |     const [canScrollPrev, setCanScrollPrev] = React.useState(false)
 69 |     const [canScrollNext, setCanScrollNext] = React.useState(false)
 70 | 
 71 |     const onSelect = React.useCallback((api: CarouselApi) => {
 72 |       if (!api) {
 73 |         return
 74 |       }
 75 | 
 76 |       setCanScrollPrev(api.canScrollPrev())
 77 |       setCanScrollNext(api.canScrollNext())
 78 |     }, [])
 79 | 
 80 |     const scrollPrev = React.useCallback(() => {
 81 |       api?.scrollPrev()
 82 |     }, [api])
 83 | 
 84 |     const scrollNext = React.useCallback(() => {
 85 |       api?.scrollNext()
 86 |     }, [api])
 87 | 
 88 |     const handleKeyDown = React.useCallback(
 89 |       (event: React.KeyboardEvent<HTMLDivElement>) => {
 90 |         if (event.key === "ArrowLeft") {
 91 |           event.preventDefault()
 92 |           scrollPrev()
 93 |         } else if (event.key === "ArrowRight") {
 94 |           event.preventDefault()
 95 |           scrollNext()
 96 |         }
 97 |       },
 98 |       [scrollPrev, scrollNext]
 99 |     )
100 | 
101 |     React.useEffect(() => {
102 |       if (!api || !setApi) {
103 |         return
104 |       }
105 | 
106 |       setApi(api)
107 |     }, [api, setApi])
108 | 
109 |     React.useEffect(() => {
110 |       if (!api) {
111 |         return
112 |       }
113 | 
114 |       onSelect(api)
115 |       api.on("reInit", onSelect)
116 |       api.on("select", onSelect)
117 | 
118 |       return () => {
119 |         api?.off("select", onSelect)
120 |       }
121 |     }, [api, onSelect])
122 | 
123 |     return (
124 |       <CarouselContext.Provider
125 |         value={{
126 |           carouselRef,
127 |           api: api,
128 |           opts,
129 |           orientation:
130 |             orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
131 |           scrollPrev,
132 |           scrollNext,
133 |           canScrollPrev,
134 |           canScrollNext,
135 |         }}
136 |       >
137 |         <div
138 |           ref={ref}
139 |           onKeyDownCapture={handleKeyDown}
140 |           className={cn("relative", className)}
141 |           role="region"
142 |           aria-roledescription="carousel"
143 |           {...props}
144 |         >
145 |           {children}
146 |         </div>
147 |       </CarouselContext.Provider>
148 |     )
149 |   }
150 | )
151 | Carousel.displayName = "Carousel"
152 | 
153 | const CarouselContent = React.forwardRef<
154 |   HTMLDivElement,
155 |   React.HTMLAttributes<HTMLDivElement>
156 | >(({ className, ...props }, ref) => {
157 |   const { carouselRef, orientation } = useCarousel()
158 | 
159 |   return (
160 |     <div ref={carouselRef} className="overflow-hidden">
161 |       <div
162 |         ref={ref}
163 |         className={cn(
164 |           "flex",
165 |           orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
166 |           className
167 |         )}
168 |         {...props}
169 |       />
170 |     </div>
171 |   )
172 | })
173 | CarouselContent.displayName = "CarouselContent"
174 | 
175 | const CarouselItem = React.forwardRef<
176 |   HTMLDivElement,
177 |   React.HTMLAttributes<HTMLDivElement>
178 | >(({ className, ...props }, ref) => {
179 |   const { orientation } = useCarousel()
180 | 
181 |   return (
182 |     <div
183 |       ref={ref}
184 |       role="group"
185 |       aria-roledescription="slide"
186 |       className={cn(
187 |         "min-w-0 shrink-0 grow-0 basis-full",
188 |         orientation === "horizontal" ? "pl-4" : "pt-4",
189 |         className
190 |       )}
191 |       {...props}
192 |     />
193 |   )
194 | })
195 | CarouselItem.displayName = "CarouselItem"
196 | 
197 | const CarouselPrevious = React.forwardRef<
198 |   HTMLButtonElement,
199 |   React.ComponentProps<typeof Button>
200 | >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
201 |   const { orientation, scrollPrev, canScrollPrev } = useCarousel()
202 | 
203 |   return (
204 |     <Button
205 |       ref={ref}
206 |       variant={variant}
207 |       size={size}
208 |       className={cn(
209 |         "absolute  h-8 w-8 rounded-full",
210 |         orientation === "horizontal"
211 |           ? "-left-12 top-1/2 -translate-y-1/2"
212 |           : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
213 |         className
214 |       )}
215 |       disabled={!canScrollPrev}
216 |       onClick={scrollPrev}
217 |       {...props}
218 |     >
219 |       <ArrowLeft className="h-4 w-4" />
220 |       <span className="sr-only">Previous slide</span>
221 |     </Button>
222 |   )
223 | })
224 | CarouselPrevious.displayName = "CarouselPrevious"
225 | 
226 | const CarouselNext = React.forwardRef<
227 |   HTMLButtonElement,
228 |   React.ComponentProps<typeof Button>
229 | >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
230 |   const { orientation, scrollNext, canScrollNext } = useCarousel()
231 | 
232 |   return (
233 |     <Button
234 |       ref={ref}
235 |       variant={variant}
236 |       size={size}
237 |       className={cn(
238 |         "absolute h-8 w-8 rounded-full",
239 |         orientation === "horizontal"
240 |           ? "-right-12 top-1/2 -translate-y-1/2"
241 |           : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
242 |         className
243 |       )}
244 |       disabled={!canScrollNext}
245 |       onClick={scrollNext}
246 |       {...props}
247 |     >
248 |       <ArrowRight className="h-4 w-4" />
249 |       <span className="sr-only">Next slide</span>
250 |     </Button>
251 |   )
252 | })
253 | CarouselNext.displayName = "CarouselNext"
254 | 
255 | export {
256 |   type CarouselApi,
257 |   Carousel,
258 |   CarouselContent,
259 |   CarouselItem,
260 |   CarouselPrevious,
261 |   CarouselNext,
262 | }
263 | 


--------------------------------------------------------------------------------
/src/components/ui/context-menu.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
  5 | import { Check, ChevronRight, Circle } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib"
  8 | 
  9 | const ContextMenu = ContextMenuPrimitive.Root
 10 | 
 11 | const ContextMenuTrigger = ContextMenuPrimitive.Trigger
 12 | 
 13 | const ContextMenuGroup = ContextMenuPrimitive.Group
 14 | 
 15 | const ContextMenuPortal = ContextMenuPrimitive.Portal
 16 | 
 17 | const ContextMenuSub = ContextMenuPrimitive.Sub
 18 | 
 19 | const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
 20 | 
 21 | const ContextMenuSubTrigger = React.forwardRef<
 22 |   React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
 23 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
 24 |     inset?: boolean
 25 |   }
 26 | >(({ className, inset, children, ...props }, ref) => (
 27 |   <ContextMenuPrimitive.SubTrigger
 28 |     ref={ref}
 29 |     className={cn(
 30 |       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
 31 |       inset && "pl-8",
 32 |       className
 33 |     )}
 34 |     {...props}
 35 |   >
 36 |     {children}
 37 |     <ChevronRight className="ml-auto h-4 w-4" />
 38 |   </ContextMenuPrimitive.SubTrigger>
 39 | ))
 40 | ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
 41 | 
 42 | const ContextMenuSubContent = React.forwardRef<
 43 |   React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
 44 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
 45 | >(({ className, ...props }, ref) => (
 46 |   <ContextMenuPrimitive.SubContent
 47 |     ref={ref}
 48 |     className={cn(
 49 |       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 50 |       className
 51 |     )}
 52 |     {...props}
 53 |   />
 54 | ))
 55 | ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
 56 | 
 57 | const ContextMenuContent = React.forwardRef<
 58 |   React.ElementRef<typeof ContextMenuPrimitive.Content>,
 59 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
 60 | >(({ className, ...props }, ref) => (
 61 |   <ContextMenuPrimitive.Portal>
 62 |     <ContextMenuPrimitive.Content
 63 |       ref={ref}
 64 |       className={cn(
 65 |         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 66 |         className
 67 |       )}
 68 |       {...props}
 69 |     />
 70 |   </ContextMenuPrimitive.Portal>
 71 | ))
 72 | ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
 73 | 
 74 | const ContextMenuItem = React.forwardRef<
 75 |   React.ElementRef<typeof ContextMenuPrimitive.Item>,
 76 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
 77 |     inset?: boolean
 78 |   }
 79 | >(({ className, inset, ...props }, ref) => (
 80 |   <ContextMenuPrimitive.Item
 81 |     ref={ref}
 82 |     className={cn(
 83 |       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 84 |       inset && "pl-8",
 85 |       className
 86 |     )}
 87 |     {...props}
 88 |   />
 89 | ))
 90 | ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
 91 | 
 92 | const ContextMenuCheckboxItem = React.forwardRef<
 93 |   React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
 94 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
 95 | >(({ className, children, checked, ...props }, ref) => (
 96 |   <ContextMenuPrimitive.CheckboxItem
 97 |     ref={ref}
 98 |     className={cn(
 99 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
100 |       className
101 |     )}
102 |     checked={checked}
103 |     {...props}
104 |   >
105 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
106 |       <ContextMenuPrimitive.ItemIndicator>
107 |         <Check className="h-4 w-4" />
108 |       </ContextMenuPrimitive.ItemIndicator>
109 |     </span>
110 |     {children}
111 |   </ContextMenuPrimitive.CheckboxItem>
112 | ))
113 | ContextMenuCheckboxItem.displayName =
114 |   ContextMenuPrimitive.CheckboxItem.displayName
115 | 
116 | const ContextMenuRadioItem = React.forwardRef<
117 |   React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
118 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
119 | >(({ className, children, ...props }, ref) => (
120 |   <ContextMenuPrimitive.RadioItem
121 |     ref={ref}
122 |     className={cn(
123 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
124 |       className
125 |     )}
126 |     {...props}
127 |   >
128 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
129 |       <ContextMenuPrimitive.ItemIndicator>
130 |         <Circle className="h-2 w-2 fill-current" />
131 |       </ContextMenuPrimitive.ItemIndicator>
132 |     </span>
133 |     {children}
134 |   </ContextMenuPrimitive.RadioItem>
135 | ))
136 | ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
137 | 
138 | const ContextMenuLabel = React.forwardRef<
139 |   React.ElementRef<typeof ContextMenuPrimitive.Label>,
140 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
141 |     inset?: boolean
142 |   }
143 | >(({ className, inset, ...props }, ref) => (
144 |   <ContextMenuPrimitive.Label
145 |     ref={ref}
146 |     className={cn(
147 |       "px-2 py-1.5 text-sm font-semibold text-foreground",
148 |       inset && "pl-8",
149 |       className
150 |     )}
151 |     {...props}
152 |   />
153 | ))
154 | ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
155 | 
156 | const ContextMenuSeparator = React.forwardRef<
157 |   React.ElementRef<typeof ContextMenuPrimitive.Separator>,
158 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
159 | >(({ className, ...props }, ref) => (
160 |   <ContextMenuPrimitive.Separator
161 |     ref={ref}
162 |     className={cn("-mx-1 my-1 h-px bg-border", className)}
163 |     {...props}
164 |   />
165 | ))
166 | ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
167 | 
168 | const ContextMenuShortcut = ({
169 |   className,
170 |   ...props
171 | }: React.HTMLAttributes<HTMLSpanElement>) => {
172 |   return (
173 |     <span
174 |       className={cn(
175 |         "ml-auto text-xs tracking-widest text-muted-foreground",
176 |         className
177 |       )}
178 |       {...props}
179 |     />
180 |   )
181 | }
182 | ContextMenuShortcut.displayName = "ContextMenuShortcut"
183 | 
184 | export {
185 |   ContextMenu,
186 |   ContextMenuTrigger,
187 |   ContextMenuContent,
188 |   ContextMenuItem,
189 |   ContextMenuCheckboxItem,
190 |   ContextMenuRadioItem,
191 |   ContextMenuLabel,
192 |   ContextMenuSeparator,
193 |   ContextMenuShortcut,
194 |   ContextMenuGroup,
195 |   ContextMenuPortal,
196 |   ContextMenuSub,
197 |   ContextMenuSubContent,
198 |   ContextMenuSubTrigger,
199 |   ContextMenuRadioGroup,
200 | }
201 | 


--------------------------------------------------------------------------------
/src/components/ui/dropdown-menu.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
  5 | import { Check, ChevronRight, Circle } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib"
  8 | 
  9 | const DropdownMenu = DropdownMenuPrimitive.Root
 10 | 
 11 | const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
 12 | 
 13 | const DropdownMenuGroup = DropdownMenuPrimitive.Group
 14 | 
 15 | const DropdownMenuPortal = DropdownMenuPrimitive.Portal
 16 | 
 17 | const DropdownMenuSub = DropdownMenuPrimitive.Sub
 18 | 
 19 | const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
 20 | 
 21 | const DropdownMenuSubTrigger = React.forwardRef<
 22 |   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
 23 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
 24 |     inset?: boolean
 25 |   }
 26 | >(({ className, inset, children, ...props }, ref) => (
 27 |   <DropdownMenuPrimitive.SubTrigger
 28 |     ref={ref}
 29 |     className={cn(
 30 |       "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 31 |       inset && "pl-8",
 32 |       className
 33 |     )}
 34 |     {...props}
 35 |   >
 36 |     {children}
 37 |     <ChevronRight className="ml-auto" />
 38 |   </DropdownMenuPrimitive.SubTrigger>
 39 | ))
 40 | DropdownMenuSubTrigger.displayName =
 41 |   DropdownMenuPrimitive.SubTrigger.displayName
 42 | 
 43 | const DropdownMenuSubContent = React.forwardRef<
 44 |   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
 45 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 46 | >(({ className, ...props }, ref) => (
 47 |   <DropdownMenuPrimitive.SubContent
 48 |     ref={ref}
 49 |     className={cn(
 50 |       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 51 |       className
 52 |     )}
 53 |     {...props}
 54 |   />
 55 | ))
 56 | DropdownMenuSubContent.displayName =
 57 |   DropdownMenuPrimitive.SubContent.displayName
 58 | 
 59 | const DropdownMenuContent = React.forwardRef<
 60 |   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
 61 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
 62 | >(({ className, sideOffset = 4, ...props }, ref) => (
 63 |   <DropdownMenuPrimitive.Portal>
 64 |     <DropdownMenuPrimitive.Content
 65 |       ref={ref}
 66 |       sideOffset={sideOffset}
 67 |       className={cn(
 68 |         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 69 |         className
 70 |       )}
 71 |       {...props}
 72 |     />
 73 |   </DropdownMenuPrimitive.Portal>
 74 | ))
 75 | DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 76 | 
 77 | const DropdownMenuItem = React.forwardRef<
 78 |   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
 79 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
 80 |     inset?: boolean
 81 |   }
 82 | >(({ className, inset, ...props }, ref) => (
 83 |   <DropdownMenuPrimitive.Item
 84 |     ref={ref}
 85 |     className={cn(
 86 |       "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 87 |       inset && "pl-8",
 88 |       className
 89 |     )}
 90 |     {...props}
 91 |   />
 92 | ))
 93 | DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
 94 | 
 95 | const DropdownMenuCheckboxItem = React.forwardRef<
 96 |   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
 97 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
 98 | >(({ className, children, checked, ...props }, ref) => (
 99 |   <DropdownMenuPrimitive.CheckboxItem
100 |     ref={ref}
101 |     className={cn(
102 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
103 |       className
104 |     )}
105 |     checked={checked}
106 |     {...props}
107 |   >
108 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
109 |       <DropdownMenuPrimitive.ItemIndicator>
110 |         <Check className="h-4 w-4" />
111 |       </DropdownMenuPrimitive.ItemIndicator>
112 |     </span>
113 |     {children}
114 |   </DropdownMenuPrimitive.CheckboxItem>
115 | ))
116 | DropdownMenuCheckboxItem.displayName =
117 |   DropdownMenuPrimitive.CheckboxItem.displayName
118 | 
119 | const DropdownMenuRadioItem = React.forwardRef<
120 |   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
121 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
122 | >(({ className, children, ...props }, ref) => (
123 |   <DropdownMenuPrimitive.RadioItem
124 |     ref={ref}
125 |     className={cn(
126 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
127 |       className
128 |     )}
129 |     {...props}
130 |   >
131 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
132 |       <DropdownMenuPrimitive.ItemIndicator>
133 |         <Circle className="h-2 w-2 fill-current" />
134 |       </DropdownMenuPrimitive.ItemIndicator>
135 |     </span>
136 |     {children}
137 |   </DropdownMenuPrimitive.RadioItem>
138 | ))
139 | DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
140 | 
141 | const DropdownMenuLabel = React.forwardRef<
142 |   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
143 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
144 |     inset?: boolean
145 |   }
146 | >(({ className, inset, ...props }, ref) => (
147 |   <DropdownMenuPrimitive.Label
148 |     ref={ref}
149 |     className={cn(
150 |       "px-2 py-1.5 text-sm font-semibold",
151 |       inset && "pl-8",
152 |       className
153 |     )}
154 |     {...props}
155 |   />
156 | ))
157 | DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
158 | 
159 | const DropdownMenuSeparator = React.forwardRef<
160 |   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
161 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
162 | >(({ className, ...props }, ref) => (
163 |   <DropdownMenuPrimitive.Separator
164 |     ref={ref}
165 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
166 |     {...props}
167 |   />
168 | ))
169 | DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
170 | 
171 | const DropdownMenuShortcut = ({
172 |   className,
173 |   ...props
174 | }: React.HTMLAttributes<HTMLSpanElement>) => {
175 |   return (
176 |     <span
177 |       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
178 |       {...props}
179 |     />
180 |   )
181 | }
182 | DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
183 | 
184 | export {
185 |   DropdownMenu,
186 |   DropdownMenuTrigger,
187 |   DropdownMenuContent,
188 |   DropdownMenuItem,
189 |   DropdownMenuCheckboxItem,
190 |   DropdownMenuRadioItem,
191 |   DropdownMenuLabel,
192 |   DropdownMenuSeparator,
193 |   DropdownMenuShortcut,
194 |   DropdownMenuGroup,
195 |   DropdownMenuPortal,
196 |   DropdownMenuSub,
197 |   DropdownMenuSubContent,
198 |   DropdownMenuSubTrigger,
199 |   DropdownMenuRadioGroup,
200 | }
201 | 


--------------------------------------------------------------------------------