Merge pull request #45 from acm-ucr/carlahauu/light-mode-landing-grap…

…hics-text Added light mode graphics and changed text color for light mode
acm-ucr · Nov 4, 2024 · 6e60d4b · 6e60d4b
2 parents 391d094 + 0376ad7
commit 6e60d4b
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git a/public/landing/lightLandingTrain.webp b/public/landing/lightLandingTrain.webp
diff --git a/public/landing/lightRectangle35.webp b/public/landing/lightRectangle35.webp
diff --git a/src/components/home/Landing.tsx b/src/components/home/Landing.tsx
@@ -1,13 +1,15 @@
 import Image from "next/image";
 import train from "/public/landing/landingpagetrain.webp";
+import lightTrain from "/public/landing/lightLandingTrain.webp";
+import lightRectangle35 from "/public/landing/lightRectangle35.webp";
 import path from "/public/landing/landingpagetrainpath.webp";
 import rectangle35 from "/public/landing/Rectangle35.webp";
 import rectangle36 from "/public/landing/Rectangle36.webp";
 import rectangle37 from "/public/landing/Rectangle37.webp";
 import ellipse13 from "/public/landing/Ellipse13.webp";
 const Landing = () => {
   return (
-    <div className="flex h-screen w-screen flex-col bg-gradient-to-t from-blue-700 to-blue-950">
+    <div className="flex h-screen w-screen flex-col bg-gradient-to-t from-sky-100 to-sky-600 dark:from-blue-700 dark:to-blue-950">
       <div>
         <div className="h-1/8 flex flex-row justify-between p-4">
           <div className="ml-4 h-8 w-24 bg-gray-300 text-center">
@@ -34,7 +36,7 @@ const Landing = () => {
               src={rectangle37}
               alt=""
             />
-            <p className="font-sans-serif w-full text-[4vw] text-yellow-300">
+            <p className="font-sans-serif w-full text-[4vw] text-blue-950 dark:text-yellow-300">
               DEVELOPER STATION
             </p>
           </div>
@@ -47,8 +49,22 @@ const Landing = () => {
         <Image className="absolute top-8 h-full w-full" src={train} alt="" />
       </div>
 
+      <div className="relative h-1/2 dark:hidden">
+        <Image
+          className="absolute h-3/4 w-full"
+          src={lightRectangle35}
+          alt=""
+        />
+        <Image className="relative top-48 h-5/6 w-full" src={path} alt="" />
+        <Image
+          className="absolute top-8 h-full w-full"
+          src={lightTrain}
+          alt=""
+        />
+      </div>
+
       <div className="flex h-1/4 flex-row pb-12">
-        <p className="ml-11 w-1/4 text-lg text-white">
+        <p className="ml-11 w-1/4 text-lg text-blue-950 dark:text-white">
           Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem
           Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
           Lorem Ipsum