Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 4 additions & 19 deletions apps/project-flow/src/components/ai-generated/CTA.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,11 @@ export default function CTA() {
return (
<section className="bg-neutral-900 px-6 py-20">
<div className="mx-auto max-w-3xl text-center">
<h2 className="text-3xl font-bold text-white md:text-4xl">
Ready to transform your career?
</h2>
<p className="mt-4 text-neutral-400">
Join thousands of learners who are already building the future.
Start with a free trial today.
</p>
<h2 className="text-3xl font-bold text-white md:text-4xl">Ready to Transform Your Learning?</h2>
<p className="mt-4 text-neutral-400">Join thousands of students who have achieved their goals with our expert-led courses</p>
<div className="mt-10 flex flex-wrap items-center justify-center gap-4">
<a
href="/signup"
className="rounded-full bg-white px-6 py-3 text-sm font-medium text-neutral-900 hover:bg-neutral-100 transition-colors"
>
Get started for free
</a>
<a
href="/contact"
className="rounded-full border border-neutral-600 px-6 py-3 text-sm font-medium text-white hover:border-neutral-400 transition-colors"
>
Talk to sales
</a>
<button className="rounded-full bg-white text-neutral-900 px-6 py-3 text-sm font-medium hover:bg-neutral-50 transition-colors">Get Started</button>
<button className="rounded-full border border-neutral-600 text-white px-6 py-3 text-sm font-medium hover:bg-neutral-50 transition-colors">Watch Demo</button>
</div>
</div>
</section>
Expand Down
149 changes: 48 additions & 101 deletions apps/project-flow/src/components/ai-generated/Courses.tsx
Original file line number Diff line number Diff line change
@@ -1,111 +1,58 @@
export default function Courses() {
const courses = [
{
title: "Web Development Bootcamp",
description:
"Master HTML, CSS, JavaScript, and React with hands-on projects.",
tags: [
{ label: "Development", accent: false },
{ label: "Beginner", accent: false },
],
weeks: 12,
students: "15,400",
rating: "4.9",
},
{
title: "Data Science Fundamentals",
description:
"Learn Python, statistics, and machine learning from scratch.",
tags: [
{ label: "Data Science", accent: true },
{ label: "Intermediate", accent: false },
],
weeks: 10,
students: "12,300",
rating: "4.8",
},
{
title: "UX/UI Design Mastery",
description:
"Create stunning user experiences with modern design principles.",
tags: [
{ label: "Design", accent: true },
{ label: "All Levels", accent: false },
],
weeks: 8,
students: "9,800",
rating: "4.9",
},
];

return (
<section id="courses" className="border-b border-neutral-200 bg-white px-6 py-20">
<div className="mx-auto max-w-6xl">
<div className="flex items-end justify-between">
<div>
<h2 className="text-3xl font-bold text-neutral-900">
Popular Courses
</h2>
<p className="mt-2 text-neutral-500">
Start your learning journey with our most loved courses
</p>
</div>
<a
href="/courses"
className="hidden items-center gap-1 rounded-full border border-neutral-200 px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-neutral-50 transition-colors sm:inline-flex"
>
View all courses &rarr;
</a>
</div>

<h2 className="text-3xl font-bold text-neutral-900">Top Courses</h2>
<p className="mt-2 text-neutral-500">Featured programs to accelerate your learning</p>
<div className="mt-10 grid gap-8 sm:grid-cols-3">
{courses.map((c) => (
<div
key={c.title}
className="overflow-hidden rounded-2xl border border-neutral-200 bg-white"
>
<div className="h-48 w-full bg-neutral-100" />
<div className="p-5">
<div className="flex flex-wrap gap-2">
{c.tags.map((t) => (
<span
key={t.label}
className={`rounded-full px-3 py-1 text-xs font-medium ${
t.accent
? "bg-green-50 text-green-700"
: "bg-neutral-100 text-neutral-600"
}`}
>
{t.label}
</span>
))}
</div>
<h3 className="mt-3 text-lg font-bold text-neutral-900">
{c.title}
</h3>
<p className="mt-1 text-sm text-neutral-500">
{c.description}
</p>
<div className="mt-4 flex items-center gap-4 text-xs text-neutral-400">
<span className="flex items-center gap-1">
&#x1F551; {c.weeks} weeks
</span>
<span className="flex items-center gap-1">
&#x1F464; {c.students}
</span>
<span className="flex items-center gap-1 text-orange-500 font-medium">
&#x2B50; {c.rating}
</span>
</div>
<a
href="/enroll"
className="mt-5 block w-full rounded-full bg-neutral-900 py-2.5 text-center text-sm font-medium text-white hover:bg-neutral-800 transition-colors"
>
Enroll Now
</a>
<div className="overflow-hidden rounded-2xl border border-neutral-200 bg-white">
<div className="h-48 bg-neutral-100 rounded-t-2xl" />
<div className="p-4 flex flex-col gap-2">
<div className="flex items-center justify-between">
<span className="rounded-full px-3 py-1 text-xs font-medium bg-green-50 text-green-700">New</span>
<h3 className="text-neutral-900 text-lg font-medium">Web Development Bootcamp</h3>
</div>
<p className="text-neutral-500 text-sm flex-grow">Master full-stack development with HTML, CSS, JavaScript, and React</p>
<div className="mt-4 flex items-center justify-between gap-2">
<span className="text-neutral-500">4.8 ★ (1,200)</span>
<span className="text-neutral-500">8 hrs</span>
<span className="text-neutral-500">120</span>
</div>
<button className="mt-6 rounded-full bg-neutral-900 px-6 py-2 text-sm font-medium text-white hover:bg-neutral-800 transition-colors">Enroll</button>
</div>
</div>
<div className="overflow-hidden rounded-2xl border border-neutral-200 bg-white">
<div className="h-48 bg-neutral-100 rounded-t-2xl" />
<div className="p-4 flex flex-col gap-2">
<div className="flex items-center justify-between">
<span className="rounded-full px-3 py-1 text-xs font-medium bg-green-50 text-green-700">Popular</span>
<h3 className="text-neutral-900 text-lg font-medium">Data Science Mastery</h3>
</div>
<p className="text-neutral-500 text-sm flex-grow">Analyze complex datasets with Python, SQL, and machine learning techniques</p>
<div className="mt-4 flex items-center justify-between gap-2">
<span className="text-neutral-500">4.9 ★ (950)</span>
<span className="text-neutral-500">12 hrs</span>
<span className="text-neutral-500">180</span>
</div>
<button className="mt-6 rounded-full bg-neutral-900 px-6 py-2 text-sm font-medium text-white hover:bg-neutral-800 transition-colors">Enroll</button>
</div>
</div>
<div className="overflow-hidden rounded-2xl border border-neutral-200 bg-white">
<div className="h-48 bg-neutral-100 rounded-t-2xl" />
<div className="p-4 flex flex-col gap-2">
<div className="flex items-center justify-between">
<span className="rounded-full px-3 py-1 text-xs font-medium bg-yellow-50 text-yellow-700">Trending</span>
<h3 className="text-neutral-900 text-lg font-medium">AI Fundamentals</h3>
</div>
<p className="text-neutral-500 text-sm flex-grow">Explore artificial intelligence concepts with hands-on projects</p>
<div className="mt-4 flex items-center justify-between gap-2">
<span className="text-neutral-500">4.7 ★ (780)</span>
<span className="text-neutral-500">6 hrs</span>
<span className="text-neutral-500">45</span>
</div>
<button className="mt-6 rounded-full bg-neutral-900 px-6 py-2 text-sm font-medium text-white hover:bg-neutral-800 transition-colors">Enroll</button>
</div>
))}
</div>
</div>
</div>
</section>
Expand Down
71 changes: 23 additions & 48 deletions apps/project-flow/src/components/ai-generated/Features.tsx
Original file line number Diff line number Diff line change
@@ -1,56 +1,31 @@
export default function Features() {
const features = [
{
icon: "\u{1F4CB}",
title: "Interactive Courses",
description:
"Engage with hands-on projects and real-world exercises that reinforce your learning.",
},
{
icon: "\u{1F465}",
title: "Community Learning",
description:
"Connect with peers, join study groups, and collaborate on projects together.",
},
{
icon: "\u{2B07}",
title: "Verified Certificates",
description:
"Earn industry-recognized certificates to showcase your achievements.",
},
];

return (
<section
id="features"
className="border-b border-neutral-200 bg-white px-6 py-20"
>
<section id="features" className="border-b border-neutral-200 bg-white px-6 py-20">
<div className="mx-auto max-w-6xl text-center">
<h2 className="text-3xl font-bold text-neutral-900 md:text-4xl">
Everything you need to succeed
</h2>
<p className="mx-auto mt-4 max-w-2xl text-neutral-500">
Our platform provides all the tools and resources you need to master
new skills and achieve your goals.
</p>

<h2 className="text-3xl font-bold text-neutral-900 md:text-4xl">Learn Anything, Anywhere</h2>
<p className="mx-auto mt-4 max-w-2xl text-neutral-500">Access expert-taught courses on your schedule with lifetime access to materials</p>
<div className="mt-14 grid gap-8 sm:grid-cols-3">
{features.map((f) => (
<div
key={f.title}
className="rounded-2xl border border-neutral-200 bg-white p-8 text-left"
>
<div className="flex h-12 w-12 items-center justify-center rounded-xl border border-neutral-200 bg-white text-xl shadow-sm">
{f.icon}
</div>
<h3 className="mt-5 text-lg font-bold text-neutral-900">
{f.title}
</h3>
<p className="mt-2 text-sm leading-relaxed text-neutral-500">
{f.description}
</p>
<div className="rounded-2xl border border-neutral-200 bg-white p-8 flex flex-col items-center gap-4">
<div className="rounded-xl border border-neutral-200 bg-neutral-100 p-3 flex flex-col items-center gap-2">
<span className="text-xl text-green-600">📚</span>
<h3 className="text-neutral-900 text-lg font-medium">Comprehensive Curriculum</h3>
<p className="text-neutral-400 text-sm flex-grow">Access over 500 courses across multiple disciplines</p>
</div>
))}
</div>
<div className="rounded-2xl border border-neutral-200 bg-white p-8 flex flex-col items-center gap-4">
<div className="rounded-xl border border-neutral-200 bg-neutral-100 p-3 flex flex-col items-center gap-2">
<span className="text-xl text-green-600">🎓</span>
<h3 className="text-neutral-900 text-lg font-medium">Certified Completion</h3>
<p className="text-neutral-400 text-sm flex-grow">Earn certificates verified by industry professionals</p>
</div>
</div>
<div className="rounded-2xl border border-neutral-200 bg-white p-8 flex flex-col items-center gap-4">
<div className="rounded-xl border border-neutral-200 bg-neutral-100 p-3 flex flex-col items-center gap-2">
<span className="text-xl text-green-600">💼</span>
<h3 className="text-neutral-900 text-lg font-medium">Career Growth</h3>
<p className="text-neutral-400 text-sm flex-grow">Boost your career with in-demand skills and knowledge</p>
</div>
</div>
</div>
</div>
</section>
Expand Down
69 changes: 14 additions & 55 deletions apps/project-flow/src/components/ai-generated/Hero.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,70 +2,29 @@ export default function Hero() {
return (
<section className="border-b border-neutral-200 bg-white px-6 py-16 md:py-24">
<div className="mx-auto grid max-w-6xl items-center gap-12 md:grid-cols-2">
<div>
<div className="flex flex-col md:flex-row items-start gap-8">
<span className="inline-flex items-center gap-2 rounded-full border border-neutral-200 bg-white px-4 py-1.5 text-sm text-neutral-700 shadow-sm">
<span className="h-2 w-2 rounded-full bg-green-500" />
New courses available
Exclusively Represented
</span>

<h1 className="mt-6 text-4xl font-bold leading-tight tracking-tight text-neutral-900 md:text-5xl">
Learn without limits, grow without boundaries.
</h1>

<p className="mt-5 text-lg leading-relaxed text-neutral-500">
Access world-class education from top instructors. Master new
skills, advance your career, and unlock your potential with our
interactive learning platform.
</p>

<h1 className="mt-6 text-4xl font-bold leading-tight tracking-tight text-neutral-900 md:text-5xl">Dog.com</h1>
<p className="mt-5 text-lg leading-relaxed text-neutral-500">Exclusive representation by Matthew Lifschultz</p>
<div className="mt-8 flex flex-wrap items-center gap-4">
<a
href="/signup"
className="inline-flex items-center gap-2 rounded-full bg-neutral-900 px-6 py-3 text-sm font-medium text-white hover:bg-neutral-800 transition-colors"
>
Start learning free
<span>&rarr;</span>
</a>
<a
href="/demo"
className="inline-flex items-center gap-2 rounded-full border border-neutral-200 bg-white px-6 py-3 text-sm font-medium text-neutral-700 hover:bg-neutral-50 transition-colors"
>
<span>&#9654;</span>
Watch demo
</a>
<button className="rounded-full bg-neutral-900 px-6 py-3 text-sm font-medium text-white hover:bg-neutral-800 transition-colors">Make an Offer</button>
<button className="rounded-full border border-neutral-200 bg-white px-6 py-3 text-sm font-medium text-neutral-700 hover:bg-neutral-50 transition-colors">Visit Altcha.org</button>
</div>

<div className="mt-8 flex items-center gap-3">
<div className="flex -space-x-2">
{[1, 2, 3, 4, 5].map((i) => (
<div
key={i}
className="h-8 w-8 rounded-full border-2 border-white bg-neutral-200"
/>
))}
</div>
<span className="text-sm text-neutral-500">
50,000+ students already enrolled
</span>
<div className="mt-12 flex items-center gap-4 justify-center">
<span className="rounded-full border border-neutral-200 bg-neutral-100 px-4 py-2 text-xs text-neutral-600">Protected by <a href="https://altcha.org/" className="text-green-600 hover:underline">ALTCHA</a></span>
</div>
</div>

<div className="rounded-2xl border border-neutral-200 bg-white p-6 shadow-lg">
<h3 className="text-lg font-bold text-neutral-900">Course Progress</h3>
<div className="mt-4 flex items-center gap-3">
<div className="h-2.5 flex-1 rounded-full bg-neutral-100">
<div className="h-2.5 w-[85%] rounded-full bg-green-500" />
<div className="rounded-2xl border border-neutral-200 bg-white p-8 shadow-lg flex flex-col md:flex-row gap-8">
<div className="flex flex-col items-center gap-4">
<div className="rounded-xl border border-neutral-200 bg-neutral-100 p-2 w-full max-w-md text-center">
<span className="text-xl text-neutral-500">⭐</span>
</div>
<span className="text-sm font-medium text-green-600">+85%</span>
</div>
<div className="mt-6 grid grid-cols-3 gap-4">
{["Mon", "Tue", "Wed"].map((day) => (
<div key={day} className="flex flex-col items-center gap-2">
<div className="h-20 w-full rounded-lg bg-neutral-100" />
<span className="text-xs text-neutral-400">{day}</span>
</div>
))}
<p className="text-neutral-500 text-sm">Protected by ALTCHA</p>
</div>
<img src="https://www.dog.com/img/landing_themes/category/backgrounds/Pets%20&%20Animals.jpg" alt="Dog.com background" className="w-full h-64 object-cover rounded-2xl" />
</div>
</div>
</section>
Expand Down
Loading