├── .gitignore
├── README.md
├── app
    ├── (routes)
    │   ├── credits
    │   │   └── page.tsx
    │   ├── dashboard
    │   │   ├── _components
    │   │   │   └── ImageUpload.tsx
    │   │   └── page.tsx
    │   ├── designs
    │   │   ├── _components
    │   │   │   └── DesignCard.tsx
    │   │   └── page.tsx
    │   ├── layout.tsx
    │   └── provider.tsx
    ├── Contact.tsx
    ├── Footer.tsx
    ├── MagicButton.tsx
    ├── _components
    │   ├── AppHeader.tsx
    │   ├── AppSidebar.tsx
    │   ├── Authentication.tsx
    │   └── ProfileAvatar.tsx
    ├── api
    │   ├── ai-model
    │   │   └── route.tsx
    │   ├── user
    │   │   └── route.ts
    │   └── wireframe-to-code
    │   │   └── route.tsx
    ├── favicon.ico
    ├── globals.css
    ├── layout.tsx
    ├── page.tsx
    ├── provider.tsx
    └── view-code
    │   ├── [uid]
    │       └── page.tsx
    │   └── _components
    │       ├── CodeEditor.tsx
    │       └── SelectionDetail.tsx
├── components.json
├── components
    └── ui
    │   ├── button.tsx
    │   ├── input.tsx
    │   ├── popover.tsx
    │   ├── select.tsx
    │   ├── separator.tsx
    │   ├── sheet.tsx
    │   ├── sidebar.tsx
    │   ├── skeleton.tsx
    │   ├── sonner.tsx
    │   ├── textarea.tsx
    │   └── tooltip.tsx
├── configs
    ├── db.tsx
    ├── firebaseConfig.tsx
    └── schema.ts
├── context
    └── AuthContext.tsx
├── data
    └── Constants.tsx
├── drizzle.config.ts
├── hooks
    └── use-mobile.tsx
├── lib
    └── utils.ts
├── next.config.ts
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── public
    ├── Mistral.png
    ├── Wireframetocode.png
    ├── deepseek.png
    ├── deepseek1.png
    ├── file.svg
    ├── gemma.webp
    ├── globe.svg
    ├── google.png
    ├── herobg.png
    ├── landingvid.mp4
    ├── logo.svg
    ├── logo_h.png
    ├── logo_h1.png
    ├── logo_main.svg
    ├── meta.png
    ├── meta1.png
    ├── microsoft.png
    ├── next.svg
    ├── opengv.png
    ├── qwen.png
    ├── vercel.svg
    ├── w_t_c.png
    └── window.svg
├── tailwind.config.ts
└── tsconfig.json


