5 Commits

Author SHA1 Message Date
464ad61034 Update src/app/library/page.tsx 2026-04-04 06:56:05 +00:00
427f23e058 Update src/app/styles/variables.css 2026-04-04 06:55:39 +00:00
0ea69c7104 Update src/app/page.tsx 2026-04-04 06:55:39 +00:00
3bdf3bbd16 Add src/app/library/page.tsx 2026-04-04 06:55:38 +00:00
87b83efa85 Merge version_1 into main
Merge version_1 into main
2026-04-04 06:54:27 +00:00
3 changed files with 100 additions and 169 deletions

52
src/app/library/page.tsx Normal file
View File

@@ -0,0 +1,52 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import FooterCard from '@/components/sections/footer/FooterCard';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
export default function LibraryPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="medium"
sizing="medium"
background="circleGradient"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<ReactLenis root>
<NavbarLayoutFloatingInline
navItems={[
{ name: "Home", id: "/" },
{ name: "Library", id: "/library" },
{ name: "Pricing", id: "/pricing" },
]}
brandName="BookFlix"
button={{ text: "Get Started", href: "#" }}
/>
<div className="pt-32 pb-20">
<ProductCardThree
title="eBook Catalog"
description="Explore our curated collection of premium titles."
gridVariant="bento-grid"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
products={[
{ id: "1", name: "Tech Trends 2025", price: "$19.99", imageSrc: "http://img.b2bpic.net/free-photo/modern-tablet-books-library_23-2147845958.jpg" },
{ id: "2", name: "Mastering Design", price: "$24.99", imageSrc: "http://img.b2bpic.net/free-photo/diverse-staff-pitching-proposals-stakeholders-mockup-business-meeting-dark_482257-136152.jpg" },
{ id: "3", name: "AI Secrets", price: "$29.99", imageSrc: "http://img.b2bpic.net/free-photo/smartphone-book-high-angle_23-2149765817.jpg" }
]}
/>
</div>
<FooterCard logoText="BookFlix" />
</ReactLenis>
</ThemeProvider>
);
}

View File

