make header for non-hero pages and add images

1 files changed, 108 insertions, 0 deletions

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 0000000..0a17ad2
--- /dev/null
+++ b/src/components/Header.tsx
@@ -0,0 +1,108 @@
+"use client";
+
+import { Dialog, DialogPanel } from "@headlessui/react";
+import {
+  ArrowLeftCircleIcon,
+  Bars3Icon,
+  XMarkIcon,
+} from "@heroicons/react/24/outline";
+import { motion } from "motion/react";
+import Link from "next/link";
+import { useState } from "react";
+
+export default function Header() {
+  const navigation = [
+    { name: "About", href: "/about" },
+    { name: "Blog", href: "/blog" },
+    { name: "Contact", href: "/contact" },
+  ];
+
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  return (
+    <div className="fixed inset-x-0 top-0 z-50">
+      <nav aria-label="Global" className="p-6 lg:px-8">
+        <div className="flex items-center justify-between max-w-7xl mx-auto rounded-full p-1.5 shadow-lg shadow-gray-700/10 bg-white/30 backdrop-blur-sm">
+          <div className="lg:flex lg:flex-1">
+            <motion.div
+              whileHover={{ scale: 1.15, y: -2, rotate: 1 }}
+              whileTap={{ scale: 0.9 }}
+              initial={{ opacity: 0, y: -20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{
+                type: "spring",
+                stiffness: 400,
+                damping: 17,
+                duration: 0.2,
+              }}
+            >
+              <Link href="/">
+                <button className="  text-black flex items-center space-x-2 cursor-pointer">
+                  <ArrowLeftCircleIcon className="size-9 my-auto button-gradient rounded-full inline" />
+                </button>
+              </Link>
+            </motion.div>
+          </div>
+          <div className="flex">
+            <motion.button
+              whileHover={{ scale: 1.1 }}
+              whileTap={{ scale: 0.9 }}
+              type="button"
+              onClick={() => setMobileMenuOpen(true)}
+              className="inline-flex cursor-pointer items-center justify-center rounded-full p-2 ring-1 ring-inset ring-gray-900/10 hover:ring-gray-900/20 shadow-lg bg-white/50"
+            >
+              <span className="sr-only">Open main menu</span>
+              <Bars3Icon aria-hidden="true" className="size-6" />
+            </motion.button>
+          </div>
+        </div>
+      </nav>
+      <Dialog open={mobileMenuOpen} onClose={setMobileMenuOpen}>
+        <div className="fixed inset-0 z-50" />
+        <DialogPanel className="fixed inset-y-0 left-0 z-50 w-full overflow-y-auto bg-gray-900 p-6 sm:max-w-sm sm:ring-1 sm:ring-gray-100/10">
+          <div className="flex items-center justify-between">
+            <button
+              type="button"
+              onClick={() => setMobileMenuOpen(false)}
+              className="-m-2.5 rounded-md p-2.5 text-gray-200"
+            >
+              <span className="sr-only">Close menu</span>
+              <XMarkIcon aria-hidden="true" className="size-6" />
+            </button>
+            <a href="#" className="-m-1.5 p-1.5">
+              <span className="sr-only">Your Company</span>
+              <img
+                alt="Sensible Scholars Logo"
+                src="favicon.png"
+                className="h-8 w-auto"
+              />
+            </a>
+          </div>
+          <div className="mt-6 flow-root">
+            <div className="-my-6 divide-y divide-white/10">
+              <div className="space-y-2 py-6">
+                {navigation.map((item) => (
+                  <a
+                    key={item.name}
+                    href={item.href}
+                    className="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-white hover:bg-white/5"
+                  >
+                    {item.name}
+                  </a>
+                ))}
+              </div>
+              <div className="py-6">
+                <Link
+                  href="/get-started"
+                  className="-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-white hover:bg-white/5"
+                >
+                  Get Started <span aria-hidden="true">&rarr;</span>
+                </Link>
+              </div>
+            </div>
+          </div>
+        </DialogPanel>
+      </Dialog>
+    </div>
+  );
+}