Week 12 – Design Handover – Trista & Nathalie

.eslintrc.cjs

@@ -12,6 +12,7 @@ module.exports = {
   settings: { react: { version: '18.2' } },
   plugins: ['react-refresh'],
   rules: {
+    "react/prop-types": "off",
     'react-refresh/only-export-components': [
       'warn',
       { allowConstantExport: true },

src/components/ClassCards.jsx

@@ -1,3 +1,27 @@
+import { ClassPieces } from "./ClassPieces"
+import ZumbaEnergetic from "../assets/ZumbaEnergetic.jpeg"
+import ZumbaHeavy from "../assets/ZumbaHeavy.jpeg"
+import JustZumba from "../assets/JustZumba.jpeg"
+
 export const ClassCards = () => {
-  return <div>ClassCards</div>
+  return (
+    <div className='flex flex-col justify-center items-center gap-y-5 px-[60px]'>
+    <h4 className='ubuntu text-3xl text-white' >Some of our classes!</h4>
+    <div className='flex gap-[27px]'>
+      <ClassPieces image={ZumbaEnergetic} alt={'People are having Zumba class'} 
+    courseName={'Zumba Energetic'} courseInfo={'A class for you that want a fast paced and high cardio workout!'}
+    />
+    <ClassPieces image={ZumbaHeavy} alt={'People are having Zumba Heavy'}
+    courseName={'Zumba Heavy'} courseInfo={'This class will challenge you a bit further - dance with weights!'}
+    />
+    <ClassPieces image={JustZumba} alt={'People are having standard Zumba'}
+    courseName={'Just Zumba'} courseInfo={'The classic Zumba concept! follow along with dance steps!'}
+    />
+
+    </div>
+
+    </div>
+
+  )
+
 }

src/components/ClassPieces.jsx

@@ -0,0 +1,12 @@
+export const ClassPieces = ({image, alt, courseName, courseInfo}) => {
+    return (
+        <div className='flex flex-col w-[422px] h-[552px] rounded-[10px] bg-purple px-[40px] pt-[40px] pb-[45px] gap-y-[25px] shadow-base shadow-yellow '>
+            <img src={image} alt={alt} className='w-[342px] h-[289px] rounded-[10px]'/>
+            <div className="flex flex-col gap-y-2">
+                <h5 className="text-xl">{courseName}</h5>
+            <p className="text-5xl">{courseInfo}</p>  
+            </div>
+
+        </div>
+    )
+}

tailwind.config.js

@@ -23,6 +23,7 @@ export default {
       "2xl": ["35px", { fontWeight: "700" }],
       "3xl": ["40px", { fontWeight: "700" }],
       "4xl": ["55px", { fontWeight: "700" }],
+      "5xl": ["25px", {fontWeight: "400"}]
     },
     spacing: {
       1: "16px",
@@ -41,6 +42,10 @@ export default {
         "hero-image": "url('src/assets/images/woman-dancing.jpg')",
       },
     },
+    boxShadow: {
+      'sm': '3px 3px rgba(0, 0, 0, 0.5)',
+      'base': '5px 5px rgba(0, 0, 0, 0.5)',
+    }
   },
   plugins: ["prettier-plugin-tailwindcss"],
 };