fix styles

acm-ucr · Nov 11, 2023 · f6955b5 · f6955b5
1 parent 468fcf4
commit f6955b5
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 50 deletions.
diff --git a/src/app/page.js b/src/app/page.js
@@ -1,7 +1,7 @@
 import About from "@/components/home/About";
 import Landing from "@/components/home/Landing";
 import Projects from "@/components/home/Projects";
-import WhyJoin from "@/components/home/Contacts";
+import WhyJoin from "@/components/home/WhyJoin";
 import Events from "@/components/home/Events";
 import Join from "@/components/home/Join";
 const Home = () => {

diff --git a/src/app/projects/air-quality-system/page.js b/src/app/projects/air-quality-system/page.js
@@ -1,8 +1,11 @@
-import React from "react";
 import AirQuality from "@/components/projects/ AirQuality";
+import Header from "@/components/projects/Header";
+import header from "../../../../public/images/airQualitySystem/AirQualitySystemHeader.webp";
+
 const page = () => {
   return (
     <>
+      <Header img={header.src} title="Air Quality System" />
       <AirQuality />
     </>
   );

diff --git a/src/components/Subtitle.jsx b/src/components/Subtitle.jsx
@@ -3,9 +3,11 @@ const Subtitle = ({ title, description }) => {
     <div>
       <div className="flex items-center gap-1">
         <div className="bg-ewb-green h-5 w-1" />
-        <div className="text-ewb-blue-200 text-2xl font-bold">{title}</div>
+        <div className="text-ewb-blue-200 text-xl md:text-2xl font-bold">
+          {title}
+        </div>
       </div>
-      <div className="text-ewb-green font-semibold text-lg ml-2">
+      <div className="text-ewb-green font-semibold text-sm md:text-lg ml-2">
         {description}
       </div>
     </div>

diff --git a/src/components/Title.jsx b/src/components/Title.jsx
@@ -4,17 +4,17 @@ const Title = ({ subTitle, title }) => {
   return (
     <div className="flex flex-col justify-center items-center">
       <p className={COLORS.green.text + " font-semibold mb-0"}>{subTitle}</p>
-      <p className="mt-0 font-bold text-3xl">
+      <p className="mt-0 font-bold text-2xl md:text-3xl">
         <span
           className={
             COLORS.blue.bg +
-            " text-white underline underline-offset-[14px] decoration-ewb-green decoration-8"
+            " text-white underline underline-offset-[14px] decoration-ewb-green decoration-8 px-1 mr-1"
           }
         >
           {titleWords[0]}
         </span>
         <span className={COLORS.blue.text}>
-          {" " + titleWords.slice(1).join(" ")}
+          {titleWords.slice(1).join(" ")}
         </span>
       </p>
     </div>

diff --git a/src/components/home/Contacts.jsx b/src/components/home/Contacts.jsx
diff --git a/src/components/home/Landing.jsx b/src/components/home/Landing.jsx
@@ -1,15 +1,16 @@
-import React from "react";
+import landing from "../../../public/images/landing.webp";
+
 const Landing = () => {
   return (
-    <div className="relative flex items-center justify-center h-1/6 w-3/6">
+    <div className="relative flex items-center justify-center w-full">
       <img
-        src={"images/landing.webp"}
+        src={landing.src}
         alt="landing img"
-        className="w-full object-cover aspect-[32/9] "
+        className="w-full object-cover aspect-[16/5] "
       />
-      <div className=" start-20 absolute flex-row ">
-        <div className="text-2xl text-white">Engineers Without Borders USA</div>
-        <div className="text-base text-white">
+      <div className="left-[10%] absolute border-l-4 border-ewb-green pl-2">
+        <div className="text-5xl text-white">Engineers Without Borders USA</div>
+        <div className="text-2xl font-thin text-white">
           at University of California - Riverside
         </div>
       </div>

diff --git a/src/components/home/WhyJoin.jsx b/src/components/home/WhyJoin.jsx
@@ -0,0 +1,5 @@
+const WhyJoin = () => {
+  return <div>WhyJoin</div>;
+};
+
+export default WhyJoin;
diff --git a/src/components/projects/ AirQuality.jsx b/src/components/projects/ AirQuality.jsx
@@ -1,11 +1,14 @@
-import React from "react";
 import Subtitle from "../Subtitle";
+import img1 from "../../../public/images/airQualitySystem/AirQualitySystem1.webp";
+import img2 from "../../../public/images/airQualitySystem/AirQualitySystem2.webp";
+import img3 from "../../../public/images/airQualitySystem/AirQualitySystem3.gif";
+
 const AirQuality = () => {
   return (
-    <div className="grid grid-cols-3 gap-10 m-28 justify-around ">
-      <div className="col-span-2 pb-4 w-5/6 ">
-        <Subtitle title="General Overview"></Subtitle>
-        <p className="ml-2 mt-1">
+    <div className="grid grid-cols-3 gap-10 my-16 justify-around w-10/12 md:w-9/12">
+      <div className="col-span-3 md:col-span-2 justify-center flex flex-col">
+        <Subtitle title="General Overview" />
+        <p className="mt-1 text-justify">
           Air quality has overtime deteriorated due to developing countries
           industrialization. This has in turn put the health of population in
           risk of respiratory disorders, cardiovascular diseases and
@@ -16,15 +19,13 @@ const AirQuality = () => {
           the air.
         </p>
       </div>
-      <div>
-        <img
-          src="/images/airQualitySystem/AirQualitySystem1.webp "
-          alt="Air Quality System 1"
-        />
-      </div>
-
-      <div className="col-span-2 col-start-0 bg-white mb-2 w-5/6 ">
-        <Subtitle title="Motivation"></Subtitle>
+      <img
+        src={img1.src}
+        alt="Air Quality System 1"
+        className="col-span-3 md:col-span-1"
+      />
+      <div className="col-span-3 md:col-span-2 justify-center flex flex-col">
+        <Subtitle title="Motivation" />
         <ul
           className="marker:text-ewb-blue-200 ml-4"
           style={{ listStyleType: "square" }}
@@ -43,15 +44,14 @@ const AirQuality = () => {
           </li>
         </ul>
       </div>
-      <div>
-        <img
-          src="/images/airQualitySystem/AirQualitySystem2.webp"
-          alt="Air Quality System 2"
-        />
-      </div>
+      <img
+        src={img2.src}
+        alt="Air Quality System 2"
+        className="col-span-3 md:col-span-1"
+      />
 
-      <div className="col-span-2 col-start-1 bg-white mb-2 w-5/6 ">
-        <Subtitle title="Micro Controller"></Subtitle>
+      <div className="col-span-3 md:col-span-2 justify-center flex flex-col">
+        <Subtitle title="Micro Controller" />
         <ul
           className="marker:text-ewb-blue-200 ml-4"
           style={{ listStyleType: "square" }}
@@ -70,12 +70,11 @@ const AirQuality = () => {
           </li>
         </ul>
       </div>
-      <div>
-        <img
-          src="/images/airQualitySystem/AirQualitySystem3.gif"
-          alt="Air Quality System 3"
-        />
-      </div>
+      <img
+        src={img3.src}
+        alt="Air Quality System 3"
+        className="col-span-3 md:col-span-1"
+      />
     </div>
   );
 };

diff --git a/src/components/projects/Header.jsx b/src/components/projects/Header.jsx
@@ -2,10 +2,14 @@ import Title from "../Title";
 
 const Header = ({ img, title }) => {
   return (
-    <div className="w-full">
-      <img src={img} alt="Image" className="mb-3 w-full object-cover" />
+    <>
+      <img
+        src={img}
+        alt="Image"
+        className="mb-5 w-full object-cover aspect-[16/5]"
+      />
       <Title subTitle="" title={title} />
-    </div>
+    </>
   );
 };