diff --git a/src/pages/CourseDetail.tsx b/src/pages/CourseDetail.tsx new file mode 100644 index 0000000..325155f --- /dev/null +++ b/src/pages/CourseDetail.tsx @@ -0,0 +1,193 @@ +import { Link } from "react-router-dom"; +import Header from "@/components/Header"; +import Footer from "@/components/Footer"; +import { Button } from "@/components/ui/button"; +import { Badge } from "@/components/ui/badge"; +import { Card, CardContent } from "@/components/ui/card"; +import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"; +import { Star, Check, Clock, BookOpen, Users, Play, Award } from "lucide-react"; +import { useSaasMutation } from "@/hooks/use-tygarun"; +import { toast } from "sonner"; + +const learningPoints = [ + "Build responsive websites with HTML5, CSS3, and modern JavaScript", "Create dynamic single-page applications with React and hooks", "Design and build RESTful APIs with Node.js and Express", + "Work with SQL and NoSQL databases for full-stack apps", "Deploy applications to the cloud with CI/CD pipelines", "Implement authentication, testing, and security best practices", +]; + +const modules = [ + { title: "Web Fundamentals — HTML, CSS & JavaScript", lessons: 8, duration: "3h 20m" }, + { title: "Frontend Mastery with React", lessons: 10, duration: "4h 15m" }, + { title: "Backend Development with Node.js", lessons: 12, duration: "5h 30m" }, + { title: "Databases & Data Modeling", lessons: 9, duration: "3h 45m" }, + { title: "Deployment, Testing & DevOps", lessons: 11, duration: "4h 50m" }, +]; + +const reviews = [ + { name: "Michael Torres", rating: 5, text: "The best web dev course I have taken. The projects are practical and the explanations are crystal clear. Landed a junior dev role within 3 months!" }, + { name: "Lisa Wang", rating: 5, text: "Dr. Chen breaks down complex topics into digestible pieces. The curriculum is perfectly structured from basics to advanced concepts." }, + { name: "Raj Patel", rating: 4, text: "Great course overall. Very thorough coverage of the full stack. The database section was particularly strong." }, +]; + +const relatedCourses = [ + { title: "Advanced React Patterns", instructor: "Dr. Sarah Chen", price: "$79", gradient: "from-amber-500 to-orange-600" }, + { title: "TypeScript for Professionals", instructor: "James Rivera", price: "$69", gradient: "from-emerald-500 to-teal-600" }, + { title: "Node.js Microservices", instructor: "Alex Kim", price: "$89", gradient: "from-rose-500 to-pink-600" }, +]; + +export default function CourseDetailPage() { + const { mutate: enroll, loading: enrolling } = useSaasMutation("billing", "/checkout"); + const handleEnroll = async () => { + try { + const amount = Math.round(Number("$89".replace(/[^0-9.]/g, "")) * 100); + const res = await enroll({ course: "Full-Stack Web Development Bootcamp", amount }); + if (res?.url && res.url.indexOf("#") !== 0) { window.location.href = res.url; return; } + toast.success("Enrollment started for Full-Stack Web Development Bootcamp."); + } catch { toast.error("Could not start enrollment. Please try again."); } + }; + return ( +
+
+ + {/* ── Hero ── */} +
+
+
+
+
+ Web Development + Beginner +
+

Full-Stack Web Development Bootcamp

+

Master HTML, CSS, JavaScript, React, Node.js, and databases in this comprehensive bootcamp designed for aspiring developers.

+
+
+
SC
+ Dr. Sarah Chen +
+
+ + 4.9 + (1,240 reviews) +
+
+
+ $89 + +
+
+
+
+ + {/* ── What You'll Learn ── */} +
+
+

What You'll Learn

+
+ {learningPoints.map((point, i) => ( +
+ + {point} +
+ ))} +
+
+
+ + {/* ── Curriculum ── */} +
+
+

Course Curriculum

+ + {modules.map((m, i) => ( + + +
+
{i + 1}
+
+
{m.title}
+
{m.lessons} lessons · {m.duration}
+
+
+ + + Module content includes video lectures, quizzes, and hands-on exercises covering all core concepts. + + + ))} + +
+
+ + {/* ── Instructor Bio ── */} +
+
+

Your Instructor

+ +
+
+ SC +
+
+

Dr. Sarah Chen

+

Dr. Sarah Chen is a senior software engineer and educator with 12 years of industry experience at top tech companies. She is passionate about making web development accessible to everyone.

+
+
12 Courses
+
3,200 Students
+
4.9 Rating
+
+
+
+ +
+
+ + {/* ── Student Reviews ── */} +
+
+

Student Reviews

+
+ {reviews.map((r, i) => ( + +
+ {Array.from({ length: r.rating }).map((_, j) => ( + + ))} +
+

{r.text}

+
{r.name}
+ + ))} +
+
+
+ + {/* ── Related Courses ── */} +
+
+

Related Courses

+
+ {relatedCourses.map((c, i) => ( + +
+ +
+ +

{c.title}

+

{c.instructor}

+
+ {c.price} + +
+ + + ))} +
+
+
+ +
+ ); +} \ No newline at end of file