Closing and footer

README.md

@@ -1,4 +1,9 @@
-# React + TypeScript + Vite
+# Lunar Vein: Arduino Client
+
+Client version of the [lunar vein arduino](https://github.com/norman-andrians/lunar-vein-arduino) project, This is the source code of the serial communication API testing example, built with React, Typescript and Vite. The example web client code in the [main branch](https://github.com/norman-andrians/lunar-vein-arduino/tree/main/src/client) is only a **build version** of this code.
+
+
+## React + TypeScript + Vite
 
 This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 
@@ -6,25 +11,3 @@ Currently, two official plugins are available:
 
 - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
 - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
-}
-```
-
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

src/components/Footer.tsx

@@ -0,0 +1,34 @@
+import MadeBy from "./info/MadeBy";
+import Social from "./info/Social";
+
+export default function Footer () {
+    return (
+        <footer className="bg-black bg-opacity-80 border-t border-border absolute bottom-0 left-0 w-full">
+            <div className="container py-12 text-center">
+                <MadeBy className="font-poppins" />
+                <div className="mt-8 flex flex-row justify-center gap-3">
+                    <Social
+                        name="X/Twitter"
+                        link="https://twitter.com/NormanAndrians"
+                        icon={<i className="bi bi-twitter-x text-3xl"></i>}
+                    />
+                    <Social
+                        name="Instagram"
+                        link="https://www.instagram.com/normanandrians25/"
+                        icon={<i className="bi bi-instagram text-3xl"></i>}
+                    />
+                    <Social
+                        name="Facebook"
+                        link="https://www.facebook.com/profile.php?id=100076314820736"
+                        icon={<i className="bi bi-facebook text-3xl"></i>}
+                    />
+                    <Social
+                        name="Github"
+                        link="https://github.com/norman-andrians"
+                        icon={<i className="bi bi-github text-3xl"></i>}
+                    />
+                </div>
+            </div>
+        </footer>
+    )
+}

src/components/MainBody.tsx

@@ -4,7 +4,7 @@ import BackroundImg from "../assets/img/background.png";
 export default function MainBody({ children }: { children?: ReactNode }) {
     return (
         <div
-            className="bg-background text-white bg-repeat-y"
+            className="bg-background text-white bg-repeat-y relative"
             style={{
                 backgroundImage: `url(${BackroundImg})`
             }}

src/components/info/MadeBy.tsx

@@ -0,0 +1,13 @@
+import NolaImg from "../../assets/img/ocs/nola_3.png";
+
+export default function MadeBy ({ className }: { className?: string }) {
+    return (
+        <div className={`group ${className}`}>
+            Made By
+            <a href="https://github.com/norman-andrians" target="_blank">
+                <img className="inline group-hover:animate-wewew" src={NolaImg} />
+            </a>
+            Norman Andrians
+        </div>
+    )
+}

src/components/info/Social.tsx

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+
+interface SocialPops {
+    className?: string;
+    name: string;
+    link: string;
+    icon: ReactNode | string;
+}
+
+export default function Social({ className, name, link, icon }: SocialPops) {
+    return (
+        <a
+            href={link}
+            title={name}
+            target="_blank"
+            className={`opacity-80 transition bg-transparent hover:bg-black w-14 h-14 flex justify-center items-center rounded-full ${className}`}
+        >
+            {icon}
+        </a>
+    );
+}

src/components/landing/Closing.tsx

@@ -0,0 +1,22 @@
+import Img from "../../assets/img/absurd-closing.png";
+import Bg from "../../assets/img/bg-closing.png";
+
+export default function Closing () {
+    return (
+        <div className="bg-gradient-to-t from-background via-background to-transparent">
+            <div className="pt-64 pb-96 bg-no-repeat bg-cover bg-bottom" style={{
+                backgroundImage: `url(${Bg})`,
+            }}>
+                <div className="container">
+                    <header className="text-center font-poppins">
+                        <h1 className="text-5xl font-bold leading-normal">That's All {":)"}</h1>
+                        <div>Other features are still under development</div>
+                    </header>
+                    <picture className="">
+                        <img className="mt-16 w-full h-auto" src={Img} alt="Goofy ahh closing" />
+                    </picture>
+                </div>
+            </div>
+        </div>
+    )
+}

src/components/landing/Hero.tsx

@@ -1,6 +1,6 @@
 import Button from "../forms/Button";
-import NolaImg from "../../assets/img/ocs/nola_3.png";
 import { RefObject } from "react";
+import MadeBy from "../info/MadeBy";
 
 type ShortNav = {
     name: string,
@@ -36,13 +36,7 @@ function Hero ({ img, shortNav, refs }: InHero) {
                             >{name}</Button>
                         ))}
                     </div>
-                    <div className="absolute left-0 -bottom-24 group">
+                    <MadeBy className="absolute left-0 -bottom-24" />
-                        Made By
-                        <a href="https://github.com/norman-andrians" target="_blank">
-                            <img className="inline group-hover:animate-wewew" src={NolaImg} />
-                        </a>
-                        Norman Andrians
-                    </div>
                 </div>
                 <div className="col-span-1"></div>
                 <div className="col-span-3">

src/pages/MainPage.tsx

@@ -12,24 +12,30 @@ import ControlRgbLed from "../components/landing/ControlRgbLed";
 import ControlPiezo from "../components/landing/ControlPiezo";
 import ControlPhotoresistor from "../components/landing/ControlPhotoresistor";
 import ControlServo from "../components/landing/ControlServo";
+import Closing from "../components/landing/Closing";
+import Footer from "../components/Footer";
 
 function MainPage () {
     const led = useRef<HTMLDivElement | null>(null);
     const rgbLed = useRef<HTMLDivElement | null>(null);
     const piezo = useRef<HTMLDivElement | null>(null);
+    const servo = useRef<HTMLDivElement | null>(null);
+    const photoresistor = useRef<HTMLDivElement | null>(null)
 
     return (<>
         <MainBody>
             <Hero
                 img={LunarImg}
-                refs={[led, rgbLed, piezo]}
+                refs={[led, rgbLed, piezo, servo, photoresistor]}
                 shortNav={ControlNav}
             />
             <ControlLED refto={led} />
             <ControlRgbLed refto={rgbLed} />
             <ControlPiezo refto={piezo} />
-            <ControlServo />
+            <ControlServo refto={servo} />
-            <ControlPhotoresistor />
+            <ControlPhotoresistor refto={photoresistor} />
+            <Closing />
+            <Footer />
         </MainBody>
     </>)
 }