Merge pull request #41 from acm-ucr/d-leeee/CombineComponents

Combine ProjectCard to Layout using grid
acm-ucr · Nov 3, 2024 · 391d094 · 391d094
2 parents dbfbe3c + 7d20c68
commit 391d094
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 72 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,61 +1,12 @@
-import Image from "next/image";
-import train from "/public/landing/landingpagetrain.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";
-
+import Landing from "@/components/home/Landing";
+import About from "@/components/home/about";
+import Projects from "@/components/home/Projects";
 const Home = () => {
   return (
-    <div className="flex h-screen w-screen flex-col bg-gradient-to-t from-blue-700 to-blue-950">
-      <div className="">
-        <div className="h-1/8 flex flex-row justify-between p-4">
-          <div className="h-8 w-8 rounded-full bg-gray-300"></div>
-          <div className="ml-4 h-8 w-24 bg-gray-300 text-center">
-            <p className="bg-gray-300 p-2">LOGO</p>
-          </div>
-          <div className="flex flex-row space-x-2">
-            <div className="h-8 w-8 rounded-full bg-gray-300"></div>
-            <div className="h-8 w-8 rounded-full bg-gray-300"></div>
-            <div className="h-8 w-8 rounded-full bg-gray-300"></div>
-            <div className="h-8 w-8 rounded-full bg-gray-300"></div>
-          </div>
-        </div>
-
-        <div className="h-1/8 relative flex w-full flex-col space-y-4 pt-8">
-          <Image
-            className="relative ml-4 h-1/6 w-1/6"
-            src={rectangle36}
-            alt=""
-          />
-          <Image className="absolute h-full w-1/4" src={ellipse13} alt="" />
-          <div className="bottom-4 flex h-full w-full flex-row">
-            <Image
-              className="relative ml-40 mr-12 h-1/5 w-1/2"
-              src={rectangle37}
-              alt=""
-            />
-            <p className="font-sans-serif w-full text-[4vw] text-yellow-300">
-              DEVELOPER STATION
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <div className="relative h-1/2">
-        <Image className="absolute h-3/4 w-full" src={rectangle35} alt="" />
-        <Image className="relative top-48 h-5/6 w-full" src={path} alt="" />
-        <Image className="absolute top-8 h-full w-full" src={train} alt="" />
-      </div>
-
-      <div className="flex h-1/4 flex-row pb-12">
-        <p className="ml-11 w-1/4 font-malayalam text-lg 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
-        </p>
-      </div>
+    <div>
+      <Landing />
+      <About />
+      <Projects />
     </div>
   );
 };

diff --git a/src/components/course/layout.tsx b/src/components/course/layout.tsx
diff --git a/src/components/home/Landing.tsx b/src/components/home/Landing.tsx
@@ -0,0 +1,61 @@
+import Image from "next/image";
+import train from "/public/landing/landingpagetrain.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>
+        <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">
+            <p className="bg-gray-300 p-2">LOGO</p>
+          </div>
+          <div className="flex flex-row space-x-2">
+            <div className="h-8 w-8 rounded-full bg-gray-300"></div>
+            <div className="h-8 w-8 rounded-full bg-gray-300"></div>
+            <div className="h-8 w-8 rounded-full bg-gray-300"></div>
+            <div className="h-8 w-8 rounded-full bg-gray-300"></div>
+          </div>
+        </div>
+
+        <div className="h-1/8 relative flex w-full flex-col space-y-4 pt-8">
+          <Image
+            className="relative ml-4 h-1/6 w-1/6"
+            src={rectangle36}
+            alt=""
+          />
+          <Image className="absolute h-full w-1/4" src={ellipse13} alt="" />
+          <div className="bottom-4 flex h-full w-full flex-row">
+            <Image
+              className="relative ml-40 mr-12 h-1/5 w-1/2"
+              src={rectangle37}
+              alt=""
+            />
+            <p className="font-sans-serif w-full text-[4vw] text-yellow-300">
+              DEVELOPER STATION
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="relative h-1/2">
+        <Image className="absolute h-3/4 w-full" src={rectangle35} alt="" />
+        <Image className="relative top-48 h-5/6 w-full" src={path} alt="" />
+        <Image className="absolute top-8 h-full w-full" src={train} alt="" />
+      </div>
+
+      <div className="flex h-1/4 flex-row pb-12">
+        <p className="ml-11 w-1/4 text-lg 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
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default Landing;
diff --git a/src/components/home/ProjectCard.tsx b/src/components/home/ProjectCard.tsx
@@ -13,7 +13,7 @@ const ProjectCard: React.FC<ProjectCardProps> = ({
 }) => {
   return (
     <div className="flex flex-col items-center rounded-2xl border-4 border-devstation-green-500 bg-devstation-green-400 p-5">
-      <div className="mb-2 flex w-3/4 items-end justify-end rounded-2xl">
+      <div className="mb-[2vw] flex w-3/4 items-end justify-end rounded-2xl">
         {backgroundImage && (
           <Image src={backgroundImage} alt={title} className="rounded-2xl" />
         )}

diff --git a/src/components/home/Projects.tsx b/src/components/home/Projects.tsx
@@ -0,0 +1,39 @@
+import ProjectCard from "../home/ProjectCard";
+import backgroundImage from "/public/images/Projectshome1.webp";
+const Projects = () => {
+  return (
+    <div className="mx-[3vw] my-[5vw] flex flex-col items-center rounded-xl bg-devstation-green-200 bg-opacity-80 p-[2.5vw] text-center text-white">
+      <div className="text-[4vw]">Our Projects</div>
+
+      <div className="mb-[2vw] text-lg">
+        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
+        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
+      </div>
+      <div className="grid grid-cols-3 flex-col items-center justify-center">
+        <div className="mx-[2vw] mb-[1vw]">
+          <ProjectCard
+            backgroundImage={backgroundImage}
+            description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum."
+            title="Title"
+          />
+        </div>
+        <div className="mx-[2vw] mb-[1vw]">
+          <ProjectCard
+            backgroundImage={backgroundImage}
+            description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum."
+            title="Title"
+          />
+        </div>
+        <div className="mx-[2vw] mb-[1vw]">
+          <ProjectCard
+            backgroundImage={backgroundImage}
+            description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum."
+            title="Title"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Projects;
diff --git a/src/components/home/about.tsx b/src/components/home/about.tsx
@@ -1,6 +1,6 @@
 const About = () => {
   return (
-    <div className="font-Malayalam flex h-screen w-screen flex-col items-center text-center">
+    <div className="flex w-screen flex-col items-center text-center">
       <div>
         <div className="text-[2.7vw]">About</div>
         <div className="-mt-[1.5vw] text-[5vw]">"NAME"</div>