/.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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # 🚀 Vision to Web  
  2 | **Transform Wireframes into Fully Functional Code with AI-Powered Precision**
  3 | 
  4 | ![vision-to-web-banner](https://media-hosting.imagekit.io/6828aa092aac47f5/Screenshot%202025-05-09%20215820.png?Expires=1841416238&Key-Pair-Id=K2ZIVPTIP2VGHC&Signature=2hsYr~ibE2-UycsotmHeHcu9HgtdmQQYq02MRX2r9MmCGBgiyE0-KHcYHu1AF62-3eFAleU-3l4DU5bN34D4YfHVn4ofg~Uh8J9uC9EItNNwHKG1p5sGQq5cb50qv7TX8-FMuT0idclRihJQUDkCFTaw34efZI46D7ReKA4p9SJ5qyZj7YiMCdDYmudSsgx8nKiyaigel4FlsqpJhvzxbtfsFXdEdCZ-JvE6HCXSnqkXZVnTnV5LZ38zZVu0AB1TLsGs6Ok3~~00xI6oSeCWXq5OzXc~fCMpAhWRAEyT~Gg~bz-DWwMt0Oz6ahryHNEQ0Dr2xgqfWagml5XlPhGXcw__) <!-- Optional banner or demo GIF -->
  5 | 
  6 | ---
  7 | 
  8 | ## ✨ Overview
  9 | 
 10 | **Vision to Web** is an intelligent platform that converts UI wireframes into clean, production-ready HTML, CSS, and TypeScript (TSX) code using advanced AI models. It streamlines the UI/UX-to-code process, helping developers and designers bring their ideas to life instantly — no more manual front-end coding from scratch.
 11 | 
 12 | ---
 13 | 
 14 | ## 🧠 Key Features
 15 | 
 16 | - 🔁 **Multi-Model AI Support** – Choose from Gemini, Mistral, Qwen, DeepSeek, and Gemma.
 17 | - 📤 **Image Upload & Description Input** – Upload your wireframe and guide the AI with context.
 18 | - ⚡ **Real-Time Code Generation & Preview** – See code and live preview update instantly.
 19 | - 💾 **Conversion History** – Access your previous conversions anytime.
 20 | - 🧩 **Seamless UI/UX to Code Flow** – Converts design intent into structured code blocks.
 21 | - 🛠️ **Built with TypeScript, Firebase, Drizzle ORM, and Modern Web Stacks.**
 22 | 
 23 | ---
 24 | 
 25 | ## 📸 Demo
 26 | 
 27 | ![vision-to-web-demo](https://your-demo-gif-link.com/demo.gif)
 28 | 
 29 | > Experience the future of UI development.
 30 | 
 31 | ---
 32 | 
 33 | ## 🏗️ Tech Stack
 34 | 
 35 | | Category       | Technology                                 |
 36 | |----------------|---------------------------------------------|
 37 | | Frontend       | React, TypeScript, Tailwind CSS            |
 38 | | Backend        | Firebase (Storage, Auth, Firestore)        |
 39 | | Database       | Drizzle ORM + SQL                         |
 40 | | Code Preview   | Real-time Editor + Live Preview Rendering |
 41 | | AI Integration | OpenAI, Gemini, Mistral, DeepSeek, etc.    |
 42 | | Deployment     | Vercel / Netlify                           |
 43 | 
 44 | ---
 45 | 
 46 | ## ⚙️ How It Works
 47 | 
 48 | 1. **Upload Wireframe** – PNG, JPG, or Sketch wireframe.
 49 | 2. **Choose AI Model** – Select from multiple supported models.
 50 | 3. **Describe Intent** – Provide a short functional description.
 51 | 4. **Generate Code** – Watch real-time code and preview rendering.
 52 | 5. **Save or Export** – Copy or store the generated code securely.
 53 | 
 54 | ---
 55 | 
 56 | ## 📌 Use Cases
 57 | 
 58 | - Rapid front-end prototyping  
 59 | - Design handoff automation  
 60 | - Code scaffolding for MVPs  
 61 | - Learning and teaching UI development
 62 | 
 63 | ---
 64 | 
 65 | ## 🛡️ Security & Scalability
 66 | 
 67 | - 🔒 Firebase Auth for secure user access  
 68 | - ☁️ Cloud-based storage for wireframes  
 69 | - 🔄 Scalable backend infrastructure  
 70 | - 📈 Real-time database updates with Firestore
 71 | 
 72 | ---
 73 | 
 74 | ## 🚀 Deployment Links
 75 | 
 76 | | Platform     | Link                                                             |
 77 | |--------------|------------------------------------------------------------------|
 78 | | Live Demo    | [https://vision2web.vercel.app](https://vision2web.vercel.app) |
 79 | | Frontend Repo| [GitHub – vision-to-web](https://github.com/yourusername/vision-to-web) |
 80 | | Docs         | [Documentation](https://your-docs-link.com)                      |
 81 | 
 82 | ---
 83 | 
 84 | ## 👥 Contributors
 85 | 
 86 | - **Atharva Kalbande** – Lead Developer & Architect  
 87 | - **Harshika Rathod** – AI Integration & UX Optimization 
 88 | - **Arnav Varhade** – Documentation  
 89 | - **Shruti Thakur** – Documentation
 90 | 
 91 | ---
 92 | 
 93 | ## 📚 Future Enhancements
 94 | 
 95 | - Export generated code directly to GitHub repositories  
 96 | - Figma and design tool integration for seamless input  
 97 | - Enhanced responsive design generation capabilities  
 98 | - AI-powered debugging and optimization suggestions  
 99 | - Support for reusable component and template libraries  
100 | 
101 | ---
102 | 
103 | ## 🤝 Contributing
104 | 
105 | We welcome contributions!  
106 | If you'd like to help improve **Vision to Web**, please fork the repo and submit a PR.
107 | 
108 | ```bash
109 | git clone https://github.com/yourusername/vision-to-web.git
110 | cd vision-to-web
111 | npm install
112 | npm run dev
113 | 


--------------------------------------------------------------------------------
/app/(routes)/credits/page.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | import { useAuthContext } from '@/app/provider'
 3 | import { Button } from '@/components/ui/button'
 4 | import axios from 'axios'
 5 | import React, { useEffect, useState } from 'react'
 6 | 
 7 | function Credits() {
 8 | 
 9 |     const { user } = useAuthContext();
10 |     const [userData, setUserData] = useState<any>();
11 |     useEffect(() => {
12 |         user && GetUserCredits();
13 |     }, [user])
14 | 
15 |     const GetUserCredits = async () => {
16 |         const result = await axios.get('/api/user?email=' + user?.email);
17 |         console.log(result.data)
18 |         setUserData(result.data);
19 |     }
20 | 
21 |     return (
22 |         <div>
23 |             <h2 className='font-bold text-2xl text-white'>Credits</h2>
24 | 
25 |             <div className='p-5 bg-slate-50 rounded-xl border
26 |              flex justify-between items-center mt-6'>
27 |                 <div>
28 |                     <h2 className='font-bold text-xl'>My Credits:</h2>
29 |                     {userData?.credits && <p className='text-lg text-gray-500'>{userData?.credits} Credits left</p>}
30 |                 </div>
31 |                 {/* <Button>Buy More Credits</Button> */}
32 |             </div>
33 |         </div>
34 |     )
35 | }
36 | 
37 | export default Credits


--------------------------------------------------------------------------------
/app/(routes)/dashboard/_components/ImageUpload.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | import { Button } from '@/components/ui/button'
  3 | import { Textarea } from '@/components/ui/textarea'
  4 | import { CloudUpload, Loader2Icon, WandSparkles, X } from 'lucide-react'
  5 | import Image from 'next/image'
  6 | //@ts-ignore
  7 | import uuid4 from "uuid4";
  8 | import React, { ChangeEvent, useState } from 'react'
  9 | import {
 10 |     Select,
 11 |     SelectContent,
 12 |     SelectItem,
 13 |     SelectTrigger,
 14 |     SelectValue,
 15 | } from "@/components/ui/select"
 16 | import { getDownloadURL, ref, uploadBytes } from 'firebase/storage'
 17 | import { storage } from '@/configs/firebaseConfig'
 18 | import axios from 'axios'
 19 | import { useAuthContext } from '@/app/provider'
 20 | import { useRouter } from 'next/navigation'
 21 | import Constants from '@/data/Constants'
 22 | import { toast } from 'sonner'
 23 | 
 24 | function ImageUpload() {
 25 | 
 26 |     const [previewUrl, setPreviewUrl] = useState<string | null>(null)
 27 |     const [file, setFile] = useState<any>();
 28 |     const [model, setModel] = useState<string>();
 29 |     const [description, setDescription] = useState<string>();
 30 |     const { user } = useAuthContext();
 31 |     const router = useRouter();
 32 |     const [loading, setLoading] = useState(false);
 33 | 
 34 |     const OnImageSelect = (event: ChangeEvent<HTMLInputElement>) => {
 35 |         const files = event.target.files;
 36 |         if (files) {
 37 |             console.log(files[0])
 38 |             const imageUrl = URL.createObjectURL(files[0]);
 39 |             setFile(files[0]);
 40 |             setPreviewUrl(imageUrl);
 41 |         }
 42 |     }
 43 | 
 44 |     const OnConverToCodeButtonClick = async () => {
 45 |         if (!file || !model || !description) {
 46 |             console.log("Select All Fields");
 47 |             return;
 48 |         }
 49 |         setLoading(true);
 50 |         // Save Image to Firebase
 51 |         const fileName = Date.now() + '.png';
 52 |         const imageRef = ref(storage, "Wireframe_To_Code/" + fileName);
 53 |         await uploadBytes(imageRef, file).then(resp => {
 54 |             console.log("Image Uploaded...")
 55 |         });
 56 | 
 57 |         const imageUrl = await getDownloadURL(imageRef);
 58 |         console.log(imageUrl);
 59 | 
 60 |         const uid = uuid4();
 61 |         console.log(uid);
 62 |         // Save Info To Database
 63 |         const result = await axios.post('/api/wireframe-to-code', {
 64 |             uid: uid,
 65 |             description: description,
 66 |             imageUrl: imageUrl,
 67 |             model: model,
 68 |             email: user?.email
 69 |         });
 70 |         if (result.data?.error) {
 71 |             console.log("Not Enough credits");
 72 |             toast('Not Enough Credits!');
 73 |             setLoading(false);
 74 |             return;
 75 |         }
 76 |         setLoading(false);
 77 |         router.push('/view-code/' + uid);
 78 |     }
 79 | 
 80 |     return (
 81 |       <div className="mt-6 overflow-hidden">
 82 |         <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
 83 |           {!previewUrl ? (
 84 |             <div
 85 |               className="p-7 border border-[#5b3bb2] rounded-md shadow-md flex flex-col items-center justify-center 
 86 |                         bg-cover bg-center relative mt-5" // Added mt-5 for slight downward shift
 87 |               style={{ backgroundImage: "url('/herobg.png')" }}
 88 |             >
 89 |               {/* Dark Overlay for Better Visibility */}
 90 |               <div className="absolute inset-0.5 bg-black opacity-40"></div>
 91 | 
 92 |               <div className="relative flex flex-col items-center">
 93 |                 <CloudUpload className="h-10 w-10 text-white" />
 94 |                 <h2 className="font-bold text-lg text-white mt-2">
 95 |                   Upload Image
 96 |                 </h2>
 97 |                 <p className="text-gray-300 mt-2">
 98 |                   Click Button Select Wireframe Image
 99 |                 </p>
100 |                 <div className="p-5 w-full flex mt-4 justify-center">
101 |                   <label htmlFor="imageSelect">
102 |                     <h2 className="p-2 bg-blue-100 font-bold rounded-md px-5 cursor-pointer hover:bg-[#714dd5] hover:text-white transition duration-300">
103 |                       Select Image
104 |                     </h2>
105 |                   </label>
106 |                 </div>
107 |                 <input
108 |                   type="file"
109 |                   id="imageSelect"
110 |                   className="hidden"
111 |                   multiple={false}
112 |                   onChange={OnImageSelect}
113 |                 />
114 |               </div>
115 |             </div>
116 |           ) : (
117 |             <div className="p-5 border border-[#5b3bb2] border-dashed mt-5">
118 |               <Image
119 |                 src={previewUrl}
120 |                 alt="preview"
121 |                 width={500}
122 |                 height={500}
123 |                 className="w-full h-[250px] object-contain"
124 |               />
125 |               <X
126 |                 className="flex ite justify-end w-full cursor-pointer text-white"
127 |                 onClick={() => setPreviewUrl(null)}
128 |               />
129 |             </div>
130 |           )}
131 | 
132 |           <div
133 |             className="p-7 border border-[#5b3bb2] rounded-md shadow-md flex flex-col
134 |                         bg-cover bg-center relative overflow-hidden mt-5" // Added mt-5 for slight downward shift
135 |             style={{ backgroundImage: "url('/herobg.png')" }}
136 |           >
137 |             {/* Dark Overlay for Better Visibility */}
138 |             <div className="absolute inset-0.5 bg-black opacity-40"></div>
139 |             <div className="relative flex flex-col">
140 |               <h2 className="font-bold text-lg text-white mb-2">
141 |                 Select AI Model
142 |               </h2>
143 |               <Select onValueChange={(value) => setModel(value)}>
144 |                 <SelectTrigger className="w-full border border-[#5b3bb2] text-white">
145 |                   <SelectValue
146 |                     placeholder="Select AI Model"
147 |                     className="!text-white"
148 |                   />
149 |                 </SelectTrigger>
150 |                 <SelectContent className="bg-[#050816] border-none text-white">
151 |                   {Constants?.AiModelList.map((model, index) => (
152 |                     <SelectItem
153 |                       value={model.name}
154 |                       key={index}
155 |                       className="cursor-pointer !bg-[#050816] !text-white hover:!bg-[#4921b1] hover:!text-white transition duration-300 data-[state=checked]:!text-white data-[state=checked]:!font-bold"
156 |                     >
157 |                       <div className="flex items-center gap-2">
158 |                         <Image
159 |                           src={model.icon}
160 |                           alt={model.name}
161 |                           width={25}
162 |                           height={25}
163 |                         />
164 |                         <h2 className="!text-white"> {model.name} </h2>{" "}
165 |                         {/* Force white text */}
166 |                       </div>
167 |                     </SelectItem>
168 |                   ))}
169 |                 </SelectContent>
170 |               </Select>
171 | 
172 |               <h2 className="font-bold text-lg mt-7 text-white">
173 |                 Enter Description about your webpage
174 |               </h2>
175 |               <Textarea
176 |                 onChange={(event) => setDescription(event?.target.value)}
177 |                 className="mt-3 h-[150px] border border-[#5b3bb2] text-white"
178 |                 placeholder="Write about your web page !"
179 |               />
180 |             </div>
181 |           </div>
182 |         </div>
183 | 
184 |         <div className="mt-14 flex items-center justify-center ">
185 |           {" "}
186 |           {/* Increased spacing */}
187 |           <Button
188 |             onClick={OnConverToCodeButtonClick}
189 |             disabled={loading}
190 |             className="bg-[#5b3bb2] hover:bg-[#4e2cad]"
191 |           >
192 |             {loading ? (
193 |               <Loader2Icon className=" animate-spin" />
194 |             ) : (
195 |               <WandSparkles />
196 |             )}
197 |             Convert to Code
198 |           </Button>
199 |         </div>
200 |       </div>
201 |     );
202 |     
203 | }
204 | 
205 | export default ImageUpload
206 | 


--------------------------------------------------------------------------------
/app/(routes)/dashboard/page.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ImageUpload from './_components/ImageUpload'
 3 | 
 4 | function Dashboard() {
 5 |     return (
 6 |         <div 
 7 |         className={`flex flex-col  transition-all duration-300 }`}
 8 |         // style={{ backgroundImage: "url('/herobg.png')", backgroundSize: "cover", backgroundPosition: "center" }}
 9 |     >
10 |         <div className="xl:px-20">
11 |             <h2 className="font-bold text-3xl text-center text-white mt-2">Convert Wireframe to Code</h2>
12 |             <ImageUpload />
13 |         </div>
14 |     </div>
15 |     )
16 | }
17 | 
18 | export default Dashboard
19 | 


--------------------------------------------------------------------------------
/app/(routes)/designs/_components/DesignCard.tsx:
--------------------------------------------------------------------------------
 1 | import { RECORD } from '@/app/view-code/[uid]/page'
 2 | import { Button } from '@/components/ui/button'
 3 | import Constants from '@/data/Constants'
 4 | import { Code } from 'lucide-react'
 5 | import Image from 'next/image'
 6 | import Link from 'next/link'
 7 | import React from 'react'
 8 | 
 9 | function DesignCard({ item }: any) {
10 |     const modelObj = item && Constants.AiModelList.find((x => x.name == item?.model))
11 |     return (
12 |         <div className='p-5 border-2 border-[#5b3bb2] rounded-lg'>
13 |             <Image src={item?.imageUrl} alt='image'
14 |                 width={300} height={200}
15 |                 className='w-full h-[200px] object-cover bg-white rounded-lg'
16 |             />
17 | 
18 |             <div className='mt-2'>
19 |                 <h2 className='line-clamp-3 text-gray-300 text-sm'>{item?.description}</h2>
20 |                 <div className='flex justify-between items-center mt-4'>
21 |                     <div className='flex items-center gap-2 p-2 bg-violet-200 rounded-full '>
22 |                         {modelObj && <Image src={modelObj?.icon} alt={modelObj?.modelName ?? ''}
23 |                             width={30}
24 |                             height={30}
25 |                         />}
26 |                         <h2>{modelObj?.name}</h2>
27 |                     </div>
28 |                     <Link href={'/view-code/' + item?.uid}>
29 |                         <Button className='bg-[#5b3bb2] hover:bg-[#4e2cad]'> <Code /> View Code</Button>
30 |                     </Link>
31 |                 </div>
32 |             </div>
33 |         </div>
34 |     )
35 | }
36 | 
37 | export default DesignCard


--------------------------------------------------------------------------------
/app/(routes)/designs/page.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | import { useAuthContext } from '@/app/provider'
 3 | import axios from 'axios';
 4 | import React, { useEffect, useState } from 'react'
 5 | import DesignCard from './_components/DesignCard';
 6 | import { RECORD } from '@/app/view-code/[uid]/page';
 7 | 
 8 | function Designs() {
 9 | 
10 |     const { user } = useAuthContext();
11 |     const [wireframeList, setWireframeList] = useState([]);
12 |     useEffect(() => {
13 |         user && GetAllUserWireframe();
14 |     }, [user])
15 | 
16 |     const GetAllUserWireframe = async () => {
17 | 
18 |         const result = await axios.get('/api/wireframe-to-code?email='+ user?.email);
19 |         console.log(result.data);
20 |         setWireframeList(result.data);
21 |     }
22 | 
23 |     return (
24 |         <div>
25 |             <h2 className='font-bold text-2xl text-white'>Wireframe & Codes</h2>
26 | 
27 |             <div className='grid grid-cols-2 lg:grid-cols-3 gap-7 mt-10'>
28 |                 {wireframeList?.map((item: RECORD, index) => (
29 |                     <DesignCard key={index} item={item} />
30 |                 ))}
31 |             </div>
32 |         </div>
33 |     )
34 | }
35 | 
36 | export default Designs


--------------------------------------------------------------------------------
/app/(routes)/layout.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import DashboardProvider from './provider';
 3 | 
 4 | 
 5 | function DashboardLayout({
 6 |     children,
 7 | }: Readonly<{
 8 |     children: React.ReactNode;
 9 | }>) {
10 | 
11 |     return (
12 |         <DashboardProvider>
13 |             {children}
14 |         </DashboardProvider>
15 |     )
16 | }
17 | 
18 | export default DashboardLayout


--------------------------------------------------------------------------------
/app/(routes)/provider.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | import React, { useEffect } from 'react'
 3 | import { useAuthContext } from '../provider';
 4 | import { useRouter } from 'next/navigation';
 5 | import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar';
 6 | import axios from "axios";
 7 | import AppHeader from '../_components/AppHeader';
 8 | import { AppSidebar } from '../_components/AppSidebar';
 9 | 
10 | function DashboardProvider({
11 |     children,
12 | }: Readonly<{
13 |     children: React.ReactNode;
14 | }>) {
15 | 
16 |     const user = useAuthContext();
17 |     const router = useRouter();
18 | 
19 |     useEffect(() => {
20 |         if (!user?.user && user.user) return router.replace('/')
21 |         user?.user && checkUser()
22 | 
23 |     }, [user])
24 | 
25 | 
26 |     const checkUser = async () => {
27 |         const result = await axios.post('/api/user', {
28 |             userName: user?.user?.displayName,
29 |             userEmail: user?.user?.email
30 |         });
31 |         console.log(user);
32 |     }
33 | 
34 | 
35 |     return (
36 |         <SidebarProvider>
37 |             <AppSidebar />
38 |             <main
39 |                 className="w-full min-h-screen"
40 |                 style={{
41 |                     backgroundImage: "url('/herobg.png')",
42 |                     backgroundSize: "cover",
43 |                     backgroundPosition: "center",
44 |                     backgroundRepeat: "no-repeat",
45 |                 }}
46 |             >
47 |                 <AppHeader />
48 |                 {/* <SidebarTrigger /> */}
49 |                 <div className="p-10">{children}</div>
50 |             </main>
51 |         </SidebarProvider>
52 |     );
53 |     
54 | }
55 | 
56 | export default DashboardProvider


--------------------------------------------------------------------------------
/app/Contact.tsx:
--------------------------------------------------------------------------------
  1 | import { useState, FormEvent, ChangeEvent } from "react";
  2 | import emailjs from "@emailjs/browser";
  3 | import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live";
  4 | 
  5 | const Contact = () => {
  6 |   const [form, setForm] = useState({
  7 |     name: "",
  8 |     email: "",
  9 |     message: "",
 10 |   });
 11 | 
 12 |   const [loading, setLoading] = useState(false);
 13 |   const [code, setCode] = useState(`<center><h1><b>Vision to Web</b></h1></center>`);
 14 | 
 15 |   const handleChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
 16 |     const { name, value } = e.target;
 17 |     setForm({ ...form, [name]: value });
 18 |   };
 19 | 
 20 |   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
 21 |     e.preventDefault();
 22 |     setLoading(true);
 23 | 
 24 |     try {
 25 |       await emailjs.send(
 26 |         "service_pcwul4t",
 27 |         "template_k392sso",
 28 |         {
 29 |           from_name: form.name,
 30 |           to_name: "Atharva Kalbande",
 31 |           from_email: form.email,
 32 |           to_email: "atharvakalbande5@gmail.com",
 33 |           message: form.message,
 34 |         },
 35 |         "udfev_llUA_83e2Z4"
 36 |       );
 37 |       alert("Thank you! I will get back to you as soon as possible.");
 38 |       setForm({ name: "", email: "", message: "" });
 39 |     } catch (error) {
 40 |       console.error(error);
 41 |       alert("Something went wrong. Please try again.");
 42 |     } finally {
 43 |       setLoading(false);
 44 |     }
 45 |   };
 46 | 
 47 |   return (
 48 |     <div className="flex flex-col md:flex-row justify-center items-center gap-10 p-6 md:p-10 mb-8">
 49 |       
 50 |       {/* Left Side - Contact Form */}
 51 |       <div className="w-full max-w-[500px] p-6 rounded-2xl bg-[#0D081D] text-white">
 52 |         <p className="text-gray-400 text-lg">Get in touch</p>
 53 |         <h3 className="text-3xl font-bold mb-6">Contact Us</h3>
 54 | 
 55 |         <form onSubmit={handleSubmit} className="flex flex-col gap-4">
 56 |           <label className="flex flex-col text-white font-medium">
 57 |             Your Name
 58 |             <input
 59 |               type="text"
 60 |               name="name"
 61 |               value={form.name}
 62 |               onChange={handleChange}
 63 |               placeholder="What's your good name?"
 64 |               className="p-3 rounded-lg bg-[#18122B] border border-[#18122B] text-gray-400 placeholder-gray-500 mt-1 w-full"
 65 |             />
 66 |           </label>
 67 | 
 68 |           <label className="flex flex-col text-white font-medium">
 69 |             Your Email
 70 |             <input
 71 |               type="email"
 72 |               name="email"
 73 |               value={form.email}
 74 |               onChange={handleChange}
 75 |               placeholder="What's your email?"
 76 |               className="p-3 rounded-lg bg-[#18122B] border border-[#18122B] text-gray-400 placeholder-gray-500 mt-1 w-full"
 77 |             />
 78 |           </label>
 79 | 
 80 |           <label className="flex flex-col text-white font-medium">
 81 |             Your Message
 82 |             <textarea
 83 |               name="message"
 84 |               value={form.message}
 85 |               onChange={handleChange}
 86 |               placeholder="What you want to say?"
 87 |               className="p-3 rounded-lg bg-[#18122B] border border-[#18122B] text-gray-400 placeholder-gray-500 mt-1 w-full"
 88 |             />
 89 |           </label>
 90 | 
 91 |           <button
 92 |             type="submit"
 93 |             className="bg-[#18122B] p-3 rounded-lg text-white font-bold hover:bg-[#241B3B] transition-all mt-2 w-full"
 94 |           >
 95 |             {loading ? "Sending..." : "Send"}
 96 |           </button>
 97 |         </form>
 98 |       </div>
 99 | 
100 |       {/* Right Side - Live Code Preview */}
101 |       <div className="w-full max-w-[600px] p-6 bg-[#0D081D] rounded-2xl">
102 |         <h2 className="text-white text-2xl font-bold text-center md:text-left">Live Code Editor</h2>
103 | 
104 |         <LiveProvider code={code}>
105 |           {/* Code Editor */}
106 |           <div className="mt-4 border border-[#011627] rounded-lg overflow-hidden">
107 |             <LiveEditor 
108 |               className="bg-[#011627] text-white p-3 font-mono min-h-[320px] w-full text-sm md:text-base" 
109 |               onChange={(newCode) => setCode(newCode)} 
110 |             />
111 |           </div>
112 | 
113 |           {/* Error Messages */}
114 |           <LiveError className="text-red-500 mt-2 text-sm" />
115 | 
116 |           {/* Rendered Preview */}
117 |           <div className="mt-4 p-4 rounded-lg bg-[#18122B] w-full text-center">
118 |             <LivePreview className="text-white text-lg md:text-xl break-words overflow-hidden" />
119 |           </div>
120 |         </LiveProvider>
121 |       </div>
122 |       
123 |     </div>
124 |   );
125 | };
126 | 
127 | export default Contact;
128 | 


--------------------------------------------------------------------------------
/app/Footer.tsx:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import Link from "next/link";
  3 | import { FaXTwitter, FaInstagram, FaGithub, FaLinkedinIn } from "react-icons/fa6"; // Updated Twitter icon to X
  4 | import { Link as ScrollLink } from "react-scroll";
  5 | 
  6 | const Footer: React.FC = () => {
  7 |   return (
  8 |     <footer className="bg-[#1a0e324f] text-white py-10 px-6">
  9 |       <div className="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center">
 10 |         {/* Logo & Name */}
 11 |         <div className="flex items-center space-x-3">
 12 |           <img src="/logo_h.png" alt="Vision to Web" className="w-14 h-10" />
 13 |           <h2 className="text-xl font-semibold">Vision to Web</h2>
 14 |         </div>
 15 | 
 16 |         {/* Navigation Links */}
 17 |         <nav className="flex space-x-8 mt-4 md:mt-0 text-lg">
 18 |           {/* <Link href="/" className="text-gray-400 hover:text-violet-500 transition-all">Get Started</Link> */}
 19 |           <ScrollLink
 20 |             to="home"
 21 |             smooth={true}
 22 |             duration={500}
 23 |             offset={0} // Ensures it goes exactly to the top
 24 |             className="text-gray-400 hover:text-violet-500 transition-all cursor-pointer"
 25 |           >
 26 |             Home
 27 |           </ScrollLink>
 28 |           <ScrollLink
 29 |             to="features"
 30 |             smooth={true}
 31 |             duration={500}
 32 |             offset={-50} // Adjust for fixed headers
 33 |             className="text-gray-400 hover:text-violet-500 transition-all cursor-pointer"
 34 |           >
 35 |             About
 36 |           </ScrollLink>
 37 |           <ScrollLink
 38 |             to="features2"
 39 |             smooth={true}
 40 |             duration={500}
 41 |             offset={-50} // Adjust for fixed headers
 42 |             className="text-gray-400 hover:text-violet-500 transition-all cursor-pointer"
 43 |           >
 44 |             Contact
 45 |           </ScrollLink>
 46 |         </nav>
 47 | 
 48 |         {/* Social Media Icons */}
 49 |         <div className="flex space-x-5 mt-4 md:mt-0">
 50 |           <a
 51 |             href="https://github.com/atharva-aak/vision2web"
 52 |             target="_blank"
 53 |             rel="noopener noreferrer"
 54 |             className="p-3 rounded-full bg-gray-800 transition-all duration-300 hover:bg-transparent"
 55 |           >
 56 |             <FaGithub
 57 |               size={20}
 58 |               className="text-gray-400 hover:text-white transition-all"
 59 |             />
 60 |           </a>
 61 | 
 62 |           <a
 63 |             href="https://www.linkedin.com/in/atharva-kalbande38/"
 64 |             target="_blank"
 65 |             rel="noopener noreferrer"
 66 |             className="p-3 rounded-full bg-gray-800 transition-all duration-300 hover:bg-transparent"
 67 |           >
 68 |             <FaLinkedinIn
 69 |               size={20}
 70 |               className="text-gray-400 hover:text-[#0077B5] transition-all"
 71 |             />
 72 |           </a>
 73 |           <a
 74 |             href="https://x.com/_atharva_ak_"
 75 |             target="_blank"
 76 |             rel="noopener noreferrer"
 77 |             className="p-3 rounded-full bg-gray-800 transition-all duration-300 hover:bg-transparent"
 78 |           >
 79 |             <FaXTwitter
 80 |               size={20}
 81 |               className="text-gray-400 hover:text-white transition-all"
 82 |             />
 83 |           </a>
 84 |           <a
 85 |             href="https://www.instagram.com/_atharva.kalbande_/?hl=en"
 86 |             target="_blank"
 87 |             rel="noopener noreferrer"
 88 |             className="p-3 rounded-full bg-gray-800 transition-all duration-300 hover:bg-transparent"
 89 |           >
 90 |             <FaInstagram
 91 |               size={20}
 92 |               className="text-gray-400 hover:text-[#E4405F] transition-all"
 93 |             />
 94 |           </a>
 95 |         </div>
 96 |       </div>
 97 | 
 98 |       {/* Divider Line */}
 99 |       <div className="border-t border-gray-700 mt-8"></div>
100 | 
101 |       {/* Copyright & Team Members */}
102 |       <div className="text-center text-gray-400 text-lg mt-6 select-none">
103 |         <p>© {new Date().getFullYear()} Vision to Web. All Rights Reserved.</p>
104 | 
105 |         <p className="mt-4 text-lg font-medium text-white">Developed by:</p>
106 | 
107 |         {/* Team Members with Space */}
108 |         <div className="mt-2 flex flex-wrap justify-center space-x-6 text-lg text-gray-200 font-semibold">
109 |           <span>Atharva Kalbande</span>
110 |           <span>•</span>
111 |           <span>Harshika Rathod</span>
112 |           <span>•</span>
113 |           <span>Arnav Varhade</span>
114 |           <span>•</span>
115 |           <span>Shruti Thakur</span>
116 |         </div>
117 |       </div>
118 |     </footer>
119 |   );
120 | };
121 | 
122 | export default Footer;
123 | 


--------------------------------------------------------------------------------
/app/MagicButton.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const MagicButton = ({
 4 |   title,
 5 |   icon,
 6 |   position,
 7 |   handleClick,
 8 |   otherClasses,
 9 | }: {
10 |   title: string;
11 |   icon: React.ReactNode;
12 |   position: string;
13 |   handleClick?: () => void;
14 |   otherClasses?: string;
15 | }) => {
16 |   return (
17 |     <button
18 |       className="relative inline-flex h-12 w-full md:w-60 md:mt-4 mx-auto overflow-hidden rounded-lg p-[1px] focus:outline-none"
19 |       onClick={handleClick}
20 |     >
21 |       <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]" />
22 | 
23 |       {/* remove px-3 py-1, add px-5 gap-2 */}
24 |       <span
25 |         className={`inline-flex h-full w-full cursor-pointer items-center justify-center rounded-lg
26 |              bg-slate-950 px-7  font-medium text-white backdrop-blur-3xl gap-2 ${otherClasses}`}
27 |       >
28 |         {position === "left" && icon}
29 |         {title}
30 |         {position === "right" && icon}
31 |       </span>
32 |     </button>
33 |   );
34 | };
35 | 
36 | export default MagicButton;
37 | 


--------------------------------------------------------------------------------
/app/_components/AppHeader.tsx:
--------------------------------------------------------------------------------
 1 | import { SidebarTrigger } from '@/components/ui/sidebar'
 2 | import React, { useState } from 'react'
 3 | import ProfileAvatar from './ProfileAvatar'
 4 | import Image from 'next/image'
 5 | import { useRouter } from 'next/navigation';
 6 | import { motion } from 'framer-motion';
 7 | 
 8 | function AppHeader({ hideSidebar = false }) {
 9 | 
10 |     const router = useRouter();
11 |         const [isTransitioning, setIsTransitioning] = useState(false);
12 |     
13 |         const handleNavigation = (href: string) => {
14 |             setIsTransitioning(true);
15 |             setTimeout(() => {
16 |                 router.push(href);
17 |             }, 500); // Delays navigation for animation
18 |         };
19 | 
20 |     return (
21 |     <>
22 |         {isTransitioning && (
23 |             <motion.div
24 |                 className="fixed inset-0 bg-[#050816] z-50"
25 |                 initial={{ opacity: 0 }}
26 |                 animate={{ opacity: 1 }}
27 |                 exit={{ opacity: 0 }}
28 |                 transition={{ duration: 0.5 }}
29 |             />
30 |         )}
31 | 
32 |         <div className="flex top-0 left-0 right-0 z-50 p-4 shadow-sm items-center justify-between 
33 |             w-full bg-[#050816]/70 backdrop-blur-md border-b border-white/20 text-white"
34 |         >
35 |             {!hideSidebar ? (
36 |                 <SidebarTrigger />
37 |             ) : (
38 |                 <button onClick={() => handleNavigation('/dashboard')} className="flex items-center gap-2 cursor-pointer">
39 |                     <Image src={'/logo_h.png'} alt='logo' width={100} height={100}
40 |                         className='w-[50px] h-[34px]' />
41 |                     <h2 className='font-bold text-lg'>Vision to Web</h2>
42 |                 </button>
43 |             )}
44 |             
45 |             <ProfileAvatar />
46 |         </div>
47 |     </>
48 | );
49 | 
50 | }
51 | 
52 | export default AppHeader


--------------------------------------------------------------------------------
/app/_components/AppSidebar.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react'
 2 | import {
 3 |     Sidebar,
 4 |     SidebarContent,
 5 |     SidebarFooter,
 6 |     SidebarGroup,
 7 |     SidebarGroupContent,
 8 |     SidebarHeader,
 9 |     SidebarMenu,
10 | } from "@/components/ui/sidebar"
11 | import { CircleDollarSign, Home, Paintbrush } from "lucide-react"
12 | import Image from 'next/image'
13 | import { usePathname, useRouter } from 'next/navigation'
14 | import { motion } from 'framer-motion'
15 | 
16 | const items = [
17 |     {
18 |         title: "Workspace",
19 |         url: "/dashboard",
20 |         icon: Home,
21 |     },
22 |     {
23 |         title: "History",
24 |         url: "/designs",
25 |         icon: Paintbrush,
26 |     },
27 |     // {
28 |     //     title: "Credits",
29 |     //     url: "/credits",
30 |     //     icon: CircleDollarSign,
31 |     // },
32 | ]
33 | 
34 | export function AppSidebar() {
35 |     const path = usePathname();
36 |     const router = useRouter();
37 |     const [isTransitioning, setIsTransitioning] = useState(false);
38 | 
39 |     const handleNavigation = (href: string) => {
40 |         setIsTransitioning(true);
41 |         setTimeout(() => {
42 |             router.push(href);
43 |         }, 500); // Delays navigation for animation
44 |     };
45 | 
46 |     return (
47 |         <>
48 |             {isTransitioning && (
49 |                 <motion.div
50 |                     className="fixed inset-0 bg-[#050816] z-50"
51 |                     initial={{ opacity: 0 }}
52 |                     animate={{ opacity: 1 }}
53 |                     exit={{ opacity: 0 }}
54 |                     transition={{ duration: 0.5 }}
55 |                 />
56 |             )}
57 | 
58 |             {/* Sidebar with Fixed Border Color */}
59 |             <Sidebar className="!bg-[#050816] min-h-screen text-white !border-[#050816]">
60 |                 <SidebarHeader className="!bg-[#050816] !border-[#050816]">
61 |                     <div className='p-4'>
62 |                         <button onClick={() => handleNavigation('/')} className="cursor-pointer">
63 |                             <div className='flex items-center gap-2'>
64 |                                 <Image src={'/logo_h.png'} alt='logo' width={100} height={100}
65 |                                     className='w-[50px] h-[34px]' />
66 |                                 <h2 className='font-bold text-lg text-white'>Vison To Web</h2>
67 |                             </div>
68 |                             <h2 className='text-sm text-gray-400 text-center'>Build Awesome</h2>
69 |                         </button>
70 |                     </div>
71 |                 </SidebarHeader>
72 | 
73 |                 <SidebarContent className="!bg-[#050816] !border-[#050816]">
74 |                     <SidebarGroup>
75 |                         <SidebarGroupContent>
76 |                             <SidebarMenu className='mt-5'>
77 |                                 {items.map((item, index) => (
78 |                                     <a href={item.url} key={index}
79 |                                         className={`p-2 text-lg flex gap-2 items-center text-white
80 |                                         hover:bg-gray-700 rounded-lg
81 |                                         ${path === item.url ? 'bg-gray-600' : ''}
82 |                                         `}>
83 |                                         <item.icon className='h-5 w-5' />
84 |                                         <span>{item.title}</span>
85 |                                     </a>
86 |                                 ))}
87 |                             </SidebarMenu>
88 |                         </SidebarGroupContent>
89 |                     </SidebarGroup>
90 |                 </SidebarContent>
91 | 
92 |                 <SidebarFooter className="!bg-[#050816] !border-[#050816]">
93 |                     <h2 className='p-2 text-gray-400 text-sm'>vision2web.vercel.app</h2>
94 |                 </SidebarFooter>
95 |             </Sidebar>
96 |         </>
97 |     )
98 | }
99 | 


--------------------------------------------------------------------------------
/app/_components/Authentication.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | import { auth } from '@/configs/firebaseConfig';
 3 | import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
 4 | import React from 'react'
 5 | 
 6 | function Authentication({ children }: any) {
 7 |     const provider = new GoogleAuthProvider();
 8 | 
 9 |     const onButtonPress = () => {
10 |         signInWithPopup(auth, provider)
11 |             .then((result) => {
12 |                 // This gives you a Google Access Token. You can use it to access the Google API.
13 |                 const credential: any = GoogleAuthProvider.credentialFromResult(result);
14 |                 const token = credential.accessToken;
15 |                 // The signed-in user info.
16 |                 const user = result.user;
17 |                 console.log(user);
18 |                 // IdP data available using getAdditionalUserInfo(result)
19 |                 // ...
20 |             }).catch((error) => {
21 |                 // Handle Errors here.
22 |                 const errorCode = error.code;
23 |                 const errorMessage = error.message;
24 |                 // The email of the user's account used.
25 |                 const email = error.customData.email;
26 |                 // The AuthCredential type that was used.
27 |                 const credential = GoogleAuthProvider.credentialFromError(error);
28 |                 // ...
29 |             });
30 |     }
31 |     return (
32 |         <div>
33 |             <div onClick={onButtonPress}>
34 |                 {children}
35 |             </div>
36 |         </div>
37 |     )
38 | }
39 | 
40 | export default Authentication


--------------------------------------------------------------------------------
/app/_components/ProfileAvatar.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | import { auth } from '@/configs/firebaseConfig';
 3 | import { onAuthStateChanged, signOut } from 'firebase/auth';
 4 | import Image from 'next/image';
 5 | import React, { useEffect } from 'react'
 6 | import { useAuthContext } from '../provider';
 7 | import {
 8 |     Popover,
 9 |     PopoverContent,
10 |     PopoverTrigger,
11 | } from "@/components/ui/popover"
12 | 
13 | import { Button } from '@/components/ui/button';
14 | import { useRouter } from 'next/navigation';
15 | 
16 | function ProfileAvatar() {
17 | 
18 |     const user = useAuthContext();
19 |     const router = useRouter();
20 |     const onButtonPress = () => {
21 |         signOut(auth).then(() => {
22 |             // Sign-out successful.
23 |             router.replace('/')
24 |         }).catch((error) => {
25 |             // An error happened.
26 |         });
27 |     }
28 |     return (
29 |       <div>
30 |         <Popover>
31 |           <PopoverTrigger>
32 |             {user?.user?.photoURL && (
33 |               <img
34 |                 src={user?.user?.photoURL}
35 |                 alt="profile"
36 |                 className="w-[35px] h-[35px] rounded-full"
37 |               />
38 |             )}
39 |           </PopoverTrigger>
40 |           <PopoverContent className="w-[110px] bg-transparent border-none shadow-none p-0 mt-6">
41 |             <Button
42 |               variant="ghost"
43 |               onClick={onButtonPress}
44 |               className="w-[110px] h-[48px] px-3 py-1 bg-slate-950 rounded-md text-white border border-purple-800/80"
45 |             >
46 |               Logout
47 |             </Button>
48 |           </PopoverContent>
49 |         </Popover>
50 |       </div>
51 |     );
52 | }
53 | 
54 | export default ProfileAvatar


--------------------------------------------------------------------------------
/app/api/ai-model/route.tsx:
--------------------------------------------------------------------------------
 1 | import Constants from "@/data/Constants";
 2 | import { NextRequest } from "next/server";
 3 | import OpenAI from "openai"
 4 | const openai = new OpenAI({
 5 |     baseURL: "https://openrouter.ai/api/v1",
 6 |     apiKey: process.env.OPENROUTER_AI_API_KEY,
 7 | 
 8 | })
 9 | export const maxDuration = 59;
10 | 
11 | export async function POST(req: NextRequest) {
12 | 
13 |     const { model, description, imageUrl } = await req.json();
14 | 
15 |     const ModelObj = Constants.AiModelList.find(item => item.name == model)
16 |     const modelName = ModelObj?.modelName;
17 |     console.log(modelName);
18 |     const response = await openai.chat.completions.create({
19 |         model: modelName ?? 'google/gemini-2.0-flash-exp:free',
20 |         stream: true,
21 |         messages: [
22 |             {
23 |                 "role": "user",
24 |                 "content": [
25 |                     {
26 |                         "type": "text",
27 |                         "text": description
28 |                     },
29 |                     {
30 |                         "type": "image_url",
31 |                         "image_url": {
32 |                             "url": imageUrl
33 |                         }
34 |                     }
35 |                 ]
36 |             }
37 |         ]
38 |     });
39 | 
40 |     // Create a readable stream to send data in real-time
41 |     const stream = new ReadableStream({
42 |         async start(controller) {
43 |             for await (const chunk of response) {
44 |                 const text = chunk.choices?.[0]?.delta?.content || "";
45 |                 controller.enqueue(new TextEncoder().encode(text)); // Send data chunk
46 |             }
47 |             controller.close(); // End stream
48 |         },
49 |     });
50 | 
51 |     return new Response(stream, {
52 |         headers: {
53 |             "Content-Type": "text/plain; charset=utf-8",
54 |         },
55 |     });
56 | 
57 | }


--------------------------------------------------------------------------------
/app/api/user/route.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | import { NextRequest, NextResponse } from "next/server";
 3 | import { eq } from "drizzle-orm";
 4 | import { db } from "@/configs/db";
 5 | import { usersTable } from "@/configs/schema";
 6 | 
 7 | export async function POST(req: NextRequest) {
 8 |     const { userEmail, userName } = await req.json();
 9 |     console.log(userEmail)
10 |     // try {
11 |     const result = await db.select().from(usersTable)
12 |         .where(eq(usersTable.email, userEmail));
13 | 
14 |     if (result?.length == 0) {
15 | 
16 |         const result: any = await db.insert(usersTable).values({
17 |             name: userName,
18 |             email: userEmail,
19 |             credits: 10,
20 |             // @ts-ignore
21 |         }).returning(usersTable);
22 | 
23 |         return NextResponse.json(result[0]);
24 |     }
25 |     return NextResponse.json(result[0]);
26 | 
27 | 
28 |     // } catch (e) {
29 |     //     return NextResponse.json(e)
30 |     // }
31 | }
32 | 
33 | export async function GET(req: Request) {
34 |     const reqUrl = req.url;
35 |     const { searchParams } = new URL(reqUrl);
36 |     const email = searchParams?.get('email');
37 | 
38 |     if (email) {
39 |         const result = await db.select().from(usersTable)
40 |             .where(eq(usersTable.email, email));
41 |         return NextResponse.json(result[0]);
42 |     }
43 | }


--------------------------------------------------------------------------------
/app/api/wireframe-to-code/route.tsx:
--------------------------------------------------------------------------------
 1 | import { db } from "@/configs/db";
 2 | import { usersTable, WireframeToCodeTable } from "@/configs/schema";
 3 | import { desc, eq } from "drizzle-orm";
 4 | import { NextRequest, NextResponse } from "next/server";
 5 | 
 6 | export async function POST(req: NextRequest) {
 7 |     const { description, imageUrl, model, uid, email } = await req.json();
 8 |     console.log(uid)
 9 | 
10 |     const creditResult = await db.select().from(usersTable)
11 |         .where(eq(usersTable.email, email));
12 | 
13 |     if (creditResult[0]?.credits && creditResult[0]?.credits > 0) {
14 | 
15 |         const result = await db.insert(WireframeToCodeTable).values({
16 |             uid: uid.toString(),
17 |             description: description,
18 |             imageUrl: imageUrl,
19 |             model: model,
20 |             createdBy: email
21 |         }).returning({ id: WireframeToCodeTable.id });
22 | 
23 |         // Update user credits
24 |         const data = await db.update(usersTable).set({
25 |             credits: creditResult[0]?.credits - 1
26 |         }).where(eq(usersTable.email, email));
27 | 
28 |         return NextResponse.json(result);
29 |     }
30 |     else {
31 |         return NextResponse.json({ 'error': 'Not enough credits' })
32 |     }
33 | }
34 | 
35 | export async function GET(req: Request) {
36 |     const reqUrl = req.url;
37 |     const { searchParams } = new URL(reqUrl);
38 |     const uid = searchParams?.get('uid');
39 |     const email = searchParams?.get('email');
40 |     if (uid) {
41 |         const result = await db.select()
42 |             .from(WireframeToCodeTable)
43 |             .where(eq(WireframeToCodeTable.uid, uid));
44 |         return NextResponse.json(result[0]);
45 |     }
46 |     else if (email) {
47 |         const result = await db.select()
48 |             .from(WireframeToCodeTable)
49 |             .where(eq(WireframeToCodeTable.createdBy, email))
50 |             .orderBy(desc(WireframeToCodeTable.id))
51 |             ;
52 |         return NextResponse.json(result);
53 |     }
54 | 
55 |     return NextResponse.json({ error: 'No Record Found' })
56 | 
57 | }
58 | 
59 | export async function PUT(req: NextRequest) {
60 |     const { uid, codeResp } = await req.json();
61 | 
62 |     const result = await db.update(WireframeToCodeTable)
63 |         .set({
64 |             code: codeResp
65 |         }).where(eq(WireframeToCodeTable.uid, uid))
66 |         .returning({ uid: WireframeToCodeTable.uid })
67 | 
68 |     return NextResponse.json(result);
69 | 
70 | }


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atharva-aak/vision2web/8eca80ddfd19000fdbf3cde599ffb8d7f4a71257/app/favicon.ico


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
  1 | @tailwind base;
  2 | @tailwind components;
  3 | @tailwind utilities;
  4 | 
  5 | 
  6 | body {
  7 |   font-family: Arial, Helvetica, sans-serif;
  8 |   
  9 | }
 10 | 
 11 | 
 12 | 
 13 | @layer base {
 14 |   :root {
 15 |     --background: 0 0% 100%;
 16 |     --foreground: 0 0% 3.9%;
 17 |     --card: 0 0% 100%;
 18 |     --card-foreground: 0 0% 3.9%;
 19 |     --popover: 0 0% 100%;
 20 |     --popover-foreground: 0 0% 3.9%;
 21 |     --primary: 0 0% 9%;
 22 |     --primary-foreground: 0 0% 98%;
 23 |     --secondary: 0 0% 96.1%;
 24 |     --secondary-foreground: 0 0% 9%;
 25 |     --muted: 0 0% 96.1%;
 26 |     --muted-foreground: 0 0% 45.1%;
 27 |     --accent: 0 0% 96.1%;
 28 |     --accent-foreground: 0 0% 9%;
 29 |     --destructive: 0 84.2% 60.2%;
 30 |     --destructive-foreground: 0 0% 98%;
 31 |     --border: 0 0% 89.8%;
 32 |     --input: 0 0% 89.8%;
 33 |     --ring: 0 0% 3.9%;
 34 |     --chart-1: 12 76% 61%;
 35 |     --chart-2: 173 58% 39%;
 36 |     --chart-3: 197 37% 24%;
 37 |     --chart-4: 43 74% 66%;
 38 |     --chart-5: 27 87% 67%;
 39 |     --radius: 0.5rem;
 40 |     --sidebar-background: 0 0% 98%;
 41 |     --sidebar-foreground: 240 5.3% 26.1%;
 42 |     --sidebar-primary: 240 5.9% 10%;
 43 |     --sidebar-primary-foreground: 0 0% 98%;
 44 |     --sidebar-accent: 240 4.8% 95.9%;
 45 |     --sidebar-accent-foreground: 240 5.9% 10%;
 46 |     --sidebar-border: 220 13% 91%;
 47 |     --sidebar-ring: 217.2 91.2% 59.8%;
 48 |   }
 49 | 
 50 |   .dark {
 51 |     --background: 0 0% 3.9%;
 52 |     --foreground: 0 0% 98%;
 53 |     --card: 0 0% 3.9%;
 54 |     --card-foreground: 0 0% 98%;
 55 |     --popover: 0 0% 3.9%;
 56 |     --popover-foreground: 0 0% 98%;
 57 |     --primary: 0 0% 98%;
 58 |     --primary-foreground: 0 0% 9%;
 59 |     --secondary: 0 0% 14.9%;
 60 |     --secondary-foreground: 0 0% 98%;
 61 |     --muted: 0 0% 14.9%;
 62 |     --muted-foreground: 0 0% 63.9%;
 63 |     --accent: 0 0% 14.9%;
 64 |     --accent-foreground: 0 0% 98%;
 65 |     --destructive: 0 62.8% 30.6%;
 66 |     --destructive-foreground: 0 0% 98%;
 67 |     --border: 0 0% 14.9%;
 68 |     --input: 0 0% 14.9%;
 69 |     --ring: 0 0% 83.1%;
 70 |     --chart-1: 220 70% 50%;
 71 |     --chart-2: 160 60% 45%;
 72 |     --chart-3: 30 80% 55%;
 73 |     --chart-4: 280 65% 60%;
 74 |     --chart-5: 340 75% 55%;
 75 |     --sidebar-background: 240 5.9% 10%;
 76 |     --sidebar-foreground: 240 4.8% 95.9%;
 77 |     --sidebar-primary: 224.3 76.3% 48%;
 78 |     --sidebar-primary-foreground: 0 0% 100%;
 79 |     --sidebar-accent: 240 3.7% 15.9%;
 80 |     --sidebar-accent-foreground: 240 4.8% 95.9%;
 81 |     --sidebar-border: 240 3.7% 15.9%;
 82 |     --sidebar-ring: 217.2 91.2% 59.8%;
 83 |   }
 84 | }
 85 | 
 86 | @layer base {
 87 |   * {
 88 |     @apply border-border;
 89 |   }
 90 | 
 91 |   body {
 92 |     @apply bg-background text-foreground;
 93 |   }
 94 | }
 95 | 
 96 | 
 97 | @layer base {
 98 |   :root {
 99 |     --sidebar-background: 0 0% 98%;
100 |     --sidebar-foreground: 240 5.3% 26.1%;
101 |     --sidebar-primary: 240 5.9% 10%;
102 |     --sidebar-primary-foreground: 0 0% 98%;
103 |     --sidebar-accent: 240 4.8% 95.9%;
104 |     --sidebar-accent-foreground: 240 5.9% 10%;
105 |     --sidebar-border: 220 13% 91%;
106 |     --sidebar-ring: 217.2 91.2% 59.8%;
107 |   }
108 | 
109 |   .dark {
110 |     --sidebar-background: 240 5.9% 10%;
111 |     --sidebar-foreground: 240 4.8% 95.9%;
112 |     --sidebar-primary: 224.3 76.3% 48%;
113 |     --sidebar-primary-foreground: 0 0% 100%;
114 |     --sidebar-accent: 240 3.7% 15.9%;
115 |     --sidebar-accent-foreground: 240 4.8% 95.9%;
116 |     --sidebar-border: 240 3.7% 15.9%;
117 |     --sidebar-ring: 217.2 91.2% 59.8%;
118 |   }
119 | }


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import { Geist, Geist_Mono, Outfit } from "next/font/google";
 3 | import "./globals.css";
 4 | import Provider from "./provider";
 5 | import { Toaster } from "@/components/ui/sonner";
 6 | import { Analytics } from '@vercel/analytics/next';
 7 | 
 8 | const geistSans = Geist({
 9 |   variable: "--font-geist-sans",
10 |   subsets: ["latin"],
11 | });
12 | 
13 | const geistMono = Geist_Mono({
14 |   variable: "--font-geist-mono",
15 |   subsets: ["latin"],
16 | });
17 | 
18 | export const metadata: Metadata = {
19 |   title: "Vision To Web",
20 |   description: "Converting Wireframe into Code",
21 | };
22 | const outift = Outfit({ subsets: ['latin'] })
23 | export default function RootLayout({
24 |   children,
25 | }: Readonly<{
26 |   children: React.ReactNode;
27 | }>) {
28 |   return (
29 |     <html lang="en">
30 |       <body
31 |         className={outift.className}
32 |       >
33 |         <Provider>
34 |           {children}
35 |           <Toaster />
36 |         </Provider>
37 |         <Analytics />
38 |       </body>
39 |     </html>
40 |   );
41 | }
42 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | import Image from "next/image";
  3 | import Link from "next/link";
  4 | import Authentication from "./_components/Authentication";
  5 | import { Button } from "@/components/ui/button";
  6 | import { auth } from "@/configs/firebaseConfig";
  7 | import ProfileAvatar from "./_components/ProfileAvatar";
  8 | import { useAuthContext } from "./provider";
  9 | import MagicButton from "./MagicButton";
 10 | import Contact from "./Contact";
 11 | import Footer from "./Footer";
 12 | import { useState } from "react";
 13 | import { useRouter } from "next/navigation";
 14 | import { motion } from "framer-motion";
 15 | 
 16 | export default function Home() {
 17 |   const user = useAuthContext();
 18 |   console.log(user?.user);
 19 |   // Add state to control mobile menu
 20 |   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 21 | 
 22 |   // Toggle mobile menu function
 23 |   const toggleMobileMenu = () => {
 24 |     setMobileMenuOpen(!mobileMenuOpen);
 25 |   };
 26 |   const router = useRouter();
 27 |   const [isTransitioning, setIsTransitioning] = useState(false);
 28 | 
 29 |   const handleNavigation = () => {
 30 |     setIsTransitioning(true);
 31 |     setTimeout(() => {
 32 |       router.push("/dashboard");
 33 |     }, 500); // Delay navigation to allow the transition effect
 34 |   };
 35 | 
 36 |   return (
 37 |     <>
 38 |                 {isTransitioning && (
 39 |                     <motion.div
 40 |                         className="fixed inset-0 bg-[#050816] z-50"
 41 |                         initial={{ opacity: 0 }}
 42 |                         animate={{ opacity: 1 }}
 43 |                         exit={{ opacity: 0 }}
 44 |                         transition={{ duration: 0.5 }}
 45 |                     />
 46 |                 )}
 47 |     <div className="min-h-screen bg-[#050816] bg-[url('/herobg.png')] bg-contain bg-top bg-no-repeat">
 48 |       <section id="home"></section>
 49 |       <header className="fixed top-0 left-0 z-50 w-full bg-transparent backdrop-blur-md border-b border-white/20 text-sm py-3 sm:py-3">
 50 |         <nav
 51 |           className="relative max-w-[85rem] w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8"
 52 |           aria-label="Global"
 53 |         > 
 54 |           <div className="flex items-center justify-between">
 55 |             {/* Logo and Brand Name */}
 56 |             <div
 57 |               className="flex items-center gap-2 whitespace-nowrap cursor-pointer"
 58 |               onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
 59 |             >
 60 |               <Image
 61 |                 src="/logo_h.png"
 62 |                 alt="logo"
 63 |                 width={290}
 64 |                 height={110}
 65 |                 className="w-[60px] h-[40px]"
 66 |               />
 67 |               <h2 className="font-bold text-lg text-white">Vision To Web</h2>
 68 |             </div>
 69 | 
 70 |             {/* Mobile menu button */}
 71 |             <div className="sm:hidden">
 72 |               <button
 73 |                 type="button"
 74 |                 className="p-2 text-white hover:text-violet-500 focus:outline-none"
 75 |                 aria-label={mobileMenuOpen ? "Close menu" : "Open menu"}
 76 |                 onClick={toggleMobileMenu}
 77 |               >
 78 |                 <svg
 79 |                   xmlns="http://www.w3.org/2000/svg"
 80 |                   fill="none"
 81 |                   viewBox="0 0 24 24"
 82 |                   stroke="currentColor"
 83 |                   className="h-6 w-6"
 84 |                 >
 85 |                   {mobileMenuOpen ? (
 86 |                     <path
 87 |                       strokeLinecap="round"
 88 |                       strokeLinejoin="round"
 89 |                       strokeWidth={2}
 90 |                       d="M6 18L18 6M6 6l12 12"
 91 |                     />
 92 |                   ) : (
 93 |                     <path
 94 |                       strokeLinecap="round"
 95 |                       strokeLinejoin="round"
 96 |                       strokeWidth={2}
 97 |                       d="M4 6h16M4 12h16M4 18h16"
 98 |                     />
 99 |                   )}
100 |                 </svg>
101 |               </button>
102 |             </div>
103 |           </div>
104 | 
105 |           {/* Navigation Links */}
106 |           <div
107 |             className={`${
108 |               mobileMenuOpen ? "block" : "hidden"
109 |             } transition-all duration-300 basis-full grow sm:block mt-4 sm:mt-0`}
110 |           >
111 |             <div className="flex flex-col sm:flex-row sm:items-center sm:justify-end sm:ps-7 gap-6">
112 |               {/* Navigation Items */}
113 |               <a
114 |                 className="text-white font-medium hover:text-violet-500 transition-all cursor-pointer py-2 sm:py-0"
115 |                 onClick={() => {
116 |                   window.scrollTo({ top: 0, behavior: "smooth" });
117 |                   setMobileMenuOpen(false);
118 |                 }}
119 |               >
120 |                 HOME
121 |               </a>
122 | 
123 |               <div
124 |                 className="flex items-center gap-2 whitespace-nowrap cursor-pointer text-white font-medium hover:text-violet-500 transition-all py-2 sm:py-0"
125 |                 onClick={() => {
126 |                   const element = document.getElementById("features");
127 |                   if (element) {
128 |                     element.scrollIntoView({ behavior: "smooth" });
129 |                     setMobileMenuOpen(false);
130 |                   }
131 |                 }}
132 |               >
133 |                 ABOUT
134 |               </div>
135 | 
136 |               <div
137 |                 className="flex items-center gap-2 whitespace-nowrap cursor-pointer text-white font-medium hover:text-violet-500 transition-all py-2 sm:py-0"
138 |                 onClick={() => {
139 |                   const element = document.getElementById("features2");
140 |                   if (element) {
141 |                     element.scrollIntoView({ behavior: "smooth" });
142 |                     setMobileMenuOpen(false);
143 |                   }
144 |                 }}
145 |               >
146 |                 CONTACT
147 |               </div>
148 | 
149 |               {/* Authentication / Profile */}
150 |               {!user?.user?.email ? (
151 |                 <Authentication>
152 |                   <div className="flex items-center gap-x-2 text-white font-medium hover:text-violet-500 transition-all sm:border-l sm:border-white/30 py-2 sm:py-0 sm:ml-4 sm:pl-6 cursor-pointer">
153 |                     <svg
154 |                       className="flex-shrink-0 size-4"
155 |                       xmlns="http://www.w3.org/2000/svg"
156 |                       width="16"
157 |                       height="16"
158 |                       fill="currentColor"
159 |                       viewBox="0 0 16 16"
160 |                     >
161 |                       <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z" />
162 |                     </svg>
163 |                     Get Started
164 |                   </div>
165 |                 </Authentication>
166 |               ) : (
167 |                 <ProfileAvatar />
168 |               )}
169 |             </div>
170 |           </div>
171 |         </nav>
172 |       </header>
173 | 
174 |       <div className="relative overflow-hidden before:absolute before:top-0 before:start-1/2 before:bg-[url('https://preline.co/assets/svg/examples/polygon-bg-element.svg')] dark:before:bg-[url('https://preline.co/assets/svg/examples-dark/polygon-bg-element.svg')] before:bg-no-repeat before:bg-top before:bg-cover before:size-full before:-z-[1] before:transform before:-translate-x-1/2">
175 |         <div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-10">
176 |           
177 |           <div className="mt-5 max-w-2xl text-center mx-auto cursor-default select-none">
178 |             <h1 className="block font-bold text-white text-4xl md:text-5xl lg:text-6xl dark:text-neutral-200">
179 |               Design it. Build it
180 |               <span className="bg-clip-text bg-gradient-to-tl from-violet-900 to-violet-500 text-transparent">
181 |                 {" "}
182 |                 Instantly
183 |               </span>
184 |             </h1>
185 |           </div>
186 | 
187 |           <div className="mt-5 max-w-3xl text-center mx-auto cursor-default select-none">
188 |             <p className="text-lg text-gray-400 dark:text-neutral-400">
189 |               Revolutionize your content creation with our AI-powered app,
190 |               delivering engaging and high quality codes in seconds.
191 |             </p>
192 |           </div>
193 | 
194 |           <div className="mt-8 gap-3 flex justify-center select-none">
195 |         {user?.user?.email ? (
196 |           <div onClick={handleNavigation} className="flex items-center cursor-pointer">
197 |           <MagicButton title="Get Started" position="right" icon={undefined} />
198 |           <svg
199 |             className="flex-shrink-0 size-4"
200 |             xmlns="http://www.w3.org/2000/svg"
201 |             width="24"
202 |             height="24"
203 |             viewBox="0 0 24 24"
204 |             fill="none"
205 |             stroke="currentColor"
206 |             strokeWidth="2"
207 |             strokeLinecap="round"
208 |             strokeLinejoin="round"
209 |           >
210 |             <path d="m9 18 6-6-6-6" />
211 |           </svg>
212 |         </div>
213 |         
214 |         ) : (
215 |           <Authentication>
216 |             <MagicButton title="Get Started" position="right" icon={undefined} />
217 |           </Authentication>
218 |         )}
219 |       </div>
220 |         </div>
221 |       </div>
222 | 
223 |       <div className="flex justify-center py-10">
224 |         <video
225 |           src="/landingvid.mp4"
226 |           autoPlay
227 |           loop
228 |           muted
229 |           width={800}
230 |           height={450}
231 |           className="w-full max-w-[800px] h-auto mt-[-30px] object-contain rounded-lg shadow-lg"
232 |         />
233 |       </div>
234 |       {/* <div className="mt-10 text-center">
235 |         <h2 className="text-4xl font-bold text-white">ABOUT</h2>
236 |       </div> */}
237 | 
238 |       <div id="features" className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto cursor-default">
239 |         <div className="grid sm:grid-cols-2 lg:grid-cols-4 items-center gap-2">
240 |           <a
241 |             className="group flex flex-col justify-center rounded-xl p-4 md:p-7 transition-all duration-200 
242 |              bg-transparent backdrop-blur-0 border border-transparent 
243 |              hover:backdrop-blur-xl hover:border-purple-800/80"
244 |           >
245 |             <div className="flex justify-center items-center size-12 bg-purple-600 rounded-xl">
246 |               <svg
247 |                 xmlns="http://www.w3.org/2000/svg"
248 |                 width="24"
249 |                 height="24"
250 |                 viewBox="0 0 24 24"
251 |                 fill="none"
252 |                 stroke="currentColor"
253 |                 strokeWidth="2"
254 |                 strokeLinecap="round"
255 |                 strokeLinejoin="round"
256 |                 // class="lucide lucide-file-code-2"
257 |               >
258 |                 <path d="M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4" />
259 |                 <path d="M14 2v4a2 2 0 0 0 2 2h4" />
260 |                 <path d="m5 12-3 3 3 3" />
261 |                 <path d="m9 18 3-3-3-3" />
262 |               </svg>
263 |             </div>
264 |             <div  className="mt-5">
265 |               <h3 className="group-hover:text-gray-100 text-lg font-semibold text-gray-400 dark:text-white dark:group-hover:text-gray-400">
266 |                 Effortless Conversion
267 |               </h3>
268 |               <p className="mt-1 group-hover:text-gray-300 text-gray-500 dark:text-neutral-400">
269 |                 Quickly transform wireframes into clean, structured, and
270 |                 production-ready code with minimal effort.
271 |               </p>
272 |             </div>
273 |           </a>
274 | 
275 |           <a
276 |             className="group flex flex-col justify-center rounded-xl p-4 md:p-7 transition-all duration-200 
277 |              bg-transparent backdrop-blur-0 border border-transparent 
278 |              hover:backdrop-blur-xl hover:border-purple-800/80"
279 |           >
280 |             <div className="flex justify-center items-center size-12 bg-purple-600 rounded-xl">
281 |               <svg
282 |                 xmlns="http://www.w3.org/2000/svg"
283 |                 width="24"
284 |                 height="24"
285 |                 viewBox="0 0 24 24"
286 |                 fill="none"
287 |                 stroke="currentColor"
288 |                 strokeWidth="2"
289 |                 strokeLinecap="round"
290 |                 strokeLinejoin="round"
291 |                 className="lucide lucide-git-fork"
292 |               >
293 |                 <circle cx="12" cy="18" r="3" />
294 |                 <circle cx="6" cy="6" r="3" />
295 |                 <circle cx="18" cy="6" r="3" />
296 |                 <path d="M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9" />
297 |                 <path d="M12 12v3" />
298 |               </svg>
299 |             </div>
300 |             <div className="mt-5">
301 |               <h3 className="group-hover:text-gray-100 text-lg font-semibold text-gray-400 dark:text-white dark:group-hover:text-gray-400">
302 |                 Customizable
303 |               </h3>
304 |               <p className="mt-1 group-hover:text-gray-300 text-gray-500 dark:text-neutral-400">
305 |                 Easily adapt and extend components to match your project's
306 |                 unique design and functionality.
307 |               </p>
308 |             </div>
309 |           </a>
310 | 
311 |           <a
312 |             className="group flex flex-col justify-center rounded-xl p-4 md:p-7 transition-all duration-200 
313 |              bg-transparent backdrop-blur-0 border border-transparent 
314 |              hover:backdrop-blur-xl hover:border-purple-800/80"
315 |           >
316 |             <div className="flex justify-center items-center size-12 bg-purple-600 rounded-xl">
317 |               <svg
318 |                 xmlns="http://www.w3.org/2000/svg"
319 |                 width="24"
320 |                 height="24"
321 |                 viewBox="0 0 24 24"
322 |                 fill="none"
323 |                 stroke="currentColor"
324 |                 strokeWidth="2"
325 |                 strokeLinecap="round"
326 |                 strokeLinejoin="round"
327 |                 className="lucide lucide-book-open-check"
328 |               >
329 |                 <path d="M12 21V7" />
330 |                 <path d="m16 12 2 2 4-4" />
331 |                 <path d="M22 6V4a1 1 0 0 0-1-1h-5a4 4 0 0 0-4 4 4 4 0 0 0-4-4H3a1 1 0 0 0-1 1v13a1 1 0 0 0 1 1h6a3 3 0 0 1 3 3 3 3 0 0 1 3-3h6a1 1 0 0 0 1-1v-1.3" />
332 |               </svg>
333 |             </div>
334 |             <div className="mt-5">
335 |               <h3 className="group-hover:text-gray-100 text-lg font-semibold text-gray-400 dark:text-white dark:group-hover:text-gray-400">
336 |                 Free to Use
337 |               </h3>
338 |               <p className="mt-1 group-hover:text-gray-300 text-gray-500 dark:text-neutral-400">
339 |                 Access a powerful wireframe-to-code conversion tool with
340 |                 well-documented resources at no cost.
341 |               </p>
342 |             </div>
343 |           </a>
344 | 
345 |           <a
346 |             className="group flex flex-col justify-center rounded-xl p-4 md:p-7 transition-all duration-200
347 |              bg-transparent backdrop-blur-0 border border-transparent 
348 |              hover:backdrop-blur-xl hover:border-purple-800/80"
349 |           >
350 |             <div className="flex justify-center items-center size-12 bg-purple-600 rounded-xl">
351 |               <svg
352 |                 xmlns="http://www.w3.org/2000/svg"
353 |                 width="24"
354 |                 height="24"
355 |                 viewBox="0 0 24 24"
356 |                 fill="none"
357 |                 stroke="currentColor"
358 |                 strokeWidth="2"
359 |                 strokeLinecap="round"
360 |                 strokeLinejoin="round"
361 |                 className="lucide lucide-messages-square"
362 |               >
363 |                 <path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2z" />
364 |                 <path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1" />
365 |               </svg>
366 |             </div>
367 |             <div className="mt-5">
368 |               <h3 className="group-hover:text-gray-100 text-lg font-semibold text-gray-400 dark:text-white dark:group-hover:text-gray-400">
369 |                 Accurate Code Generation
370 |               </h3>
371 |               <p className="mt-1 group-hover:text-gray-300 text-gray-500 dark:text-neutral-400">
372 |                 Get high-quality, production-ready code that aligns with your
373 |                 design specifications.
374 |               </p>
375 |             </div>
376 |           </a>
377 |         </div>
378 |       </div>
379 |       <div id="features2">
380 |       <Contact />
381 |       <Footer />
382 |       </div>
383 |     </div>
384 |     </>
385 |   );
386 | }
387 | 


--------------------------------------------------------------------------------
/app/provider.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | import { auth } from '@/configs/firebaseConfig';
 3 | import { AuthContext } from '@/context/AuthContext';
 4 | import { onAuthStateChanged, User } from 'firebase/auth';
 5 | import React, { useContext, useEffect, useState } from 'react'
 6 | 
 7 | interface AuthContextType {
 8 |     user: User | null;
 9 | }
10 | 
11 | function Provider({
12 |     children,
13 | }: Readonly<{
14 |     children: React.ReactNode;
15 | }>) {
16 |     const [user, setUser] = useState<User | null>(null);
17 | 
18 |     useEffect(() => {
19 |         const unsubscribe = onAuthStateChanged(auth, (user) => {
20 |             setUser(user);
21 |         });
22 | 
23 |         return () => unsubscribe(); // Cleanup
24 |     }, []);
25 | 
26 |     return (
27 |         <AuthContext.Provider value={{ user }}>
28 |             <div>
29 |                 {children}
30 |             </div>
31 |         </AuthContext.Provider>
32 |     )
33 | }
34 | 
35 | // Custom hook to use auth
36 | export const useAuthContext = (): AuthContextType => {
37 |     const context = useContext(AuthContext);
38 |     if (!context) throw new Error("useAuth must be used within an AuthProvider");
39 |     return context;
40 | };
41 | 
42 | export default Provider
43 | 
44 | 


--------------------------------------------------------------------------------
/app/view-code/[uid]/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | import AppHeader from '@/app/_components/AppHeader'
  3 | import Constants from '@/data/Constants'
  4 | import axios from 'axios'
  5 | import { Loader2, LoaderCircle } from 'lucide-react'
  6 | import { useParams, usePathname } from 'next/navigation'
  7 | import React, { useEffect, useState } from 'react'
  8 | import SelectionDetail from '../_components/SelectionDetail'
  9 | import CodeEditor from '../_components/CodeEditor'
 10 | import { read } from 'fs'
 11 | 
 12 | export interface RECORD {
 13 |     id: number,
 14 |     description: string,
 15 |     code: any,
 16 |     imageUrl: string,
 17 |     model: string,
 18 |     createdBy: string,
 19 |     uid: string
 20 | }
 21 | 
 22 | function ViewCode() {
 23 | 
 24 |     const { uid } = useParams();
 25 |     const [loading, setLoading] = useState(false);
 26 |     const [codeResp, setCodeResp] = useState('');
 27 |     const [record, setRecord] = useState<RECORD | null>();
 28 |     const [isReady, setIsReady] = useState(false);
 29 |     // const [isExistingCode,setIsExistingCode]=useState();
 30 |     useEffect(() => {
 31 |         if (typeof window !== undefined) {
 32 |             uid && GetRecordInfo();
 33 | 
 34 |         }
 35 |     }, [uid])
 36 | 
 37 |     const GetRecordInfo = async (regen = false) => {
 38 |         console.log("RUN...")
 39 |         setIsReady(false);
 40 |         setCodeResp('');
 41 |         setLoading(true)
 42 | 
 43 |         const result = await axios.get('/api/wireframe-to-code?uid=' + uid)
 44 | 
 45 |         const resp = result?.data;
 46 |         setRecord(result?.data)
 47 | 
 48 |         if (resp?.code == null || regen) {
 49 |             GenerateCode(resp);
 50 |         }
 51 |         else {
 52 |             setCodeResp(resp?.code?.resp);
 53 |             setLoading(false);
 54 |             setIsReady(true);
 55 |         }
 56 |         if (resp?.error) {
 57 |             console.log("No Record Found")
 58 |         }
 59 |         // setLoading(false);
 60 |     }
 61 | 
 62 |     const GenerateCode = async (record: RECORD) => {
 63 |         setLoading(true)
 64 |         const res = await fetch('/api/ai-model', {
 65 |             method: 'POST',
 66 |             headers: { 'Content-Type': 'application/json' },
 67 |             body: JSON.stringify({
 68 |                 description: record?.description + ":" + Constants.PROMPT,
 69 |                 model: record.model,
 70 |                 imageUrl: record?.imageUrl
 71 |             })
 72 |         });
 73 | 
 74 |         if (!res.body) return;
 75 |         setLoading(false);
 76 |         const reader = res.body.getReader();
 77 |         const decoder = new TextDecoder();
 78 |         while (true) {
 79 |             const { done, value } = await reader.read();
 80 |             if (done) break;
 81 | 
 82 |             const text = (decoder.decode(value)).replace('```jsx', '').replace('```javascript', '').replace('javascript', '').replace('jsx', '').replace('```js','').replace('js','').replace('```', '');
 83 |             setCodeResp((prev) => prev + text);
 84 |             console.log(text);
 85 | 
 86 |         }
 87 | 
 88 |         setIsReady(true);
 89 |         UpdateCodeToDb();
 90 |     }
 91 | 
 92 |     useEffect(() => {
 93 |         if (codeResp != '' && record?.uid && isReady && record?.code == null) {
 94 |             UpdateCodeToDb();
 95 |         }
 96 |     }, [codeResp && record && isReady])
 97 | 
 98 | 
 99 |     const UpdateCodeToDb = async () => {
100 |         console.log(record)
101 |         const result = await axios.put('/api/wireframe-to-code', {
102 |             uid: record?.uid,
103 |             codeResp: { resp: codeResp }
104 |         });
105 | 
106 |         console.log(result);
107 |     }
108 | 
109 | 
110 | 
111 |     return (
112 |         <div className=''>
113 |              <main
114 |                 className="w-full h-screen"
115 |                 style={{
116 |                     backgroundImage: "url('/herobg.png')",
117 |                     backgroundSize: "cover",
118 |                     backgroundPosition: "center",
119 |                     backgroundRepeat: "no-repeat",
120 |                 }}
121 |             >
122 |             <AppHeader hideSidebar={true} />
123 |            
124 |             <div className='grid grid-cols-1 md:grid-cols-5 p-5 gap-10'>
125 |                 <div>
126 |                     {/* Selection Details  */}
127 |                     <SelectionDetail record={record} regenrateCode={() => { GetRecordInfo(true) }}
128 |                         isReady={isReady}
129 |                     />
130 |                 </div>
131 |                 <div className='col-span-4'>
132 |                     {/* Code Editor  */}
133 |                     {loading ? <div>
134 |                         <h2 className='font-bold text-2xl text-center p-20 flex items-center justify-center
135 |                         bg-[#151515] h-[80vh] rounded-xl text-white
136 |                         '> <Loader2 className='animate-spin' /> Anaylzing the Wireframe...</h2>
137 |                     </div> :
138 |                         <CodeEditor codeResp={codeResp} isReady={isReady}
139 |                         />
140 |                     }
141 |                 </div>
142 |             </div>
143 | 
144 | 
145 |             </main>
146 | 
147 |         </div>
148 |         
149 |     )
150 | }
151 | 
152 | export default ViewCode


--------------------------------------------------------------------------------
/app/view-code/_components/CodeEditor.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Sandpack, SandpackCodeEditor, SandpackLayout, SandpackProvider } from "@codesandbox/sandpack-react";
 3 | import Constants from '@/data/Constants';
 4 | import { amethyst, aquaBlue, atomDark, sandpackDark } from "@codesandbox/sandpack-themes";
 5 | function CodeEditor({ codeResp, isReady }: any) {
 6 |     return (
 7 |         <div>
 8 |             {isReady ? <Sandpack template="react"
 9 |                 theme={'dark'}
10 |                 options={{
11 |                     externalResources: ["https://cdn.tailwindcss.com"],
12 |                     showNavigator: true,
13 |                     showTabs: true,
14 |                     editorHeight: 600
15 |                 }}
16 |                 customSetup={{
17 |                     dependencies: {
18 |                         ...Constants.DEPENDANCY
19 |                     }
20 |                 }}
21 |                 files={{
22 |                     "/App.js": `${codeResp}`,
23 | 
24 |                 }} />
25 |                 :
26 |                 <SandpackProvider template="react"
27 |                     theme={'dark'}
28 |                     files={{
29 |                         "/app.js": {
30 |                             code: `${codeResp}`,
31 |                             active: true
32 |                         }
33 |                     }}
34 |                     customSetup={{
35 |                         dependencies: {
36 |                             ...Constants.DEPENDANCY
37 |                         }
38 |                     }}
39 |                     options={{
40 |                         externalResources: ["https://cdn.tailwindcss.com"],
41 |                     }}
42 |                 >
43 |                     <SandpackLayout>
44 | 
45 |                         <SandpackCodeEditor showTabs={true} style={{ height: '70vh' }} />
46 |                     </SandpackLayout>
47 |                 </SandpackProvider>
48 |             }
49 |         </div>
50 |     )
51 | }
52 | 
53 | export default CodeEditor


--------------------------------------------------------------------------------
/app/view-code/_components/SelectionDetail.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { RECORD } from '../[uid]/page'
 3 | import Image from 'next/image'
 4 | import { Input } from '@/components/ui/input'
 5 | import { Textarea } from '@/components/ui/textarea'
 6 | import { Button } from '@/components/ui/button'
 7 | import { RefreshCcw } from 'lucide-react'
 8 | 
 9 | function SelectionDetail({ record, regenrateCode, isReady }: any) {
10 |     return record && (
11 |         <div className="p-5  rounded-lg max-h-[100vh] border border-[#5b3bb2] m-0">
12 |             <h2 className='font-bold my-2 text-white'>Wireframe</h2>
13 |             <Image src={record?.imageUrl} alt='Wireframe' width={300} height={400}
14 |                 className='rounded-lg object-contain h-[200px] w-full border border-[#5d40b5] border-dashed p-2'
15 |             />
16 | 
17 |             <h2 className='font-bold mt-4 mb-2 text-white'>AI Model</h2>
18 |             <Input defaultValue={record?.model} disabled={true} className='border-2 border-[#6d3cff] bg-white' />
19 | 
20 |             <h2 className='font-bold mt-4 mb-2 text-white'>Description</h2>
21 |             <Textarea defaultValue={record?.description} disabled={true}
22 |                 className='border-2 border-[#6d3cff] bg-white h-[126px]' />
23 | 
24 |             <Button className='mt-7 w-full bg-[#5b3bb2] hover:bg-[#4e2cad]' disabled={!isReady} onClick={() => regenrateCode()} > <RefreshCcw /> Regenerate Code</Button>
25 |         </div>
26 |     )
27 | }
28 | 
29 | export default SelectionDetail


--------------------------------------------------------------------------------
/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": "tailwind.config.ts",
 8 |     "css": "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 | }


--------------------------------------------------------------------------------
/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-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           "bg-primary text-primary-foreground shadow hover:bg-primary/90",
14 |         destructive:
15 |           "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
16 |         outline:
17 |           "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
18 |         secondary:
19 |           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
20 |         ghost: "hover:bg-accent hover:text-accent-foreground",
21 |         link: "text-primary underline-offset-4 hover:underline",
22 |       },
23 |       size: {
24 |         default: "h-9 px-4 py-2",
25 |         sm: "h-8 rounded-md px-3 text-xs",
26 |         lg: "h-10 rounded-md px-8",
27 |         icon: "h-9 w-9",
28 |       },
29 |     },
30 |     defaultVariants: {
31 |       variant: "default",
32 |       size: "default",
33 |     },
34 |   }
35 | )
36 | 
37 | export interface ButtonProps
38 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
39 |     VariantProps<typeof buttonVariants> {
40 |   asChild?: boolean
41 | }
42 | 
43 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
44 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
45 |     const Comp = asChild ? Slot : "button"
46 |     return (
47 |       <Comp
48 |         className={cn(buttonVariants({ variant, size, className }))}
49 |         ref={ref}
50 |         {...props}
51 |       />
52 |     )
53 |   }
54 | )
55 | Button.displayName = "Button"
56 | 
57 | export { Button, buttonVariants }
58 | 


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


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


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


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


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


--------------------------------------------------------------------------------
/components/ui/sidebar.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import { Slot } from "@radix-ui/react-slot"
  5 | import { VariantProps, cva } from "class-variance-authority"
  6 | import { PanelLeft } from "lucide-react"
  7 | 
  8 | import { useIsMobile } from "@/hooks/use-mobile"
  9 | import { cn } from "@/lib/utils"
 10 | import { Button } from "@/components/ui/button"
 11 | import { Input } from "@/components/ui/input"
 12 | import { Separator } from "@/components/ui/separator"
 13 | import { Sheet, SheetContent } from "@/components/ui/sheet"
 14 | import { Skeleton } from "@/components/ui/skeleton"
 15 | import {
 16 |   Tooltip,
 17 |   TooltipContent,
 18 |   TooltipProvider,
 19 |   TooltipTrigger,
 20 | } from "@/components/ui/tooltip"
 21 | 
 22 | const SIDEBAR_COOKIE_NAME = "sidebar:state"
 23 | const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
 24 | const SIDEBAR_WIDTH = "16rem"
 25 | const SIDEBAR_WIDTH_MOBILE = "18rem"
 26 | const SIDEBAR_WIDTH_ICON = "3rem"
 27 | const SIDEBAR_KEYBOARD_SHORTCUT = "b"
 28 | 
 29 | type SidebarContext = {
 30 |   state: "expanded" | "collapsed"
 31 |   open: boolean
 32 |   setOpen: (open: boolean) => void
 33 |   openMobile: boolean
 34 |   setOpenMobile: (open: boolean) => void
 35 |   isMobile: boolean
 36 |   toggleSidebar: () => void
 37 | }
 38 | 
 39 | const SidebarContext = React.createContext<SidebarContext | null>(null)
 40 | 
 41 | function useSidebar() {
 42 |   const context = React.useContext(SidebarContext)
 43 |   if (!context) {
 44 |     throw new Error("useSidebar must be used within a SidebarProvider.")
 45 |   }
 46 | 
 47 |   return context
 48 | }
 49 | 
 50 | const SidebarProvider = React.forwardRef<
 51 |   HTMLDivElement,
 52 |   React.ComponentProps<"div"> & {
 53 |     defaultOpen?: boolean
 54 |     open?: boolean
 55 |     onOpenChange?: (open: boolean) => void
 56 |   }
 57 | >(
 58 |   (
 59 |     {
 60 |       defaultOpen = true,
 61 |       open: openProp,
 62 |       onOpenChange: setOpenProp,
 63 |       className,
 64 |       style,
 65 |       children,
 66 |       ...props
 67 |     },
 68 |     ref
 69 |   ) => {
 70 |     const isMobile = useIsMobile()
 71 |     const [openMobile, setOpenMobile] = React.useState(false)
 72 | 
 73 |     // This is the internal state of the sidebar.
 74 |     // We use openProp and setOpenProp for control from outside the component.
 75 |     const [_open, _setOpen] = React.useState(defaultOpen)
 76 |     const open = openProp ?? _open
 77 |     const setOpen = React.useCallback(
 78 |       (value: boolean | ((value: boolean) => boolean)) => {
 79 |         const openState = typeof value === "function" ? value(open) : value
 80 |         if (setOpenProp) {
 81 |           setOpenProp(openState)
 82 |         } else {
 83 |           _setOpen(openState)
 84 |         }
 85 | 
 86 |         // This sets the cookie to keep the sidebar state.
 87 |         document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
 88 |       },
 89 |       [setOpenProp, open]
 90 |     )
 91 | 
 92 |     // Helper to toggle the sidebar.
 93 |     const toggleSidebar = React.useCallback(() => {
 94 |       return isMobile
 95 |         ? setOpenMobile((open) => !open)
 96 |         : setOpen((open) => !open)
 97 |     }, [isMobile, setOpen, setOpenMobile])
 98 | 
 99 |     // Adds a keyboard shortcut to toggle the sidebar.
100 |     React.useEffect(() => {
101 |       const handleKeyDown = (event: KeyboardEvent) => {
102 |         if (
103 |           event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
104 |           (event.metaKey || event.ctrlKey)
105 |         ) {
106 |           event.preventDefault()
107 |           toggleSidebar()
108 |         }
109 |       }
110 | 
111 |       window.addEventListener("keydown", handleKeyDown)
112 |       return () => window.removeEventListener("keydown", handleKeyDown)
113 |     }, [toggleSidebar])
114 | 
115 |     // We add a state so that we can do data-state="expanded" or "collapsed".
116 |     // This makes it easier to style the sidebar with Tailwind classes.
117 |     const state = open ? "expanded" : "collapsed"
118 | 
119 |     const contextValue = React.useMemo<SidebarContext>(
120 |       () => ({
121 |         state,
122 |         open,
123 |         setOpen,
124 |         isMobile,
125 |         openMobile,
126 |         setOpenMobile,
127 |         toggleSidebar,
128 |       }),
129 |       [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
130 |     )
131 | 
132 |     return (
133 |       <SidebarContext.Provider value={contextValue}>
134 |         <TooltipProvider delayDuration={0}>
135 |           <div
136 |             style={
137 |               {
138 |                 "--sidebar-width": SIDEBAR_WIDTH,
139 |                 "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
140 |                 ...style,
141 |               } as React.CSSProperties
142 |             }
143 |             className={cn(
144 |               "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
145 |               className
146 |             )}
147 |             ref={ref}
148 |             {...props}
149 |           >
150 |             {children}
151 |           </div>
152 |         </TooltipProvider>
153 |       </SidebarContext.Provider>
154 |     )
155 |   }
156 | )
157 | SidebarProvider.displayName = "SidebarProvider"
158 | 
159 | const Sidebar = React.forwardRef<
160 |   HTMLDivElement,
161 |   React.ComponentProps<"div"> & {
162 |     side?: "left" | "right"
163 |     variant?: "sidebar" | "floating" | "inset"
164 |     collapsible?: "offcanvas" | "icon" | "none"
165 |   }
166 | >(
167 |   (
168 |     {
169 |       side = "left",
170 |       variant = "sidebar",
171 |       collapsible = "offcanvas",
172 |       className,
173 |       children,
174 |       ...props
175 |     },
176 |     ref
177 |   ) => {
178 |     const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
179 | 
180 |     if (collapsible === "none") {
181 |       return (
182 |         <div
183 |           className={cn(
184 |             "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
185 |             className
186 |           )}
187 |           ref={ref}
188 |           {...props}
189 |         >
190 |           {children}
191 |         </div>
192 |       )
193 |     }
194 | 
195 |     if (isMobile) {
196 |       return (
197 |         <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
198 |           <SheetContent
199 |             data-sidebar="sidebar"
200 |             data-mobile="true"
201 |             className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
202 |             style={
203 |               {
204 |                 "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
205 |               } as React.CSSProperties
206 |             }
207 |             side={side}
208 |           >
209 |             <div className="flex h-full w-full flex-col">{children}</div>
210 |           </SheetContent>
211 |         </Sheet>
212 |       )
213 |     }
214 | 
215 |     return (
216 |       <div
217 |         ref={ref}
218 |         className="group peer hidden text-sidebar-foreground md:block"
219 |         data-state={state}
220 |         data-collapsible={state === "collapsed" ? collapsible : ""}
221 |         data-variant={variant}
222 |         data-side={side}
223 |       >
224 |         {/* This is what handles the sidebar gap on desktop */}
225 |         <div
226 |           className={cn(
227 |             "relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
228 |             "group-data-[collapsible=offcanvas]:w-0",
229 |             "group-data-[side=right]:rotate-180",
230 |             variant === "floating" || variant === "inset"
231 |               ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
232 |               : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
233 |           )}
234 |         />
235 |         <div
236 |           className={cn(
237 |             "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
238 |             side === "left"
239 |               ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
240 |               : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
241 |             // Adjust the padding for floating and inset variants.
242 |             variant === "floating" || variant === "inset"
243 |               ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
244 |               : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
245 |             className
246 |           )}
247 |           {...props}
248 |         >
249 |           <div
250 |             data-sidebar="sidebar"
251 |             className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
252 |           >
253 |             {children}
254 |           </div>
255 |         </div>
256 |       </div>
257 |     )
258 |   }
259 | )
260 | Sidebar.displayName = "Sidebar"
261 | 
262 | const SidebarTrigger = React.forwardRef<
263 |   React.ElementRef<typeof Button>,
264 |   React.ComponentProps<typeof Button>
265 | >(({ className, onClick, ...props }, ref) => {
266 |   const { toggleSidebar } = useSidebar()
267 | 
268 |   return (
269 |     <Button
270 |       ref={ref}
271 |       data-sidebar="trigger"
272 |       variant="ghost"
273 |       size="icon"
274 |       className={cn("h-7 w-7", className)}
275 |       onClick={(event) => {
276 |         onClick?.(event)
277 |         toggleSidebar()
278 |       }}
279 |       {...props}
280 |     >
281 |       <PanelLeft />
282 |       <span className="sr-only">Toggle Sidebar</span>
283 |     </Button>
284 |   )
285 | })
286 | SidebarTrigger.displayName = "SidebarTrigger"
287 | 
288 | const SidebarRail = React.forwardRef<
289 |   HTMLButtonElement,
290 |   React.ComponentProps<"button">
291 | >(({ className, ...props }, ref) => {
292 |   const { toggleSidebar } = useSidebar()
293 | 
294 |   return (
295 |     <button
296 |       ref={ref}
297 |       data-sidebar="rail"
298 |       aria-label="Toggle Sidebar"
299 |       tabIndex={-1}
300 |       onClick={toggleSidebar}
301 |       title="Toggle Sidebar"
302 |       className={cn(
303 |         "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
304 |         "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
305 |         "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
306 |         "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
307 |         "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
308 |         "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
309 |         className
310 |       )}
311 |       {...props}
312 |     />
313 |   )
314 | })
315 | SidebarRail.displayName = "SidebarRail"
316 | 
317 | const SidebarInset = React.forwardRef<
318 |   HTMLDivElement,
319 |   React.ComponentProps<"main">
320 | >(({ className, ...props }, ref) => {
321 |   return (
322 |     <main
323 |       ref={ref}
324 |       className={cn(
325 |         "relative flex min-h-svh flex-1 flex-col bg-background",
326 |         "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
327 |         className
328 |       )}
329 |       {...props}
330 |     />
331 |   )
332 | })
333 | SidebarInset.displayName = "SidebarInset"
334 | 
335 | const SidebarInput = React.forwardRef<
336 |   React.ElementRef<typeof Input>,
337 |   React.ComponentProps<typeof Input>
338 | >(({ className, ...props }, ref) => {
339 |   return (
340 |     <Input
341 |       ref={ref}
342 |       data-sidebar="input"
343 |       className={cn(
344 |         "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
345 |         className
346 |       )}
347 |       {...props}
348 |     />
349 |   )
350 | })
351 | SidebarInput.displayName = "SidebarInput"
352 | 
353 | const SidebarHeader = React.forwardRef<
354 |   HTMLDivElement,
355 |   React.ComponentProps<"div">
356 | >(({ className, ...props }, ref) => {
357 |   return (
358 |     <div
359 |       ref={ref}
360 |       data-sidebar="header"
361 |       className={cn("flex flex-col gap-2 p-2", className)}
362 |       {...props}
363 |     />
364 |   )
365 | })
366 | SidebarHeader.displayName = "SidebarHeader"
367 | 
368 | const SidebarFooter = React.forwardRef<
369 |   HTMLDivElement,
370 |   React.ComponentProps<"div">
371 | >(({ className, ...props }, ref) => {
372 |   return (
373 |     <div
374 |       ref={ref}
375 |       data-sidebar="footer"
376 |       className={cn("flex flex-col gap-2 p-2", className)}
377 |       {...props}
378 |     />
379 |   )
380 | })
381 | SidebarFooter.displayName = "SidebarFooter"
382 | 
383 | const SidebarSeparator = React.forwardRef<
384 |   React.ElementRef<typeof Separator>,
385 |   React.ComponentProps<typeof Separator>
386 | >(({ className, ...props }, ref) => {
387 |   return (
388 |     <Separator
389 |       ref={ref}
390 |       data-sidebar="separator"
391 |       className={cn("mx-2 w-auto bg-sidebar-border", className)}
392 |       {...props}
393 |     />
394 |   )
395 | })
396 | SidebarSeparator.displayName = "SidebarSeparator"
397 | 
398 | const SidebarContent = React.forwardRef<
399 |   HTMLDivElement,
400 |   React.ComponentProps<"div">
401 | >(({ className, ...props }, ref) => {
402 |   return (
403 |     <div
404 |       ref={ref}
405 |       data-sidebar="content"
406 |       className={cn(
407 |         "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
408 |         className
409 |       )}
410 |       {...props}
411 |     />
412 |   )
413 | })
414 | SidebarContent.displayName = "SidebarContent"
415 | 
416 | const SidebarGroup = React.forwardRef<
417 |   HTMLDivElement,
418 |   React.ComponentProps<"div">
419 | >(({ className, ...props }, ref) => {
420 |   return (
421 |     <div
422 |       ref={ref}
423 |       data-sidebar="group"
424 |       className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
425 |       {...props}
426 |     />
427 |   )
428 | })
429 | SidebarGroup.displayName = "SidebarGroup"
430 | 
431 | const SidebarGroupLabel = React.forwardRef<
432 |   HTMLDivElement,
433 |   React.ComponentProps<"div"> & { asChild?: boolean }
434 | >(({ className, asChild = false, ...props }, ref) => {
435 |   const Comp = asChild ? Slot : "div"
436 | 
437 |   return (
438 |     <Comp
439 |       ref={ref}
440 |       data-sidebar="group-label"
441 |       className={cn(
442 |         "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
443 |         "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
444 |         className
445 |       )}
446 |       {...props}
447 |     />
448 |   )
449 | })
450 | SidebarGroupLabel.displayName = "SidebarGroupLabel"
451 | 
452 | const SidebarGroupAction = React.forwardRef<
453 |   HTMLButtonElement,
454 |   React.ComponentProps<"button"> & { asChild?: boolean }
455 | >(({ className, asChild = false, ...props }, ref) => {
456 |   const Comp = asChild ? Slot : "button"
457 | 
458 |   return (
459 |     <Comp
460 |       ref={ref}
461 |       data-sidebar="group-action"
462 |       className={cn(
463 |         "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
464 |         // Increases the hit area of the button on mobile.
465 |         "after:absolute after:-inset-2 after:md:hidden",
466 |         "group-data-[collapsible=icon]:hidden",
467 |         className
468 |       )}
469 |       {...props}
470 |     />
471 |   )
472 | })
473 | SidebarGroupAction.displayName = "SidebarGroupAction"
474 | 
475 | const SidebarGroupContent = React.forwardRef<
476 |   HTMLDivElement,
477 |   React.ComponentProps<"div">
478 | >(({ className, ...props }, ref) => (
479 |   <div
480 |     ref={ref}
481 |     data-sidebar="group-content"
482 |     className={cn("w-full text-sm", className)}
483 |     {...props}
484 |   />
485 | ))
486 | SidebarGroupContent.displayName = "SidebarGroupContent"
487 | 
488 | const SidebarMenu = React.forwardRef<
489 |   HTMLUListElement,
490 |   React.ComponentProps<"ul">
491 | >(({ className, ...props }, ref) => (
492 |   <ul
493 |     ref={ref}
494 |     data-sidebar="menu"
495 |     className={cn("flex w-full min-w-0 flex-col gap-1", className)}
496 |     {...props}
497 |   />
498 | ))
499 | SidebarMenu.displayName = "SidebarMenu"
500 | 
501 | const SidebarMenuItem = React.forwardRef<
502 |   HTMLLIElement,
503 |   React.ComponentProps<"li">
504 | >(({ className, ...props }, ref) => (
505 |   <li
506 |     ref={ref}
507 |     data-sidebar="menu-item"
508 |     className={cn("group/menu-item relative", className)}
509 |     {...props}
510 |   />
511 | ))
512 | SidebarMenuItem.displayName = "SidebarMenuItem"
513 | 
514 | const sidebarMenuButtonVariants = cva(
515 |   "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
516 |   {
517 |     variants: {
518 |       variant: {
519 |         default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
520 |         outline:
521 |           "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
522 |       },
523 |       size: {
524 |         default: "h-8 text-sm",
525 |         sm: "h-7 text-xs",
526 |         lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
527 |       },
528 |     },
529 |     defaultVariants: {
530 |       variant: "default",
531 |       size: "default",
532 |     },
533 |   }
534 | )
535 | 
536 | const SidebarMenuButton = React.forwardRef<
537 |   HTMLButtonElement,
538 |   React.ComponentProps<"button"> & {
539 |     asChild?: boolean
540 |     isActive?: boolean
541 |     tooltip?: string | React.ComponentProps<typeof TooltipContent>
542 |   } & VariantProps<typeof sidebarMenuButtonVariants>
543 | >(
544 |   (
545 |     {
546 |       asChild = false,
547 |       isActive = false,
548 |       variant = "default",
549 |       size = "default",
550 |       tooltip,
551 |       className,
552 |       ...props
553 |     },
554 |     ref
555 |   ) => {
556 |     const Comp = asChild ? Slot : "button"
557 |     const { isMobile, state } = useSidebar()
558 | 
559 |     const button = (
560 |       <Comp
561 |         ref={ref}
562 |         data-sidebar="menu-button"
563 |         data-size={size}
564 |         data-active={isActive}
565 |         className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
566 |         {...props}
567 |       />
568 |     )
569 | 
570 |     if (!tooltip) {
571 |       return button
572 |     }
573 | 
574 |     if (typeof tooltip === "string") {
575 |       tooltip = {
576 |         children: tooltip,
577 |       }
578 |     }
579 | 
580 |     return (
581 |       <Tooltip>
582 |         <TooltipTrigger asChild>{button}</TooltipTrigger>
583 |         <TooltipContent
584 |           side="right"
585 |           align="center"
586 |           hidden={state !== "collapsed" || isMobile}
587 |           {...tooltip}
588 |         />
589 |       </Tooltip>
590 |     )
591 |   }
592 | )
593 | SidebarMenuButton.displayName = "SidebarMenuButton"
594 | 
595 | const SidebarMenuAction = React.forwardRef<
596 |   HTMLButtonElement,
597 |   React.ComponentProps<"button"> & {
598 |     asChild?: boolean
599 |     showOnHover?: boolean
600 |   }
601 | >(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
602 |   const Comp = asChild ? Slot : "button"
603 | 
604 |   return (
605 |     <Comp
606 |       ref={ref}
607 |       data-sidebar="menu-action"
608 |       className={cn(
609 |         "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
610 |         // Increases the hit area of the button on mobile.
611 |         "after:absolute after:-inset-2 after:md:hidden",
612 |         "peer-data-[size=sm]/menu-button:top-1",
613 |         "peer-data-[size=default]/menu-button:top-1.5",
614 |         "peer-data-[size=lg]/menu-button:top-2.5",
615 |         "group-data-[collapsible=icon]:hidden",
616 |         showOnHover &&
617 |         "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
618 |         className
619 |       )}
620 |       {...props}
621 |     />
622 |   )
623 | })
624 | SidebarMenuAction.displayName = "SidebarMenuAction"
625 | 
626 | const SidebarMenuBadge = React.forwardRef<
627 |   HTMLDivElement,
628 |   React.ComponentProps<"div">
629 | >(({ className, ...props }, ref) => (
630 |   <div
631 |     ref={ref}
632 |     data-sidebar="menu-badge"
633 |     className={cn(
634 |       "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
635 |       "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
636 |       "peer-data-[size=sm]/menu-button:top-1",
637 |       "peer-data-[size=default]/menu-button:top-1.5",
638 |       "peer-data-[size=lg]/menu-button:top-2.5",
639 |       "group-data-[collapsible=icon]:hidden",
640 |       className
641 |     )}
642 |     {...props}
643 |   />
644 | ))
645 | SidebarMenuBadge.displayName = "SidebarMenuBadge"
646 | 
647 | const SidebarMenuSkeleton = React.forwardRef<
648 |   HTMLDivElement,
649 |   React.ComponentProps<"div"> & {
650 |     showIcon?: boolean
651 |   }
652 | >(({ className, showIcon = false, ...props }, ref) => {
653 |   // Random width between 50 to 90%.
654 |   const width = React.useMemo(() => {
655 |     return `${Math.floor(Math.random() * 40) + 50}%`
656 |   }, [])
657 | 
658 |   return (
659 |     <div
660 |       ref={ref}
661 |       data-sidebar="menu-skeleton"
662 |       className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
663 |       {...props}
664 |     >
665 |       {showIcon && (
666 |         <Skeleton
667 |           className="size-4 rounded-md"
668 |           data-sidebar="menu-skeleton-icon"
669 |         />
670 |       )}
671 |       <Skeleton
672 |         className="h-4 max-w-[--skeleton-width] flex-1"
673 |         data-sidebar="menu-skeleton-text"
674 |         style={
675 |           {
676 |             "--skeleton-width": width,
677 |           } as React.CSSProperties
678 |         }
679 |       />
680 |     </div>
681 |   )
682 | })
683 | SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton"
684 | 
685 | const SidebarMenuSub = React.forwardRef<
686 |   HTMLUListElement,
687 |   React.ComponentProps<"ul">
688 | >(({ className, ...props }, ref) => (
689 |   <ul
690 |     ref={ref}
691 |     data-sidebar="menu-sub"
692 |     className={cn(
693 |       "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
694 |       "group-data-[collapsible=icon]:hidden",
695 |       className
696 |     )}
697 |     {...props}
698 |   />
699 | ))
700 | SidebarMenuSub.displayName = "SidebarMenuSub"
701 | 
702 | const SidebarMenuSubItem = React.forwardRef<
703 |   HTMLLIElement,
704 |   React.ComponentProps<"li">
705 | >(({ ...props }, ref) => <li ref={ref} {...props} />)
706 | SidebarMenuSubItem.displayName = "SidebarMenuSubItem"
707 | 
708 | const SidebarMenuSubButton = React.forwardRef<
709 |   HTMLAnchorElement,
710 |   React.ComponentProps<"a"> & {
711 |     asChild?: boolean
712 |     size?: "sm" | "md"
713 |     isActive?: boolean
714 |   }
715 | >(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
716 |   const Comp = asChild ? Slot : "a"
717 | 
718 |   return (
719 |     <Comp
720 |       ref={ref}
721 |       data-sidebar="menu-sub-button"
722 |       data-size={size}
723 |       data-active={isActive}
724 |       className={cn(
725 |         "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
726 |         "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
727 |         size === "sm" && "text-xs",
728 |         size === "md" && "text-sm",
729 |         "group-data-[collapsible=icon]:hidden",
730 |         className
731 |       )}
732 |       {...props}
733 |     />
734 |   )
735 | })
736 | SidebarMenuSubButton.displayName = "SidebarMenuSubButton"
737 | 
738 | export {
739 |   Sidebar,
740 |   SidebarContent,
741 |   SidebarFooter,
742 |   SidebarGroup,
743 |   SidebarGroupAction,
744 |   SidebarGroupContent,
745 |   SidebarGroupLabel,
746 |   SidebarHeader,
747 |   SidebarInput,
748 |   SidebarInset,
749 |   SidebarMenu,
750 |   SidebarMenuAction,
751 |   SidebarMenuBadge,
752 |   SidebarMenuButton,
753 |   SidebarMenuItem,
754 |   SidebarMenuSkeleton,
755 |   SidebarMenuSub,
756 |   SidebarMenuSubButton,
757 |   SidebarMenuSubItem,
758 |   SidebarProvider,
759 |   SidebarRail,
760 |   SidebarSeparator,
761 |   SidebarTrigger,
762 |   useSidebar,
763 | }
764 | 


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


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


--------------------------------------------------------------------------------
/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Textarea = React.forwardRef<
 6 |   HTMLTextAreaElement,
 7 |   React.ComponentProps<"textarea">
 8 | >(({ className, ...props }, ref) => {
 9 |   return (
10 |     <textarea
11 |       className={cn(
12 |         "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base 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 md:text-sm",
13 |         className
14 |       )}
15 |       ref={ref}
16 |       {...props}
17 |     />
18 |   )
19 | })
20 | Textarea.displayName = "Textarea"
21 | 
22 | export { Textarea }
23 | 


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


--------------------------------------------------------------------------------
/configs/db.tsx:
--------------------------------------------------------------------------------
1 | import { drizzle } from 'drizzle-orm/neon-http';
2 | export const db = drizzle(process.env.NEXT_PUBLIC_NEON_DB_CONNECTION_STRING!);


--------------------------------------------------------------------------------
/configs/firebaseConfig.tsx:
--------------------------------------------------------------------------------
 1 | // Import the functions you need from the SDKs you need
 2 | import { initializeApp } from "firebase/app";
 3 | import { getAnalytics } from "firebase/analytics";
 4 | import { getAuth } from 'firebase/auth'
 5 | import { getStorage } from 'firebase/storage'
 6 | // TODO: Add SDKs for Firebase products that you want to use
 7 | // https://firebase.google.com/docs/web/setup#available-libraries
 8 | 
 9 | // Your web app's Firebase configuration
10 | // For Firebase JS SDK v7.20.0 and later, measurementId is optional
11 | const firebaseConfig = {
12 |     apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
13 |     authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
14 |     projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
15 |     storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
16 |     messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
17 |     appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
18 |     measurementId: process.env.NEXT_PUBLIC_FIREBASE_MESURMENT_ID
19 | };
20 | 
21 | // Initialize Firebase
22 | const app = initializeApp(firebaseConfig);
23 | export const auth = getAuth(app);
24 | export const storage = getStorage(app)
25 | // const analytics = getAnalytics(app);


--------------------------------------------------------------------------------
/configs/schema.ts:
--------------------------------------------------------------------------------
 1 | import { integer, json, pgTable, varchar } from "drizzle-orm/pg-core";
 2 | 
 3 | export const usersTable = pgTable("users", {
 4 |     id: integer().primaryKey().generatedAlwaysAsIdentity(),
 5 |     name: varchar({ length: 255 }).notNull(),
 6 |     email: varchar({ length: 255 }).notNull().unique(),
 7 |     credits: integer().default(0)
 8 | });
 9 | 
10 | export const WireframeToCodeTable = pgTable("wireframeToCode", {
11 |     id: integer().primaryKey().generatedAlwaysAsIdentity(),
12 |     uid: varchar(),
13 |     imageUrl: varchar(),
14 |     model: varchar(),
15 |     description: varchar(),
16 |     code: json(),
17 |     createdBy: varchar()
18 | })


--------------------------------------------------------------------------------
/context/AuthContext.tsx:
--------------------------------------------------------------------------------
1 | import { User } from "firebase/auth";
2 | import { createContext } from "react";
3 | interface AuthContextType {
4 |     user: User | null;
5 | }
6 | 
7 | export const AuthContext = createContext<AuthContextType | undefined>(undefined);


--------------------------------------------------------------------------------
/data/Constants.tsx:
--------------------------------------------------------------------------------
  1 | import dedent from 'dedent';
  2 | export default{
  3 | 
  4 |     PROMPT: dedent
  5 | `
  6 | You are an expert frontend frontend React developer. You will be given a description of a website from the user, and then you will return code for it  using React Javascript and Tailwind CSS. Follow the instructions carefully, it is very important for my job. I will tip you $1 million if you do a good job:
  7 | - DO NOT START WITH \\\`javascript or \\\`jsx or \\\`typescript or \\\`tsx or \\\.
  8 | - Just provide the code nothing else only the code should be output when prompt is being given only give the code nothing else.
  9 | - Think carefully step by step about how to recreate the UI described in the prompt.
 10 | - Create a React component for whatever the user asked you to create and make sure it can run by itself by using a default export
 11 | - Feel free to have multiple components in the file, but make sure to have one main component that uses all the other components
 12 | - Make sure to describe where everything is in the UI so the developer can recreate it and if how elements are aligned
 13 | - Pay close attention to background color, text color, font size, font family, padding, margin, border, etc. Match the colors and sizes exactly.
 14 | - If its just wireframe then make sure add colors and make some real life colorfull web page
 15 | - Make sure to mention every part of the screenshot including any headers, footers, sidebars, etc.
 16 | - Make sure to use the exact text from the screenshot.
 17 | - Make sure to give a complete code dont repeat the code 
 18 | - Make sure the website looks exactly like the screenshot described in the prompt.
 19 | - Pay close attention to background color, text color, font size, font family, padding, margin, border, etc. Match the colors and sizes exactly.
 20 | - Make sure to code every part of the description including any headers, footers, etc.
 21 | - Use the exact text from the description for the UI elements.
 22 | - Do not add comments in the code such as "<!-- Add other navigation links as needed -->" and "<!-- ... other news items ... -->" in place of writing the full code. WRITE THE FULL CODE.
 23 | - Repeat elements as needed to match the description. For example, if there are 15 items, the code should have 15 items. DO NOT LEAVE comments like "<!-- Repeat for each news item -->" or bad things will happen.
 24 | - For all images, please use image placeholder from :https://redthread.uoregon.edu/files/original/affd16fd5264cab9197da4cd1a996f820e601ee4.png
 25 | - Make sure the React app is interactive and functional by creating state when needed and having no required props
 26 | - If you use any imports from React like useState or useEffect, make sure to import them directly
 27 | - Use Javascript (.js) as the language for the React component
 28 | - Write clear code no error should be there 
 29 | - Use Tailwind classes for styling. DO NOT USE ARBITRARY VALUES (e.g. \h-[600px]\). Make sure to use a consistent color palette.
 30 | - Use margin and padding to style the components and ensure the components are spaced out nicely
 31 | - In code DO NOT START WITH the words jsx or typescript or javascript or tsx only give the code.
 32 | - Please ONLY return the full React code starting with the imports, nothing else. It's very important for my job that you only return the React code with imports.`,
 33 | 
 34 | 
 35 | AiModelList:[
 36 |         {
 37 |             name:'Gemini Google',
 38 |             icon:'/google.png',
 39 |             modelName:'google/gemini-2.0-flash-exp:free'
 40 |         },
 41 |         {
 42 |           name:'Gemma',
 43 |           icon:'/gemma.webp',
 44 |           modelName:'google/gemma-3-27b-it:free'
 45 |       },
 46 |       {
 47 |         name:'Mistral',
 48 |         icon:'/Mistral.png',
 49 |         modelName:'mistralai/mistral-small-3.1-24b-instruct:free'
 50 |     },
 51 |       {
 52 |         name:'Qwen',
 53 |         icon:'/qwen.png',
 54 |         modelName:'qwen/qwen3-0.6b-04-28:free'
 55 |     },
 56 |     {
 57 |       name:'OpenGV',
 58 |       icon:'/opengv.png',
 59 |       modelName:'opengvlab/internvl3-14b:free'
 60 |   },
 61 | 
 62 |       {
 63 |         name:'DeepSeek',
 64 |         icon:'/deepseek.png',
 65 |         modelName:'deepseek/deepseek-v3-base:free'
 66 |     },
 67 |     ],
 68 |     DEPENDANCY: {
 69 | 
 70 |         "postcss": "^8",
 71 |         "tailwindcss": "^3.4.1",
 72 |         autoprefixer: "^10.0.0",
 73 |         "uuid4": "^2.0.3",
 74 |         "tailwind-merge": "^2.4.0",
 75 |         "tailwindcss-animate": "^1.0.7",
 76 |         "lucide-react": "^0.469.0",
 77 |         "react-router-dom": "^7.1.1",
 78 |         "firebase": "^11.1.0",
 79 |         "@google/generative-ai": "^0.21.0",
 80 |         "date-fns": "^4.1.0",
 81 |         "react-chartjs-2": "^5.3.0",
 82 |         "chart.js": "^4.4.7",
 83 |     },
 84 |     FILES: {
 85 |         '/App.css': {
 86 |             code: `
 87 |             @tailwind base;
 88 | @tailwind components;
 89 | @tailwind utilities;`
 90 |         },
 91 |         '/tailwind.config.js': {
 92 |             code: `
 93 |             /** @type {import('tailwindcss').Config} */
 94 | module.exports = {
 95 |   content: [
 96 |     "./src/**/*.{js,jsx,ts,tsx}",
 97 |   ],
 98 |   theme: {
 99 |     extend: {},
100 |   },
101 |   plugins: [],
102 | }`
103 |         },
104 |         '/postcss.config.js': {
105 |             code: `/** @type {import('postcss-load-config').Config} */
106 | const config = {
107 |   plugins: {
108 |     tailwindcss: {},
109 |   },`
110 |         }
111 |     }
112 | 
113 | }


--------------------------------------------------------------------------------
/drizzle.config.ts:
--------------------------------------------------------------------------------
 1 | import 'dotenv/config';
 2 | import { defineConfig } from 'drizzle-kit';
 3 | 
 4 | export default defineConfig({
 5 | 
 6 |     schema: './configs/schema.ts',
 7 |     dialect: 'postgresql',
 8 |     dbCredentials: {
 9 |         url: process.env.NEXT_PUBLIC_NEON_DB_CONNECTION_STRING!,
10 |     },
11 | });
12 | 


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


--------------------------------------------------------------------------------
/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 |   reactStrictMode: false,
 6 |   images: {
 7 |     domains: ['firebasestorage.googleapis.com']
 8 |   }
 9 | };
10 | 
11 | export default nextConfig;
12 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nextjs-boilerplate-1",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@codesandbox/sandpack-react": "^2.19.11",
13 |     "@codesandbox/sandpack-themes": "^2.0.21",
14 |     "@emailjs/browser": "^4.4.1",
15 |     "@neondatabase/serverless": "^0.10.4",
16 |     "@radix-ui/react-dialog": "^1.1.5",
17 |     "@radix-ui/react-popover": "^1.1.5",
18 |     "@radix-ui/react-select": "^2.1.5",
19 |     "@radix-ui/react-separator": "^1.1.1",
20 |     "@radix-ui/react-slot": "^1.1.1",
21 |     "@radix-ui/react-tooltip": "^1.1.7",
22 |     "@vercel/analytics": "^1.5.0",
23 |     "axios": "^1.7.9",
24 |     "class-variance-authority": "^0.7.1",
25 |     "clsx": "^2.1.1",
26 |     "dedent": "^1.5.3",
27 |     "dotenv": "^16.4.7",
28 |     "drizzle-orm": "^0.39.1",
29 |     "firebase": "^11.2.0",
30 |     "framer-motion": "^12.5.0",
31 |     "lucide-react": "^0.474.0",
32 |     "next": "15.1.6",
33 |     "next-themes": "^0.4.4",
34 |     "openai": "^4.83.0",
35 |     "react": "^18.0.0",
36 |     "react-dom": "^18.0.0",
37 |     "react-icons": "^5.5.0",
38 |     "react-live": "^4.1.8",
39 |     "react-scroll": "^1.9.3",
40 |     "sonner": "^1.7.4",
41 |     "tailwind-merge": "^3.0.1",
42 |     "tailwindcss-animate": "^1.0.7",
43 |     "uuid4": "^2.0.3"
44 |   },
45 |   "devDependencies": {
46 |     "@types/node": "^20",
47 |     "@types/react": "^19",
48 |     "@types/react-dom": "^19",
49 |     "@types/react-scroll": "^1.8.10",
50 |     "drizzle-kit": "^0.30.4",
51 |     "postcss": "^8",
52 |     "tailwindcss": "^3.4.1",
53 |     "tsx": "^4.19.2",
54 |     "typescript": "^5"
55 |   }
56 | }
57 | 


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


