0xmetaschool/
FlowchartGPT
FlowchartGPT revolutionizes diagram creation by utilizing AI to generate and modify professional flowcharts based on natural language descriptions. Built with Next.js and powered by GPT-4o, this open-source template provides developers with a foundation to create their own AI-powered diagram generation platforms with intuitive interfaces and intelligent assistance.
Readme
Source Codesrc
app
new
globals.css
layout.js
page.js
components
lib
utils
.gitignore
eslint.config.mjs
jsconfig.json
LICENSE
next.config.mjs
package.json
postcss.config.mjs
README.md
tailwind.config.mjs
src
apppage.js
apppage.jspage.js
1"use client"
2import React, { useEffect, useState, useMemo } from 'react';
3import { useRouter } from 'next/navigation';
4import { motion, useAnimation } from 'framer-motion';
5import Footer from '@/components/flowchart/footer';
6import { ArrowRight, Workflow, Users, Code, Zap, LineChart, Star, Activity, ChevronRight } from 'lucide-react';
7
8const EnhancedFlowchartAnimation = () => {
9 return (
10 <div className="bg-white p-6 rounded-xl shadow-lg">
11 <motion.svg viewBox="0 0 400 200" className="w-full h-full">
12 {/* Start Node with ripple effect */}
13 <motion.circle
14 cx="50"
15 cy="100"
16 r="25"
17 className="fill-blue-500"
18 initial={{ scale: 0 }}
19 animate={{ scale: 1 }}
20 transition={{ duration: 0.5 }}
21 />
22 <motion.circle
23 cx="50"
24 cy="100"
25 r="25"
26 className="fill-blue-500 opacity-50"
27 initial={{ scale: 0 }}
28 animate={{ scale: [1, 1.5, 1], opacity: [0.5, 0, 0.5] }}
29 transition={{ duration: 2, repeat: Infinity }}
30 />
31
32 {/* Curved Path to Decision Diamond */}
33 <motion.path
34 d="M75 100 Q 120 100 140 70"
35 className="stroke-blue-500"
36 strokeWidth="4"
37 fill="none"
38 initial={{ pathLength: 0 }}
39 animate={{ pathLength: 1 }}
40 transition={{ duration: 0.8, delay: 0.5, repeat: Infinity, repeatDelay: 1 }}
41 />
42
43 {/* Decision Diamond with rotation */}
44 <motion.g
45 initial={{ rotate: -180, opacity: 0 }}
46 animate={{ rotate: 0, opacity: 1 }}
47 transition={{ duration: 0.8, delay: 1, repeat: Infinity, repeatDelay: 1 }}
48 origin="center"
49 >
50 <motion.path
51 d="M140 40 L170 70 L140 100 L110 70 Z"
52 className="fill-yellow-400"
53 whileHover={{ scale: 1.1 }}
54 />
55 </motion.g>
56
57 {/* Multiple Paths from Decision */}
58 <motion.path
59 d="M170 70 Q 200 70 220 100"
60 className="stroke-green-500"
61 strokeWidth="4"
62 fill="none"
63 initial={{ pathLength: 0 }}
64 animate={{ pathLength: 1 }}
65 transition={{ duration: 0.8, delay: 1.5, repeat: Infinity, repeatDelay: 1 }}
66 />
67
68 <motion.path
69 d="M140 100 Q 170 130 200 130"
70 className="stroke-purple-500"
71 strokeWidth="4"
72 fill="none"
73 initial={{ pathLength: 0 }}
74 animate={{ pathLength: 1 }}
75 transition={{ duration: 0.8, delay: 1.5, repeat: Infinity, repeatDelay: 1 }}
76 />
77
78 {/* Process Rectangles with Pulse */}
79 <motion.g
80 initial={{ scale: 0 }}
81 animate={{ scale: 1 }}
82 transition={{ duration: 0.5, delay: 2, repeat: Infinity, repeatDelay: 1 }}
83 >
84 <motion.rect
85 x="220"
86 y="80"
87 width="40"
88 height="40"
89 rx="8"
90 className="fill-green-500"
91 animate={{
92 scale: [1, 1.05, 1],
93 opacity: [1, 0.8, 1],
94 }}
95 transition={{ duration: 2, repeat: Infinity }}
96 />
97 </motion.g>
98
99 <motion.g
100 initial={{ scale: 0 }}
101 animate={{ scale: 1 }}
102 transition={{ duration: 0.5, delay: 2, repeat: Infinity, repeatDelay: 1 }}
103 >
104 <motion.rect
105 x="200"
106 y="110"
107 width="40"
108 height="40"
109 rx="8"
110 className="fill-purple-500"
111 animate={{
112 scale: [1, 1.05, 1],
113 opacity: [1, 0.8, 1],
114 }}
115 transition={{ duration: 2, repeat: Infinity, delay: 0.5 }}
116 />
117 </motion.g>
118
119 {/* Converging Paths to End */}
120 <motion.path
121 d="M260 100 Q 290 100 310 100"
122 className="stroke-blue-500"
123 strokeWidth="4"
124 fill="none"
125 initial={{ pathLength: 0 }}
126 animate={{ pathLength: 1 }}
127 transition={{ duration: 0.8, delay: 2.5, repeat: Infinity, repeatDelay: 1 }}
128 />
129
130 <motion.path
131 d="M240 130 Q 270 130 310 100"
132 className="stroke-blue-500"
133 strokeWidth="4"
134 fill="none"
135 initial={{ pathLength: 0 }}
136 animate={{ pathLength: 1 }}
137 transition={{ duration: 0.8, delay: 2.5, repeat: Infinity, repeatDelay: 1 }}
138 />
139
140 {/* End Node with Starburst */}
141 <motion.circle
142 cx="330"
143 cy="100"
144 r="25"
145 className="fill-blue-600"
146 initial={{ scale: 0 }}
147 animate={{ scale: 1 }}
148 transition={{ duration: 0.5, delay: 3, repeat: Infinity, repeatDelay: 1 }}
149 />
150 <motion.circle
151 cx="330"
152 cy="100"
153 r="25"
154 className="fill-blue-400 opacity-50"
155 initial={{ scale: 1 }}
156 animate={{
157 scale: [1, 1.5, 1],
158 opacity: [0.5, 0, 0.5],
159 rotate: [0, 180, 360]
160 }}
161 transition={{ duration: 3, repeat: Infinity }}
162 />
163 </motion.svg>
164 </div>
165 );
166};
167
168const MovingBackground = () => {
169 const [mounted, setMounted] = useState(false);
170 const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
171
172 const positions = useMemo(() => {
173 return Array(10).fill(null).map(() => ({
174 top: Math.random() * 100,
175 left: Math.random() * 100
176 }));
177 }, []);
178
179 useEffect(() => {
180 setMounted(true);
181 if (typeof window !== 'undefined') {
182 setDimensions({
183 width: window.innerWidth,
184 height: window.innerHeight
185 });
186
187 const handleResize = () => {
188 setDimensions({
189 width: window.innerWidth,
190 height: window.innerHeight
191 });
192 };
193
194 window.addEventListener('resize', handleResize);
195 return () => window.removeEventListener('resize', handleResize);
196 }
197 }, []);
198
199 if (!mounted) {
200 return <div className="absolute inset-0 overflow-hidden" />;
201 }
202
203 return (
204 <div className="absolute inset-0 overflow-hidden">
205 {positions.map((pos, i) => (
206 <motion.div
207 key={i}
208 initial={{ x: -100, y: -100, rotate: 0 }}
209 animate={{ x: dimensions.width, y: dimensions.height, rotate: 360 }}
210 transition={{
211 duration: 20 + i * 2,
212 repeat: Infinity,
213 ease: "linear"
214 }}
215 className="absolute w-20 h-20 bg-blue-100/20 rounded-full"
216 style={{
217 top: `${pos.top}%`,
218 left: `${pos.left}%`
219 }}
220 />
221 ))}
222 </div>
223 );
224};
225
226const InteractiveGridBackground = () => {
227 return (
228 <div className="absolute inset-0 w-full h-full overflow-hidden">
229 <div className="grid grid-cols-12 gap-4 w-full h-full">
230 {[...Array(60)].map((_, i) => (
231 <motion.div
232 key={i}
233 whileHover={{ scale: 1.1, backgroundColor: "rgba(59, 130, 246, 0.1)" }}
234 className="w-full h-full border border-gray-200 rounded-lg"
235 />
236 ))}
237 </div>
238 </div>
239 );
240};
241
242const SlidingTestimonials = ({ testimonials }) => {
243 const [mounted, setMounted] = useState(false);
244
245 useEffect(() => {
246 setMounted(true);
247 }, []);
248
249 if (!mounted) {
250 return <div className="relative overflow-hidden h-96" />;
251 }
252
253 // Create a triple array to ensure smooth infinite scroll
254 const tripleTestimonials = [...testimonials, ...testimonials, ...testimonials];
255
256 return (
257 <div className="relative overflow-hidden h-96">
258 <motion.div
259 className="absolute flex gap-8"
260 animate={{
261 x: ['0%', '-50.33%']
262 }}
263 transition={{
264 duration: 20,
265 repeat: Infinity,
266 ease: "linear",
267 repeatType: "loop"
268 }}
269 style={{ width: '300%' }} // Set width to accommodate all testimonials
270 >
271 {tripleTestimonials.map((testimonial, index) => (
272 <div
273 key={index}
274 className="w-96 bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300"
275 >
276 <p className="text-gray-600 mb-4">{testimonial.text}</p>
277 <div className="border-t pt-4">
278 <p className="font-semibold">{testimonial.author}</p>
279 <p className="text-sm text-gray-500">{testimonial.role}</p>
280 <p className="text-sm text-blue-600">{testimonial.company}</p>
281 </div>
282 </div>
283 ))}
284 </motion.div>
285 </div>
286 );
287};
288
289const FlowchartEducation = () => {
290 const flowchartTypes = [
291 {
292 title: "Process Flow",
293 description: "Step-by-step progression of a process",
294 color: "blue",
295 delay: 0
296 },
297 {
298 title: "User Journey",
299 description: "Visualizes the user's experience with a product or service",
300 color: "green",
301 delay: 0.1
302 },
303 {
304 title: "System Architecture",
305 description: "Shows the structure and components of a system",
306 color: "purple",
307 delay: 0.2
308 },
309 {
310 title: "Decision Tree",
311 description: "Represents decisions and their possible consequences",
312 color: "orange",
313 delay: 0.3
314 },
315 {
316 title: "Data Flow",
317 description: "Visualizes how data moves through a system",
318 color: "teal",
319 delay: 0.4
320 },
321 {
322 title: "State Diagram",
323 description: "Represents the states of a system and transitions between them",
324 color: "pink",
325 delay: 0.5
326 },
327 {
328 title: "Sequence Flow",
329 description: "Shows the sequence of interactions in a process",
330 color: "indigo",
331 delay: 0.6
332 },
333 {
334 title: "Minimane Process",
335 description: "Simplified representation of a process",
336 color: "yellow",
337 delay: 0.7
338 }
339 ];
340
341 const benefits = [
342 "Clear Communication",
343 "Process Optimization",
344 "Decision Making",
345 "Training & Documentation",
346 "Quality Control",
347 "Project Planning"
348 ];
349
350 return (
351 <div className="bg-gray-50 py-10 relative z-10">
352 <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
353 <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="mb-20">
354 <h2 className="text-4xl font-bold text-center mb-8">What is a Flowchart?</h2>
355 <div className="grid md:grid-cols-2 gap-12 items-center">
356 <div className="bg-white p-6 rounded-xl shadow-lg">
357 <p className="text-lg text-gray-600 leading-relaxed">
358 A flowchart is a visual representation of a process, workflow, or algorithm. It uses standardized symbols connected by arrows to show the step-by-step progression and relationships between different elements.
359 </p>
360 </div>
361 <div className="bg-white p-6 rounded-xl shadow-lg">
362 {/* Simpler Infinite Flowchart Animation */}
363 <motion.svg viewBox="0 0 400 200" className="w-full h-full">
364 {/* Start Node */}
365 <motion.circle
366 cx="50"
367 cy="100"
368 r="20"
369 className="fill-blue-500"
370 initial={{ scale: 0 }}
371 animate={{ scale: 1 }}
372 transition={{ duration: 0.5, repeat: Infinity, repeatDelay: 1 }}
373 />
374 {/* Path to Process */}
375 <motion.path
376 d="M70 100 H130"
377 className="stroke-blue-500"
378 strokeWidth="4"
379 fill="none"
380 initial={{ pathLength: 0 }}
381 animate={{ pathLength: 1 }}
382 transition={{ duration: 1, repeat: Infinity, repeatDelay: 1 }}
383 />
384 {/* Process Rectangle */}
385 <motion.rect
386 x="130"
387 y="80"
388 width="60"
389 height="40"
390 rx="8"
391 className="fill-green-500"
392 initial={{ scale: 0 }}
393 animate={{ scale: 1 }}
394 transition={{ duration: 0.5, delay: 0.5, repeat: Infinity, repeatDelay: 1 }}
395 />
396 {/* Path to Decision */}
397 <motion.path
398 d="M190 100 H250"
399 className="stroke-blue-500"
400 strokeWidth="4"
401 fill="none"
402 initial={{ pathLength: 0 }}
403 animate={{ pathLength: 1 }}
404 transition={{ duration: 1, delay: 1, repeat: Infinity, repeatDelay: 1 }}
405 />
406 {/* Decision Diamond */}
407 <motion.path
408 d="M250 70 L280 100 L250 130 L220 100 Z"
409 className="fill-yellow-500"
410 initial={{ scale: 0 }}
411 animate={{ scale: 1 }}
412 transition={{ duration: 0.5, delay: 1.5, repeat: Infinity, repeatDelay: 1 }}
413 />
414 {/* Path to End */}
415 <motion.path
416 d="M280 100 H330"
417 className="stroke-blue-500"
418 strokeWidth="4"
419 fill="none"
420 initial={{ pathLength: 0 }}
421 animate={{ pathLength: 1 }}
422 transition={{ duration: 1, delay: 2, repeat: Infinity, repeatDelay: 1 }}
423 />
424 {/* End Node */}
425 <motion.circle
426 cx="350"
427 cy="100"
428 r="20"
429 className="fill-red-500"
430 initial={{ scale: 0 }}
431 animate={{ scale: 1 }}
432 transition={{ duration: 0.5, delay: 2.5, repeat: Infinity, repeatDelay: 1 }}
433 />
434 </motion.svg>
435 </div>
436 </div>
437 </motion.div>
438
439 <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="mb-20">
440 <h2 className="text-4xl font-bold text-center mb-12">Types of Flowcharts</h2>
441 <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
442 {flowchartTypes.map((type, index) => (
443 <motion.div key={index} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: type.delay }} className="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300">
444 <h3 className="text-xl font-semibold mb-4">{type.title}</h3>
445 <p className="text-gray-600">{type.description}</p>
446 </motion.div>
447 ))}
448 </div>
449 </motion.div>
450
451 <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }}>
452 <h2 className="text-4xl font-bold text-center mb-12">Why Use Flowcharts?</h2>
453 <div className="grid md:grid-cols-3 gap-8">
454 {benefits.map((benefit, index) => (
455 <motion.div key={index} initial={{ opacity: 0, scale: 0.8 }} whileInView={{ opacity: 1, scale: 1 }} viewport={{ once: true }} transition={{ delay: index * 0.1 }} whileHover={{ y: -5 }} className="bg-white p-6 rounded-xl shadow-lg text-center">
456 <h3 className="text-lg font-semibold text-blue-600 ">{benefit}</h3>
457 </motion.div>
458 ))}
459 </div>
460 </motion.div>
461 </div>
462 </div>
463 );
464};
465
466const Home = () => {
467 const router = useRouter();
468 const [mounted, setMounted] = useState(false);
469
470 useEffect(() => {
471 setMounted(true);
472 }, []);
473
474 const stats = [
475 { number: "50K+", label: "Flowcharts Created", icon: <Activity /> },
476 { number: "98%", label: "Satisfaction Rate", icon: <Star /> },
477 { number: "10K+", label: "Active Users", icon: <Users /> },
478 { number: "24/7", label: "AI Support", icon: <Zap /> }
479 ];
480
481 const features = [
482 {
483 title: "Smart Diagrams",
484 description: "AI understands your needs and creates perfect flowcharts instantly.",
485 icon: <Workflow className="w-6 h-6" />,
486 color: "blue"
487 },
488 {
489 title: "Team Collaboration",
490 description: "Work together seamlessly with real-time updates and sharing.",
491 icon: <Users className="w-6 h-6" />,
492 color: "green"
493 },
494 {
495 title: "Export Anywhere",
496 description: "Export to multiple formats and integrate with your tools.",
497 icon: <Code className="w-6 h-6" />,
498 color: "purple"
499 },
500 {
501 title: "Analytics",
502 description: "Track usage and optimize your workflows with insights.",
503 icon: <LineChart className="w-6 h-6" />,
504 color: "orange"
505 }
506 ];
507
508 const testimonials = [
509 {
510 text: "FlowchartGPT transformed how we document our processes. It's incredibly intuitive!",
511 author: "Sarah Chen",
512 role: "Product Manager",
513 company: "TechCorp"
514 },
515 {
516 text: "The AI capabilities are mind-blowing. What used to take hours now takes minutes.",
517 author: "Michael Rodriguez",
518 role: "Business Analyst",
519 company: "InnovateHub"
520 },
521 {
522 text: "Best flowchart tool we've ever used. The team collaboration features are outstanding.",
523 author: "Emma Thompson",
524 role: "Team Lead",
525 company: "DesignMasters"
526 }
527 ];
528
529 if (!mounted) {
530 return null;
531 }
532
533 return (
534 <div className="min-h-screen bg-gradient-to-b from-gray-50 to-white overflow-hidden relative">
535 <MovingBackground />
536 <header className="bg-white/80 backdrop-blur-sm shadow-sm relative z-10">
537 <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
538 <h1 className="text-2xl font-bold text-gray-900">FlowchartGPT</h1>
539 <motion.button whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} onClick={() => router.push('/new')} className="bg-blue-600 text-white px-6 py-2 rounded-full text-sm font-semibold hover:bg-blue-700 transition-colors flex items-center gap-2">
540 Start Creating <ArrowRight size={16} />
541 </motion.button>
542 </div>
543 </header>
544
545 <div className="relative w-full min-h-[calc(100vh-73px)] flex items-center px-4 sm:px-6 lg:px-8 z-10">
546 <InteractiveGridBackground />
547 <div className="max-w-7xl mx-auto w-full relative z-20">
548 <div className="grid lg:grid-cols-2 gap-12 items-center">
549 <motion.div initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }} transition={{ duration: 0.8 }}>
550 <h1 className="text-6xl font-bold text-gray-900 mb-6">
551 FlowchartGPT
552 <motion.span initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.8 }} className="text-blue-600">.</motion.span>
553 </h1>
554 <p className="text-xl text-gray-600 mb-8">Transform your ideas into stunning flowcharts instantly with AI. Create professional diagrams in seconds, not hours.</p>
555 <motion.button whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} onClick={() => router.push('/new')} className="bg-blue-600 text-white px-8 py-4 rounded-full text-lg font-semibold hover:bg-blue-700 transition-colors flex items-center gap-2">
556 Start Creating <ArrowRight size={20} />
557 </motion.button>
558 </motion.div>
559
560 <motion.div initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} transition={{ duration: 0.8, delay: 0.2 }} className="relative">
561 <div className="bg-white rounded-2xl shadow-xl p-8">
562 <EnhancedFlowchartAnimation />
563 </div>
564 </motion.div>
565 </div>
566 </div>
567 </div>
568
569 <motion.div initial={{ opacity: 0 }} whileInView={{ opacity: 1 }} viewport={{ once: true }} className="w-full bg-blue-600 text-white py-16 relative z-10">
570 <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
571 <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
572 {stats.map((stat, index) => (
573 <motion.div key={index} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: index * 0.1 }} className="text-center">
574 <motion.div initial={{ scale: 0 }} whileInView={{ scale: 1 }} viewport={{ once: true }} transition={{ delay: index * 0.1 + 0.2 }} className="text-blue-300 mb-2 flex justify-center">
575 {stat.icon}
576 </motion.div>
577 <div className="text-4xl font-bold mb-2">{stat.number}</div>
578 <p className="text-blue-100">{stat.label}</p>
579 </motion.div>
580 ))}
581 </div>
582 </div>
583 </motion.div>
584
585 <div className="max-w-7xl bg-gray-50 mx-auto px-4 sm:px-6 lg:px-8 py-20 relative z-10">
586 <motion.h2 initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-4xl font-bold text-center mb-16">
587 Features that make us different
588 </motion.h2>
589 <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
590 {features.map((feature, index) => (
591 <motion.div key={index} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: index * 0.1 }} whileHover={{ y: -5, scale: 1.02 }} className="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300">
592 <div className="w-12 h-12 bg-white text-blue-600 rounded-lg flex items-center justify-center mb-4 shadow-md">
593 {feature.icon}
594 </div>
595 <h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
596 <p className="text-gray-600">{feature.description}</p>
597 </motion.div>
598 ))}
599 </div>
600 </div>
601
602 <div className="bg-gray-50 py-10 relative z-10 lg:pt-24">
603 <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
604 <motion.h2 initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-4xl font-bold text-center mb-16">
605 What our users say
606 </motion.h2>
607 <SlidingTestimonials testimonials={testimonials} />
608 </div>
609 </div>
610
611 <div className="relative z-10">
612 <FlowchartEducation />
613 </div>
614
615 <motion.div initial={{ opacity: 0 }} whileInView={{ opacity: 1 }} viewport={{ once: true }} className="bg-gradient-to-r from-blue-600 to-blue-700 text-white py-20 relative z-10">
616 <div className="max-w-4xl mx-auto text-center px-4">
617 <motion.h2 initial={{ y: 20, opacity: 0 }} whileInView={{ y: 0, opacity: 1 }} viewport={{ once: true }} className="text-4xl font-bold mb-6">
618 Ready to transform your workflow?
619 </motion.h2>
620 <motion.p initial={{ y: 20, opacity: 0 }} whileInView={{ y: 0, opacity: 1 }} viewport={{ once: true }} transition={{ delay: 0.2 }} className="text-xl text-blue-100 mb-8">
621 Join thousands of teams who trust FlowchartGPT
622 </motion.p>
623 <motion.button whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} onClick={() => router.push('/new')} className="bg-white text-blue-600 px-8 py-4 rounded-full text-lg font-semibold hover:bg-gray-100 transition-colors inline-flex items-center gap-2">
624 Get Started Free <ChevronRight size={20} />
625 </motion.button>
626 </div>
627 </motion.div>
628 <Footer />
629 </div>
630 );
631};
632
633export default Home;Downloads
0
Version
1.0.0
License
MIT
Platform
OpenAI GPT-4o
Contributors 1
Open in
Last updated 2 months ago
We are a open source platform and encourage community to contribute to these templates!