diff --git a/next-app/app/page.tsx b/next-app/app/page.tsx index 17924ab..17ccb61 100644 --- a/next-app/app/page.tsx +++ b/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 ( -
+
-
-
-
-
-

- Let Your Fans Choose the Beat -

-

- Empower your audience to curate your music stream. Connect with - fans like never before. -

-
-
- - -
-
-
-
-
-
-

- Key Features -

-
-
- -

Fan Interaction

-

Let fans choose the music.

-
-
- -

Live Streaming

-

Stream with real-time input.

-
-
- -

- High-Quality Audio -

-

Crystal clear sound quality.

-
-
-
-
-
-
-
-
-

- Ready to Transform Your Streams? -

-

- Join MusicStreamChoice today and create unforgettable - experiences. -

-
-
-
- - -
-
-
-
-
-
-

- © 2023 MusicStreamChoice. All rights reserved. -

- -
+ + + +
); } diff --git a/next-app/assets/Logo.tsx b/next-app/assets/Logo.tsx new file mode 100644 index 0000000..9776b91 --- /dev/null +++ b/next-app/assets/Logo.tsx @@ -0,0 +1,23 @@ +import React from 'react' + +const Logo = ({className}: {className?: string}) => { + return ( + + + + + + + + + + + + + + + + ) +} + +export default Logo \ No newline at end of file diff --git a/next-app/components/home/Appbar.tsx b/next-app/components/home/Appbar.tsx new file mode 100644 index 0000000..330f518 --- /dev/null +++ b/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 ( +
+
+ + Muzer +
+
+ {showThemeSwitch && } + +
+
+ ); +} diff --git a/next-app/components/home/CTA.tsx b/next-app/components/home/CTA.tsx new file mode 100644 index 0000000..b2280a8 --- /dev/null +++ b/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 ( +
+
+
+
+

+ Ready to Transform Your Streams? +

+

+ Join MusicStreamChoice today and create unforgettable + experiences. +

+
+
+
+ + +
+
+
+
+
+ ) +} + +export default CTA \ No newline at end of file diff --git a/next-app/components/home/Feature.tsx b/next-app/components/home/Feature.tsx new file mode 100644 index 0000000..6821631 --- /dev/null +++ b/next-app/components/home/Feature.tsx @@ -0,0 +1,35 @@ +import { Headphones, Radio, Users } from 'lucide-react' +import React from 'react' + +const Feature = () => { + return ( +
+
+

+ Key Features +

+
+
+ +

Fan Interaction

+

Let fans choose the music.

+
+
+ +

Live Streaming

+

Stream with real-time input.

+
+
+ +

+ High-Quality Audio +

+

Crystal clear sound quality.

+
+
+
+
+ ) +} + +export default Feature \ No newline at end of file diff --git a/next-app/components/home/Footer.tsx b/next-app/components/home/Footer.tsx new file mode 100644 index 0000000..4658f9d --- /dev/null +++ b/next-app/components/home/Footer.tsx @@ -0,0 +1,28 @@ +import Link from 'next/link' +import React from 'react' + +const Footer = () => { + return ( + + ) +} + +export default Footer \ No newline at end of file diff --git a/next-app/components/home/Hero.tsx b/next-app/components/home/Hero.tsx new file mode 100644 index 0000000..4495c54 --- /dev/null +++ b/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 ( +
+
+
+

new Latest integration just arrived

+
+
+
+

+ Let Your Fans Choose the Beat +

+

+ Empower your audience to curate your music stream.
Connect with + fans like never before. +

+
+
+ + +
+
+
+ +
+
+
+ hero +
+
+ ) +} + +export default Hero \ No newline at end of file diff --git a/next-app/components/ui/button.tsx b/next-app/components/ui/button.tsx index 57c9fe4..efb80b0 100644 --- a/next-app/components/ui/button.tsx +++ b/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", }, diff --git a/next-app/public/hero.png b/next-app/public/hero.png new file mode 100644 index 0000000..5703a31 Binary files /dev/null and b/next-app/public/hero.png differ diff --git a/next-app/tailwind.config.ts b/next-app/tailwind.config.ts index 41668a3..799c8ac 100644 --- a/next-app/tailwind.config.ts +++ b/next-app/tailwind.config.ts @@ -53,6 +53,15 @@ const config = { foreground: "hsl(var(--card-foreground))", }, }, + + backgroundImage: { + "primary-gradient": + "linear-gradient(92.88deg, rgb(69, 94, 181) 9.16%, rgb(86, 67, 204) 43.89%, rgb(103, 63, 215) 64.72%)", + "hero-gradient": + "radial-gradient(ellipse 50% 80% at 20% 40%,rgba(93,52,221,0.1),transparent), radial-gradient(ellipse 50% 80% at 80% 50%,rgba(120,119,198,0.15),transparent)", + "page-gradient": + "radial-gradient(ellipse 50% 40% at 50% -20%,rgba(120,255,198,10), transparent)", + }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", @@ -67,8 +76,31 @@ const config = { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, + "fade-in": { + from: { opacity: "0", transform: "translateY(-10px)" }, + to: { opacity: "1", transform: "none" }, + }, + + marquee: { + from: { transform: "translateX(0)" }, + to: { transform: "translateX(calc(-100% - var(--gap)))" }, + }, }, animation: { + marquee: "marquee var(--duration) linear infinite", + "marquee-vertical": "marquee-vertical var(--duration) linear infinite", + "fade-in": "fade-in 1000ms var(--animation-delay, 0ms) ease forwards", + "image-rotate": "image-rotate 1400ms ease forwards", + "image-glow": "image-glow 4100ms 600ms ease-out forwards", + "sketch-lines": "sketch-lines 1200ms ease-out forwards", + "glow-line-horizontal": + "glow-line-horizontal var(--animation-duration) ease-in forwards", + "glow-line-vertical": + "glow-line-vertical var(--animation-duration) ease-in forwards", + zap: "zap 2250ms calc(var(--index) * 20ms) linear infinite", + bounce: "240ms ease 0s 1 running bounce", + spotlight: "spotlight 2s ease .75s 1 forwards", + shimmer: "shimmer 8s infinite", "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", },