--------------------------------------------------------------------------------
/public/Mistral.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atharva-aak/vision2web/8eca80ddfd19000fdbf3cde599ffb8d7f4a71257/public/Mistral.png


--------------------------------------------------------------------------------
/public/Wireframetocode.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atharva-aak/vision2web/8eca80ddfd19000fdbf3cde599ffb8d7f4a71257/public/Wireframetocode.png


--------------------------------------------------------------------------------
/public/deepseek.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atharva-aak/vision2web/8eca80ddfd19000fdbf3cde599ffb8d7f4a71257/public/deepseek.png


--------------------------------------------------------------------------------
/public/deepseek1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atharva-aak/vision2web/8eca80ddfd19000fdbf3cde599ffb8d7f4a71257/public/deepseek1.png


--------------------------------------------------------------------------------
/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>


--------------------------------------------------------------------------------
/public/gemma.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atharva-aak/vision2web/8eca80ddfd19000fdbf3cde599ffb8d7f4a71257/public/gemma.webp


--------------------------------------------------------------------------------
/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>


--------------------------------------------------------------------------------
/public/google.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atharva-aak/vision2web/8eca80ddfd19000fdbf3cde599ffb8d7f4a71257/public/google.png


--------------------------------------------------------------------------------
/public/herobg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atharva-aak/vision2web/8eca80ddfd19000fdbf3cde599ffb8d7f4a71257/public/herobg.png


