site v1.1 with lota improvements

uefroboticsclub · Aug 22, 2024 · 17bf4d6 · 17bf4d6
1 parent e35cb7f
commit 17bf4d6
Show file tree

Hide file tree

Showing 16 changed files with 265 additions and 114 deletions.
diff --git a/components/layout.js → components/BaseLayout.js b/components/layout.js → components/BaseLayout.js
@@ -1,57 +1,20 @@
-import dynamic from 'next/dynamic';
-import HeadObject from "./head";
+import HeadObject from "./Head";
 import Nav from "./nav";
 import Link from "next/link";
+import { Box, Heading, Text, Button, Badge } from "theme-ui";
+import BGImg from "../components/common/BackgroundImage";
+import OuternetImgFile from "../public/robots/midjourney1.jpeg";
+import Comma from "../components/common/Comma";
 
 const Layout = ({ children }) => {
+  const currentYear = new Date().getFullYear();
   return (
     <div className="dark:text-white dark:bg-black">
       <HeadObject />
       <Nav />
-      {/* Upper Banner */}
-      <div className="relative flex justify-center items-center bg-primary py-6">
-        <div>
-          <img
-            className="select-none mx-auto px-4 sm:h-28 lg:h-48"
-            src="/full_logo.png"
-          />
-          <div className="mt-4 text-white rounded-lg p-2 lg:p-4">
-            <h2 className="text-center text-4xl text-white lg:flex justify-center items-center">
-              Build
-              <div className=" mx-3 relative italic font-semibold underline lg:no-underline decoration-secondary">
-                something amazing
-                <img
-                  className="select-none hidden lg:block absolute top-6"
-                  src="/underline.svg"
-                />
-              </div>
-              together
-            </h2>
-            <p className="mt-2 lg:mt-8 text-lg md:text-2xl text-center text-white/70">
-              June 22-23rd, 2024
-            </p>
-            <div className="flex flex-col items-center justify-center">
-              <a
-                href="/register"
-                className="mt-6 bg-white border-4 border-secondary hover:bg-white/90 text-primary font-semibold text-2xl px-8 py-4 rounded-lg"
-              >
-                Register Now
-              </a>
-            </div>
-          </div>
-        </div>
-        <div
-          style={{ transform: "translateX(-6%)" }}
-          className="bottom-0 absolute w-full"
-        ></div>
-      </div>
-
-      {/* Middle Content */}
       <div className="h-full">
         <div className="h-full bg-tertiary pb-12">{children}</div>
       </div>
-
-      {/* Lower Banner */}
       <div className="bg-primary pb-6">
         <h2 className="pt-16 text-center text-5xl text-white lg:flex justify-center items-center">
           Let's build
@@ -64,44 +27,21 @@ const Layout = ({ children }) => {
           </p>
           together.
         </h2>
-        <div className="lg:w-2/3 mx-auto grid grid-rows-2 gap-8 md:grid-rows-none md:grid-cols-2 mt-12 md:mt-24">
-          <div className="text-center my-auto">
-            <p className="mt-2 mb-2 text-2xl lg:text-3xl text-center text-white/70">
-              June 22nd-23rd, 2024
-            </p>
-            <a
-              href="https://maps.app.goo.gl/9VjmWAJeGG5ngh417"
-              target="_blank"
-              className="hover:underline hover:decoration-wavy hover:decoration-secondary italic text-2xl lg:text-3xl text-center text-white/70"
-            >
-              University of Eastern Finland <br /> School of Computing <br />{" "}
-              Länsikatu 15 <br /> Joensuu Science Park <br /> FI-80101 Joensuu
-            </a>
-          </div>
-          <div className="text-center my-auto">
-            <a
-              href="/register"
-              className="bg-white border-4 border-secondary hover:bg-white/90 text-primary font-semibold text-2xl px-8 py-4 rounded-lg"
-            >
-              Register Now
-            </a>
-            <br />
-            <br />
-            <br />
-            <br />
-            <a
-              href="/discord"
-              className="bg-white border-4 border-secondary hover:bg-white/90 text-primary font-semibold text-2xl px-8 py-4 rounded-lg"
-            >
-              Join the Discord
-            </a>
-          </div>
+        <div className="text-center my-auto md:mt-20">
+          <a
+            href="https://maps.app.goo.gl/9VjmWAJeGG5ngh417"
+            target="_blank"
+            className="hover:underline hover:decoration-wavy hover:decoration-secondary italic text-2xl lg:text-3xl text-center text-white/70"
+          >
+            University of Eastern Finland <br /> School of Computing <br />{" "}
+            Länsikatu 15 <br /> Joensuu Science Park <br /> FI-80101 Joensuu
+          </a>
         </div>
         <div className="mt-16 text-center">
-          <img className="select-none mx-auto px-4 h-16" src="/full_logo.png" />
+          <img className="select-none mx-auto px-4 h-16" src="/LOGO_uef.svg" />
           <div className="w-2/3 md:w-1/6 mx-auto mt-4 grid grid-cols-3 gap-0">
             <div className="mx-auto">
-              <Link href="mailto:team@windycityhacks.com">
+              <Link href="mailto:uefrobotics@gmail.com">
                 <svg
                   className="h-8"
                   viewBox="0 0 24 24"
@@ -128,7 +68,7 @@ const Layout = ({ children }) => {
             </div>
             <div className="mx-auto">
               <Link
-                href="https://twitter.com/windycityhacks"
+                href="https://twitter.com/uefrobotics"
                 target="_blank"
                 rel="noreferrer"
               >
@@ -159,7 +99,7 @@ const Layout = ({ children }) => {
             </div>
             <div className="mx-auto">
               <Link
-                href="https://instagram.com/windycityhacks"
+                href="https://instagram.com/uefrobotics"
                 target="_blank"
                 rel="noreferrer"
               >
@@ -189,14 +129,9 @@ const Layout = ({ children }) => {
             </div>
           </div>
           <div className="w-2/3 mx-auto">
-            <p className="mt-4 text-white/70">&copy; Windy City Hacks 2024</p>
-            <a
-              href="/fiscal_sponsorship_confirmation.pdf"
-              target="_blank"
-              className="text-white/70 hover:underline hover:decoration-wavy hover:decoration-secondary italic"
-            >
-              Fiscally sponsored by The Hack Foundation (EIN: 81-2908499)
-            </a>
+            <p className="mt-4 text-white/70">
+              &copy; UEF Robotics Club {currentYear}
+            </p>
           </div>
         </div>
       </div>

diff --git a/components/common/BackgroundImage.js b/components/common/BackgroundImage.js
@@ -0,0 +1,43 @@
+import { Box } from "theme-ui";
+import Image from "next/image";
+
+/*
+ * Use this component inside a container with CSS:
+ * `position: relative; overflow: hidden;`
+ * then pass width/height/alt/src as usual
+ * (you can pass `gradient` valueless to avoid gradient)
+ */
+
+const BGImg = ({
+  gradient = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))",
+  alt = "",
+  ...props
+}) => (
+  <Box
+    sx={{
+      position: "absolute",
+      display: "block",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      zIndex: 0,
+      "&:after": {
+        content: '""',
+        position: "absolute",
+        backgroundImage: gradient,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+      },
+      "> span": { height: "100% !important", width: "100% !important" },
+      img: { objectFit: "cover", objectPosition: "center center" },
+      "~ *": { position: "relative" },
+    }}
+  >
+    <Image layout="responsive" alt={alt} {...props} />
+  </Box>
+);
+
+export default BGImg;
diff --git a/components/common/Comma.js b/components/common/Comma.js
@@ -0,0 +1,5 @@
+export default function Comma({ children }) {
+  return children
+    ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+    : "";
+}
diff --git a/components/index/carousel-cards.js → components/index/CarouselCards.js b/components/index/carousel-cards.js → components/index/CarouselCards.js
diff --git a/components/index/carousel.js b/components/index/carousel.js
@@ -1,5 +1,5 @@
 import { Box, Text } from "theme-ui";
-import CarouselCards from "./carousel-cards";
+import CarouselCards from "./CarouselCards";
 import React, { useState } from "react";
 import Ticker from "react-ticker";
 import PageVisibility from "react-page-visibility";

diff --git a/components/nav.js b/components/nav.js
@@ -4,8 +4,7 @@ import { useTheme } from "next-themes";
 
 const links = [
   { label: "Home", href: "/" },
-  { label: "Donate", href: "/donate", external: true },
-  { label: "Sign Up", href: "/register", external: true },
+  { label: "Join Us", href: "https://github.com/uefroboticsclub", external: true },
   { label: "Our Team", href: "/team" },
 ];
 

diff --git a/next.config.js b/next.config.js
diff --git a/pages/_app.js b/pages/_app.js
@@ -1,19 +1,19 @@
 import "../styles/globals.css";
 import "../styles/fonts.css";
 import { Provider } from "react-wrap-balancer";
-import Layout from "../components/Layout";
+import Layout from "../components/BaseLayout";
 import theme from "../lib/theme";
-import { ThemeProvider as ThemeUIProvider } from "theme-ui";
+import { ThemeUIProvider } from "theme-ui";
 
 function MyApp({ Component, pageProps }) {
   return (
-      <ThemeUIProvider theme={theme}>
-        <Provider>
-          <Layout>
-            <Component {...pageProps} />
-          </Layout>
-        </Provider>
-      </ThemeUIProvider>
+    <ThemeUIProvider theme={theme}>
+      <Provider>
+        <Layout>
+          <Component {...pageProps} />
+        </Layout>
+      </Provider>
+    </ThemeUIProvider>
   );
 }