Merge pull request #5 from quantum-brackets/home-page

Home page

.prettierrc.json

@@ -6,5 +6,6 @@
   "trailingComma": "es5",
   "bracketSpacing": true,
   "jsxBracketSameLine": false,
-  "arrowParens": "always"
+  "arrowParens": "always",
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

package.json

@@ -23,6 +23,7 @@
     "nprogress": "^0.2.0",
     "react": "^18",
     "react-dom": "^18",
+    "react-icons": "^5.3.0",
     "sonner": "^1.5.0",
     "tailwind-merge": "^2.5.2",
     "yup": "^1.4.0",
@@ -39,6 +40,7 @@
     "lint-staged": "^15.2.9",
     "postcss": "^8",
     "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.6",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   },

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

@@ -0,0 +1,29 @@
+import Link from "next/link";
+import SectionWrapper from "~/components/home/section-wrapper";
+
+const tel = "+61 234–567 8910";
+const email = "[email protected]";
+
+export default function Contact() {
+  return (
+    <SectionWrapper
+      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."
+    >
+      <main className="mx-auto flex w-[450px] justify-between gap-8 largeMobile:!w-full largeMobile:flex-col tablet_768:w-[90%]">
+        <div className="flex flex-col items-center">
+          <h6 className="text-xs font-black largeLaptop:text-sm">Email</h6>
+          <Link href={"mailto:" + email} className="hover:underline">
+            <small className="largeLaptop:text-sm">{email}</small>
+          </Link>
+        </div>
+        <div className="flex flex-col items-center">
+          <h6 className="text-xs font-black largeLaptop:text-sm">Phone</h6>
+          <Link href={"tel:" + tel} className="hover:underline">
+            <small className="largeLaptop:text-sm">{tel}</small>
+          </Link>
+        </div>
+      </main>
+    </SectionWrapper>
+  );
+}

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

@@ -0,0 +1,38 @@
+import SectionWrapper from "~/components/home/section-wrapper";
+import StaticCard from "~/components/static-card";
+import Beef from "~/assets/images/home/cuisines/beef.jpg";
+import Sushi from "~/assets/images/home/cuisines/sushi.jpg";
+import Omelette from "~/assets/images/home/cuisines/omelette.jpg";
+
+const cuisines = [
+  {
+    images: [Beef, Sushi, Omelette],
+    link: "/evergreen-oasis",
+    name: "Evergreen Oasis",
+    location: "Abuja Municipal",
+  },
+  {
+    images: [Beef, Sushi, Omelette],
+    link: "/evergreen-oasis",
+    name: "Evergreen Oasis",
+    location: "Abuja Municipal",
+  },
+  {
+    images: [Beef, Sushi, Omelette],
+    link: "/evergreen-oasis",
+    name: "Evergreen Oasis",
+    location: "Abuja Municipal",
+  },
+];
+
+export default function Cuisine() {
+  return (
+    <SectionWrapper title="Cuisine" subtitle="Elevate Your Palate with Every Bite!">
+      <main className="grid grid-cols-3 gap-16 largeMobile:!grid-cols-1 tablet_768:!gap-y-8 tablet_768:!pl-0 tablet:gap-12 tablet:px-4 largeTabletAndBelow:grid-cols-2 [@media(max-width:500px)]:!grid-cols-1">
+        {cuisines.map((cuisine, index) => (
+          <StaticCard {...cuisine} key={index} />
+        ))}
+      </main>
+    </SectionWrapper>
+  );
+}

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

