Merge pull request #11 from quantum-brackets/about

About

src/app/(static)/(home)/@contact/page.tsx

@@ -7,6 +7,7 @@ const email = "[email protected]";
 export default function Contact() {
   return (
     <SectionWrapper
+      id="contact"
       title="Contact"
       subtitle="For comprehensive support and assistance with your travel needs, please don't hesitate to contact the dedicated team at 45Group, who can expertly help you with booking comfortable lodges for your stay, guide you through the process of attending local events and attractions, or assist in making reservations at the finest restaurants in the area to enhance your dining experience."
     >

src/app/(static)/about/page.tsx

@@ -0,0 +1,48 @@
+export default function About() {
+  return (
+    <div className="flex max-w-[800px] flex-col items-center gap-8 p-12 largeMobile:gap-6 largeMobile:p-8 largeMobile:px-4">
+      <h1 className="text-center text-2xl uppercase largeMobile:text-lg">WHERE THE HEART IS</h1>
+      <main className="flex flex-col gap-9">
+        <div className="flex flex-col gap-6 largeMobile:gap-4">
+          <p className="text-center text-sm leading-7 largeMobile:text-xs largeMobile:leading-6">
+            {
+              "We're a quaint and dainty boutique hotel with 10 rooms and a pent, with a rooftop bar. Peek in the unique inn and feel the exclusive luxury of our executive and deluxe rooms, business suites and exquisite Penthouse."
+            }
+          </p>
+          <p className="text-center text-sm leading-7 largeMobile:text-xs largeMobile:leading-6">
+            {
+              "Located at the right angle of 45th street, 3 minutes drive to major main roads and only 10 away from the Marina, in State Housing Suburb, hub and heart of Calabar. Nestle in the restful landscape and escape to a little ecstasy and fantasy."
+            }
+          </p>
+          <p className="text-center text-sm leading-7 largeMobile:text-xs largeMobile:leading-6">
+            {
+              "Bar 90°! Our rooftop bar with superb music and signature drinks! 50% off signatures on Karaoke Friday and 1 free signature with a meal order for Ladies' Saturday's. Restaurant 45, from street food to delicacies and tasty takeaways, our glorious food is a fusion of ethnic and exotic cuisine. Deliveries coming soon."
+            }
+          </p>
+          <p className="text-center text-sm leading-7 largeMobile:text-xs largeMobile:leading-6">
+            {
+              "Your choice, restaurant and bar open 24h! Business, leisure or pleasure? Seminars, conferences, bachelor’s eves, wedding receptions, or birthday parties in our hall complete with projector and surround sound, customised seating and catering. With us, it's personal. It's home sweet home, it's home away from home... It's where the heart is"
+            }
+          </p>
+        </div>
+        <div className="flex flex-col items-center gap-6">
+          <h2 className="text-lg capitalize largeMobile:text-base">The Team</h2>
+          <div className="flex w-full flex-wrap items-center justify-evenly gap-8">
+            <div className="flex flex-col items-center gap-2">
+              <h4 className="text-sm largeMobile:text-xs">Catherine Anani</h4>
+              <small className="text-xs largeMobile:text-[10px]">General Manager</small>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+              <h4 className="text-sm largeMobile:text-xs">Catherine Anani</h4>
+              <small className="text-xs largeMobile:text-[10px]">General Manager</small>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+              <h4 className="text-sm largeMobile:text-xs">Catherine Anani</h4>
+              <small className="text-xs largeMobile:text-[10px]">General Manager</small>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}

src/app/(static)/events/page.tsx

@@ -24,7 +24,7 @@ const lodges = [
   },
 ];
 
-export default function Lodges() {
+export default function Events() {
   return (
     <div className="flex w-full flex-col gap-12 p-12 largeMobile:pt-10 tablet:px-4">
       <header className="flex flex-col items-center gap-10 largeMobile:gap-6">

src/components/home/section-wrapper.tsx

@@ -1,14 +1,18 @@
 import { ReactNode } from "react";
 
 type Props = {
+  id?: string;
   title: string;
   subtitle: string;
   children: ReactNode;
 };
 
-export default function SectionWrapper({ title, children, subtitle }: Props) {
+export default function SectionWrapper({ id, title, children, subtitle }: Props) {
   return (
-    <section className="flex flex-col gap-8 px-12 largeMobile:gap-6 tablet_768:!px-4 tablet:px-6 largeLaptop:px-16">
+    <section
+      id={id}
+      className="flex flex-col gap-8 px-12 largeMobile:gap-6 tablet_768:!px-4 tablet:px-6 largeLaptop:px-16"
+    >
       <header className="flex items-center gap-2">
         <h1 className="text-2xl largeMobile:!text-base tablet:text-xl">
           {title} ~{" "}

src/modules/static-layout/navbar-menu.tsx

@@ -2,14 +2,37 @@
 
 import { useState } from "react";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import { Drawer, IconButton } from "@mui/material";
 import { HiOutlineMenuAlt2 } from "react-icons/hi";
 import { IoClose } from "react-icons/io5";
 import Logo from "~/components/logo";
+import { cn } from "~/utils/helpers";
+
+const links = [
+  {
+    href: "/lodges",
+    text: "Lodges",
+  },
+  {
+    href: "/events",
+    text: "Events",
+  },
+  {
+    href: "/cuisines",
+    text: "Cuisines",
+  },
+  {
+    href: "/about",
+    text: "About",
+  },
+];
 
 export default function NavbarMenu() {
   const [open, setOpen] = useState(false);
 
+  const pathname = usePathname();
+
   function closeDrawer() {
     setOpen(false);
   }
@@ -35,28 +58,21 @@ export default function NavbarMenu() {
             <IoClose className="!text-zinc-700" />
           </IconButton>
           <ul className="flex flex-col items-center gap-8 tablet:gap-6 largeLaptop:gap-12">
+            {links.map(({ href, text }, index) => (
+              <li key={index}>
+                <Link
+                  href={href}
+                  className={cn("text-sm hover:underline", {
+                    underline: pathname === href,
+                  })}
+                  onClick={closeDrawer}
+                >
+                  {text}
+                </Link>
+              </li>
+            ))}
             <li>
-              <Link href={"/lodges"} className="text-sm hover:underline">
-                Lodges
-              </Link>
-            </li>
-            <li>
-              <Link href={"/events"} className="text-sm hover:underline">
-                Events
-              </Link>
-            </li>
-            <li>
-              <Link href={"/cuisines"} className="text-sm hover:underline">
-                Cuisines
-              </Link>
-            </li>
-            <li>
-              <Link href={"/about"} className="text-sm hover:underline">
-                About
-              </Link>
-            </li>
-            <li>
-              <Link href={"/about"} className="text-sm hover:underline">
+              <Link href={"/#contact"} onClick={closeDrawer} className="text-sm hover:underline">
                 Contact
               </Link>
             </li>