--------------------------------------------------------------------------------
/public/landingvid.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atharva-aak/vision2web/8eca80ddfd19000fdbf3cde599ffb8d7f4a71257/public/landingvid.mp4


--------------------------------------------------------------------------------
/public/logo.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="54" width="48" x="0" y="-3"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" mode="normal" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="-3"/><feGaussianBlur stdDeviation="1.5"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/><feBlend in2="shape" mode="normal" result="effect1_innerShadow_3051_46849"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="3"/><feGaussianBlur stdDeviation="1.5"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0"/><feBlend in2="effect1_innerShadow_3051_46849" mode="normal" result="effect2_innerShadow_3051_46849"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feMorphology in="SourceAlpha" operator="erode" radius="1" result="effect3_innerShadow_3051_46849"/><feOffset/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.24 0"/><feBlend in2="effect2_innerShadow_3051_46849" mode="normal" result="effect3_innerShadow_3051_46849"/></filter><filter id="b" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="46.6667" width="26.6667" x="10.6667" y="3.16667"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feMorphology in="SourceAlpha" operator="erode" radius="1.66667" result="effect1_dropShadow_3051_46849"/><feOffset dy="2.5"/><feGaussianBlur stdDeviation="2.5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0.141176 0 0 0 0 0.141176 0 0 0 0 0.141176 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow_3051_46849"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_3051_46849" mode="normal" result="shape"/></filter><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="24" x2="26" y1=".000001" y2="48"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset="1" stop-color="#fff" stop-opacity=".12"/></linearGradient><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="24" x2="24" y1="14" y2="34"><stop offset="0" stop-color="#fff" stop-opacity=".8"/><stop offset="1" stop-color="#fff" stop-opacity=".5"/></linearGradient><linearGradient id="e" gradientUnits="userSpaceOnUse" x1="24" x2="24" y1="0" y2="48"><stop offset="0" stop-color="#fff" stop-opacity=".12"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><clipPath id="f"><rect height="48" rx="12" width="48"/></clipPath><g filter="url(#a)"><g clip-path="url(#f)"><rect fill="#0A0D12" height="48" rx="12" width="48"/><path d="m0 0h48v48h-48z" fill="url(#c)"/><g filter="url(#b)"><path d="m14 17.2484h14.4546l-14.2178 14.2178 2.297 2.297 14.2178-14.2178v14.4546h.092l3.1564-3.1564v-13.3032l-3.5404-3.5404h-13.305l-3.1546 3.1546z" fill="url(#d)"/></g></g><rect height="46" rx="11" stroke="url(#e)" stroke-width="2" width="46" x="1" y="1"/></g></svg>


