feat(practice-sheet): add practice sheet page

src/App.tsx

@@ -21,6 +21,7 @@ import { Drills } from "./pages/student/drills/page";
 import { HardTestModules } from "./pages/student/hard-test-modules/page";
 import { QuestMap } from "./pages/student/QuestMap";
 import { Register } from "./pages/auth/Register";
+import { PracticeSheetList } from "./pages/student/practice-sheet/page";
 
 function App() {
   const router = createBrowserRouter([
@@ -80,6 +81,10 @@ function App() {
               path: "practice/hard-test-modules",
               element: <HardTestModules />,
             },
+            {
+              path: "practice/practice-sheet",
+              element: <PracticeSheetList />,
+            },
           ],
         },
         {

src/components/AppSidebar.tsx

@@ -19,6 +19,7 @@ import {
   Trophy,
   Map,
   SquareLibrary,
+  ListIcon,
 } from "lucide-react";
 
 import { useState } from "react";
@@ -362,6 +363,7 @@ export function AppSidebar() {
                         />
                         <span>Targeted Practice</span>
                       </NavLink>
+
                       <NavLink
                         to="/student/practice/drills"
                         className={({ isActive }) =>
@@ -396,6 +398,23 @@ export function AppSidebar() {
                         />
                         <span>Hard Test Modules</span>
                       </NavLink>
+                      <NavLink
+                        to="/student/practice/practice-sheet"
+                        className={({ isActive }) =>
+                          `flex items-center gap-2.5 rounded-2xl px-2 py-2 text-sm font-satoshi transition-colors duration-200 ${
+                            isActive
+                              ? "bg-white text-slate-900"
+                              : "text-slate-500 hover:bg-white hover:text-slate-900"
+                          }`
+                        }
+                      >
+                        <ListIcon
+                          size={18}
+                          strokeWidth={3}
+                          className="text-slate-400"
+                        />
+                        <span>Practice Sheet</span>
+                      </NavLink>
                     </SidebarMenuSub>
                   )}
                 </SidebarMenuItem>

src/pages/student/Practice.tsx

@@ -1,12 +1,4 @@
-import {
+import { DraftingCompass, FileText, Target, Trophy, Zap } from "lucide-react";
-  BookOpen,
-  Clock,
-  DraftingCompass,
-  Loader2,
-  Target,
-  Trophy,
-  Zap,
-} from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { InfoHeader } from "../../components/InfoHeader";
 
@@ -26,13 +18,13 @@ const STYLES = `
 
   .pr-screen {
     min-height: 100vh;
+    padding-bottom: 40px;
     background: #fffbf4;
     font-family: 'Nunito', sans-serif;
     position: relative;
     overflow-x: hidden;
   }
 
-  /* On desktop, account for sidebar */
   @media (min-width: 768px) {
     .pr-screen {
       padding-left: calc(17rem + 1.25rem);
@@ -70,10 +62,9 @@ const STYLES = `
     display: flex; flex-direction: column; gap: 1.5rem;
   }
 
-  /* Desktop / wide layout */
   @media (min-width: 900px) {
     .pr-inner { max-width: var(--content-max); padding: 3rem 1.5rem 6rem; }
-    .pr-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
+    .pr-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 1rem !important; }
 
     .pr-blob-1 { left: calc((100vw - var(--content-max)) / 2 - 120px); top: -120px; width: 300px; height: 300px; }
     .pr-blob-2 { left: calc((100vw - var(--content-max)) / 2 + 20px); bottom: -80px; width: 220px; height: 220px; }
@@ -95,29 +86,6 @@ const STYLES = `
   .pr-anim-3 { animation-delay: 0.15s; }
   .pr-anim-4 { animation-delay: 0.2s; }
 
-  /* ── Header ── */
-  .pr-header {
-    display: flex; align-items: center; justify-content: space-between;
-    animation: prPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
-  }
-  .pr-logo-btn {
-    width: 44px; height: 44px; border-radius: 14px;
-    background: linear-gradient(135deg, #a855f7, #7c3aed);
-    display: flex; align-items: center; justify-content: center;
-    box-shadow: 0 4px 0 #5b21b644;
-  }
-  .pr-xp-chip {
-    display: flex; align-items: center; gap: 0.5rem;
-    background: white; border: 2.5px solid #e9d5ff;
-    border-radius: 100px; padding: 0.45rem 1rem;
-    font-size: 0.85rem; font-weight: 800; color: #7c3aed;
-    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
-  }
-  .pr-xp-dot {
-    width: 8px; height: 8px; border-radius: 50%;
-    background: linear-gradient(135deg, #a855f7, #7c3aed);
-  }
-
   /* ── Hero banner ── */
   .pr-hero {
     border-radius: 24px;
@@ -175,15 +143,15 @@ const STYLES = `
   /* ── Mode card ── */
   .pr-mode-card {
     background: white; border: 2.5px solid #f3f4f6; border-radius: 22px;
-    padding: 1.1rem 1.25rem;
+    padding: 0;
     box-shadow: 0 4px 14px rgba(0,0,0,0.04);
-    cursor: pointer; display: flex; flex-direction: column; gap: 0.85rem;
+    cursor: pointer; display: flex; flex-direction: column;
     transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
     position: relative; overflow: hidden;
   }
   .pr-mode-card:hover  {
-    transform: translateY(-3px);
+    transform: translateY(-4px);
-    box-shadow: 0 10px 24px rgba(0,0,0,0.08);
+    box-shadow: 0 14px 32px rgba(0,0,0,0.1);
   }
   .pr-mode-card:active { transform: translateY(1px); box-shadow: 0 3px 8px rgba(0,0,0,0.06); }
 
@@ -193,71 +161,455 @@ const STYLES = `
   .pr-mode-card.cyan:hover   { border-color: #67e8f9; }
   .pr-mode-card.lime   { border-color: #d9f99d; }
   .pr-mode-card.lime:hover   { border-color: #bef264; }
+  .pr-mode-card.amber  { border-color: #fde68a; }
+  .pr-mode-card.amber:hover  { border-color: #fcd34d; }
+
+  /* Illustration strip at top of card */
+  .pr-card-illo {
+    width: 100%;
+    height: 110px;
+    position: relative;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+  .pr-card-illo svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  /* Card body below illustration */
+  .pr-card-body {
+    padding: 1rem 1.1rem 1rem;
+    display: flex; flex-direction: column; gap: 0.6rem;
+    flex: 1;
+  }
 
   .pr-mode-top {
-    display: flex; align-items: flex-start; justify-content: space-between;
+    display: flex; align-items: center; gap: 0.6rem;
   }
   .pr-mode-icon {
-    width: 44px; height: 44px; border-radius: 14px;
+    width: 36px; height: 36px; border-radius: 12px;
     display: flex; align-items: center; justify-content: center;
+    flex-shrink: 0;
   }
-  .pr-mode-icon.red  { background: linear-gradient(135deg, #f87171, #ef4444); box-shadow: 0 4px 0 #b91c1c44; }
+  .pr-mode-icon.red  { background: linear-gradient(135deg, #f87171, #ef4444); box-shadow: 0 3px 0 #b91c1c44; }
-  .pr-mode-icon.cyan { background: linear-gradient(135deg, #22d3ee, #06b6d4); box-shadow: 0 4px 0 #0e7490aa; }
+  .pr-mode-icon.cyan { background: linear-gradient(135deg, #22d3ee, #06b6d4); box-shadow: 0 3px 0 #0e7490aa; }
-  .pr-mode-icon.lime { background: linear-gradient(135deg, #a3e635, #84cc16); box-shadow: 0 4px 0 #4d7c0f44; }
+  .pr-mode-icon.lime { background: linear-gradient(135deg, #a3e635, #84cc16); box-shadow: 0 3px 0 #4d7c0f44; }
-
+  .pr-mode-icon.amber{ background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 3px 0 #92400e44; }
-  .pr-mode-badge {
-    width: 36px; height: 36px; border-radius: 50%;
-    display: flex; align-items: center; justify-content: center;
-  }
-  .pr-mode-badge.red  { background: #fff5f5; }
-  .pr-mode-badge.cyan { background: #ecfeff; }
-  .pr-mode-badge.lime { background: #f7ffe4; }
 
   .pr-mode-title {
-    font-size: 1rem; font-weight: 900; color: #1e1b4b;
+    font-size: 0.95rem; font-weight: 900; color: #1e1b4b;
   }
   .pr-mode-desc {
     font-family: 'Nunito Sans', sans-serif;
-    font-size: 0.78rem; font-weight: 600; color: #9ca3af;
+    font-size: 0.76rem; font-weight: 600; color: #9ca3af;
+    line-height: 1.4;
   }
   .pr-mode-arrow {
     font-size: 0.75rem; font-weight: 800; margin-top: auto;
     display: flex; align-items: center; gap: 0.25rem;
     transition: gap 0.2s ease;
+    padding-top: 0.25rem;
   }
   .pr-mode-card:hover .pr-mode-arrow { gap: 0.5rem; }
   .pr-mode-arrow.red  { color: #ef4444; }
   .pr-mode-arrow.cyan { color: #06b6d4; }
   .pr-mode-arrow.lime { color: #84cc16; }
+  .pr-mode-arrow.amber{ color: #f59e0b; }
+
+  /* Wiggle on hover for illustration elements */
+  .pr-mode-card:hover .illo-wiggle {
+    animation: illoWiggle 0.5s ease;
+  }
+  @keyframes illoWiggle {
+    0%,100%{transform:rotate(0deg);}
+    25%{transform:rotate(-5deg);}
+    75%{transform:rotate(5deg);}
+  }
 `;
 
+/* ── SVG Illustrations for each card ── */
+
+const IlloTargeted = () => (
+  <svg
+    viewBox="0 0 260 110"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    preserveAspectRatio="xMidYMid slice"
+  >
+    <rect width="260" height="110" fill="#fff5f5" />
+    {/* soft bg circles */}
+    <circle cx="200" cy="55" r="70" fill="#fee2e2" opacity="0.6" />
+    <circle cx="220" cy="30" r="30" fill="#fecaca" opacity="0.4" />
+    {/* Target rings */}
+    <circle
+      cx="195"
+      cy="58"
+      r="44"
+      stroke="#fca5a5"
+      strokeWidth="2.5"
+      fill="none"
+    />
+    <circle
+      cx="195"
+      cy="58"
+      r="30"
+      stroke="#f87171"
+      strokeWidth="2.5"
+      fill="none"
+    />
+    <circle cx="195" cy="58" r="16" fill="#ef4444" opacity="0.9" />
+    <circle cx="195" cy="58" r="6" fill="white" />
+    {/* Arrow hitting bullseye */}
+    <line
+      x1="130"
+      y1="20"
+      x2="187"
+      y2="56"
+      stroke="#dc2626"
+      strokeWidth="3"
+      strokeLinecap="round"
+    />
+    <polygon points="187,56 178,46 192,49" fill="#dc2626" />
+    {/* Arrow fletching */}
+    <line
+      x1="130"
+      y1="20"
+      x2="120"
+      y2="12"
+      stroke="#dc2626"
+      strokeWidth="2"
+      strokeLinecap="round"
+    />
+    <line
+      x1="130"
+      y1="20"
+      x2="122"
+      y2="25"
+      stroke="#dc2626"
+      strokeWidth="2"
+      strokeLinecap="round"
+    />
+    {/* Sparkles */}
+    <circle cx="60" cy="35" r="4" fill="#fbbf24" opacity="0.7" />
+    <circle cx="80" cy="70" r="3" fill="#f87171" opacity="0.5" />
+    <circle cx="45" cy="75" r="5" fill="#fca5a5" opacity="0.4" />
+    <path d="M50 30 l3 -8 l3 8 l-6 0Z" fill="#ef4444" opacity="0.4" />
+    <path d="M100 80 l2 -6 l2 6 l-4 0Z" fill="#fca5a5" opacity="0.5" />
+  </svg>
+);
+
+const IlloDrills = () => (
+  <svg
+    viewBox="0 0 260 110"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    preserveAspectRatio="xMidYMid slice"
+  >
+    <rect width="260" height="110" fill="#ecfeff" />
+    <circle cx="50" cy="55" r="65" fill="#cffafe" opacity="0.5" />
+    <circle cx="25" cy="25" r="28" fill="#a5f3fc" opacity="0.35" />
+    {/* Stopwatch body */}
+    <circle
+      cx="70"
+      cy="62"
+      r="36"
+      fill="white"
+      stroke="#22d3ee"
+      strokeWidth="3"
+    />
+    <circle
+      cx="70"
+      cy="62"
+      r="28"
+      fill="#ecfeff"
+      stroke="#67e8f9"
+      strokeWidth="1.5"
+    />
+    {/* Clock hands */}
+    <line
+      x1="70"
+      y1="62"
+      x2="70"
+      y2="40"
+      stroke="#06b6d4"
+      strokeWidth="3"
+      strokeLinecap="round"
+    />
+    <line
+      x1="70"
+      y1="62"
+      x2="88"
+      y2="70"
+      stroke="#0891b2"
+      strokeWidth="2.5"
+      strokeLinecap="round"
+    />
+    <circle cx="70" cy="62" r="3.5" fill="#0891b2" />
+    {/* Crown / button */}
+    <rect x="64" y="22" width="12" height="6" rx="3" fill="#22d3ee" />
+    <rect x="56" y="18" width="8" height="5" rx="2.5" fill="#06b6d4" />
+    {/* Lightning bolts (speed) */}
+    <path
+      d="M148 20 l-10 22 h10 l-10 22"
+      stroke="#f59e0b"
+      strokeWidth="3"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+    />
+    <path
+      d="M170 30 l-8 18 h8 l-8 18"
+      stroke="#fbbf24"
+      strokeWidth="2.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+      opacity="0.7"
+    />
+    <path
+      d="M192 38 l-6 14 h6 l-6 14"
+      stroke="#fcd34d"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+      opacity="0.5"
+    />
+    {/* Speed lines */}
+    <line
+      x1="115"
+      y1="52"
+      x2="140"
+      y2="52"
+      stroke="#22d3ee"
+      strokeWidth="2"
+      strokeLinecap="round"
+      opacity="0.5"
+    />
+    <line
+      x1="120"
+      y1="62"
+      x2="138"
+      y2="62"
+      stroke="#22d3ee"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      opacity="0.35"
+    />
+    <line
+      x1="118"
+      y1="72"
+      x2="136"
+      y2="72"
+      stroke="#22d3ee"
+      strokeWidth="1"
+      strokeLinecap="round"
+      opacity="0.25"
+    />
+    {/* dots */}
+    <circle cx="220" cy="28" r="5" fill="#22d3ee" opacity="0.4" />
+    <circle cx="240" cy="75" r="4" fill="#06b6d4" opacity="0.3" />
+    <circle cx="210" cy="88" r="3" fill="#67e8f9" opacity="0.4" />
+  </svg>
+);
+
+const IlloHard = () => (
+  <svg
+    viewBox="0 0 260 110"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    preserveAspectRatio="xMidYMid slice"
+  >
+    <rect width="260" height="110" fill="#f7ffe4" />
+    <circle cx="210" cy="55" r="70" fill="#d9f99d" opacity="0.5" />
+    <circle cx="230" cy="20" r="30" fill="#bef264" opacity="0.3" />
+    {/* Trophy */}
+    <rect x="168" y="78" width="44" height="8" rx="4" fill="#84cc16" />
+    <rect x="182" y="68" width="16" height="12" rx="2" fill="#a3e635" />
+    <path
+      d="M163 28 h54 v28 a27 27 0 0 1 -54 0 Z"
+      fill="white"
+      stroke="#84cc16"
+      strokeWidth="2.5"
+    />
+    <path
+      d="M163 38 Q148 38 148 52 Q148 63 163 63"
+      stroke="#a3e635"
+      strokeWidth="2.5"
+      fill="none"
+      strokeLinecap="round"
+    />
+    <path
+      d="M217 38 Q232 38 232 52 Q232 63 217 63"
+      stroke="#a3e635"
+      strokeWidth="2.5"
+      fill="none"
+      strokeLinecap="round"
+    />
+    {/* Star inside trophy */}
+    <path
+      d="M190 38 l3 9 h9 l-7 5 3 9 -8 -6 -8 6 3 -9 -7 -5 h9 Z"
+      fill="#fbbf24"
+    />
+    {/* Mountain / difficulty hills */}
+    <path d="M20 90 L55 35 L90 90Z" fill="#86efac" opacity="0.7" />
+    <path d="M60 90 L95 50 L130 90Z" fill="#4ade80" opacity="0.5" />
+    <path d="M85 90 L120 40 L155 90Z" fill="#22c55e" opacity="0.35" />
+    {/* flag on tallest */}
+    <line
+      x1="120"
+      y1="40"
+      x2="120"
+      y2="22"
+      stroke="#16a34a"
+      strokeWidth="2"
+      strokeLinecap="round"
+    />
+    <path d="M120 22 l12 5 l-12 5 Z" fill="#16a34a" />
+    {/* sparkles */}
+    <path
+      d="M30 28 l2 -5 l2 5 l5 2 l-5 2 l-2 5 l-2 -5 l-5 -2 Z"
+      fill="#fbbf24"
+      opacity="0.6"
+    />
+    <path
+      d="M240 88 l1.5 -4 l1.5 4 l4 1.5 l-4 1.5 l-1.5 4 l-1.5 -4 l-4 -1.5 Z"
+      fill="#a3e635"
+      opacity="0.5"
+    />
+  </svg>
+);
+
+const IlloSheet = () => (
+  <svg
+    viewBox="0 0 260 110"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    preserveAspectRatio="xMidYMid slice"
+  >
+    <rect width="260" height="110" fill="#fffbeb" />
+    <circle cx="55" cy="55" r="65" fill="#fef3c7" opacity="0.6" />
+    <circle cx="30" cy="80" r="30" fill="#fde68a" opacity="0.35" />
+    {/* Paper sheet */}
+    <rect
+      x="30"
+      y="18"
+      width="72"
+      height="82"
+      rx="8"
+      fill="white"
+      stroke="#fcd34d"
+      strokeWidth="2.5"
+    />
+    {/* Folded corner */}
+    <path d="M82 18 L102 38 L82 38 Z" fill="#fde68a" />
+    <path d="M82 18 L102 38" stroke="#fcd34d" strokeWidth="2" />
+    {/* Lines on paper */}
+    <line
+      x1="42"
+      y1="50"
+      x2="84"
+      y2="50"
+      stroke="#e5e7eb"
+      strokeWidth="2"
+      strokeLinecap="round"
+    />
+    <line
+      x1="42"
+      y1="60"
+      x2="90"
+      y2="60"
+      stroke="#e5e7eb"
+      strokeWidth="2"
+      strokeLinecap="round"
+    />
+    <line
+      x1="42"
+      y1="70"
+      x2="78"
+      y2="70"
+      stroke="#e5e7eb"
+      strokeWidth="2"
+      strokeLinecap="round"
+    />
+    <line
+      x1="42"
+      y1="80"
+      x2="86"
+      y2="80"
+      stroke="#e5e7eb"
+      strokeWidth="2"
+      strokeLinecap="round"
+    />
+    {/* Checkmark on first line */}
+    <path
+      d="M42 42 l5 5 l9 -9"
+      stroke="#22c55e"
+      strokeWidth="2.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+    />
+    {/* Pencil */}
+    <g transform="rotate(-35 155 55)">
+      <rect x="138" y="28" width="14" height="52" rx="3" fill="#fbbf24" />
+      <path d="M138 76 L145 90 L152 76 Z" fill="#f97316" />
+      <rect x="138" y="28" width="14" height="10" rx="3" fill="#9ca3af" />
+      <rect x="140" y="30" width="10" height="6" rx="2" fill="#d1d5db" />
+    </g>
+    {/* Stars / highlights */}
+    <path
+      d="M200 22 l2 -6 l2 6 l6 2 l-6 2 l-2 6 l-2 -6 l-6 -2 Z"
+      fill="#f59e0b"
+      opacity="0.7"
+    />
+    <path
+      d="M230 65 l1.5 -4 l1.5 4 l4 1.5 l-4 1.5 l-1.5 4 l-1.5 -4 l-4 -1.5 Z"
+      fill="#fbbf24"
+      opacity="0.5"
+    />
+    <circle cx="215" cy="88" r="4" fill="#fcd34d" opacity="0.4" />
+    <circle cx="240" cy="35" r="3" fill="#fbbf24" opacity="0.35" />
+  </svg>
+);
+
 const MODE_CARDS = [
   {
     color: "red",
-    icon: <Target size={20} color="white" />,
+    icon: <Target size={18} color="white" />,
-    badge: <Loader2 size={22} color="#ef4444" />,
     title: "Targeted Practice",
     desc: "Focus on your weak spots and improve fast",
     route: "/student/practice/targeted-practice",
     arrow: "Practice →",
+    Illo: IlloTargeted,
   },
   {
     color: "cyan",
-    icon: <Zap size={20} color="white" />,
+    icon: <Zap size={18} color="white" />,
-    badge: <Clock size={22} color="#06b6d4" />,
     title: "Drills",
     desc: "Train speed and accuracy under pressure",
     route: "/student/practice/drills",
     arrow: "Drill →",
+    Illo: IlloDrills,
   },
   {
     color: "lime",
-    icon: <Trophy size={20} color="white" />,
+    icon: <Trophy size={18} color="white" />,
-    badge: <BookOpen size={22} color="#84cc16" />,
     title: "Hard Modules",
     desc: "Push yourself with the toughest questions",
     route: "/student/practice/hard-test-modules",
     arrow: "Challenge →",
+    Illo: IlloHard,
+  },
+  {
+    color: "amber",
+    icon: <FileText size={18} color="white" />,
+    title: "Practice Sheet",
+    desc: "Work through curated question sets at your own pace",
+    route: "/student/practice/practice-sheet",
+    arrow: "Start Sheet →",
+    Illo: IlloSheet,
   },
 ] as const;
 
@@ -297,6 +649,7 @@ export const Practice = () => {
       <div className="pr-inner">
         {/* ── Header ── */}
         <InfoHeader mode="LEVEL" />
+
         {/* ── Hero banner ── */}
         <div className="pr-hero pr-anim pr-anim-1">
           <div className="pr-hero-icon-bg">
@@ -307,7 +660,12 @@ export const Practice = () => {
           <p className="pr-hero-sub">
             Take a full adaptive test and benchmark your SAT readiness.
           </p>
-          <button className="pr-hero-btn">Take a practice test →</button>
+          <button
+            onClick={() => navigate("/student/practice/practice-sheet")}
+            className="pr-hero-btn"
+          >
+            Take a practice test →
+          </button>
         </div>
 
         {/* ── Practice modes ── */}
@@ -322,20 +680,23 @@ export const Practice = () => {
                 className={`pr-mode-card ${card.color}`}
                 onClick={() => navigate(card.route)}
               >
+                {/* Illustration */}
+                <div className="pr-card-illo">
+                  <card.Illo />
+                </div>
+
+                {/* Body */}
+                <div className="pr-card-body">
                   <div className="pr-mode-top">
                     <div className={`pr-mode-icon ${card.color}`}>
                       {card.icon}
                     </div>
-                  <div className={`pr-mode-badge ${card.color}`}>
-                    {card.badge}
-                  </div>
-                </div>
-                <div>
                     <p className="pr-mode-title">{card.title}</p>
-                  <p className="pr-mode-desc">{card.desc}</p>
                   </div>
+                  <p className="pr-mode-desc">{card.desc}</p>
                   <p className={`pr-mode-arrow ${card.color}`}>{card.arrow}</p>
                 </div>
+              </div>
             ))}
           </div>
         </section>