Formatted Steps

src/components/qp/Step.astro

@@ -1,9 +1,13 @@
 ---
-const {text, number, col, position} = Astro.props;
+const { text, number, col, position, width } = Astro.props;
 ---
 
-<div class={`relative col-span-${col} border-[0.1vw] border-white/30 h-[23vh] text-[1.2vw] bg-gradient-to-b from-white/10 to-ieee-blue-300/10 px-[1vw] py-[2vw] rounded-[1vw]`}>
-    <p class={`${position} text-[4vw] opacity-10 font-bold absolute leading-tight`}>
+<div
+    class={`relative col-span-${col} border-[0.1vw] border-white/30 text-[1.2vw] bg-gradient-to-b from-white/10 to-ieee-blue-300/10 px-[1vw] py-[2vw] rounded-[1vw] `}
+>
+    <p
+        class={`${position} text-[4vw] opacity-10 font-bold absolute leading-tight `}
+    >
         {number}
     </p>
     {text}

src/components/qp/Steps.astro

@@ -1,18 +1,41 @@
 ---
-import Step from "./Step.astro"
-import steps from "../../data/steps.json"
-import Subtitle from "../core/Subtitle.astro"
+import Step from "./Step.astro";
+import steps from "../../data/steps.json";
+import Subtitle from "../core/Subtitle.astro";
 ---
+
 <div class="flex flex-col items-center mt-[7%] mb-[10%]">
     <Subtitle title="How it works:" />
-    <div class="grid grid-cols-5 w-[70%] gap-[1.5vw]">
-        {steps.map((step)=>(
+    <div class="grid grid-rows-2 w-[70%] gap-[2vw]">
+        <div class="grid grid-cols-4 gap-[1.5vw]">
+            {
+                steps
+                    .slice(0, 3)
+                    .map((step) => (
                         <Step
-             text = {step.text}
-             number = {step.number}
-             col = {step.col}
-             position = {step.position}
+                            text={step.text}
+                            number={step.number}
+                            col={step.col}
+                            position={step.position}
+                            width={step.width}
                         />
-         ))}
+                    ))
+            }
+        </div>
+        <div class="grid grid-cols-3 gap-[1.5vw]">
+            {
+                steps
+                    .slice(3, 5)
+                    .map((step) => (
+                        <Step
+                            text={step.text}
+                            number={step.number}
+                            col={step.col}
+                            position={step.position}
+                            width={step.width}
+                        />
+                    ))
+            }
+        </div>
     </div>
 </div>

src/data/steps.json

@@ -8,8 +8,9 @@
   {
     "text": "Participants will be put into teams of 5 based on their experience and interests",
     "number": "02",
-        "col": "2",
-        "position": " top-0 left-[2%] "
+    "col": "1",
+    "position": " top-0 left-[2%] ",
+    "width": "col-span-1"
   },
   {
     "text": "Each team will be assigned a mentor.",
@@ -20,13 +21,14 @@
   {
     "text": "At the end of the quarter, teams will showcase their project to judges including professors, industry experts, IEEE officers, and fellow participants",
     "number": "04",
-        "col": "3",
+    "col": "2",
     "position": "bottom-0 right-[2%] "
   },
   {
     "text": "Winning teams will walk away with prizes!",
     "number": "05",
-        "col": "2",
-        "position": "top-0 right-[5%]"
+    "col": "1",
+    "position": "top-0 right-[5%]",
+    "width": "col-span-1"
   }
 ]

tailwind.config.mjs

@@ -1,10 +1,11 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+  safelist: ["col-span-1", "col-span-2", "col-span-3", "col-span-4"],
   theme: {
     extend: {
       boxShadow: {
-        'glow': '0 0 0.5vw 0.1vw rgba(255, 255, 255, 0.3), 0 0 1vw 0.5vw rgba(255, 255, 255, 0.1)',
+        glow: "0 0 0.5vw 0.1vw rgba(255, 255, 255, 0.3), 0 0 1vw 0.5vw rgba(255, 255, 255, 0.1)",
       },
       colors: {
         ieee: {