changes.

frontend/src/app/ExcitingStuff.tsx

@@ -0,0 +1,19 @@
+import Image from 'next/image';
+
+export default function ExcitingStuff({ title, text, imagePath }: { title: string; text: string; imagePath: string }) {
+    return (
+        <div className="flex flex-col items-center justify-center w-full h-screen bg-gray-200">
+            <h1 className="text-4xl font-bold">{title}</h1>
+            <p className="text-lg">{text}</p>
+            <div className="relative w-64 h-64">
+                <Image 
+                    src={imagePath} 
+                    layout="fill" 
+                    objectFit="cover" 
+                    alt={title} 
+                />
+            </div>
+        </div>
+    );
+}
+

frontend/src/app/Intro.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import Image from 'next/image';
+
+export default function Intro() {
+    return (
+        <div className="flex flex-col md:flex-row w-full md:h-fit flex-wrap">
+            {/* Title Section */}
+            <div className='flex flex-col md:flex-row w-full md:w-[40%] my-10 text-7xl gap-[-5px] items-center'>
+                <div className='flex flex-col items-center w-full md:w-fit'>
+                    <div className='md:ml-20'>
+                        <p className="shrink text-center md:text-left text-lang-orange">Langara</p>
+                        <p className="shrink text-center md:text-left">Computer</p>
+                        <p className="shrink text-center md:text-left">Science Club</p>
+                    </div>
+                </div>
+            </div>
+
+            {/* Image Section */}
+            <div className='hidden lg:flex flex-col items-center sm:w-max md:w-[60%]'>
+                <Image 
+                    src="/code_snippet.png" 
+                    width={697} 
+                    height={550} 
+                    alt="Join the Langara Computer Science Club" 
+                    className="w-max md:max-w-[550px] lg:w-[999px] h-max object-cover" 
+                />
+            </div>
+        </div>
+    );
+}
+

frontend/src/app/about/ExecProfiles.tsx

