Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Landing page Hero section #62

Merged
merged 3 commits into from
Jul 22, 2024
Merged

Landing page Hero section #62

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ac9b387
feat: hero section
Abhish7k Jul 22, 2024
5938c1c
chore: favicon
Abhish7k Jul 22, 2024
4a07ec6
style: hero section
Abhish7k Jul 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 18 additions & 16 deletions @/components/ui/button.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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",
Expand Down Expand Up @@ -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 };
Binary file modified app/favicon.ico
View file
Open in desktop
Binary file not shown.
8 changes: 4 additions & 4 deletions app/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
}
49 changes: 49 additions & 0 deletions components/HeroSection.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
8 changes: 4 additions & 4 deletions components/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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}
Expand All @@ -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>
Expand Down
Loading