├── .eslintrc.json
├── .gitignore
├── .nvmrc
├── README.md
├── app
    ├── favicon.ico
    ├── globals.css
    ├── layout.tsx
    └── page.tsx
├── components.json
├── components
    └── ui
    │   ├── button.tsx
    │   └── card.tsx
├── generated-icon.png
├── lib
    └── utils.ts
├── next.config.mjs
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── public
    ├── images
    │   ├── idevibelogo.png
    │   ├── logoogo.png
    │   ├── photo-1.jpg
    │   ├── photo-2.jpg
    │   └── photo-3.jpg
    └── manifest.json
├── tailwind.config.ts
├── tsconfig.json
├── util
    └── cn.ts
└── vercel.json


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/.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.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env*.local
29 | 
30 | # vercel
31 | .vercel
32 | 
33 | # typescript
34 | *.tsbuildinfo
35 | next-env.d.ts
36 | 
37 | # development environment
38 | .cache/
39 | .config/
40 | .upm/
41 | .replit
42 | replit.nix
43 | 


--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | 18.x 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | # or
14 | bun dev
15 | ```
16 | 
17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18 | 
19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20 | 
21 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
22 | 
23 | ## Learn More
24 | 
25 | To learn more about Next.js, take a look at the following resources:
26 | 
27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29 | 
30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
31 | 
32 | ## Deploy on Vercel
33 | 
34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35 | 
36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
37 | 


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbrown101010/landingpage/ad13bda17a243ebefda415cd1ce72d563d3fb225/app/favicon.ico


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer utilities {
 6 |   .text-balance {
 7 |     text-wrap: balance;
 8 |   }
 9 |   
10 |   .bg-dotted-grid {
11 |     background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
12 |     background-size: 24px 24px;
13 |   }
14 | }
15 | 
16 | @layer base {
17 |   :root {
18 |     --background: 0 0% 100%;
19 |     --foreground: 0 0% 3.9%;
20 |     --card: 0 0% 100%;
21 |     --card-foreground: 0 0% 3.9%;
22 |     --popover: 0 0% 100%;
23 |     --popover-foreground: 0 0% 3.9%;
24 |     --primary: 0 0% 9%;
25 |     --primary-foreground: 0 0% 98%;
26 |     --secondary: 0 0% 96.1%;
27 |     --secondary-foreground: 0 0% 9%;
28 |     --muted: 0 0% 96.1%;
29 |     --muted-foreground: 0 0% 45.1%;
30 |     --accent: 0 0% 96.1%;
31 |     --accent-foreground: 0 0% 9%;
32 |     --destructive: 0 84.2% 60.2%;
33 |     --destructive-foreground: 0 0% 98%;
34 |     --border: 0 0% 89.8%;
35 |     --input: 0 0% 89.8%;
36 |     --ring: 0 0% 3.9%;
37 |     --chart-1: 12 76% 61%;
38 |     --chart-2: 173 58% 39%;
39 |     --chart-3: 197 37% 24%;
40 |     --chart-4: 43 74% 66%;
41 |     --chart-5: 27 87% 67%;
42 |     --radius: 0.5rem;
43 |   }
44 |   .dark {
45 |     --background: 0 0% 3.9%;
46 |     --foreground: 0 0% 98%;
47 |     --card: 0 0% 3.9%;
48 |     --card-foreground: 0 0% 98%;
49 |     --popover: 0 0% 3.9%;
50 |     --popover-foreground: 0 0% 98%;
51 |     --primary: 0 0% 98%;
52 |     --primary-foreground: 0 0% 9%;
53 |     --secondary: 0 0% 14.9%;
54 |     --secondary-foreground: 0 0% 98%;
55 |     --muted: 0 0% 14.9%;
56 |     --muted-foreground: 0 0% 63.9%;
57 |     --accent: 0 0% 14.9%;
58 |     --accent-foreground: 0 0% 98%;
59 |     --destructive: 0 62.8% 30.6%;
60 |     --destructive-foreground: 0 0% 98%;
61 |     --border: 0 0% 14.9%;
62 |     --input: 0 0% 14.9%;
63 |     --ring: 0 0% 83.1%;
64 |     --chart-1: 220 70% 50%;
65 |     --chart-2: 160 60% 45%;
66 |     --chart-3: 30 80% 55%;
67 |     --chart-4: 280 65% 60%;
68 |     --chart-5: 340 75% 55%;
69 |   }
70 | }
71 | 
72 | @layer base {
73 |   * {
74 |     @apply border-border;
75 |   }
76 |   body {
77 |     @apply bg-background text-foreground;
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import { Inter, Playfair_Display } from "next/font/google";
 3 | import "./globals.css";
 4 | 
 5 | const playfair = Playfair_Display({ 
 6 |   subsets: ['latin'],
 7 |   display: 'swap',
 8 |   weight: ['400', '500'],
 9 |   style: ['normal'],
10 | })
11 | 
12 | const inter = Inter({ 
13 |   subsets: ['latin'],
14 |   display: 'swap',
15 | })
16 | 
17 | export const metadata: Metadata = {
18 |   title: "vibedev.ai",
19 |   description: "Experience the new way of coding with vibedev.ai. Transform your development workflow and vibe with your code like never before.",
20 |   icons: {
21 |     icon: [
22 |       {
23 |         url: "/images/idevibelogo.png",
24 |         type: "image/png",
25 |         sizes: "32x32"
26 |       },
27 |       {
28 |         url: "/images/idevibelogo.png",
29 |         type: "image/png",
30 |         sizes: "16x16"
31 |       }
32 |     ],
33 |     apple: [
34 |       {
35 |         url: "/images/idevibelogo.png",
36 |         type: "image/png",
37 |         sizes: "180x180"
38 |       }
39 |     ],
40 |     shortcut: [{ url: "/images/idevibelogo.png" }],
41 |     other: [
42 |       {
43 |         rel: "icon",
44 |         url: "/images/idevibelogo.png",
45 |       },
46 |     ],
47 |   },
48 |   manifest: "/manifest.json",
49 |   viewport: {
50 |     width: 'device-width',
51 |     initialScale: 1
52 |   }
53 | };
54 | 
55 | export default function RootLayout({
56 |   children,
57 | }: {
58 |   children: React.ReactNode
59 | }) {
60 |   return (
61 |     <html lang="en" className="dark">
62 |       <head>
63 |         <link rel="icon" type="image/png" sizes="32x32" href="/images/idevibelogo.png" />
64 |         <link rel="icon" type="image/png" sizes="16x16" href="/images/idevibelogo.png" />
65 |         <link rel="apple-touch-icon" sizes="180x180" href="/images/idevibelogo.png" />
66 |         <link rel="manifest" href="/manifest.json" />
67 |       </head>
68 |       <body className={`${inter.className} bg-black bg-dotted-grid`}>{children}</body>
69 |     </html>
70 |   );
71 | }
72 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | 
  3 | import { Button } from "@/components/ui/button"
  4 | import Link from "next/link"
  5 | import { useEffect, useRef } from "react"
  6 | import { Playfair_Display, Inter } from 'next/font/google'
  7 | 
  8 | const playfair = Playfair_Display({ 
  9 |   subsets: ['latin'],
 10 |   display: 'swap',
 11 |   weight: ['400', '500'],
 12 |   style: ['normal'],
 13 | })
 14 | 
 15 | const inter = Inter({
 16 |   subsets: ['latin'],
 17 |   display: 'swap',
 18 | })
 19 | 
 20 | export default function Page() {
 21 |   const observerRef = useRef<IntersectionObserver | null>(null);
 22 | 
 23 |   useEffect(() => {
 24 |     observerRef.current = new IntersectionObserver((entries) => {
 25 |       entries.forEach(entry => {
 26 |         if (entry.isIntersecting) {
 27 |           entry.target.classList.add('animate-in');
 28 |         }
 29 |       });
 30 |     }, {
 31 |       threshold: 0.1,
 32 |       rootMargin: '50px'
 33 |     });
 34 | 
 35 |     document.querySelectorAll('.scroll-animation').forEach((element) => {
 36 |       observerRef.current?.observe(element);
 37 |     });
 38 | 
 39 |     return () => observerRef.current?.disconnect();
 40 |   }, []);
 41 | 
 42 |   useEffect(() => {
 43 |     const loadTally = () => {
 44 |       const existingScript = document.querySelector('script[src="https://tally.so/widgets/embed.js"]');
 45 |       if (!existingScript) {
 46 |         const script = document.createElement('script');
 47 |         script.src = "https://tally.so/widgets/embed.js";
 48 |         script.async = true;
 49 |         script.onload = () => {
 50 |           // @ts-ignore
 51 |           if (window.Tally) {
 52 |             // @ts-ignore
 53 |             window.Tally.loadEmbeds();
 54 |           }
 55 |         };
 56 |         document.body.appendChild(script);
 57 |       }
 58 |     };
 59 | 
 60 |     loadTally();
 61 |   }, []);
 62 | 
 63 |   return (
 64 |     <div className={`flex flex-col min-h-screen bg-black text-foreground bg-dotted-grid ${inter.className}`}>
 65 |       <style jsx global>{`
 66 |         @keyframes fadeIn {
 67 |           from { opacity: 0; transform: translateY(20px); }
 68 |           to { opacity: 1; transform: translateY(0); }
 69 |         }
 70 | 
 71 |         @keyframes shimmer {
 72 |           0% { background-position: 0% 0; }
 73 |           100% { background-position: 200% 0; }
 74 |         }
 75 | 
 76 |         .fade-in {
 77 |           animation: fadeIn 0.8s ease-out forwards;
 78 |           opacity: 0;
 79 |         }
 80 | 
 81 |         .delay-1 { animation-delay: 0.2s; }
 82 |         .delay-2 { animation-delay: 0.4s; }
 83 |         .delay-3 { animation-delay: 0.6s; }
 84 |         
 85 |         .glimmer-card {
 86 |           position: relative;
 87 |           background: rgb(23, 23, 23);
 88 |           border-radius: 12px;
 89 |           overflow: hidden;
 90 |         }
 91 |         
 92 |         .glimmer-card::before {
 93 |           content: '';
 94 |           position: absolute;
 95 |           inset: -1px;
 96 |           background: linear-gradient(
 97 |             90deg,
 98 |             transparent,
 99 |             rgba(236, 72, 153, 0.03),
100 |             rgba(236, 72, 153, 0.06),
101 |             rgba(236, 72, 153, 0.03),
102 |             transparent
103 |           );
104 |           background-size: 200% 100%;
105 |           animation: shimmer 8s ease-in-out infinite;
106 |           pointer-events: none;
107 |         }
108 | 
109 |         .glimmer-pill {
110 |           position: relative;
111 |           background: rgb(23, 23, 23);
112 |           border-radius: 9999px;
113 |           overflow: hidden;
114 |         }
115 |         
116 |         .glimmer-pill::before {
117 |           content: '';
118 |           position: absolute;
119 |           inset: -1px;
120 |           background: linear-gradient(
121 |             90deg,
122 |             transparent,
123 |             rgba(236, 72, 153, 0.03),
124 |             rgba(236, 72, 153, 0.06),
125 |             rgba(236, 72, 153, 0.03),
126 |             transparent
127 |           );
128 |           background-size: 200% 100%;
129 |           animation: shimmer 8s ease-in-out infinite;
130 |           pointer-events: none;
131 |         }
132 | 
133 |         .hero-glow {
134 |           position: absolute;
135 |           top: 85%;
136 |           left: 50%;
137 |           transform: translate(-50%, -50%);
138 |           width: 140%;
139 |           height: 600px;
140 |           background: radial-gradient(
141 |             circle at center,
142 |             rgba(255, 255, 255, 0.08) 0%,
143 |             rgba(255, 255, 255, 0.03) 35%,
144 |             transparent 70%
145 |           );
146 |           pointer-events: none;
147 |           z-index: 0;
148 |           filter: blur(50px);
149 |         }
150 | 
151 |         .scroll-animation {
152 |           opacity: 0;
153 |           transform: translateY(20px);
154 |           transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
155 |         }
156 | 
157 |         .scroll-animation.animate-in {
158 |           opacity: 1;
159 |           transform: translateY(0);
160 |         }
161 | 
162 |         .scroll-delay-1 { transition-delay: 0.1s; }
163 |         .scroll-delay-2 { transition-delay: 0.2s; }
164 |         .scroll-delay-3 { transition-delay: 0.3s; }
165 |       `}</style>
166 | 
167 |       {/* Navigation */}
168 |       <header className="flex items-center justify-between py-4 px-6 border-b border-neutral-800/50">
169 |         <Link href="/" className={`text-2xl md:text-3xl font-medium ${playfair.className}`}>
170 |           VibeDev.ai
171 |         </Link>
172 |         <nav className="flex items-center gap-4">
173 |           <Button 
174 |             size="sm"
175 |             onClick={() => {
176 |               document.getElementById('early-access-form')?.scrollIntoView({ 
177 |                 behavior: 'smooth',
178 |                 block: 'center'
179 |               });
180 |             }}
181 |           >
182 |             Sign Up
183 |           </Button>
184 |         </nav>
185 |       </header>
186 | 
187 |       <main className="flex-grow">
188 |         {/* Hero Section */}
189 |         <section className="py-20 px-6 relative">
190 |           <div className="hero-glow" />
191 |           <div className="max-w-[1200px] mx-auto text-center relative z-10">
192 |             {/* Logo Placeholder */}
193 |             <div className="mb-4">
194 |               <img 
195 |                 src="/images/idevibelogo.png" 
196 |                 alt="VibeDev Logo" 
197 |                 className="w-36 h-36 mx-auto object-contain"
198 |               />
199 |             </div>
200 |             <div className="inline-flex items-center px-6 py-2 text-base font-medium text-purple-400 mb-8 glimmer-pill fade-in bg-purple-500/10 border border-purple-500/20 shadow-[0_0_15px_rgba(239,68,68,0.1)]">
201 |               <span className={playfair.className}>A Software Composer app</span>
202 |             </div>
203 |             <h1 className={`text-4xl md:text-5xl font-medium mb-6 tracking-tight fade-in delay-1 ${playfair.className}`}>
204 |               The Easiest Way To<br />Vibe Code With Cursor
205 |             </h1>
206 |             <p className="text-lg text-neutral-400 mb-8 fade-in delay-2">
207 |               VibeDev is your IDE for Vibe Coding
208 |             </p>
209 |             <div className="fade-in delay-3">
210 |               <Button 
211 |                 size="lg" 
212 |                 className="rounded-full"
213 |                 onClick={() => {
214 |                   document.getElementById('early-access-form')?.scrollIntoView({ 
215 |                     behavior: 'smooth',
216 |                     block: 'center'
217 |                   });
218 |                 }}
219 |               >
220 |                 Get Early Access
221 |               </Button>
222 |             </div>
223 |           </div>
224 |         </section>
225 | 
226 |         {/* Demo Section */}
227 |         <section className="py-20 px-6">
228 |           <div className="max-w-[1200px] mx-auto scroll-animation">
229 |             <div className="glimmer-card">
230 |               <div className="bg-neutral-900">
231 |                 <div className="flex flex-col md:flex-row h-auto md:h-[600px]">
232 |                   {/* Input Section */}
233 |                   <div className="w-full md:w-1/2 md:border-r border-neutral-800 p-6 flex flex-col">
234 |                     <div className="mb-6">
235 |                       <label className="block text-sm font-medium text-neutral-400 mb-2">What should Cursor do?</label>
236 |                       <div className="relative">
237 |                         <input
238 |                           type="text"
239 |                           placeholder="Describe what you want to build..."
240 |                           className="w-full px-4 py-3 bg-neutral-800 border border-neutral-700 rounded-lg text-white placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 focus:border-green-500/30"
241 |                         />
242 |                         <button className="absolute right-2 top-1/2 -translate-y-1/2 p-2 bg-green-500/10 rounded-lg text-green-400 hover:bg-green-500/20 transition-colors">
243 |                           <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
244 |                             <path d="M22 2L11 13"/>
245 |                             <path d="M22 2L15 22L11 13L2 9L22 2Z"/>
246 |                           </svg>
247 |                         </button>
248 |                       </div>
249 |                     </div>
250 |                     
251 |                     <div>
252 |                       <h3 className="text-sm font-medium text-neutral-400 mb-4">Start from</h3>
253 |                       <div className="grid grid-cols-1 gap-3">
254 |                         {[...Array(2)].map((_, i) => (
255 |                           <button
256 |                             key={i}
257 |                             className="flex items-center gap-3 p-4 bg-neutral-800/50 rounded-lg hover:bg-neutral-800 transition-colors text-left group"
258 |                           >
259 |                             <div className="w-8 h-8 rounded-lg bg-green-500/10 text-green-400 flex items-center justify-center group-hover:bg-green-500/20 transition-colors">
260 |                               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
261 |                                 <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
262 |                               </svg>
263 |                             </div>
264 |                             <span className="text-sm font-medium">Template {i + 1}</span>
265 |                           </button>
266 |                         ))}
267 |                       </div>
268 |                     </div>
269 |                   </div>
270 | 
271 |                   {/* Cursor Composer Section - Hidden on mobile */}
272 |                   <div className="hidden md:flex md:w-1/2 md:flex-col">
273 |                     <div className="p-4 border-b border-neutral-800">
274 |                       <h2 className="text-lg font-medium">Cursor Composer</h2>
275 |                     </div>
276 |                     <div className="flex-1 p-4 overflow-y-auto space-y-4">
277 |                       {/* First Message */}
278 |                       <div className="flex justify-end">
279 |                         <div className="max-w-[85%] p-4 bg-neutral-800 rounded-lg">
280 |                           <p className="text-sm text-neutral-300 text-right">
281 |                             Sure, I can make those changes for you.
282 |                           </p>
283 |                         </div>
284 |                       </div>
285 | 
286 |                       {/* Status Updates */}
287 |                       <div className="flex flex-col gap-2">
288 |                         <div className="self-end max-w-[85%] p-3 bg-neutral-800 rounded-lg">
289 |                           <p className="text-sm font-medium text-green-400 text-right">File generated</p>
290 |                         </div>
291 |                         <div className="self-end max-w-[85%] p-3 bg-neutral-800 rounded-lg">
292 |                           <p className="text-sm font-medium text-green-400 text-right">File generated</p>
293 |                         </div>
294 |                         <div className="self-end max-w-[85%] p-3 bg-neutral-800 rounded-lg">
295 |                           <p className="text-sm font-medium text-green-400 text-right">File generated</p>
296 |                         </div>
297 |                         <div className="self-end max-w-[85%] p-3 bg-neutral-800 rounded-lg">
298 |                           <p className="text-sm font-medium text-green-400 text-right">File generated</p>
299 |                         </div>
300 |                       </div>
301 | 
302 |                       {/* Completion Message */}
303 |                       <div className="flex justify-end">
304 |                         <div className="max-w-[85%] p-4 bg-neutral-800 rounded-lg">
305 |                           <p className="text-sm text-neutral-300 text-right">
306 |                             I&apos;ve successfully created your app
307 |                           </p>
308 |                         </div>
309 |                       </div>
310 |                     </div>
311 |                     <div className="p-4 border-t border-neutral-800">
312 |                       <div className="relative">
313 |                         <input
314 |                           type="text"
315 |                           placeholder="Type your message..."
316 |                           className="w-full px-4 py-3 bg-neutral-800 border border-neutral-700 rounded-lg text-white placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 focus:border-green-500/30"
317 |                         />
318 |                         <button className="absolute right-2 top-1/2 -translate-y-1/2 p-2 bg-green-500/10 rounded-lg text-green-400 hover:bg-green-500/20 transition-colors">
319 |                           <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
320 |                             <path d="M22 2L11 13"/>
321 |                             <path d="M22 2L15 22L11 13L2 9L22 2Z"/>
322 |                           </svg>
323 |                         </button>
324 |                       </div>
325 |                     </div>
326 |                   </div>
327 |                 </div>
328 |               </div>
329 |             </div>
330 |           </div>
331 |         </section>
332 | 
333 |         {/* Features Section */}
334 |         <section className="py-20 px-6 border-t border-neutral-800">
335 |           <div className="max-w-[1200px] mx-auto">
336 |             <div className="text-center mb-16 scroll-animation">
337 |               <h2 className={`text-3xl md:text-4xl font-medium mb-3 ${playfair.className}`}>Create in Minutes, Not Months</h2>
338 |               <p className="text-neutral-400 text-lg">Transform your ideas into reality with three simple prompts.</p>
339 |             </div>
340 | 
341 |             <div className="grid md:grid-cols-3 gap-6 relative">
342 |               <div className="bg-neutral-900 p-8 rounded-xl border border-neutral-800/80 hover:border-green-500/20 transition-colors scroll-animation scroll-delay-1 group">
343 |                 <div className="w-12 h-12 rounded-xl bg-green-500/10 text-green-400 flex items-center justify-center mb-6 group-hover:bg-green-500/20 transition-colors">
344 |                   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
345 |                     <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
346 |                     <polyline points="7 10 12 15 17 10"/>
347 |                     <line x1="12" y1="15" x2="12" y2="3"/>
348 |                   </svg>
349 |                 </div>
350 |                 <h3 className={`text-xl font-medium mb-3 group-hover:text-green-400 transition-colors ${playfair.className}`}>Download Template</h3>
351 |                 <p className="text-neutral-400 leading-relaxed">
352 |                   Get started with our production-ready template. It&apos;s packed with everything you need to build a stunning landing page.
353 |                 </p>
354 |               </div>
355 | 
356 |               <div className="bg-neutral-900 p-8 rounded-xl border border-neutral-800/80 hover:border-green-500/20 transition-colors scroll-animation scroll-delay-2 group">
357 |                 <div className="w-12 h-12 rounded-xl bg-green-500/10 text-green-400 flex items-center justify-center mb-6 group-hover:bg-green-500/20 transition-colors">
358 |                   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
359 |                     <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4z"/>
360 |                   </svg>
361 |                 </div>
362 |                 <h3 className={`text-xl font-medium mb-3 group-hover:text-green-400 transition-colors ${playfair.className}`}>Tell VibeDev What You Want</h3>
363 |                 <p className="text-neutral-400 leading-relaxed">
364 |                   Describe your vision in plain English. VibeDev will control Cursor to transform your words into a beautiful, functional design.
365 |                 </p>
366 |               </div>
367 | 
368 |               <div className="bg-neutral-900 p-8 rounded-xl border border-neutral-800/80 hover:border-green-500/20 transition-colors scroll-animation scroll-delay-3 group">
369 |                 <div className="w-12 h-12 rounded-xl bg-green-500/10 text-green-400 flex items-center justify-center mb-6 group-hover:bg-green-500/20 transition-colors">
370 |                   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
371 |                     <path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/>
372 |                   </svg>
373 |                 </div>
374 |                 <h3 className={`text-xl font-medium mb-3 group-hover:text-green-400 transition-colors ${playfair.className}`}>Deploy to Vercel</h3>
375 |                 <p className="text-neutral-400 leading-relaxed">
376 |                   Deploy your landing page to Vercel with one click. Share your creation with the world instantly on a global edge network.
377 |                 </p>
378 |               </div>
379 |             </div>
380 |           </div>
381 |         </section>
382 | 
383 |         {/* Early Access Form Section */}
384 |         <section id="early-access-form" className="py-20 px-6 border-t border-neutral-800 bg-neutral-900/80">
385 |           <div className="max-w-[1200px] mx-auto text-center">
386 |             <div className="scroll-animation">
387 |               <h2 className={`text-3xl md:text-4xl font-medium mb-4 ${playfair.className}`}>Get Early Access</h2>
388 |               <p className="text-neutral-400 mb-12">Be the first to experience the future of coding.</p>
389 |             </div>
390 |             <div className="max-w-[400px] mx-auto scroll-animation">
391 |               <iframe 
392 |                 data-tally-src="https://tally.so/embed/wM756p?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1" 
393 |                 loading="lazy" 
394 |                 width="100%" 
395 |                 height="230" 
396 |                 frameBorder="0" 
397 |                 title="Sign Up for Early Access"
398 |               ></iframe>
399 |             </div>
400 |           </div>
401 |         </section>
402 |       </main>
403 | 
404 |       <footer className="py-8 px-6 border-t border-neutral-800/50 scroll-animation">
405 |         <div className="max-w-[1200px] mx-auto flex items-center justify-between">
406 |           <div className="text-sm text-neutral-400">
407 |             © 2024 Software Composer LP. All rights reserved.
408 |           </div>
409 |           <div className="flex items-center gap-6">
410 |             <a href="https://twitter.com" target="_blank" rel="noopener noreferrer" className="text-neutral-400 hover:text-white transition-colors">
411 |               <span className="sr-only">Twitter</span>
412 |               <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
413 |                 <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"/>
414 |               </svg>
415 |             </a>
416 |             <a href="https://github.com" target="_blank" rel="noopener noreferrer" className="text-neutral-400 hover:text-white transition-colors">
417 |               <span className="sr-only">GitHub</span>
418 |               <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
419 |                 <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/>
420 |               </svg>
421 |             </a>
422 |             <a href="https://discord.com" target="_blank" rel="noopener noreferrer" className="text-neutral-400 hover:text-white transition-colors">
423 |               <span className="sr-only">Discord</span>
424 |               <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
425 |                 <path d="M18 6h0a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3h-7a3 3 0 0 1-3-3v0"/>
426 |                 <path d="M6 18v-7a3 3 0 0 1 3-3h7"/>
427 |                 <circle cx="8" cy="12" r="1"/>
428 |                 <circle cx="16" cy="12" r="1"/>
429 |               </svg>
430 |             </a>
431 |             <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer" className="text-neutral-400 hover:text-white transition-colors">
432 |               <span className="sr-only">LinkedIn</span>
433 |               <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
434 |                 <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/>
435 |                 <rect x="2" y="9" width="4" height="12"/>
436 |                 <circle cx="4" cy="4" r="2"/>
437 |               </svg>
438 |             </a>
439 |           </div>
440 |         </div>
441 |       </footer>
442 |     </div>
443 |   )
444 | }


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


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


--------------------------------------------------------------------------------
/generated-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbrown101010/landingpage/ad13bda17a243ebefda415cd1ce72d563d3fb225/generated-icon.png


--------------------------------------------------------------------------------
/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.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {};
3 | 
4 | export default nextConfig;
5 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "my-app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev --port 3000 --hostname 0.0.0.0",
 7 |     "build": "next build",
 8 |     "start": "next start --port 3000 --hostname 0.0.0.0",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@radix-ui/react-icons": "^1.3.0",
13 |     "@radix-ui/react-slot": "^1.1.0",
14 |     "@replit/object-storage": "^1.0.0",
15 |     "class-variance-authority": "^0.7.0",
16 |     "clsx": "^2.1.1",
17 |     "lucide-react": "^0.446.0",
18 |     "next": "14.2.4",
19 |     "react": "^18.2.0",
20 |     "react-dom": "^18.2.0",
21 |     "tailwind-merge": "^2.5.2",
22 |     "tailwindcss": "^3.4.1",
23 |     "tailwindcss-animate": "^1.0.7"
24 |   },
25 |   "devDependencies": {
26 |     "@types/node": "^20.11.6",
27 |     "@types/react": "^18.2.48",
28 |     "@types/react-dom": "^18.2.18",
29 |     "eslint": "^8.56.0",
30 |     "eslint-config-next": "14.2.4",
31 |     "postcss": "^8",
32 |     "typescript": "^5.3.3"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/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/images/idevibelogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbrown101010/landingpage/ad13bda17a243ebefda415cd1ce72d563d3fb225/public/images/idevibelogo.png


--------------------------------------------------------------------------------
/public/images/logoogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbrown101010/landingpage/ad13bda17a243ebefda415cd1ce72d563d3fb225/public/images/logoogo.png


--------------------------------------------------------------------------------
/public/images/photo-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbrown101010/landingpage/ad13bda17a243ebefda415cd1ce72d563d3fb225/public/images/photo-1.jpg


--------------------------------------------------------------------------------
/public/images/photo-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbrown101010/landingpage/ad13bda17a243ebefda415cd1ce72d563d3fb225/public/images/photo-2.jpg


--------------------------------------------------------------------------------
/public/images/photo-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbrown101010/landingpage/ad13bda17a243ebefda415cd1ce72d563d3fb225/public/images/photo-3.jpg


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "VibeDev",
 3 |   "short_name": "VibeDev",
 4 |   "icons": [
 5 |     {
 6 |       "src": "/images/idevibelogo.png",
 7 |       "sizes": "192x192",
 8 |       "type": "image/png"
 9 |     },
10 |     {
11 |       "src": "/images/idevibelogo.png",
12 |       "sizes": "512x512",
13 |       "type": "image/png"
14 |     }
15 |   ],
16 |   "theme_color": "#000000",
17 |   "background_color": "#000000",
18 |   "start_url": "/",
19 |   "display": "standalone",
20 |   "orientation": "portrait"
21 | } 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss";
 2 | 
 3 | const config: Config = {
 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 |   		backgroundImage: {
13 |   			'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
14 |   			'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
15 |         'dotted-grid': 'radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.15) 2px, transparent 0)',
16 |   		},
17 |       backgroundSize: {
18 |         'dotted-grid': '32px 32px',
19 |       },
20 |   		keyframes: {
21 |   			appear: {
22 |   				'0%': {
23 |   					opacity: '0'
24 |   				},
25 |   				'100%': {
26 |   					opacity: '100%'
27 |   				}
28 |   			}
29 |   		},
30 |   		animation: {
31 |   			appear: 'appear 300ms ease-out forwards'
32 |   		},
33 |   		borderRadius: {
34 |   			lg: 'var(--radius)',
35 |   			md: 'calc(var(--radius) - 2px)',
36 |   			sm: 'calc(var(--radius) - 4px)'
37 |   		},
38 |   		colors: {
39 |   			background: 'hsl(var(--background))',
40 |   			foreground: 'hsl(var(--foreground))',
41 |   			card: {
42 |   				DEFAULT: 'hsl(var(--card))',
43 |   				foreground: 'hsl(var(--card-foreground))'
44 |   			},
45 |   			popover: {
46 |   				DEFAULT: 'hsl(var(--popover))',
47 |   				foreground: 'hsl(var(--popover-foreground))'
48 |   			},
49 |   			primary: {
50 |   				DEFAULT: 'hsl(var(--primary))',
51 |   				foreground: 'hsl(var(--primary-foreground))'
52 |   			},
53 |   			secondary: {
54 |   				DEFAULT: 'hsl(var(--secondary))',
55 |   				foreground: 'hsl(var(--secondary-foreground))'
56 |   			},
57 |   			muted: {
58 |   				DEFAULT: 'hsl(var(--muted))',
59 |   				foreground: 'hsl(var(--muted-foreground))'
60 |   			},
61 |   			accent: {
62 |   				DEFAULT: 'hsl(var(--accent))',
63 |   				foreground: 'hsl(var(--accent-foreground))'
64 |   			},
65 |   			destructive: {
66 |   				DEFAULT: 'hsl(var(--destructive))',
67 |   				foreground: 'hsl(var(--destructive-foreground))'
68 |   			},
69 |   			border: 'hsl(var(--border))',
70 |   			input: 'hsl(var(--input))',
71 |   			ring: 'hsl(var(--ring))',
72 |   			chart: {
73 |   				'1': 'hsl(var(--chart-1))',
74 |   				'2': 'hsl(var(--chart-2))',
75 |   				'3': 'hsl(var(--chart-3))',
76 |   				'4': 'hsl(var(--chart-4))',
77 |   				'5': 'hsl(var(--chart-5))'
78 |   			}
79 |   		}
80 |   	}
81 |   },
82 |   plugins: [require("tailwindcss-animate")],
83 | };
84 | export default config;
85 | 


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


--------------------------------------------------------------------------------
/util/cn.ts:
--------------------------------------------------------------------------------
1 | import { ClassValue, clsx } from 'clsx'
2 | import { twMerge } from 'tailwind-merge'
3 | 
4 | export const cn = (...inputs: ClassValue[]) => {
5 |   return twMerge(clsx(inputs))
6 | }


--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": 2,
 3 |   "framework": "nextjs",
 4 |   "builds": [
 5 |     {
 6 |       "src": "package.json",
 7 |       "use": "@vercel/next@canary"
 8 |     }
 9 |   ],
10 |   "build": {
11 |     "env": {
12 |       "NODE_VERSION": "18.x"
13 |     }
14 |   },
15 |   "git": {
16 |     "deploymentEnabled": {
17 |       "main": true
18 |     }
19 |   }
20 | } 


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