Merge pull request #457 from learnhouse/feat/landing-pages

Landing pages

apps/web/components/Dashboard/Pages/Org/OrgEditLanding/landing_types.ts

@@ -0,0 +1,91 @@
+export interface LandingBackground {
+  type: 'solid' | 'gradient' | 'image';
+  color?: string;
+  colors?: Array<string>;
+  direction?: string;
+  image?: string;
+}
+
+export interface LandingTestimonialContent {
+  text: string;
+  author: string;
+}
+
+export interface LandingImage {
+  url: string;
+  alt: string;
+}
+
+export interface LandingHeading {
+  text: string;
+  color: string;
+  size: string;
+}
+
+export interface LandingButton {
+  text: string;
+  link: string;
+  color: string;
+  background: string;
+}
+
+export interface LandingLogos {
+  type: 'logos';
+  title: string;
+  logos: LandingImage[];
+}
+
+export interface LandingUsers {
+  user_uuid: string;
+  name: string;
+  description: string;
+  image_url: string;
+}
+
+export interface LandingPeople {
+  type: 'people';
+  title: string;
+  people: LandingUsers[];
+}
+
+export interface LandingTextAndImageSection {
+  type: 'text-and-image';
+  title: string;
+  text: string;
+  flow: 'left' | 'right';
+  image: LandingImage;
+  buttons: LandingButton[];
+}
+
+export interface LandingCourse {
+  course_uuid: string;
+}
+
+export interface LandingFeaturedCourses {
+  type: 'featured-courses';
+  courses: LandingCourse[];
+  title: string;
+}
+
+export interface LandingHeroSection {
+  type: 'hero';
+  title: string;
+  background: LandingBackground;
+  heading: LandingHeading;
+  subheading: LandingHeading;
+  buttons: LandingButton[];
+  illustration?: {
+    image: LandingImage;
+    position: 'left' | 'right';
+    verticalAlign: 'top' | 'center' | 'bottom';
+    size: 'small' | 'medium' | 'large';
+  };
+  contentAlign?: 'left' | 'center' | 'right';
+}
+
+export type LandingSection = LandingTextAndImageSection | LandingHeroSection | LandingLogos | LandingPeople | LandingFeaturedCourses;
+
+export interface LandingObject {
+  sections: LandingSection[];
+  enabled?: boolean;
+} 

apps/web/components/Landings/LandingClassic.tsx

