Merge version_3 into main #7

Merged
bender merged 3 commits from version_3 into main 2026-03-05 13:12:59 +00:00
3 changed files with 341 additions and 110 deletions

View File

@@ -0,0 +1,153 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import { TrendingUp } from "lucide-react";
export default function BestsellersPage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Shop", id: "/shop" },
{ name: "Best Sellers", id: "/bestsellers" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
];
const bestsellerProducts = [
{
id: "5", name: "Nebula Premium Pack", price: "$199.99", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-rich-woman-sitting-home_23-2149722596.jpg?_wi=1", imageAlt: "Nebula Premium Pack", onProductClick: () => console.log("View Nebula Premium Pack"),
onFavorite: () => console.log("Added to favorites: Nebula Premium Pack"),
},
{
id: "6", name: "Stellar Pro Edition", price: "$219.99", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-rich-woman-sitting-home_23-2149722596.jpg?_wi=2", imageAlt: "Stellar Pro Edition", onProductClick: () => console.log("View Stellar Pro Edition"),
onFavorite: () => console.log("Added to favorites: Stellar Pro Edition"),
},
{
id: "7", name: "Cosmos Elite Pack", price: "$229.99", imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-cup-store-concept-choosing-dishes_169016-23448.jpg", imageAlt: "Cosmos Elite Pack", onProductClick: () => console.log("View Cosmos Elite Pack"),
onFavorite: () => console.log("Added to favorites: Cosmos Elite Pack"),
},
{
id: "1", name: "Eclipse Motion Pro", price: "$149.99", imageSrc: "http://img.b2bpic.net/free-photo/still-life-cozy-house-with-decorative-details-interior_169016-6258.jpg?_wi=2", imageAlt: "Eclipse Motion Pro", onProductClick: () => console.log("View Eclipse Motion Pro"),
onFavorite: () => console.log("Added to favorites: Eclipse Motion Pro"),
},
{
id: "2", name: "Zenith Comfort Elite", price: "$179.99", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-male-self-care-setting-still-life_23-2150326578.jpg?_wi=2", imageAlt: "Zenith Comfort Elite", onProductClick: () => console.log("View Zenith Comfort Elite"),
onFavorite: () => console.log("Added to favorites: Zenith Comfort Elite"),
},
{
id: "3", name: "Aurora Premium Series", price: "$159.99", imageSrc: "http://img.b2bpic.net/free-vector/gradient-golden-luxury-facebook-cover_23-2149044212.jpg?_wi=2", imageAlt: "Aurora Premium Series", onProductClick: () => console.log("View Aurora Premium Series"),
onFavorite: () => console.log("Added to favorites: Aurora Premium Series"),
},
{
id: "4", name: "Luxora Elite Collection", price: "$189.99", imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-holding-coffee-cup_23-2148765432.jpg?_wi=2", imageAlt: "Luxora Elite Collection", onProductClick: () => console.log("View Luxora Elite Collection"),
onFavorite: () => console.log("Added to favorites: Luxora Elite Collection"),
},
{
id: "8", name: "Vortex Dynamic Series", price: "$169.99", imageSrc: "http://img.b2bpic.net/free-photo/still-life-cozy-house-with-decorative-details-interior_169016-6258.jpg?_wi=3", imageAlt: "Vortex Dynamic Series", onProductClick: () => console.log("View Vortex Dynamic Series"),
onFavorite: () => console.log("Added to favorites: Vortex Dynamic Series"),
},
];
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="mediumLarge"
sizing="largeSmallSizeMediumTitles"
background="circleGradient"
cardStyle="outline"
primaryButtonStyle="flat"
secondaryButtonStyle="solid"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={navItems}
button={{ text: "Shop Now", href: "/shop" }}
brandName="Alignra"
/>
</div>
<div id="bestsellers-header" data-section="bestsellers-header" className="bg-gray-50 py-20">
<div className="max-w-7xl mx-auto px-4 md:px-8">
<h1 className="text-5xl md:text-6xl font-light mb-6">Best Sellers</h1>
<p className="text-lg text-gray-600">Our most loved products - trusted by thousands of satisfied customers worldwide</p>
</div>
</div>
<div id="bestsellers" data-section="bestsellers" className="bg-white">
<div className="max-w-7xl mx-auto px-4 md:px-8 py-20">
<ProductCardOne
title="Top Rated Products"
description="Explore our bestselling collection featuring the most popular and highly-rated premium products"
tag="Top Rated"
tagIcon={TrendingUp}
tagAnimation="slide-up"
products={bestsellerProducts}
gridVariant="four-items-2x2-equal-grid"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
carouselMode="buttons"
ariaLabel="Best sellers products section"
containerClassName="py-20"
/>
</div>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
logoText="Alignra"
columns={[
{
items: [
{ label: "Home", href: "/" },
{ label: "Shop", href: "/shop" },
{ label: "Best Sellers", href: "/bestsellers" },
{ label: "About", href: "/about" },
],
},
{
items: [
{ label: "Contact", href: "/contact" },
{ label: "FAQ", href: "/#faq" },
{ label: "Support", href: "/support" },
{ label: "Careers", href: "/careers" },
],
},
{
items: [
{ label: "Privacy Policy", href: "/privacy" },
{ label: "Terms of Service", href: "/terms" },
{ label: "Shipping Policy", href: "/shipping" },
{ label: "Returns", href: "/returns" },
],
},
{
items: [
{ label: "Twitter", href: "https://twitter.com" },
{ label: "Instagram", href: "https://instagram.com" },
{ label: "Facebook", href: "https://facebook.com" },
{ label: "LinkedIn", href: "https://linkedin.com" },
],
},
{
items: [
{ label: "Newsletter", href: "/#contact" },
{ label: "Blog", href: "/blog" },
{ label: "Brand Kit", href: "/brand-kit" },
{ label: "Press", href: "/press" },
],
},
]}
ariaLabel="Site footer"
containerClassName="bg-gray-900 text-white"
logoClassName="text-4xl font-light mb-8"
/>
</div>
</ThemeProvider>
);
}

