redesign complete landing page

next-app/app/page.tsx

@@ -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>
   );
 }

next-app/assets/Logo.tsx

@@ -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

next-app/components/home/Appbar.tsx

@@ -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>
+  );
+}

next-app/components/home/CTA.tsx

@@ -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

next-app/components/home/Feature.tsx

@@ -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

next-app/components/home/Footer.tsx

@@ -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

next-app/components/home/Hero.tsx

@@ -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

next-app/components/ui/button.tsx

@@ -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",
       },