"Updated Card component to handle image loading, added FMLogo import,…

… modified data/index.js to export titles array, and updated Home page to display current challenge number and title."

src/components/Card.jsx

@@ -1,8 +1,12 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
+import FMLogo from '../assets/FM-logo.png';
 import { GlowCapture, Glow } from '@codaworks/react-glow';
 
 const Card = ({ day, title, desc, link, img }) => {
+  const [isLoading, setIsLoading] = useState(true)
+  const handleImageLoad = () => setIsLoading(false)
+
   return (
     <Link to={link}>
       <GlowCapture>
@@ -12,8 +16,19 @@ const Card = ({ day, title, desc, link, img }) => {
               <h1 className='text-neutral-100 font-medium text-[1.3rem]'>{title}</h1>
               <h2 className='bg-green-700/10 border border-green-700/20 text-neutral-200 text-xs rounded-[5px] px-2 py-1.5'>Day {day}</h2>
             </div>
-            <img src={img} alt={title} className='w-full h-auto object-contain rounded-md flex-grow' />
-            <p className='text-xs text-neutral-200'>{desc}</p>
+            <div className='w-full bg-neutral-800 rounded-md'>
+              <img
+                src={img}
+                alt={title}
+                className={`w-full h-full object-cover rounded-md transition-opacity duration-300 ${isLoading ? 'opacity-0' : 'opacity-100'
+                  }`}
+                onLoad={handleImageLoad}
+              />
+            </div>
+            <p
+              className='text-xs text-neutral-200 line-clamp-3'
+              dangerouslySetInnerHTML={{ __html: desc }}
+            />
           </div>
         </Glow>
       </GlowCapture>

src/data/index.js

@@ -4,7 +4,7 @@ import {
 
 export const Cards = [];
 
-const titles = [
+export const titles = [
   'Sign Up', // Day01 
   'Credit Card Checkout', // Day02
   'Landing Page', // Day03
@@ -30,23 +30,23 @@ const titles = [
 
 const descriptions = [
   'Create a sign up page, modal, form, or app screen related to signing up for something. It could be for a volunteer event, contest registration, a giveaway, or anything you can image.', // Day01
-  "Design a credit card checkout form or page. Don't forget the important elements such as the numbers, dates, security numbers, etc.", // Day02
+  "Design a credit card checkout form or page. Don't forget the important elements such as the numbers, dates, security numbers, etc. <span class='opacity-0'> Lorem ipsum dolor sit amet consectetur adipisicing</span>", // Day02
   "What's the main focus? Is it for a book, an album, a mobile app, a SaaS product? Consider important landing page elements (Headlines, call-to-action buttons, typography, clarity, etc.)", // Day03
   "Design a calculation element or interface. Is it a standard calculator, a scientific one, or specialty calculator for something such as a home mortgage or auto loan? Is it to forecast a calculation such as for a credit score? Is it for a phone, a tablet, a web app?", // Day04
   "Design an app icon. What best represents the brand or product? Or is it incredibly unique? Does it look great at a distance and does it stand out when put on your home screen alongside other apps?", // Day05
-  "Design a user profile and be mindful of the most important data, names, imagery, placement, etc. Is it for a serious profile? A social profile? (It's up to you!)", // Day06
+  "Design a user profile and be mindful of the most important data, names, imagery, placement, etc. Is it for a serious profile? A social profile? (It's up to you!) <span class='opacity-0'> Lorem ipsum dolor sit amet consectetur.</span>", // Day06
   "Design settings for something. Is it for security or privacy settings? Game settings? Light mode vs. dark mode? System settings (sound, notifications, screen time, Wi-Fi, etc.? What is it and what are the most important settings?", // Day07
   "Design a 404 page - that's not boring! Does it suit the brand's style? Is it user-friendly? It might sound mundane, but not everything can be flashy or glamorous. Every day millions of people will be landing on 404 pages. You have an opportunity to help them in a way that's useful and aesthetically pleasing. (It's up to you!)", // Day08
   "Design a music player. It could be browser based or an app (i.e. Pandora, Spotify, SoundCloud, etc.) or in a standalone product like in a car dashboard, jukebox, etc. Consider the controls, placements, imagery such as the artist or album cover, etc. Also, consider the device type that's playing the music.", // Day09
   "Design a social share button/icon and be mindful of the size, imagery, placement, and purpose for sharing. It could be to share an article snippet, or a simple link with a photo.", // Day10
   "Design a Flash Message with both the error message and success message. Is it for a sign up form? A download/upload message? Is it to promote a membership plan?", // Day11
-  "Design an e-commerce shop. Is it simple for a local business or a large online retailer? Is it for clothing, shoes, handmade soap, or something else?", // Day12
+  "Design an e-commerce shop. Is it simple for a local business or a large online retailer? Is it for clothing, shoes, handmade soap, or something else? <span class='opacity-0'> Lorem ipsum dolor sit amet consectetur adipisicing</span>", // Day12
   "Design a Direct Messaging app, profile, or chat box. Consider the parties involved in the messages, images, placement, and context of the messages. Are the messages for social purposes? Customer support?", // Day13
   "Is it for an app? An interface for an oven or cooking device? A sport related countdown such as on a scoreboard? Or is it a launch countdown for NASA, race cars, or something else?", // Day14
   "Consider what's being turned on/off and how it should be done. Is it a push-to-start electric vehicle? A control panel for a smart refrigerator or some other touch-panel display?", // Day15
-  "Is it for a newsletter sign-up form ? Is it an ad overlay? A gated subscription page such as for premium news or member-only access?", // Day16
+  "Is it for a newsletter sign-up form ? Is it an ad overlay? A gated subscription page such as for premium news or member-only access?<span class='opacity-0'> Lorem ipsum dolor sit amet consectetur adipisicing</span>", // Day16
   "What was purchased? On what date? How much was the item? And from what source and vendor? Consider other elements such as a customer support info, a tracking number or receipt number, business location/phone number/website, pictures if needed, and any other related elements.", // Day17
-  "Is it to be used for web or app usage, a health monitor, e-commerce or traffic analytics? Is it tracking sports or stock market performance?", // Day18
+  "Is it to be used for web or app usage, a health monitor, e-commerce or traffic analytics? Is it tracking sports or stock market performance? <span class='opacity-0'> Lorem ipsum dolor sit amet consectetur adipisicing</span>", // Day18
   "Is it for gaming, sports, racing, politics, top sellers, the highest grossing movies, or something else? Consider the important statistics to show, percentages, points, avatar pictures or logos, and the most critical elements.", // Day19
   "Consider the icon, placement, and purpose of the location. Are you mapping something? Is it a tracking beacon to find a friend or a tracking device such as a phone? Is the NSA or FBI tracking you?", // Day20
   "Design a home monitoring dashboard. Be creative! What would make a dashboard visually appealing and fun to use, while also being mindful of its function? Try to make it a realistic exercise as if it were your own dashboard.", // Day21

src/pages/Home.jsx

@@ -5,13 +5,16 @@ import { motion } from 'framer-motion'
 import useLenisScroll from '../hooks/useLenisScroll'
 import { glowEllipse, fmUIMockup } from '../assets/home'
 import { Card } from '../components'
-import { Cards } from '../data'
+import { Cards, titles } from '../data'
 import useScrollRestoration from '../hooks/useScrollRestoration';
 
 const Home = () => {
   useLenisScroll();
   useScrollRestoration();
 
+  const currentChallengeIndex = titles.length - 1
+  const currentChallengeNumber = currentChallengeIndex + 1
+
   const [searchParams, setSearchParams] = useSearchParams();
   const sectionRef = useRef(null);
   const cardsPerPage = 10;
@@ -191,7 +194,11 @@ const Home = () => {
       </div>
 
       {/* Specific section for cards */}
-      <div ref={sectionRef} className='flex flex-col items-center'>
+      <div ref={sectionRef} className='flex flex-col'>
+        <div className='lg:px-16 md:px-12 px-6 md:pt-0 pt-14'>
+          <p className='text-sm leading-relaxed text-green-50/80'>Frederick is currently working on:</p>
+          <p className='leading-relaxed text-green-500'>Challenge #{currentChallengeNumber}</p>
+        </div>
         {/* Card Grid */}
         <div
           className='grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-3 lg:px-16 md:px-12 px-6 py-12'