View File

@@ -11,8 +11,8 @@ import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import ContactSplit from "@/components/sections/contact/ContactSplit";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
import Link from "next/link";
import { Sparkles, Star, Award, TrendingUp, Zap, Heart, CheckCircle, Truck, Shield, Headphones, Mail, Check, HelpCircle } from "lucide-react";
import { useState, useEffect } from "react";
export default function HomePage() {
const navItems = [
@@ -23,10 +23,69 @@ export default function HomePage() {
{ name: "Contact", id: "/contact" },
];
const [timeRemaining, setTimeRemaining] = useState<string>("48:00:00");
useEffect(() => {
const calculateTimeRemaining = () => {
const now = new Date();
const endTime = new Date(now.getTime() + 48 * 60 * 60 * 1000);
const diff = endTime.getTime() - now.getTime();
if (diff > 0) {
const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
const minutes = Math.floor((diff / (1000 * 60)) % 60);
const seconds = Math.floor((diff / 1000) % 60);
setTimeRemaining(
`${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`
);
} else {
setTimeRemaining("00:00:00");
}
};
calculateTimeRemaining();
const interval = setInterval(calculateTimeRemaining, 1000);
return () => clearInterval(interval);
}, []);
const handleNewsletterSubmit = (email: string) => {
console.log("Newsletter signup:", email);
};
const featuredProducts = [
{
id: "1", name: "Eclipse Motion Pro", price: "$149.99", imageSrc: "http://img.b2bpic.net/free-photo/still-life-cozy-house-with-decorative-details-interior_169016-6258.jpg?_wi=2", imageAlt: "Eclipse Motion Pro", onProductClick: () => window.open("/shop/eclipse-motion-pro", "_blank"),
onFavorite: () => console.log("Added to favorites: Eclipse Motion Pro"),
},
{
id: "2", name: "Zenith Comfort Elite", price: "$179.99", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-male-self-care-setting-still-life_23-2150326578.jpg?_wi=2", imageAlt: "Zenith Comfort Elite", onProductClick: () => window.open("/shop/zenith-comfort-elite", "_blank"),
onFavorite: () => console.log("Added to favorites: Zenith Comfort Elite"),
},
{
id: "3", name: "Aurora Premium Series", price: "$159.99", imageSrc: "http://img.b2bpic.net/free-vector/gradient-golden-luxury-facebook-cover_23-2149044212.jpg?_wi=2", imageAlt: "Aurora Premium Series", onProductClick: () => window.open("/shop/aurora-premium-series", "_blank"),
onFavorite: () => console.log("Added to favorites: Aurora Premium Series"),
},
{
id: "4", name: "Luxora Elite Collection", price: "$189.99", imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-holding-coffee-cup_23-2148765432.jpg?_wi=2", imageAlt: "Luxora Elite Collection", onProductClick: () => window.open("/shop/luxora-elite-collection", "_blank"),
onFavorite: () => console.log("Added to favorites: Luxora Elite Collection"),
},
];
const bestSellersProducts = [
{
id: "5", name: "Nebula Premium Pack", price: "$199.99", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-rich-woman-sitting-home_23-2149722596.jpg?_wi=1", imageAlt: "Nebula Premium Pack", onProductClick: () => window.open("/shop/nebula-premium-pack", "_blank"),
onFavorite: () => console.log("Added to favorites: Nebula Premium Pack"),
},
{
id: "6", name: "Stellar Pro Edition", price: "$219.99", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-rich-woman-sitting-home_23-2149722596.jpg?_wi=2", imageAlt: "Stellar Pro Edition", onProductClick: () => window.open("/shop/stellar-pro-edition", "_blank"),
onFavorite: () => console.log("Added to favorites: Stellar Pro Edition"),
},
{
id: "7", name: "Cosmos Elite Pack", price: "$229.99", imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-cup-store-concept-choosing-dishes_169016-23448.jpg", imageAlt: "Cosmos Elite Pack", onProductClick: () => window.open("/shop/cosmos-elite-pack", "_blank"),
onFavorite: () => console.log("Added to favorites: Cosmos Elite Pack"),
},
];
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
@@ -58,20 +117,15 @@ export default function HomePage() {
background={{ variant: "radial-gradient" }}
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/composition-natural-argan-seeds_23-2149016622.jpg", imageAlt: "Premium lifestyle product showcase"
},
imageSrc: "http://img.b2bpic.net/free-photo/composition-natural-argan-seeds_23-2149016622.jpg", imageAlt: "Premium lifestyle product showcase"},
{
imageSrc: "http://img.b2bpic.net/free-photo/still-life-cozy-house-with-decorative-details-interior_169016-6258.jpg?_wi=1", imageAlt: "Premium comfort collection"
},
imageSrc: "http://img.b2bpic.net/free-photo/still-life-cozy-house-with-decorative-details-interior_169016-6258.jpg?_wi=1", imageAlt: "Premium comfort collection"},
{
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-male-self-care-setting-still-life_23-2150326578.jpg?_wi=1", imageAlt: "Luxury product range"
},
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-male-self-care-setting-still-life_23-2150326578.jpg?_wi=1", imageAlt: "Luxury product range"},
{
imageSrc: "http://img.b2bpic.net/free-vector/gradient-golden-luxury-facebook-cover_23-2149044212.jpg?_wi=1", imageAlt: "High-end lifestyle products"
},
imageSrc: "http://img.b2bpic.net/free-vector/gradient-golden-luxury-facebook-cover_23-2149044212.jpg?_wi=1", imageAlt: "High-end lifestyle products"},
{
imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-holding-coffee-cup_23-2148765432.jpg?_wi=1", imageAlt: "Premium accessory collection"
},
imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-holding-coffee-cup_23-2148765432.jpg?_wi=1", imageAlt: "Premium accessory collection"},
]}
buttons={[
{ text: "Shop Now", href: "/shop" },
@@ -92,20 +146,7 @@ export default function HomePage() {
tag="New Arrivals"
tagIcon={Star}
tagAnimation="slide-up"
products={[
{
id: "1", name: "Eclipse Motion Pro", price: "$149.99", imageSrc: "http://img.b2bpic.net/free-photo/still-life-cozy-house-with-decorative-details-interior_169016-6258.jpg?_wi=2", imageAlt: "Eclipse Motion Pro"
},
{
id: "2", name: "Zenith Comfort Elite", price: "$179.99", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-male-self-care-setting-still-life_23-2150326578.jpg?_wi=2", imageAlt: "Zenith Comfort Elite"
},
{
id: "3", name: "Aurora Premium Series", price: "$159.99", imageSrc: "http://img.b2bpic.net/free-vector/gradient-golden-luxury-facebook-cover_23-2149044212.jpg?_wi=2", imageAlt: "Aurora Premium Series"
},
{
id: "4", name: "Luxora Elite Collection", price: "$189.99", imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-holding-coffee-cup_23-2148765432.jpg?_wi=2", imageAlt: "Luxora Elite Collection"
},
]}
products={featuredProducts}
gridVariant="four-items-2x2-equal-grid"
animationType="slide-up"
textboxLayout="default"
@@ -129,8 +170,7 @@ export default function HomePage() {
{
id: "1", title: "Premium Quality", description:
"Crafted with high-quality durable materials that stand the test of time. Every product undergoes rigorous quality control to ensure perfection.", media: {
imageSrc: "http://img.b2bpic.net/free-photo/still-life-cozy-house-with-decorative-details-interior_169016-6258.jpg?_wi=3", imageAlt: "Premium Quality"
},
imageSrc: "http://img.b2bpic.net/free-photo/still-life-cozy-house-with-decorative-details-interior_169016-6258.jpg?_wi=3", imageAlt: "Premium Quality"},
items: [
{ icon: CheckCircle, text: "Premium materials" },
{ icon: CheckCircle, text: "Rigorous testing" },
@@ -141,8 +181,7 @@ export default function HomePage() {
{
id: "2", title: "Fast Shipping", description:
"Reliable delivery with real-time tracking. Your order is carefully packaged and shipped within 24 hours to ensure quick arrival.", media: {
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-male-self-care-setting-still-life_23-2150326578.jpg?_wi=3", imageAlt: "Fast Shipping"
},
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-male-self-care-setting-still-life_23-2150326578.jpg?_wi=3", imageAlt: "Fast Shipping"},
items: [
{ icon: Truck, text: "24/7 tracking" },
{ icon: Truck, text: "Express delivery" },
@@ -153,8 +192,7 @@ export default function HomePage() {
{
id: "3", title: "30 Day Guarantee", description:
"Risk-free shopping with our comprehensive return and refund policy. If you're not satisfied, we'll make it right within 30 days.", media: {
imageSrc: "http://img.b2bpic.net/free-vector/gradient-golden-luxury-facebook-cover_23-2149044212.jpg?_wi=3", imageAlt: "30 Day Guarantee"
},
imageSrc: "http://img.b2bpic.net/free-vector/gradient-golden-luxury-facebook-cover_23-2149044212.jpg?_wi=3", imageAlt: "30 Day Guarantee"},
items: [
{ icon: Shield, text: "Money-back guarantee" },
{ icon: Shield, text: "No questions asked" },
@@ -165,8 +203,7 @@ export default function HomePage() {
{
id: "4", title: "24/7 Support", description:
"Dedicated customer assistance available around the clock. Our support team is always ready to help with any questions or concerns.", media: {
imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-holding-coffee-cup_23-2148765432.jpg?_wi=3", imageAlt: "24/7 Support"
},
imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-holding-coffee-cup_23-2148765432.jpg?_wi=3", imageAlt: "24/7 Support"},
items: [
{ icon: Headphones, text: "Live chat support" },
{ icon: Headphones, text: "Email assistance" },
@@ -192,17 +229,7 @@ export default function HomePage() {
tag="Top Rated"
tagIcon={TrendingUp}
tagAnimation="slide-up"
products={[
{
id: "5", name: "Nebula Premium Pack", price: "$199.99", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-rich-woman-sitting-home_23-2149722596.jpg?_wi=1", imageAlt: "Nebula Premium Pack"
},
{
id: "6", name: "Stellar Pro Edition", price: "$219.99", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-rich-woman-sitting-home_23-2149722596.jpg?_wi=2", imageAlt: "Stellar Pro Edition"
},
{
id: "7", name: "Cosmos Elite Pack", price: "$229.99", imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-cup-store-concept-choosing-dishes_169016-23448.jpg", imageAlt: "Cosmos Elite Pack"
},
]}
products={bestSellersProducts}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
textboxLayout="default"
@@ -216,29 +243,33 @@ export default function HomePage() {
<div id="limited-offer" data-section="limited-offer" className="bg-gradient-to-r from-blue-50 via-white to-blue-50">
<div className="max-w-7xl mx-auto px-4 md:px-8 py-20">
<div className="text-center mb-12">
<h2 className="text-4xl md:text-5xl font-bold mb-4">Limited Time Offer</h2>
<p className="text-lg text-gray-600 mb-6">Don't miss out on this exclusive opportunity. Get premium products at unbeatable prices with our special promotional offer.</p>
<div className="inline-block bg-white px-8 py-4 rounded-full shadow-lg">
<p className="text-sm text-gray-600 mb-2">Time Remaining:</p>
<p className="text-3xl font-bold text-blue-600 font-mono">{timeRemaining}</p>
</div>
</div>
<PricingCardTwo
title="Limited Time Offer"
description="Don't miss out on this exclusive opportunity. Get premium products at unbeatable prices with our special promotional offer."
tag="Flash Sale"
tagIcon={Zap}
tagAnimation="slide-up"
title=""
description=""
plans={[
{
id: "offer1", badge: "Exclusive Deal", badgeIcon: Sparkles,
price: "SAVE 20%", subtitle: "48 hours remaining - Limited stock available", buttons: [
price: "SAVE 20%", subtitle: "Premium products at unbeatable prices - Limited stock available", buttons: [
{ text: "Claim Your Discount", href: "/shop" },
{ text: "Learn More", href: "#faq" },
],
features: [
"Valid on all premium products", "No minimum purchase required", "Free shipping included", "Expires in 48 hours"
],
"Valid on all premium products", "No minimum purchase required", "Free shipping included", "Expires in 48 hours"],
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
useInvertedBackground={false}
ariaLabel="Limited time offer section"
containerClassName="py-20 bg-gradient-to-r from-blue-50 to-blue-100"
containerClassName=""
/>
</div>
</div>
@@ -248,23 +279,17 @@ export default function HomePage() {
<TestimonialCardTwelve
testimonials={[
{
id: "1", name: "Sarah Johnson", imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg?_wi=1", imageAlt: "Sarah Johnson"
},
id: "1", name: "Sarah Johnson", imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg?_wi=1", imageAlt: "Sarah Johnson"},
{
id: "2", name: "Michael Chen", imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg?_wi=2", imageAlt: "Michael Chen"
},
id: "2", name: "Michael Chen", imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg?_wi=2", imageAlt: "Michael Chen"},
{
id: "3", name: "Emily Rodriguez", imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg?_wi=1", imageAlt: "Emily Rodriguez"
},
id: "3", name: "Emily Rodriguez", imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg?_wi=1", imageAlt: "Emily Rodriguez"},
{
id: "4", name: "David Kim", imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg?_wi=2", imageAlt: "David Kim"
},
id: "4", name: "David Kim", imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg?_wi=2", imageAlt: "David Kim"},
{
id: "5", name: "Jessica Williams", imageSrc: "http://img.b2bpic.net/free-photo/handsome-business-man-wearing-suit-looking-camera-smiling-broadly-with-happy-face-standing-white-background_141793-54115.jpg", imageAlt: "Jessica Williams"
},
id: "5", name: "Jessica Williams", imageSrc: "http://img.b2bpic.net/free-photo/handsome-business-man-wearing-suit-looking-camera-smiling-broadly-with-happy-face-standing-white-background_141793-54115.jpg", imageAlt: "Jessica Williams"},
{
id: "6", name: "James Anderson", imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg?_wi=3", imageAlt: "James Anderson"
},
id: "6", name: "James Anderson", imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg?_wi=3", imageAlt: "James Anderson"},
]}
cardTitle="Over 50,000 satisfied customers trust Alignra to deliver exceptional quality and premium lifestyle products"
cardTag="Customer Testimonials"
@@ -288,8 +313,7 @@ export default function HomePage() {
tagAnimation="slide-up"
names={["Forbes", "TechCrunch", "Business Insider", "Wired", "The Verge", "Entrepreneur", "Inc Magazine", "Fast Company"]}
logos={[
"http://img.b2bpic.net/free-vector/logos-collection-with-vintage-luxury-style_23-2147842742.jpg", "http://img.b2bpic.net/free-vector/logos-collection-with-vintage-luxury-style_23-2147842742.jpg", "http://img.b2bpic.net/free-vector/ornamental-logo-template-design_1115-460.jpg", "http://img.b2bpic.net/free-vector/ornamental-logo-template-design_1115-460.jpg", "http://img.b2bpic.net/free-vector/eye-catching-premium-letter-w-logo-background-royal-identity_1017-53727.jpg", "http://img.b2bpic.net/free-vector/ornamental-logo-template-design_1115-460.jpg", "http://img.b2bpic.net/free-vector/logos-collection-with-vintage-luxury-style_23-2147842742.jpg", "http://img.b2bpic.net/free-vector/logos-collection-with-vintage-luxury-style_23-2147842742.jpg"
]}
"http://img.b2bpic.net/free-vector/logos-collection-with-vintage-luxury-style_23-2147842742.jpg", "http://img.b2bpic.net/free-vector/logos-collection-with-vintage-luxury-style_23-2147842742.jpg", "http://img.b2bpic.net/free-vector/ornamental-logo-template-design_1115-460.jpg", "http://img.b2bpic.net/free-vector/ornamental-logo-template-design_1115-460.jpg", "http://img.b2bpic.net/free-vector/eye-catching-premium-letter-w-logo-background-royal-identity_1017-53727.jpg", "http://img.b2bpic.net/free-vector/ornamental-logo-template-design_1115-460.jpg", "http://img.b2bpic.net/free-vector/logos-collection-with-vintage-luxury-style_23-2147842742.jpg", "http://img.b2bpic.net/free-vector/logos-collection-with-vintage-luxury-style_23-2147842742.jpg"]}
textboxLayout="default"
useInvertedBackground={true}
speed={40}
@@ -310,23 +334,17 @@ export default function HomePage() {
tagAnimation="slide-up"
faqs={[
{
id: "1", title: "What is your return policy?", content: "We offer a hassle-free 30-day money-back guarantee on all products. If you're not completely satisfied, simply contact our support team for a full refund. No questions asked."
},
id: "1", title: "What is your return policy?", content: "We offer a hassle-free 30-day money-back guarantee on all products. If you're not completely satisfied, simply contact our support team for a full refund. No questions asked."},
{
id: "2", title: "How long does shipping take?", content: "Standard shipping typically takes 5-7 business days. We offer express shipping options for faster delivery. All orders include real-time tracking so you can monitor your package."
},
id: "2", title: "How long does shipping take?", content: "Standard shipping typically takes 5-7 business days. We offer express shipping options for faster delivery. All orders include real-time tracking so you can monitor your package."},
{
id: "3", title: "Do you offer international shipping?", content: "Yes, we ship to over 150 countries worldwide. Shipping costs and delivery times vary by location. International orders typically arrive within 10-14 business days."
},
id: "3", title: "Do you offer international shipping?", content: "Yes, we ship to over 150 countries worldwide. Shipping costs and delivery times vary by location. International orders typically arrive within 10-14 business days."},
{
id: "4", title: "Is my payment information secure?", content: "Absolutely. We use industry-leading SSL encryption and PCI DSS compliance to protect your payment information. All transactions are secure and processed through trusted payment gateways."
},
id: "4", title: "Is my payment information secure?", content: "Absolutely. We use industry-leading SSL encryption and PCI DSS compliance to protect your payment information. All transactions are secure and processed through trusted payment gateways."},
{
id: "5", title: "Do you offer bulk discounts?", content: "Yes! We offer special pricing for bulk orders. Contact our sales team for a custom quote on orders of 10 or more items."
},
id: "5", title: "Do you offer bulk discounts?", content: "Yes! We offer special pricing for bulk orders. Contact our sales team for a custom quote on orders of 10 or more items."},
{
id: "6", title: "What's your warranty coverage?", content: "All Alignra products come with a comprehensive warranty. Premium products include lifetime warranty, while other items include 1-2 year coverage depending on the product category."
},
id: "6", title: "What's your warranty coverage?", content: "All Alignra products come with a comprehensive warranty. Premium products include lifetime warranty, while other items include 1-2 year coverage depending on the product category."},
]}
imageSrc="http://img.b2bpic.net/free-photo/call-center-senior-agent-uses-ai-tech-enhance-customer-interactions_482257-117995.jpg"
imageAlt="Customer support team"

View File

@@ -1,10 +1,11 @@
"use client";
import { useState } from "react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import { Star } from "lucide-react";
import { Search, Filter } from "lucide-react";
export default function ShopPage() {
const navItems = [
@@ -15,6 +16,50 @@ export default function ShopPage() {
{ name: "Contact", id: "/contact" },
];
const [searchTerm, setSearchTerm] = useState("");
const [selectedCategory, setSelectedCategory] = useState("all");
const allProducts = [
{
id: "1", name: "Eclipse Motion Pro", price: "$149.99", imageSrc: "http://img.b2bpic.net/free-photo/still-life-cozy-house-with-decorative-details-interior_169016-6258.jpg?_wi=2", imageAlt: "Eclipse Motion Pro", category: "premium", onProductClick: () => console.log("View Eclipse Motion Pro"),
onFavorite: () => console.log("Added to favorites: Eclipse Motion Pro"),
},
{
id: "2", name: "Zenith Comfort Elite", price: "$179.99", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-male-self-care-setting-still-life_23-2150326578.jpg?_wi=2", imageAlt: "Zenith Comfort Elite", category: "comfort", onProductClick: () => console.log("View Zenith Comfort Elite"),
onFavorite: () => console.log("Added to favorites: Zenith Comfort Elite"),
},
{
id: "3", name: "Aurora Premium Series", price: "$159.99", imageSrc: "http://img.b2bpic.net/free-vector/gradient-golden-luxury-facebook-cover_23-2149044212.jpg?_wi=2", imageAlt: "Aurora Premium Series", category: "premium", onProductClick: () => console.log("View Aurora Premium Series"),
onFavorite: () => console.log("Added to favorites: Aurora Premium Series"),
},
{
id: "4", name: "Luxora Elite Collection", price: "$189.99", imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-holding-coffee-cup_23-2148765432.jpg?_wi=2", imageAlt: "Luxora Elite Collection", category: "luxury", onProductClick: () => console.log("View Luxora Elite Collection"),
onFavorite: () => console.log("Added to favorites: Luxora Elite Collection"),
},
{
id: "5", name: "Nebula Premium Pack", price: "$199.99", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-rich-woman-sitting-home_23-2149722596.jpg?_wi=1", imageAlt: "Nebula Premium Pack", category: "premium", onProductClick: () => console.log("View Nebula Premium Pack"),
onFavorite: () => console.log("Added to favorites: Nebula Premium Pack"),
},
{
id: "6", name: "Stellar Pro Edition", price: "$219.99", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-rich-woman-sitting-home_23-2149722596.jpg?_wi=2", imageAlt: "Stellar Pro Edition", category: "comfort", onProductClick: () => console.log("View Stellar Pro Edition"),
onFavorite: () => console.log("Added to favorites: Stellar Pro Edition"),
},
{
id: "7", name: "Cosmos Elite Pack", price: "$229.99", imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-cup-store-concept-choosing-dishes_169016-23448.jpg", imageAlt: "Cosmos Elite Pack", category: "luxury", onProductClick: () => console.log("View Cosmos Elite Pack"),
onFavorite: () => console.log("Added to favorites: Cosmos Elite Pack"),
},
{
id: "8", name: "Vortex Dynamic Series", price: "$169.99", imageSrc: "http://img.b2bpic.net/free-photo/still-life-cozy-house-with-decorative-details-interior_169016-6258.jpg?_wi=3", imageAlt: "Vortex Dynamic Series", category: "premium", onProductClick: () => console.log("View Vortex Dynamic Series"),
onFavorite: () => console.log("Added to favorites: Vortex Dynamic Series"),
},
];
const filteredProducts = allProducts.filter((product) => {
const matchesSearch = product.name.toLowerCase().includes(searchTerm.toLowerCase());
const matchesCategory = selectedCategory === "all" || product.category === selectedCategory;
return matchesSearch && matchesCategory;
});
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
@@ -36,39 +81,54 @@ export default function ShopPage() {
/>
</div>
<div id="shop-header" data-section="shop-header" className="bg-gray-50 py-20">
<div className="max-w-7xl mx-auto px-4 md:px-8">
<h1 className="text-5xl md:text-6xl font-light mb-6">Shop Alignra</h1>
<p className="text-lg text-gray-600 mb-12">Discover our complete collection of premium lifestyle products</p>
<div className="flex flex-col md:flex-row gap-6 mb-12">
<div className="flex-1 relative">
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
<input
type="text"
placeholder="Search products..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full pl-12 pr-4 py-3 rounded-full border-2 border-gray-300 focus:border-blue-500 focus:outline-none"
/>
</div>
<div className="flex items-center gap-2">
<Filter size={20} className="text-gray-600" />
<select
value={selectedCategory}
onChange={(e) => setSelectedCategory(e.target.value)}
className="px-6 py-3 rounded-full border-2 border-gray-300 focus:border-blue-500 focus:outline-none bg-white"
>
<option value="all">All Categories</option>
<option value="premium">Premium</option>
<option value="comfort">Comfort</option>
<option value="luxury">Luxury</option>
</select>
</div>
</div>
<p className="text-gray-600">{filteredProducts.length} products found</p>
</div>
</div>
<div id="shop-products" data-section="shop-products" className="bg-white">
<div className="max-w-7xl mx-auto px-4 md:px-8 py-20">
<ProductCardOne
title="Complete Collection"
description="Browse our full range of premium products carefully curated for quality and innovation"
tag="All Products"
tagIcon={Star}
tagAnimation="slide-up"
products={[
{
id: "1", name: "Eclipse Motion Pro", price: "$149.99", imageSrc: "http://img.b2bpic.net/free-photo/still-life-cozy-house-with-decorative-details-interior_169016-6258.jpg", imageAlt: "Eclipse Motion Pro"},
{
id: "2", name: "Zenith Comfort Elite", price: "$179.99", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-male-self-care-setting-still-life_23-2150326578.jpg", imageAlt: "Zenith Comfort Elite"},
{
id: "3", name: "Aurora Premium Series", price: "$159.99", imageSrc: "http://img.b2bpic.net/free-vector/gradient-golden-luxury-facebook-cover_23-2149044212.jpg", imageAlt: "Aurora Premium Series"},
{
id: "4", name: "Luxora Elite Collection", price: "$189.99", imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-holding-coffee-cup_23-2148765432.jpg", imageAlt: "Luxora Elite Collection"},
{
id: "5", name: "Nebula Premium Pack", price: "$199.99", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-rich-woman-sitting-home_23-2149722596.jpg", imageAlt: "Nebula Premium Pack"},
{
id: "6", name: "Stellar Pro Edition", price: "$219.99", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-rich-woman-sitting-home_23-2149722596.jpg", imageAlt: "Stellar Pro Edition"},
{
id: "7", name: "Cosmos Elite Pack", price: "$229.99", imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-cup-store-concept-choosing-dishes_169016-23448.jpg", imageAlt: "Cosmos Elite Pack"},
{
id: "8", name: "Horizon Premium Collection", price: "$209.99", imageSrc: "http://img.b2bpic.net/free-photo/still-life-cozy-house-with-decorative-details-interior_169016-6258.jpg", imageAlt: "Horizon Premium Collection"},
]}
title=""
description=""
products={filteredProducts}
gridVariant="four-items-2x2-equal-grid"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
carouselMode="buttons"
ariaLabel="Shop collection"
containerClassName="py-20"
ariaLabel="Shop products section"
containerClassName=""
/>
</div>
</div>
@@ -81,14 +141,14 @@ export default function ShopPage() {
items: [
{ label: "Home", href: "/" },
{ label: "Shop", href: "/shop" },
{ label: "Best Sellers", href: "#bestsellers" },
{ label: "Best Sellers", href: "/#bestsellers" },
{ label: "About", href: "/about" },
],
},
{
items: [
{ label: "Contact", href: "/contact" },
{ label: "FAQ", href: "#faq" },
{ label: "FAQ", href: "/#faq" },
{ label: "Support", href: "/support" },
{ label: "Careers", href: "/careers" },
],
@@ -111,7 +171,7 @@ export default function ShopPage() {
},
{
items: [
{ label: "Newsletter", href: "#contact" },
{ label: "Newsletter", href: "/#contact" },
{ label: "Blog", href: "/blog" },
{ label: "Brand Kit", href: "/brand-kit" },
{ label: "Press", href: "/press" },
@@ -125,4 +185,4 @@ export default function ShopPage() {
</div>
</ThemeProvider>
);
}
}