Merge pull request #62 from Abhish7k/master

Landing page Hero section
dinxsh · Jul 22, 2024 · 6710241 · 6710241
2 parents d56242f + 4a07ec6
commit 6710241
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 24 deletions.
diff --git a/@/components/ui/button.jsx b/@/components/ui/button.jsx
@@ -1,8 +1,7 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
-
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
@@ -32,17 +31,20 @@ const buttonVariants = cva(
       size: "default",
     },
   }
-)
+);
 
-const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button"
-  return (
-    (<Comp
-      className={cn(buttonVariants({ variant, size, className }))}
-      ref={ref}
-      {...props} />)
-  );
-})
-Button.displayName = "Button"
+const Button = React.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };
diff --git a/app/favicon.ico b/app/favicon.ico
diff --git a/app/page.js b/app/page.js
@@ -1,9 +1,9 @@
-import Image from 'next/image';
+import HeroSection from "../components/HeroSection";
 
 export default function Home() {
   return (
-    <main className="flex flex-col items-center justify-between min-h-screen p-24">
-      <h1>Home</h1>
+    <main className="">
+      <HeroSection />
     </main>
   );
-}
+}
diff --git a/components/HeroSection.jsx b/components/HeroSection.jsx
@@ -0,0 +1,49 @@
+import Link from "next/link";
+import { Button } from "./ui/button";
+import Image from "next/image";
+
+export default function HeroSection() {
+  return (
+    <section>
+      <div className="px-10 mx-auto md:px-[8%] xl:px-[15%] mt-28 md:mt-36 gap-20 transition-all">
+        <div className="space-y-5 max-w-4xl mx-auto text-center">
+          <h4 className="text-sm text-indigo-600 font-medium">
+            Discover new heights
+          </h4>
+
+          <h1 className="text-4xl font-extrabold mx-auto md:text-5xl max-w-3xl">
+            Level Up Your Esports Journey with{" "}
+            <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#4F46E5] to-[#E114E5]">
+              Sanity Esports
+            </span>
+          </h1>
+
+          <h6 className="max-w-2xl mx-auto">
+            The Go-To Esports Platform at the intersection of esports and mental
+            well-being
+          </h6>
+
+          <div className="flex items-center justify-center gap-4">
+            <Link href="/">
+              <Button>Get Started</Button>
+            </Link>
+
+            <Link href="/">
+              <Button variant="outline">Learn More</Button>
+            </Link>
+          </div>
+        </div>
+
+        <div className="hidden md:block mt-20">
+          <Image
+            src="https://sanityesports.live/demo.png"
+            height={1000}
+            width={1200}
+            className="w-full shadow-lg rounded-lg"
+            alt=""
+          />
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/Navbar.jsx b/components/Navbar.jsx
@@ -16,7 +16,7 @@ import { AlignJustify } from "lucide-react";
 
 const Navbar = () => {
   return (
-    <div className="relative mt-5 mx-5 md:mx-[5%] xl:mx-[10%] flex items-center justify-between transition-all">
+    <div className="sticky top-0 z-50 py-4 px-5 md:px-[5%] xl:px-[10%] flex items-center justify-between bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 transition-all">
       {/* Logo */}
       <div className="flex items-center">
         <Link href="/" className="flex items-center gap-2">
@@ -32,7 +32,7 @@ const Navbar = () => {
       </div>
 
       {/* links */}
-      <nav className="hidden lg:flex flex-row items-center mt-2 gap-8 transition-all">
+      <nav className="hidden lg:flex flex-row items-center mt-2 gap-4 lg:gap-6 transition-all">
         {navLinks.map((item, index) => (
           <Link key={index} href={item.href} className="font-medium">
             {item.title}
@@ -43,14 +43,14 @@ const Navbar = () => {
       {/* buttons */}
       <div className="hidden lg:flex items-center gap-5 transition-all">
         <Link href="https://discord.gg/AB2vCdyw">
-          <Button variant="outline" className="px-5 rounded-xl">
+          <Button variant="outline" className="px-5 rounded-md">
             Join Community
           </Button>
         </Link>
         <ModeToggle />
       </div>
 
-      {/* ham menu */}
+      {/* mobile nav menu */}
       <div className="lg:hidden transition-all">
         <Sheet>
           <SheetTrigger asChild>