@@ -0,0 +1,50 @@
+import Image from "next/image";
+import BirthdayParty from "~/assets/images/home/events/birthday-party.jpg";
+import FlowerOnTable from "~/assets/images/home/events/flower-on-table.jpg";
+import TableOnBeach from "~/assets/images/home/events/table-on-beach.jpg";
+import SectionWrapper from "~/components/home/section-wrapper";
+
+export default function Events() {
+  return (
+    <SectionWrapper
+      title="Events"
+      subtitle="45Group is your gateway to unforgettable experiences. Enjoy unique moments that createlasting memories."
+    >
+      <main className="grid grid-cols-2 gap-6 largeMobile:!gap-2 tablet_768:gap-4 largeLaptop:gap-10">
+        <figure className="relative max-h-[800px] w-full overflow-hidden rounded-xl">
+          <Image
+            src={FlowerOnTable}
+            alt="Image of a flowers placed on a table"
+            className="h-full w-full object-cover"
+          />
+          <div className="absolute top-0 z-[2] h-full w-full bg-black/40" />
+        </figure>
+        <div className="flex flex-col gap-8 self-end largeMobile:gap-2 largeLaptop:gap-10">
+          <p className="text-sm largeMobile:!text-[0.5rem] largeMobile:!leading-[12px] tablet:text-xs">
+            45Group is your gateway to unforgettable experiences, hosting events across a variety of
+            stunning locations. Immerse yourself in unique moments that linger in your mind,
+            creating memories that will last a lifetime.
+          </p>
+          <div className="grid grid-cols-2 gap-6 largeMobile:!gap-2 tablet_768:gap-4 largeLaptop:gap-10">
+            <figure className="relative max-h-[600px] overflow-hidden rounded-lg">
+              <Image
+                src={BirthdayParty}
+                alt="Image of a birthday party"
+                className="h-full w-full object-cover"
+              />
+              <div className="absolute top-0 z-[2] h-full w-full bg-black/40" />
+            </figure>
+            <figure className="relative max-h-[600px] overflow-hidden rounded-lg">
+              <Image
+                src={TableOnBeach}
+                alt="Image of a table on the beach"
+                className="h-full w-full object-cover"
+              />
+              <div className="absolute top-0 z-[2] h-full w-full bg-black/40" />
+            </figure>
+          </div>
+        </div>
+      </main>
+    </SectionWrapper>
+  );
+}

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

@@ -0,0 +1,63 @@
+import Image from "next/image";
+import Palas from "~/assets/images/home/lodges/palas.jpg";
+import SectionWrapper from "~/components/home/section-wrapper";
+
+const data = [
+  {
+    image: Palas,
+    location: "Abuja",
+  },
+  {
+    image: Palas,
+    location: "Lagos",
+  },
+  {
+    image: Palas,
+    location: "Ogun",
+  },
+  {
+    image: Palas,
+    location: "Abuja",
+  },
+  {
+    image: Palas,
+    location: "Abuja",
+  },
+  {
+    image: Palas,
+    location: "Abuja",
+  },
+  {
+    image: Palas,
+    location: "Abuja",
+  },
+  {
+    image: Palas,
+    location: "Abuja",
+  },
+  {
+    image: Palas,
+    location: "Abuja",
+  },
+];
+
+export default function Lodges() {
+  return (
+    <SectionWrapper title="Lodges" subtitle="Find your next adventure at Lodges Location!">
+      <main className="grid w-full grid-flow-col gap-8 overflow-x-auto pb-2">
+        {data.map(({ image, location }, index) => (
+          <div
+            key={index}
+            className="relative h-[600px] w-[400px] overflow-hidden rounded-xl largeMobile:!h-[450px] largeMobile:!w-[250px] tablet:h-[500px] tablet:w-[300px]"
+          >
+            <Image src={image} alt="Image of a palas" className="h-full w-full object-cover" />
+            <div className="absolute top-0 z-[2] h-full w-full bg-black/40" />
+            <h1 className="absolute right-1/2 top-[50px] z-[3] translate-x-1/2 text-2xl text-white">
+              {location}
+            </h1>
+          </div>
+        ))}
+      </main>
+    </SectionWrapper>
+  );
+}

src/app/(static)/(home)/layout.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+
+type Props = Record<"children" | "lodges" | "events" | "cuisine" | "contact", ReactNode>;
+
+export default function Layout({ children, lodges, events, cuisine, contact }: Props) {
+  return (
+    <div className="max-w-App flex w-full flex-col gap-16 pb-16">
+      {children}
+      {lodges}
+      {events}
+      {cuisine}
+      {contact}
+    </div>
+  );
+}

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

