From ef9e9919490c0a94c74368eb3b4c1f9e7ee3cf10 Mon Sep 17 00:00:00 2001 From: MarconLP <13001502+MarconLP@users.noreply.github.com> Date: Wed, 26 Apr 2023 20:17:35 +0200 Subject: [PATCH] re-design and extract footer and header into their own components --- src/components/Footer.tsx | 37 +++++++++++ src/components/Header.tsx | 111 +++++++++++++++++++++++++++++++ src/pages/index.tsx | 135 ++------------------------------------ 3 files changed, 153 insertions(+), 130 deletions(-) create mode 100644 src/components/Footer.tsx create mode 100644 src/components/Header.tsx diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx new file mode 100644 index 0000000..088252e --- /dev/null +++ b/src/components/Footer.tsx @@ -0,0 +1,37 @@ +export default function Footer() { + return ( +
+ +
+ ); +} diff --git a/src/components/Header.tsx b/src/components/Header.tsx new file mode 100644 index 0000000..2299ab1 --- /dev/null +++ b/src/components/Header.tsx @@ -0,0 +1,111 @@ +import Image from "next/image"; +import Link from "next/link"; +import { useEffect, useState } from "react"; +import { Bars3Icon } from "@heroicons/react/24/outline"; + +const navigation = [ + { name: "Features", href: "/#features" }, + { name: "Pricing", href: "/pricing" }, + { name: "Discord", href: "https://discord.com/invite/invalid" }, +]; + +export default function Header() { + const [attop, setAtTop] = useState(true); + const [navbarOpen, setNavbarOpen] = useState(false); + + const closeNav = () => { + setNavbarOpen(false); + }; + useEffect(() => { + document.addEventListener("scroll", () => { + setAtTop(window.scrollY <= 1); + }); + }, []); + + return ( +
+
+ + logo + + +
+ {navigation.map(({ href, name }) => ( + + + {name} + + + ))} +
+ + Log in + + + <> +
+ +
+ Open App +
+ +
setNavbarOpen(!navbarOpen)} + > + +
+
+ +
+ +
+ Overview +
+ + +
+ Contact +
+ + +
+ Changelog +
+ + +
+ Roadmap +
+ +
+ +
+
+ ); +} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 5b587b7..471961c 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,11 +1,6 @@ import { type GetServerSideProps, type NextPage } from "next"; import Head from "next/head"; import { getSession } from "next-auth/react"; -import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline"; - -import { Dialog } from "@headlessui/react"; -import { useState } from "react"; -import Link from "next/link"; import { usePostHog } from "posthog-js/react"; import { useAtom } from "jotai"; import recordVideoModalOpen from "~/atoms/recordVideoModalOpen"; @@ -13,6 +8,8 @@ import VideoRecordModal from "~/components/VideoRecordModal"; import { ShareIcon, VideoCameraIcon } from "@heroicons/react/24/solid"; import { CheckIcon } from "@heroicons/react/20/solid"; import { CheckCircleIcon } from "@heroicons/react/24/outline"; +import Footer from "~/components/Footer"; +import Header from "~/components/Header"; const navigation = [ { name: "Features", href: "#features" }, @@ -22,7 +19,6 @@ const navigation = [ const Home: NextPage = () => { const [, setRecordOpen] = useAtom(recordVideoModalOpen); - const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const posthog = usePostHog(); const openRecordModal = () => { @@ -41,103 +37,8 @@ const Home: NextPage = () => {
-
- - -
- -
- - Snapify - - - -
-
-
-
- {navigation.map((item) => ( - - {item.name} - - ))} -
-
- - Log in - -
-
-
- -
-
+
+
{/*
*/} @@ -435,33 +336,7 @@ const Home: NextPage = () => {
-
- -
+