Files
f08f50e8-181b-4bbf-bced-641…/src/app/trending/page.tsx
2026-06-03 16:30:22 +00:00

229 lines
6.7 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="small"
sizing="largeSmallSizeMediumTitles"
background="circleGradient"
cardStyle="soft-shadow"
primaryButtonStyle="shadow"
secondaryButtonStyle="layered"
headingFontWeight="medium"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{
name: "Home",
id: "/",
},
{
name: "Categories",
id: "/categories",
},
{
name: "Trending",
id: "/trending",
},
{
name: "Authors",
id: "/authors",
},
{
name: "About",
id: "/about",
},
{
name: "Contact",
id: "/contact",
},
{
name: "Sign In / Sign Up",
id: "/auth",
},
]}
logoSrc="http://img.b2bpic.net/free-vector/vintage-classic-theatre-emblems-set_1284-39339.jpg"
logoAlt="Alish Novel Logo"
brandName="Alish Novel"
/>
</div>
<div id="trending-metrics" data-section="trending-metrics">
<MetricCardEleven
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
metrics={[
{
id: "metric-tr1",
value: "50K+",
title: "Daily Reads",
description: "Novels enjoyed by readers every single day.",
imageSrc: "http://img.b2bpic.net/free-photo/growth-result-analysis-strategy_53876-22903.jpg",
imageAlt: "Daily Reads icon",
},
{
id: "metric-tr2",
value: "10K+",
title: "Active Readers",
description: "Engaged users exploring new stories right now.",
imageSrc: "http://img.b2bpic.net/free-photo/reach-out-social-platform-connected-arrow_53876-120162.jpg",
imageAlt: "Active Readers icon",
},
{
id: "metric-tr3",
value: "20K+",
title: "Total Downloads",
description: "Stories downloaded for offline reading this week.",
imageSrc: "http://img.b2bpic.net/free-photo/overhead-view-woman-reading-book_23-2147893782.jpg",
imageAlt: "Total Downloads icon",
},
]}
title="Trending Statistics"
description="See the numbers behind our most popular reads. Real-time data on what the community loves."
/>
</div>
<div id="top-trending-novels" data-section="top-trending-novels">
<ProductCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
products={[
{
id: "novel-top-1",
name: "The Crimson Key",
price: "Free",
imageSrc: "http://img.b2bpic.net/free-photo/learn-home-typography-paper-cut-font_53876-104183.jpg",
imageAlt: "The Crimson Key novel cover",
},
{
id: "novel-top-2",
name: "Beyond the Veil",
price: "Free",
imageSrc: "http://img.b2bpic.net/free-psd/flat-design-botanical-garden-template_23-2150260066.jpg",
imageAlt: "Beyond the Veil novel cover",
},
{
id: "novel-top-3",
name: "Starfall Prophecy",
price: "Free",
imageSrc: "http://img.b2bpic.net/free-photo/cartoon-rainbow-girls_23-2151709405.jpg",
imageAlt: "Starfall Prophecy novel cover",
},
{
id: "novel-top-4",
name: "The Shadowed Path",
price: "Free",
imageSrc: "http://img.b2bpic.net/free-photo/magic-fairy-tale-book-illustration-with-exotic-landscape-night_23-2150133016.jpg",
imageAlt: "The Shadowed Path novel cover",
},
{
id: "novel-top-5",
name: "Journey to Elysium",
price: "Free",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=bih609",
imageAlt: "Journey to Elysium novel cover",
},
{
id: "novel-top-6",
name: "The Whispering Walls",
price: "Free",
imageSrc: "http://img.b2bpic.net/free-photo/half-whale-half-robot-fantasy-style_23-2151603110.jpg",
imageAlt: "The Whispering Walls novel cover",
},
]}
title="Currently Trending"
description="Don't miss out on these breakout hits. These novels are seeing a surge in popularity."
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="Alish Novel"
columns={[
{
title: "Explore",
items: [
{
label: "Home",
href: "/",
},
{
label: "Categories",
href: "/categories",
},
{
label: "Trending",
href: "/trending",
},
{
label: "Authors",
href: "/authors",
},
],
},
{
title: "Company",
items: [
{
label: "About Us",
href: "/about",
},
{
label: "Contact",
href: "/contact",
},
{
label: "Careers",
href: "#",
},
{
label: "Terms of Service",
href: "#",
},
],
},
{
title: "Connect",
items: [
{
label: "Facebook",
href: "https://facebook.com",
},
{
label: "Twitter",
href: "https://twitter.com",
},
{
label: "Instagram",
href: "https://instagram.com",
},
{
label: "LinkedIn",
href: "https://linkedin.com",
},
],
},
]}
copyrightText="© 2024 Alish Novel. All rights reserved."
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}