├── src
    ├── app
    │   ├── favicon.ico
    │   ├── api
    │   │   └── test-db
    │   │   │   └── route.ts
    │   ├── dashboard
    │   │   ├── layout.tsx
    │   │   └── page.tsx
    │   ├── layout.tsx
    │   ├── not-found.tsx
    │   ├── sign-in
    │   │   └── [[...sign-in]]
    │   │   │   └── page.tsx
    │   ├── sign-up
    │   │   └── [[...sign-up]]
    │   │   │   └── page.tsx
    │   ├── globals.css
    │   ├── projects
    │   │   └── page.tsx
    │   ├── analytics
    │   │   └── page.tsx
    │   ├── settings
    │   │   └── page.tsx
    │   └── page.tsx
    ├── lib
    │   ├── utils.ts
    │   └── dbConnect.ts
    ├── components
    │   ├── theme-provider.tsx
    │   ├── ui
    │   │   ├── label.tsx
    │   │   ├── input.tsx
    │   │   ├── switch.tsx
    │   │   ├── avatar.tsx
    │   │   ├── tabs.tsx
    │   │   ├── button.tsx
    │   │   ├── card.tsx
    │   │   └── sheet.tsx
    │   ├── theme-toggle.tsx
    │   ├── sidebar.tsx
    │   ├── header.tsx
    │   └── charts
    │   │   ├── bar-chart.tsx
    │   │   ├── pie-chart.tsx
    │   │   ├── line-chart.tsx
    │   │   └── area-chart.tsx
    └── middleware.ts
├── postcss.config.mjs
├── public
    ├── vercel.svg
    ├── window.svg
    ├── file.svg
    ├── globe.svg
    └── next.svg
├── next.config.ts
├── eslint.config.mjs
├── components.json
├── tsconfig.json
├── .gitignore
├── package.json
├── tailwind.config.js
├── PLAN.md
└── README.md


/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hoodini/ncm-bp/HEAD/src/app/favicon.ico


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | const config = {
2 |   plugins: ["@tailwindcss/postcss"],
3 | };
4 | 
5 | export default config;
6 | 


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>


--------------------------------------------------------------------------------
/src/lib/utils.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 |   /* config options here */
 5 |   images: {
 6 |     domains: ["picsum.photos"],
 7 |   },
 8 | };
 9 | 
10 | export default nextConfig;
11 | 


--------------------------------------------------------------------------------
/src/components/theme-provider.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 | 
3 | import * as React from "react"
4 | import { ThemeProvider as NextThemesProvider } from "next-themes"
5 | import { type ThemeProviderProps } from "next-themes/dist/types"
6 | 
7 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
8 |   return <NextThemesProvider {...props}>{children}</NextThemesProvider>
9 | } 


--------------------------------------------------------------------------------
/public/window.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>


--------------------------------------------------------------------------------
/public/file.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>


--------------------------------------------------------------------------------
/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": "new-york",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "",
 8 |     "css": "src/app/globals.css",
 9 |     "baseColor": "neutral",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils",
16 |     "ui": "@/components/ui",
17 |     "lib": "@/lib",
18 |     "hooks": "@/hooks"
19 |   },
20 |   "iconLibrary": "lucide"
21 | }


--------------------------------------------------------------------------------
/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/label.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as LabelPrimitive from "@radix-ui/react-label"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | function Label({
 9 |   className,
10 |   ...props
11 | }: React.ComponentProps<typeof LabelPrimitive.Root>) {
12 |   return (
13 |     <LabelPrimitive.Root
14 |       data-slot="label"
15 |       className={cn(
16 |         "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
17 |         className
18 |       )}
19 |       {...props}
20 |     />
21 |   )
22 | }
23 | 
24 | export { Label }
25 | 


--------------------------------------------------------------------------------
/.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 | # clerk configuration (can include secrets)
44 | /.clerk/
45 | 


--------------------------------------------------------------------------------
/src/middleware.ts:
--------------------------------------------------------------------------------
 1 | import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';
 2 | import { NextResponse } from 'next/server';
 3 | 
 4 | // Create a matcher for public routes that don't require authentication
 5 | const isPublicRoute = createRouteMatcher([
 6 |   '/sign-in(.*)', 
 7 |   '/sign-up(.*)',
 8 |   '/api/test-db(.*)'
 9 | ]);
10 | 
11 | export default clerkMiddleware((auth, req) => {
12 |   // If the route is not public and the user is not signed in, protect it
13 |   if (!isPublicRoute(req)) {
14 |     // This uses the correct auth.protect() approach
15 |     // The middleware will handle redirecting to sign-in or returning 401 for API routes
16 |     auth.protect();
17 |   }
18 |   
19 |   return NextResponse.next();
20 | });
21 | 
22 | export const config = {
23 |   matcher: [
24 |     '/((?!.+\\.[\\w]+$|_next).*)',
25 |     '/',
26 |     '/(api|trpc)(.*)'
27 |   ],
28 | }; 


--------------------------------------------------------------------------------
/public/globe.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>


--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | function Input({ className, type, ...props }: React.ComponentProps<"input">) {
 6 |   return (
 7 |     <input
 8 |       type={type}
 9 |       data-slot="input"
10 |       className={cn(
11 |         "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
12 |         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
13 |         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
14 |         className
15 |       )}
16 |       {...props}
17 |     />
18 |   )
19 | }
20 | 
21 | export { Input }
22 | 


--------------------------------------------------------------------------------
/src/app/api/test-db/route.ts:
--------------------------------------------------------------------------------
 1 | import { NextResponse } from 'next/server';
 2 | import dbConnect from '@/lib/dbConnect';
 3 | 
 4 | export async function GET() {
 5 |   try {
 6 |     // Connect to the database
 7 |     const mongoose = await dbConnect();
 8 |     
 9 |     // Get database stats
10 |     const dbStats = {
11 |       isConnected: mongoose.connection.readyState === 1,
12 |       host: mongoose.connection.host,
13 |       name: mongoose.connection.name,
14 |       collections: mongoose.connection.readyState === 1 && mongoose.connection.db 
15 |         ? await mongoose.connection.db.listCollections().toArray()
16 |         : []
17 |     };
18 |     
19 |     // Return database information
20 |     return NextResponse.json({ 
21 |       success: true, 
22 |       message: 'Connected to MongoDB Atlas successfully!',
23 |       dbStats
24 |     });
25 |   } catch (error) {
26 |     console.error('API route error:', error);
27 |     return NextResponse.json(
28 |       { success: false, message: 'Failed to connect to MongoDB', error: String(error) },
29 |       { status: 500 }
30 |     );
31 |   }
32 | } 


--------------------------------------------------------------------------------
/src/app/dashboard/layout.tsx:
--------------------------------------------------------------------------------
 1 | import { Sidebar } from "@/components/sidebar"
 2 | import { Header } from "@/components/header"
 3 | import { Toaster } from "sonner"
 4 | 
 5 | export default function DashboardLayout({
 6 |   children,
 7 | }: Readonly<{
 8 |   children: React.ReactNode
 9 | }>) {
10 |   return (
11 |     <div className="flex h-screen">
12 |       <Sidebar />
13 |       <div className="flex-1 flex flex-col min-h-screen overflow-hidden">
14 |         <Header />
15 |         <main className="flex-1 overflow-y-auto px-4 py-6 md:px-6 md:py-8">
16 |           {children}
17 |         </main>
18 |         <footer className="border-t py-4 px-6 text-center text-sm text-muted-foreground">
19 |           <div className="flex flex-col sm:flex-row justify-between items-center gap-2">
20 |             <div className="text-xs">
21 |               Created with 💜 by <a href="https://linktr.ee/yuvai" target="_blank" rel="noopener noreferrer" className="text-purple-600 hover:underline">Yuval Avidani</a> - AI Builder & Speaker
22 |             </div>
23 |             <div className="text-xs text-yellow-500 font-medium">
24 |               "Fly High With YUV.AI"
25 |             </div>
26 |           </div>
27 |         </footer>
28 |       </div>
29 |       <Toaster position="top-right" />
30 |     </div>
31 |   )
32 | } 


--------------------------------------------------------------------------------
/src/components/ui/switch.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as SwitchPrimitive from "@radix-ui/react-switch"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | function Switch({
 9 |   className,
10 |   ...props
11 | }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
12 |   return (
13 |     <SwitchPrimitive.Root
14 |       data-slot="switch"
15 |       className={cn(
16 |         "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
17 |         className
18 |       )}
19 |       {...props}
20 |     >
21 |       <SwitchPrimitive.Thumb
22 |         data-slot="switch-thumb"
23 |         className={cn(
24 |           "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
25 |         )}
26 |       />
27 |     </SwitchPrimitive.Root>
28 |   )
29 | }
30 | 
31 | export { Switch }
32 | 


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ncm-bp",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev --turbopack",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@clerk/nextjs": "^6.18.0",
13 |     "@radix-ui/react-avatar": "^1.1.7",
14 |     "@radix-ui/react-dialog": "^1.1.11",
15 |     "@radix-ui/react-label": "^2.1.4",
16 |     "@radix-ui/react-slot": "^1.2.0",
17 |     "@radix-ui/react-switch": "^1.2.2",
18 |     "@radix-ui/react-tabs": "^1.1.9",
19 |     "class-variance-authority": "^0.7.1",
20 |     "clsx": "^2.1.1",
21 |     "lucide-react": "^0.503.0",
22 |     "mcp-mongodb-atlas": "^0.1.10",
23 |     "mongodb": "^6.16.0",
24 |     "mongoose": "^8.14.0",
25 |     "next": "15.3.1",
26 |     "next-themes": "^0.4.6",
27 |     "react": "^19.0.0",
28 |     "react-dom": "^19.0.0",
29 |     "recharts": "^2.15.3",
30 |     "sonner": "^2.0.3",
31 |     "tailwind-merge": "^3.2.0",
32 |     "tailwindcss-animate": "^1.0.7"
33 |   },
34 |   "devDependencies": {
35 |     "@eslint/eslintrc": "^3",
36 |     "@tailwindcss/postcss": "^4",
37 |     "@types/node": "^20",
38 |     "@types/react": "^19",
39 |     "@types/react-dom": "^19",
40 |     "eslint": "^9",
41 |     "eslint-config-next": "15.3.1",
42 |     "tailwindcss": "^4",
43 |     "tw-animate-css": "^1.2.8",
44 |     "typescript": "^5"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/src/components/theme-toggle.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import { Moon, Sun } from "lucide-react"
 5 | import { useTheme } from "next-themes"
 6 | 
 7 | import { Button } from "@/components/ui/button"
 8 | 
 9 | export function ThemeToggle() {
10 |   const { resolvedTheme, setTheme } = useTheme()
11 |   const [mounted, setMounted] = React.useState(false)
12 | 
13 |   // After mounting, we have access to the theme
14 |   React.useEffect(() => {
15 |     setMounted(true)
16 |   }, [])
17 | 
18 |   if (!mounted) {
19 |     return (
20 |       <Button
21 |         variant="ghost"
22 |         size="icon"
23 |         className="rounded-full bg-purple-100 dark:bg-purple-900/20 hover:bg-purple-200 dark:hover:bg-purple-800/30 transition-all"
24 |       >
25 |         <div className="h-5 w-5" />
26 |       </Button>
27 |     )
28 |   }
29 | 
30 |   return (
31 |     <Button
32 |       variant="ghost"
33 |       size="icon"
34 |       onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
35 |       className="rounded-full bg-purple-100 dark:bg-purple-900/20 hover:bg-purple-200 dark:hover:bg-purple-800/30 transition-all"
36 |     >
37 |       <Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0 text-yellow-500" />
38 |       <Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100 text-purple-300" />
39 |       <span className="sr-only">Toggle theme</span>
40 |     </Button>
41 |   )
42 | } 


--------------------------------------------------------------------------------
/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/utils"
 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 ring-offset-background",
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 object-cover", 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 } 


--------------------------------------------------------------------------------
/src/lib/dbConnect.ts:
--------------------------------------------------------------------------------
 1 | import mongoose from 'mongoose';
 2 | 
 3 | // Define the interface for the global mongoose cache
 4 | interface MongooseCache {
 5 |   conn: typeof mongoose | null;
 6 |   promise: Promise<typeof mongoose> | null;
 7 | }
 8 | 
 9 | // Declare mongoose property on global object
10 | declare global {
11 |   var mongoose: MongooseCache | undefined;
12 | }
13 | 
14 | const MONGODB_URI = process.env.MONGODB_URI as string;
15 | 
16 | if (!MONGODB_URI) {
17 |   throw new Error('Please define the MONGODB_URI environment variable');
18 | }
19 | 
20 | let cached = global.mongoose || { conn: null, promise: null };
21 | 
22 | // Set the mongoose cache on the global object
23 | global.mongoose = cached;
24 | 
25 | async function dbConnect() {
26 |   if (cached.conn) {
27 |     return cached.conn;
28 |   }
29 | 
30 |   if (!cached.promise) {
31 |     const opts = {
32 |       bufferCommands: false,
33 |     };
34 | 
35 |     cached.promise = mongoose.connect(MONGODB_URI, opts).then((mongoose) => {
36 |       console.log('Connected to MongoDB Atlas!');
37 |       // Log information about the database
38 |       const connectionState = mongoose.connection.readyState;
39 |       const stateMap = {
40 |         0: 'disconnected',
41 |         1: 'connected',
42 |         2: 'connecting',
43 |         3: 'disconnecting',
44 |       };
45 |       console.log(`MongoDB connection state: ${stateMap[connectionState as 0 | 1 | 2 | 3]}`);
46 |       console.log(`MongoDB host: ${mongoose.connection.host}`);
47 |       console.log(`MongoDB database name: ${mongoose.connection.name}`);
48 | 
49 |       return mongoose;
50 |     }).catch(err => {
51 |       console.error('MongoDB connection error:', err);
52 |       throw err;
53 |     });
54 |   }
55 | 
56 |   cached.conn = await cached.promise;
57 |   return cached.conn;
58 | }
59 | 
60 | export default dbConnect;
61 | 


--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from 'next'
 2 | import { Outfit } from 'next/font/google'
 3 | import { ClerkProvider } from '@clerk/nextjs'
 4 | import { ThemeProvider } from '@/components/theme-provider'
 5 | import { Header } from '@/components/header'
 6 | import './globals.css'
 7 | 
 8 | const outfit = Outfit({
 9 |   subsets: ['latin'],
10 |   variable: '--font-outfit',
11 |   display: 'swap',
12 |   weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
13 | })
14 | 
15 | export const metadata: Metadata = {
16 |   title: 'NCM Business Portfolio',
17 |   description: 'Developed by Yuval Avidani, AI Builder & Speaker',
18 | }
19 | 
20 | export default function RootLayout({
21 |   children,
22 | }: Readonly<{
23 |   children: React.ReactNode
24 | }>) {
25 |   return (
26 |     <ClerkProvider>
27 |       <html lang="en" suppressHydrationWarning className={outfit.variable}>
28 |         <body className="font-outfit antialiased min-h-screen bg-gradient-to-br from-background to-background">
29 |           <div className="fixed inset-0 -z-10 overflow-hidden">
30 |             <div className="absolute top-[-30%] left-[-20%] w-[80%] h-[80%] rounded-full bg-purple-600/10 blur-[120px]" />
31 |             <div className="absolute bottom-[-30%] right-[-20%] w-[80%] h-[80%] rounded-full bg-yellow-400/10 blur-[120px]" />
32 |             <div className="absolute top-[50%] left-[50%] transform -translate-x-1/2 -translate-y-1/2 w-[60%] h-[60%] rounded-full bg-blue-500/5 blur-[120px]" />
33 |           </div>
34 |           <ThemeProvider
35 |             attribute="class"
36 |             defaultTheme="system"
37 |             enableSystem
38 |             disableTransitionOnChange
39 |           >
40 |             <Header />
41 |             <main className="pt-16">
42 |               {children}
43 |             </main>
44 |           </ThemeProvider>
45 |         </body>
46 |       </html>
47 |     </ClerkProvider>
48 |   )
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/utils"
 7 | 
 8 | function Tabs({
 9 |   className,
10 |   ...props
11 | }: React.ComponentProps<typeof TabsPrimitive.Root>) {
12 |   return (
13 |     <TabsPrimitive.Root
14 |       data-slot="tabs"
15 |       className={cn("flex flex-col gap-2", className)}
16 |       {...props}
17 |     />
18 |   )
19 | }
20 | 
21 | function TabsList({
22 |   className,
23 |   ...props
24 | }: React.ComponentProps<typeof TabsPrimitive.List>) {
25 |   return (
26 |     <TabsPrimitive.List
27 |       data-slot="tabs-list"
28 |       className={cn(
29 |         "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
30 |         className
31 |       )}
32 |       {...props}
33 |     />
34 |   )
35 | }
36 | 
37 | function TabsTrigger({
38 |   className,
39 |   ...props
40 | }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
41 |   return (
42 |     <TabsPrimitive.Trigger
43 |       data-slot="tabs-trigger"
44 |       className={cn(
45 |         "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
46 |         className
47 |       )}
48 |       {...props}
49 |     />
50 |   )
51 | }
52 | 
53 | function TabsContent({
54 |   className,
55 |   ...props
56 | }: React.ComponentProps<typeof TabsPrimitive.Content>) {
57 |   return (
58 |     <TabsPrimitive.Content
59 |       data-slot="tabs-content"
60 |       className={cn("flex-1 outline-none", className)}
61 |       {...props}
62 |     />
63 |   )
64 | }
65 | 
66 | export { Tabs, TabsList, TabsTrigger, TabsContent }
67 | 


--------------------------------------------------------------------------------
/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/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
14 |         destructive:
15 |           "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
16 |         outline:
17 |           "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
18 |         secondary:
19 |           "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
20 |         ghost:
21 |           "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
22 |         link: "text-primary underline-offset-4 hover:underline",
23 |       },
24 |       size: {
25 |         default: "h-9 px-4 py-2 has-[>svg]:px-3",
26 |         sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
27 |         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
28 |         icon: "size-9",
29 |       },
30 |     },
31 |     defaultVariants: {
32 |       variant: "default",
33 |       size: "default",
34 |     },
35 |   }
36 | )
37 | 
38 | function Button({
39 |   className,
40 |   variant,
41 |   size,
42 |   asChild = false,
43 |   ...props
44 | }: React.ComponentProps<"button"> &
45 |   VariantProps<typeof buttonVariants> & {
46 |     asChild?: boolean
47 |   }) {
48 |   const Comp = asChild ? Slot : "button"
49 | 
50 |   return (
51 |     <Comp
52 |       data-slot="button"
53 |       className={cn(buttonVariants({ variant, size, className }))}
54 |       {...props}
55 |     />
56 |   )
57 | }
58 | 
59 | export { Button, buttonVariants }
60 | 


--------------------------------------------------------------------------------
/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | function Card({ className, ...props }: React.ComponentProps<"div">) {
 6 |   return (
 7 |     <div
 8 |       data-slot="card"
 9 |       className={cn(
10 |         "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
11 |         className
12 |       )}
13 |       {...props}
14 |     />
15 |   )
16 | }
17 | 
18 | function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
19 |   return (
20 |     <div
21 |       data-slot="card-header"
22 |       className={cn(
23 |         "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
24 |         className
25 |       )}
26 |       {...props}
27 |     />
28 |   )
29 | }
30 | 
31 | function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
32 |   return (
33 |     <div
34 |       data-slot="card-title"
35 |       className={cn("leading-none font-semibold", className)}
36 |       {...props}
37 |     />
38 |   )
39 | }
40 | 
41 | function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
42 |   return (
43 |     <div
44 |       data-slot="card-description"
45 |       className={cn("text-muted-foreground text-sm", className)}
46 |       {...props}
47 |     />
48 |   )
49 | }
50 | 
51 | function CardAction({ className, ...props }: React.ComponentProps<"div">) {
52 |   return (
53 |     <div
54 |       data-slot="card-action"
55 |       className={cn(
56 |         "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
57 |         className
58 |       )}
59 |       {...props}
60 |     />
61 |   )
62 | }
63 | 
64 | function CardContent({ className, ...props }: React.ComponentProps<"div">) {
65 |   return (
66 |     <div
67 |       data-slot="card-content"
68 |       className={cn("px-6", className)}
69 |       {...props}
70 |     />
71 |   )
72 | }
73 | 
74 | function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
75 |   return (
76 |     <div
77 |       data-slot="card-footer"
78 |       className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
79 |       {...props}
80 |     />
81 |   )
82 | }
83 | 
84 | export {
85 |   Card,
86 |   CardHeader,
87 |   CardFooter,
88 |   CardTitle,
89 |   CardAction,
90 |   CardDescription,
91 |   CardContent,
92 | }
93 | 


