feat(client): add home page and navbar (#54)

* chore: update nextJS * feat: add NavBar and homepage hero section * feat: finish hero section * feat: implement who are we section for home page * feat: add home page statistics * feat: add badminton image to style home page * fix: image responsive width * fix: lint errors
Athlonix · Apr 13, 2024 · 427d31c · 427d31c
1 parent a274127
commit 427d31c
Show file tree

Hide file tree

Showing 15 changed files with 142 additions and 39 deletions.
diff --git a/apps/client/app/layout.tsx b/apps/client/app/layout.tsx
@@ -2,6 +2,8 @@ import '@repo/ui/globals.css';
 import { cn } from '@repo/ui/lib/utils';
 import type { Metadata } from 'next';
 import { Inter as FontSans } from 'next/font/google';
+import { navLinks } from './lib/navlinks';
+import { NavBar } from './ui/NavBar';
 
 const fontSans = FontSans({
   subsets: ['latin'],
@@ -20,7 +22,17 @@ export default function RootLayout({
 }): JSX.Element {
   return (
     <html lang="en">
-      <body className={cn('min-h-screen bg-background font-sans antialiased', fontSans.variable)}>{children}</body>
+      <body
+        className={cn(
+          'min-h-screen bg-background font-sans antialiased p-6 flex flex-col items-center',
+          fontSans.variable,
+        )}
+      >
+        <div className="max-w-7xl">
+          <NavBar links={navLinks} />
+          {children}
+        </div>
+      </body>
     </html>
   );
 }
diff --git a/apps/client/app/lib/navlinks.ts b/apps/client/app/lib/navlinks.ts
@@ -0,0 +1,7 @@
+export const navLinks = [
+  { name: 'Blog', href: '/blog' },
+  { name: 'Marketplace', href: '/marketplace' },
+  { name: 'Evenements', href: '/blog' },
+  { name: 'Sports', href: '/sports' },
+  { name: 'Quizz', href: '/quizz' },
+];
diff --git a/apps/client/app/page.tsx b/apps/client/app/page.tsx
@@ -1,9 +1,81 @@
 import { Button } from '@repo/ui/components/button';
+import Image from 'next/image';
+import Link from 'next/link';
 
 export default function Page(): JSX.Element {
   return (
-    <main>
-      <Button variant={'default'}>Hello Admin</Button>
+    <main className="flex flex-col items-center gap-y-8">
+      <section className="flex flex-col max-w-7xl gap-y-4">
+        <div className="flex gap-8 h-44 items-center justify-center">
+          <h1 className="font-semibold text-[144px]">Athlonix</h1>
+          <div className="h-[168px] max-w-[720px]">
+            <Image
+              src="/running_track.jpg"
+              alt="running track"
+              width={720}
+              height={168}
+              className="object-cover h-full rounded-tr-[96px]"
+            />
+          </div>
+        </div>
+
+        <div className="flex gap-8 h-44 items-center justify-start flex-nowrap">
+          <div className="h-[168px] max-w-[492px]">
+            <Image
+              src="/ski.jpg"
+              alt="ski in mountains"
+              width={500}
+              height={168}
+              className="object-cover h-full rounded-[96px]"
+            />
+          </div>
+          <h1 className="font-normal text-[144px] ">Association</h1>
+        </div>
+
+        <div className="flex gap-8 h-44 items-center justify-center">
+          <h1 className="font-semibold text-[144px]">Multisport</h1>
+          <div className="max-w-[545px] h-[168px]">
+            <Image
+              src="/kayak.jpg"
+              alt="kayaks"
+              width={720}
+              height={168}
+              className="object-cover h-full rounded-br-[96px]"
+            />
+          </div>
+        </div>
+      </section>
+
+      <section className="flex items-center gap-6 justify-between w-full">
+        <div className="flex-1 max-w-[600px]">
+          <h1 className="mb-4">Qui sommes nous ?</h1>
+          <p className="mb-6">
+            Veniam ad anim et esse nulla pariatur. Do est enim dolore laboris. Lorem labore sint consequat ex eu mollit
+            est nostrud ad enim. Mollit proident et fugiat do ut labore aliqua quis eu laboris.
+          </p>
+          <Button asChild className="w-44">
+            <Link href="/">Deviens membre !</Link>
+          </Button>
+        </div>
+        <div className="max-w-[496px] flex-1">
+          <Image className="w-full h-auto" src="/sport_balls.png" alt="sport balls" width={800} height={482} />
+        </div>
+      </section>
+
+      <section className="w-full flex items-center justify-center gap-12">
+        <div className="flex flex-col gap-2 justify-center bg-secondary p-6 rounded-2xl max-w-72 w-full h-44">
+          <h1>42+</h1>
+          <p className="font-normal text-xl">sports présents</p>
+        </div>
+        <div className="flex flex-col gap-2 justify-center bg-secondary p-6 rounded-2xl max-w-72 w-full h-44">
+          <h1>10000+</h1>
+          <p className="font-normal text-xl">adherents inscrits</p>
+        </div>
+        <div className="flex flex-col gap-2 justify-center bg-secondary p-6 rounded-2xl max-w-72 w-full h-44">
+          <h1>125+</h1>
+          <p className="font-normal text-xl">evenements organises</p>
+        </div>
+      </section>
     </main>
   );
 }
diff --git a/apps/client/app/ui/NavBar.tsx b/apps/client/app/ui/NavBar.tsx
@@ -0,0 +1,33 @@
+import { Button } from '@repo/ui/components/button';
+import Link from 'next/link';
+import type React from 'react';
+
+interface LinkProp {
+  name: string;
+  href: string;
+}
+
+interface NavBarProps {
+  links: LinkProp[];
+}
+
+export const NavBar: React.FC<NavBarProps> = ({ links }) => {
+  const navBarElements = links.map((link) => {
+    return (
+      <li key={link.name}>
+        <Button className="font-semibold hover:bg-slate-200 hover:text-black text-lg" variant={'ghost'} asChild>
+          <Link href={link.href}>{link.name}</Link>
+        </Button>
+      </li>
+    );
+  });
+
+  return (
+    <nav className="flex items-center justify-center mb-20">
+      <div className="w-full flex items-center justify-between">
+        <ul className="flex gap-4">{navBarElements}</ul>
+        <Button className="w-[120px]">Login</Button>
+      </div>
+    </nav>
+  );
+};
diff --git a/apps/client/package.json b/apps/client/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "clean": "git clean -xdf .turbo node_modules dist",
-    "dev": "next dev --port 3102 --turbo",
+    "dev": "next dev --port 3102",
     "build": "next build",
     "start": "next start",
     "lint": "biome check --apply .",

diff --git a/apps/client/public/badminton_ball.png b/apps/client/public/badminton_ball.png
diff --git a/apps/client/public/kayak.jpg b/apps/client/public/kayak.jpg
diff --git a/apps/client/public/next.svg b/apps/client/public/next.svg
diff --git a/apps/client/public/running_track.jpg b/apps/client/public/running_track.jpg
diff --git a/apps/client/public/ski.jpg b/apps/client/public/ski.jpg
diff --git a/apps/client/public/sport_balls.png b/apps/client/public/sport_balls.png
diff --git a/apps/client/public/turborepo.svg b/apps/client/public/turborepo.svg
diff --git a/apps/client/public/vercel.svg b/apps/client/public/vercel.svg
diff --git a/packages/ui/src/components/button.tsx b/packages/ui/src/components/button.tsx
@@ -15,6 +15,7 @@ const buttonVariants = cva(
         secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
+        navLink: '',
       },
       size: {
         default: 'h-10 px-4 py-2',

diff --git a/packages/ui/src/globals.css b/packages/ui/src/globals.css
@@ -23,7 +23,7 @@
     --muted-foreground: 215.4 16.3% 46.9%;
 
     --accent: 243 75% 59%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+    --accent-foreground: 0, 0%, 100%;
 
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
@@ -70,6 +70,7 @@
   * {
     @apply border-border;
   }
+
   body {
     @apply bg-background text-foreground;
   }
@@ -78,4 +79,15 @@
 
 * {
   box-sizing: border-box;
+}
+
+h1 {
+  font-weight: 800;
+  font-size: 48px;
+  line-height: 48px;
+}
+
+p {
+  font-size: 16px;
+  line-height: 32px;
 }