From 5841d45f6ff331699792aea4d9a1a86311d96d1a Mon Sep 17 00:00:00 2001
From: Aron Soto <115325057+AronSoto@users.noreply.github.com>
Date: Sat, 7 Jun 2025 19:01:12 -0500
Subject: [PATCH] Feat(app): Add Courses and Weekly Streak components to
 landing page

---
 app/components/landing/CardsCourses.vue | 142 ++++++++++++++++++
 app/components/landing/Hero.vue         | 190 +++++-------------------
 app/components/landing/WeeklyStreak.vue |  70 +++++++++
 app/pages/index.vue                     |  10 --
 content/index.yml                       |   6 +-
 5 files changed, 247 insertions(+), 171 deletions(-)
 create mode 100644 app/components/landing/CardsCourses.vue
 create mode 100644 app/components/landing/WeeklyStreak.vue

diff --git a/app/components/landing/CardsCourses.vue b/app/components/landing/CardsCourses.vue
new file mode 100644
index 0000000..dc35feb
--- /dev/null
+++ b/app/components/landing/CardsCourses.vue
@@ -0,0 +1,142 @@
+<script setup lang="ts">
+type HighlightColor =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'warning'
+  | 'info'
+  | 'error'
+  | 'neutral'
+
+interface Teacher {
+  name: string
+  description: string
+  avatar: {
+    src: string
+    alt: string
+  }
+}
+
+interface Course {
+  title: string
+  description: string
+  icon: string
+  to: string
+  highlightColor: HighlightColor
+  teacher: Teacher
+}
+
+const courses: Course[] = [
+  {
+    title: 'Inglés',
+    description:
+      'Mejora tus habilidades en el idioma inglés con ejercicios interactivos.',
+    icon: 'i-heroicons-language',
+    to: '#',
+    highlightColor: 'primary',
+    teacher: {
+      name: 'Dra. Laura López',
+      description: 'Responsable de Inglés',
+      avatar: {
+        src: 'https://randomuser.me/api/portraits/women/50.jpg',
+        alt: 'Dra. Laura López'
+      }
+    }
+  },
+  {
+    title: 'Física',
+    description:
+      'Aprende los principios de la física y resuelve problemas prácticos.',
+    icon: 'i-heroicons-cube-transparent',
+    to: '#',
+    highlightColor: 'neutral',
+    teacher: {
+      name: 'Mtro. Juan Pérez',
+      description: 'Responsable de Física',
+      avatar: {
+        src: 'https://randomuser.me/api/portraits/men/32.jpg',
+        alt: 'Mtro. Juan Pérez'
+      }
+    }
+  },
+  {
+    title: 'Química',
+    description: 'Explora el mundo de los elementos y las reacciones químicas.',
+    icon: 'i-heroicons-beaker',
+    to: '#',
+    highlightColor: 'success',
+    teacher: {
+      name: 'Dra. Alicia Mendoza',
+      description: 'Responsable de Química',
+      avatar: {
+        src: 'https://randomuser.me/api/portraits/women/45.jpg',
+        alt: 'Dra. Alicia Mendoza'
+      }
+    }
+  },
+  {
+    title: 'Matemáticas',
+    description: 'Desarrolla tu razonamiento lógico y matemático.',
+    icon: 'i-heroicons-calculator',
+    to: '#',
+    highlightColor: 'warning',
+    teacher: {
+      name: 'Ing. Carlos Ramírez',
+      description: 'Responsable de Matemáticas',
+      avatar: {
+        src: 'https://randomuser.me/api/portraits/men/23.jpg',
+        alt: 'Ing. Carlos Ramírez'
+      }
+    }
+  },
+  {
+    title: 'Historia',
+    description: 'Comprende los eventos y procesos históricos clave.',
+    icon: 'i-heroicons-book-open',
+    to: '#',
+    highlightColor: 'success',
+    teacher: {
+      name: 'Lic. Gabriela Suárez',
+      description: 'Responsable de Historia',
+      avatar: {
+        src: 'https://randomuser.me/api/portraits/women/65.jpg',
+        alt: 'Lic. Gabriela Suárez'
+      }
+    }
+  },
+  {
+    title: 'Computación',
+    description: 'Aprende fundamentos de computación y programación.',
+    icon: 'i-heroicons-computer-desktop',
+    to: '#',
+    highlightColor: 'error',
+    teacher: {
+      name: 'Dr. Emilio Torres',
+      description: 'Responsable de Computación',
+      avatar: {
+        src: 'https://randomuser.me/api/portraits/men/55.jpg',
+        alt: 'Dr. Emilio Torres'
+      }
+    }
+  }
+]
+</script>
+
+<template>
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
+    <UPageCard
+      v-for="(course, idx) in courses"
+      :key="idx"
+      :title="course.title"
+      :description="course.description"
+      :icon="course.icon"
+      :to="course.to"
+      target="_blank"
+      variant="soft"
+    >
+      <template #footer>
+        <UUser v-bind="course.teacher" />
+      </template>
+    </UPageCard>
+  </div>
+</template>
diff --git a/app/components/landing/Hero.vue b/app/components/landing/Hero.vue
index f6e08a0..7f1dcf3 100644
--- a/app/components/landing/Hero.vue
+++ b/app/components/landing/Hero.vue
@@ -1,21 +1,17 @@
 <script setup lang="ts">
 import type { IndexCollectionItem } from '@nuxt/content'