@@ -0,0 +1,19 @@
+import Image from "next/image";
+import Lodge from "~/assets/images/home/intro/lodges.jpg";
+
+export default function Home() {
+  return (
+    <section className="relative h-[80vh] max-h-[600px] w-full">
+      <Image
+        src={Lodge}
+        alt="Images of lodges, events and cuisine"
+        priority
+        className="h-full w-full object-cover"
+      />
+      <div className="absolute top-0 z-[2] h-full w-full bg-black/60" />
+      <h1 className="absolute bottom-1/2 right-1/2 z-10 translate-x-1/2 translate-y-1/2 font-dancing_script text-4xl font-bold text-white mediumMobile:text-3xl">
+        All In One
+      </h1>
+    </section>
+  );
+}

src/app/(static)/layout.tsx

@@ -0,0 +1,72 @@
+import { ReactNode } from "react";
+import Link from "next/link";
+import { FaSquareXTwitter, FaInstagram, FaFacebook } from "react-icons/fa6";
+import Logo from "~/components/logo";
+import Button from "~/components/button";
+import NavbarMenu from "~/modules/static-layout/navbar-menu";
+
+type Props = {
+  children: ReactNode;
+};
+
+export default function Layout({ children }: Props) {
+  return (
+    <div className="flex min-h-screen flex-col items-center">
+      <header className="flex w-full max-w-App items-center justify-between gap-8 p-4 px-8 largeMobile:px-4">
+        <div className="flex items-center gap-8 largeMobile:gap-4">
+          <NavbarMenu />
+          <Link href={"/"}>
+            <Logo className="w-[3rem] largeMobile:w-[2.5rem]" />
+          </Link>
+        </div>
+        <div className="flex items-center justify-between gap-24 tablet:gap-12 largeLaptop:gap-44">
+          <ul className="flex gap-8 tablet_768:hidden tablet:gap-6 largeLaptop:gap-12">
+            <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">
+                Contact
+              </Link>
+            </li>
+          </ul>
+          <Button>Reserve</Button>
+        </div>
+      </header>
+      <main className="flex w-full flex-grow justify-center">{children}</main>
+      <footer className="flex w-full max-w-App justify-between gap-8 p-4 px-8 pr-16 largeMobile:px-4">
+        <Link href={"/"}>
+          <Logo className="w-[2.5rem]" />
+        </Link>
+        <div className="flex items-center gap-8 largeMobile:gap-4">
+          <Link href={""}>
+            <FaSquareXTwitter className="text-xl text-zinc-700" />
+          </Link>
+          <Link href={""}>
+            <FaInstagram className="text-xl text-zinc-700" />
+          </Link>
+          <Link href={""}>
+            <FaFacebook className="text-xl text-zinc-700" />
+          </Link>
+        </div>
+      </footer>
+    </div>
+  );
+}

src/app/globals.css

@@ -30,6 +30,10 @@
     --secondary-900: #1b4c29;
     --secondary-950: #0a2913;
   }
+
+  * {
+    @apply font-merriweather;
+  }
 }
 
 #nprogress {

src/app/layout.tsx

@@ -1,14 +1,12 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
 import { ThemeProvider } from "@mui/material";
 import { AppRouterCacheProvider } from "@mui/material-nextjs/v13-appRouter";
 import "./globals.css";
 import theme from "./theme";
 import { cn } from "~/utils/helpers";
 import TanstackQueryProvider from "~/providers/tanstack-query";
 import Toast from "~/components/toast";
-
-const inter = Inter({ subsets: ["latin"] });
+import { dancing_script, merriweather } from "~/utils/fonts";
 
 export const metadata: Metadata = {
   title: "45Group",
@@ -22,7 +20,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={cn(inter.className, "scroll-smooth min-h-screen")}>
+      <body
+        className={cn(dancing_script.variable, merriweather.variable, "min-h-screen scroll-smooth")}
+      >
         <AppRouterCacheProvider>
           <TanstackQueryProvider>
             <ThemeProvider theme={theme}>