Complete homepage layout & copywriting

anyshake · Dec 14, 2023 · f1b9261 · f1b9261
1 parent 0c9a53b
commit f1b9261
Show file tree

Hide file tree

Showing 24 changed files with 391 additions and 51 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.20.1",
         "react-scripts": "5.0.1",
+        "tailwindcss-animated": "^1.0.1",
         "typescript": "^4.9.5"
     },
     "scripts": {

diff --git a/public/404.html b/public/404.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1, user-scalable=0"
+        />
+        <title>404 Not Found</title>
+        <style>
+            body {
+                font-family: ui-monospace, SFMono-Regular, Menlo, Monaco,
+                    Consolas, "Liberation Mono", "Courier New", monospace;
+                color: #ea580c;
+            }
+
+            main {
+                display: table;
+                width: 100%;
+                height: 100vh;
+                text-align: center;
+            }
+
+            .text {
+                display: table-cell;
+                vertical-align: middle;
+            }
+
+            .text h1 {
+                font-size: 40px;
+                display: inline-block;
+                padding-right: 12px;
+                animation: type 0.5s alternate infinite;
+            }
+
+            @keyframes type {
+                from {
+                    box-shadow: inset -3px 0px 0px #888;
+                }
+                to {
+                    box-shadow: inset -3px 0px 0px transparent;
+                }
+            }
+        </style>
+    </head>
+    <body>
+        <main>
+            <div class="text">
+                <h1>404 Not Found</h1>
+            </div>
+        </main>
+    </body>
+</html>
diff --git a/public/index.html b/public/index.html
@@ -9,7 +9,7 @@
         />
         <meta
             name="description"
-            content="AnyShake: An Open-source & Low-cost Solution to 3-Component Seismograph"
+            content="AnyShake is an Open-source & Low-cost Solution to 3-Component Seismograph"
         />
         <meta
             name="keywords"

diff --git a/src/assets/images/hero.webp b/src/assets/images/hero.webp
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -7,7 +7,7 @@ export const Footer = (props: FooterProps) => {
     const { text, copyright } = props;
     return (
         <footer className="w-full bg-gray-200 text-gray-500 flex flex-col px-6 py-2 sm:flex-row justify-between">
-            <span className="text-xs text-center ml-8 md:ml-12">{text}</span>
+            <span className="text-xs text-center">{text}</span>
             <span className="text-sm text-center justify-center">
                 {copyright}
             </span>

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
diff --git a/src/components/HeroSection.tsx b/src/components/HeroSection.tsx
@@ -0,0 +1,62 @@
+import { Link } from "react-router-dom";
+
+interface HeroSectionProps {
+    secondary: string;
+    preview: string;
+    primary: string;
+    actions: {
+        uri: string;
+        label: string;
+        button: boolean;
+    }[];
+}
+
+export const HeroSection = (props: HeroSectionProps) => {
+    const { primary, secondary, preview, actions } = props;
+    return (
+        <div className="justify-center w-full min-h-screen flex px-8 py-10 text-center md:px-12 lg:text-left">
+            <div className="w-100 m-auto sm:max-w-2xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">
+                <div className="grid items-center lg:grid-cols-2">
+                    <div className="mb-12 lg:mt-0 lg:mb-0 animate-fade-left animate-duration-[2000ms]">
+                        <div className="block rounded-lg px-8 md:px-10 lg:px-12 py-14 bg-slate-200 text-gray-800 shadow-2xl">
+                            <h1 className="mt-2 mb-16 text-4xl font-bold tracking-tight md:text-5xl xl:text-6xl">
+                                {primary}
+                            </h1>
+                            <h2 className="mt-2 mb-16 text-lg md:text-2xl xl:text-3xl">
+                                {secondary}
+                            </h2>
+                            <div className="flex flex-col items-center justify-center space-y-4 md:space-y-0 md:flex-row md:space-x-4">
+                                {actions.map(({ uri, label, button }, index) =>
+                                    button ? (
+                                        <Link
+                                            to={uri}
+                                            key={`/components/HeroSection/0/${index}`}
+                                            className="m-2 border p-4 rounded-lg shadow-2xl font-semibold bg-indigo-500 text-white duration-200 hover:bg-indigo-600 hover:scale-110"
+                                        >
+                                            {label}
+                                        </Link>
+                                    ) : (
+                                        <Link
+                                            to={uri}
+                                            key={`/components/HeroSection/0/${index}`}
+                                            className="m-2 hover:underline font-semibold"
+                                        >
+                                            {label}
+                                        </Link>
+                                    )
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                    <div className="animate-wiggle animate-infinite animate-duration-[5000ms] animate-ease-in-out">
+                        <img
+                            alt=""
+                            src={preview}
+                            className="w-full rounded-lg shadow-2xl hover:scale-110 duration-500"
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
@@ -23,19 +23,16 @@ interface NavigationProps {
     }[];
 }
 
-const Navigation = (props: NavigationProps) => {
+export const Navigation = (props: NavigationProps) => {
     const { title, icon, menu, base } = props;
     const [isMenuCollapsed, setIsMenuCollapsed] = useState(true);
 
     return (
         <nav className="bg-gray-100 shadow-xl">
             <div className="flex flex-wrap items-center justify-between mx-auto p-3">
-                <Link
-                    to={base}
-                    className="flex items-center flex-shrink-0 mr-6"
-                >
+                <Link to={base} className="flex items-center flex-shrink-0">
                     <img className="w-16 h-16 mx-4" src={icon} alt="" />
-                    <span className="font-semibold text-xl tracking-tight text-gray-700">
+                    <span className="font-semibold text-xl tracking-tight text-gray-700 font-mono">
                         {title}
                     </span>
                 </Link>
@@ -61,7 +58,7 @@ const Navigation = (props: NavigationProps) => {
                 >
                     <ul className="font-medium flex flex-col px-8 py-4 mt-4 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:bg-gray-100">
                         {menu.map(({ name, uri, external }, index) => (
-                            <li key={`${index}-${uri}`}>
+                            <li key={`/components/Navigation/0/${index}`}>
                                 <Link
                                     to={uri}
                                     className={`${
@@ -93,5 +90,3 @@ const Navigation = (props: NavigationProps) => {
         </nav>
     );
 };
-
-export default Navigation;
diff --git a/src/config/menu.ts b/src/config/menu.ts
@@ -12,18 +12,23 @@ export const menuConfig = {
         },
         {
             external: false,
-            name: "Documentation",
-            uri: "/documentation",
+            name: "Features",
+            uri: "/features",
         },
         {
             external: false,
-            name: "Features",
-            uri: "/features",
+            name: "Documentation",
+            uri: "/documentation/wizard",
         },
         {
             external: false,
             name: "Contribution",
-            uri: "/contribution",
+            uri: "/contribution/wizard",
+        },
+        {
+            external: false,
+            name: "Donation",
+            uri: "/donation",
         },
         {
             external: true,

diff --git a/src/config/router.ts b/src/config/router.ts
@@ -2,32 +2,59 @@ import { lazy } from "react";
 import Error from "../views/Error";
 
 const Home = lazy(() => import("../views/Home"));
+const Features = lazy(() => import("../views/Features"));
+const Documentation = lazy(() => import("../views/Documentation"));
+const Contribution = lazy(() => import("../views/Contribution"));
+const Donation = lazy(() => import("../views/Donation"));
 
-export const routerConfig = {
+export interface IRouter {
+    index: boolean;
+    tag: string;
+    component: any;
+    uri: string;
+}
+
+export interface IRouterConfig {
+    router: IRouter[];
+    mode: "hash" | "history";
+}
+
+export const routerConfig: IRouterConfig = {
     mode: "hash",
     router: [
         {
             index: true,
+            tag: "home",
             component: Home,
             uri: "/",
         },
         {
-            index: true,
-            component: Home,
-            uri: "/documentation",
+            index: false,
+            tag: "features",
+            component: Features,
+            uri: "/features",
         },
         {
-            index: true,
-            component: Home,
-            uri: "/features",
+            index: false,
+            tag: "documentation",
+            component: Documentation,
+            uri: "/documentation/:query",
         },
         {
-            index: true,
-            component: Home,
-            uri: "/contribution",
+            index: false,
+            tag: "contribution",
+            component: Contribution,
+            uri: "/contribution/:query",
+        },
+        {
+            index: false,
+            tag: "donation",
+            component: Donation,
+            uri: "/donation",
         },
         {
             index: false,
+            tag: "error",
             component: Error,
             uri: "*",
         }, // 404 Error Page

diff --git a/src/config/site.ts b/src/config/site.ts
@@ -2,4 +2,6 @@ export const siteConfig = {
     title: "AnyShake",
     slogan: "Listen to the Whispering Earth",
     copyright: `© ${new Date().getFullYear()} AnyShake`,
+    description:
+        "AnyShake is an Open-source & Low-cost Solution to 3-Component Seismograph",
 };
diff --git a/src/helpers/getBaseUri.ts b/src/helpers/getBaseUri.ts
@@ -0,0 +1,6 @@
+export const getBaseUri = (uri: string): string => {
+    const filteredPaths = uri.split("/").filter((path) => {
+        return path.length > 0 && path[0] !== ":" && path[0] !== "*";
+    });
+    return `/${filteredPaths.join("/")}`;
+};
diff --git a/src/helpers/getRouteByTag.ts b/src/helpers/getRouteByTag.ts
@@ -0,0 +1,9 @@
+import { IRouter } from "../config/router";
+
+export const getRouteByTag = (router: IRouter[], tag: string): IRouter => {
+    const route = router.find((route) => route.tag === tag);
+    if (route) {
+        return route;
+    }
+    return router.find((route) => route.tag === "error") as IRouter;
+};
diff --git a/src/helpers/setPageTitle.ts b/src/helpers/setPageTitle.ts
@@ -0,0 +1,6 @@
+import { siteConfig } from "../config/site";
+
+export const setPageTitle = (paging?: string): void => {
+    const { title, slogan } = siteConfig;
+    document.title = paging ? `${paging} - ${title}` : `${title} - ${slogan}`;
+};
diff --git a/src/helpers/setTitle.ts b/src/helpers/setTitle.ts
diff --git a/src/views/Contribution.tsx b/src/views/Contribution.tsx
@@ -0,0 +1,32 @@
+import { useEffect } from "react";
+import { menuConfig } from "../config/menu";
+import { siteConfig } from "../config/site";
+import { setPageTitle } from "../helpers/setPageTitle";
+import { Navigation } from "../components/Navigation";
+import { Footer } from "../components/Footer";
+import { useMatch } from "react-router-dom";
+import { getRouteByTag } from "../helpers/getRouteByTag";
+import { routerConfig } from "../config/router";
+
+const Contribution = () => {
+    const { router } = routerConfig;
+    const { slogan, copyright } = siteConfig;
+    const { title, base, icon, menu } = menuConfig;
+    useEffect(() => setPageTitle("Contribution"), []);
+
+    const currentRoute = getRouteByTag(router, "contribution").uri;
+    const { query } = useMatch(currentRoute)?.params || {};
+    console.log(query);
+
+    return (
+        <>
+            <Navigation title={title} base={base} icon={icon} menu={menu} />
+            <div className="flex min-h-screen justify-center">
+                <h1 className="m-auto">Contribution</h1>
+            </div>
+            <Footer text={slogan} copyright={copyright} />
+        </>
+    );
+};
+
+export default Contribution;