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

Jump to bottom

Improved mobile UI layout for LandingPage component #19

Closed
wants to merge 2 commits into from
Closed

Improved mobile UI layout for LandingPage component #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
65d0e8b
Improved mobile UI layout for LandingPage component
Aug 29, 2024
3c007d7
Removed lock file
Aug 30, 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
44 changes: 30 additions & 14 deletions app/components/Appbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,37 @@
"use client";
import { signIn, signOut, useSession } from "next-auth/react";
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
//@ts-ignore
import { Music } from "lucide-react"
import { Music } from "lucide-react";

export function Appbar() {
const session = useSession();
const session = useSession();

return <div className="flex justify-between px-20 pt-4">
<div className="text-lg font-bold flex flex-col justify-center text-white">
Muzer
</div>
<div>
{session.data?.user && <Button className="bg-purple-600 text-white hover:bg-purple-700" onClick={() => signOut()}>Logout</Button>}
{!session.data?.user &&<Button className="bg-purple-600 text-white hover:bg-purple-700" onClick={() => signIn()}>Signin</Button>}
</div>
return (
<div className="flex justify-between px-4 py-4 md:px-20 md:pt-4 items-center">
<div className="text-lg font-bold text-white">
Muzer
</div>
<div className="flex space-x-4">
{session.data?.user && (
<Button
className="bg-purple-600 text-white hover:bg-purple-700"
onClick={() => signOut()}
>
Logout
</Button>
)}
{!session.data?.user && (
<Button
className="bg-purple-600 text-white hover:bg-purple-700"
onClick={() => signIn()}
>
Signin
</Button>
)}
</div>
</div>
}
);
}
100 changes: 53 additions & 47 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,79 +1,85 @@
import Link from "next/link"
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 { Redirect } from "./components/Redirect"
import Link from "next/link";
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 { Redirect } from "./components/Redirect";

export default function LandingPage() {
return (
<div className="flex flex-col min-h-screen bg-gradient-to-br from-gray-900 via-purple-900 to-gray-900">
<Appbar />
<Redirect />
<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 sm:text-4xl md:text-5xl lg:text-6xl/none text-white">
<main className="flex-1 py-8 md:py-16 lg:py-24">
<div className="container mx-auto px-4 md:px-8">
<div className="flex flex-col items-center space-y-6 text-center">
<div className="space-y-4">
<h1 className="text-2xl font-bold tracking-tight sm:text-3xl md:text-4xl lg:text-5xl text-white">
Let Your Fans Choose the Beat
</h1>
<p className="mx-auto max-w-[700px] text-gray-400 md:text-xl">
<p className="mx-auto max-w-[90%] sm:max-w-[700px] text-gray-400 text-sm sm:text-base md:text-lg">
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">Get Started</Button>
<Button variant="outline" className="text-purple-400 border-purple-400 hover:bg-purple-400 hover:text-gray-900">Learn More</Button>
<div className="flex flex-col sm:flex-row sm:space-x-4 space-y-4 sm:space-y-0">
<Button className="w-full sm:w-auto bg-purple-600 text-white hover:bg-purple-700">
Get Started
</Button>
<Button variant="outline" className="w-full sm:w-auto text-purple-400 border-purple-400 hover:bg-purple-400 hover:text-gray-900">
Learn More
</Button>
</div>
</div>
</div>
</main>
<section className="w-full py-12 md:py-24 lg:py-32 bg-gray-800 bg-opacity-50">
<div className="container px-4 md:px-6">
<h2 className="text-2xl font-bold tracking-tighter sm:text-3xl text-center mb-8 text-white">Key Features</h2>
<section className="w-full py-8 md:py-16 lg:py-24 bg-gray-800 bg-opacity-50">
<div className="container mx-auto px-4 md:px-8">
<h2 className="text-xl font-bold tracking-tight sm:text-2xl text-center mb-6 text-white">
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>
{[
{ icon: Users, color: "text-yellow-400", title: "Fan Interaction", description: "Let fans choose the music." },
{ icon: Radio, color: "text-green-400", title: "Live Streaming", description: "Stream with real-time input." },
{ icon: Headphones, color: "text-blue-400", title: "High-Quality Audio", description: "Crystal clear sound quality." },
].map((feature, index) => (
<div key={index} className="flex flex-col items-center space-y-3 text-center">
<feature.icon className={`h-10 w-10 ${feature.color}`} />
<h3 className="text-lg font-bold text-white">{feature.title}</h3>
<p className="text-gray-400 text-sm">{feature.description}</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">
<section className="w-full py-8 md:py-16 lg:py-24">
<div className="container mx-auto px-4 md:px-8">
<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 sm:text-4xl text-white">Ready to Transform Your Streams?</h2>
<p className="mx-auto max-w-[600px] text-gray-400 md:text-xl">
<h2 className="text-2xl font-bold tracking-tight sm:text-3xl text-white">
Ready to Transform Your Streams?
</h2>
<p className="mx-auto max-w-[90%] sm:max-w-[600px] text-gray-400 text-sm sm:text-base md:text-lg">
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 bg-gray-800 border-gray-700 text-white placeholder-gray-500"
placeholder="Enter your email"
type="email"
<form className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
<Input
className="w-full bg-gray-800 border-gray-700 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>
<Button type="submit" className="w-full sm:w-auto bg-purple-600 text-white hover:bg-purple-700">
Sign Up
</Button>
</form>
</div>
</div>
</div>
</section>
<footer className="flex flex-col gap-2 sm:flex-row py-6 w-full shrink-0 items-center px-4 md:px-6 border-t border-gray-700">
<footer className="flex flex-col gap-2 sm:flex-row py-6 w-full items-center px-4 md:px-8 border-t border-gray-700">
<p className="text-xs text-gray-400">© 2023 MusicStreamChoice. All rights reserved.</p>
<nav className="sm:ml-auto flex gap-4 sm:gap-6">
<Link className="text-xs text-gray-400 hover:text-purple-400 transition-colors" href="#">
Expand All @@ -85,5 +91,5 @@ export default function LandingPage() {
</nav>
</footer>
</div>
)
}
);
}