Merge version_2 into main #5
@@ -4,40 +4,23 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import React from "react";
|
||||
|
||||
export default function AnimeDetailPage() {
|
||||
export default function AnimePage() {
|
||||
return (
|
||||
<ThemeProvider>
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Catalog", id: "/catalog" },
|
||||
]}
|
||||
brandName="AniStream"
|
||||
/>
|
||||
<ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Catalog", id: "/catalog" },
|
||||
{ name: "Dashboard", id: "/dashboard" },
|
||||
{ name: "Login", id: "/login" },
|
||||
{ name: "Signup", id: "/signup" },
|
||||
]}
|
||||
brandName="AniStream"
|
||||
/>
|
||||
</div>
|
||||
<main className="pt-32 pb-20 px-6 container mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-12">
|
||||
<div className="col-span-1">
|
||||
<div className="aspect-[2/3] bg-gray-200 rounded-lg mb-6" />
|
||||
<button className="w-full bg-black text-white py-3 rounded-lg font-bold">Watch Now</button>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<h1 className="text-5xl font-bold mb-4">Anime Title</h1>
|
||||
<p className="text-xl text-gray-600 mb-6">Synopsis: An incredible journey through the cosmos...</p>
|
||||
<div className="grid grid-cols-2 gap-4 mb-8">
|
||||
<div className="border p-4 rounded">Rating: 9.2/10</div>
|
||||
<div className="border p-4 rounded">Episodes: 24</div>
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold mb-4">Related Recommendations</h2>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
{[1, 2, 3, 4].map((i) => (
|
||||
<div key={i} className="border p-2 rounded text-center">
|
||||
<div className="h-32 bg-gray-100 rounded mb-2" />
|
||||
<p className="text-sm font-semibold">Recommendation {i}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="text-4xl font-bold">Anime Details</h1>
|
||||
</main>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
@@ -6,31 +6,29 @@ import React from "react";
|
||||
|
||||
export default function CatalogPage() {
|
||||
return (
|
||||
<ThemeProvider>
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Catalog", id: "/catalog" },
|
||||
]}
|
||||
brandName="AniStream"
|
||||
/>
|
||||
<ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Catalog", id: "/catalog" },
|
||||
{ name: "Dashboard", id: "/dashboard" },
|
||||
{ name: "Login", id: "/login" },
|
||||
{ name: "Signup", id: "/signup" },
|
||||
]}
|
||||
brandName="AniStream"
|
||||
/>
|
||||
</div>
|
||||
<main className="pt-32 pb-20 px-6 container mx-auto">
|
||||
<h1 className="text-4xl font-bold mb-8">Anime Catalog</h1>
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<div className="col-span-1 border rounded-lg p-6 h-fit">
|
||||
<h2 className="font-bold mb-4">Filters</h2>
|
||||
<div className="space-y-4">
|
||||
<select className="w-full border p-2 rounded"><option>Genre</option></select>
|
||||
<select className="w-full border p-2 rounded"><option>Season</option></select>
|
||||
<select className="w-full border p-2 rounded"><option>Status</option></select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-3 grid grid-cols-2 md:grid-cols-3 gap-6">
|
||||
{[1, 2, 3, 4, 5, 6].map((i) => (
|
||||
<div key={i} className="border p-4 rounded-lg hover:shadow-lg transition cursor-pointer">
|
||||
<div className="h-48 bg-gray-200 rounded mb-4" />
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="border p-4 rounded-lg">
|
||||
<h3 className="font-bold">Anime Title {i}</h3>
|
||||
<p className="text-sm text-gray-500">Action • 2024</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -6,18 +6,30 @@ import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwe
|
||||
|
||||
export default function DashboardPage() {
|
||||
return (
|
||||
<ThemeProvider>
|
||||
<NavbarStyleFullscreen navItems={[{ name: "Home", id: "/" }, { name: "Profile", id: "/profile" }]} brandName="AniStream" />
|
||||
<div className="pt-32 px-6">
|
||||
<ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Catalog", id: "/catalog" },
|
||||
{ name: "Dashboard", id: "/dashboard" },
|
||||
{ name: "Login", id: "/login" },
|
||||
{ name: "Signup", id: "/signup" },
|
||||
]}
|
||||
brandName="AniStream"
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features" className="pt-32 px-6">
|
||||
<FeatureCardTwentyEight
|
||||
title="Your Dashboard"
|
||||
description="Welcome back! Here is your watch history and recent recommendations."
|
||||
description="Welcome back!"
|
||||
features={[
|
||||
{ id: "1", title: "Continue Watching", subtitle: "From your last session", category: "History", value: "3 Items" },
|
||||
{ id: "2", title: "Recommended for You", subtitle: "Based on your favorites", category: "Suggested", value: "Top Picks" }
|
||||
{ id: "1", title: "Continue", subtitle: "History", category: "History", value: "3" },
|
||||
{ id: "2", title: "Picks", subtitle: "Suggested", category: "Suggested", value: "Top" }
|
||||
]}
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
|
||||
@@ -6,14 +6,27 @@ import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
|
||||
export default function LoginPage() {
|
||||
return (
|
||||
<ThemeProvider>
|
||||
<NavbarStyleFullscreen navItems={[{ name: "Home", id: "/" }]} brandName="AniStream" />
|
||||
<div className="min-h-screen flex items-center justify-center pt-20">
|
||||
<ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Catalog", id: "/catalog" },
|
||||
{ name: "Dashboard", id: "/dashboard" },
|
||||
{ name: "Login", id: "/login" },
|
||||
{ name: "Signup", id: "/signup" },
|
||||
]}
|
||||
brandName="AniStream"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact" className="min-h-screen flex items-center justify-center pt-20">
|
||||
<ContactCTA
|
||||
tag="Login"
|
||||
title="Welcome Back"
|
||||
description="Sign in to your account to continue watching."
|
||||
description="Sign in to your account to continue."
|
||||
buttons={[{ text: "Login" }, { text: "Sign Up", href: "/signup" }]}
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
|
||||
@@ -6,14 +6,27 @@ import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
|
||||
export default function SignupPage() {
|
||||
return (
|
||||
<ThemeProvider>
|
||||
<NavbarStyleFullscreen navItems={[{ name: "Home", id: "/" }]} brandName="AniStream" />
|
||||
<div className="min-h-screen flex items-center justify-center pt-20">
|
||||
<ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Catalog", id: "/catalog" },
|
||||
{ name: "Dashboard", id: "/dashboard" },
|
||||
{ name: "Login", id: "/login" },
|
||||
{ name: "Signup", id: "/signup" },
|
||||
]}
|
||||
brandName="AniStream"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact" className="min-h-screen flex items-center justify-center pt-20">
|
||||
<ContactCTA
|
||||
tag="Sign Up"
|
||||
title="Join the Fanbase"
|
||||
description="Create an account and start your journey today."
|
||||
description="Create an account today."
|
||||
buttons={[{ text: "Create Account" }, { text: "Login", href: "/login" }]}
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
|
||||
Reference in New Issue
Block a user