--------------------------------------------------------------------------------
/src/app/not-found.tsx:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | import { Button } from "@/components/ui/button";
 3 | import { Home, ArrowLeft } from "lucide-react";
 4 | 
 5 | export default function NotFound() {
 6 |   return (
 7 |     <div className="min-h-screen w-full flex flex-col items-center justify-center relative font-outfit">
 8 |       {/* Background gradient elements */}
 9 |       <div className="absolute top-0 left-0 w-full h-full overflow-hidden -z-10">
10 |         <div className="absolute top-[-30%] left-[-20%] w-[80%] h-[80%] rounded-full bg-purple-600/20 blur-[100px]" />
11 |         <div className="absolute bottom-[-30%] right-[-20%] w-[80%] h-[80%] rounded-full bg-yellow-400/20 blur-[100px]" />
12 |         <div className="absolute top-[50%] left-[50%] transform -translate-x-1/2 -translate-y-1/2 w-[50%] h-[50%] rounded-full bg-blue-500/10 blur-[100px]" />
13 |       </div>
14 |       
15 |       {/* Content with glass effect */}
16 |       <div className="relative w-full max-w-md p-8 rounded-lg backdrop-blur-xl bg-white/20 dark:bg-black/20 border border-white/10 shadow-lg">
17 |         <div className="flex flex-col items-center text-center space-y-6">
18 |           <div className="flex items-center justify-center w-24 h-24 rounded-full bg-purple-600/90 text-white">
19 |             <span className="text-5xl font-bold">404</span>
20 |           </div>
21 |           
22 |           <div className="space-y-3">
23 |             <h1 className="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-yellow-400">
24 |               Page Not Found
25 |             </h1>
26 |             <p className="text-muted-foreground">
27 |               The page you're looking for doesn't exist or has been moved.
28 |             </p>
29 |           </div>
30 |           
31 |           <div className="flex flex-col sm:flex-row gap-3 w-full">
32 |             <Button asChild className="flex-1">
33 |               <Link href="/">
34 |                 <Home className="mr-2 h-4 w-4" />
35 |                 Home
36 |               </Link>
37 |             </Button>
38 |             <Button asChild variant="outline" className="flex-1">
39 |               <Link href="javascript:history.back()">
40 |                 <ArrowLeft className="mr-2 h-4 w-4" />
41 |                 Go Back
42 |               </Link>
43 |             </Button>
44 |           </div>
45 |           
46 |           <div className="w-full pt-4 border-t border-border/40">
47 |             <p className="text-sm text-center text-muted-foreground">
48 |               "Fly High With YUV.AI"
49 |             </p>
50 |           </div>
51 |         </div>
52 |       </div>
53 |     </div>
54 |   );
55 | } 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   darkMode: ["class"],
 4 |   content: [
 5 |     './pages/**/*.{ts,tsx}',
 6 |     './components/**/*.{ts,tsx}',
 7 |     './app/**/*.{ts,tsx}',
 8 |     './src/**/*.{ts,tsx}',
 9 |   ],
10 |   prefix: "",
11 |   theme: {
12 |     container: {
13 |       center: true,
14 |       padding: "2rem",
15 |       screens: {
16 |         "2xl": "1400px",
17 |       },
18 |     },
19 |     extend: {
20 |       fontFamily: {
21 |         sans: ['var(--font-outfit)', 'sans-serif'],
22 |         outfit: ['var(--font-outfit)', 'sans-serif'],
23 |       },
24 |       colors: {
25 |         border: "hsl(var(--border))",
26 |         input: "hsl(var(--input))",
27 |         ring: "hsl(var(--ring))",
28 |         background: "hsl(var(--background))",
29 |         foreground: "hsl(var(--foreground))",
30 |         primary: {
31 |           DEFAULT: "hsl(var(--primary))",
32 |           foreground: "hsl(var(--primary-foreground))",
33 |         },
34 |         secondary: {
35 |           DEFAULT: "hsl(var(--secondary))",
36 |           foreground: "hsl(var(--secondary-foreground))",
37 |         },
38 |         destructive: {
39 |           DEFAULT: "hsl(var(--destructive))",
40 |           foreground: "hsl(var(--destructive-foreground))",
41 |         },
42 |         muted: {
43 |           DEFAULT: "hsl(var(--muted))",
44 |           foreground: "hsl(var(--muted-foreground))",
45 |         },
46 |         accent: {
47 |           DEFAULT: "hsl(var(--accent))",
48 |           foreground: "hsl(var(--accent-foreground))",
49 |         },
50 |         popover: {
51 |           DEFAULT: "hsl(var(--popover))",
52 |           foreground: "hsl(var(--popover-foreground))",
53 |         },
54 |         card: {
55 |           DEFAULT: "hsl(var(--card))",
56 |           foreground: "hsl(var(--card-foreground))",
57 |         },
58 |         // YUV.AI brand colors
59 |         yuv: {
60 |           purple: "#8844ee",
61 |           yellow: "#ffdd22",
62 |           white: "#ffffff",
63 |         }
64 |       },
65 |       borderRadius: {
66 |         lg: "var(--radius)",
67 |         md: "calc(var(--radius) - 2px)",
68 |         sm: "calc(var(--radius) - 4px)",
69 |       },
70 |       keyframes: {
71 |         "accordion-down": {
72 |           from: { height: 0 },
73 |           to: { height: "var(--radix-accordion-content-height)" },
74 |         },
75 |         "accordion-up": {
76 |           from: { height: "var(--radix-accordion-content-height)" },
77 |           to: { height: 0 },
78 |         },
79 |       },
80 |       animation: {
81 |         "accordion-down": "accordion-down 0.2s ease-out",
82 |         "accordion-up": "accordion-up 0.2s ease-out",
83 |       },
84 |     },
85 |   },
86 |   plugins: [require("tailwindcss-animate")],
87 | } 


--------------------------------------------------------------------------------
/PLAN.md:
--------------------------------------------------------------------------------
 1 | # NCM Boilerplate Development Plan
 2 | 
 3 | ## Overview
 4 | This document outlines the development tasks and progress for the NCM Boilerplate project by Yuval Avidani.
 5 | 
 6 | ## Tasks
 7 | 
 8 | ### 1. Project Setup and Configuration ✅
 9 | - [x] Initialize Next.js project with TypeScript, Tailwind, and App Router - *Completed on [Current Date]*
10 | - [x] Setup ESLint and other development tools - *Completed on [Current Date]*
11 | - [x] Configure Git repository - *Completed on [Current Date]*
12 | 
13 | ### 2. Authentication ✅
14 | - [x] Integrate Clerk for authentication - *Completed on [Current Date]*
15 | - [x] Configure middleware for protected routes - *Completed on [Current Date]*
16 | - [x] Create sign-in and sign-up pages - *Completed on [Current Date]*
17 | 
18 | ### 3. Database Integration ✅
19 | - [x] Setup MongoDB connection with Mongoose - *Completed on [Current Date]*
20 | - [x] Create database connection utility - *Completed on [Current Date]*
21 | - [x] Add test endpoint for database verification - *Completed on [Current Date]*
22 | 
23 | ### 4. UI Framework ⏳ (In Progress)
24 | - [ ] Setup ShadCN UI components - *Started on [Current Date]*
25 | - [ ] Create dark/light mode toggle - *Pending*
26 | - [ ] Design responsive layout components - *Pending*
27 | - [ ] Build navigation components - *Pending*
28 | 
29 | ### 5. Dashboard Development ⏳ (In Progress)
30 | - [ ] Create dashboard layout - *Started on [Current Date]*
31 | - [ ] Design dashboard home page - *Pending*
32 | - [ ] Add user profile section - *Pending*
33 | - [ ] Implement settings page - *Pending*
34 | 
35 | ### 6. Feature Components 🔄 (Not Started)
36 | - [ ] Create beautiful charts and data visualization components - *Pending*
37 | - [ ] Build comprehensive forms with validation - *Pending*
38 | - [ ] Implement data tables with sorting and filtering - *Pending*
39 | - [ ] Add notification system - *Pending*
40 | 
41 | ### 7. Animations and Effects 🔄 (Not Started)
42 | - [ ] Add page transitions - *Pending*
43 | - [ ] Implement loading states and skeletons - *Pending*
44 | - [ ] Create micro-interactions and hover effects - *Pending*
45 | - [ ] Add encryption/decryption visual effects - *Pending*
46 | 
47 | ### 8. Documentation and Finalization 🔄 (Not Started)
48 | - [ ] Complete inline code documentation - *Pending*
49 | - [ ] Update README with final information - *Pending*
50 | - [ ] Create example usage documentation - *Pending*
51 | - [ ] Final testing and bug fixes - *Pending*
52 | 
53 | ## Progress Log
54 | 
55 | ### [Current Date]
56 | - Initialized project with Next.js 14, TypeScript, and Tailwind CSS
57 | - Set up Clerk authentication with protected routes
58 | - Configured MongoDB connection with Mongoose
59 | - Created development plan and README
60 | - Started work on UI components and dashboard layout
61 | 
62 | ## Next Steps
63 | - Complete the ShadCN UI integration
64 | - Implement dark/light mode toggle
65 | - Build responsive dashboard layout
66 | - Create beautiful data visualization components
67 | - Add animations and visual effects 


--------------------------------------------------------------------------------
/src/components/sidebar.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import Link from "next/link"
  4 | import { usePathname } from "next/navigation"
  5 | import { 
  6 |   ChevronLeft, 
  7 |   LayoutDashboard, 
  8 |   Settings, 
  9 |   Layers, 
 10 |   BarChart3,
 11 |   Users,
 12 |   FileText,
 13 |   Bell,
 14 |   Home
 15 | } from "lucide-react"
 16 | import { cn } from "@/lib/utils"
 17 | import { Button } from "@/components/ui/button"
 18 | import { useState } from "react"
 19 | 
 20 | interface SidebarProps {
 21 |   className?: string
 22 | }
 23 | 
 24 | export function Sidebar({ className }: SidebarProps) {
 25 |   const pathname = usePathname()
 26 |   const [collapsed, setCollapsed] = useState(false)
 27 | 
 28 |   return (
 29 |     <div
 30 |       className={cn(
 31 |         "relative flex flex-col h-screen border-r transition-all duration-300 ease-in-out",
 32 |         collapsed ? "w-[70px]" : "w-[240px]",
 33 |         className
 34 |       )}
 35 |     >
 36 |       <div className="p-4 h-16 flex items-center border-b">
 37 |         {/* Empty space for consistency with header height */}
 38 |       </div>
 39 |       <div className="flex-1 overflow-auto pb-10 pt-2">
 40 |         <nav className="grid items-start px-2 gap-1">
 41 |           <NavItem
 42 |             href="/dashboard"
 43 |             icon={LayoutDashboard}
 44 |             text="Dashboard"
 45 |             collapsed={collapsed}
 46 |             active={pathname === "/dashboard"}
 47 |           />
 48 |           <NavItem
 49 |             href="/projects"
 50 |             icon={Layers}
 51 |             text="Projects"
 52 |             collapsed={collapsed}
 53 |             active={pathname === "/projects"}
 54 |           />
 55 |           <NavItem
 56 |             href="/analytics"
 57 |             icon={BarChart3}
 58 |             text="Analytics"
 59 |             collapsed={collapsed}
 60 |             active={pathname === "/analytics"}
 61 |           />
 62 |           <NavItem
 63 |             href="/team"
 64 |             icon={Users}
 65 |             text="Team"
 66 |             collapsed={collapsed}
 67 |             active={pathname === "/team"}
 68 |           />
 69 |           <NavItem
 70 |             href="/documents"
 71 |             icon={FileText}
 72 |             text="Documents"
 73 |             collapsed={collapsed}
 74 |             active={pathname === "/documents"}
 75 |           />
 76 |           <NavItem
 77 |             href="/notifications"
 78 |             icon={Bell}
 79 |             text="Notifications"
 80 |             collapsed={collapsed}
 81 |             active={pathname === "/notifications"}
 82 |           />
 83 |           <NavItem
 84 |             href="/settings"
 85 |             icon={Settings}
 86 |             text="Settings"
 87 |             collapsed={collapsed}
 88 |             active={pathname === "/settings"}
 89 |           />
 90 |         </nav>
 91 |       </div>
 92 |       
 93 |       {/* Collapse button */}
 94 |       <Button
 95 |         onClick={() => setCollapsed(!collapsed)}
 96 |         variant="ghost"
 97 |         size="icon"
 98 |         className="absolute right-[-12px] top-20 h-6 w-6 rounded-full border bg-background shadow-md"
 99 |       >
100 |         <ChevronLeft className={cn(
101 |           "h-3 w-3 transition-transform",
102 |           collapsed ? "rotate-180" : "rotate-0"
103 |         )} />
104 |       </Button>
105 |     </div>
106 |   )
107 | }
108 | 
109 | interface NavItemProps {
110 |   href: string
111 |   icon: React.ComponentType<{ className?: string }>
112 |   text: string
113 |   active?: boolean
114 |   collapsed?: boolean
115 | }
116 | 
117 | function NavItem({
118 |   href,
119 |   icon: Icon,
120 |   text,
121 |   active,
122 |   collapsed,
123 | }: NavItemProps) {
124 |   return (
125 |     <Link
126 |       href={href}
127 |       className={cn(
128 |         "flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-all hover:text-purple-600",
129 |         active ? "bg-purple-50 dark:bg-purple-900/20 text-purple-600 font-medium" : "text-muted-foreground"
130 |       )}
131 |     >
132 |       <Icon className={cn("h-4 w-4", collapsed ? "mr-0" : "mr-2")} />
133 |       {!collapsed && <span>{text}</span>}
134 |     </Link>
135 |   )
136 | } 


--------------------------------------------------------------------------------
/src/app/sign-in/[[...sign-in]]/page.tsx:
--------------------------------------------------------------------------------
 1 | import { SignIn } from '@clerk/nextjs';
 2 | import Link from 'next/link';
 3 | import { ArrowRight } from 'lucide-react';
 4 | import { Header } from '@/components/header';
 5 | 
 6 | export default function SignInPage() {
 7 |   return (
 8 |     <div className="relative min-h-screen flex flex-col items-center px-4">
 9 |       {/* Enhanced background elements */}
10 |       <div className="absolute inset-0 bg-gradient-to-br from-purple-100 via-white to-yellow-100 dark:from-purple-950 dark:via-gray-900 dark:to-yellow-950 -z-20"></div>
11 |       
12 |       {/* Enhanced decorative elements */}
13 |       <div className="absolute top-20 left-10 w-[400px] h-[400px] bg-purple-400/30 dark:bg-purple-700/20 rounded-full blur-3xl -z-10 animate-pulse"></div>
14 |       <div className="absolute bottom-10 right-10 w-[600px] h-[600px] bg-yellow-400/20 dark:bg-yellow-700/10 rounded-full blur-3xl -z-10"></div>
15 |       <div className="absolute top-1/3 right-1/4 w-[300px] h-[300px] bg-purple-500/20 dark:bg-purple-600/10 rounded-full blur-3xl -z-10 animate-pulse"></div>
16 |       <div className="absolute bottom-1/3 left-1/4 w-[250px] h-[250px] bg-purple-300/30 dark:bg-purple-800/15 rounded-full blur-3xl -z-10"></div>
17 |       
18 |       <Header />
19 |       
20 |       <div className="w-full max-w-md z-10 pt-24 flex-1 flex flex-col justify-center">
21 |         <div className="text-center mb-8">
22 |           <div className="inline-flex flex-col items-center gap-2 mb-6">
23 |             <span className="h-14 w-14 flex items-center justify-center rounded-full bg-purple-600 text-white font-bold text-2xl shadow-lg">Y</span>
24 |             <span className="font-bold text-3xl bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-yellow-400">
25 |               YUV.AI
26 |             </span>
27 |           </div>
28 |           <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">Welcome back</h1>
29 |           <p className="text-gray-600 dark:text-gray-300 text-lg">Sign in to your account to continue</p>
30 |         </div>
31 |         
32 |         <div className="backdrop-blur-2xl bg-white/40 dark:bg-gray-900/40 border border-white/50 dark:border-purple-900/30 shadow-2xl rounded-2xl overflow-hidden">
33 |           <div className="p-1">
34 |             <SignIn 
35 |               redirectUrl="/dashboard"
36 |               appearance={{
37 |                 elements: {
38 |                   rootBox: "mx-auto",
39 |                   card: "bg-transparent shadow-none",
40 |                   headerTitle: "text-xl font-semibold text-gray-900 dark:text-white",
41 |                   headerSubtitle: "text-sm text-gray-600 dark:text-gray-300",
42 |                   socialButtonsBlockButton: "border border-gray-300 dark:border-gray-700 bg-white/80 dark:bg-gray-800/80 hover:bg-purple-50 dark:hover:bg-purple-900/30",
43 |                   socialButtonsBlockButtonText: "text-gray-700 dark:text-gray-300 font-medium",
44 |                   formFieldLabel: "text-gray-700 dark:text-gray-300",
45 |                   formFieldInput: "rounded-lg border border-gray-300 dark:border-gray-700 bg-white/80 dark:bg-gray-800/80 text-gray-900 dark:text-white focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-600",
46 |                   formButtonPrimary: "bg-purple-600 hover:bg-purple-700 text-white",
47 |                   footerActionLink: "text-purple-600 hover:text-purple-700",
48 |                   identityPreviewText: "text-gray-600 dark:text-gray-300",
49 |                   identityPreviewEditButton: "text-purple-600 hover:text-purple-700",
50 |                 }
51 |               }}
52 |             />
53 |           </div>
54 |         </div>
55 |         
56 |         <div className="mt-8 text-center">
57 |           <p className="text-sm text-gray-600 dark:text-gray-400">
58 |             Don't have an account?{' '}
59 |             <Link href="/sign-up" className="font-medium text-purple-600 hover:text-purple-700">
60 |               Sign up <ArrowRight className="inline h-3 w-3" />
61 |             </Link>
62 |           </p>
63 |         </div>
64 |         
65 |         {/* Enhanced animated decorative elements */}
66 |         <div className="absolute -bottom-4 -right-4 h-12 w-12 rounded-full bg-purple-500/70 flex items-center justify-center text-white shadow-lg animate-bounce hidden sm:flex">
67 |           <span className="h-6 w-6 rounded-full bg-purple-600"></span>
68 |         </div>
69 |         <div className="absolute top-1/2 -left-6 h-10 w-10 rounded-full bg-yellow-400/60 animate-pulse hidden sm:block"></div>
70 |       </div>
71 |     </div>
72 |   );
73 | }
74 | 


--------------------------------------------------------------------------------
/src/app/sign-up/[[...sign-up]]/page.tsx:
--------------------------------------------------------------------------------
 1 | import { SignUp } from '@clerk/nextjs';
 2 | import Link from 'next/link';
 3 | import { ArrowRight } from 'lucide-react';
 4 | import { Header } from '@/components/header';
 5 | 
 6 | export default function SignUpPage() {
 7 |   return (
 8 |     <div className="relative min-h-screen flex flex-col items-center px-4">
 9 |       {/* Enhanced background elements */}
10 |       <div className="absolute inset-0 bg-gradient-to-br from-purple-100 via-white to-yellow-100 dark:from-purple-950 dark:via-gray-900 dark:to-yellow-950 -z-20"></div>
11 |       
12 |       {/* Enhanced decorative elements */}
13 |       <div className="absolute top-20 right-10 w-[400px] h-[400px] bg-yellow-400/30 dark:bg-yellow-700/20 rounded-full blur-3xl -z-10 animate-pulse"></div>
14 |       <div className="absolute bottom-10 left-10 w-[600px] h-[600px] bg-purple-400/20 dark:bg-purple-700/10 rounded-full blur-3xl -z-10"></div>
15 |       <div className="absolute top-1/3 left-1/4 w-[300px] h-[300px] bg-purple-500/20 dark:bg-purple-600/10 rounded-full blur-3xl -z-10 animate-pulse"></div>
16 |       <div className="absolute bottom-1/3 right-1/4 w-[250px] h-[250px] bg-yellow-300/30 dark:bg-yellow-800/15 rounded-full blur-3xl -z-10"></div>
17 |       
18 |       <Header />
19 |       
20 |       <div className="w-full max-w-md z-10 pt-24 flex-1 flex flex-col justify-center">
21 |         <div className="text-center mb-8">
22 |           <div className="inline-flex flex-col items-center gap-2 mb-6">
23 |             <span className="h-14 w-14 flex items-center justify-center rounded-full bg-purple-600 text-white font-bold text-2xl shadow-lg">Y</span>
24 |             <span className="font-bold text-3xl bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-yellow-400">
25 |               YUV.AI
26 |             </span>
27 |           </div>
28 |           <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">Create your account</h1>
29 |           <p className="text-gray-600 dark:text-gray-300 text-lg">Join us and start building amazing projects</p>
30 |         </div>
31 |         
32 |         <div className="backdrop-blur-2xl bg-white/40 dark:bg-gray-900/40 border border-white/50 dark:border-purple-900/30 shadow-2xl rounded-2xl overflow-hidden">
33 |           <div className="p-1">
34 |             <SignUp 
35 |               redirectUrl="/dashboard"
36 |               appearance={{
37 |                 elements: {
38 |                   rootBox: "mx-auto",
39 |                   card: "bg-transparent shadow-none",
40 |                   headerTitle: "text-xl font-semibold text-gray-900 dark:text-white",
41 |                   headerSubtitle: "text-sm text-gray-600 dark:text-gray-300",
42 |                   socialButtonsBlockButton: "border border-gray-300 dark:border-gray-700 bg-white/80 dark:bg-gray-800/80 hover:bg-purple-50 dark:hover:bg-purple-900/30",
43 |                   socialButtonsBlockButtonText: "text-gray-700 dark:text-gray-300 font-medium",
44 |                   formFieldLabel: "text-gray-700 dark:text-gray-300",
45 |                   formFieldInput: "rounded-lg border border-gray-300 dark:border-gray-700 bg-white/80 dark:bg-gray-800/80 text-gray-900 dark:text-white focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-600",
46 |                   formButtonPrimary: "bg-purple-600 hover:bg-purple-700 text-white",
47 |                   footerActionLink: "text-purple-600 hover:text-purple-700",
48 |                   identityPreviewText: "text-gray-600 dark:text-gray-300",
49 |                   identityPreviewEditButton: "text-purple-600 hover:text-purple-700",
50 |                 }
51 |               }}
52 |             />
53 |           </div>
54 |         </div>
55 |         
56 |         <div className="mt-8 text-center">
57 |           <p className="text-sm text-gray-600 dark:text-gray-400">
58 |             Already have an account?{' '}
59 |             <Link href="/sign-in" className="font-medium text-purple-600 hover:text-purple-700">
60 |               Sign in <ArrowRight className="inline h-3 w-3" />
61 |             </Link>
62 |           </p>
63 |         </div>
64 |         
65 |         {/* Enhanced animated decorative elements */}
66 |         <div className="absolute -bottom-4 -left-4 h-12 w-12 rounded-full bg-yellow-500/70 flex items-center justify-center text-white shadow-lg animate-bounce hidden sm:flex">
67 |           <span className="h-6 w-6 rounded-full bg-yellow-400"></span>
68 |         </div>
69 |         <div className="absolute top-1/3 -right-6 h-10 w-10 rounded-full bg-purple-400/60 animate-pulse hidden sm:block"></div>
70 |       </div>
71 |     </div>
72 |   );
73 | }
74 | 


