Skip to content

redesign complete landing page #114

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.

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

Open
wants to merge 2 commits into
base: revamp/ui
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
110 changes: 10 additions & 100 deletions next-app/app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,116 +3,26 @@ import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
//@ts-ignore
import { Users, Radio, Headphones } from "lucide-react";
import { Appbar } from "@/components/Appbar";
import { Appbar } from "@/components/home/Appbar";
import { getServerSession } from "next-auth";
import { authOptions } from "@/lib/auth-options";
import { redirect } from "next/navigation";
import Hero from "@/components/home/Hero";
import CTA from "@/components/home/CTA";
import Feature from "@/components/home/Feature";
import Footer from "@/components/home/Footer";

export default async function LandingPage() {
const session = await getServerSession(authOptions);
if (session?.user.id) redirect("/dashboard");

return (
<div className="flex min-h-screen flex-col bg-gradient-to-br from-gray-900 via-purple-900 to-gray-900">
<div className="flex min-h-screen flex-col bg-stone-950 bg-page-gradient">
<Appbar showThemeSwitch={false} />
<main className="flex-1 py-12 md:py-24 lg:py-32">
<div className="container px-4 md:px-6">
<div className="flex flex-col items-center space-y-4 text-center">
<div className="space-y-2">
<h1 className="text-3xl font-bold tracking-tighter text-white sm:text-4xl md:text-5xl lg:text-6xl/none">
Let Your Fans Choose the Beat
</h1>
<p className="mx-auto max-w-[700px] text-gray-400 md:text-xl">
Empower your audience to curate your music stream. Connect with
fans like never before.
</p>
</div>
<div className="space-x-4">
<Button className="bg-purple-600 text-white hover:bg-purple-700">
<Link href="/signin">Get Started</Link>
</Button>
<Button className="bg-white text-purple-400 hover:bg-white/90">
Learn More
</Button>
</div>
</div>
</div>
</main>
<section className="w-full bg-gray-800 bg-opacity-50 py-12 md:py-24 lg:py-32">
<div className="container px-4 md:px-6">
<h2 className="mb-8 text-center text-2xl font-bold tracking-tighter text-white sm:text-3xl">
Key Features
</h2>
<div className="grid gap-8 sm:grid-cols-3">
<div className="flex flex-col items-center space-y-3 text-center">
<Users className="h-12 w-12 text-yellow-400" />
<h3 className="text-xl font-bold text-white">Fan Interaction</h3>
<p className="text-gray-400">Let fans choose the music.</p>
</div>
<div className="flex flex-col items-center space-y-3 text-center">
<Radio className="h-12 w-12 text-green-400" />
<h3 className="text-xl font-bold text-white">Live Streaming</h3>
<p className="text-gray-400">Stream with real-time input.</p>
</div>
<div className="flex flex-col items-center space-y-3 text-center">
<Headphones className="h-12 w-12 text-blue-400" />
<h3 className="text-xl font-bold text-white">
High-Quality Audio
</h3>
<p className="text-gray-400">Crystal clear sound quality.</p>
</div>
</div>
</div>
</section>
<section className="w-full py-12 md:py-24 lg:py-32">
<div className="container px-4 md:px-6">
<div className="flex flex-col items-center space-y-4 text-center">
<div className="space-y-2">
<h2 className="text-3xl font-bold tracking-tighter text-white sm:text-4xl">
Ready to Transform Your Streams?
</h2>
<p className="mx-auto max-w-[600px] text-gray-400 md:text-xl">
Join MusicStreamChoice today and create unforgettable
experiences.
</p>
</div>
<div className="w-full max-w-sm space-y-2">
<form className="flex space-x-2">
<Input
className="max-w-lg flex-1 border-gray-700 bg-gray-800 text-white placeholder-gray-500"
placeholder="Enter your email"
type="email"
/>
<Button
type="submit"
className="bg-purple-600 text-white hover:bg-purple-700"
>
Sign Up
</Button>
</form>
</div>
</div>
</div>
</section>
<footer className="flex w-full shrink-0 flex-col items-center gap-2 border-t border-gray-700 px-4 py-6 sm:flex-row md:px-6">
<p className="text-xs text-gray-400">
© 2023 MusicStreamChoice. All rights reserved.
</p>
<nav className="flex gap-4 sm:ml-auto sm:gap-6">
<Link
className="text-xs text-gray-400 transition-colors hover:text-purple-400"
href="#"
>
Terms of Service
</Link>
<Link
className="text-xs text-gray-400 transition-colors hover:text-purple-400"
href="#"
>
Privacy
</Link>
</nav>
</footer>
<Hero/>
<Feature/>
<CTA/>
<Footer/>
</div>
);
}
23 changes: 23 additions & 0 deletions next-app/assets/Logo.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import React from 'react'

