Create landing page

HACC-2023 · Nov 11, 2023 · 1d8ceac · 1d8ceac
1 parent 7cd1467
commit 1d8ceac
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 10 deletions.
diff --git a/my-app/next.config.js b/my-app/next.config.js
@@ -2,6 +2,7 @@
 const nextConfig = {
   reactStrictMode: true,
   images: {
+    domains: ['images.unsplash.com'],
     remotePatterns: [
       {
         protocol: 'https',

diff --git a/my-app/src/pages/_app.js b/my-app/src/pages/_app.js
@@ -4,19 +4,20 @@ import { SessionProvider } from "next-auth/react";
 import { ToastContainer } from "react-toastify";
 import DialogflowChatWidget from "@/components/chatbot/DialogflowChatWidget";
 import "@/styles/globals.css";
-import 'react-toastify/dist/ReactToastify.css';
-
+import "react-toastify/dist/ReactToastify.css";
+import { useRouter } from "next/router";
 
 const App = ({ Component, pageProps: { session, ...pageProps } }) => {
+  const router = useRouter();
+
   return (
     <>
       <SessionProvider session={session}>
         <div className="flex md:flex-col lg:flex-row min-h-screen">
-          <SideNavbar />
+          {router.pathname !== "/" && <SideNavbar />}
           <div className="flex-1">
             <Component {...pageProps} />
           </div>
-          <MobileNavbar />
           <ToastContainer />
           <DialogflowChatWidget />
         </div>

diff --git a/my-app/src/pages/index.jsx b/my-app/src/pages/index.jsx
@@ -1,11 +1,66 @@
-import MobileNavbar from '@/components/navbar/MobileNavbar';
+import Link from "next/link";
+import Image from "next/image";
+import dynamic from "next/dynamic";
+import { useState, useEffect } from "react";
+
+const LocationAggregatorMap = dynamic(() => import("@/components/map/LocationAggregatorMap"), {
+  ssr: false,
+});
+
+// TODO: download the image instead of using the url
 
 const Home = () => {
+  const [coordinates, setCoordinates] = useState([]);
+
+  useEffect(() => {
+    const getData = async () => {
+      const res = await fetch("/api/mongo/event/all");
+      const data = await res.json();
+      const coords = data.map((item) => {
+        return { COORDINATES: [item.mapLong, item.mapLat] };
+      });
+      setCoordinates(coords);
+    };
+    getData().then((r) => console.log("Fetched locations"));
+  }, []);
+
   return (
-    <div className='min-h-screen'>
-      <MobileNavbar />
-      <div className='flex justify-center items-center min-h-screen'>
-        Welcome to Next.js Template
+    <div className="min-h-screen">
+      <div
+        className="relative bg-cover bg-center h-[85vh] border-b border-gray-800"
+        style={{
+          backgroundImage:
+            "url(https://images.unsplash.com/photo-1565214975484-3cfa9e56f914?q=80&w=2246&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)",
+        }}
+      >
+        <div className="absolute inset-0 gradient-overlay" />
+        <div className="absolute inset-0 flex items-center justify-center">
+          <div className="text-white text-center">
+            <h1 className="text-5xl font-extrabold mb-4">Marine Debris Reporting Platform</h1>
+            <p className="text-xl text-gray-200">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor iure quam voluptatum
+              veniam sit aspernatur.
+            </p>
+            <div className="flex gap-2 justify-center mt-10">
+              <Link href="/report">
+                <span className="bg-primary text-white font-bold px-12 py-4 text-lg md:text-base rounded-full">
+                  Make a Report
+                </span>
+              </Link>
+              <Link href="/auth/credentials-signin">
+                <span className="text-white font-bold px-6 py-4 text-lg md:text-base rounded-full border">
+                  Sign in
+                </span>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="bg-[#080D0D] px-5 md:px-10 py-20">
+        <section className="bg-white rounded-lg px-5 md:px-10 py-5 md:py-10">
+          <h1 className="text-xl font-bold text-gray-800 mb-2">Reports</h1>
+          <LocationAggregatorMap data={coordinates} />
+        </section>
       </div>
     </div>
   );

diff --git a/my-app/src/styles/globals.css b/my-app/src/styles/globals.css
@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+.gradient-overlay {
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
+  }