Merge pull request #51 from erland-syafiq/about-changes

Temporary About and Letter Changes

site/app/about/AboutUs.css

@@ -1,62 +1,100 @@
-/* About Team Section */
-section.aboutTeam {
-    height: calc(100vh - 61px);
-    padding-top: 80px;
-    padding-bottom: 80px;
+/* About Section */
+
+.aboutTitle {   
+    text-align: center;
+    margin-bottom: 20px;
+    margin-top: 40px;
+    background-color: #CF4420;
+    color: white;
+    padding: 20px;
+    margin-left: -40%;
+    /* background: #007bff !important;  */
+} 
+
+.aboutImg {
+    margin-top: 20px;
+    height: auto;
+    width: 100%;
+    /* padding: 20px; */
+    border-bottom: 20px solid #DEBB8F;
+    position: relative;
+}
+
+
+.imageLine {
+    margin-top: 30px;
+    margin-bottom: 30px;
+    border-top: 1px solid #000;
+    width: 100%; 
+}
+
+
+.secretariatTitle {
+    position: relative;
+    display: inline-block;
+    padding-bottom: 10px;
+    /* margin-top: px; */
 }
 
-.teamTitle {
+
+.aboutCard1 {
+    padding: 20px;
+    margin: 10px;
+    border: solid var(--tertiary);
+    border-width: 5px;
+    background: var(--quintary);
+    align-content: center;
     text-align: center;
-    margin-top: 110px;
-    margin-bottom: 40px;
-    padding-right: 160px;
+    height: 300px;
 }
 
-.teamDescription {
-    text-align: justify;
-    text-justify: inter-word;
-    padding: 40px;
-    background-color: #F2F1E8;
-    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
-    z-index: 0;
+.aboutCard2 {
+    padding: 20px;
+    margin: 10px;
+    border: solid var(--tertiary);
+    border-width: 5px;
+    background: var(--quadrary);
+    align-content: center;
+    text-align: center;
+    height: 300px;
 }
 
-.teamDescriptionClm {
-    z-index: 2;
+
+.aboutCard3 {
+    padding: 20px;
+    margin: 10px;
+    border: solid var(--tertiary);
+    border-width: 5px;
+    background: var(--sextary);
+    align-content: center;
+    text-align: center;
+    height: 300px;
 }
 
-.teamImageHighlight {
-    background: #3A506B;
-    box-shadow: -160px 0px 0px #3A506B, 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
-    padding-right: 40px;
-    padding-left: 20px;
-    width: 100%;
-    height: 90%;
+.white-text {
+    color: #ffffff; /* or simply `color: white` */
 }
 
-.teamImgClm {
-    z-index: 1;
+.no-hover-effect:hover {
+    text-decoration: none;
+    color: #ffffff; 
 }
 
-.columnMaroon {
-    position: absolute;
-    left: 72.36%;
-    right: 23.5%;
-    top: 61px;
-    background: #630031;
-    height: calc(100vh - 61px);
-    z-index: 1;
+.aboutBlueBackground {
+    background: var(--quadrary); 
+    padding: 20px;
 }
 
-.teamBackground {
-    position: absolute;
-    width: 100%;
-    left: 0;
-    top: 61px;
-    background: url("/Images/About1.jpg");
-    height: calc(100vh - 61px);
-    background-repeat: no-repeat;
-    background-size: cover;
-    z-index: 0;
+.blue-bg {
+    background-color: var(--quadrary) !important;
+    padding-top: 10px;   
+    padding-bottom: 100px;
+}
+
+.blue-bg > h1 {
+    color: white;
 }
 
+.aboutCard > h2 {
+    color: white;
+}

site/app/about/blacksburg/Blacksburg.css

@@ -0,0 +1,16 @@
+.blacksburgTitle {
+    margin-top: 30px;
+    margin-bottom: 50px;
+    color: #630031;
+}
+
+.whyImg {
+    height: auto;
+    width: 100%;
+    margin: 20px;
+    position: relative;
+}
+
+.whyParagraph {
+    margin: 20px;
+}

site/app/about/blacksburg/page.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import './Blacksburg.css';
+
+export default function AboutBlacksburg() {
+    return (
+        <main className="container">
+        <div className='row justify-content-center'>
+                <h1 className="blacksburgTitle">Virginia Tech and Blacksburg</h1>
+        </div>  
+        <div className='row'>
+            <div className='col-md-12'>
+                <p className='whyParagraph'>
+                Founded in 1872, Virginia Tech is housed in Blacksburg, Virginia, a town nestled in the heart of the picturesque Blue Ridge Mountains. As a school built on eight different core values, our students hold dear the ideas of brotherhood, honor, leadership, sacrifice, service, loyalty, duty, and “Ut Prosim” (That I May Serve). Our university’s academics are held in high regard, boasting a challenging and rewarding experience, but all students are brought together by one unique feeling: the spirit of a “Hokie.” <br/> <br/>
+                Whether you’re walking down University City Boulevard or cruising through the Residential Quad, our Hokie spirit radiates from the walkways, the students, the buildings, and the overall atmosphere. We are Hokie Nation, home of the Hokies. As you spend a weekend with us, we ask that you embody what it means to be a Hokie and explore the finest Blacksburg has to offer. <br/> <br/>
+                That’s because Blacksburg isn't just a college town; it's an adventurer's paradise. Lace up your hiking boots and explore the cascading beauty of Pandapas Pond. Feeling more adventurous? Kayak down the historic New River, a thrilling journey through breathtaking landscapes. The Town of Blacksburg's story unfolds on its charming streets. Stroll through the carefully preserved areas listed on the National Register of Historic Places. History buffs can delve deeper at the Virginia Tech Heritage Center, where local stories come alive. Art lovers can visit the Moss Arts Center and appreciate the exhibits and productions that visit Blacksburg. You can enjoy delicious treats from our dining halls or experience the treat of local businesses of Blacksburg. <br/> <br/>
+                When you are not in committee session, try the delicious eats at Boardwalk or Benny’s or simply explore what our campus has to offer like the Hahn Horticulture Garden. Regarded as one of the most beautiful universities in the United States, the town of Blacksburg is safe and accessible to different modes of transportation! With the Roanoke-Blacksburg Regional Airport, Amtrak station in nearby Roanoke, and Smart Way buses, it is safe and easy to reach Virginia Tech. With the Blacksburg Transit (BT) bus system, hotels and stations are conveniently and freely connected to Hokie Nation. <br/> <br/>
+                As you call Hokie Nation your home for the weekend, we know you will discover your inner Hokie spirit and be eager to come back for more. <br/> <br/>
+
+                </p>
+            </div>
+            {/* <div className='col-md-4'>
+                <img className="whyImg" src={"/Images/AboutUsGroupPhoto2.jpg"} />
+            </div> */}
+
+        </div>
+    </main>          
+    )
+}

site/app/about/page.jsx

@@ -11,10 +11,51 @@ export const metadata = {
 async function AboutUs() {
     const secretariat = await fetchStaticJSON("/app/data/secretariat.json");
 
-
     return (
-        <main className="container">
-            <section className="mt-3">
+        <main className="">
+
+            <div className='row justify-content-center'>
+                    <h1 className="aboutTitle">About Us</h1>
+            </div>
+
+            <img className="aboutImg" src={"/Images/AboutUsGroupPhoto2.JPG"} />
+
+
+            <section className= "container mt-3">
+                <div className="row justify-content-center">
+                    <div className='col-10'>
+                        <div className="imageLine"></div>
+                    </div>
+                </div>
+                <div className='row'>
+                    <div className='col-md-4'>
+                        <a href='about/vtmunc' className='no-hover-effect'>
+                            <div className='aboutCard1'>
+                                <h2 className="white-text">Why VTMUNC?</h2>
+                            </div>
+                        </a>
+                    </div>                    
+                    <div className='col-md-4'>
+                        <a href='about/vtmun' className='no-hover-effect'>
+                            <div className='aboutCard2'>
+                                <h2 className="white-text">Virginia Tech Model UN</h2>
+                            </div>
+                        </a>
+                    </div>
+                    <div className='col-md-4'>
+                        <a href='about/blacksburg' className='no-hover-effect'>
+                            <div className='aboutCard3'>                            
+                                <h2 className="white-text">Virginia Tech & Blacksburg</h2>
+                            </div>
+                        </a>
+                    </div>
+
+                </div>
+                <div className="row justify-content-center">
+                    <div className='col-10'>
+                        <div className="imageLine"></div>
+                    </div>
+                </div>
                 <div className="row">
                     <div className="col-12 text-center">
                         <h2 className="text-nowrap secretariatTitle">Secretariat</h2>
@@ -23,7 +64,7 @@ async function AboutUs() {
                 <div className="row">
                     {
                     secretariat.map(({name, position, bio, email, image}, index) => 
-                         <UserCard colWidth={4} key={index} name={name} position={position} bio={bio} email={email} imagePath={"/Images/secretariat/" + image}/>
+                        <UserCard colWidth={4} key={index} name={name} position={position} bio={bio} email={email} imagePath={"/Images/secretariat/" + image}/>
                     )}
                 </div>
             </section>

site/app/about/vtmun/Vtmun.css

@@ -0,0 +1,16 @@
+.vtmunTitle {
+    margin-top: 30px;
+    margin-bottom: 50px;
+    color: #630031;
+}
+
+.whyImg {
+    height: auto;
+    width: 100%;
+    margin: 20px;
+    position: relative;
+}
+
+.whyParagraph {
+    margin: 20px;
+}

site/app/about/vtmun/page.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import './Vtmun.css';
+
+export default function AboutVtmun() {
+    return (
+        <main className="container">
+            <div className='row justify-content-center'>
+                <h1 className="vtmunTitle">VTMUN</h1>
+            </div>  
+
+            <div className='row'>
+            <div className='col-md-8'>
+                <p className='whyParagraph'>
+                Model United Nations at Virginia Tech is the premier international relations and diplomacy-based organization at Virginia Tech, dedicated to increasing interest in topics related to the United Nations and debate on both contemporary and historical global issues. The organization is split between three branches:  MUN@VT, our competitive collegiate travel team, VTMUNC, our conference for high school students, and BIRDMUNC, our conference for college students. <br/> <br/>
+                Founded at the height of the pandemic in 2020 as the oldest branch of the organization, MUN@VT was started in an effort to help Virginia Tech students develop their skills in all things international relations, problem-solving, and public speaking through debate. Placing a focus on diplomacy and finding consensus regardless of opposing viewpoints, MUN@VT has swiftly risen to become one of the most elite collegiate MUN teams in North America, having placed in the top 30 twice in the last 2 years, ranking as high as 25th. In its short four years, MUN@VT has established itself as a powerhouse MUN school within the Southern collegiate circuit, and a strong competitor on the National circuit. Despite Virginia Tech’s natural association with our engineering program, MUN@VT highlights the strength of the school’s liberal arts program and its commitment to increasing its reputation. <br/> <br/>
+                VTMUNC and BIRDMUNC represent our student-run efforts to grow interest in diplomacy and global policy for the next generation of diplomats and policymakers. These conferences provide a supportive environment for high schoolers and college students respectively to explore the world of international affairs and diplomacy, emphasizing creative problem-solving, collaboration, and a sense of diplomacy from our delegates. 
+                </p>
+            </div>
+            <div className='col-md-4'>
+                <img className="whyImg" src={"/../Images/hokiebird.png"} />
+            </div>
+
+            </div>
+        </main>        
+    )
+}

site/app/about/vtmunc/Vtmunc.css

@@ -0,0 +1,16 @@
+.vtmuncTitle {
+    margin-top: 30px;
+    margin-bottom: 50px;
+    color: #630031;
+}
+
+.whyImg {
+    height: auto;
+    width: 100%;
+    margin: 20px;
+    position: relative;
+}
+
+.whyParagraph {
+    margin: 20px;
+}

site/app/about/vtmunc/page.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import './Vtmunc.css';
+
+export default function AboutVtmunc() {
+    return (
+        <main className="container">
+            <div className='row justify-content-center'>
+                    <h1 className="vtmuncTitle">Why VTMUNC?</h1>
+            </div>  
+            <div className='row'>
+                <div className='col-md-5'>
+                    <p className='whyParagraph'>As students of Virginia Polytechnic Institute and State University (otherwise known as Virginia Tech), we are bound by Virginia Tech’s motto, “Ut Prosim” (That I May Serve). Our conference, Virginia Tech Model United Nations Conference (VTMUNC), is an extension of that very motto, where we serve our delegates with the opportunity to understand what it means to serve those around them. Working diligently to help foster an experience that facilitates rigorous debate, reflection, and open-mindedness, we are committed to cultivating a community of young globally conscious leaders who understand the values of ally-ship and service. Through the conference, we will give our young delegates a chance to understand and address the complex challenges that we face in our world today, equipping them with the skills to be a true leader.
+                    </p>
+                </div>
+                <div className='col-md-7'>
+                    <img className="whyImg" src={"/../Images/AboutUsGroupPhoto2.JPG"} />
+                </div>
+
+            </div>
+        </main>        
+    )
+}

site/app/globals.css

@@ -4,4 +4,7 @@
     --primary-background: #EFE9E7;
     --secondary-background: #F2F1E8;
     --tertiary: #DEBB8F;
+    --quadrary: #3A506B;
+    --quintary: #CF4420;
+    --sextary: #290014;
 }

site/app/letter/Letter.css

@@ -0,0 +1,16 @@
+.letterHeader {
+    margin-top: 40px;
+    margin-bottom: 40px;
+    color: #630031;
+}
+
+.gold-column {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 10vw;
+    height: 100vmax;
+    background-color: var(--tertiary);
+    border-left: 5px solid var(--sextary);
+    z-index: -1;
+  }