--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
  1 | @import "tailwindcss";
  2 | @import "tw-animate-css";
  3 | 
  4 | @custom-variant dark (&:is(.dark *));
  5 | 
  6 | @theme inline {
  7 |   --color-background: var(--background);
  8 |   --color-foreground: var(--foreground);
  9 |   --font-sans: var(--font-outfit);
 10 |   --font-mono: var(--font-outfit);
 11 |   --color-sidebar-ring: var(--sidebar-ring);
 12 |   --color-sidebar-border: var(--sidebar-border);
 13 |   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
 14 |   --color-sidebar-accent: var(--sidebar-accent);
 15 |   --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
 16 |   --color-sidebar-primary: var(--sidebar-primary);
 17 |   --color-sidebar-foreground: var(--sidebar-foreground);
 18 |   --color-sidebar: var(--sidebar);
 19 |   --color-chart-5: var(--chart-5);
 20 |   --color-chart-4: var(--chart-4);
 21 |   --color-chart-3: var(--chart-3);
 22 |   --color-chart-2: var(--chart-2);
 23 |   --color-chart-1: var(--chart-1);
 24 |   --color-ring: var(--ring);
 25 |   --color-input: var(--input);
 26 |   --color-border: var(--border);
 27 |   --color-destructive: var(--destructive);
 28 |   --color-accent-foreground: var(--accent-foreground);
 29 |   --color-accent: var(--accent);
 30 |   --color-muted-foreground: var(--muted-foreground);
 31 |   --color-muted: var(--muted);
 32 |   --color-secondary-foreground: var(--secondary-foreground);
 33 |   --color-secondary: var(--secondary);
 34 |   --color-primary-foreground: var(--primary-foreground);
 35 |   --color-primary: var(--primary);
 36 |   --color-popover-foreground: var(--popover-foreground);
 37 |   --color-popover: var(--popover);
 38 |   --color-card-foreground: var(--card-foreground);
 39 |   --color-card: var(--card);
 40 |   --radius-sm: calc(var(--radius) - 4px);
 41 |   --radius-md: calc(var(--radius) - 2px);
 42 |   --radius-lg: var(--radius);
 43 |   --radius-xl: calc(var(--radius) + 4px);
 44 | }
 45 | 
 46 | :root {
 47 |   --radius: 0.625rem;
 48 |   --background: oklch(1 0 0);
 49 |   --foreground: oklch(0.145 0 0);
 50 |   --card: oklch(1 0 0);
 51 |   --card-foreground: oklch(0.145 0 0);
 52 |   --popover: oklch(1 0 0);
 53 |   --popover-foreground: oklch(0.145 0 0);
 54 |   --primary: oklch(0.205 0 0);
 55 |   --primary-foreground: oklch(0.985 0 0);
 56 |   --secondary: oklch(0.97 0 0);
 57 |   --secondary-foreground: oklch(0.205 0 0);
 58 |   --muted: oklch(0.97 0 0);
 59 |   --muted-foreground: oklch(0.556 0 0);
 60 |   --accent: oklch(0.97 0 0);
 61 |   --accent-foreground: oklch(0.205 0 0);
 62 |   --destructive: oklch(0.577 0.245 27.325);
 63 |   --border: oklch(0.922 0 0);
 64 |   --input: oklch(0.922 0 0);
 65 |   --ring: oklch(0.708 0 0);
 66 |   --chart-1: oklch(0.646 0.222 41.116);
 67 |   --chart-2: oklch(0.6 0.118 184.704);
 68 |   --chart-3: oklch(0.398 0.07 227.392);
 69 |   --chart-4: oklch(0.828 0.189 84.429);
 70 |   --chart-5: oklch(0.769 0.188 70.08);
 71 |   --sidebar: oklch(0.985 0 0);
 72 |   --sidebar-foreground: oklch(0.145 0 0);
 73 |   --sidebar-primary: oklch(0.205 0 0);
 74 |   --sidebar-primary-foreground: oklch(0.985 0 0);
 75 |   --sidebar-accent: oklch(0.97 0 0);
 76 |   --sidebar-accent-foreground: oklch(0.205 0 0);
 77 |   --sidebar-border: oklch(0.922 0 0);
 78 |   --sidebar-ring: oklch(0.708 0 0);
 79 | }
 80 | 
 81 | .dark {
 82 |   --background: oklch(0.145 0 0);
 83 |   --foreground: oklch(0.985 0 0);
 84 |   --card: oklch(0.205 0 0);
 85 |   --card-foreground: oklch(0.985 0 0);
 86 |   --popover: oklch(0.205 0 0);
 87 |   --popover-foreground: oklch(0.985 0 0);
 88 |   --primary: oklch(0.922 0 0);
 89 |   --primary-foreground: oklch(0.205 0 0);
 90 |   --secondary: oklch(0.269 0 0);
 91 |   --secondary-foreground: oklch(0.985 0 0);
 92 |   --muted: oklch(0.269 0 0);
 93 |   --muted-foreground: oklch(0.708 0 0);
 94 |   --accent: oklch(0.269 0 0);
 95 |   --accent-foreground: oklch(0.985 0 0);
 96 |   --destructive: oklch(0.704 0.191 22.216);
 97 |   --border: oklch(1 0 0 / 10%);
 98 |   --input: oklch(1 0 0 / 15%);
 99 |   --ring: oklch(0.556 0 0);
100 |   --chart-1: oklch(0.488 0.243 264.376);
101 |   --chart-2: oklch(0.696 0.17 162.48);
102 |   --chart-3: oklch(0.769 0.188 70.08);
103 |   --chart-4: oklch(0.627 0.265 303.9);
104 |   --chart-5: oklch(0.645 0.246 16.439);
105 |   --sidebar: oklch(0.205 0 0);
106 |   --sidebar-foreground: oklch(0.985 0 0);
107 |   --sidebar-primary: oklch(0.488 0.243 264.376);
108 |   --sidebar-primary-foreground: oklch(0.985 0 0);
109 |   --sidebar-accent: oklch(0.269 0 0);
110 |   --sidebar-accent-foreground: oklch(0.985 0 0);
111 |   --sidebar-border: oklch(1 0 0 / 10%);
112 |   --sidebar-ring: oklch(0.556 0 0);
113 | }
114 | 
115 | @layer base {
116 |   * {
117 |     @apply border-border outline-ring/50;
118 |   }
119 |   body {
120 |     @apply bg-background text-foreground;
121 |   }
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 { XIcon } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
 10 |   return <SheetPrimitive.Root data-slot="sheet" {...props} />
 11 | }
 12 | 
 13 | function SheetTrigger({
 14 |   ...props
 15 | }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
 16 |   return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
 17 | }
 18 | 
 19 | function SheetClose({
 20 |   ...props
 21 | }: React.ComponentProps<typeof SheetPrimitive.Close>) {
 22 |   return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
 23 | }
 24 | 
 25 | function SheetPortal({
 26 |   ...props
 27 | }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
 28 |   return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
 29 | }
 30 | 
 31 | function SheetOverlay({
 32 |   className,
 33 |   ...props
 34 | }: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
 35 |   return (
 36 |     <SheetPrimitive.Overlay
 37 |       data-slot="sheet-overlay"
 38 |       className={cn(
 39 |         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
 40 |         className
 41 |       )}
 42 |       {...props}
 43 |     />
 44 |   )
 45 | }
 46 | 
 47 | function SheetContent({
 48 |   className,
 49 |   children,
 50 |   side = "right",
 51 |   ...props
 52 | }: React.ComponentProps<typeof SheetPrimitive.Content> & {
 53 |   side?: "top" | "right" | "bottom" | "left"
 54 | }) {
 55 |   return (
 56 |     <SheetPortal>
 57 |       <SheetOverlay />
 58 |       <SheetPrimitive.Content
 59 |         data-slot="sheet-content"
 60 |         className={cn(
 61 |           "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
 62 |           side === "right" &&
 63 |             "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
 64 |           side === "left" &&
 65 |             "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
 66 |           side === "top" &&
 67 |             "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
 68 |           side === "bottom" &&
 69 |             "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
 70 |           className
 71 |         )}
 72 |         {...props}
 73 |       >
 74 |         {children}
 75 |         <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
 76 |           <XIcon className="size-4" />
 77 |           <span className="sr-only">Close</span>
 78 |         </SheetPrimitive.Close>
 79 |       </SheetPrimitive.Content>
 80 |     </SheetPortal>
 81 |   )
 82 | }
 83 | 
 84 | function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
 85 |   return (
 86 |     <div
 87 |       data-slot="sheet-header"
 88 |       className={cn("flex flex-col gap-1.5 p-4", className)}
 89 |       {...props}
 90 |     />
 91 |   )
 92 | }
 93 | 
 94 | function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
 95 |   return (
 96 |     <div
 97 |       data-slot="sheet-footer"
 98 |       className={cn("mt-auto flex flex-col gap-2 p-4", className)}
 99 |       {...props}
100 |     />
101 |   )
102 | }
103 | 
104 | function SheetTitle({
105 |   className,
106 |   ...props
107 | }: React.ComponentProps<typeof SheetPrimitive.Title>) {
108 |   return (
109 |     <SheetPrimitive.Title
110 |       data-slot="sheet-title"
111 |       className={cn("text-foreground font-semibold", className)}
112 |       {...props}
113 |     />
114 |   )
115 | }
116 | 
117 | function SheetDescription({
118 |   className,
119 |   ...props
120 | }: React.ComponentProps<typeof SheetPrimitive.Description>) {
121 |   return (
122 |     <SheetPrimitive.Description
123 |       data-slot="sheet-description"
124 |       className={cn("text-muted-foreground text-sm", className)}
125 |       {...props}
126 |     />
127 |   )
128 | }
129 | 
130 | export {
131 |   Sheet,
132 |   SheetTrigger,
133 |   SheetClose,
134 |   SheetContent,
135 |   SheetHeader,
136 |   SheetFooter,
137 |   SheetTitle,
138 |   SheetDescription,
139 | }
140 | 


--------------------------------------------------------------------------------
/src/components/header.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import { useState, useEffect } from "react"
  4 | import Link from "next/link"
  5 | import { UserButton, SignedIn, SignedOut } from "@clerk/nextjs"
  6 | import { Menu } from "lucide-react"
  7 | 
  8 | import { ThemeToggle } from "@/components/theme-toggle"
  9 | import { Button } from "@/components/ui/button"
 10 | import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
 11 | 
 12 | export function Header() {
 13 |   const [mounted, setMounted] = useState(false)
 14 | 
 15 |   // Set mounted to true after component mounts
 16 |   useEffect(() => {
 17 |     setMounted(true)
 18 |   }, [])
 19 | 
 20 |   // Ensure a consistent initial render that matches the server
 21 |   // A simple version without any interactive elements while not mounted
 22 |   if (!mounted) {
 23 |     return (
 24 |       <header className="fixed top-0 z-50 w-full border-b border-border/40 bg-background/85 backdrop-blur-xl supports-[backdrop-filter]:bg-background/50">
 25 |         <div className="max-w-[1400px] mx-auto flex h-16 items-center px-4 sm:px-6 lg:px-8">
 26 |           <div className="flex items-center gap-2">
 27 |             <div className="lg:hidden w-9 h-9 flex items-center justify-center"></div>
 28 |             <Link href="/" className="flex items-center gap-2">
 29 |               <span className="h-8 w-8 flex items-center justify-center rounded-full bg-purple-600 text-white font-bold">Y</span>
 30 |               <span className="font-bold text-xl bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-yellow-400">
 31 |                 YUV.AI
 32 |               </span>
 33 |             </Link>
 34 |           </div>
 35 |           <div className="flex items-center justify-end gap-3 ml-auto">
 36 |             <div className="w-9 h-9"></div>
 37 |           </div>
 38 |         </div>
 39 |       </header>
 40 |     )
 41 |   }
 42 | 
 43 |   return (
 44 |     <header className="fixed top-0 z-50 w-full border-b border-border/40 bg-background/85 backdrop-blur-xl supports-[backdrop-filter]:bg-background/50">
 45 |       <div className="max-w-[1400px] mx-auto flex h-16 items-center px-4 sm:px-6 lg:px-8">
 46 |         <div className="flex items-center gap-2">
 47 |           <Sheet>
 48 |             <SheetTrigger asChild className="lg:hidden">
 49 |               <Button variant="ghost" size="icon" className="lg:hidden">
 50 |                 <Menu className="h-5 w-5" />
 51 |                 <span className="sr-only">Toggle menu</span>
 52 |               </Button>
 53 |             </SheetTrigger>
 54 |             <SheetContent side="left" className="bg-background/95 backdrop-blur-xl">
 55 |               <div className="grid gap-2 py-6">
 56 |                 <MobileNav />
 57 |               </div>
 58 |             </SheetContent>
 59 |           </Sheet>
 60 |           <Link href="/" className="flex items-center gap-2">
 61 |             <span className="h-8 w-8 flex items-center justify-center rounded-full bg-purple-600 text-white font-bold">Y</span>
 62 |             <span className="font-bold text-xl bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-yellow-400">
 63 |               YUV.AI
 64 |             </span>
 65 |           </Link>
 66 |         </div>
 67 |         
 68 |         <SignedIn>
 69 |           <nav className="hidden lg:flex items-center justify-center mx-auto gap-6 text-sm">
 70 |             <Link href="/dashboard" className="font-medium transition-colors hover:text-purple-600">
 71 |               Dashboard
 72 |             </Link>
 73 |             <Link href="/projects" className="font-medium transition-colors hover:text-purple-600">
 74 |               Projects
 75 |             </Link>
 76 |             <Link href="/analytics" className="font-medium transition-colors hover:text-purple-600">
 77 |               Analytics
 78 |             </Link>
 79 |             <Link href="/settings" className="font-medium transition-colors hover:text-purple-600">
 80 |               Settings
 81 |             </Link>
 82 |           </nav>
 83 |         </SignedIn>
 84 | 
 85 |         <div className="flex items-center justify-end gap-3 ml-auto">
 86 |           <ThemeToggle />
 87 |           <SignedIn>
 88 |             <UserButton afterSignOutUrl="/" />
 89 |           </SignedIn>
 90 |           <SignedOut>
 91 |             <Link href="/sign-in">
 92 |               <Button variant="ghost" className="text-sm font-medium text-purple-600 hover:text-purple-700 hover:bg-purple-50 dark:hover:bg-purple-900/20">Sign In</Button>
 93 |             </Link>
 94 |             <Link href="/sign-up">
 95 |               <Button size="sm" className="bg-purple-600 hover:bg-purple-700 text-white shadow-sm">Sign Up</Button>
 96 |             </Link>
 97 |           </SignedOut>
 98 |         </div>
 99 |       </div>
100 |     </header>
101 |   )
102 | }
103 | 
104 | function MobileNav() {
105 |   return (
106 |     <div className="flex flex-col gap-4 text-foreground">
107 |       <Link href="/" className="flex items-center gap-2 font-medium hover:text-purple-600">
108 |         Home
109 |       </Link>
110 |       <SignedIn>
111 |         <Link href="/dashboard" className="flex items-center gap-2 font-medium hover:text-purple-600">
112 |           Dashboard
113 |         </Link>
114 |         <Link href="/projects" className="flex items-center gap-2 font-medium hover:text-purple-600">
115 |           Projects
116 |         </Link>
117 |         <Link href="/analytics" className="flex items-center gap-2 font-medium hover:text-purple-600">
118 |           Analytics
119 |         </Link>
120 |         <Link href="/settings" className="flex items-center gap-2 font-medium hover:text-purple-600">
121 |           Settings
122 |         </Link>
123 |       </SignedIn>
124 |       <SignedOut>
125 |         <Link href="/sign-in" className="flex items-center gap-2 font-medium hover:text-purple-600">
126 |           Sign In
127 |         </Link>
128 |         <Link href="/sign-up" className="flex items-center gap-2 font-medium hover:text-purple-600">
129 |           Sign Up
130 |         </Link>
131 |       </SignedOut>
132 |     </div>
133 |   )
134 | } 


--------------------------------------------------------------------------------
/src/app/projects/page.tsx:
--------------------------------------------------------------------------------
  1 | import { Folder, Clock, Users, Check, Filter, Plus } from "lucide-react";
  2 | import { auth, currentUser } from "@clerk/nextjs/server";
  3 | import { Button } from "@/components/ui/button";
  4 | import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
  5 | import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
  6 | 
  7 | export default async function ProjectsPage() {
  8 |   const session = await auth();
  9 |   const user = await currentUser();
 10 |   const userName = user?.firstName || user?.username || "User";
 11 | 
 12 |   const projects = [
 13 |     {
 14 |       id: 1,
 15 |       name: "AI Content Generator",
 16 |       description: "A tool to generate various types of content using AI",
 17 |       status: "In Progress",
 18 |       progress: 65,
 19 |       members: 4,
 20 |       updated: "2 hours ago",
 21 |       image: "https://picsum.photos/id/1/200"
 22 |     },
 23 |     {
 24 |       id: 2,
 25 |       name: "Data Visualization Dashboard",
 26 |       description: "Interactive dashboard for visualizing complex data sets",
 27 |       status: "Completed",
 28 |       progress: 100,
 29 |       members: 3,
 30 |       updated: "1 day ago",
 31 |       image: "https://picsum.photos/id/2/200"
 32 |     },
 33 |     {
 34 |       id: 3,
 35 |       name: "E-commerce Platform",
 36 |       description: "Modern e-commerce solution with advanced features",
 37 |       status: "In Progress",
 38 |       progress: 40,
 39 |       members: 5,
 40 |       updated: "Just now",
 41 |       image: "https://picsum.photos/id/3/200"
 42 |     },
 43 |     {
 44 |       id: 4,
 45 |       name: "Mobile App Redesign",
 46 |       description: "Redesigning the UI/UX of our flagship mobile application",
 47 |       status: "Planning",
 48 |       progress: 10,
 49 |       members: 2,
 50 |       updated: "3 days ago",
 51 |       image: "https://picsum.photos/id/4/200"
 52 |     },
 53 |     {
 54 |       id: 5,
 55 |       name: "Customer Analytics Tool",
 56 |       description: "Tool for analyzing customer behavior and interactions",
 57 |       status: "In Progress",
 58 |       progress: 75,
 59 |       members: 3,
 60 |       updated: "5 hours ago",
 61 |       image: "https://picsum.photos/id/5/200"
 62 |     },
 63 |     {
 64 |       id: 6,
 65 |       name: "API Integration Service",
 66 |       description: "Service for seamless integration with third-party APIs",
 67 |       status: "Completed",
 68 |       progress: 100,
 69 |       members: 2,
 70 |       updated: "1 week ago",
 71 |       image: "https://picsum.photos/id/6/200"
 72 |     }
 73 |   ];
 74 | 
 75 |   return (
 76 |     <div className="max-w-[1400px] w-full mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-8">
 77 |       <div className="flex flex-col md:flex-row gap-4 md:items-center md:justify-between">
 78 |         <div>
 79 |           <h1 className="text-3xl font-bold tracking-tight">Projects</h1>
 80 |           <p className="text-muted-foreground">
 81 |             Manage and monitor your project portfolio
 82 |           </p>
 83 |         </div>
 84 |         <div className="flex items-center gap-2">
 85 |           <Button variant="outline" size="sm">
 86 |             <Filter className="mr-2 h-4 w-4" />
 87 |             Filter
 88 |           </Button>
 89 |           <Button size="sm">
 90 |             <Plus className="mr-2 h-4 w-4" />
 91 |             New Project
 92 |           </Button>
 93 |         </div>
 94 |       </div>
 95 | 
 96 |       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
 97 |         {projects.map((project) => (
 98 |           <Card key={project.id} className="overflow-hidden backdrop-blur-sm bg-white/5 dark:bg-black/5 border-white/10 hover:border-white/20 transition-all hover:shadow-md">
 99 |             <CardHeader className="pb-0">
100 |               <div className="aspect-video w-full h-40 rounded-md mb-4 overflow-hidden">
101 |                 <img src={project.image} alt={project.name} className="w-full h-full object-cover" />
102 |               </div>
103 |               <CardTitle>{project.name}</CardTitle>
104 |               <CardDescription>{project.description}</CardDescription>
105 |             </CardHeader>
106 |             <CardContent className="pt-4">
107 |               <div className="flex items-center justify-between text-sm mb-3">
108 |                 <div className="flex items-center gap-1.5">
109 |                   <span className={`inline-block w-2 h-2 rounded-full ${
110 |                     project.status === "Completed" ? "bg-green-500" :
111 |                     project.status === "In Progress" ? "bg-yellow-500" :
112 |                     "bg-blue-500"
113 |                   }`}></span>
114 |                   <span>{project.status}</span>
115 |                 </div>
116 |                 <div className="flex items-center gap-1.5 text-muted-foreground">
117 |                   <Clock className="h-3.5 w-3.5" />
118 |                   <span>{project.updated}</span>
119 |                 </div>
120 |               </div>
121 |               
122 |               <div className="w-full bg-muted h-2 rounded-full overflow-hidden">
123 |                 <div 
124 |                   className={`h-full rounded-full ${
125 |                     project.status === "Completed" ? "bg-green-500" :
126 |                     project.status === "In Progress" ? "bg-yellow-500" :
127 |                     "bg-blue-500"
128 |                   }`}
129 |                   style={{ width: `${project.progress}%` }}
130 |                 ></div>
131 |               </div>
132 |               
133 |               <div className="flex items-center justify-between mt-4">
134 |                 <div className="flex items-center -space-x-2">
135 |                   {Array.from({ length: project.members }).map((_, i) => (
136 |                     <Avatar key={i} className="h-7 w-7 border-2 border-background">
137 |                       <AvatarImage src={`https://picsum.photos/id/${20 + i}/30`} />
138 |                       <AvatarFallback>U{i+1}</AvatarFallback>
139 |                     </Avatar>
140 |                   ))}
141 |                 </div>
142 |                 <Button variant="ghost" size="sm" className="text-xs">View Details</Button>
143 |               </div>
144 |             </CardContent>
145 |           </Card>
146 |         ))}
147 |       </div>
148 |     </div>
149 |   );
150 | } 