@@ -0,0 +1,160 @@
+import React from 'react'
+import GeneralWrapperStyled from '@components/Objects/StyledElements/Wrappers/GeneralWrapper'
+import TypeOfContentTitle from '@components/Objects/StyledElements/Titles/TypeOfContentTitle'
+import CourseThumbnail from '@components/Objects/Thumbnails/CourseThumbnail'
+import CollectionThumbnail from '@components/Objects/Thumbnails/CollectionThumbnail'
+import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement'
+import NewCourseButton from '@components/Objects/StyledElements/Buttons/NewCourseButton'
+import NewCollectionButton from '@components/Objects/StyledElements/Buttons/NewCollectionButton'
+import ContentPlaceHolderIfUserIsNotAdmin from '@components/Objects/ContentPlaceHolder'
+import Link from 'next/link'
+import { getUriWithOrg } from '@services/config/config'
+
+interface LandingClassicProps {
+  courses: any[]
+  collections: any[]
+  orgslug: string
+  org_id: string
+}
+
+function LandingClassic({ courses, collections, orgslug, org_id }: LandingClassicProps) {
+  return (
+    <div className="w-full">
+      <GeneralWrapperStyled>
+        {/* Collections */}
+        <div className="flex flex-col space-y-4 mb-8">
+          <div className="flex items-center justify-between">
+            <TypeOfContentTitle title="Collections" type="col" />
+            <AuthenticatedClientElement
+              checkMethod="roles"
+              ressourceType="collections"
+              action="create"
+              orgId={org_id}
+            >
+              <Link href={getUriWithOrg(orgslug, '/collections/new')}>
+                <NewCollectionButton />
+              </Link>
+            </AuthenticatedClientElement>
+          </div>
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+            {collections.map((collection: any) => (
+              <div key={collection.collection_id} className="flex flex-col p-3">
+                <CollectionThumbnail
+                  collection={collection}
+                  orgslug={orgslug}
+                  org_id={org_id}
+                />
+              </div>
+            ))}
+            {collections.length === 0 && (
+              <div className="col-span-full flex justify-center items-center py-8">
+                <div className="text-center">
+                  <div className="mb-4">
+                    <svg
+                      width="50"
+                      height="50"
+                      viewBox="0 0 295 295"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                      className="mx-auto"
+                    >
+                      <rect
+                        opacity="0.51"
+                        x="10"
+                        y="10"
+                        width="275"
+                        height="275"
+                        rx="75"
+                        stroke="#4B5564"
+                        strokeOpacity="0.15"
+                        strokeWidth="20"
+                      />
+                      <path
+                        d="M135.8 200.8V130L122.2 114.6L135.8 110.4V102.8L122.2 87.4L159.8 76V200.8L174.6 218H121L135.8 200.8Z"
+                        fill="#4B5564"
+                        fillOpacity="0.08"
+                      />
+                    </svg>
+                  </div>
+                  <h1 className="text-xl font-bold text-gray-600 mb-2">
+                    No collections yet
+                  </h1>
+                  <p className="text-md text-gray-400">
+                    <ContentPlaceHolderIfUserIsNotAdmin
+                      text="Create collections to group courses together"
+                    />
+                  </p>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Courses */}
+        <div className="flex flex-col space-y-4">
+          <div className="flex items-center justify-between">
+            <TypeOfContentTitle title="Courses" type="cou" />
+            <AuthenticatedClientElement
+              ressourceType="courses"
+              action="create"
+              checkMethod="roles"
+              orgId={org_id}
+            >
+              <Link href={getUriWithOrg(orgslug, '/courses?new=true')}>
+                <NewCourseButton />
+              </Link>
+            </AuthenticatedClientElement>
+          </div>
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+            {courses.map((course: any) => (
+              <div key={course.course_uuid} className="p-3">
+                <CourseThumbnail course={course} orgslug={orgslug} />
+              </div>
+            ))}
+            {courses.length === 0 && (
+              <div className="col-span-full flex justify-center items-center py-8">
+                <div className="text-center">
+                  <div className="mb-4 ">
+                    <svg
+                      width="50"
+                      height="50"
+                      className="mx-auto"
+                      viewBox="0 0 295 295"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <rect
+                        opacity="0.51"
+                        x="10"
+                        y="10"
+                        width="275"
+                        height="275"
+                        rx="75"
+                        stroke="#4B5564"
+                        strokeOpacity="0.15"
+                        strokeWidth="20"
+                      />
+                      <path
+                        d="M135.8 200.8V130L122.2 114.6L135.8 110.4V102.8L122.2 87.4L159.8 76V200.8L174.6 218H121L135.8 200.8Z"
+                        fill="#4B5564"
+                        fillOpacity="0.08"
+                      />
+                    </svg>
+                  </div>
+                  <h1 className="text-xl font-bold text-gray-600 mb-2">
+                    No courses yet
+                  </h1>
+                  <p className="text-md text-gray-400">
+                    <ContentPlaceHolderIfUserIsNotAdmin text='Create courses to add content' />
+                  </p>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </GeneralWrapperStyled>
+    </div>
+  )
+}
+
+export default LandingClassic

apps/web/components/Landings/LandingCustom.tsx

@@ -0,0 +1,251 @@
+'use client'
+
+import React from 'react'
+import { LandingSection } from '@components/Dashboard/Pages/Org/OrgEditLanding/landing_types'
+import CourseThumbnail from '@components/Objects/Thumbnails/CourseThumbnail'
+import useSWR from 'swr'
+import { getOrgCourses } from '@services/courses/courses'
+import { useLHSession } from '@components/Contexts/LHSessionContext'
+import CourseThumbnailLanding from '@components/Objects/Thumbnails/CourseThumbnailLanding'
+
+interface LandingCustomProps {
+  landing: {
+    sections: LandingSection[]
+    enabled: boolean
+  }
+  orgslug: string
+}
+
+function LandingCustom({ landing, orgslug }: LandingCustomProps) {
+  const session = useLHSession() as any
+  const access_token = session?.data?.tokens?.access_token
+
+  // Fetch all courses for the organization
+  const { data: allCourses } = useSWR(
+    orgslug ? [orgslug, access_token] : null,
+    ([slug, token]) => getOrgCourses(slug, null, token)
+  )
+
+  const renderSection = (section: LandingSection) => {
+    switch (section.type) {
+      case 'hero':
+        return (
+          <div 
+            key={`hero-${section.title}`}
+            className="min-h-[400px] sm:min-h-[500px] mt-[20px] sm:mt-[40px] mx-2 sm:mx-4 lg:mx-16 w-full flex items-center justify-center rounded-xl border border-gray-100"
+            style={{
+              background: section.background.type === 'solid' 
+                ? section.background.color 
+                : section.background.type === 'gradient'
+                ? `linear-gradient(${section.background.direction || '45deg'}, ${section.background.colors?.join(', ')})`
+                : `url(${section.background.image}) center/cover`
+            }}
+          >
+            <div className={`w-full h-full flex flex-col sm:flex-row ${
+              section.illustration?.position === 'right' ? 'sm:flex-row-reverse' : 'sm:flex-row'
+            } items-stretch`}>
+              {/* Logo */}
+              {section.illustration?.image.url && (
+                <div className={`flex items-${section.illustration.verticalAlign} p-6 w-full ${
+                  section.illustration.size === 'small' ? 'sm:w-1/4' :
+                  section.illustration.size === 'medium' ? 'sm:w-1/3' :
+                  'sm:w-2/5'
+                }`}>
+                  <img
+                    src={section.illustration.image.url}
+                    alt={section.illustration.image.alt}
+                    className="w-full object-contain"
+                  />
+                </div>
+              )}
+
+              {/* Content */}
+              <div className={`flex-1 flex items-center ${
+                section.contentAlign === 'left' ? 'justify-start text-left' :
+                section.contentAlign === 'right' ? 'justify-end text-right' :
+                'justify-center text-center'
+              } p-6`}>
+                <div className="max-w-2xl">
+                  <h1 
+                    className="text-xl sm:text-2xl md:text-3xl font-bold mb-2 sm:mb-4"
+                    style={{ color: section.heading.color }}
+                  >
+                    {section.heading.text}
+                  </h1>
+                  <h2
+                    className="text-sm sm:text-base md:text-lg mb-4 sm:mb-6 md:mb-8 font-medium"
+                    style={{ color: section.subheading.color }}
+                  >
+                    {section.subheading.text}
+                  </h2>
+                  <div className={`flex flex-col sm:flex-row gap-3 sm:gap-4 ${
+                    section.contentAlign === 'left' ? 'justify-start' :
+                    section.contentAlign === 'right' ? 'justify-end' :
+                    'justify-center'
+                  } items-center`}>
+                    {section.buttons.map((button, index) => (
+                      <a
+                        key={index}
+                        href={button.link}
+                        className="w-full sm:w-auto px-6 py-2.5 rounded-lg text-sm font-extrabold shadow transition-transform hover:scale-105"
+                        style={{
+                          backgroundColor: button.background,
+                          color: button.color
+                        }}
+                      >
+                        {button.text}
+                      </a>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )
+      case 'text-and-image':
+        return (
+          <div 
+            key={`text-image-${section.title}`}
+            className="py-16 mx-2 sm:mx-4 lg:mx-16 w-full"
+          >
+            <div className={`flex flex-col md:flex-row items-center gap-8 md:gap-12 bg-white rounded-xl p-6 md:p-8 lg:p-12 nice-shadow ${
+              section.flow === 'right' ? 'md:flex-row-reverse' : ''
+            }`}>
+              <div className="flex-1 w-full max-w-2xl">
+                <h2 className="text-2xl md:text-3xl font-bold mb-4 text-gray-900 tracking-tight">{section.title}</h2>
+                <div className="prose prose-lg prose-gray max-w-none">
+                  <p className="text-base md:text-lg leading-relaxed text-gray-600 whitespace-pre-line">
+                    {section.text}
+                  </p>
+                </div>
+                <div className="flex flex-wrap gap-4 mt-8">
+                  {section.buttons.map((button, index) => (
+                    <a
+                      key={index}
+                      href={button.link}
+                      className="px-6 py-3 rounded-xl font-medium shadow-sm transition-all duration-200 hover:scale-105"
+                      style={{
+                        backgroundColor: button.background,
+                        color: button.color
+                      }}
+                    >
+                      {button.text}
+                    </a>
+                  ))}
+                </div>
+              </div>
+              <div className="flex-1 w-full md:w-auto">
+                <div className="relative w-full max-w-[500px] mx-auto px-4 md:px-8">
+                  <div className="relative w-full aspect-[4/3]">
+                    <img
+                      src={section.image.url}
+                      alt={section.image.alt}
+                      className="object-contain w-full h-full rounded-lg"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )
+      case 'logos':
+        return (
+          <div 
+            key={`logos-${section.type}`}
+            className="py-16 mx-2 sm:mx-4 lg:mx-16 w-full"
+          >
+            {section.title && (
+              <h2 className="text-2xl md:text-3xl font-bold text-left mb-16 text-gray-900">{section.title}</h2>
+            )}
+            <div className="flex justify-center w-full">
+              <div className="flex flex-wrap justify-center gap-16 max-w-7xl">
+                {section.logos.map((logo, index) => (
+                  <div key={index} className="flex items-center justify-center w-[220px] h-[120px]">
+                    <img
+                      src={logo.url}
+                      alt={logo.alt}
+                      className="max-h-24 max-w-[200px] object-contain hover:opacity-80 transition-opacity"
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        )
+      case 'people':
+        return (
+          <div 
+            key={`people-${section.title}`}
+            className="py-16 mx-2 sm:mx-4 lg:mx-16 w-full"
+          >
+            <h2 className="text-2xl md:text-3xl font-bold text-left mb-10 text-gray-900">{section.title}</h2>
+            <div className="flex flex-wrap justify-center gap-x-20 gap-y-8">
+              {section.people.map((person, index) => (
+                <div key={index} className="w-[140px] flex flex-col items-center">
+                  <div className="w-24 h-24 mb-4">
+                    <img
+                      src={person.image_url}
+                      alt={person.name}
+                      className="w-full h-full rounded-full object-cover border-4 border-white nice-shadow"
+                    />
+                  </div>
+                  <h3 className="text-lg font-semibold text-center text-gray-900">{person.name}</h3>
+                  <p className="text-sm text-center text-gray-600 mt-1">{person.description}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        )
+      case 'featured-courses':
+        if (!allCourses) {
+          return (
+            <div 
+              key={`featured-courses-${section.title}`}
+              className="py-16 mx-2 sm:mx-4 lg:mx-16 w-full"
+            >
+              <h2 className="text-2xl md:text-3xl font-bold text-left mb-6 text-gray-900">{section.title}</h2>
+              <div className="text-center py-6 text-gray-500">Loading courses...</div>
+            </div>
+          )
+        }
+
+        const featuredCourses = allCourses.filter((course: any) => 
+          section.courses.includes(course.course_uuid)
+        )
+
+        return (
+          <div 
+            key={`featured-courses-${section.title}`}
+            className="py-16 mx-2 sm:mx-4 lg:mx-16 w-full"
+          >
+            <h2 className="text-2xl md:text-3xl font-bold text-left mb-6 text-gray-900">{section.title}</h2>
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 w-full">
+              {featuredCourses.map((course: any) => (
+                <div key={course.course_uuid} className="w-full flex justify-center">
+                  <CourseThumbnailLanding
+                    course={course}
+                    orgslug={orgslug}
+                  />
+                </div>
+              ))}
+              {featuredCourses.length === 0 && (
+                <div className="col-span-full text-center py-6 text-gray-500">
+                  No featured courses selected
+                </div>
+              )}
+            </div>
+          </div>
+        )
+      default:
+        return null
+    }
+  }
+
+  return (
+    <div className="flex flex-col items-center justify-between w-full max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-16 h-full">
+      {landing.sections.map((section) => renderSection(section))}
+    </div>
+  )
+}
+
+export default LandingCustom

apps/web/components/Objects/Courses/CourseActions/CourseActionsMobile.tsx

@@ -0,0 +1,232 @@
+import React, { useState, useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+import { useLHSession } from '@components/Contexts/LHSessionContext'
+import { getUriWithoutOrg, getUriWithOrg } from '@services/config/config'
+import { getProductsByCourse } from '@services/payments/products'
+import { LogIn, LogOut, ShoppingCart } from 'lucide-react'
+import Modal from '@components/Objects/StyledElements/Modal/Modal'
+import CoursePaidOptions from './CoursePaidOptions'
+import { checkPaidAccess } from '@services/payments/payments'
+import { removeCourse, startCourse } from '@services/courses/activity'
+import { revalidateTags } from '@services/utils/ts/requests'
+import UserAvatar from '../../UserAvatar'
+import { getUserAvatarMediaDirectory } from '@services/media/media'
+
+interface Author {
+  user_uuid: string
+  avatar_image: string
+  first_name: string
+  last_name: string
+  username: string
+}
+
+interface CourseRun {
+  status: string
+  course_id: string
+}
+
+interface Course {
+  id: string
+  authors: Author[]
+  trail?: {
+    runs: CourseRun[]
+  }
+  chapters?: Array<{
+    name: string
+    activities: Array<{
+      activity_uuid: string
+      name: string
+      activity_type: string
+    }>
+  }>
+}
+
+interface CourseActionsMobileProps {
+  courseuuid: string
+  orgslug: string
+  course: Course & {
+    org_id: number
+  }
+}
+
+const CourseActionsMobile = ({ courseuuid, orgslug, course }: CourseActionsMobileProps) => {
+  const router = useRouter()
+  const session = useLHSession() as any
+  const [linkedProducts, setLinkedProducts] = useState<any[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [hasAccess, setHasAccess] = useState<boolean | null>(null)
+
+  const isStarted = course.trail?.runs?.some(
+    (run) => run.status === 'STATUS_IN_PROGRESS' && run.course_id === course.id
+  ) ?? false
+
+  useEffect(() => {
+    const fetchLinkedProducts = async () => {
+      try {
+        const response = await getProductsByCourse(
+          course.org_id,
+          course.id,
+          session.data?.tokens?.access_token
+        )
+        setLinkedProducts(response.data || [])
+      } catch (error) {
+        console.error('Failed to fetch linked products')
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    fetchLinkedProducts()
+  }, [course.id, course.org_id, session.data?.tokens?.access_token])
+
+  useEffect(() => {
+    const checkAccess = async () => {
+      if (!session.data?.user) return
+      try {
+        const response = await checkPaidAccess(
+          parseInt(course.id),
+          course.org_id,
+          session.data?.tokens?.access_token
+        )
+        setHasAccess(response.has_access)
+      } catch (error) {
+        console.error('Failed to check course access')
+        setHasAccess(false)
+      }
+    }
+
+    if (linkedProducts.length > 0) {
+      checkAccess()
+    }
+  }, [course.id, course.org_id, session.data?.tokens?.access_token, linkedProducts])
+
+  const handleCourseAction = async () => {
+    if (!session.data?.user) {
+      router.push(getUriWithoutOrg(`/signup?orgslug=${orgslug}`))
+      return
+    }
+
+    if (isStarted) {
+      await removeCourse('course_' + courseuuid, orgslug, session.data?.tokens?.access_token)
+      await revalidateTags(['courses'], orgslug)
+      router.refresh()
+    } else {
+      await startCourse('course_' + courseuuid, orgslug, session.data?.tokens?.access_token)
+      await revalidateTags(['courses'], orgslug)
+      
+      // Get the first activity from the first chapter
+      const firstChapter = course.chapters?.[0]
+      const firstActivity = firstChapter?.activities?.[0]
+      
+      if (firstActivity) {
+        // Redirect to the first activity
+        router.push(
+          getUriWithOrg(orgslug, '') +
+          `/course/${courseuuid}/activity/${firstActivity.activity_uuid.replace('activity_', '')}`
+        )
+      } else {
+        router.refresh()
+      }
+    }
+  }
+
+  if (isLoading) {
+    return <div className="animate-pulse h-16 bg-gray-100 rounded-lg" />
+  }
+
+  const author = course.authors[0]
+  const authorName = author.first_name && author.last_name 
+    ? `${author.first_name} ${author.last_name}`
+    : `@${author.username}`
+
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex items-center space-x-3">
+        <UserAvatar
+          border="border-4"
+          avatar_url={author.avatar_image ? getUserAvatarMediaDirectory(author.user_uuid, author.avatar_image) : ''}
+          predefined_avatar={author.avatar_image ? undefined : 'empty'}
+          width={40}
+        />
+        <div className="flex flex-col">
+          <span className="text-xs text-neutral-400 font-medium">Author</span>
+          <span className="text-sm font-semibold text-neutral-800">{authorName}</span>
+        </div>
+      </div>
+
+      <div className="flex-shrink-0">
+        {linkedProducts.length > 0 ? (
+          hasAccess ? (
+            <button
+              onClick={handleCourseAction}
+              className={`py-2 px-4 rounded-lg font-semibold text-sm transition-colors flex items-center gap-2 ${
+                isStarted
+                  ? 'bg-red-500 text-white hover:bg-red-600'
+                  : 'bg-neutral-900 text-white hover:bg-neutral-800'
+              }`}
+            >
+              {isStarted ? (
+                <>
+                  <LogOut className="w-4 h-4" />
+                  Leave Course
+                </>
+              ) : (
+                <>
+                  <LogIn className="w-4 h-4" />
+                  Start Course
+                </>
+              )}
+            </button>
+          ) : (
+            <>
+              <Modal
+                isDialogOpen={isModalOpen}
+                onOpenChange={setIsModalOpen}
+                dialogContent={<CoursePaidOptions course={course} />}
+                dialogTitle="Purchase Course"
+                dialogDescription="Select a payment option to access this course"
+                minWidth="sm"
+              />
+              <button
+                onClick={() => setIsModalOpen(true)}
+                className="py-2 px-4 rounded-lg bg-neutral-900 text-white font-semibold text-sm hover:bg-neutral-800 transition-colors flex items-center gap-2"
+              >
+                <ShoppingCart className="w-4 h-4" />
+                Purchase
+              </button>
+            </>
+          )
+        ) : (
+          <button
+            onClick={handleCourseAction}
+            className={`py-2 px-4 rounded-lg font-semibold text-sm transition-colors flex items-center gap-2 ${
+              isStarted
+                ? 'bg-red-500 text-white hover:bg-red-600'
+                : 'bg-neutral-900 text-white hover:bg-neutral-800'
+            }`}
+          >
+            {!session.data?.user ? (
+              <>
+                <LogIn className="w-4 h-4" />
+                Sign In
+              </>
+            ) : isStarted ? (
+              <>
+                <LogOut className="w-4 h-4" />
+                Leave Course
+              </>
+            ) : (
+              <>
+                <LogIn className="w-4 h-4" />
+                Start Course
+              </>
+            )}
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default CourseActionsMobile 

apps/web/components/Objects/Courses/CourseActions/CoursesActions.tsx

@@ -32,6 +32,14 @@ interface Course {
   trail?: {
     runs: CourseRun[]
   }
+  chapters?: Array<{
+    name: string
+    activities: Array<{
+      activity_uuid: string
+      name: string
+      activity_type: string
+    }>
+  }>
 }
 
 interface CourseActionsProps {
@@ -129,10 +137,29 @@ const Actions = ({ courseuuid, orgslug, course }: CourseActionsProps) => {
       router.push(getUriWithoutOrg(`/signup?orgslug=${orgslug}`))
       return
     }
-    const action = isStarted ? removeCourse : startCourse
-    await action('course_' + courseuuid, orgslug, session.data?.tokens?.access_token)
-    await revalidateTags(['courses'], orgslug)
-    router.refresh()
+
+    if (isStarted) {
+      await removeCourse('course_' + courseuuid, orgslug, session.data?.tokens?.access_token)
+      await revalidateTags(['courses'], orgslug)
+      router.refresh()
+    } else {
+      await startCourse('course_' + courseuuid, orgslug, session.data?.tokens?.access_token)
+      await revalidateTags(['courses'], orgslug)
+      
+      // Get the first activity from the first chapter
+      const firstChapter = course.chapters?.[0]
+      const firstActivity = firstChapter?.activities?.[0]
+      
+      if (firstActivity) {
+        // Redirect to the first activity
+        router.push(
+          getUriWithOrg(orgslug, '') +
+          `/course/${courseuuid}/activity/${firstActivity.activity_uuid.replace('activity_', '')}`
+        )
+      } else {
+        router.refresh()
+      }
+    }
   }
 
   if (isLoading) {

apps/web/components/Objects/Onboarding/Onboarding.tsx

@@ -37,10 +37,26 @@ const Onboarding: React.FC = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isOnboardingComplete, setIsOnboardingComplete] = useState(true);
   const [isTemporarilyClosed, setIsTemporarilyClosed] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
   const router = useRouter();
   const org = useOrg() as any;
   const isUserAdmin = useAdminStatus() as any;
 
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+    
+    // Initial check
+    checkMobile();
+
+    // Add event listener for window resize
+    window.addEventListener('resize', checkMobile);
+
+    // Cleanup
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
+
   const onboardingData: OnboardingStep[] = [
     {
       imageSrc: OnBoardWelcome,
@@ -208,6 +224,7 @@ const Onboarding: React.FC = () => {
     localStorage.setItem('isOnboardingCompleted', 'true');
     localStorage.removeItem('onboardingLastStep'); // Clean up stored step
     setIsModalOpen(false);
+    setIsOnboardingComplete(true);
     console.log('Onboarding skipped');
   };
 
@@ -219,7 +236,7 @@ const Onboarding: React.FC = () => {
 
   return (
     <div>
-      {isUserAdmin.isAdmin && !isUserAdmin.loading && !isOnboardingComplete && <Modal
+      {isUserAdmin.isAdmin && !isUserAdmin.loading && !isOnboardingComplete && !isMobile && <Modal
         isDialogOpen={isModalOpen}
         onOpenChange={setIsModalOpen}
         minHeight="sm"
@@ -236,12 +253,20 @@ const Onboarding: React.FC = () => {
           />
         }
         dialogTrigger={
-
           <div className='fixed pb-10 w-full bottom-0 bg-gradient-to-t from-1% from-gray-950/25 to-transparent'>
             <div className='bg-gray-950 flex space-x-2 font-bold cursor-pointer hover:bg-gray-900 shadow-md items-center text-gray-200 px-5 py-2 w-fit rounded-full mx-auto'>
               <Sprout size={20} />
               <p>Onboarding</p>
               <div className='h-2 w-2 bg-green-500 animate-pulse rounded-full'></div>
+              <div 
+                className="ml-2 pl-2 border-l border-gray-700 cursor-pointer"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  skipOnboarding();
+                }}
+              >
+                <Check size={16} className="hover:text-green-500" />
+              </div>
             </div>
           </div>
         }
@@ -307,6 +332,13 @@ const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
             >
               <PictureInPicture size={16} />
             </div>
+            <div
+              className="inline-flex items-center px-5 space-x-2 cursor-pointer py-1 rounded-full text-gray-600 antialiased font-bold bg-gray-100 hover:bg-gray-200"
+              onClick={skipOnboarding}
+            >
+              <p>End</p>
+              <Check size={16} />
+            </div>
           </div>
           <div className='actions_buttons flex space-x-2'>
             {step.buttons?.map((button, index) => (

apps/web/components/Objects/Thumbnails/CourseThumbnailLanding.tsx

@@ -0,0 +1,156 @@
+'use client'
+import { useOrg } from '@components/Contexts/OrgContext'
+import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement'
+import ConfirmationModal from '@components/Objects/StyledElements/ConfirmationModal/ConfirmationModal'
+import { getUriWithOrg } from '@services/config/config'
+import { deleteCourseFromBackend } from '@services/courses/courses'
+import { getCourseThumbnailMediaDirectory } from '@services/media/media'
+import { revalidateTags } from '@services/utils/ts/requests'
+import { BookMinus, FilePenLine, Settings2, MoreVertical } from 'lucide-react'
+import { useLHSession } from '@components/Contexts/LHSessionContext'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import React from 'react'
+import toast from 'react-hot-toast'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@components/ui/dropdown-menu"
+
+type Course = {
+  course_uuid: string
+  name: string
+  description: string
+  thumbnail_image: string
+  org_id: string
+  update_date: string
+}
+
+type PropsType = {
+  course: Course
+  orgslug: string
+  customLink?: string
+}
+
+interface AdminEditOptionsProps {
+  course: Course
+  orgslug: string
+  deleteCourse: () => Promise<void>
+}
+
+export const removeCoursePrefix = (course_uuid: string) => course_uuid.replace('course_', '')
+
+const AdminEditOptions: React.FC<AdminEditOptionsProps> = ({ course, orgslug, deleteCourse }) => {
+  return (
+    <AuthenticatedClientElement
+      action="update"
+      ressourceType="courses"
+      checkMethod="roles"
+      orgId={course.org_id}
+    >
+      <div className="absolute top-2 right-2 z-20">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button className="p-1 bg-white rounded-full hover:bg-gray-100 transition-colors shadow-md">
+              <MoreVertical size={20} className="text-gray-700" />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-56">
+            <DropdownMenuItem asChild>
+              <Link prefetch href={getUriWithOrg(orgslug, `/dash/courses/course/${removeCoursePrefix(course.course_uuid)}/content`)}>
+                <FilePenLine className="mr-2 h-4 w-4" /> Edit Content
+              </Link>
+            </DropdownMenuItem>
+            <DropdownMenuItem asChild>
+              <Link prefetch href={getUriWithOrg(orgslug, `/dash/courses/course/${removeCoursePrefix(course.course_uuid)}/general`)}>
+                <Settings2 className="mr-2 h-4 w-4" /> Settings
+              </Link>
+            </DropdownMenuItem>
+            <DropdownMenuItem asChild>
+              <ConfirmationModal
+                confirmationButtonText="Delete Course"
+                confirmationMessage="Are you sure you want to delete this course?"
+                dialogTitle={`Delete ${course.name}?`}
+                dialogTrigger={
+                  <button className="w-full text-left flex items-center px-2 py-1 rounded-md text-sm bg-rose-500/10 hover:bg-rose-500/20 transition-colors text-red-600">
+                    <BookMinus className="mr-4 h-4 w-4" /> Delete Course
+                  </button>
+                }
+                functionToExecute={deleteCourse}
+                status="warning"
+              />
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </AuthenticatedClientElement>
+  )
+}
+
+const CourseThumbnailLanding: React.FC<PropsType> = ({ course, orgslug, customLink }) => {
+  const router = useRouter() 
+  const org = useOrg() as any
+  const session = useLHSession() as any
+
+  const deleteCourse = async () => {
+    const toastId = toast.loading('Deleting course...')
+    try {
+      await deleteCourseFromBackend(course.course_uuid, session.data?.tokens?.access_token)
+      await revalidateTags(['courses'], orgslug)
+      toast.success('Course deleted successfully')
+      router.refresh()
+    } catch (error) {
+      toast.error('Failed to delete course')
+    } finally {
+      toast.dismiss(toastId)
+    }
+  }
+
+  const thumbnailImage = course.thumbnail_image
+    ? getCourseThumbnailMediaDirectory(org?.org_uuid, course.course_uuid, course.thumbnail_image)
+    : '../empty_thumbnail.png'
+
+  return (
+    <div className="relative flex flex-col bg-white rounded-xl nice-shadow overflow-hidden min-w-[280px] w-full max-w-sm flex-shrink-0 m-2">
+      <AdminEditOptions
+        course={course}
+        orgslug={orgslug}
+        deleteCourse={deleteCourse}
+      />
+      <Link prefetch href={customLink ? customLink : getUriWithOrg(orgslug, `/course/${removeCoursePrefix(course.course_uuid)}`)}>
+        <div
+          className="inset-0 ring-1 ring-inset ring-black/10 rounded-t-xl w-full aspect-video bg-cover bg-center"
+          style={{ backgroundImage: `url(${thumbnailImage})` }}
+        />
+      </Link>
+      <div className='flex flex-col w-full p-4 space-y-3'>
+        <div className="space-y-2">
+          <h2 className="font-bold text-gray-800 leading-tight text-base min-h-[2.75rem] line-clamp-2">{course.name}</h2>
+          <p className='text-xs text-gray-700 leading-normal min-h-[3.75rem] line-clamp-3'>{course.description}</p>
+        </div>
+        
+        <div className="flex flex-wrap items-center gap-2">
+          {course.update_date && (
+            <div className="inline-flex h-5 min-w-[140px] items-center justify-center px-2 rounded-md bg-gray-100/80 border border-gray-200">
+              <span className="text-[10px] font-medium text-gray-600 truncate">
+                Updated {new Date(course.update_date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
+              </span>
+            </div>
+          )}
+        </div>
+
+        <Link 
+          prefetch 
+          href={customLink ? customLink : getUriWithOrg(orgslug, `/course/${removeCoursePrefix(course.course_uuid)}`)}
+          className="inline-flex items-center justify-center w-full px-3 py-1.5 bg-black text-white text-xs font-medium rounded-lg hover:bg-gray-800 transition-colors"
+        >
+          Start Learning
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+export default CourseThumbnailLanding