--------------------------------------------------------------------------------
/public/logo_h.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atharva-aak/vision2web/8eca80ddfd19000fdbf3cde599ffb8d7f4a71257/public/logo_h.png


--------------------------------------------------------------------------------
/public/logo_h1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atharva-aak/vision2web/8eca80ddfd19000fdbf3cde599ffb8d7f4a71257/public/logo_h1.png


--------------------------------------------------------------------------------
/public/logo_main.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 3 |  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 4 | <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 5 |  width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
 6 |  preserveAspectRatio="xMidYMid meet">
 7 | 
 8 | <g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
 9 | fill="#000000" stroke="none">
10 | <path d="M2430 5116 c-3 -3 -24 -6 -45 -6 -80 -3 -230 -22 -239 -30 -5 -5 -14
11 | -6 -22 -3 -24 9 -345 -72 -352 -89 -2 -4 -7 -6 -12 -3 -16 10 -310 -111 -310
12 | -128 0 -6 -3 -8 -6 -4 -8 7 -86 -31 -96 -47 -4 -6 -8 -8 -8 -4 0 7 -148 -78
13 | -160 -91 -3 -4 -17 -12 -32 -20 -64 -33 -252 -185 -366 -296 -127 -123 -261
14 | -283 -349 -415 -57 -87 -119 -193 -114 -199 1 -2 -2 -7 -7 -10 -13 -9 -54 -91
15 | -45 -91 5 0 2 -4 -5 -8 -43 -28 -229 -586 -207 -622 3 -6 1 -10 -5 -10 -6 0
16 | -11 -12 -9 -27 1 -16 -1 -35 -4 -43 -11 -27 -27 -182 -33 -325 -8 -183 25
17 | -565 49 -565 4 0 5 -4 2 -10 -22 -36 164 -594 207 -622 7 -4 10 -8 5 -8 -9 0
18 | 32 -82 45 -91 5 -3 10 -10 10 -15 -1 -13 53 -107 111 -194 88 -132 222 -292
19 | 349 -415 114 -111 302 -263 366 -296 15 -8 29 -17 32 -20 4 -5 41 -28 131 -81
20 | 16 -10 29 -14 29 -10 0 4 4 2 8 -4 10 -16 88 -54 96 -47 3 4 6 2 6 -4 0 -17
21 | 294 -138 310 -128 5 3 10 1 12 -3 7 -17 328 -98 352 -89 8 3 17 2 22 -3 8 -7
22 | 104 -20 239 -32 146 -12 556 9 590 30 5 4 17 5 26 4 22 -4 248 52 359 88 130
23 | 42 310 120 310 133 0 6 3 8 6 4 8 -7 86 31 96 47 4 6 8 8 8 4 0 -4 13 0 29 10
24 | 90 53 127 76 131 81 3 3 17 12 32 20 64 33 252 185 366 296 127 123 261 283
25 | 349 415 58 87 112 181 111 194 0 5 5 12 10 15 13 9 54 91 45 91 -5 0 -2 4 5 8
26 | 43 28 229 586 207 622 -3 6 -2 10 2 10 12 0 31 137 45 322 9 121 9 195 0 316
27 | -14 185 -33 322 -45 322 -4 0 -5 4 -2 10 22 36 -164 594 -207 622 -7 4 -10 8
28 | -5 8 9 0 -32 82 -45 91 -5 3 -8 8 -7 10 5 6 -57 112 -114 199 -88 132 -222
29 | 292 -349 415 -114 111 -302 263 -366 296 -15 8 -29 16 -32 20 -12 13 -160 98
30 | -160 91 0 -4 -4 -2 -8 4 -10 16 -88 54 -96 47 -3 -4 -6 -2 -6 4 0 13 -180 91
31 | -310 133 -111 36 -337 92 -359 88 -9 -1 -20 0 -26 4 -8 5 -160 25 -215 28
32 | -133 7 -326 11 -330 6z m1493 -1323 c9 -54 3 -60 -76 -67 -98 -9 -187 -51
33 | -220 -103 -24 -39 -61 -129 -593 -1453 -166 -415 -316 -786 -332 -825 l-29
34 | -70 -96 -3 -97 -3 -19 43 c-29 66 -56 132 -110 273 -27 72 -95 245 -150 385
35 | -55 140 -140 361 -191 490 -50 129 -95 244 -100 255 -5 11 -48 121 -95 245
36 | -230 597 -275 685 -380 735 -43 20 -78 28 -146 32 l-89 6 0 48 0 49 644 0
37 | c453 0 653 -3 677 -11 46 -16 87 -56 98 -95 10 -38 0 -104 -22 -137 -25 -39
38 | -94 -67 -164 -67 -73 0 -142 32 -237 112 -105 88 -177 107 -222 56 -15 -16
39 | -19 -36 -18 -102 0 -113 -10 -82 284 -876 56 -151 133 -360 172 -465 38 -104
40 | 81 -219 95 -255 14 -36 36 -94 49 -130 36 -104 73 -200 80 -212 9 -15 10 -13
41 | 104 232 81 211 101 262 139 358 10 26 75 193 144 372 69 179 162 420 207 535
42 | 173 446 181 468 175 503 -3 17 -16 39 -28 47 -30 19 -106 34 -197 37 l-75 3
43 | -3 47 -3 48 373 2 c467 4 444 6 451 -39z"/>
44 | </g>
45 | </svg>
46 | 


