Merge pull request #68 from acm-ucr/dev

bump
acm-ucr · Jan 27, 2025 · 0c0f31f · 0c0f31f
2 parents 8737963 + f2c4123
commit 0c0f31f
Show file tree

Hide file tree

Showing 39 changed files with 562 additions and 28 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,12 +20,12 @@
   },
   "devDependencies": {
     "@eslint/js": "~9.8.0",
+    "@tanstack/eslint-plugin-query": "~5.53.0",
     "@types/node": "~22.1.0",
-    "@types/react": "~18.3.3",
+    "@types/react": "18.3.18",
     "@types/react-dom": "~18.3.0",
     "@typescript-eslint/eslint-plugin": "~8.0.0",
     "@typescript-eslint/parser": "~8.0.0",
-    "@tanstack/eslint-plugin-query": "~5.53.0",
     "autoprefixer": "~10.4.19",
     "eslint": "~9.8.0",
     "eslint-config-prettier": "~9.1.0",
@@ -37,7 +37,7 @@
     "prettier": "~3.3.3",
     "prettier-plugin-tailwindcss": "~0.6.5",
     "tailwindcss": "~3.4.7",
-    "typescript": "~5.5.4",
+    "typescript": "5.5.4",
     "typescript-eslint": "~8.0.0"
   }
 }