-
-const { footer, global } = useAppConfig()
+import WeeklyStreak from './WeeklyStreak.vue'
+import CardsCourses from './CardsCourses.vue'
 
 defineProps<{
   page: IndexCollectionItem
 }>()
+
+const days = Array.from({ length: 31 }, (_, i) => i < 11)
 </script>
 
 <template>
-  <UPageHero
-    :ui="{
-      headline: 'flex items-center justify-center',
-      title: 'text-shadow-md max-w-lg mx-auto',
-      links: 'mt-4 flex-col justify-center items-center'
-    }"
-  >
+  <UPageHero>
     <template #headline>
       <Motion
         :initial="{
@@ -33,159 +29,41 @@ defineProps<{
           delay: 0.1
         }"
       >
-        <UColorModeAvatar
-          class="size-18 ring ring-default ring-offset-3 ring-offset-(--ui-bg)"
-          :light="global.picture?.light!"
-          :dark="global.picture?.dark!"
-          :alt="global.picture?.alt!"
-        />
-      </Motion>
-    </template>
-
-    <template #title>
-      <Motion
-        :initial="{
-          scale: 1.1,
-          opacity: 0,
-          filter: 'blur(20px)'
-        }"
-        :animate="{
-          scale: 1,
-          opacity: 1,
-          filter: 'blur(0px)'
-        }"
-        :transition="{
-          duration: 0.6,
-          delay: 0.1
-        }"
-      >
-        {{ page.title }}
-      </Motion>
-    </template>
-
-    <template #description>
-      <Motion
-        :initial="{
-          scale: 1.1,
-          opacity: 0,
-          filter: 'blur(20px)'
-        }"
-        :animate="{
-          scale: 1,
-          opacity: 1,
-          filter: 'blur(0px)'
-        }"
-        :transition="{
-          duration: 0.6,
-          delay: 0.3
-        }"
-      >
-        {{ page.description }}
-      </Motion>
-    </template>
-
-    <template #links>
-      <Motion
-        :initial="{
-          scale: 1.1,
-          opacity: 0,
-          filter: 'blur(20px)'
-        }"
-        :animate="{
-          scale: 1,
-          opacity: 1,
-          filter: 'blur(0px)'
-        }"
-        :transition="{
-          duration: 0.6,
-          delay: 0.5
-        }"
-      >
-        <div
-          v-if="page.hero.links"
-          class="flex items-center gap-2"
-        >
-          <UButton v-bind="page.hero.links[0]" />
-          <UButton
-            :color="global.available ? 'success' : 'error'"
-            variant="ghost"
-            class="gap-2"
-            :to="global.available ? global.meetingLink : ''"
-            :label="global.available ? 'Available for new projects' : 'Not available at the moment'"
-          >
-            <template #leading>
-              <span class="relative flex size-2">
-                <span
-                  class="absolute inline-flex size-full rounded-full opacity-75"
-                  :class="global.available ? 'bg-success animate-ping' : 'bg-error'"
-                />
-                <span
-                  class="relative inline-flex size-2 scale-90 rounded-full"
-                  :class="global.available ? 'bg-success' : 'bg-error'"
-                />
-              </span>
-            </template>
-          </UButton>
-        </div>
-      </Motion>
-
-      <div class="gap-x-4 inline-flex mt-4">
-        <Motion
-          v-for="(link, index) of footer?.links"
-          :key="index"
-
-          :initial="{
-            scale: 1.1,
-            opacity: 0,
-            filter: 'blur(20px)'
-          }"
-          :animate="{
-            scale: 1,
-            opacity: 1,
-            filter: 'blur(0px)'
-          }"
-          :transition="{
-            duration: 0.6,
-            delay: 0.5 + index * 0.1
+        <UPageSection
+          :ui="{
+            container: 'flex items-center justify-center !py-0 !my-0 min-h-0'
           }"
         >
-          <UButton
-            v-bind="{ size: 'md', color: 'neutral', variant: 'ghost', ...link }"
-          />
-        </Motion>
-      </div>
+          <WeeklyStreak :days="days" />
+        </UPageSection>
+      </Motion>
     </template>
 
-    <UPageMarquee
-      pause-on-hover
-      class="py-2 -mx-4 sm:-mx-6 lg:-mx-8 [--duration:40s]"
+    <Motion
+      :initial="{
+        scale: 1.1,
+        opacity: 0,
+        filter: 'blur(20px)'
+      }"
+      :animate="{
+        scale: 1,
+        opacity: 1,
+        filter: 'blur(0px)'
+      }"
+      :transition="{
+        duration: 0.6,
+        delay: 0.1
+      }"
     >
-      <Motion
-        v-for="(img, index) in page.hero.images"
-        :key="index"
-        :initial="{
-          scale: 1.1,
-          opacity: 0,
-          filter: 'blur(20px)'
-        }"
-        :animate="{
-          scale: 1,
-          opacity: 1,
-          filter: 'blur(0px)'
-        }"
-        :transition="{
-          duration: 0.6,
-          delay: index * 0.1
+      <UPageSection
+        title="Cursos Generales"
+        :ui="{
+          container: 'flex items-center justify-center !py-0 !my-0 min-h-0',
+          title: 'text-left'
         }"
       >
-        <img
-          width="234"
-          height="234"
-          class="rounded-lg"
-          :class="index % 2 === 0 ? '-rotate-2' : 'rotate-2'"
-          v-bind="img"
-        >
-      </Motion>
-    </UPageMarquee>
+        <CardsCourses />
+      </UPageSection>
+    </Motion>
   </UPageHero>
 </template>
diff --git a/app/components/landing/WeeklyStreak.vue b/app/components/landing/WeeklyStreak.vue
new file mode 100644
index 0000000..219ba3e
--- /dev/null
+++ b/app/components/landing/WeeklyStreak.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+const props = defineProps<{
+  days: boolean[]
+}>()
+
+const { global } = useAppConfig()
+const daysPerRow = 7
+
+const rows = computed(() => {
+  return Array.from(
+    { length: Math.ceil(props.days.length / daysPerRow) },
+    (_, row) => props.days.slice(row * daysPerRow, (row + 1) * daysPerRow)
+  )
+})
+</script>
+
+<template>
+  <div
+    class="flex flex-row items-start gap-2 sm:gap-4 md:gap-5 py-0 justify-center w-full max-w-full"
+  >
+    <div class="hidden md:block mr-4">
+      <UColorModeAvatar
+        class="size-50 ring ring-default ring-offset-3 ring-offset-(--ui-bg)"
+        :light="global.picture?.light!"
+        :dark="global.picture?.dark!"
+        :alt="global.picture?.alt!"
+        src="https://i.ibb.co/p65zLCnG/c684b1f7-8134-41fe-8452-4a8c8bcb71dc.png"
+      />
+    </div>
+    <!-- Timeline -->
+    <div class="flex flex-col gap-5 justify-center w-full">
+      <div
+        v-for="(week, weekIdx) in rows"
+        :key="weekIdx"
+        class="flex items-center justify-center w-full"
+      >
+        <div
+          v-for="(done, i) in week"
+          :key="i"
+          class="flex items-center"
+        >
+          <div
+            class="w-5 h-5 sm:w-7 sm:h-9 md:w-9 md:h-9 flex items-center justify-center rounded-full border-2
+           text-[10px] sm:text-xs md:text-base transition-all duration-300
+           dark:bg-black dark:border-gray-600 dark:text-gray-400
+           bg-white border-gray-300 text-gray-600"
+            :class="done
+              ? 'border-red-500 bg-red-100 text-red-500 dark:bg-red-900/30 dark:text-red-500'
+              : ''"
+          >
+            <span
+              v-if="done"
+              class="font-bold"
+            >✔</span>
+            <span
+              v-else
+              class="font-bold"
+            >{{ weekIdx * 7 + i + 1 }}</span>
+          </div>
+          <!-- Línea de unión -->
+          <div
+            v-if="i < week.length - 1"
+            class="w-2 sm:w-4 md:w-6 h-0.5 mx-[1px] sm:mx-1 rounded bg-gray-300 dark:bg-gray-700"
+            :class="done ? 'bg-red-200 dark:bg-red-900/30' : ''"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 6271ec2..5f2a37f 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -21,16 +21,6 @@ useSeoMeta({
 <template>
   <UPage v-if="page">
     <LandingHero :page />
-    <UPageSection
-      :ui="{
-        container: '!pt-0 lg:grid lg:grid-cols-2 lg:gap-8'
-      }"
-    >
-      <LandingAbout :page />
-      <LandingClubs :page />
-    </UPageSection>
-    <LandingBlog :page />
-    <LandingTestimonials :page />
     <LandingFAQ :page />
   </UPage>
 </template>
diff --git a/content/index.yml b/content/index.yml
index f46aeae..c9b398a 100644
--- a/content/index.yml
+++ b/content/index.yml
@@ -1,8 +1,4 @@
-seo:
-  title: "Emma Thompson - UX/UI Designer"
-  description: "Welcome to my portfolio! I'm Emma Thompson, a UX/UI designer and front-end developer based in Boston. I specialize in creating user-centered digital experiences that are both beautiful and functional."
-title: "Hey, I'm Emma Thompson UX/UI Designer"
-description: "I craft intuitive digital experiences where design meets functionality. Based in Boston, bringing ideas to life through code and creativity."
+title: "Welcome, Leslie Cristina"
 hero:
   links:
     - label: "Use this template"