@@ -56,7 +56,7 @@ export default async function ExecProfiles() {
       {Object.keys(groupedCurrentExecutives).map(year => (
         <div key={year} className="flex-row gap-5">
           {/* <h2 className="text-2xl font-semibold pb-5">Current Executives</h2> */}
-          <div className=" flex flex-wrap flex-row gap-5">
+          <div className=" flex flex-wrap flex-row gap-5 justify-center">
             {groupedCurrentExecutives[year].map((exec) => (
               <ExecProfile
                 key={exec.student_id}
@@ -79,7 +79,7 @@ export default async function ExecProfiles() {
       {sortedRetiredYears.map(year => (
         <div key={year} className="mt-10">
           <h2 className="text-2xl font-semibold pb-5">Retired Executives - {year}</h2>
-          <div className="flex flex-wrap flex-row gap-5">
+          <div className="flex flex-wrap flex-row gap-5 justify-center">
             {groupedRetiredExecutives[year].map((exec) => (
               <ExecProfile
                 key={exec.student_id}

frontend/src/app/about/ProfileModal.tsx

@@ -20,7 +20,7 @@ interface ProfileModalProps {
 export default function ProfileModal({Name, Position, ImageBuffer, Description, imageWidth}: ProfileModalProps) {
     return (
         // TODO: FIX modal description text doesn't scroll
-        <Dialog.Content className="relative max-w-[90vw] md:max-w-[60vw] max-h-[90vh] md:max-h-[60vh] overflow-y-scroll p-5">
+        <Dialog.Content className="relative max-w-[90vw] md:max-w-[80vw] max-h-[90vh] md:max-h-[70vh] overflow-y-scroll p-5">
             <VisuallyHidden>
                 <DialogTitle>{Name}</DialogTitle>
             </VisuallyHidden>
@@ -42,7 +42,7 @@ export default function ProfileModal({Name, Position, ImageBuffer, Description,
                 </div> 
 
                 {/* Description Section */}
-                <div className="flex flex-col flex-1">
+                <div className="flex flex-col flex-1 w-[30vw]">
                     <h3 className="font-bold text-lg mb-2  min-w-36">Description</h3>
                     <p className="text-white">{Description}</p>
                 </div>

frontend/src/app/layout.tsx

@@ -15,6 +15,7 @@ export default function RootLayout({
   return (
     <html lang="en">
         <head>
+          <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
           <PlausibleProvider domain="langaracs.ca" customDomain='https://plausible.langaracs.ca' trackOutboundLinks selfHosted/>
         </head>
         <body> 

frontend/src/app/page.tsx

@@ -1,19 +1,74 @@
 "use client";
 
 import Footer from './shared_components/footer/Footer';
-import HomePage from './HomePage';
+import Intro from './Intro';
 import NavBar from './shared_components/header/NavBar';
+import ExcitingStuff from './ExcitingStuff';
+import Link from 'next/link';
 
 export default function Home() {
 
     return (
-        <div className='h-screen w-full bg-body-gray'>
-            <main className="grid grid-rows-[10vh_1fr] dark max-[600px]:grid-rows-[20vh_1fr] h-full w-full overflow-y-visible overflow-x-hidden">
-                <NavBar />
-                <HomePage />
-                <Footer />
-            </main>
-        </div>
+        <main className="flex flex-col h-screen w-full bg-body-gray overflow-y-visible overflow-x-hidden">
+            <NavBar />
+            <div className="flex flex-col gap-5 my-5">
+                <Intro />
+
+                {/* TODO: create a component that shows upcoming events here. */}
+
+
+                <div className="p-[20px] py-5 flex flex-col gap-10 pt-10">
+
+                    <div className='w-full border-white border-2 p-5 rounded-md'>
+                        <p className="text-2xl font-semibold    ">JOIN OUR DISCORD & INSTAGRAM!</p>
+                        <p className='text-xl'>Join over 1500 members on our discord server to get updated about events, talk about courses, and meet new people! Events and other initiatives are also posted to our instagram account!</p>
+                        <div className="w-full flex justify-center gap-4 pt-5">
+                            <Link href="https://discord.gg/langara-computer-science-club-753037165050593300" target="_blank" className="w-1/2">
+                                <p className="w-full border-white bg-lang-orange font-semibold hover:bg-lang-orange rounded p-2 text-center">DISCORD</p>
+                            </Link>
+                            <Link href="https://www.instagram.com/langaracpsc/" target="_blank" className="w-1/2">
+                                <p className="w-full border-white bg-lang-orange font-semibold hover:bg-lang-orange rounded p-2 text-center">INSTAGRAM</p>
+                            </Link>
+                        </div>
+                    </div>
+
+
+                    <div className='w-full border-white border-2 p-5 rounded-md flex flex-col gap-4'>
+                        <p className="text-2xl font-semibold    ">Langara Hacks 2024</p>
+                        <p className='text-xl'>Langara Hacks is our annual hackathon that is held in September of each year in person at Langara College. We welcome participants from all skill levels to attend, and last year we welcomed over a hundred participants from schools all over BC. You can find more information at the hackathon website: </p>
+                        <Link href="https://lhacks.langaracs.ca" target="_blank">
+                            <p className="w-fit px-5 border-white bg-lang-orange font-semibold hover:bg-lang-orange rounded p-2 text-center">Langara Hacks 2024</p>
+                        </Link>
+                    </div>
+
+                    <div className='w-full border-white border-2 p-5 rounded-md flex flex-col gap-4'>
+                        <p className="text-2xl font-semibold    ">Langara + CTF</p>
+                        <p className='text-xl'>Stay tuned for updates on a new Capture The Flag team at Langara! All skill levels are welcome, but creative thinking and problem solving skills are a must. Stay tuned for updates in Spring 2025.</p>
+                        {/* ADD LINK TO DISCORD SERVER HERE WHEN SPRING 2025 IS HERE */}
+                        {/* <Link href="https://lhacks.langaracs.ca" target="_blank">
+                            <p className="w-fit px-5 border-white bg-lang-orange font-semibold hover:bg-lang-orange rounded p-2 text-center">Discord Server</p>
+                        </Link> */}
+                    </div>
+
+                    <div className='w-full border-white border-2 p-5 rounded-md flex flex-col gap-4'>
+                        <p className="text-2xl font-semibold    ">Build Nights</p>
+                        <p className='text-xl'>Build Nights are a weekly meetup where we will help you to build a project! If you want to learn some practical skills and create something worth much more than a grade, join our coworking sessions with (optional) demos at the end. We have experienced mentors who can help you decide what to work on, and what tools you should learn to get there. Stay tuned for meetup times for Spring 2025.</p>
+                    </div>
+
+                    <div className='w-full border-white border-2 p-5 rounded-md flex flex-col gap-4'>
+                        <p className="text-2xl font-semibold    ">Executive Hiring</p>
+                        <p className='text-xl'>Information on new executive positions will be released in January 2025. If you are interested in becoming an executive, come chat with a club executive beforehand at Clubs Day or any of our other events.</p>
+                        {/* <Link href="https://lhacks.langaracs.ca" target="_blank">
+                            <p className="w-fit px-5 border-white bg-lang-orange font-semibold hover:bg-lang-orange rounded p-2 text-center">Hiring Package</p>
+                        </Link> */}
+                    </div>
+
+                </div>
+
+
+            </div>
+            <Footer />
+        </main>
     );
 }