vibeasite-templates/template-education
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Seed: education template (18 files)

Browse Source
This commit is contained in:
jyswee
2026-07-23 22:58:40 +00:00
parent dcafd9a128
commit 49a8127ed0
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/CourseDetail.tsx
+5 -5
View File
@@ -84,7 +84,7 @@ export default function CourseDetailPage() {
<h2 className="text-2xl sm:text-3xl font-bold mb-8 animate-fade-up">What You'll Learn</h2> <h2 className="text-2xl sm:text-3xl font-bold mb-8 animate-fade-up">What You'll Learn</h2>
<div className="grid md:grid-cols-2 gap-4"> <div className="grid md:grid-cols-2 gap-4">
{learningPoints.map((point, i) => ( {learningPoints.map((point, i) => (
<div key={i} className="flex items-start gap-3 animate-fade-up" style={{ animationDelay: `\${i * 0.06}s` }}> <div key={i} className="flex items-start gap-3 animate-fade-up" style={{ animationDelay: `${i * 0.06}s` }}>
<Check className="h-5 w-5 text-indigo-600 dark:text-indigo-400 mt-0.5 shrink-0" /> <Check className="h-5 w-5 text-indigo-600 dark:text-indigo-400 mt-0.5 shrink-0" />
<span>{point}</span> <span>{point}</span>
</div> </div>
@@ -99,7 +99,7 @@ export default function CourseDetailPage() {
<h2 className="text-2xl sm:text-3xl font-bold mb-8 animate-fade-up">Course Curriculum</h2> <h2 className="text-2xl sm:text-3xl font-bold mb-8 animate-fade-up">Course Curriculum</h2>
<Accordion type="single" collapsible className="space-y-3 max-w-3xl animate-fade-up" style={{ animationDelay: "0.1s" }}> <Accordion type="single" collapsible className="space-y-3 max-w-3xl animate-fade-up" style={{ animationDelay: "0.1s" }}>
{modules.map((m, i) => ( {modules.map((m, i) => (
<AccordionItem key={i} value={`mod-\${i}`} className="bg-white dark:bg-slate-900 rounded-xl border border-slate-200/60 dark:border-slate-800/60 px-6"> <AccordionItem key={i} value={`mod-${i}`} className="bg-white dark:bg-slate-900 rounded-xl border border-slate-200/60 dark:border-slate-800/60 px-6">
<AccordionTrigger className="hover:no-underline"> <AccordionTrigger className="hover:no-underline">
<div className="flex items-center gap-3 text-left"> <div className="flex items-center gap-3 text-left">
<div className="w-8 h-8 rounded-lg bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center text-sm font-bold text-indigo-600 dark:text-indigo-400">{i + 1}</div> <div className="w-8 h-8 rounded-lg bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center text-sm font-bold text-indigo-600 dark:text-indigo-400">{i + 1}</div>
@@ -147,7 +147,7 @@ export default function CourseDetailPage() {
<h2 className="text-2xl sm:text-3xl font-bold mb-8 animate-fade-up">Student Reviews</h2> <h2 className="text-2xl sm:text-3xl font-bold mb-8 animate-fade-up">Student Reviews</h2>
<div className="grid md:grid-cols-3 gap-6"> <div className="grid md:grid-cols-3 gap-6">
{reviews.map((r, i) => ( {reviews.map((r, i) => (
<Card key={i} className="bg-white/70 dark:bg-slate-900/70 backdrop-blur border-slate-200/60 dark:border-slate-800/60 rounded-2xl p-6 animate-fade-up" style={{ animationDelay: `\${i * 0.1}s` }}> <Card key={i} className="bg-white/70 dark:bg-slate-900/70 backdrop-blur border-slate-200/60 dark:border-slate-800/60 rounded-2xl p-6 animate-fade-up" style={{ animationDelay: `${i * 0.1}s` }}>
<div className="flex items-center gap-1 mb-3"> <div className="flex items-center gap-1 mb-3">
{Array.from({ length: r.rating }).map((_, j) => ( {Array.from({ length: r.rating }).map((_, j) => (
<Star key={j} className="h-4 w-4 fill-amber-400 text-amber-400" /> <Star key={j} className="h-4 w-4 fill-amber-400 text-amber-400" />
@@ -167,8 +167,8 @@ export default function CourseDetailPage() {
<h2 className="text-2xl sm:text-3xl font-bold mb-8 animate-fade-up">Related Courses</h2> <h2 className="text-2xl sm:text-3xl font-bold mb-8 animate-fade-up">Related Courses</h2>
<div className="grid md:grid-cols-3 gap-6"> <div className="grid md:grid-cols-3 gap-6">
{relatedCourses.map((c, i) => ( {relatedCourses.map((c, i) => (
<Card key={i} className="group bg-white/70 dark:bg-slate-900/70 backdrop-blur border-slate-200/60 dark:border-slate-800/60 rounded-2xl overflow-hidden hover:-translate-y-1 hover:shadow-xl transition-all duration-300 animate-fade-up" style={{ animationDelay: `\${i * 0.1}s` }}> <Card key={i} className="group bg-white/70 dark:bg-slate-900/70 backdrop-blur border-slate-200/60 dark:border-slate-800/60 rounded-2xl overflow-hidden hover:-translate-y-1 hover:shadow-xl transition-all duration-300 animate-fade-up" style={{ animationDelay: `${i * 0.1}s` }}>
<div className={`h-32 bg-gradient-to-br \${c.gradient} flex items-center justify-center`}> <div className={`h-32 bg-gradient-to-br ${c.gradient} flex items-center justify-center`}>
<BookOpen className="h-10 w-10 text-white/80" /> <BookOpen className="h-10 w-10 text-white/80" />
</div> </div>
<CardContent className="p-5"> <CardContent className="p-5">