--------------------------------------------------------------------------------
/src/components/charts/bar-chart.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useState, useEffect } from "react";
  4 | import {
  5 |   Bar,
  6 |   BarChart,
  7 |   CartesianGrid,
  8 |   Legend,
  9 |   ResponsiveContainer,
 10 |   Tooltip,
 11 |   XAxis,
 12 |   YAxis,
 13 | } from "recharts";
 14 | import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 15 | import { useTheme } from "next-themes";
 16 | 
 17 | interface BarChartProps {
 18 |   title?: string;
 19 |   description?: string;
 20 |   data: {
 21 |     name: string;
 22 |     [key: string]: number | string;
 23 |   }[];
 24 |   categories: {
 25 |     name: string;
 26 |     key: string;
 27 |     color: string;
 28 |     darkColor?: string;
 29 |   }[];
 30 |   className?: string;
 31 | }
 32 | 
 33 | export function BarChartComponent({
 34 |   title,
 35 |   description,
 36 |   data,
 37 |   categories,
 38 |   className,
 39 | }: BarChartProps) {
 40 |   const { theme, resolvedTheme } = useTheme();
 41 |   const [mounted, setMounted] = useState(false);
 42 |   const [activeIndex, setActiveIndex] = useState<number | null>(null);
 43 |   
 44 |   // Set mounted to true after the component mounts
 45 |   useEffect(() => {
 46 |     setMounted(true);
 47 |   }, []);
 48 |   
 49 |   const isDark = mounted ? resolvedTheme === "dark" : false;
 50 |   
 51 |   const handleMouseEnter = (_: any, index: number) => {
 52 |     setActiveIndex(index);
 53 |   };
 54 |   
 55 |   const handleMouseLeave = () => {
 56 |     setActiveIndex(null);
 57 |   };
 58 | 
 59 |   const getPercentChange = (key: string) => {
 60 |     if (data.length < 2) return 0;
 61 |     
 62 |     const current = Number(data[data.length - 1][key] || 0);
 63 |     const previous = Number(data[data.length - 2][key] || 0);
 64 |     
 65 |     if (previous === 0) return 0;
 66 |     return ((current - previous) / previous) * 100;
 67 |   };
 68 | 
 69 |   const totalPercentChange = categories.reduce((sum, category) => {
 70 |     return sum + getPercentChange(category.key);
 71 |   }, 0) / categories.length;
 72 | 
 73 |   const trend = totalPercentChange >= 0 ? "up" : "down";
 74 |   
 75 |   // If not mounted yet, render a minimal version that won't cause hydration issues
 76 |   if (!mounted) {
 77 |     return (
 78 |       <Card className={className}>
 79 |         <CardHeader>
 80 |           <CardTitle>{title || "Bar Chart"}</CardTitle>
 81 |           <CardDescription>
 82 |             {description || "Comparison of data across categories"}
 83 |           </CardDescription>
 84 |         </CardHeader>
 85 |         <CardContent>
 86 |           <div className="mb-4 flex items-center gap-2">
 87 |             <p className="text-sm font-medium">
 88 |               Loading chart data...
 89 |             </p>
 90 |           </div>
 91 |           <div className="h-[300px]">
 92 |             {/* Empty space for chart */}
 93 |           </div>
 94 |         </CardContent>
 95 |       </Card>
 96 |     );
 97 |   }
 98 |   
 99 |   return (
100 |     <Card className={className}>
101 |       <CardHeader>
102 |         <CardTitle>{title || "Bar Chart"}</CardTitle>
103 |         <CardDescription>
104 |           {description || "Comparison of data across categories"}
105 |         </CardDescription>
106 |       </CardHeader>
107 |       <CardContent>
108 |         <div className="mb-4 flex items-center gap-2">
109 |           <p className="text-sm font-medium">
110 |             Trending{" "}
111 |             <span className={trend === "up" ? "text-emerald-500" : "text-rose-500"}>
112 |               {trend} by {Math.abs(totalPercentChange).toFixed(1)}%
113 |             </span>{" "}
114 |             this month
115 |           </p>
116 |         </div>
117 |         <div className="h-[300px]">
118 |           <ResponsiveContainer width="100%" height="100%">
119 |             <BarChart
120 |               data={data}
121 |               margin={{
122 |                 top: 20,
123 |                 right: 20,
124 |                 left: 20,
125 |                 bottom: 5,
126 |               }}
127 |               barGap={8}
128 |               barSize={30}
129 |               onMouseLeave={handleMouseLeave}
130 |             >
131 |               <CartesianGrid 
132 |                 strokeDasharray="3 3" 
133 |                 vertical={false}
134 |                 stroke={isDark ? "#333" : "#eee"} 
135 |               />
136 |               <XAxis
137 |                 dataKey="name"
138 |                 stroke={isDark ? "#888" : "#888"}
139 |                 fontSize={12}
140 |                 tickLine={false}
141 |                 axisLine={false}
142 |               />
143 |               <YAxis
144 |                 stroke={isDark ? "#888" : "#888"}
145 |                 fontSize={12}
146 |                 tickLine={false}
147 |                 axisLine={false}
148 |                 tickFormatter={(value) => `${value}`}
149 |               />
150 |               <Tooltip
151 |                 contentStyle={{
152 |                   backgroundColor: isDark ? "#1f2937" : "#fff",
153 |                   borderColor: isDark ? "#374151" : "#e5e7eb",
154 |                   borderRadius: "0.375rem",
155 |                   boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
156 |                 }}
157 |                 itemStyle={{
158 |                   color: isDark ? "#e5e7eb" : "#374151",
159 |                 }}
160 |                 labelStyle={{
161 |                   color: isDark ? "#e5e7eb" : "#374151",
162 |                   fontWeight: "bold",
163 |                   marginBottom: "0.5rem",
164 |                 }}
165 |               />
166 |               <Legend
167 |                 verticalAlign="bottom"
168 |                 height={36}
169 |                 iconType="circle"
170 |                 iconSize={10}
171 |                 formatter={(value) => {
172 |                   return <span className="text-xs">{value}</span>;
173 |                 }}
174 |               />
175 |               {categories.map((category) => (
176 |                 <Bar
177 |                   key={category.key}
178 |                   dataKey={category.key}
179 |                   name={category.name}
180 |                   fill={isDark ? (category.darkColor || category.color) : category.color}
181 |                   radius={[4, 4, 0, 0]}
182 |                   animationDuration={1500}
183 |                   animationEasing="ease-out"
184 |                   onMouseEnter={(data, index) => handleMouseEnter(data, index)}
185 |                   activeBar={{
186 |                     stroke: isDark ? "#fff" : "#000",
187 |                     strokeWidth: 1,
188 |                     strokeOpacity: 0.1,
189 |                   }}
190 |                 />
191 |               ))}
192 |             </BarChart>
193 |           </ResponsiveContainer>
194 |         </div>
195 |       </CardContent>
196 |     </Card>
197 |   );
198 | } 


--------------------------------------------------------------------------------
/src/components/charts/pie-chart.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useState, useEffect } from "react";
  4 | import {
  5 |   Cell,
  6 |   Pie,
  7 |   PieChart,
  8 |   ResponsiveContainer,
  9 |   Sector,
 10 |   Tooltip,
 11 | } from "recharts";
 12 | import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 13 | import { useTheme } from "next-themes";
 14 | 
 15 | interface PieChartProps {
 16 |   title?: string;
 17 |   description?: string;
 18 |   data: {
 19 |     name: string;
 20 |     value: number;
 21 |   }[];
 22 |   className?: string;
 23 |   donut?: boolean;
 24 |   totalText?: string;
 25 | }
 26 | 
 27 | export function PieChartComponent({
 28 |   title,
 29 |   description,
 30 |   data,
 31 |   className,
 32 |   donut = true,
 33 |   totalText,
 34 | }: PieChartProps) {
 35 |   const { theme, resolvedTheme } = useTheme();
 36 |   const [mounted, setMounted] = useState(false);
 37 |   const [activeIndex, setActiveIndex] = useState<number | null>(null);
 38 |   
 39 |   // Set mounted to true after the component mounts
 40 |   useEffect(() => {
 41 |     setMounted(true);
 42 |   }, []);
 43 |   
 44 |   const isDark = mounted ? resolvedTheme === "dark" : false;
 45 |   
 46 |   const handleMouseEnter = (_: any, index: number) => {
 47 |     setActiveIndex(index);
 48 |   };
 49 |   
 50 |   const handleMouseLeave = () => {
 51 |     setActiveIndex(null);
 52 |   };
 53 | 
 54 |   // Stable colors that work for both light and dark themes
 55 |   const COLORS = [
 56 |     '#c084fc',  // Purple
 57 |     '#fef08a',  // Yellow
 58 |     '#93c5fd',  // Blue
 59 |     '#86efac',  // Green
 60 |     '#fb7185',  // Red
 61 |     '#67e8f9',  // Cyan
 62 |     '#fdba74',  // Orange
 63 |     '#d8b4fe',  // Violet
 64 |   ];
 65 | 
 66 |   const renderActiveShape = (props: any) => {
 67 |     const {
 68 |       cx,
 69 |       cy,
 70 |       innerRadius,
 71 |       outerRadius,
 72 |       startAngle,
 73 |       endAngle,
 74 |       fill,
 75 |       percent,
 76 |       name,
 77 |       value,
 78 |     } = props;
 79 | 
 80 |     return (
 81 |       <g>
 82 |         <Sector
 83 |           cx={cx}
 84 |           cy={cy}
 85 |           innerRadius={innerRadius}
 86 |           outerRadius={outerRadius + 8}
 87 |           startAngle={startAngle}
 88 |           endAngle={endAngle}
 89 |           fill={fill}
 90 |         />
 91 |         {donut && totalText && mounted && (
 92 |           <text
 93 |             x={cx}
 94 |             y={cy}
 95 |             dy={0}
 96 |             textAnchor="middle"
 97 |             fill={isDark ? "#e5e7eb" : "#374151"}
 98 |             className="font-medium text-lg"
 99 |           >
100 |             {totalText}
101 |           </text>
102 |         )}
103 |       </g>
104 |     );
105 |   };
106 | 
107 |   const total = data.reduce((sum, item) => sum + item.value, 0);
108 | 
109 |   // If not mounted yet, render a minimal version that won't cause hydration issues
110 |   if (!mounted) {
111 |     return (
112 |       <Card className={className}>
113 |         <CardHeader>
114 |           <CardTitle>{title || "Pie Chart"}</CardTitle>
115 |           <CardDescription>
116 |             {description || "Distribution of values"}
117 |           </CardDescription>
118 |         </CardHeader>
119 |         <CardContent>
120 |           <div className="h-[300px] flex items-center justify-center">
121 |             {/* Empty space for chart */}
122 |           </div>
123 |           <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mt-4">
124 |             {data.map((entry, index) => (
125 |               <div key={`legend-${index}`} className="flex items-center gap-2">
126 |                 <div 
127 |                   className="w-3 h-3 rounded-full" 
128 |                   style={{ backgroundColor: COLORS[index % COLORS.length] }}
129 |                 />
130 |                 <span className="text-sm truncate">{entry.name}</span>
131 |               </div>
132 |             ))}
133 |           </div>
134 |         </CardContent>
135 |       </Card>
136 |     );
137 |   }
138 | 
139 |   return (
140 |     <Card className={className}>
141 |       <CardHeader>
142 |         <CardTitle>{title || "Pie Chart"}</CardTitle>
143 |         <CardDescription>
144 |           {description || "Distribution of values"}
145 |         </CardDescription>
146 |       </CardHeader>
147 |       <CardContent>
148 |         <div className="h-[300px] flex items-center justify-center">
149 |           <ResponsiveContainer width="100%" height="100%">
150 |             <PieChart>
151 |               <Pie
152 |                 data={data}
153 |                 cx="50%"
154 |                 cy="50%"
155 |                 labelLine={false}
156 |                 innerRadius={donut ? 80 : 0}
157 |                 outerRadius={120}
158 |                 paddingAngle={2}
159 |                 dataKey="value"
160 |                 activeIndex={activeIndex !== null ? activeIndex : undefined}
161 |                 activeShape={renderActiveShape}
162 |                 onMouseEnter={handleMouseEnter}
163 |                 onMouseLeave={handleMouseLeave}
164 |                 animationDuration={1000}
165 |                 animationBegin={0}
166 |                 animationEasing="ease"
167 |               >
168 |                 {data.map((entry, index) => (
169 |                   <Cell 
170 |                     key={`cell-${index}`} 
171 |                     fill={COLORS[index % COLORS.length]} 
172 |                     stroke={isDark ? "#1f2937" : "#fff"}
173 |                     strokeWidth={2}
174 |                   />
175 |                 ))}
176 |               </Pie>
177 |               <Tooltip
178 |                 contentStyle={{
179 |                   backgroundColor: isDark ? "#1f2937" : "#fff",
180 |                   borderColor: isDark ? "#374151" : "#e5e7eb",
181 |                   borderRadius: "0.375rem",
182 |                   boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
183 |                 }}
184 |                 itemStyle={{
185 |                   color: isDark ? "#e5e7eb" : "#374151",
186 |                 }}
187 |                 formatter={(value: number) => {
188 |                   const percentage = ((value / total) * 100).toFixed(1);
189 |                   return [`${value} (${percentage}%)`, "Value"];
190 |                 }}
191 |               />
192 |             </PieChart>
193 |           </ResponsiveContainer>
194 |         </div>
195 |         
196 |         <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mt-4">
197 |           {data.map((entry, index) => (
198 |             <div key={`legend-${index}`} className="flex items-center gap-2">
199 |               <div 
200 |                 className="w-3 h-3 rounded-full" 
201 |                 style={{ backgroundColor: COLORS[index % COLORS.length] }}
202 |               />
203 |               <span className="text-sm truncate">{entry.name}</span>
204 |             </div>
205 |           ))}
206 |         </div>
207 |       </CardContent>
208 |     </Card>
209 |   );
210 | } 


--------------------------------------------------------------------------------
/src/components/charts/line-chart.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useState, useEffect } from "react";
  4 | import {
  5 |   CartesianGrid,
  6 |   Legend,
  7 |   Line,
  8 |   LineChart,
  9 |   ResponsiveContainer,
 10 |   Tooltip,
 11 |   XAxis,
 12 |   YAxis,
 13 | } from "recharts";
 14 | import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 15 | import { useTheme } from "next-themes";
 16 | 
 17 | interface LineChartProps {
 18 |   title?: string;
 19 |   description?: string;
 20 |   data: {
 21 |     name: string;
 22 |     [key: string]: number | string;
 23 |   }[];
 24 |   series: {
 25 |     name: string;
 26 |     key: string;
 27 |     color: string;
 28 |     darkColor?: string;
 29 |   }[];
 30 |   className?: string;
 31 | }
 32 | 
 33 | export function LineChartComponent({
 34 |   title,
 35 |   description,
 36 |   data,
 37 |   series,
 38 |   className,
 39 | }: LineChartProps) {
 40 |   const { theme, resolvedTheme } = useTheme();
 41 |   const [mounted, setMounted] = useState(false);
 42 |   const [activeLineIndex, setActiveLineIndex] = useState<number | null>(null);
 43 |   
 44 |   // Set mounted to true after the component mounts
 45 |   useEffect(() => {
 46 |     setMounted(true);
 47 |   }, []);
 48 |   
 49 |   const isDark = mounted ? resolvedTheme === "dark" : false;
 50 |   
 51 |   const handleMouseEnter = (_: any, index: number) => {
 52 |     setActiveLineIndex(index);
 53 |   };
 54 |   
 55 |   const handleMouseLeave = () => {
 56 |     setActiveLineIndex(null);
 57 |   };
 58 | 
 59 |   const getPercentChange = (key: string) => {
 60 |     if (data.length < 2) return 0;
 61 |     
 62 |     const current = Number(data[data.length - 1][key] || 0);
 63 |     const previous = Number(data[data.length - 2][key] || 0);
 64 |     
 65 |     if (previous === 0) return 0;
 66 |     return ((current - previous) / previous) * 100;
 67 |   };
 68 | 
 69 |   // Calculate average trend for all series
 70 |   const totalPercentChange = series.reduce((sum, serie) => {
 71 |     return sum + getPercentChange(serie.key);
 72 |   }, 0) / series.length;
 73 | 
 74 |   const trend = totalPercentChange >= 0 ? "up" : "down";
 75 |   
 76 |   // If not mounted yet, render a minimal version that won't cause hydration issues
 77 |   if (!mounted) {
 78 |     return (
 79 |       <Card className={className}>
 80 |         <CardHeader>
 81 |           <CardTitle>{title || "Line Chart"}</CardTitle>
 82 |           <CardDescription>
 83 |             {description || "Showing trends over time"}
 84 |           </CardDescription>
 85 |         </CardHeader>
 86 |         <CardContent>
 87 |           <div className="mb-4 flex items-center gap-2">
 88 |             <p className="text-sm font-medium">
 89 |               Loading chart data...
 90 |             </p>
 91 |           </div>
 92 |           <div className="h-[300px]">
 93 |             {/* Empty space for chart */}
 94 |           </div>
 95 |         </CardContent>
 96 |       </Card>
 97 |     );
 98 |   }
 99 |   
100 |   return (
101 |     <Card className={className}>
102 |       <CardHeader>
103 |         <CardTitle>{title || "Line Chart"}</CardTitle>
104 |         <CardDescription>
105 |           {description || "Showing trends over time"}
106 |         </CardDescription>
107 |       </CardHeader>
108 |       <CardContent>
109 |         <div className="mb-4 flex items-center gap-2">
110 |           <p className="text-sm font-medium">
111 |             Trending{" "}
112 |             <span className={trend === "up" ? "text-emerald-500" : "text-rose-500"}>
113 |               {trend} by {Math.abs(totalPercentChange).toFixed(1)}%
114 |             </span>{" "}
115 |             this month
116 |           </p>
117 |         </div>
118 |         <div className="h-[300px]">
119 |           <ResponsiveContainer width="100%" height="100%">
120 |             <LineChart
121 |               data={data}
122 |               margin={{
123 |                 top: 20,
124 |                 right: 20,
125 |                 left: 20,
126 |                 bottom: 5,
127 |               }}
128 |               onMouseLeave={handleMouseLeave}
129 |             >
130 |               <CartesianGrid 
131 |                 strokeDasharray="3 3" 
132 |                 vertical={false}
133 |                 stroke={isDark ? "#333" : "#eee"} 
134 |               />
135 |               <XAxis
136 |                 dataKey="name"
137 |                 stroke={isDark ? "#888" : "#888"}
138 |                 fontSize={12}
139 |                 tickLine={false}
140 |                 axisLine={false}
141 |               />
142 |               <YAxis
143 |                 stroke={isDark ? "#888" : "#888"}
144 |                 fontSize={12}
145 |                 tickLine={false}
146 |                 axisLine={false}
147 |                 tickFormatter={(value) => `${value}`}
148 |               />
149 |               <Tooltip
150 |                 contentStyle={{
151 |                   backgroundColor: isDark ? "#1f2937" : "#fff",
152 |                   borderColor: isDark ? "#374151" : "#e5e7eb",
153 |                   borderRadius: "0.375rem",
154 |                   boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
155 |                 }}
156 |                 itemStyle={{
157 |                   color: isDark ? "#e5e7eb" : "#374151",
158 |                 }}
159 |                 labelStyle={{
160 |                   color: isDark ? "#e5e7eb" : "#374151",
161 |                   fontWeight: "bold",
162 |                   marginBottom: "0.5rem",
163 |                 }}
164 |                 formatter={(value) => [`${value}`, ""]}
165 |               />
166 |               <Legend
167 |                 verticalAlign="bottom"
168 |                 height={36}
169 |                 iconType="circle"
170 |                 iconSize={8}
171 |                 formatter={(value) => {
172 |                   return <span className="text-xs">{value}</span>;
173 |                 }}
174 |               />
175 |               {series.map((serie, index) => (
176 |                 <Line
177 |                   key={serie.key}
178 |                   type="monotone"
179 |                   dataKey={serie.key}
180 |                   name={serie.name}
181 |                   stroke={isDark ? (serie.darkColor || serie.color) : serie.color}
182 |                   strokeWidth={activeLineIndex === index ? 3 : 2}
183 |                   dot={{
184 |                     r: 4,
185 |                     fill: isDark ? "#1f2937" : "#fff",
186 |                     stroke: isDark ? (serie.darkColor || serie.color) : serie.color,
187 |                     strokeWidth: 2,
188 |                   }}
189 |                   activeDot={{
190 |                     r: 6,
191 |                     fill: isDark ? "#1f2937" : "#fff",
192 |                     stroke: isDark ? (serie.darkColor || serie.color) : serie.color,
193 |                     strokeWidth: 3,
194 |                   }}
195 |                   onMouseEnter={(data) => handleMouseEnter(data, index)}
196 |                   animationDuration={1500}
197 |                   animationEasing="ease-out"
198 |                 />
199 |               ))}
200 |             </LineChart>
201 |           </ResponsiveContainer>
202 |         </div>
203 |       </CardContent>
204 |     </Card>
205 |   );
206 | } 


