fixed merge conflict

acm-ucr · Nov 4, 2024 · 966e9a0 · 966e9a0
2 parents dd76719 + 391d094
commit 966e9a0
Show file tree

Hide file tree

Showing 14 changed files with 167 additions and 67 deletions.
diff --git a/next.config.js b/next.config.js
@@ -10,6 +10,7 @@ const nextConfig = {
   },
   basePath: "",
   assetPrefix: "",
+  trailingSlash: true,
 };
 
 module.exports = nextConfig;
diff --git a/public/images/randomCat.webp b/public/images/randomCat.webp
diff --git a/src/app/course/[name]/page.tsx b/src/app/course/[name]/page.tsx
@@ -0,0 +1,24 @@
+import Name from "@/components/course/name";
+import { courses } from "@/courses";
+
+interface props {
+  params: {
+    name: string;
+  };
+}
+
+export const generateStaticParams = () => {
+  return courses.map(({ param }) => ({ name: param }));
+};
+
+const Page = ({ params }: props) => {
+  const { name } = params;
+
+  return (
+    <>
+      <Name>{name}</Name>
+    </>
+  );
+};
+
+export default Page;
diff --git a/src/app/course/page.tsx b/src/app/course/page.tsx
@@ -0,0 +1,5 @@
+const Page = () => {
+  return <div>Page</div>;
+};
+
+export default Page;
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,63 +1,29 @@
 import Image from "next/image";
 import HomePic from "@/public/images/homePage2.webp";
-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 ProjectCard from "@/components/home/ProjectCard";
+import Cat from "@/public/images/randomCat.webp";
 
 const Home = () => {
   return (
-    <div className="flex h-screen w-screen flex-col bg-gradient-to-t from-devstation-blue-400 to-blue-950">
-      <div className="">
-        <div className="h-1/8 flex flex-row justify-between">
-          <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>
+      <Landing />
+      <div className="flex flex-col">
+        <Image alt="graphics of home page" src={HomePic} />
+        <div className="absolute mt-[10%] text-white">
+          <About />
         </div>
-
-        <div className="h-1/8 relative flex w-full flex-col pt-8">
-          <Image
-            className="relative ml-4 h-1/6 w-1/6"
-            src={rectangle36}
-            alt=""
+        <div className="absolute ml-[8vw] mt-[200vh] w-1/4">
+          <ProjectCard
+            backgroundImage={Cat}
+            title="Lorem Ipsum"
+            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"
           />
-          <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">
-        <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>
-      <Image alt="graphics of home page" src={HomePic} />
     </div>
   );
 };

diff --git a/src/components/courselearn.tsx → src/components/course/learn.tsx b/src/components/courselearn.tsx → src/components/course/learn.tsx
diff --git a/src/components/course/name.tsx b/src/components/course/name.tsx
@@ -0,0 +1,12 @@
+interface CourseNameProps {
+  children: string;
+}
+
+const Name = ({ children }: CourseNameProps) => {
+  return (
+    <div className="font-Malayalam rounded-2xl bg-devstation-cyan-100 py-4 text-center text-6xl text-white">
+      {children}
+    </div>
+  );
+};
+export default Name;
diff --git a/src/components/courseTimeline.tsx → src/components/course/timeline.tsx b/src/components/courseTimeline.tsx → src/components/course/timeline.tsx
diff --git a/src/components/courselayout.tsx b/src/components/courselayout.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-devstation-blue-400 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>

diff --git a/src/courses/index.tsx b/src/courses/index.tsx
@@ -0,0 +1,6 @@
+export const courses = [
+  {
+    name: "Introduction to Next.js",
+    param: "intro-nextjs",
+  },
+];