@@ -30,23 +30,15 @@ export default function LandingPage() {
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home",
id: "hero",
},
name: "Home", id: "hero"},
{
name: "Library",
id: "features",
},
name: "Library", id: "features"},
{
name: "Pricing",
id: "pricing",
},
name: "Pricing", id: "pricing"},
]}
brandName="BookFlix"
button={{
text: "Get Started",
href: "#pricing",
}}
text: "Get Started", href: "#pricing"}}
/>
</div>
@@ -56,74 +48,37 @@ export default function LandingPage() {
description="Unlock a vast library of premium eBooks with one subscription. Experience the Netflix of reading with personalized AI recommendations and seamless cross-platform sync."
testimonials={[
{
name: "Alex R.",
handle: "@alexread",
testimonial: "The AI recommendations are spot on. I've discovered more books here than in years.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smartphone-book-high-angle_23-2149765817.jpg?_wi=1",
imageAlt: "digital ebook library dark mode",
},
name: "Alex R.", handle: "@alexread", testimonial: "The AI recommendations are spot on. I've discovered more books here than in years.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smartphone-book-high-angle_23-2149765817.jpg?_wi=1", imageAlt: "digital ebook library dark mode"},
{
name: "Maria S.",
handle: "@marias",
testimonial: "Fast, clean, and incredible value. The best way to build a personal library.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/modern-tablet-books-library_23-2147845958.jpg?_wi=1",
imageAlt: "ebook reader app interface",
},
name: "Maria S.", handle: "@marias", testimonial: "Fast, clean, and incredible value. The best way to build a personal library.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/modern-tablet-books-library_23-2147845958.jpg?_wi=1", imageAlt: "ebook reader app interface"},
{
name: "David K.",
handle: "@dkbooks",
testimonial: "A massive selection that keeps growing. Worth every penny.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/diverse-staff-pitching-proposals-stakeholders-mockup-business-meeting-dark_482257-136152.jpg?_wi=1",
imageAlt: "ai recommendation system ui",
},
name: "David K.", handle: "@dkbooks", testimonial: "A massive selection that keeps growing. Worth every penny.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/diverse-staff-pitching-proposals-stakeholders-mockup-business-meeting-dark_482257-136152.jpg?_wi=1", imageAlt: "ai recommendation system ui"},
{
name: "Jane D.",
handle: "@janereads",
testimonial: "The offline mode is a lifesaver for my daily commute.",
rating: 4,
imageSrc: "http://img.b2bpic.net/free-photo/cloud-with-lock_1048-1663.jpg?_wi=1",
imageAlt: "secure cloud storage icon",
},
name: "Jane D.", handle: "@janereads", testimonial: "The offline mode is a lifesaver for my daily commute.", rating: 4,
imageSrc: "http://img.b2bpic.net/free-photo/cloud-with-lock_1048-1663.jpg?_wi=1", imageAlt: "secure cloud storage icon"},
{
name: "Chris B.",
handle: "@chrisb",
testimonial: "The interface is beautiful and the reading experience is top-tier.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-mature-woman-covered-blanket-holding-book_171337-19320.jpg?_wi=1",
imageAlt: "happy reader professional portrait",
},
name: "Chris B.", handle: "@chrisb", testimonial: "The interface is beautiful and the reading experience is top-tier.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-mature-woman-covered-blanket-holding-book_171337-19320.jpg?_wi=1", imageAlt: "happy reader professional portrait"},
]}
buttons={[
{
text: "Start Free Trial",
href: "#pricing",
},
text: "Start Free Trial", href: "#pricing"},
]}
imageSrc="http://img.b2bpic.net/free-photo/smartphone-book-high-angle_23-2149765817.jpg?_wi=2"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/portrait-mature-woman-covered-blanket-holding-book_171337-19320.jpg",
alt: "User 1",
},
src: "http://img.b2bpic.net/free-photo/portrait-mature-woman-covered-blanket-holding-book_171337-19320.jpg", alt: "User 1"},
{
src: "http://img.b2bpic.net/free-photo/people-working-as-team-company_23-2149136890.jpg",
alt: "User 2",
},
src: "http://img.b2bpic.net/free-photo/people-working-as-team-company_23-2149136890.jpg", alt: "User 2"},
{
src: "http://img.b2bpic.net/free-photo/smiling-businesswoman-using-tablet-computer_74855-5151.jpg",
alt: "User 3",
},
src: "http://img.b2bpic.net/free-photo/smiling-businesswoman-using-tablet-computer_74855-5151.jpg", alt: "User 3"},
{
src: "http://img.b2bpic.net/free-photo/pretty-woman-with-short-hair-holding-magazine_23-2148275094.jpg",
alt: "User 4",
},
src: "http://img.b2bpic.net/free-photo/pretty-woman-with-short-hair-holding-magazine_23-2148275094.jpg", alt: "User 4"},
{
src: "http://img.b2bpic.net/free-photo/serious-male-user-using-wireless-internet-connection_74855-1590.jpg",
alt: "User 5",
},
src: "http://img.b2bpic.net/free-photo/serious-male-user-using-wireless-internet-connection_74855-1590.jpg", alt: "User 5"},
]}
avatarText="Join 10,000+ happy readers"
/>
@@ -136,32 +91,17 @@ export default function LandingPage() {
useInvertedBackground={false}
features={[
{
id: "f1",
title: "Unlimited Access",
tags: [
"Premium",
"Books",
],
imageSrc: "http://img.b2bpic.net/free-photo/modern-tablet-books-library_23-2147845958.jpg?_wi=2",
},
id: "f1", title: "Unlimited Access", tags: [
"Premium", "Books"],
imageSrc: "http://img.b2bpic.net/free-photo/modern-tablet-books-library_23-2147845958.jpg?_wi=2"},
{
id: "f2",
title: "AI Recommendations",
tags: [
"Smart",
"AI",
],
imageSrc: "http://img.b2bpic.net/free-photo/diverse-staff-pitching-proposals-stakeholders-mockup-business-meeting-dark_482257-136152.jpg?_wi=2",
},
id: "f2", title: "AI Recommendations", tags: [
"Smart", "AI"],
imageSrc: "http://img.b2bpic.net/free-photo/diverse-staff-pitching-proposals-stakeholders-mockup-business-meeting-dark_482257-136152.jpg?_wi=2"},
{
id: "f3",
title: "Secure Download",
tags: [
"Offline",
"Secure",
],
imageSrc: "http://img.b2bpic.net/free-photo/cloud-with-lock_1048-1663.jpg?_wi=2",
},
id: "f3", title: "Secure Download", tags: [
"Offline", "Secure"],
imageSrc: "http://img.b2bpic.net/free-photo/cloud-with-lock_1048-1663.jpg?_wi=2"},
]}
title="Features That Keep You Reading"
description="Everything you need to manage your personal library efficiently."
@@ -175,39 +115,20 @@ export default function LandingPage() {
useInvertedBackground={false}
plans={[
{
id: "monthly",
badge: "Basic",
price: "$5",
subtitle: "Per month",
buttons: [
id: "monthly", badge: "Basic", price: "$5", subtitle: "Per month", buttons: [
{
text: "Subscribe Now",
href: "#",
},
text: "Subscribe Now", href: "#"},
],
features: [
"Unlimited library access",
"Download PDF",
"Basic support",
],
"Unlimited library access", "Download PDF", "Basic support"],
},
{
id: "yearly",
badge: "Best Value",
price: "$95",
subtitle: "Per year",
buttons: [
id: "yearly", badge: "Best Value", price: "$95", subtitle: "Per year", buttons: [
{
text: "Go Yearly",
href: "#",
},
text: "Go Yearly", href: "#"},
],
features: [
"All basic features",
"Exclusive content",
"Priority support",
"Offline reading",
],
"All basic features", "Exclusive content", "Priority support", "Offline reading"],
},
]}
title="Simple, Transparent Pricing"
@@ -221,45 +142,15 @@ export default function LandingPage() {
useInvertedBackground={false}
testimonials={[
{
id: "t1",
title: "Great Experience",
quote: "I love the clean UI. It makes reading a joy.",
name: "Alex R.",
role: "Developer",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-mature-woman-covered-blanket-holding-book_171337-19320.jpg?_wi=2",
},
id: "t1", title: "Great Experience", quote: "I love the clean UI. It makes reading a joy.", name: "Alex R.", role: "Developer", imageSrc: "http://img.b2bpic.net/free-photo/portrait-mature-woman-covered-blanket-holding-book_171337-19320.jpg?_wi=2"},
{
id: "t2",
title: "Must Have App",
quote: "The annual plan paid for itself in one month.",
name: "Maria S.",
role: "Designer",
imageSrc: "http://img.b2bpic.net/free-photo/people-working-as-team-company_23-2149136890.jpg",
},
id: "t2", title: "Must Have App", quote: "The annual plan paid for itself in one month.", name: "Maria S.", role: "Designer", imageSrc: "http://img.b2bpic.net/free-photo/people-working-as-team-company_23-2149136890.jpg"},
{
id: "t3",
title: "Highly Recommended",
quote: "The download feature works seamlessly.",
name: "David K.",
role: "Student",
imageSrc: "http://img.b2bpic.net/free-photo/smiling-businesswoman-using-tablet-computer_74855-5151.jpg",
},
id: "t3", title: "Highly Recommended", quote: "The download feature works seamlessly.", name: "David K.", role: "Student", imageSrc: "http://img.b2bpic.net/free-photo/smiling-businesswoman-using-tablet-computer_74855-5151.jpg"},
{
id: "t4",
title: "Perfect AI",
quote: "Discovering new genres has never been easier.",
name: "Jane D.",
role: "Marketer",
imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-with-short-hair-holding-magazine_23-2148275094.jpg",
},
id: "t4", title: "Perfect AI", quote: "Discovering new genres has never been easier.", name: "Jane D.", role: "Marketer", imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-with-short-hair-holding-magazine_23-2148275094.jpg"},
{
id: "t5",
title: "Seamless Access",
quote: "I use it every single day on my commute.",
name: "Chris B.",
role: "Writer",
imageSrc: "http://img.b2bpic.net/free-photo/serious-male-user-using-wireless-internet-connection_74855-1590.jpg",
},
id: "t5", title: "Seamless Access", quote: "I use it every single day on my commute.", name: "Chris B.", role: "Writer", imageSrc: "http://img.b2bpic.net/free-photo/serious-male-user-using-wireless-internet-connection_74855-1590.jpg"},
]}
title="Loved by Readers Worldwide"
description="Join over 10,000 satisfied members."
@@ -272,20 +163,11 @@ export default function LandingPage() {
useInvertedBackground={false}
faqs={[
{
id: "faq-1",
title: "Can I cancel anytime?",
content: "Yes, you can cancel your subscription at any time from your account dashboard.",
},
id: "faq-1", title: "Can I cancel anytime?", content: "Yes, you can cancel your subscription at any time from your account dashboard."},
{
id: "faq-2",
title: "Is there a free trial?",
content: "Yes, we offer a 7-day free trial for all new accounts.",
},
id: "faq-2", title: "Is there a free trial?", content: "Yes, we offer a 7-day free trial for all new accounts."},
{
id: "faq-3",
title: "Can I download PDFs?",
content: "Yes, all premium members can download PDFs for offline reading.",
},
id: "faq-3", title: "Can I download PDFs?", content: "Yes, all premium members can download PDFs for offline reading."},
]}
title="Frequently Asked Questions"
description="Everything you need to know about your subscription."
@@ -297,16 +179,13 @@ export default function LandingPage() {
<ContactCTA
useInvertedBackground={false}
background={{
variant: "sparkles-gradient",
}}
variant: "sparkles-gradient"}}
tag="Need Help?"
title="Have questions about our service?"
description="Our team is here to assist you with any questions or support needed."
buttons={[
{
text: "Contact Support",
href: "#",
},
text: "Contact Support", href: "#"},
]}
/>
</div>

View File

@@ -13,12 +13,12 @@
--background: #0a0a0a;
--card: #1a1a1a;
--foreground: #f5f5f5;
--primary-cta: #ffdf7d;
--primary-cta: #106EFB;
--primary-cta-text: #0a0a0a;
--secondary-cta: #1a1a1a;
--secondary-cta-text: #ffffff;
--accent: #b8860b;
--background-accent: #8b6914;
--accent: #106EFB;
--background-accent: #0a0a0a;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);