--------------------------------------------------------------------------------
/src/components/charts/area-chart.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useState, useEffect } from "react";
  4 | import {
  5 |   Area,
  6 |   AreaChart,
  7 |   CartesianGrid,
  8 |   ResponsiveContainer,
  9 |   Tooltip,
 10 |   XAxis,
 11 |   YAxis,
 12 | } from "recharts";
 13 | import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 14 | import { useTheme } from "next-themes";
 15 | 
 16 | interface AreaChartProps {
 17 |   title?: string;
 18 |   description?: string;
 19 |   data: {
 20 |     name: string;
 21 |     value: number;
 22 |     previousValue?: number;
 23 |   }[];
 24 |   className?: string;
 25 | }
 26 | 
 27 | export function AreaChartComponent({
 28 |   title,
 29 |   description,
 30 |   data,
 31 |   className,
 32 | }: AreaChartProps) {
 33 |   const { theme, resolvedTheme } = useTheme();
 34 |   const [mounted, setMounted] = useState(false);
 35 |   const [activeIndex, setActiveIndex] = useState<number | null>(null);
 36 |   
 37 |   // Set mounted to true after the component mounts
 38 |   useEffect(() => {
 39 |     setMounted(true);
 40 |   }, []);
 41 |   
 42 |   const isDark = mounted ? resolvedTheme === "dark" : false;
 43 |   
 44 |   const handleMouseEnter = (_: any, index: number) => {
 45 |     setActiveIndex(index);
 46 |   };
 47 |   
 48 |   const handleMouseLeave = () => {
 49 |     setActiveIndex(null);
 50 |   };
 51 | 
 52 |   const getPercentChange = () => {
 53 |     if (data.length < 2) return 0;
 54 |     
 55 |     const currentValue = data[data.length - 1].value;
 56 |     const previousValue = data[data.length - 2].value;
 57 |     
 58 |     if (previousValue === 0) return 0;
 59 |     return ((currentValue - previousValue) / previousValue) * 100;
 60 |   };
 61 | 
 62 |   const percentChange = getPercentChange();
 63 |   const trend = percentChange >= 0 ? "up" : "down";
 64 |   
 65 |   // If not mounted yet, render a minimal version that won't cause hydration issues
 66 |   if (!mounted) {
 67 |     return (
 68 |       <Card className={className}>
 69 |         <CardHeader>
 70 |           <CardTitle>{title || "Area Chart"}</CardTitle>
 71 |           <CardDescription>
 72 |             {description || "Showing data trends over time"}
 73 |           </CardDescription>
 74 |         </CardHeader>
 75 |         <CardContent>
 76 |           <div className="mb-4 flex items-center gap-2">
 77 |             <p className="text-sm font-medium">
 78 |               Loading chart data...
 79 |             </p>
 80 |           </div>
 81 |           <div className="h-[300px]">
 82 |             {/* Empty space for chart */}
 83 |           </div>
 84 |         </CardContent>
 85 |       </Card>
 86 |     );
 87 |   }
 88 |   
 89 |   return (
 90 |     <Card className={className}>
 91 |       <CardHeader>
 92 |         <CardTitle>{title || "Area Chart"}</CardTitle>
 93 |         <CardDescription>
 94 |           {description || "Showing data trends over time"}
 95 |         </CardDescription>
 96 |       </CardHeader>
 97 |       <CardContent>
 98 |         <div className="mb-4 flex items-center gap-2">
 99 |           <p className="text-sm font-medium">
100 |             Trending{" "}
101 |             <span className={trend === "up" ? "text-emerald-500" : "text-rose-500"}>
102 |               {trend} by {Math.abs(percentChange).toFixed(1)}%
103 |             </span>{" "}
104 |             this month
105 |           </p>
106 |         </div>
107 |         <div className="h-[300px]">
108 |           <ResponsiveContainer width="100%" height="100%">
109 |             <AreaChart
110 |               data={data}
111 |               margin={{
112 |                 top: 10,
113 |                 right: 10,
114 |                 left: 0,
115 |                 bottom: 0,
116 |               }}
117 |               onMouseLeave={handleMouseLeave}
118 |             >
119 |               <defs>
120 |                 <linearGradient id="colorValue" x1="0" y1="0" x2="0" y2="1">
121 |                   <stop
122 |                     offset="5%"
123 |                     stopColor={isDark ? "#9333ea" : "#c084fc"}
124 |                     stopOpacity={0.8}
125 |                   />
126 |                   <stop
127 |                     offset="95%"
128 |                     stopColor={isDark ? "#9333ea" : "#c084fc"}
129 |                     stopOpacity={0}
130 |                   />
131 |                 </linearGradient>
132 |                 <linearGradient id="colorPreviousValue" x1="0" y1="0" x2="0" y2="1">
133 |                   <stop
134 |                     offset="5%"
135 |                     stopColor={isDark ? "#eab308" : "#fef08a"}
136 |                     stopOpacity={0.8}
137 |                   />
138 |                   <stop
139 |                     offset="95%"
140 |                     stopColor={isDark ? "#eab308" : "#fef08a"}
141 |                     stopOpacity={0}
142 |                   />
143 |                 </linearGradient>
144 |               </defs>
145 |               <CartesianGrid 
146 |                 strokeDasharray="3 3" 
147 |                 vertical={false}
148 |                 stroke={isDark ? "#333" : "#eee"} 
149 |               />
150 |               <XAxis
151 |                 dataKey="name"
152 |                 stroke={isDark ? "#888" : "#888"}
153 |                 fontSize={12}
154 |                 tickLine={false}
155 |                 axisLine={false}
156 |               />
157 |               <YAxis
158 |                 stroke={isDark ? "#888" : "#888"}
159 |                 fontSize={12}
160 |                 tickLine={false}
161 |                 axisLine={false}
162 |                 tickFormatter={(value) => `${value}`}
163 |               />
164 |               <Tooltip
165 |                 contentStyle={{
166 |                   backgroundColor: isDark ? "#1f2937" : "#fff",
167 |                   borderColor: isDark ? "#374151" : "#e5e7eb",
168 |                   borderRadius: "0.375rem",
169 |                   boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
170 |                 }}
171 |                 itemStyle={{
172 |                   color: isDark ? "#e5e7eb" : "#374151",
173 |                 }}
174 |                 labelStyle={{
175 |                   color: isDark ? "#e5e7eb" : "#374151",
176 |                   fontWeight: "bold",
177 |                   marginBottom: "0.5rem",
178 |                 }}
179 |                 formatter={(value: number) => [`${value}`, "Value"]}
180 |               />
181 |               <Area
182 |                 type="monotone"
183 |                 dataKey="value"
184 |                 stroke={isDark ? "#9333ea" : "#c084fc"}
185 |                 strokeWidth={2}
186 |                 fillOpacity={1}
187 |                 fill="url(#colorValue)"
188 |                 activeDot={{ 
189 |                   r: 6, 
190 |                   stroke: isDark ? "#c084fc" : "#9333ea",
191 |                   strokeWidth: 2,
192 |                   fill: isDark ? "#1f2937" : "#fff"
193 |                 }}
194 |                 animationDuration={1500}
195 |                 animationEasing="ease-out"
196 |               />
197 |               {data[0]?.previousValue !== undefined && (
198 |                 <Area
199 |                   type="monotone"
200 |                   dataKey="previousValue"
201 |                   stroke={isDark ? "#eab308" : "#fef08a"}
202 |                   strokeWidth={2}
203 |                   fillOpacity={1}
204 |                   fill="url(#colorPreviousValue)"
205 |                   animationDuration={1500}
206 |                   animationEasing="ease-out"
207 |                 />
208 |               )}
209 |             </AreaChart>
210 |           </ResponsiveContainer>
211 |         </div>
212 |       </CardContent>
213 |     </Card>
214 |   );
215 | } 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # NCM Business Portfolio
  2 | 
  3 | ![NCM Business Portfolio](https://i.imgur.com/uZshILa.png)
  4 | ![NCM Business Portfolio - Dashboard](https://i.imgur.com/QKlIlvQ.png)
  5 | ![NCM Business Portfolio - Dashboard Bright](https://i.imgur.com/F8RVRH9.png)
  6 | 
  7 | A modern business portfolio application built with Next.js 14, Clerk Authentication, TailwindCSS, and shadcn/ui components.
  8 | 
  9 | ## 🚀 Features
 10 | 
 11 | - **Modern UI/UX**: Beautiful, responsive design with glassmorphism effects
 12 | - **Authentication**: Secure user authentication powered by Clerk
 13 | - **Dashboard Analytics**: Interactive charts and visualization
 14 | - **Project Management**: Create and manage project portfolios
 15 | - **Theme Support**: Dark/Light mode toggle
 16 | - **Mobile-First Design**: Fully responsive interface for all devices
 17 | 
 18 | ## 🧰 Tech Stack
 19 | 
 20 | - **Framework**: [Next.js 14](https://nextjs.org/) (App Router)
 21 | - **Authentication**: [Clerk](https://clerk.dev/) 
 22 | - **Styling**: [TailwindCSS](https://tailwindcss.com/)
 23 | - **UI Components**: [shadcn/ui](https://ui.shadcn.com/)
 24 | - **Charts**: Recharts-based custom components
 25 | - **Icons**: [Lucide React](https://lucide.dev/)
 26 | - **Fonts**: Google Outfit font
 27 | - **Database**: [MongoDB Atlas](https://www.mongodb.com/atlas/database)
 28 | 
 29 | ## 📦 Installation
 30 | 
 31 | ### Prerequisites
 32 | 
 33 | - Node.js 18.17 or later
 34 | - npm or yarn
 35 | - Git
 36 | - MongoDB Atlas account
 37 | - Clerk account
 38 | 
 39 | ### Recommended Development Tools
 40 | 
 41 | For the best development experience, we recommend using one of these AI-powered tools:
 42 | 
 43 | - [Cursor](https://cursor.sh/) - AI-powered code editor
 44 | - [GitHub Copilot](https://github.com/features/copilot) - AI pair programmer
 45 | - [Windsurf](https://www.phind.com/blog/code-editor) - AI coding assistant
 46 | 
 47 | These tools will help you understand and modify the codebase more efficiently.
 48 | 
 49 | ### Step-by-Step Setup Instructions
 50 | 
 51 | 1. **Clone the repository**
 52 | 
 53 | ```bash
 54 | git clone https://github.com/yourusername/ncm-business-portfolio.git
 55 | cd ncm-business-portfolio
 56 | ```
 57 | 
 58 | 2. **Install dependencies**
 59 | 
 60 | ```bash
 61 | npm install
 62 | # or
 63 | yarn install
 64 | ```
 65 | 
 66 | 3. **Set up Clerk Authentication**
 67 | 
 68 |    a. Create a [Clerk account](https://clerk.dev/sign-up) if you don't have one
 69 |    
 70 |    b. Create a new application:
 71 |       - Go to the Clerk Dashboard and click "Add Application"
 72 |       - Enter a name for your application
 73 |       - Select "Next.js" as the framework
 74 |    
 75 |    c. Configure your application:
 76 |       - In the Clerk Dashboard, go to your application
 77 |       - Go to "API Keys" in the sidebar
 78 |       - You'll find your "Publishable Key" and "Secret Key"
 79 |       - Copy these keys for your environment variables
 80 |    
 81 |    d. Configure sign-in options (optional):
 82 |       - In the Clerk Dashboard, go to "Authentication" → "Social Connections"
 83 |       - Enable the social login providers you want to support (e.g., Google, GitHub)
 84 |       - Follow the instructions to set up each provider
 85 |    
 86 |    e. Set up redirect URLs:
 87 |       - In "Authentication" → "Redirects", set the following:
 88 |         - Sign-in: `/sign-in`
 89 |         - Sign-up: `/sign-up`
 90 |         - After sign-in: `/dashboard`
 91 |         - After sign-up: `/dashboard`
 92 | 
 93 | 4. **Set up MongoDB Atlas**
 94 | 
 95 |    a. Create a [MongoDB Atlas account](https://www.mongodb.com/cloud/atlas/register) if you don't have one
 96 |    
 97 |    b. Create a new project and cluster (the free tier works perfectly)
 98 |    
 99 |    c. Set up database access:
100 |       - Create a database user with password authentication
101 |       - Remember to save these credentials securely
102 |    
103 |    d. Set up network access:
104 |       - Add your current IP address to the IP Access List
105 |       - For development, you can allow access from anywhere (0.0.0.0/0)
106 |    
107 |    e. Get your connection string:
108 |       - Go to your cluster and click "Connect"
109 |       - Select "Connect your application"
110 |       - Copy the connection string (it will look like: `mongodb+srv://username:<password>@cluster0.xxxxx.mongodb.net/?retryWrites=true&w=majority`)
111 |       - Replace `<password>` with your database user's password
112 | 
113 | 5. **Set up environment variables**
114 | 
115 | Create a `.env.local` file in the root directory with the following variables:
116 | 
117 | ```
118 | # Clerk Authentication
119 | NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
120 | CLERK_SECRET_KEY=your_clerk_secret_key
121 | NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
122 | NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
123 | NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
124 | NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard
125 | 
126 | # MongoDB Atlas
127 | MONGODB_URI=your_mongodb_connection_string
128 | MONGODB_DB_NAME=your_database_name
129 | ```
130 | 
131 | 6. **Run the development server**
132 | 
133 | ```bash
134 | npm run dev
135 | # or
136 | yarn dev
137 | ```
138 | 
139 | 7. **Open your browser**
140 | 
141 | Navigate to [http://localhost:3000](http://localhost:3000) to see the application.
142 | 
143 | ## 📋 Key Pages
144 | 
145 | - **Dashboard** (`/dashboard`): Main overview with statistics and project summaries
146 | - **Projects** (`/projects`): Project listing and management
147 | - **Analytics** (`/analytics`): Detailed analytics with interactive charts
148 | - **Settings** (`/settings`): User profile and application settings
149 | 
150 | ## 🌟 Custom Components
151 | 
152 | The application features several custom components:
153 | 
154 | - **Charts**: Area, Bar, Line and Pie charts with responsive design
155 | - **Header**: Responsive navigation with mobile drawer
156 | - **Theme Toggle**: Light/Dark mode switcher
157 | - **Cards**: Beautiful glassmorphism-style cards for content display
158 | 
159 | ## 📱 Responsive Design
160 | 
161 | The application is built with a mobile-first approach and includes:
162 | 
163 | - Responsive navigation (collapsible sidebar on mobile)
164 | - Fluid layouts that adapt to any screen size
165 | - Optimized content display for different devices
166 | 
167 | ## 🧩 Project Structure
168 | 
169 | ```
170 | ncm-business-portfolio/
171 | ├── public/              # Static assets
172 | ├── src/
173 | │   ├── app/             # App router pages
174 | │   │   ├── dashboard/   # Dashboard page
175 | │   │   ├── projects/    # Projects page
176 | │   │   ├── analytics/   # Analytics page
177 | │   │   ├── settings/    # Settings page
178 | │   │   └── ...
179 | │   ├── components/      # Reusable components
180 | │   │   ├── charts/      # Chart components
181 | │   │   ├── ui/          # shadcn/ui components
182 | │   │   └── ...
183 | │   ├── lib/             # Utility functions and shared logic
184 | │   └── models/          # MongoDB schema models
185 | ├── next.config.ts       # Next.js configuration
186 | ├── tailwind.config.js   # TailwindCSS configuration
187 | └── ...
188 | ```
189 | 
190 | ## 🚀 Deployment
191 | 
192 | This application can be easily deployed on:
193 | 
194 | - [Vercel](https://vercel.com/)
195 | - [Netlify](https://www.netlify.com/)
196 | - [Railway](https://railway.app/)
197 | 
198 | ## 🔒 Authentication Flow
199 | 
200 | The authentication is handled by Clerk and includes:
201 | 
202 | - Sign up/Sign in pages
203 | - Protected routes
204 | - User profile management
205 | - Authentication middleware
206 | 
207 | ### Understanding Clerk Authentication
208 | 
209 | Once set up, Clerk provides:
210 | 
211 | 1. **Pre-built components**: `<SignIn />`, `<SignUp />`, `<UserProfile />`, etc.
212 | 2. **Auth hooks**: `useAuth()`, `useUser()`, etc. for accessing user data
213 | 3. **Middleware**: Protects routes based on authentication status
214 | 4. **Server-side helpers**: For accessing user data in server components
215 | 
216 | Example of protecting a route:
217 | ```jsx
218 | // In your route component
219 | import { auth } from "@clerk/nextjs";
220 | 
221 | export default function ProtectedPage() {
222 |   const { userId } = auth();
223 |   
224 |   if (!userId) {
225 |     // Handle unauthenticated state
226 |     redirect("/sign-in");
227 |   }
228 |   
229 |   // Render content for authenticated users
230 | }
231 | ```
232 | 
233 | ## 🧪 Extending the Project
234 | 
235 | To add new features to the project:
236 | 
237 | 1. For new pages, create folders in the `src/app` directory
238 | 2. For new components, add them to the `src/components` directory
239 | 3. For database integrations, set up MongoDB models in the `src/models` directory
240 | 
241 | ## 🌈 Customization
242 | 
243 | Customize the look and feel of the application:
244 | 
245 | - Edit `tailwind.config.js` to change theme colors
246 | - Modify `src/app/layout.tsx` to update global layout
247 | - Update fonts and styles in the theme configuration
248 | 
249 | ## 👤 About the Developer
250 | 
251 | Created with 💜 by [Yuval Avidani](https://linktr.ee/yuvai), AI Builder & Speaker
252 | 
253 | - X: [@yuvalav](https://x.com/yuvalav)
254 | - Instagram: [@yuval_770](https://instagram.com/yuval_770)
255 | - Blog: [https://yuv.ai](https://yuv.ai)
256 | 
257 | > "Fly High With YUV.AI"
258 | 
259 | ## 📄 License
260 | 
261 | This project is open source and available under the [MIT License](LICENSE).
262 | 


--------------------------------------------------------------------------------
/src/app/analytics/page.tsx:
--------------------------------------------------------------------------------
  1 | import { auth, currentUser } from "@clerk/nextjs/server";
  2 | import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
  3 | import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
  4 | import { AreaChartComponent } from "@/components/charts/area-chart";
  5 | import { BarChartComponent } from "@/components/charts/bar-chart";
  6 | import { LineChartComponent } from "@/components/charts/line-chart";
  7 | import { PieChartComponent } from "@/components/charts/pie-chart";
  8 | import { ArrowUpRight, BadgePlus, Download, BarChart2, BarChart, Calendar, ArrowDown, ArrowUp } from "lucide-react";
  9 | import { Button } from "@/components/ui/button";
 10 | 
 11 | // Sample data for charts
 12 | const visitorData = [
 13 |   { name: "Jan", value: 2500, previousValue: 2200 },
 14 |   { name: "Feb", value: 3000, previousValue: 2800 },
 15 |   { name: "Mar", value: 2800, previousValue: 2600 },
 16 |   { name: "Apr", value: 3200, previousValue: 2900 },
 17 |   { name: "May", value: 3800, previousValue: 3200 },
 18 |   { name: "Jun", value: 4200, previousValue: 3500 },
 19 | ];
 20 | 
 21 | const revenueData = [
 22 |   { name: "Jan", value: 12500, previousValue: 10200 },
 23 |   { name: "Feb", value: 14000, previousValue: 12800 },
 24 |   { name: "Mar", value: 15800, previousValue: 14600 },
 25 |   { name: "Apr", value: 18200, previousValue: 16900 },
 26 |   { name: "May", value: 21800, previousValue: 19200 },
 27 |   { name: "Jun", value: 25200, previousValue: 22500 },
 28 | ];
 29 | 
 30 | const projectData = [
 31 |   { name: "Web App", value: 35 },
 32 |   { name: "Mobile App", value: 25 },
 33 |   { name: "Landing Page", value: 20 },
 34 |   { name: "Dashboard", value: 15 },
 35 |   { name: "Others", value: 5 },
 36 | ];
 37 | 
 38 | const deviceData = [
 39 |   { name: "Jan", desktop: 1500, mobile: 900, tablet: 500 },
 40 |   { name: "Feb", desktop: 2000, mobile: 1200, tablet: 600 },
 41 |   { name: "Mar", desktop: 1800, mobile: 1400, tablet: 550 },
 42 |   { name: "Apr", desktop: 2400, mobile: 1800, tablet: 700 },
 43 |   { name: "May", desktop: 2800, mobile: 2100, tablet: 900 },
 44 |   { name: "Jun", desktop: 3200, mobile: 2400, tablet: 1100 },
 45 | ];
 46 | 
 47 | const deviceCategories = [
 48 |   { name: "Desktop", key: "desktop", color: "#d8b4fe", darkColor: "#c084fc" },
 49 |   { name: "Mobile", key: "mobile", color: "#fef9c3", darkColor: "#fef08a" },
 50 |   { name: "Tablet", key: "tablet", color: "#bfdbfe", darkColor: "#93c5fd" },
 51 | ];
 52 | 
 53 | const trafficData = [
 54 |   { name: "Jan", visitors: 2500, conversions: 150, bounces: 1800 },
 55 |   { name: "Feb", visitors: 3000, conversions: 210, bounces: 2100 },
 56 |   { name: "Mar", visitors: 2800, conversions: 180, bounces: 2000 },
 57 |   { name: "Apr", visitors: 3200, conversions: 240, bounces: 2300 },
 58 |   { name: "May", visitors: 3800, conversions: 320, bounces: 2500 },
 59 |   { name: "Jun", visitors: 4200, conversions: 380, bounces: 2700 },
 60 | ];
 61 | 
 62 | const trafficSeries = [
 63 |   { name: "Visitors", key: "visitors", color: "#d8b4fe", darkColor: "#c084fc" },
 64 |   { name: "Conversions", key: "conversions", color: "#bbf7d0", darkColor: "#86efac" },
 65 |   { name: "Bounces", key: "bounces", color: "#fda4af", darkColor: "#fb7185" },
 66 | ];
 67 | 
 68 | export default async function AnalyticsPage() {
 69 |   const session = await auth();
 70 |   const user = await currentUser();
 71 |   const userName = user?.firstName || user?.username || "User";
 72 | 
 73 |   return (
 74 |     <div className="max-w-[1400px] w-full mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-8">
 75 |       <div className="flex flex-col md:flex-row gap-4 md:items-center md:justify-between">
 76 |         <div>
 77 |           <h1 className="text-3xl font-bold tracking-tight">Analytics Dashboard</h1>
 78 |           <p className="text-muted-foreground">
 79 |             Comprehensive insights and performance metrics
 80 |           </p>
 81 |         </div>
 82 |         <div className="flex items-center gap-2">
 83 |           <Button variant="outline" size="sm">
 84 |             <Calendar className="mr-2 h-4 w-4" />
 85 |             Last 30 Days
 86 |           </Button>
 87 |           <Button variant="outline" size="sm">
 88 |             <Download className="mr-2 h-4 w-4" />
 89 |             Export
 90 |           </Button>
 91 |         </div>
 92 |       </div>
 93 | 
 94 |       {/* Stats Row */}
 95 |       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
 96 |         <Card className="backdrop-blur-sm bg-white/5 dark:bg-black/5 border-white/10">
 97 |           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
 98 |             <CardTitle className="text-sm font-medium">Total Users</CardTitle>
 99 |             <div className="h-4 w-4 text-purple-600">
100 |               <BadgePlus className="h-4 w-4" />
101 |             </div>
102 |           </CardHeader>
103 |           <CardContent>
104 |             <div className="text-2xl font-bold">12,548</div>
105 |             <p className="text-xs flex items-center text-green-500">
106 |               <ArrowUp className="mr-1 h-3 w-3" />
107 |               12.5% from last month
108 |             </p>
109 |           </CardContent>
110 |         </Card>
111 |         <Card className="backdrop-blur-sm bg-white/5 dark:bg-black/5 border-white/10">
112 |           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
113 |             <CardTitle className="text-sm font-medium">Revenue</CardTitle>
114 |             <div className="h-4 w-4 text-yellow-500">
115 |               <BarChart className="h-4 w-4" />
116 |             </div>
117 |           </CardHeader>
118 |           <CardContent>
119 |             <div className="text-2xl font-bold">$25,432</div>
120 |             <p className="text-xs flex items-center text-green-500">
121 |               <ArrowUp className="mr-1 h-3 w-3" />
122 |               8.2% from last month
123 |             </p>
124 |           </CardContent>
125 |         </Card>
126 |         <Card className="backdrop-blur-sm bg-white/5 dark:bg-black/5 border-white/10">
127 |           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
128 |             <CardTitle className="text-sm font-medium">Conversion Rate</CardTitle>
129 |             <div className="h-4 w-4 text-emerald-500">
130 |               <ArrowUpRight className="h-4 w-4" />
131 |             </div>
132 |           </CardHeader>
133 |           <CardContent>
134 |             <div className="text-2xl font-bold">3.6%</div>
135 |             <p className="text-xs flex items-center text-green-500">
136 |               <ArrowUp className="mr-1 h-3 w-3" />
137 |               1.2% from last month
138 |             </p>
139 |           </CardContent>
140 |         </Card>
141 |         <Card className="backdrop-blur-sm bg-white/5 dark:bg-black/5 border-white/10">
142 |           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
143 |             <CardTitle className="text-sm font-medium">Avg. Session Duration</CardTitle>
144 |             <div className="h-4 w-4 text-blue-500">
145 |               <BarChart2 className="h-4 w-4" />
146 |             </div>
147 |           </CardHeader>
148 |           <CardContent>
149 |             <div className="text-2xl font-bold">2m 45s</div>
150 |             <p className="text-xs flex items-center text-red-500">
151 |               <ArrowDown className="mr-1 h-3 w-3" />
152 |               0.5% from last month
153 |             </p>
154 |           </CardContent>
155 |         </Card>
156 |       </div>
157 | 
158 |       {/* Period selector tabs */}
159 |       <Tabs defaultValue="monthly" className="w-full">
160 |         <TabsList className="mb-6 bg-white/10 dark:bg-black/10 backdrop-blur-sm">
161 |           <TabsTrigger value="daily">Daily</TabsTrigger>
162 |           <TabsTrigger value="weekly">Weekly</TabsTrigger>
163 |           <TabsTrigger value="monthly">Monthly</TabsTrigger>
164 |           <TabsTrigger value="yearly">Yearly</TabsTrigger>
165 |         </TabsList>
166 |         
167 |         <TabsContent value="monthly" className="space-y-6">
168 |           {/* Main Charts */}
169 |           <div className="grid gap-6 md:grid-cols-2">
170 |             <AreaChartComponent 
171 |               title="Monthly Visitors"
172 |               description="Showing website traffic over the last 6 months"
173 |               data={visitorData}
174 |             />
175 |             <LineChartComponent
176 |               title="Traffic Analytics"
177 |               description="Website performance metrics"
178 |               data={trafficData}
179 |               series={trafficSeries}
180 |             />
181 |             <BarChartComponent
182 |               title="Device Usage"
183 |               description="Monthly device usage distribution"
184 |               data={deviceData}
185 |               categories={deviceCategories}
186 |             />
187 |             <PieChartComponent 
188 |               title="Project Distribution"
189 |               description="Current project type allocation"
190 |               data={projectData}
191 |               donut={true}
192 |               totalText="100"
193 |             />
194 |           </div>
195 |           
196 |           {/* Revenue chart (full width) */}
197 |           <Card className="backdrop-blur-sm bg-white/5 dark:bg-black/5 border-white/10">
198 |             <CardHeader>
199 |               <CardTitle>Revenue Overview</CardTitle>
200 |               <CardDescription>
201 |                 Total monthly revenue with year-over-year comparison
202 |               </CardDescription>
203 |             </CardHeader>
204 |             <CardContent>
205 |               <div className="h-[300px]">
206 |                 <AreaChartComponent 
207 |                   title=""
208 |                   description=""
209 |                   data={revenueData}
210 |                 />
211 |               </div>
212 |             </CardContent>
213 |           </Card>
214 |         </TabsContent>
215 |         
216 |         <TabsContent value="daily" className="space-y-6">
217 |           <Card className="backdrop-blur-sm bg-white/5 dark:bg-black/5 border-white/10">
218 |             <CardHeader>
219 |               <CardTitle>Daily Analytics</CardTitle>
220 |               <CardDescription>Select a different period to view data</CardDescription>
221 |             </CardHeader>
222 |             <CardContent className="h-[400px] flex items-center justify-center">
223 |               <p className="text-muted-foreground">Daily analytics data will appear here</p>
224 |             </CardContent>
225 |           </Card>
226 |         </TabsContent>
227 |         
228 |         <TabsContent value="weekly" className="space-y-6">
229 |           <Card className="backdrop-blur-sm bg-white/5 dark:bg-black/5 border-white/10">
230 |             <CardHeader>
231 |               <CardTitle>Weekly Analytics</CardTitle>
232 |               <CardDescription>Select a different period to view data</CardDescription>
233 |             </CardHeader>
234 |             <CardContent className="h-[400px] flex items-center justify-center">
235 |               <p className="text-muted-foreground">Weekly analytics data will appear here</p>
236 |             </CardContent>
237 |           </Card>
238 |         </TabsContent>
239 |         
240 |         <TabsContent value="yearly" className="space-y-6">
241 |           <Card className="backdrop-blur-sm bg-white/5 dark:bg-black/5 border-white/10">
242 |             <CardHeader>
243 |               <CardTitle>Yearly Analytics</CardTitle>
244 |               <CardDescription>Select a different period to view data</CardDescription>
245 |             </CardHeader>
246 |             <CardContent className="h-[400px] flex items-center justify-center">
247 |               <p className="text-muted-foreground">Yearly analytics data will appear here</p>
248 |             </CardContent>
249 |           </Card>
250 |         </TabsContent>
251 |       </Tabs>
252 |     </div>
253 |   );
254 | } 


--------------------------------------------------------------------------------
/src/app/settings/page.tsx:
--------------------------------------------------------------------------------
  1 | import { auth, currentUser } from "@clerk/nextjs/server";
  2 | import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
  3 | import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
  4 | import { Input } from "@/components/ui/input";
  5 | import { Label } from "@/components/ui/label";
  6 | import { Button } from "@/components/ui/button";
  7 | import { Switch } from "@/components/ui/switch";
  8 | import { Save, User, Bell, Lock, Shield, Globe, MonitorSmartphone, Mail } from "lucide-react";
  9 | 
 10 | export default async function SettingsPage() {
 11 |   const session = await auth();
 12 |   const user = await currentUser();
 13 |   const userName = user?.firstName || user?.username || "User";
 14 | 
 15 |   return (
 16 |     <div className="max-w-[1400px] w-full mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-8">
 17 |       <div className="flex flex-col gap-2">
 18 |         <h1 className="text-3xl font-bold tracking-tight">Settings</h1>
 19 |         <p className="text-muted-foreground">
 20 |           Manage your account settings and preferences
 21 |         </p>
 22 |       </div>
 23 | 
 24 |       <Tabs defaultValue="profile" className="w-full">
 25 |         <div className="flex flex-col md:flex-row gap-6">
 26 |           <div className="md:w-1/4">
 27 |             <TabsList className="flex flex-col h-auto bg-white/5 dark:bg-black/5 backdrop-blur-sm p-1 rounded-lg">
 28 |               <TabsTrigger value="profile" className="w-full justify-start text-left py-3 px-4">
 29 |                 <User className="h-4 w-4 mr-2" />
 30 |                 Profile
 31 |               </TabsTrigger>
 32 |               <TabsTrigger value="account" className="w-full justify-start text-left py-3 px-4">
 33 |                 <Lock className="h-4 w-4 mr-2" />
 34 |                 Account
 35 |               </TabsTrigger>
 36 |               <TabsTrigger value="notifications" className="w-full justify-start text-left py-3 px-4">
 37 |                 <Bell className="h-4 w-4 mr-2" />
 38 |                 Notifications
 39 |               </TabsTrigger>
 40 |               <TabsTrigger value="security" className="w-full justify-start text-left py-3 px-4">
 41 |                 <Shield className="h-4 w-4 mr-2" />
 42 |                 Security
 43 |               </TabsTrigger>
 44 |               <TabsTrigger value="appearance" className="w-full justify-start text-left py-3 px-4">
 45 |                 <MonitorSmartphone className="h-4 w-4 mr-2" />
 46 |                 Appearance
 47 |               </TabsTrigger>
 48 |             </TabsList>
 49 |           </div>
 50 |           
 51 |           <div className="flex-1">
 52 |             <TabsContent value="profile" className="mt-0">
 53 |               <Card className="backdrop-blur-sm bg-white/5 dark:bg-black/5 border-white/10">
 54 |                 <CardHeader>
 55 |                   <CardTitle>Profile Information</CardTitle>
 56 |                   <CardDescription>
 57 |                     Update your profile information and how it appears to others
 58 |                   </CardDescription>
 59 |                 </CardHeader>
 60 |                 <CardContent className="space-y-6">
 61 |                   <div className="space-y-4">
 62 |                     <div className="grid gap-2">
 63 |                       <Label htmlFor="name">Full Name</Label>
 64 |                       <Input id="name" placeholder="Yuval Avidani" />
 65 |                     </div>
 66 |                     
 67 |                     <div className="grid gap-2">
 68 |                       <Label htmlFor="username">Username</Label>
 69 |                       <Input id="username" placeholder="yuvalav" />
 70 |                     </div>
 71 |                     
 72 |                     <div className="grid gap-2">
 73 |                       <Label htmlFor="email">Email</Label>
 74 |                       <Input id="email" placeholder="yuval@yuv.ai" type="email" />
 75 |                     </div>
 76 |                     
 77 |                     <div className="grid gap-2">
 78 |                       <Label htmlFor="bio">Bio</Label>
 79 |                       <textarea 
 80 |                         id="bio" 
 81 |                         className="flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
 82 |                         placeholder="AI Builder & Speaker | Making technical content accessible in non-technical ways"
 83 |                       />
 84 |                     </div>
 85 |                   </div>
 86 |                 </CardContent>
 87 |                 <CardFooter className="border-t border-border/40 pt-6 flex justify-between">
 88 |                   <Button variant="outline">Cancel</Button>
 89 |                   <Button>
 90 |                     <Save className="h-4 w-4 mr-2" />
 91 |                     Save Changes
 92 |                   </Button>
 93 |                 </CardFooter>
 94 |               </Card>
 95 |             </TabsContent>
 96 |             
 97 |             <TabsContent value="account" className="mt-0">
 98 |               <Card className="backdrop-blur-sm bg-white/5 dark:bg-black/5 border-white/10">
 99 |                 <CardHeader>
100 |                   <CardTitle>Account Settings</CardTitle>
101 |                   <CardDescription>
102 |                     Update your account settings
103 |                   </CardDescription>
104 |                 </CardHeader>
105 |                 <CardContent className="space-y-6">
106 |                   <div className="space-y-4">
107 |                     <div className="grid gap-2">
108 |                       <Label htmlFor="current-password">Current Password</Label>
109 |                       <Input id="current-password" type="password" />
110 |                     </div>
111 |                     
112 |                     <div className="grid gap-2">
113 |                       <Label htmlFor="new-password">New Password</Label>
114 |                       <Input id="new-password" type="password" />
115 |                     </div>
116 |                     
117 |                     <div className="grid gap-2">
118 |                       <Label htmlFor="confirm-password">Confirm New Password</Label>
119 |                       <Input id="confirm-password" type="password" />
120 |                     </div>
121 |                   </div>
122 |                 </CardContent>
123 |                 <CardFooter className="border-t border-border/40 pt-6 flex justify-between">
124 |                   <Button variant="outline">Cancel</Button>
125 |                   <Button>
126 |                     <Save className="h-4 w-4 mr-2" />
127 |                     Update Password
128 |                   </Button>
129 |                 </CardFooter>
130 |               </Card>
131 |             </TabsContent>
132 |             
133 |             <TabsContent value="notifications" className="mt-0">
134 |               <Card className="backdrop-blur-sm bg-white/5 dark:bg-black/5 border-white/10">
135 |                 <CardHeader>
136 |                   <CardTitle>Notification Settings</CardTitle>
137 |                   <CardDescription>
138 |                     Configure how and when you receive notifications
139 |                   </CardDescription>
140 |                 </CardHeader>
141 |                 <CardContent className="space-y-6">
142 |                   <div className="space-y-4">
143 |                     <div className="flex items-center justify-between">
144 |                       <div className="space-y-0.5">
145 |                         <Label htmlFor="email-notifications">Email Notifications</Label>
146 |                         <p className="text-sm text-muted-foreground">
147 |                           Receive notifications via email
148 |                         </p>
149 |                       </div>
150 |                       <Switch id="email-notifications" defaultChecked />
151 |                     </div>
152 |                     
153 |                     <div className="flex items-center justify-between">
154 |                       <div className="space-y-0.5">
155 |                         <Label htmlFor="marketing-emails">Marketing Emails</Label>
156 |                         <p className="text-sm text-muted-foreground">
157 |                           Receive emails about new features and offers
158 |                         </p>
159 |                       </div>
160 |                       <Switch id="marketing-emails" />
161 |                     </div>
162 |                     
163 |                     <div className="flex items-center justify-between">
164 |                       <div className="space-y-0.5">
165 |                         <Label htmlFor="activity-updates">Activity Updates</Label>
166 |                         <p className="text-sm text-muted-foreground">
167 |                           Receive notifications about activity on your projects
168 |                         </p>
169 |                       </div>
170 |                       <Switch id="activity-updates" defaultChecked />
171 |                     </div>
172 |                   </div>
173 |                 </CardContent>
174 |                 <CardFooter className="border-t border-border/40 pt-6 flex justify-between">
175 |                   <Button variant="outline">Reset to Default</Button>
176 |                   <Button>
177 |                     <Save className="h-4 w-4 mr-2" />
178 |                     Save Preferences
179 |                   </Button>
180 |                 </CardFooter>
181 |               </Card>
182 |             </TabsContent>
183 |             
184 |             <TabsContent value="security" className="mt-0">
185 |               <Card className="backdrop-blur-sm bg-white/5 dark:bg-black/5 border-white/10">
186 |                 <CardHeader>
187 |                   <CardTitle>Security Settings</CardTitle>
188 |                   <CardDescription>
189 |                     Manage your security preferences and two-factor authentication
190 |                   </CardDescription>
191 |                 </CardHeader>
192 |                 <CardContent className="space-y-6">
193 |                   <div className="space-y-4">
194 |                     <div className="flex items-center justify-between">
195 |                       <div className="space-y-0.5">
196 |                         <Label htmlFor="two-factor">Two-Factor Authentication</Label>
197 |                         <p className="text-sm text-muted-foreground">
198 |                           Add an extra layer of security to your account
199 |                         </p>
200 |                       </div>
201 |                       <Switch id="two-factor" />
202 |                     </div>
203 |                     
204 |                     <div className="flex items-center justify-between">
205 |                       <div className="space-y-0.5">
206 |                         <Label htmlFor="session-timeout">Session Timeout</Label>
207 |                         <p className="text-sm text-muted-foreground">
208 |                           Automatically log out after period of inactivity
209 |                         </p>
210 |                       </div>
211 |                       <Switch id="session-timeout" defaultChecked />
212 |                     </div>
213 |                   </div>
214 |                 </CardContent>
215 |                 <CardFooter className="border-t border-border/40 pt-6 flex justify-between">
216 |                   <Button variant="outline">Reset to Default</Button>
217 |                   <Button>
218 |                     <Save className="h-4 w-4 mr-2" />
219 |                     Save Settings
220 |                   </Button>
221 |                 </CardFooter>
222 |               </Card>
223 |             </TabsContent>
224 |             
225 |             <TabsContent value="appearance" className="mt-0">
226 |               <Card className="backdrop-blur-sm bg-white/5 dark:bg-black/5 border-white/10">
227 |                 <CardHeader>
228 |                   <CardTitle>Appearance Settings</CardTitle>
229 |                   <CardDescription>
230 |                     Customize how the dashboard looks and feels
231 |                   </CardDescription>
232 |                 </CardHeader>
233 |                 <CardContent className="space-y-6">
234 |                   <div className="space-y-4">
235 |                     <div className="flex items-center justify-between">
236 |                       <div className="space-y-0.5">
237 |                         <Label htmlFor="dark-mode">Color Theme</Label>
238 |                         <p className="text-sm text-muted-foreground">
239 |                           Choose between light, dark, or system theme
240 |                         </p>
241 |                       </div>
242 |                       <select 
243 |                         id="dark-mode" 
244 |                         className="flex h-9 w-40 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
245 |                       >
246 |                         <option value="light">Light</option>
247 |                         <option value="dark">Dark</option>
248 |                         <option value="system" selected>System</option>
249 |                       </select>
250 |                     </div>
251 |                     
252 |                     <div className="flex items-center justify-between">
253 |                       <div className="space-y-0.5">
254 |                         <Label htmlFor="reduced-motion">Reduced Motion</Label>
255 |                         <p className="text-sm text-muted-foreground">
256 |                           Reduce animation and motion effects
257 |                         </p>
258 |                       </div>
259 |                       <Switch id="reduced-motion" />
260 |                     </div>
261 |                     
262 |                     <div className="flex items-center justify-between">
263 |                       <div className="space-y-0.5">
264 |                         <Label htmlFor="compact-view">Compact View</Label>
265 |                         <p className="text-sm text-muted-foreground">
266 |                           Display more content with less spacing
267 |                         </p>
268 |                       </div>
269 |                       <Switch id="compact-view" />
270 |                     </div>
271 |                   </div>
272 |                 </CardContent>
273 |                 <CardFooter className="border-t border-border/40 pt-6 flex justify-between">
274 |                   <Button variant="outline">Reset to Default</Button>
275 |                   <Button>
276 |                     <Save className="h-4 w-4 mr-2" />
277 |                     Save Preferences
278 |                   </Button>
279 |                 </CardFooter>
280 |               </Card>
281 |             </TabsContent>
282 |           </div>
283 |         </div>
284 |       </Tabs>
285 |     </div>
286 |   );
287 | } 


--------------------------------------------------------------------------------
/src/app/dashboard/page.tsx:
--------------------------------------------------------------------------------
  1 | import { Activity, CheckCircle, Layers, Users } from "lucide-react";
  2 | import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
  3 | import Link from "next/link";
  4 | import { auth, currentUser } from "@clerk/nextjs/server";
  5 | import { Button } from "@/components/ui/button";
  6 | import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
  7 | import { CheckCircle2, ArrowRight, Globe, BookOpen, Webhook, Cpu, PieChart, Users2, Rocket, Building2, CalendarClock, Award } from "lucide-react";
  8 | import Image from "next/image";
  9 | import { AreaChartComponent } from "@/components/charts/area-chart";
 10 | import { PieChartComponent } from "@/components/charts/pie-chart";
 11 | import { BarChartComponent } from "@/components/charts/bar-chart";
 12 | import { LineChartComponent } from "@/components/charts/line-chart";
 13 | 
 14 | // Sample data for charts
 15 | const areaChartData = [
 16 |   { name: "Jan", value: 2500, previousValue: 2200 },
 17 |   { name: "Feb", value: 3000, previousValue: 2800 },
 18 |   { name: "Mar", value: 2800, previousValue: 2600 },
 19 |   { name: "Apr", value: 3200, previousValue: 2900 },
 20 |   { name: "May", value: 3800, previousValue: 3200 },
 21 |   { name: "Jun", value: 4200, previousValue: 3500 },
 22 | ];
 23 | 
 24 | const pieChartData = [
 25 |   { name: "Web App", value: 35 },
 26 |   { name: "Mobile App", value: 25 },
 27 |   { name: "Landing Page", value: 20 },
 28 |   { name: "Dashboard", value: 15 },
 29 |   { name: "Others", value: 5 },
 30 | ];
 31 | 
 32 | const barChartData = [
 33 |   { name: "Jan", desktop: 1500, mobile: 900, tablet: 500 },
 34 |   { name: "Feb", desktop: 2000, mobile: 1200, tablet: 600 },
 35 |   { name: "Mar", desktop: 1800, mobile: 1400, tablet: 550 },
 36 |   { name: "Apr", desktop: 2400, mobile: 1800, tablet: 700 },
 37 |   { name: "May", desktop: 2800, mobile: 2100, tablet: 900 },
 38 |   { name: "Jun", desktop: 3200, mobile: 2400, tablet: 1100 },
 39 | ];
 40 | 
 41 | const barChartCategories = [
 42 |   { name: "Desktop", key: "desktop", color: "#d8b4fe", darkColor: "#c084fc" },
 43 |   { name: "Mobile", key: "mobile", color: "#fef9c3", darkColor: "#fef08a" },
 44 |   { name: "Tablet", key: "tablet", color: "#bfdbfe", darkColor: "#93c5fd" },
 45 | ];
 46 | 
 47 | const lineChartData = [
 48 |   { name: "Jan", visitors: 2500, conversions: 150, bounces: 1800 },
 49 |   { name: "Feb", visitors: 3000, conversions: 210, bounces: 2100 },
 50 |   { name: "Mar", visitors: 2800, conversions: 180, bounces: 2000 },
 51 |   { name: "Apr", visitors: 3200, conversions: 240, bounces: 2300 },
 52 |   { name: "May", visitors: 3800, conversions: 320, bounces: 2500 },
 53 |   { name: "Jun", visitors: 4200, conversions: 380, bounces: 2700 },
 54 | ];
 55 | 
 56 | const lineChartSeries = [
 57 |   { name: "Visitors", key: "visitors", color: "#d8b4fe", darkColor: "#c084fc" },
 58 |   { name: "Conversions", key: "conversions", color: "#bbf7d0", darkColor: "#86efac" },
 59 |   { name: "Bounces", key: "bounces", color: "#fda4af", darkColor: "#fb7185" },
 60 | ];
 61 | 
 62 | export default async function DashboardPage() {
 63 |   const session = await auth();
 64 |   const user = await currentUser();
 65 |   const userName = user?.firstName || user?.username || "User";
 66 | 
 67 |   return (
 68 |     <div className="max-w-[1400px] w-full mx-auto px-4 sm:px-6 lg:px-8 py-6 pb-10">
 69 |       <div className="flex flex-col md:flex-row gap-4 md:items-center md:justify-between mb-8">
 70 |         <div>
 71 |           <h1 className="text-3xl font-bold tracking-tight">Welcome back, {userName}</h1>
 72 |           <p className="text-muted-foreground">
 73 |             Here's what's happening with your projects today.
 74 |           </p>
 75 |         </div>
 76 |         <div className="flex items-center gap-2">
 77 |           <Button variant="outline" size="sm">
 78 |             View Reports
 79 |           </Button>
 80 |           <Button size="sm">
 81 |             Create Project
 82 |           </Button>
 83 |         </div>
 84 |       </div>
 85 | 
 86 |       <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
 87 |         <Card>
 88 |           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
 89 |             <CardTitle className="text-sm font-medium">Total Projects</CardTitle>
 90 |             <Webhook className="h-4 w-4 text-muted-foreground" />
 91 |           </CardHeader>
 92 |           <CardContent>
 93 |             <div className="text-2xl font-bold">12</div>
 94 |             <p className="text-xs text-muted-foreground">
 95 |               +2 from last month
 96 |             </p>
 97 |           </CardContent>
 98 |         </Card>
 99 |         <Card>
100 |           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
101 |             <CardTitle className="text-sm font-medium">Active Users</CardTitle>
102 |             <Users2 className="h-4 w-4 text-muted-foreground" />
103 |           </CardHeader>
104 |           <CardContent>
105 |             <div className="text-2xl font-bold">+573</div>
106 |             <p className="text-xs text-muted-foreground">
107 |               +18.2% from last month
108 |             </p>
109 |           </CardContent>
110 |         </Card>
111 |         <Card>
112 |           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
113 |             <CardTitle className="text-sm font-medium">Processing Time</CardTitle>
114 |             <Cpu className="h-4 w-4 text-muted-foreground" />
115 |           </CardHeader>
116 |           <CardContent>
117 |             <div className="text-2xl font-bold">0.82s</div>
118 |             <p className="text-xs text-muted-foreground">
119 |               -12% from last month
120 |             </p>
121 |           </CardContent>
122 |         </Card>
123 |         <Card>
124 |           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
125 |             <CardTitle className="text-sm font-medium">Active Sessions</CardTitle>
126 |             <PieChart className="h-4 w-4 text-muted-foreground" />
127 |           </CardHeader>
128 |           <CardContent>
129 |             <div className="text-2xl font-bold">237</div>
130 |             <p className="text-xs text-muted-foreground">
131 |               +42 from last hour
132 |             </p>
133 |           </CardContent>
134 |         </Card>
135 |       </div>
136 | 
137 |       {/* Charts Section */}
138 |       <div className="grid gap-6 md:grid-cols-2">
139 |         <AreaChartComponent 
140 |           title="Monthly Visitors"
141 |           description="Showing website traffic over the last 6 months"
142 |           data={areaChartData}
143 |         />
144 |         <PieChartComponent 
145 |           title="Project Distribution"
146 |           description="Current project type allocation"
147 |           data={pieChartData}
148 |           donut={true}
149 |           totalText="100"
150 |         />
151 |         <BarChartComponent
152 |           title="Device Usage"
153 |           description="Monthly device usage distribution"
154 |           data={barChartData}
155 |           categories={barChartCategories}
156 |         />
157 |         <LineChartComponent
158 |           title="Traffic Analytics"
159 |           description="Website performance metrics"
160 |           data={lineChartData}
161 |           series={lineChartSeries}
162 |         />
163 |       </div>
164 | 
165 |       {/* Biography Section */}
166 |       <Card className="overflow-hidden">
167 |         <CardHeader className="bg-gradient-to-r from-purple-600/10 to-yellow-400/10 pb-8">
168 |           <div className="flex flex-col md:flex-row gap-6 items-center md:items-start">
169 |             <Avatar className="h-24 w-24 border-4 border-white dark:border-gray-900 shadow-lg">
170 |               <AvatarImage src="https://picsum.photos/id/1005/200" alt="Yuval Avidani" />
171 |               <AvatarFallback className="text-2xl bg-purple-600 text-white">YA</AvatarFallback>
172 |             </Avatar>
173 |             <div>
174 |               <div className="flex items-center gap-2 mb-2">
175 |                 <h2 className="text-2xl font-bold">Yuval Avidani</h2>
176 |                 <span className="bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300 text-xs px-2 py-1 rounded-full flex items-center gap-1">
177 |                   <Globe className="h-3 w-3" /> 
178 |                   <span>AI Builder & Speaker</span>
179 |                 </span>
180 |               </div>
181 |               <p className="text-sm text-muted-foreground max-w-2xl">
182 |                 AI Builder & Speaker | Making technical content accessible in non-technical ways
183 |               </p>
184 |               <div className="flex flex-wrap gap-2 mt-3">
185 |                 <Link href="https://linktr.ee/yuvai" target="_blank">
186 |                   <Button variant="outline" size="sm" className="h-8">
187 |                     Linktree
188 |                     <ArrowRight className="ml-1 h-3 w-3" />
189 |                   </Button>
190 |                 </Link>
191 |                 <Link href="https://x.com/yuvalav" target="_blank">
192 |                   <Button variant="outline" size="sm" className="h-8">
193 |                     @yuvalav
194 |                   </Button>
195 |                 </Link>
196 |                 <Link href="https://instagram.com/yuval_770" target="_blank">
197 |                   <Button variant="outline" size="sm" className="h-8">
198 |                     @yuval_770
199 |                   </Button>
200 |                 </Link>
201 |                 <Link href="https://yuv.ai" target="_blank">
202 |                   <Button variant="outline" size="sm" className="h-8">
203 |                     yuv.ai
204 |                   </Button>
205 |                 </Link>
206 |               </div>
207 |             </div>
208 |           </div>
209 |         </CardHeader>
210 |         <CardContent className="p-6">
211 |           <div className="grid gap-6 md:grid-cols-2">
212 |             <div className="space-y-4">
213 |               <h3 className="text-xl font-semibold flex items-center gap-2">
214 |                 <BookOpen className="h-5 w-5 text-purple-600" />
215 |                 About Yuval
216 |               </h3>
217 |               <div className="text-sm text-muted-foreground space-y-3">
218 |                 <p>
219 |                   Yuval Avidani is a technology expert who makes technical content accessible in the most non-technical way possible. 
220 |                   Currently working as an independent AI Builder & Speaker, focused on sharing knowledge and insights about AI technologies.
221 |                 </p>
222 |                 <p>
223 |                   Over the past 15 years, he has worked in a wide variety of roles across all sectors (private, public, business). 
224 |                   His diverse experience includes positions as a mobile phone technician, technical expert, information systems implementation and training team leader, 
225 |                   Knesset visits coordinator, SAP systems implementer, digital manager, digital marketing and advertising, spokesmanship and public relations, 
226 |                   cybersecurity and information security, hacking, research, development, content creation, technical instructional video recording, 
227 |                   community founder, lecturer, advisor, and innovation magazine writer.
228 |                 </p>
229 |                 <p>
230 |                   He's passionate about learning and sharing knowledge, especially in AI technologies. In the last two years, he's been drawn deeper into the AI world, 
231 |                   writing articles and sharing his learning process, covering new tools, the inner workings of technology, LangChain, Flowise, AI agents with Officely, 
232 |                   bots with Uchat, API connections, integrating large language models into existing developments, DeepFakes, voice modeling, automations, and much more.
233 |                 </p>
234 |               </div>
235 |             </div>
236 |             <div className="space-y-4">
237 |               <h3 className="text-xl font-semibold flex items-center gap-2">
238 |                 <Award className="h-5 w-5 text-yellow-500" />
239 |                 Experience & Education
240 |               </h3>
241 |               <div className="space-y-3">
242 |                 <div className="flex gap-3">
243 |                   <div className="min-w-8 h-8 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center">
244 |                     <Building2 className="h-4 w-4 text-purple-600" />
245 |                   </div>
246 |                   <div className="text-sm">
247 |                     <p className="font-medium">AI Builder & Speaker</p>
248 |                     <p className="text-muted-foreground">Independent</p>
249 |                     <p className="text-xs text-muted-foreground">Current</p>
250 |                   </div>
251 |                 </div>
252 |                 <div className="flex gap-3">
253 |                   <div className="min-w-8 h-8 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center">
254 |                     <CalendarClock className="h-4 w-4 text-purple-600" />
255 |                   </div>
256 |                   <div className="text-sm">
257 |                     <p className="font-medium">Multiple Technical & Leadership Roles</p>
258 |                     <p className="text-muted-foreground">Various Organizations</p>
259 |                     <p className="text-xs text-muted-foreground">15+ years of experience</p>
260 |                   </div>
261 |                 </div>
262 |                 <div className="flex gap-3">
263 |                   <div className="min-w-8 h-8 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center">
264 |                     <Rocket className="h-4 w-4 text-purple-600" />
265 |                   </div>
266 |                   <div className="text-sm">
267 |                     <p className="font-medium">Podcast Host & Content Creator</p>
268 |                     <p className="text-muted-foreground">AI & Technology Focus</p>
269 |                     <p className="text-xs text-muted-foreground">Two podcasts & educational content</p>
270 |                   </div>
271 |                 </div>
272 |               </div>
273 |               <div className="mt-6 text-sm">
274 |                 <p className="italic text-muted-foreground">
275 |                   "My most important message is don't try to fit into a mold that doesn't suit you. Let yourself flourish, engage with what tempts you, 
276 |                   what creates endless curiosity in you, even if you change fields, you will develop and accumulate a vast store of knowledge that will 
277 |                   serve you when the time comes."
278 |                 </p>
279 |                 <p className="mt-3 font-medium text-center text-yellow-500">
280 |                   "Fly High With YUV.AI"
281 |                 </p>
282 |               </div>
283 |             </div>
284 |           </div>
285 |         </CardContent>
286 |       </Card>
287 | 
288 |       <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
289 |         <Card className="lg:col-span-4">
290 |           <CardHeader>
291 |             <CardTitle>Recent Projects</CardTitle>
292 |             <CardDescription>
293 |               You have 12 projects and 3 have activity today.
294 |             </CardDescription>
295 |           </CardHeader>
296 |           <CardContent className="space-y-4">
297 |             <div className="flex items-center gap-4">
298 |               <div className="rounded-md bg-gradient-to-br from-blue-100 to-indigo-100 dark:from-blue-900/20 dark:to-indigo-900/20 p-2">
299 |                 <Webhook className="h-5 w-5 text-blue-700 dark:text-blue-400" />
300 |               </div>
301 |               <div className="flex-1 space-y-1">
302 |                 <p className="text-sm font-medium leading-none">
303 |                   AI Content Generator
304 |                 </p>
305 |                 <p className="text-xs text-muted-foreground">
306 |                   Updated 2h ago
307 |                 </p>
308 |               </div>
309 |               <div className="flex items-center gap-2">
310 |                 <Avatar className="h-7 w-7">
311 |                   <AvatarFallback className="text-xs">JD</AvatarFallback>
312 |                 </Avatar>
313 |                 <CheckCircle2 className="h-4 w-4 text-emerald-500" />
314 |               </div>
315 |             </div>
316 |             <div className="flex items-center gap-4">
317 |               <div className="rounded-md bg-gradient-to-br from-purple-100 to-indigo-100 dark:from-purple-900/20 dark:to-indigo-900/20 p-2">
318 |                 <Globe className="h-5 w-5 text-purple-700 dark:text-purple-400" />
319 |               </div>
320 |               <div className="flex-1 space-y-1">
321 |                 <p className="text-sm font-medium leading-none">
322 |                   Translation Dashboard
323 |                 </p>
324 |                 <p className="text-xs text-muted-foreground">
325 |                   Updated 5h ago
326 |                 </p>
327 |               </div>
328 |               <div className="flex items-center gap-2">
329 |                 <Avatar className="h-7 w-7">
330 |                   <AvatarFallback className="text-xs">ML</AvatarFallback>
331 |                 </Avatar>
332 |                 <CheckCircle2 className="h-4 w-4 text-emerald-500" />
333 |               </div>
334 |             </div>
335 |             <div className="flex items-center gap-4">
336 |               <div className="rounded-md bg-gradient-to-br from-green-100 to-emerald-100 dark:from-green-900/20 dark:to-emerald-900/20 p-2">
337 |                 <Cpu className="h-5 w-5 text-green-700 dark:text-green-400" />
338 |               </div>
339 |               <div className="flex-1 space-y-1">
340 |                 <p className="text-sm font-medium leading-none">
341 |                   Machine Learning Pipeline
342 |                 </p>
343 |                 <p className="text-xs text-muted-foreground">
344 |                   Updated 1d ago
345 |                 </p>
346 |               </div>
347 |               <div className="flex items-center gap-2">
348 |                 <Avatar className="h-7 w-7">
349 |                   <AvatarFallback className="text-xs">YA</AvatarFallback>
350 |                 </Avatar>
351 |                 <CheckCircle2 className="h-4 w-4 text-emerald-500" />
352 |               </div>
353 |             </div>
354 |           </CardContent>
355 |           <CardFooter>
356 |             <Button variant="ghost" className="w-full" size="sm">
357 |               View All Projects
358 |               <ArrowRight className="ml-2 h-4 w-4" />
359 |             </Button>
360 |           </CardFooter>
361 |         </Card>
362 |         <Card className="lg:col-span-3">
363 |           <CardHeader>
364 |             <CardTitle>Latest Activity</CardTitle>
365 |             <CardDescription>
366 |               Recent activities from your team members.
367 |             </CardDescription>
368 |           </CardHeader>
369 |           <CardContent className="space-y-4 max-h-[250px] overflow-auto">
370 |             {[1, 2, 3, 4, 5].map((i) => (
371 |               <div key={i} className="flex items-start gap-4 pb-4 last:pb-0 last:border-0 border-b">
372 |                 <Avatar className="h-9 w-9">
373 |                   <AvatarImage src={`https://picsum.photos/id/${30 + i}/40`} alt="User" />
374 |                   <AvatarFallback>U{i}</AvatarFallback>
375 |                 </Avatar>
376 |                 <div className="flex-1 space-y-1">
377 |                   <p className="text-sm font-medium leading-none">
378 |                     User {i} added a new comment
379 |                   </p>
380 |                   <p className="text-xs text-muted-foreground">
381 |                     {i === 1 ? "Just now" : i === 2 ? "5m ago" : i === 3 ? "3h ago" : i === 4 ? "Yesterday" : "2d ago"}
382 |                   </p>
383 |                 </div>
384 |               </div>
385 |             ))}
386 |           </CardContent>
387 |           <CardFooter>
388 |             <Button variant="ghost" className="w-full" size="sm">
389 |               View All Activity
390 |               <ArrowRight className="ml-2 h-4 w-4" />
391 |             </Button>
392 |           </CardFooter>
393 |         </Card>
394 |       </div>
395 |     </div>
396 |   );
397 | } 


--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
  1 | import Image from "next/image";
  2 | import Link from "next/link";
  3 | import { ArrowRight, Database, Lock, Sparkles, Code, Globe, Blocks } from "lucide-react";
  4 | import { Button } from "@/components/ui/button";
  5 | import { ThemeToggle } from "@/components/theme-toggle";
  6 | import { Header } from "@/components/header";
  7 | import { AreaChartComponent } from "@/components/charts/area-chart";
  8 | import { LineChartComponent } from "@/components/charts/line-chart";
  9 | 
 10 | // Sample data for charts
 11 | const areaChartData = [
 12 |   { name: "Jan", value: 1200, previousValue: 1000 },
 13 |   { name: "Feb", value: 1800, previousValue: 1400 },
 14 |   { name: "Mar", value: 2400, previousValue: 2000 },
 15 |   { name: "Apr", value: 3600, previousValue: 2800 },
 16 |   { name: "May", value: 4800, previousValue: 3600 },
 17 |   { name: "Jun", value: 5600, previousValue: 4200 },
 18 | ];
 19 | 
 20 | const lineChartData = [
 21 |   { name: "2018", users: 1200, projects: 80, revenue: 4000 },
 22 |   { name: "2019", users: 2400, projects: 120, revenue: 6000 },
 23 |   { name: "2020", users: 4000, projects: 180, revenue: 9000 },
 24 |   { name: "2021", users: 6500, projects: 250, revenue: 12000 },
 25 |   { name: "2022", users: 9800, projects: 350, revenue: 18000 },
 26 |   { name: "2023", users: 12500, projects: 450, revenue: 24000 },
 27 | ];
 28 | 
 29 | const lineChartSeries = [
 30 |   { name: "Users", key: "users", color: "#d8b4fe", darkColor: "#c084fc" },
 31 |   { name: "Projects", key: "projects", color: "#bbf7d0", darkColor: "#86efac" },
 32 |   { name: "Revenue", key: "revenue", color: "#a5f3fc", darkColor: "#67e8f9" },
 33 | ];
 34 | 
 35 | export default function Home() {
 36 |   return (
 37 |     <div className="min-h-screen flex flex-col relative overflow-hidden">
 38 |       {/* Background gradient */}
 39 |       <div className="absolute inset-0 bg-gradient-to-br from-purple-50 via-white to-yellow-50 dark:from-purple-950 dark:via-gray-900 dark:to-yellow-950 -z-10"></div>
 40 |       
 41 |       {/* Decorative elements */}
 42 |       <div className="absolute top-20 left-0 w-[300px] h-[300px] bg-purple-300/20 dark:bg-purple-700/10 rounded-full blur-3xl -z-5"></div>
 43 |       <div className="absolute bottom-0 right-0 w-[500px] h-[500px] bg-yellow-300/10 dark:bg-yellow-700/5 rounded-full blur-3xl -z-5"></div>
 44 |       <div className="absolute top-1/3 right-1/4 w-[200px] h-[200px] bg-purple-400/10 dark:bg-purple-600/5 rounded-full blur-2xl -z-5 animate-pulse"></div>
 45 |       
 46 |       <Header />
 47 | 
 48 |       <main className="flex-1 container mx-auto px-4 sm:px-6 py-8 sm:py-12 lg:py-16 flex flex-col justify-center">
 49 |         <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 items-center">
 50 |           <div className="space-y-6 text-center md:text-left">
 51 |             <div className="inline-block px-3 py-1 rounded-full bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300 text-xs font-medium mb-2">
 52 |               Next.js • Clerk • MongoDB
 53 |             </div>
 54 |             <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight">
 55 |               <span className="bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-yellow-400">
 56 |                 NCM Boilerplate
 57 |               </span>
 58 |               <br />by Yuval Avidani
 59 |             </h1>
 60 |             <p className="text-lg text-gray-600 dark:text-gray-300 max-w-xl mx-auto md:mx-0">
 61 |               The ultimate starter template combining <span className="font-semibold text-purple-600">Next.js 14</span>, 
 62 |               <span className="font-semibold text-purple-600"> Clerk</span> authentication, and 
 63 |               <span className="font-semibold text-purple-600"> MongoDB Atlas</span> for your next web project.
 64 |             </p>
 65 |             <div className="flex flex-wrap gap-2 mt-4 justify-center md:justify-start">
 66 |               <span className="px-2.5 py-0.5 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 text-xs font-medium">TypeScript</span>
 67 |               <span className="px-2.5 py-0.5 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 text-xs font-medium">TailwindCSS</span>
 68 |               <span className="px-2.5 py-0.5 rounded-full bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 text-xs font-medium">Responsive</span>
 69 |               <span className="px-2.5 py-0.5 rounded-full bg-orange-100 dark:bg-orange-900/30 text-orange-800 dark:text-orange-300 text-xs font-medium">ShadcnUI</span>
 70 |             </div>
 71 |             <div className="flex flex-col sm:flex-row gap-3 justify-center md:justify-start mt-8">
 72 |               <Link href="/sign-up">
 73 |                 <Button size="lg" className="w-full sm:w-auto bg-purple-600 hover:bg-purple-700 text-white shadow-md">
 74 |                   Get Started
 75 |                   <ArrowRight className="ml-2 h-4 w-4" />
 76 |                 </Button>
 77 |               </Link>
 78 |             </div>
 79 |           </div>
 80 |           <div className="flex justify-center md:justify-end">
 81 |             <div className="relative">
 82 |               <div className="relative h-[280px] w-[280px] sm:h-[350px] sm:w-[350px] backdrop-blur-lg rounded-2xl bg-white/30 dark:bg-gray-900/30 border border-white/50 dark:border-gray-700/50 flex items-center justify-center shadow-lg overflow-hidden transform rotate-3">
 83 |                 <Image 
 84 |                   src="https://picsum.photos/id/180/500/500" 
 85 |                   alt="Dashboard preview"
 86 |                   fill
 87 |                   className="object-cover opacity-90 hover:scale-105 transition-transform duration-500"
 88 |                 />
 89 |                 <div className="absolute inset-0 bg-gradient-to-tr from-purple-600/40 to-transparent"></div>
 90 |               </div>
 91 |               
 92 |               <div className="absolute -bottom-10 -left-10 h-[180px] w-[180px] backdrop-blur-lg rounded-2xl bg-white/30 dark:bg-gray-900/30 border border-white/50 dark:border-gray-700/50 shadow-lg overflow-hidden transform -rotate-6">
 93 |                 <Image 
 94 |                   src="https://picsum.photos/id/26/300/300" 
 95 |                   alt="Feature preview"
 96 |                   fill
 97 |                   className="object-cover opacity-90 hover:scale-105 transition-transform duration-500"
 98 |                 />
 99 |                 <div className="absolute inset-0 bg-gradient-to-bl from-yellow-400/30 to-transparent"></div>
100 |               </div>
101 |               
102 |               {/* Floating icons */}
103 |               <div className="absolute top-5 right-10 h-10 w-10 rounded-full bg-blue-500/80 flex items-center justify-center text-white shadow-lg z-10">
104 |                 <Code className="h-5 w-5" />
105 |               </div>
106 |               <div className="absolute top-1/2 -left-5 h-12 w-12 rounded-full bg-purple-600/90 flex items-center justify-center text-white shadow-lg z-10">
107 |                 <Lock className="h-6 w-6" />
108 |               </div>
109 |               <div className="absolute -bottom-4 left-1/3 h-10 w-10 rounded-full bg-green-500/80 flex items-center justify-center text-white shadow-lg z-10">
110 |                 <Database className="h-5 w-5" />
111 |               </div>
112 |             </div>
113 |           </div>
114 |         </div>
115 | 
116 |         {/* Charts Section */}
117 |         <div className="mt-20">
118 |           <h2 className="text-3xl font-bold text-center mb-8">
119 |             <span className="bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-yellow-400">Beautiful Analytics</span>
120 |           </h2>
121 |           <div className="grid gap-6 md:grid-cols-2">
122 |             <AreaChartComponent 
123 |               title="Growth Over Time"
124 |               description="User growth trends across platforms"
125 |               data={areaChartData}
126 |             />
127 |             <LineChartComponent
128 |               title="Performance Metrics"
129 |               description="Key business metrics over the years"
130 |               data={lineChartData}
131 |               series={lineChartSeries}
132 |             />
133 |           </div>
134 |         </div>
135 | 
136 |         <div className="mt-20 md:mt-32">
137 |           <h2 className="text-3xl font-bold text-center mb-12">
138 |             <span className="bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-yellow-400">Powerful Features</span>
139 |           </h2>
140 |           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
141 |             <div className="backdrop-blur-md bg-white/60 dark:bg-gray-900/40 border border-white/50 dark:border-gray-700/30 rounded-xl p-6 hover:shadow-lg transition-all group hover:scale-105">
142 |               <div className="h-12 w-12 rounded-xl bg-purple-100/80 dark:bg-purple-900/30 flex items-center justify-center text-purple-600 mb-5 group-hover:bg-purple-600 group-hover:text-white transition-colors">
143 |                 <Lock className="h-6 w-6" />
144 |               </div>
145 |               <h3 className="font-semibold text-xl mb-3">Clerk Authentication</h3>
146 |               <p className="text-gray-600 dark:text-gray-300">
147 |                 Secure, easy-to-implement authentication with social logins, multi-factor authentication, and user management.
148 |               </p>
149 |               <ul className="mt-4 space-y-2 text-sm text-gray-600 dark:text-gray-400">
150 |                 <li className="flex items-center">
151 |                   <span className="h-1.5 w-1.5 rounded-full bg-purple-500 mr-2"></span>
152 |                   Social login providers
153 |                 </li>
154 |                 <li className="flex items-center">
155 |                   <span className="h-1.5 w-1.5 rounded-full bg-purple-500 mr-2"></span>
156 |                   JWT & session management
157 |                 </li>
158 |                 <li className="flex items-center">
159 |                   <span className="h-1.5 w-1.5 rounded-full bg-purple-500 mr-2"></span>
160 |                   User profiles & management
161 |                 </li>
162 |               </ul>
163 |             </div>
164 |             <div className="backdrop-blur-md bg-white/60 dark:bg-gray-900/40 border border-white/50 dark:border-gray-700/30 rounded-xl p-6 hover:shadow-lg transition-all group hover:scale-105">
165 |               <div className="h-12 w-12 rounded-xl bg-blue-100/80 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 mb-5 group-hover:bg-blue-600 group-hover:text-white transition-colors">
166 |                 <Code className="h-6 w-6" />
167 |               </div>
168 |               <h3 className="font-semibold text-xl mb-3">Next.js 14</h3>
169 |               <p className="text-gray-600 dark:text-gray-300">
170 |                 Built on the latest Next.js framework with App Router, React Server Components, and optimized performance.
171 |               </p>
172 |               <ul className="mt-4 space-y-2 text-sm text-gray-600 dark:text-gray-400">
173 |                 <li className="flex items-center">
174 |                   <span className="h-1.5 w-1.5 rounded-full bg-blue-500 mr-2"></span>
175 |                   App Router architecture
176 |                 </li>
177 |                 <li className="flex items-center">
178 |                   <span className="h-1.5 w-1.5 rounded-full bg-blue-500 mr-2"></span>
179 |                   Server Components & Actions
180 |                 </li>
181 |                 <li className="flex items-center">
182 |                   <span className="h-1.5 w-1.5 rounded-full bg-blue-500 mr-2"></span>
183 |                   Optimized for performance
184 |                 </li>
185 |               </ul>
186 |             </div>
187 |             <div className="backdrop-blur-md bg-white/60 dark:bg-gray-900/40 border border-white/50 dark:border-gray-700/30 rounded-xl p-6 hover:shadow-lg transition-all group hover:scale-105">
188 |               <div className="h-12 w-12 rounded-xl bg-green-100/80 dark:bg-green-900/30 flex items-center justify-center text-green-600 mb-5 group-hover:bg-green-600 group-hover:text-white transition-colors">
189 |                 <Database className="h-6 w-6" />
190 |               </div>
191 |               <h3 className="font-semibold text-xl mb-3">MongoDB Atlas</h3>
192 |               <p className="text-gray-600 dark:text-gray-300">
193 |                 Fully integrated MongoDB Atlas database with data modeling, API routes, and server-side access patterns.
194 |               </p>
195 |               <ul className="mt-4 space-y-2 text-sm text-gray-600 dark:text-gray-400">
196 |                 <li className="flex items-center">
197 |                   <span className="h-1.5 w-1.5 rounded-full bg-green-500 mr-2"></span>
198 |                   Mongoose ODM integration
199 |                 </li>
200 |                 <li className="flex items-center">
201 |                   <span className="h-1.5 w-1.5 rounded-full bg-green-500 mr-2"></span>
202 |                   Optimized connection pooling
203 |                 </li>
204 |                 <li className="flex items-center">
205 |                   <span className="h-1.5 w-1.5 rounded-full bg-green-500 mr-2"></span>
206 |                   Server-side data fetching
207 |                 </li>
208 |               </ul>
209 |             </div>
210 |           </div>
211 |         </div>
212 |         
213 |         <div className="mt-24 grid grid-cols-1 lg:grid-cols-3 gap-8 items-center">
214 |           <div className="lg:col-span-1 order-2 lg:order-1">
215 |             <div className="space-y-6">
216 |               <h2 className="text-3xl font-bold">
217 |                 <span className="bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-yellow-400">
218 |                   Beautiful UI Components
219 |                 </span>
220 |               </h2>
221 |               <p className="text-gray-600 dark:text-gray-300">
222 |                 Built with ShadcnUI and TailwindCSS for stunning, accessible, and customizable interfaces that work on any device.
223 |               </p>
224 |               <ul className="space-y-3">
225 |                 <li className="flex items-start gap-2">
226 |                   <span className="h-6 w-6 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center text-purple-600 mt-0.5">✓</span>
227 |                   <span className="text-gray-600 dark:text-gray-300">Responsive layouts that work on all devices</span>
228 |                 </li>
229 |                 <li className="flex items-start gap-2">
230 |                   <span className="h-6 w-6 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center text-purple-600 mt-0.5">✓</span>
231 |                   <span className="text-gray-600 dark:text-gray-300">Dark/light mode with system preference detection</span>
232 |                 </li>
233 |                 <li className="flex items-start gap-2">
234 |                   <span className="h-6 w-6 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center text-purple-600 mt-0.5">✓</span>
235 |                   <span className="text-gray-600 dark:text-gray-300">Accessible components following WAI-ARIA guidelines</span>
236 |                 </li>
237 |               </ul>
238 |             </div>
239 |           </div>
240 |           <div className="lg:col-span-2 order-1 lg:order-2">
241 |             <div className="grid grid-cols-2 gap-4">
242 |               <div className="rounded-2xl overflow-hidden shadow-lg h-[200px] sm:h-[250px] relative transform hover:scale-105 transition-transform duration-500">
243 |                 <Image 
244 |                   src="https://picsum.photos/id/119/600/600" 
245 |                   alt="Dashboard Interface"
246 |                   fill
247 |                   className="object-cover"
248 |                 />
249 |                 <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end">
250 |                   <div className="p-4 text-white">
251 |                     <h3 className="font-medium text-lg">Dashboard</h3>
252 |                     <p className="text-sm text-gray-200">Beautiful analytics & reporting</p>
253 |                   </div>
254 |                 </div>
255 |               </div>
256 |               <div className="rounded-2xl overflow-hidden shadow-lg h-[200px] sm:h-[250px] relative transform hover:scale-105 transition-transform duration-500">
257 |                 <Image 
258 |                   src="https://picsum.photos/id/306/600/600" 
259 |                   alt="User Profile"
260 |                   fill
261 |                   className="object-cover"
262 |                 />
263 |                 <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end">
264 |                   <div className="p-4 text-white">
265 |                     <h3 className="font-medium text-lg">Auth Screens</h3>
266 |                     <p className="text-sm text-gray-200">Secure & intuitive authentication</p>
267 |                   </div>
268 |                 </div>
269 |               </div>
270 |             </div>
271 |           </div>
272 |         </div>
273 |         
274 |         <div className="mt-20 backdrop-blur-md bg-white/40 dark:bg-gray-900/30 border border-white/50 dark:border-gray-700/30 rounded-2xl p-8 md:p-10">
275 |           <div className="flex flex-col md:flex-row items-center gap-6 md:gap-10">
276 |             <div className="md:w-2/3">
277 |               <h2 className="text-2xl md:text-3xl font-bold mb-4">Ready to build your next project?</h2>
278 |               <p className="text-gray-600 dark:text-gray-300 mb-6">
279 |                 Start building faster with this production-ready boilerplate. Save weeks of setup time and focus on what matters most - your product features.
280 |               </p>
281 |               <div className="flex flex-wrap gap-4">
282 |                 <Link href="/sign-up">
283 |                   <Button className="bg-purple-600 hover:bg-purple-700 text-white">
284 |                     Get Started
285 |                     <ArrowRight className="ml-2 h-4 w-4" />
286 |                   </Button>
287 |                 </Link>
288 |                 <Link href="https://github.com/yuvalavidan/ncm-bp" target="_blank" rel="noopener">
289 |                   <Button variant="outline">View on GitHub</Button>
290 |                 </Link>
291 |               </div>
292 |             </div>
293 |             <div className="md:w-1/3 flex justify-center">
294 |               <div className="relative">
295 |                 <div className="h-24 w-24 rounded-xl bg-gradient-to-br from-purple-500 to-yellow-400 flex items-center justify-center text-white shadow-lg">
296 |                   <Sparkles className="h-10 w-10" />
297 |                 </div>
298 |                 <div className="absolute -top-2 -right-2 h-6 w-6 rounded-full bg-purple-100 dark:bg-purple-900/50 flex items-center justify-center animate-pulse">
299 |                   <span className="h-3 w-3 rounded-full bg-purple-500"></span>
300 |                 </div>
301 |               </div>
302 |             </div>
303 |           </div>
304 |         </div>
305 |       </main>
306 | 
307 |       <footer className="w-full backdrop-blur-md bg-white/70 dark:bg-gray-950/70 border-t border-purple-100 dark:border-purple-900/20 py-6 mt-16">
308 |         <div className="container mx-auto px-4 sm:px-6">
309 |           <div className="flex flex-col sm:flex-row justify-between items-center gap-4 mb-8">
310 |             <div className="flex items-center gap-2">
311 |               <span className="h-8 w-8 flex items-center justify-center rounded-full bg-purple-600 text-white font-bold">Y</span>
312 |               <span className="font-bold text-xl">YUV.AI</span>
313 |             </div>
314 |             <div className="flex items-center gap-4">
315 |               <a href="https://linktr.ee/yuvai" target="_blank" rel="noopener noreferrer" className="text-gray-600 hover:text-purple-600 dark:text-gray-400 dark:hover:text-purple-400">
316 |                 <Globe className="h-5 w-5" />
317 |               </a>
318 |               <a href="https://x.com/yuvalav" target="_blank" rel="noopener noreferrer" className="text-gray-600 hover:text-purple-600 dark:text-gray-400 dark:hover:text-purple-400">
319 |                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-5 w-5">
320 |                   <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path>
321 |                 </svg>
322 |               </a>
323 |               <a href="https://instagram.com/yuval_770" target="_blank" rel="noopener noreferrer" className="text-gray-600 hover:text-purple-600 dark:text-gray-400 dark:hover:text-purple-400">
324 |                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-5 w-5">
325 |                   <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
326 |                   <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
327 |                   <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
328 |                 </svg>
329 |               </a>
330 |               <a href="https://www.linkedin.com/in/%F0%9F%8E%97%EF%B8%8Fyuval-avidani-87081474/" target="_blank" rel="noopener noreferrer" className="text-gray-600 hover:text-purple-600 dark:text-gray-400 dark:hover:text-purple-400">
331 |                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-5 w-5">
332 |                   <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
333 |                   <rect x="2" y="9" width="4" height="12"></rect>
334 |                   <circle cx="4" cy="4" r="2"></circle>
335 |                 </svg>
336 |               </a>
337 |               <a href="https://github.com/hoodini" target="_blank" rel="noopener noreferrer" className="text-gray-600 hover:text-purple-600 dark:text-gray-400 dark:hover:text-purple-400">
338 |                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-5 w-5">
339 |                   <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
340 |                 </svg>
341 |               </a>
342 |               <a href="https://yuv.ai" target="_blank" rel="noopener noreferrer" className="text-gray-600 hover:text-purple-600 dark:text-gray-400 dark:hover:text-purple-400">
343 |                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-5 w-5">
344 |                   <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1-2.5-2.5z"></path>
345 |                   <path d="M8 7h6"></path>
346 |                   <path d="M8 11h8"></path>
347 |                   <path d="M8 15h5"></path>
348 |                 </svg>
349 |               </a>
350 |             </div>
351 |           </div>
352 |           
353 |           <div className="border-t border-gray-200 dark:border-gray-800 pt-6 flex flex-col md:flex-row justify-between items-center gap-4">
354 |             <div className="text-sm text-gray-600 dark:text-gray-400">
355 |               Created with 💜 by <a href="https://linktr.ee/yuvai" target="_blank" rel="noopener noreferrer" className="text-purple-600 hover:underline">Yuval Avidani</a> - AI Builder & Speaker
356 |             </div>
357 |             <div className="text-sm font-medium text-yellow-500">
358 |               "Fly High With YUV.AI"
359 |             </div>
360 |           </div>
361 |         </div>
362 |       </footer>
363 |     </div>
364 |   );
365 | }
366 | 


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