const Logo = ({className}: {className?: string}) => {
return (
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
<mask id="mask0_2019_470" style={{ maskType: "luminance" }} maskUnits="userSpaceOnUse" x="0" y="0" width="17" height="17">
<path d="M16.9999 16.9999L0 16.9999L0 1.192e-07L16.9999 1.192e-07L16.9999 16.9999Z" fill="white" />
</mask>
<g mask="url(#mask0_2019_470)">
<path fillRule="evenodd" clipRule="evenodd" d="M4.24998 16.9999L16.9999 16.9999L16.9999 12.7499L16.9999 4.24998L12.7499 1.192e-07L12.7499 12.7499L0 12.7499L4.24998 16.9999ZM0 2.96929L0 8.49996L5.53067 8.49996L0 2.96929ZM8.49996 1.192e-07L3.04109 1.192e-07L8.49996 5.45885L8.49996 1.192e-07Z" fill="url(#paint0_linear_2019_470)" />
</g>
<defs>
<linearGradient id="paint0_linear_2019_470" x1="15.0449" y1="16.9999" x2="3.35748" y2="4.03748" gradientUnits="userSpaceOnUse">
<stop stopColor="white" />
<stop offset="1" stopColor="#E7E9FF" />
</linearGradient>
</defs>
</svg>

)
}

export default Logo
32 changes: 32 additions & 0 deletions next-app/components/home/Appbar.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
"use client";
import { signIn, signOut, useSession } from "next-auth/react";
import { Button } from "@/components/ui/button";
import { ThemeSwitcher } from "@/components/ThemeSwitcher";
import Logo from "@/assets/Logo";

export function Appbar({ showThemeSwitch = true }) {
const session = useSession();
const isUserLoggedIn = session.data?.user;
const buttonTitle = isUserLoggedIn ? "Logout" : "Login";

const handleButtonClick = () => {
isUserLoggedIn
? signOut({ callbackUrl: "/" })
: signIn("google", { callbackUrl: "/dashboard" });
};

return (
<div className="translate-y-[-1rem] animate-fade-in opacity-0 [--animation-delay:300ms] px-5 py-4 md:px-10 xl:px-20 fixed z-50 top-0 backdrop-blur-[12px] w-full flex justify-between lg:px-44">
<div
className={`flex items-center gap-2 justify-center text-lg font-bold ${showThemeSwitch ? "" : "text-white"}`}
>
<Logo/>
Muzer
</div>
<div className="flex items-center gap-2">
{showThemeSwitch && <ThemeSwitcher />}
<Button onClick={handleButtonClick}>{buttonTitle}</Button>
</div>
</div>
);
}
40 changes: 40 additions & 0 deletions next-app/components/home/CTA.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import React from 'react'
import { Input } from '../ui/input'
import { Button } from '../ui/button'

const CTA = () => {
return (
<section className="w-full py-10 md:mb-10 md:pb-10 translate-y-[-1rem] animate-fade-in opacity-0 [--animation-delay:1000ms]">
<div className="container px-4 md:px-6">
<div className="flex flex-col items-center space-y-4 text-center">
<div className="space-y-2">
<h2 className="text-3xl font-bold tracking-tighter text-white sm:text-4xl">
Ready to Transform Your Streams?
</h2>
<p className="mx-auto max-w-[600px] text-gray-400 md:text-xl">
Join MusicStreamChoice today and create unforgettable
experiences.
</p>
</div>
<div className="w-full max-w-sm space-y-2">
<form className="flex space-x-2">
<Input
className="max-w-lg flex-1 border-stone-700 bg-stone-800 text-white placeholder-gray-500"
placeholder="Enter your email"
type="email"
/>
<Button
type="submit"
className="bg-purple-600 text-white hover:bg-purple-700"
>
Sign Up
</Button>
</form>
</div>
</div>
</div>
</section>
)
}

export default CTA
35 changes: 35 additions & 0 deletions next-app/components/home/Feature.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { Headphones, Radio, Users } from 'lucide-react'
import React from 'react'

const Feature = () => {
return (
<section className="w-full py-12 md:py-24 lg:py-32">
<div className="container px-4 md:px-6 animate-fade-in opacity-0 [--animation-delay:700ms]">
<h2 className="mb-8 text-center text-2xl font-bold tracking-tighter text-white sm:text-3xl">
Key Features
</h2>
<div className="grid gap-8 sm:grid-cols-3">
<div className="flex flex-col items-center space-y-3 text-center">
<Users className="h-12 w-12 text-yellow-400" />
<h3 className="text-xl font-bold text-white">Fan Interaction</h3>
<p className="text-gray-400">Let fans choose the music.</p>
</div>
<div className="flex flex-col items-center space-y-3 text-center">
<Radio className="h-12 w-12 text-green-400" />
<h3 className="text-xl font-bold text-white">Live Streaming</h3>
<p className="text-gray-400">Stream with real-time input.</p>
</div>
<div className="flex flex-col items-center space-y-3 text-center">
<Headphones className="h-12 w-12 text-blue-400" />
<h3 className="text-xl font-bold text-white">
High-Quality Audio
</h3>
<p className="text-gray-400">Crystal clear sound quality.</p>
</div>
</div>
</div>
</section>
)
}

export default Feature
28 changes: 28 additions & 0 deletions next-app/components/home/Footer.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import Link from 'next/link'
import React from 'react'

const Footer = () => {
return (
<footer className="flex w-full shrink-0 flex-col items-center gap-2 border-t border-stone-700 px-4 py-6 sm:flex-row md:px-6 animate-fade-in opacity-0 [--animation-delay:800ms]">
<p className="text-xs text-gray-400">
© 2023 MusicStreamChoice. All rights reserved.
</p>
<nav className="flex gap-4 sm:ml-auto sm:gap-6">
<Link
className="text-xs text-gray-400 transition-colors hover:text-purple-400"
href="#"
>
Terms of Service
</Link>
<Link
className="text-xs text-gray-400 transition-colors hover:text-purple-400"
href="#"
>
Privacy
</Link>
</nav>
</footer>
)
}

export default Footer
44 changes: 44 additions & 0 deletions next-app/components/home/Hero.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import React from 'react'
import { Button } from '../ui/button'
import Link from 'next/link'
import Image from 'next/image'


const Hero = () => {
return (
<main className="flex-1 py-12 md:py-24">
<div className="container px-4 md:px-6">
<div className='flex items-center justify-center my-10'>
<p className='translate-y-[-1rem] animate-fade-in opacity-0 [--animation-delay:400ms] px-3 pl-1 py-2 bg-stone-900 border border-stone-600 rounded-full text-white text-xs'><span className='px-2 mr-1 bg-white py-1 border rounded-full text-black '>new</span> Latest integration just arrived</p>
</div>
<div className="flex flex-col items-center space-y-4 text-center mb-10">
<div className="space-y-2">
<h1 className="translate-y-[-1rem] animate-fade-in opacity-0 [--animation-delay:500ms] text-2xl text-center font-bold tracking-tighter text-white md:text-5xl lg:text-6xl/none">
Let Your Fans Choose the Beat
</h1>
<p className="translate-y-[-1rem] animate-fade-in opacity-0 [--animation-delay:600ms] mx-auto text-center max-w-[700px] text-gray-400 md:text-xl text-sm">
Empower your audience to curate your music stream. <br className='hidden md:block' /> Connect with
fans like never before.
</p>
</div>
<div className="space-x-4 translate-y-[-1rem] animate-fade-in opacity-0 [--animation-delay:700ms]">
<Button className=''>
<Link href="/signin">Get Started</Link>
</Button>
<Button variant="secondary">
Learn More
</Button>
</div>
</div>
</div>

<div className='translate-y-[-1rem] animate-fade-in opacity-0 [--animation-delay:800ms] relative items-center justify-center rounded-lg md:mt-20 md:w-[900px] bg-stone-900 backdrop-blur-sm bg-opacity-80 lg:w-[1300px] mx-auto border px-2 py-2 border-stone-800'>
<div className="glow absolute bottom-30 -top-1 -z-10 aspect-square md:flex items-center justify-center w-full h-[20rem] max-w-4xl rounded-full bg-[#737373] opacity-50 blur-3xl filter hidden" />
<div className="glow absolute bottom-1 right-56 -z-10 aspect-square flex items-center justify-center w-full h-[20rem] max-w-4xl rounded-full bg-[#737373] opacity-50 blur-3xl filter" />
<Image src="/hero.png" alt='hero' width={1300} height={793} className='border border-stone-800 rounded-lg' />
</div>
</main>
)
}

export default Hero
4 changes: 2 additions & 2 deletions next-app/components/ui/button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@ const buttonVariants = cva(
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
default: "bg-gradient-to-b from-green-800 to-green-500 text-white hover:bg-purple-700",
destructive:
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline:
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
"bg-white text-black hover:bg-secondary/80 hover:bg-white/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
},
Expand Down
Binary file added next-app/public/hero.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading