Formatted Steps

src/components/qp/Step.astro

@@ -1,10 +1,14 @@
 ---
-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]`}>
+<div
-    <p class={`${position} text-[4vw] opacity-10 font-bold absolute leading-tight`}>
+    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}
-</div>
+</div>

src/components/qp/Steps.astro

@@ -1,18 +1,41 @@
 ---
-import Step from "./Step.astro"
+import Step from "./Step.astro";
-import steps from "../../data/steps.json"
+import steps from "../../data/steps.json";
-import Subtitle from "../core/Subtitle.astro"
+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]">
+    <div class="grid grid-rows-2 w-[70%] gap-[2vw]">
-        {steps.map((step)=>(
+        <div class="grid grid-cols-4 gap-[1.5vw]">
-            <Step
+            {
-             text = {step.text}
+                steps
-             number = {step.number}
+                    .slice(0, 3)
-             col = {step.col}
+                    .map((step) => (
-             position = {step.position}
+                        <Step
-            /> 
+                            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>
+</div>

src/data/steps.json

@@ -1,32 +1,34 @@
 [
-    {
+  {
-        "text": "Prospective participants who are interested in joining Quaterly Project will fill out QP interest form, which can be founded on the bottom of this page.",
+    "text": "Prospective participants who are interested in joining Quaterly Project will fill out QP interest form, which can be founded on the bottom of this page.",
-        "number": "01",
+    "number": "01",
-        "col": "2",
+    "col": "2",
-        "position": "bottom-0 right-[2%] "
+    "position": "bottom-0 right-[2%] "
-    },
+  },
-    {
+  {
-        "text": "Participants will be put into teams of 5 based on their experience and interests",
+    "text": "Participants will be put into teams of 5 based on their experience and interests",
-        "number": "02",
+    "number": "02",
-        "col": "2",
+    "col": "1",
-        "position": " top-0 left-[2%] "
+    "position": " top-0 left-[2%] ",
-    },
+    "width": "col-span-1"
-    {
+  },
-        "text": "Each team will be assigned a mentor.",
+  {
-        "number": "03",
+    "text": "Each team will be assigned a mentor.",
-        "col": "1",
+    "number": "03",
-        "position": "bottom-0"
+    "col": "1",
-    },
+    "position": "bottom-0"
-    {
+  },
-        "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",
+    "text": "At the end of the quarter, teams will showcase their project to judges including professors, industry experts, IEEE officers, and fellow participants",
-        "col": "3",
+    "number": "04",
-        "position": "bottom-0 right-[2%] "
+    "col": "2",
-    },
+    "position": "bottom-0 right-[2%] "
-    {
+  },
-        "text": "Winning teams will walk away with prizes!",
+  {
-        "number": "05",
+    "text": "Winning teams will walk away with prizes!",
-        "col": "2",
+    "number": "05",
-        "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: {
@@ -13,7 +14,7 @@ export default {
           "blue-100": "#88BFEC",
           "blue-300": "#233363",
         },
-        
+
         // Project Page Card colors
         project_card_bg: "#0d1324",
       },