Merge branch 'StartPage' into 'main'

Start page

See merge request !22

app/page.tsx

-import { buttonVariants } from '@/components/ui/button'
-import { cn } from '@/lib/utils'
-import Link from 'next/link'
+// import { buttonVariants } from '@/components/ui/button'
+// import { cn } from '@/lib/utils'
+// import Link from 'next/link'
+
+// export default function Home() {
+//   return (
+//     <>
+//       <section className="space-y-6 pb-8 pt-6 md:pb-12 md:pt-10 lg:py-32">
+//         <div className="container flex max-w-[64rem] flex-col items-center gap-4 text-center">
+//           <h1 className="font-heading text-3xl sm:text-5xl md:text-6xl lg:text-7xl">
+//             Welcome to GameUnity!
+//           </h1>
+//           <p className="max-w-[42rem] leading-normal text-muted-foreground sm:text-xl sm:leading-8">
+//             This will be our Home Page and is still WIP
+//           </p>
+//           <div className="space-x-4">
+//             <Link href="/login" className={cn(buttonVariants({ size: "lg" }))}>
+//               Log In
+//             </Link>
+//             <Link href="/signup" className={cn(buttonVariants({ size: "lg" }))}>
+//               Sign Up
+//             </Link>
+//           </div>
+//           <div className="flex flex-col space-y-4">
+//             <Link href="/games" className={cn(buttonVariants({ size: "lg" }))}>
+//               Games List Progress
+//             </Link>
+//             <Link href="/home" className={cn(buttonVariants({ size: "lg" }))}>
+//               Home List Progress
+//             </Link>
+//           </div>
+//         </div>
+//       </section>
+//     </>
+//   )
+// }
+
+import Link from "next/link"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+import { SiteFooter } from "@/components/site-footer"
+import { GameUnityLogo } from "@/components/logo"
+
+
+
+export default async function IndexPage() {
 
-export default function Home() {
   return (
     <>
       <section className="space-y-6 pb-8 pt-6 md:pb-12 md:pt-10 lg:py-32">
         <div className="container flex max-w-[64rem] flex-col items-center gap-4 text-center">
+          <div className="flex items-center">
+            <Link href="/" className={cn("rounded-full p-3 hover:bg-accent")}>
+              <GameUnityLogo className="h-8 w-8" />
+            </Link>
+          </div>
           <h1 className="font-heading text-3xl sm:text-5xl md:text-6xl lg:text-7xl">
-            Welcome to GameUnity!
+            The ultimate gaming hub
           </h1>
           <p className="max-w-[42rem] leading-normal text-muted-foreground sm:text-xl sm:leading-8">
-            This will be our Home Page and is still WIP
+            Step into a gaming world beyond imagination. Experience unparalleled features, connect with a vibrant community, and unlock your true gaming potential. Elevate your gameplay, discover new horizons, and make every gaming moment count. Join us and embark on an extraordinary gaming adventure like no other.
           </p>
-          <div className="space-x-4">
+          <div className="space-x-5">
             <Link href="/login" className={cn(buttonVariants({ size: "lg" }))}>
-              Log In
+              Login
             </Link>
             <Link href="/signup" className={cn(buttonVariants({ size: "lg" }))}>
-              Sign Up
+              Sign-Up
             </Link>
           </div>
-          <div className="flex flex-col space-y-4">
-            <Link href="/games" className={cn(buttonVariants({ size: "lg" }))}>
-              Games List Progress
-            </Link>
-            <Link href="/home" className={cn(buttonVariants({ size: "lg" }))}>
-              Home List Progress
-            </Link>
+          <Link href="/home" className={cn(buttonVariants({ size: "lg" }))}>
+            Home Feed
+          </Link>
+          <Link href="/games" className={cn(buttonVariants({ size: "lg" }))}>
+            Games List
+          </Link>
+        </div>
+      </section>
+      <section
+        id="features"
+        className="container space-y-6 bg-slate-50 py-8 dark:bg-transparent md:py-12 lg:py-24"
+      >
+        <div className="mx-auto flex max-w-[58rem] flex-col items-center space-y-4 text-center">
+          <h2 className="font-heading text-3xl leading-[1.1] sm:text-3xl md:text-6xl">
+            Features
+          </h2>
+          <p className="max-w-[85%] leading-normal text-muted-foreground sm:text-lg sm:leading-7">
+            Create your Profile, find New Games, Rate & Review them, Add your Favorite Games to your List, Help and socialize with other Players,
+            show of your skills with hightscores and clips
+          </p>
+        </div>
+        <div className="mx-auto grid justify-center gap-4 sm:grid-cols-2 md:max-w-[64rem] md:grid-cols-3">
+          <div className="relative overflow-hidden rounded-lg border bg-background p-2">
+            <div className="flex h-[180px] flex-col justify-between rounded-md p-6">
+              <div className="space-y-2">
+                <h3 className="font-bold">Discover new games </h3>
+                <p className="text-sm text-muted-foreground">
+                  The platform offers a way to discover and try new games. Through recommendations and ratings from other users, gamers gain inspiration for new games and can broaden their horizons.
+                </p>
+              </div>
+            </div>
           </div>
+          <div className="relative overflow-hidden rounded-lg border bg-background p-2">
+            <div className="flex h-[180px] flex-col justify-between rounded-md p-6">
+              <div className="space-y-2">
+                <h3 className="font-bold">Community-Interaction</h3>
+                <p className="text-sm text-muted-foreground">
+                  Users can connect with other players, ask and answer questions, chat with other gamers, and make friends. The platform promotes interaction among gamers and creates a sense of community and belonging.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="relative overflow-hidden rounded-lg border bg-background p-2">
+            <div className="flex h-[180px] flex-col justify-between rounded-md p-6">
+              <div className="space-y-2">
+                <h3 className="font-bold">Manage your Game collection</h3>
+                <p className="text-sm text-muted-foreground">
+                  The platform provides an easy way to search, collect, and organize games. With various filtering and sorting options, users always have an overview of their game collection.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="mx-auto text-center md:max-w-[58rem]">
+          <p className="leading-normal sm:text-lg sm:leading-7">
+            Level up your gaming experience with us
+          </p>
         </div>
       </section>
+      <SiteFooter className="border-t" />
     </>
   )
 }