diff --git a/public/about/envelope.webp b/public/about/envelope.webp
diff --git a/public/about/gradCap.webp b/public/about/gradCap.webp
diff --git a/public/about/heart.svg b/public/about/heart.svg
diff --git a/public/about/lantern.svg b/public/about/lantern.svg
diff --git a/public/about/pendant.webp b/public/about/pendant.webp
diff --git a/public/events/fruitBranch.svg b/public/events/fruitBranch.svg
diff --git a/public/home/banner.svg b/public/home/banner.svg
diff --git a/public/home/csalogo.svg b/public/home/csalogo.svg
diff --git a/public/home/webpageMarker.svg b/public/home/webpageMarker.svg
diff --git a/public/home/xinimage.svg b/public/home/xinimage.svg
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
@@ -0,0 +1,25 @@
+import WhoWeAre from "@/components/about/WhoWeAre";
+import Heading from "@/components/about/FourPillTitle";
+import Title from "@/components/Title";
+import Social from "@/components/about/Social";
+import Academic from "@/components/about/AcademicComponent";
+import Culture from "@/components/about/Culture";
+import RightLantern from "@/components/about/RightLantern";
+import Philanthropy from "@/components/about/Philanthropy";
+
+const page = () => {
+  return (
+    <div className="bg-csa-tan-100">
+      <RightLantern />
+      <Title text="about" />
+      <WhoWeAre />
+      <Heading />
+      <Philanthropy />
+      <Social />
+      <Culture />
+      <Academic />
+    </div>
+  );
+};
+
+export default page;
diff --git a/src/app/board/page.tsx b/src/app/board/page.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const page = () => {
+  return <div className="bg-csa-tan-100"></div>;
+};
+
+export default page;
diff --git a/src/app/events/page.tsx b/src/app/events/page.tsx
@@ -0,0 +1,13 @@
+import Title from "@/components/Title";
+import FruitBranch from "@/components/events/FruitBranch";
+
+const page = () => {
+  return (
+    <div className="bg-csa-tan-100">
+      <Title text="events" />
+      <FruitBranch />
+    </div>
+  );
+};
+
+export default page;
diff --git a/src/app/gallery/page.tsx b/src/app/gallery/page.tsx
@@ -0,0 +1,11 @@
+import Title from "@/components/Title";
+
+const page = () => {
+  return (
+    <div className="bg-csa-tan-100">
+      <Title text="gallery" />
+    </div>
+  );
+};
+
+export default page;
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -1,3 +1,11 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+:root {
+  --font-lora: "Lora", serif;
+}
+
+.font-lora {
+  font-family: var(--font-lora);
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,8 +1,14 @@
 import "./globals.css";
-import { Inter } from "next/font/google";
+import { Libre_Bodoni } from "next/font/google";
+import { Lora } from "next/font/google";
 import { ReactQueryClientProvider } from "@/utils/react-query";
+import NavBar from "@/components/NavBar";
 
-const inter = Inter({ subsets: ["latin"] });
+const libre_bodoni = Libre_Bodoni({ subsets: ["latin"] });
+const lora = Lora({
+  subsets: ["latin"],
+  variable: "--font-lora",
+});
 
 export const metadata = {
   title: "UCR Chinese Student Association",
@@ -17,7 +23,8 @@ type LayoutProps = {
 export default function RootLayout({ children }: LayoutProps) {
   return (
     <html lang="en">
-      <body className={inter.className}>
+      <body className={`${libre_bodoni.className} ${lora.variable}`}>
+        <NavBar />
         <ReactQueryClientProvider>{children}</ReactQueryClientProvider>
       </body>
     </html>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,7 +1,19 @@
+import React from "react";
+import XinDescription from "@/components/home/XinDescription";
+import QuoteBox from "@/components/home/QuoteBox";
+import quotes from "@/data/quote-data";
+import EHTitle from "@/components/events/EventHighlightsTitle";
+import MissionStatement from "@/components/home/MissionStatement";
+
 const Home = () => {
   return (
-    <div className="flex h-screen w-screen items-center justify-center">
-      Hello World
+    <div className="bg-csa-tan-100 pt-[12.2vh] md:pt-[14.4vh]">
+      <MissionStatement />
+      <EHTitle />
+      <XinDescription />
+      {quotes.map(({ quote, person }, index) => (
+        <QuoteBox quote={quote} name={person} key={index} />
+      ))}
     </div>
   );
 };

diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
@@ -0,0 +1,78 @@
+"use client";
+import Image from "next/image";
+import Link from "next/link";
+import React, { useState } from "react";
+import CsaLogo from "@/public/home/csalogo.svg";
+import WebMarker from "@/public/home/webpageMarker.svg";
+import { tags } from "@/data/navBarData";
+import { AlignJustify } from "lucide-react";
+
+const Navigation = () => {
+  const [clicked, setClicked] = useState("Home");
+  const [mobileScreen, setMobile] = useState(false);
+
+  const handleMobile = () => {
+    setMobile(!mobileScreen);
+  };
+
+  return (
+    <div className="top-0 flex w-full items-center justify-between border-b-8 border-csa-yellow-100 bg-csa-red-200">
+      <Link
+        onClick={() => {
+          setClicked("Home");
+        }}
+        href="/"
+      >
+        <Image src={CsaLogo} alt="CSA_Logo" className="left-0 mx-5 my-3 w-20" />
+      </Link>
+
+      <div className="absolute right-0 hidden w-[45%] justify-evenly px-1 md:flex">
+        {tags.map((tag, index) => (
+          <Link
+            href={tag.link}
+            key={index}
+            onClick={() => {
+              setClicked(tag.name);
+            }}
+            className={`font-lora inline-flex items-center text-xl hover:cursor-pointer ${tag.name == "Join" ? "rounded-md bg-csa-yellow-100 px-6 py-2 text-white" : "text-white"}`}
+          >
+            {tag.name}
+            {clicked == tag.name && (
+              <Image
+                src={WebMarker}
+                alt="WebMarker"
+                className="absolute mx-5 mt-12 w-4"
+              />
+            )}
+          </Link>
+        ))}
+      </div>
+      <div
+        className={
+          mobileScreen
+            ? "fixed top-10 -z-10 flex w-full flex-col items-center justify-evenly bg-csa-red-200 md:hidden"
+            : "fixed hidden"
+        }
+      >
+        {tags.map((tag, index) => (
+          <Link
+            href={tag.link}
+            key={index}
+            onClick={() => {
+              setClicked(tag.name);
+              handleMobile();
+            }}
+            className={`font-lora mb-4 inline-flex items-center text-xl text-white hover:cursor-pointer ${tag.name == "Join" && "rounded-md bg-csa-yellow-100 px-6 py-2"}`}
+          >
+            {tag.name}
+          </Link>
+        ))}
+      </div>
+      <div onClick={handleMobile}>
+        <AlignJustify className="mr-3 flex text-3xl text-white hover:cursor-pointer md:hidden" />
+      </div>
+    </div>
+  );
+};
+
+export default Navigation;
diff --git a/src/components/Test.tsx b/src/components/Test.tsx
diff --git a/src/components/Title.tsx b/src/components/Title.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import Image from "next/image";
+import banner from "@/public/home/banner.svg";
+
+interface TitleNameProps {
+  text: string;
+}
+
+const Title: React.FC<TitleNameProps> = ({ text }) => {
+  return (
+    <div className="relative flex items-center justify-center">
+      <div className="mr-4 mt-4 h-[.8vh] w-[20vw] bg-csa-green-100" />
+      <Image src={banner} alt="Banner" className="h-1/3 w-1/3 object-cover" />
+      <div className="absolute mt-4 flex justify-center">
+        <svg
+          width="3/4vw"
+          height="3/4vw"
+          viewBox="0 0 400 200"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            id="curve"
+            d="M50,150 Q200,10 370,150"
+            fill="transparent"
+            stroke="none"
+          />
+
+          <text
+            fill="#7C2413"
+            font-size="6.5vw"
+            font-weight="bold"
+            font-family="serif"
+          >
+            <textPath href="#curve" startOffset="50%" text-anchor="middle">
+              {text}
+            </textPath>
+          </text>
+        </svg>{" "}
+      </div>
+
+      <div className="ml-4 mt-4 h-[.8vh] w-[20vw] bg-csa-green-100" />
+    </div>
+  );
+};
+
+export default Title;
diff --git a/src/components/about/About.tsx b/src/components/about/About.tsx
diff --git a/src/components/about/AcademicComponent.tsx b/src/components/about/AcademicComponent.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import Image from "next/image";
+import gradCap from "@/public/about/gradCap.webp";
+
+const Academic = () => {
+  return (
+    <div className="mr-[5vw] flex justify-end">
+      <div className="relative flex h-[12vh] w-[28vw] items-center rounded-3xl border-8 border-csa-yellow-100">
+        <p className="ml-8 text-3xl font-bold text-csa-gray-100">Academic</p>
+        <Image
+          src={gradCap}
+          alt="gradCap"
+          className="absolute translate-x-[20%] translate-y-[-9%]"
+        />
+      </div>
+      <div></div>
+    </div>
+  );
+};
+
+export default Academic;
diff --git a/src/components/about/Culture.tsx b/src/components/about/Culture.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import Image from "next/image";
+import redenvelope from "@/public/about/envelope.webp";
+
+const Culture = () => {
+  return (
+    <div className="ml-20 flex">
+      <div className="relative flex h-[12vh] w-[45vw] items-center rounded-3xl border-8 border-csa-red-100 bg-white">
+        <p className="font-lora absolute right-2 p-4 text-3xl font-bold text-csa-gray-200">
+          Culture
+        </p>
+        <Image
+          src={redenvelope}
+          alt="Red Envelope"
+          className="absolute h-[300px] w-[260px] translate-x-[-34%] translate-y-[5%]"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Culture;
diff --git a/src/components/about/FourPillTitle.tsx b/src/components/about/FourPillTitle.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+
+const Heading = () => {
+  return (
+    <div className="flex flex-col">
+      <p className="mr-2 pr-4 text-right text-5xl font-semibold text-csa-red-100">
+        Four Pillars
+      </p>
+      <div className="ml-auto mr-4 h-[1vh] w-[11vw] bg-csa-tan-300"></div>
+    </div>
+  );
+};
+
+export default Heading;