add hero and get-started page

1 files changed, 116 insertions, 0 deletions

diff --git a/src/app/Header.tsx b/src/app/Header.tsx
new file mode 100644
index 0000000..5efe628
--- /dev/null
+++ b/src/app/Header.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import { HoverBorderGradient } from "@/components/ui/hover-border-gradient";
+import { Dialog, DialogPanel } from "@headlessui/react";
+import {
+  ArrowUpCircleIcon,
+  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 Us", href: "/about" },
+    { name: "People", href: "/people" },
+    { 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="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 className="lg:flex lg:flex-1 lg:justify-end">
+            <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="/get-started">
+                <HoverBorderGradient
+                  containerClassName="rounded-full"
+                  as="button"
+                  className=" bg-white text-black flex items-center space-x-2 cursor-pointer"
+                >
+                  <span className="text-indigo-600 font-semibold">
+                    Get Started
+                  </span>
+                  <ArrowUpCircleIcon className="size-6 my-auto rotate-45 button-gradient rounded-full inline" />
+                </HoverBorderGradient>
+              </Link>
+            </motion.div>
+          </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=""
+                src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500"
+                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>
+  );
+}