Landing page drop down

app/backend/backend/controllers/landing.py

@@ -0,0 +1,49 @@
+from typing import List, Optional
+from fastapi import HTTPException
+from sqlalchemy import select
+from sqlalchemy.ext.asyncio import AsyncSession
+
+from app.backend.backend.models.models import Course, User, Review
+async def get_course_details(course_identifier: Union[int, str] = Path(..., description="Course ID or Name")):
+    if isinstance(course_identifier, int):
+        query = select(Course).where(Course.id == course_identifier)
+    else:
+        query = select(Course).where(Course.title == course_identifier)
+
+
+    course = db_session.exec(query).first()
+    if not course:
+        raise HTTPException(status_code=404, detail="Course not found")
+    modules = db_session.exec(select(Module).where(Module.course_id == course.id)).all()
+
+    course_info = {
+        "title": course.title,
+        "description": course.description,
+        "modules": []
+    }
+    for module in modules:
+        module_info = {
+            "title": module.title,
+            "estimated_time_minutes": module.estimated_time_minutes,
+            "lessons": []
+        }
+        lessons = db_session.exec(select(Lesson).where(Lesson.module_id == module.id)).all()
+        for lesson in lessons:
+            lesson_info = {
+                "title": lesson.title,
+                "estimated_time_minutes": lesson.estimated_time_minutes,
+                "articles": [],
+                "videos": []
+            }
+            articles = db_session.exec(select(Article).where(Article.lesson_id == lesson.id)).all()
+            for article in articles:
+                lesson_info["articles"].append(article.title)
+             videos = db_session.exec(select(Video).where(Video.lesson_id == lesson.id)).all()
+             for video in videos:
+                lesson_info["videos"].append(video.title)
+
+            module_info["lessons"].append(lesson_info)
+
+        course_info["modules"].append(module_info)
+
+    return course_info

app/frontend/app/Content.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion';
+
+const courseData = {
+  title: 'The Art of Photography',
+  modules: [
+    {
+      title: 'Introduction to Photography',
+      lessons: [
+        { title: 'Understanding Camera Basics', duration: '00:15:00' },
+        { title: 'Aperture, Shutter Speed & ISO', duration: '00:20:00' },
+        { title: 'Composition Techniques', duration: '00:25:00' },
+      ],
+    },
+    {
+      title: 'Essential Photography Skills',
+      lessons: [
+        { title: 'Mastering Lighting', duration: '00:30:00' },
+        { title: 'Shooting in Different Environments', duration: '00:25:00' },
+        { title: 'Capturing Portraits', duration: '00:20:00' },
+      ],
+    },
+  ],
+};
+
+export default function CourseLandingPage() {
+  const totalModules = courseData.modules.length;
+  const totalLessons = courseData.modules.reduce(
+    (acc, module) => acc + module.lessons.length,
+    0
+  );
+  const totalDuration = courseData.modules.reduce(
+    (acc, module) =>
+      acc +
+      module.lessons.reduce(
+        (lessonAcc, lesson) =>
+          lessonAcc + convertTimeToSeconds(lesson.duration),
+        0
+      ),
+    0
+  );
+
+  function convertTimeToSeconds(time: string) {
+    const parts = time.split(':');
+    return (
+      parseInt(parts[0]) * 60 * 60 +
+      parseInt(parts[1]) * 60 +
+      parseInt(parts[2])
+    );
+  }
+
+  function formatTime(seconds: number) {
+    const hours = Math.floor(seconds / (60 * 60));
+    const minutes = Math.floor((seconds % (60 * 60)) / 60);
+    const secondsLeft = seconds % 60;
+    return `${hours.toString().padStart(2, '0')}:${minutes
+      .toString()
+      .padStart(2, '0')}:${secondsLeft.toString().padStart(2, '0')}`;
+  }
+
+  return (
+    <div className="p-4">
+      <h1 className="text-2xl font-semibold mb-4">{courseData.title}</h1>
+      <p className="mb-4">
+        {totalModules} modules • {totalLessons} lectures •{' '}
+        {formatTime(totalDuration)} total length
+      </p>
+
+      <Accordion type="single" collapsible>
+        {courseData.modules.map((module) => (
+          <AccordionItem key={module.title} value={module.title}>
+            <AccordionTrigger className="font-semibold">
+              {module.title}
+            </AccordionTrigger>
+            <AccordionContent>
+              <ul className="list-disc ml-4">
+                {module.lessons.map((lesson) => (
+                  <li key={lesson.title}>
+                    {lesson.title} ({lesson.duration})
+                  </li>
+                ))}
+              </ul>
+            </AccordionContent>
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </div>
+  );
+}

app/frontend/app/globals.css

@@ -1,76 +1,76 @@
 @tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
+  @tailwind components;
+  @tailwind utilities;
+
+  @layer base {
+    :root {
+      --background: 0 0% 100%;
+      --foreground: 222.2 84% 4.9%;
+
+      --card: 0 0% 100%;
+      --card-foreground: 222.2 84% 4.9%;
+
+      --popover: 0 0% 100%;
+      --popover-foreground: 222.2 84% 4.9%;
+
+      --primary: 222.2 47.4% 11.2%;
+      --primary-foreground: 210 40% 98%;
+
+      --secondary: 210 40% 96.1%;
+      --secondary-foreground: 222.2 47.4% 11.2%;
+
+      --muted: 210 40% 96.1%;
+      --muted-foreground: 215.4 16.3% 46.9%;
+
+      --accent: 210 40% 96.1%;
+      --accent-foreground: 222.2 47.4% 11.2%;
+
+      --destructive: 0 84.2% 60.2%;
+      --destructive-foreground: 210 40% 98%;
+
+      --border: 214.3 31.8% 91.4%;
+      --input: 214.3 31.8% 91.4%;
+      --ring: 222.2 84% 4.9%;
+
+      --radius: 0.5rem;
+    }
+
+    .dark {
+      --background: 222.2 84% 4.9%;
+      --foreground: 210 40% 98%;
+
+      --card: 222.2 84% 4.9%;
+      --card-foreground: 210 40% 98%;
+
+      --popover: 222.2 84% 4.9%;
+      --popover-foreground: 210 40% 98%;
+
+      --primary: 210 40% 98%;
+      --primary-foreground: 222.2 47.4% 11.2%;
+
+      --secondary: 217.2 32.6% 17.5%;
+      --secondary-foreground: 210 40% 98%;
+
+      --muted: 217.2 32.6% 17.5%;
+      --muted-foreground: 215 20.2% 65.1%;
+
+      --accent: 217.2 32.6% 17.5%;
+      --accent-foreground: 210 40% 98%;
+
+      --destructive: 0 62.8% 30.6%;
+      --destructive-foreground: 210 40% 98%;
+
+      --border: 217.2 32.6% 17.5%;
+      --input: 217.2 32.6% 17.5%;
+      --ring: 212.7 26.8% 83.9%;
+    }
   }
-}
+
+  @layer base {
+    * {
+      @apply border-border;
+    }
+    body {
+      @apply bg-background text-foreground;
+    }
+  }

app/frontend/components/ui/accordion.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }