complete index page

src/components/core/Navbar.astro

@@ -23,7 +23,7 @@ import pages from "../../data/pages.json";
                 pages.map((page) => (
                     <a
                         href={page.path}
-                        class={`uppercase rounded-full duration-300 px-[1.5vw] py-[0.2vw] text-[1.2vw]
+                        class={`uppercase rounded-full duration-300 px-[1.5vw] py-[0.2vw] text-[1.2vw] text-nowrap
                             ${
                                 page.name === "Online Store"
                                     ? "bg-ieee-yellow text-black hover:opacity-70"

src/components/core/Social.astro

@@ -8,7 +8,7 @@ import Link from "next/link";
 ---
 
 
-<div class="text-white flex flex-row md:flex-col items-center h-[65vh] justify-between">
+<div class="text-white flex flex-col items-center h-[65vh] justify-between">
     <div class="flex items-center text-[2.5vw]">
         <LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
         <p>

src/components/main_page/About.astro

@@ -0,0 +1,49 @@
+---
+import about from "../../../public/about.png";
+import Link from "next/link";
+import { LiaDotCircle } from "react-icons/lia";
+import { Image } from "astro:assets";
+import about2 from "../../../public/about2.png";
+---
+---
+
+<div class="flex border-white/40 border-[0.1vw] rounded-[2vw] h-[85vh] px-[10%] py-[3%] bg-gradient-to-t to-ieee-blue-100/30 via-ieee-black from-ieee-black">
+    <div class="w-1/2 flex justify-center pr-[5%] relative">
+        <div class="relative w-[35vw]">
+            <Image src={about} alt="About background image" />
+            <Image src={about2} alt="About image" class="absolute top-[5%] left-[14%] aspect-[399/491] object-cover w-[25vw] rounded-[2vw]" />
+        </div>
+        <Image src={about2} alt="About image" class="absolute aspect-square object-cover w-[7vw] rounded-[1vw] top-[15%] -left-[15%]" />
+        <Image src={about2} alt="About image" class="absolute aspect-[3/3.5] object-cover w-[10vw] rounded-[1.5vw] bottom-[3%] left-0" />
+        <div class="absolute w-[3vw] rounded-[1vw] bg-ieee-blue-300/60 aspect-square left-[2%] top-[50%]"/>
+        <div class="absolute w-[6vw] rounded-[1vw] bg-ieee-blue-100/40 aspect-square right-[15%] bottom-[4%]"/>
+        
+    </div>
+    <div class="w-1/2 text-white text-[1.3vw] font-light">
+        <p class="rounded-full border-[0.1vw] w-fit px-[3%] pb-[1%] text-[1.3vw] ml-[8%] mb-[6%] leading-none">
+            we are ...
+        </p>
+        <div class = "text-[2.7vw] flex items-center ml-[8%] font-semibold mb-[4%]">
+            <LiaDotCircle className = "mr-[1vw] pt-[0.5%]" />
+            <p>
+                About Us
+            </p>
+        </div>
+        <p class="pl-[8%] mb-[3%]">
+            A diverse engineering community seeking to empower students
+             through hands-on projects, networking opportunities, and 
+             social events. Bonus points on having an open-access project studio!
+        </p>
+        <p class="pl-[8%] border-l-[0.1vw] border-white/40 pb-[10%]">
+            The Institute of Electrical and Electronics Engineers (IEEE) 
+            UC San Diego student branch is the second largest student chapter
+             in the world's largest professional organization. On the student 
+             level, we provide members with a plethora of ways to get involved!
+        </p>
+        <div class="flex justify-end mt-[2%]">
+            <Link href="/join" className=" text-[1.1vw] font-extralight border-white/70 border-[0.1vw] py-[1%] px-[8%] rounded-[0.5vw] cursor-pointer hover:text-ieee-yellow hover:border-ieee-yellow duration-300">
+                LEARN MORE
+            </Link>
+        </div>
+    </div>
+</div>

src/components/main_page/Activities.astro

@@ -0,0 +1,29 @@
+---
+import Activity from "./Activity.astro";
+import activities from "../../data/activities.json"
+import { LiaDotCircle } from "react-icons/lia";
+---
+
+<div class="flex flex-col items-center h-[100vh] justify-between text-white my-[10vw]">
+    <div class="flex items-center text-[2.5vw]">
+        <LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
+        <p>
+            Events & Projects
+        </p>
+    </div>
+
+    <p class="w-1/3 text-center text-[1.2vw] pb-[5%]">
+        Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries f
+    </p>
+
+    <div class="flex justify-evenly w-[90%]">
+        {activities.map((activity) => (
+            <Activity 
+                title={activity.title} 
+                text={activity.text}
+                link={activity.link}
+                number={activity.number}
+            />
+        ))}
+    </div>
+</div>

src/components/main_page/Activity.astro

@@ -0,0 +1,23 @@
+---
+import Link from "next/link";
+import { IoIosArrowDroprightCircle } from "react-icons/io";
+const {  title, text, link, number  } = Astro.props;
+---
+
+<div class="relative text-white flex flex-col items-center w-[17vw] bg-gradient-to-b from-ieee-blue-100/40 to-ieee-black h-[63vh] border-[0.1vw] border-white/40 rounded-[2vw] pt-[5%] pb-[3%]">
+    <div class="rounded-full aspect-square w-[5.5vw] absolute bg-gradient-to-b from-ieee-blue-100 to-ieee-blue-300 -top-[10%] shadow-xl shadow-ieee-blue-300"/>
+    <p class="text-[1.7vw] font-bold text-center">
+        {title}
+    </p>
+    <p class="text-[1.2vw] w-4/5 mt-[15%] mb-[25%]">
+        {text}
+    </p>
+
+    <Link href={link} className="flex items-center text-[1.2vw] mb-[3%] absolute bottom-[22%]">
+        more details
+        <IoIosArrowDroprightCircle className="ml-[0.5vw] text-[1.4vw]"/>
+    </Link>
+    <p class="text-[3.7vw] font-bold text-ieee-blue-300/50 absolute bottom-[5%]">
+        {number}
+    </p>
+</div>

src/data/activities.json

@@ -0,0 +1,26 @@
+[
+    {
+        "title": "Quarterly Project",
+        "text": "Lorem ipsum is placeholder text commonly used in the graphic, print, and publi",
+        "link": "/quarterly",
+        "number": "01"
+    },
+    {
+        "title": "Annual Project",
+        "text": "Lorem ipsum is placeholder text commonly used in the graphic, print, and publi",
+        "link": "/projects",
+        "number": "02"
+    },
+    {
+        "title": "Social",
+        "text": "Lorem ipsum is placeholder text commonly used in the graphic, print, and publi",
+        "link": "/events",
+        "number": "03"
+    },
+    {
+        "title": "Professional Development",
+        "text": "Lorem ipsum is placeholder text commonly used in the graphic, print, and publi",
+        "link": "/events",
+        "number": "04"
+    }
+]

src/pages/index.astro

@@ -3,10 +3,14 @@ import Layout from "../layouts/Layout.astro";
 import Landing from "../components/main_page/Landing.astro";
 import Divider from "../components/main_page/Divider.astro";
 import Social from "../components/core/Social.astro";
+import About from "../components/main_page/About.astro";
+import Activities from "../components/main_page/Activities.astro";
 ---
 
 <Layout>
     <Landing />
     <Divider />
+    <About />
+    <Activities/>
     <Social />
 </Layout>

src/pages/projects.astro

@@ -0,0 +1,7 @@
+---
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout>
+    Projects
+</Layout>

src/pages/quarterly.astro

@@ -0,0 +1,7 @@
+---
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout>
+    QP
+</Layout>

src/pages/robocup.astro

@@ -0,0 +1,7 @@
+---
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout>
+    QP
+</Layout>

src/pages/signal.astro

@@ -0,0 +1,7 @@
+---
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout>
+    QP
+</Layout>