Implement components and front page

react/ucmacm-website/.yarnrc.yml

@@ -1 +1,3 @@
 nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.1.0.cjs

react/ucmacm-website/package.json

@@ -13,6 +13,9 @@
     "format": "prettier . --write"
   },
   "dependencies": {
+    "@icons-pack/react-simple-icons": "^9.3.0",
+    "@nextui-org/react": "^2.2.9",
+    "framer-motion": "^10.16.16",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -33,5 +36,6 @@
     "tailwindcss": "^3.4.1",
     "typescript": "5.3.3",
     "vite": "^5.1.4"
-  }
+  },
+  "packageManager": "[email protected]"
 }

react/ucmacm-website/src/App.tsx

@@ -1,23 +1,8 @@
-// import { useState } from 'react'
-import "./App.css";
-// import Navbar from './components/Navbar'
-// import LandingPage from './components/LandingPage'
-
-import ProjectShowcase from "./components/ProjectShowcase";
+import Front from "./pages/front.tsx";
 function App() {
-  // const [count, setCount] = useState(0)
-
   return (
     <>
-      {/* <Navbar/> */}
-      {/* <LandingPage/> */}
-      {/* <LandingInfoPage/> */}
-      {/* <Card description={"hello"}/>
-
-      <Card description={"hello"}/>
-      <Card description={"hello"}/> */}
-
-      <ProjectShowcase />
+      <Front />
     </>
   );
 }

react/ucmacm-website/src/components/GlobalFooter.tsx

@@ -0,0 +1,53 @@
+// import "../index.css";
+import {
+  SiInstagram,
+  SiGithub,
+  SiDiscord,
+} from "@icons-pack/react-simple-icons";
+import { Link } from "@nextui-org/react";
+
+function GlobalFooter() {
+  return (
+    <>
+      <div>
+        <svg
+          className="z-0 w-full h-full"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 1440 320"
+        >
+          <path
+            width="100"
+            height="100"
+            fill="#00e1bfcc"
+            fillOpacity="1"
+            d="M0,96L80,80C160,64,320,32,480,53.3C640,75,800,149,960,154.7C1120,160,1280,96,1360,64L1440,32L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"
+          ></path>
+        </svg>
+
+        <div className="bg-landing opacity-80 w-full max-h-max py-8 top-4 gap-16 text-center">
+          <div className="flex flex-row justify-center gap-x-12">
+            <div>
+              <Link href="https://www.instagram.com/ucmacm/" color="foreground">
+                <SiInstagram size={32} />
+              </Link>
+            </div>
+            <div>
+              <Link href="https://github.com/UCMercedACM" color="foreground">
+                <SiGithub size={32} />
+              </Link>
+            </div>
+            <div>
+              <Link href="https://bit.ly/acm_ucm-discord" color="foreground">
+                <SiDiscord size={32} />
+              </Link>
+            </div>
+          </div>
+          <p className="pt-8">Copyright 2024</p>
+          <p className="py-2">Written and programmed by ACM @ UCM</p>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default GlobalFooter;

react/ucmacm-website/src/components/GlobalNavbar.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import {
+  Navbar,
+  NavbarBrand,
+  NavbarContent,
+  NavbarMenuToggle,
+  NavbarItem,
+  Link,
+  NavbarMenu,
+  NavbarMenuItem,
+} from "@nextui-org/react";
+import ACMLogo from "../assets/acm_logo_v2.png";
+function GlobalNavbar() {
+  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+
+  const UCMACMLogo = () => <img src={ACMLogo} width={76} height={76} />;
+  // Come back later for the others
+  const menuItems = ["SIGs", "Events"];
+  return (
+    <>
+      <Navbar
+        onMenuOpenChange={setIsMenuOpen}
+        className="bg-landing opacity-80 "
+        position="static"
+      >
+        <NavbarContent>
+          <NavbarMenuToggle
+            aria-label={isMenuOpen ? "Close menu" : "Open menu"}
+            className="lg:hidden"
+          />
+          <NavbarBrand>
+            <Link href="/">
+              <UCMACMLogo />
+            </Link>
+          </NavbarBrand>
+        </NavbarContent>
+
+        <NavbarContent className="hidden sm:flex gap-6" justify="center">
+          <NavbarItem>
+            <Link color="foreground" href="#">
+              SIGs
+            </Link>
+          </NavbarItem>
+          <NavbarItem>
+            <Link color="foreground" href="#">
+              Events
+            </Link>
+          </NavbarItem>
+        </NavbarContent>
+        <NavbarMenu>
+          {menuItems.map((item, index) => (
+            <NavbarMenuItem key={`${item}-${index}`}>
+              <Link color="foreground" className="w-full" href="#" size="lg">
+                {item}
+              </Link>
+            </NavbarMenuItem>
+          ))}
+        </NavbarMenu>
+      </Navbar>
+    </>
+  );
+}
+
+export default GlobalNavbar;

react/ucmacm-website/src/components/WaveHeader.tsx

@@ -0,0 +1,21 @@
+import "../index.css";
+function WaveHeader() {
+  return (
+    <>
+      <div className="bg-landing opacity-80 py-8 w-full max-h-max top-16 gap-16 flex-col flex">
+        <p>hi</p>
+      </div>
+      <div className="z-0 gap-16 flex">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
+          <path
+            fill="#00e1bf"
+            fillOpacity="0.8"
+            d="M0,256L80,224C160,192,320,128,480,122.7C640,117,800,171,960,192C1120,213,1280,203,1360,197.3L1440,192L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0C320,0,160,0,80,0L0,0Z"
+          ></path>
+        </svg>
+      </div>
+    </>
+  );
+}
+
+export default WaveHeader;

react/ucmacm-website/src/index.css

@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.home {
+  background-color: rgba(0, 225, 191, 0.8);
+}

react/ucmacm-website/src/main.tsx

@@ -1,10 +1,15 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+
 import App from "./App.tsx";
 import "./index.css";
 
+import { NextUIProvider } from "@nextui-org/react";
+
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <App />
+    <NextUIProvider>
+      <App />
+    </NextUIProvider>
   </React.StrictMode>,
 );