--------------------------------------------------------------------------------
/public/meta.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atharva-aak/vision2web/8eca80ddfd19000fdbf3cde599ffb8d7f4a71257/public/meta.png


--------------------------------------------------------------------------------
/public/meta1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atharva-aak/vision2web/8eca80ddfd19000fdbf3cde599ffb8d7f4a71257/public/meta1.png


--------------------------------------------------------------------------------
/public/microsoft.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atharva-aak/vision2web/8eca80ddfd19000fdbf3cde599ffb8d7f4a71257/public/microsoft.png


--------------------------------------------------------------------------------
/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>


--------------------------------------------------------------------------------
/public/opengv.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atharva-aak/vision2web/8eca80ddfd19000fdbf3cde599ffb8d7f4a71257/public/opengv.png


--------------------------------------------------------------------------------
/public/qwen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atharva-aak/vision2web/8eca80ddfd19000fdbf3cde599ffb8d7f4a71257/public/qwen.png


--------------------------------------------------------------------------------
/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>


--------------------------------------------------------------------------------
/public/w_t_c.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atharva-aak/vision2web/8eca80ddfd19000fdbf3cde599ffb8d7f4a71257/public/w_t_c.png


--------------------------------------------------------------------------------
/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>


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss";
 2 | 
 3 | export default {
 4 | 	darkMode: ["class"],
 5 | 	content: [
 6 | 		"./pages/**/*.{js,ts,jsx,tsx,mdx}",
 7 | 		"./components/**/*.{js,ts,jsx,tsx,mdx}",
 8 | 		"./app/**/*.{js,ts,jsx,tsx,mdx}",
 9 | 	],
10 | 	theme: {
11 | 		extend: {
12 | 			
13 | 			colors: {
14 | 				background: 'hsl(var(--background))',
15 | 				foreground: 'hsl(var(--foreground))',
16 | 				card: {
17 | 					DEFAULT: 'hsl(var(--card))',
18 | 					foreground: 'hsl(var(--card-foreground))'
19 | 				},
20 | 				popover: {
21 | 					DEFAULT: 'hsl(var(--popover))',
22 | 					foreground: 'hsl(var(--popover-foreground))'
23 | 				},
24 | 				primary: {
25 | 					DEFAULT: '#4f46e4',
26 | 					foreground: 'hsl(var(--primary-foreground))'
27 | 				},
28 | 				secondary: {
29 | 					DEFAULT: 'hsl(var(--secondary))',
30 | 					foreground: 'hsl(var(--secondary-foreground))'
31 | 				},
32 | 				muted: {
33 | 					DEFAULT: 'hsl(var(--muted))',
34 | 					foreground: 'hsl(var(--muted-foreground))'
35 | 				},
36 | 				accent: {
37 | 					DEFAULT: 'hsl(var(--accent))',
38 | 					foreground: 'hsl(var(--accent-foreground))'
39 | 				},
40 | 				destructive: {
41 | 					DEFAULT: 'hsl(var(--destructive))',
42 | 					foreground: 'hsl(var(--destructive-foreground))'
43 | 				},
44 | 				border: 'hsl(var(--border))',
45 | 				input: 'hsl(var(--input))',
46 | 				ring: 'hsl(var(--ring))',
47 | 				chart: {
48 | 					'1': 'hsl(var(--chart-1))',
49 | 					'2': 'hsl(var(--chart-2))',
50 | 					'3': 'hsl(var(--chart-3))',
51 | 					'4': 'hsl(var(--chart-4))',
52 | 					'5': 'hsl(var(--chart-5))'
53 | 				},
54 | 				sidebar: {
55 | 					DEFAULT: 'hsl(var(--sidebar-background))',
56 | 					foreground: 'hsl(var(--sidebar-foreground))',
57 | 					primary: 'hsl(var(--sidebar-primary))',
58 | 					'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
59 | 					accent: 'hsl(var(--sidebar-accent))',
60 | 					'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
61 | 					border: 'hsl(var(--sidebar-border))',
62 | 					ring: 'hsl(var(--sidebar-ring))'
63 | 				}
64 | 			},
65 | 			borderRadius: {
66 | 				lg: 'var(--radius)',
67 | 				md: 'calc(var(--radius) - 2px)',
68 | 				sm: 'calc(var(--radius) - 4px)'
69 | 			}
70 | 		}
71 | 	},
72 | 	plugins: [require("tailwindcss-animate")],
73 | } satisfies Config;
74 | 


--------------------------------------------------------------------------------
/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 |       "@/*": ["./*"]
23 |     }
24 |   },
25 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 |   "exclude": ["node_modules"]
27 | }
28 | 


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