Merge version_2 into main #1
119
src/app/cart/page.tsx
Normal file
119
src/app/cart/page.tsx
Normal file
@@ -0,0 +1,119 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import ProductCart from '@/components/ecommerce/cart/ProductCart';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
export default function CartPage() {
|
||||
const [cartItems, setCartItems] = useState([
|
||||
{
|
||||
id: "song-1", name: "Softly", price: "₹100", quantity: 1,
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/spring-party-square-flyer-template-with-photo_23-2148465200.jpg", imageAlt: "Album cover for Softly"},
|
||||
{
|
||||
id: "song-2", name: "White Brown Black", price: "₹150", quantity: 2,
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/vynil-template-background_1406-29.jpg", imageAlt: "Album cover for White Brown Black"},
|
||||
]);
|
||||
|
||||
const calculateTotal = () => {
|
||||
return cartItems.reduce((sum, item) => sum + parseInt(item.price.replace('₹', '')) * item.quantity, 0).toFixed(2);
|
||||
};
|
||||
|
||||
const handleQuantityChange = (id: string, newQuantity: number) => {
|
||||
setCartItems(prevItems =>
|
||||
prevItems.map(item =>
|
||||
item.id === id ? { ...item, quantity: newQuantity > 0 ? newQuantity : 1 } : item
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const handleRemoveItem = (id: string) => {
|
||||
setCartItems(prevItems => prevItems.filter(item => item.id !== id));
|
||||
};
|
||||
|
||||
const handleProceedToCheckout = () => {
|
||||
alert("Checkout flow is not implemented yet. Please imagine a beautiful checkout page!");
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="compact"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="blurBottom"
|
||||
cardStyle="layered-gradient"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Songs", id: "songs" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="MSGPLAYER"
|
||||
button={{
|
||||
text: "View Cart", href: "/cart"}}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="cart-content" data-section="cart-content">
|
||||
<ProductCart
|
||||
isOpen={true}
|
||||
onClose={() => { /* No-op, as it's a page, not a modal */ }}
|
||||
items={cartItems}
|
||||
onQuantityChange={handleQuantityChange}
|
||||
onRemove={handleRemoveItem}
|
||||
total={`₹${calculateTotal()}`}
|
||||
buttons={[
|
||||
{ text: "Continue Shopping", href: "/" },
|
||||
{ text: "Proceed to Checkout", onClick: handleProceedToCheckout },
|
||||
]}
|
||||
title="Your Shopping Cart"
|
||||
emptyMessage="Your cart is currently empty. Explore our music!"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Quick Links", items: [
|
||||
{ label: "Home", href: "#home" },
|
||||
{ label: "Songs", href: "#songs" },
|
||||
{ label: "Features", href: "#features" },
|
||||
{ label: "Cart", href: "/cart" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Contact Us", href: "#contact" },
|
||||
{ label: "FAQs", href: "#contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2023 MSGPLAYER. All rights reserved."
|
||||
bottomRightText="Powered by Music Enthusiasts"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
202
src/app/page.tsx
202
src/app/page.tsx
@@ -31,35 +31,21 @@ export default function LandingPage() {
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "home",
|
||||
},
|
||||
name: "Home", id: "home"},
|
||||
{
|
||||
name: "Songs",
|
||||
id: "songs",
|
||||
},
|
||||
name: "Songs", id: "songs"},
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
name: "Features", id: "features"},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
name: "About", id: "about"},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
name: "Testimonials", id: "testimonials"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
name: "Contact", id: "contact"},
|
||||
]}
|
||||
brandName="MSGPLAYER"
|
||||
button={{
|
||||
text: "Listen Now",
|
||||
href: "#songs",
|
||||
}}
|
||||
text: "Listen Now", href: "#songs"}}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
</div>
|
||||
@@ -67,25 +53,22 @@ export default function LandingPage() {
|
||||
<div id="home" data-section="home">
|
||||
<HeroSplit
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
variant: "radial-gradient"}}
|
||||
imagePosition="right"
|
||||
title="MSGPLAYER: Your Ultimate Hub for Karan Aujla's Music"
|
||||
description="Dive into the world of Karan Aujla with MSGPLAYER. Access exclusive tracks, albums, and curated playlists, all in one seamless experience."
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Listening",
|
||||
href: "#songs",
|
||||
},
|
||||
text: "Start Listening", href: "#songs"},
|
||||
{
|
||||
text: "Explore Songs",
|
||||
href: "#songs",
|
||||
},
|
||||
text: "Explore Songs", href: "#songs"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-vector/music-player-design_1322-49.jpg"
|
||||
imageAlt="Music player interface with Karan Aujla's album art"
|
||||
mediaAnimation="slide-up"
|
||||
fixedMediaHeight={true}
|
||||
tagAnimation="slide-up"
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -98,32 +81,16 @@ export default function LandingPage() {
|
||||
carouselMode="buttons"
|
||||
products={[
|
||||
{
|
||||
id: "song-1",
|
||||
name: "Softly",
|
||||
price: "Free",
|
||||
variant: "Single",
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/spring-party-square-flyer-template-with-photo_23-2148465200.jpg",
|
||||
imageAlt: "Album cover for Softly",
|
||||
},
|
||||
id: "song-1", name: "Softly", price: "Free", variant: "Single", imageSrc: "http://img.b2bpic.net/free-psd/spring-party-square-flyer-template-with-photo_23-2148465200.jpg", imageAlt: "Album cover for Softly"},
|
||||
{
|
||||
id: "song-2",
|
||||
name: "White Brown Black",
|
||||
price: "Premium Access",
|
||||
variant: "Single",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/vynil-template-background_1406-29.jpg",
|
||||
imageAlt: "Album cover for White Brown Black",
|
||||
},
|
||||
id: "song-2", name: "White Brown Black", price: "Premium Access", variant: "Single", imageSrc: "http://img.b2bpic.net/free-vector/vynil-template-background_1406-29.jpg", imageAlt: "Album cover for White Brown Black"},
|
||||
{
|
||||
id: "song-3",
|
||||
name: "Mexico",
|
||||
price: "Free",
|
||||
variant: "Single",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/vertical-poster-template-mexican-cinco-de-mayo-celebration_23-2150353197.jpg",
|
||||
imageAlt: "Album cover for Mexico",
|
||||
},
|
||||
id: "song-3", name: "Mexico", price: "Free", variant: "Single", imageSrc: "http://img.b2bpic.net/free-vector/vertical-poster-template-mexican-cinco-de-mayo-celebration_23-2150353197.jpg", imageAlt: "Album cover for Mexico"},
|
||||
]}
|
||||
title="Karan Aujla's Latest Hits & Classics"
|
||||
description="Discover every track from the 'Geetan Di Machine' – from chart-toppers to fan favorites. High-quality audio, always."
|
||||
tagAnimation="slide-up"
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -135,47 +102,31 @@ export default function LandingPage() {
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "High-Quality Audio Streaming",
|
||||
description: "Experience Karan Aujla's tracks in crystal-clear quality, optimized for all devices.",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/wave-sound-electronic-music-poster-collection_52683-5202.jpg",
|
||||
imageAlt: "High quality audio player screenshot",
|
||||
},
|
||||
title: "High-Quality Audio Streaming", description: "Experience Karan Aujla's tracks in crystal-clear quality, optimized for all devices.", phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/wave-sound-electronic-music-poster-collection_52683-5202.jpg", imageAlt: "High quality audio player screenshot"},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/admin-app-dashboard-flat-style_23-2147863334.jpg",
|
||||
imageAlt: "EQ settings on phone",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/admin-app-dashboard-flat-style_23-2147863334.jpg", imageAlt: "EQ settings on phone"},
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Curated Playlists & Albums",
|
||||
description: "Explore exclusive playlists and full album experiences, hand-picked for fans.",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-african-woman-sleepwear-smiling-looking-tablet-listening-music-headphones-sitting-bed-profile_176420-12846.jpg",
|
||||
imageAlt: "Playlist selection screen",
|
||||
},
|
||||
title: "Curated Playlists & Albums", description: "Explore exclusive playlists and full album experiences, hand-picked for fans.", phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-african-woman-sleepwear-smiling-looking-tablet-listening-music-headphones-sitting-bed-profile_176420-12846.jpg", imageAlt: "Playlist selection screen"},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-young-woman-using-mobile-phone_23-2147910031.jpg",
|
||||
imageAlt: "Album view on phone",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-young-woman-using-mobile-phone_23-2147910031.jpg", imageAlt: "Album view on phone"},
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Offline Listening Mode",
|
||||
description: "Download your favorite Karan Aujla songs and listen anytime, anywhere, without internet.",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/music-player-app-interface_23-2148518354.jpg",
|
||||
imageAlt: "Download manager on phone",
|
||||
},
|
||||
title: "Offline Listening Mode", description: "Download your favorite Karan Aujla songs and listen anytime, anywhere, without internet.", phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/music-player-app-interface_23-2148518354.jpg", imageAlt: "Download manager on phone"},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-lying-sofa-listening-music-with-headphone-from-smart-phone_23-2148028751.jpg",
|
||||
imageAlt: "Offline playback screen",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-lying-sofa-listening-music-with-headphone-from-smart-phone_23-2148028751.jpg", imageAlt: "Offline playback screen"},
|
||||
},
|
||||
]}
|
||||
showStepNumbers={true}
|
||||
title="Unleash the Power of MSGPLAYER"
|
||||
description="Experience music like never before with features designed for true fans."
|
||||
tagAnimation="slide-up"
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -183,6 +134,8 @@ export default function LandingPage() {
|
||||
<TextAbout
|
||||
useInvertedBackground={true}
|
||||
title="About MSGPLAYER: Dedicated to True Music Lovers"
|
||||
tagAnimation="slide-up"
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -192,48 +145,18 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Harman Singh",
|
||||
date: "October 26, 2023",
|
||||
title: "Best app for Karan Aujla fans!",
|
||||
quote: "MSGPLAYER has every Karan Aujla song I could ask for, in amazing quality. The interface is so smooth!",
|
||||
tag: "Music Lover",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/middle-aged-hispanic-business-person_23-2151099212.jpg",
|
||||
avatarAlt: "Harman Singh avatar",
|
||||
},
|
||||
id: "1", name: "Harman Singh", date: "October 26, 2023", title: "Best app for Karan Aujla fans!", quote: "MSGPLAYER has every Karan Aujla song I could ask for, in amazing quality. The interface is so smooth!", tag: "Music Lover", avatarSrc: "http://img.b2bpic.net/free-photo/middle-aged-hispanic-business-person_23-2151099212.jpg", avatarAlt: "Harman Singh avatar"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Priya Sharma",
|
||||
date: "October 20, 2023",
|
||||
title: "My go-to for new releases",
|
||||
quote: "I always find the latest Karan Aujla tracks here first. The playlists are fantastic for discovery!",
|
||||
tag: "Fan Favorite",
|
||||
avatarSrc: "http://img.b2bpic.net/free-vector/character-showing-emotions-collection_52683-5090.jpg",
|
||||
avatarAlt: "Priya Sharma avatar",
|
||||
},
|
||||
id: "2", name: "Priya Sharma", date: "October 20, 2023", title: "My go-to for new releases", quote: "I always find the latest Karan Aujla tracks here first. The playlists are fantastic for discovery!", tag: "Fan Favorite", avatarSrc: "http://img.b2bpic.net/free-vector/character-showing-emotions-collection_52683-5090.jpg", avatarAlt: "Priya Sharma avatar"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Jatinder Kaur",
|
||||
date: "September 15, 2023",
|
||||
title: "Seamless listening experience",
|
||||
quote: "Love the offline feature! I can enjoy my favorite songs without worrying about internet connection.",
|
||||
tag: "Daily Listener",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/woman-teaching-classroom_23-2151696415.jpg",
|
||||
avatarAlt: "Jatinder Kaur avatar",
|
||||
},
|
||||
id: "3", name: "Jatinder Kaur", date: "September 15, 2023", title: "Seamless listening experience", quote: "Love the offline feature! I can enjoy my favorite songs without worrying about internet connection.", tag: "Daily Listener", avatarSrc: "http://img.b2bpic.net/free-photo/woman-teaching-classroom_23-2151696415.jpg", avatarAlt: "Jatinder Kaur avatar"},
|
||||
{
|
||||
id: "4",
|
||||
name: "Amritpal Dhillon",
|
||||
date: "August 8, 2023",
|
||||
title: "Highly recommended for Punjabi music",
|
||||
quote: "If you're into Punjabi music, especially Karan Aujla, MSGPLAYER is a must-have. Pure gold!",
|
||||
tag: "True Fan",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/professional-lawyer_1098-21012.jpg",
|
||||
avatarAlt: "Amritpal Dhillon avatar",
|
||||
},
|
||||
id: "4", name: "Amritpal Dhillon", date: "August 8, 2023", title: "Highly recommended for Punjabi music", quote: "If you're into Punjabi music, especially Karan Aujla, MSGPLAYER is a must-have. Pure gold!", tag: "True Fan", avatarSrc: "http://img.b2bpic.net/free-photo/professional-lawyer_1098-21012.jpg", avatarAlt: "Amritpal Dhillon avatar"},
|
||||
]}
|
||||
title="What Fans Are Saying"
|
||||
description="Hear from our passionate community who love the MSGPLAYER experience."
|
||||
tagAnimation="slide-up"
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -243,22 +166,14 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "faq-1",
|
||||
title: "How do I create an account?",
|
||||
content: "Creating an account on MSGPLAYER is quick and easy! Simply click on the 'Sign Up' button in the top right corner and follow the prompts. You can register using your email or social media accounts.",
|
||||
},
|
||||
id: "faq-1", title: "How do I create an account?", content: "Creating an account on MSGPLAYER is quick and easy! Simply click on the 'Sign Up' button in the top right corner and follow the prompts. You can register using your email or social media accounts."},
|
||||
{
|
||||
id: "faq-2",
|
||||
title: "Is MSGPLAYER free to use?",
|
||||
content: "MSGPLAYER offers both free and premium listening options. You can access a wide range of Karan Aujla's songs for free, with ads. For an ad-free experience and offline downloads, consider our premium subscription.",
|
||||
},
|
||||
id: "faq-2", title: "Is MSGPLAYER free to use?", content: "MSGPLAYER offers both free and premium listening options. You can access a wide range of Karan Aujla's songs for free, with ads. For an ad-free experience and offline downloads, consider our premium subscription."},
|
||||
]}
|
||||
ctaTitle="Have Questions? Reach Out!"
|
||||
ctaDescription="Whether it's feedback, support, or partnership inquiries, we're here to help you. Our team is dedicated to providing you with the best possible music experience."
|
||||
ctaButton={{
|
||||
text: "Contact Support",
|
||||
href: "mailto:support@msgplayer.com",
|
||||
}}
|
||||
text: "Contact Support", href: "mailto:support@msgplayer.com"}}
|
||||
ctaIcon={MessageCircle}
|
||||
accordionAnimationType="smooth"
|
||||
showCard={true}
|
||||
@@ -269,46 +184,29 @@ export default function LandingPage() {
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Quick Links",
|
||||
items: [
|
||||
title: "Quick Links", items: [
|
||||
{
|
||||
label: "Home",
|
||||
href: "#home",
|
||||
},
|
||||
label: "Home", href: "#home"},
|
||||
{
|
||||
label: "Songs",
|
||||
href: "#songs",
|
||||
},
|
||||
label: "Songs", href: "#songs"},
|
||||
{
|
||||
label: "Features",
|
||||
href: "#features",
|
||||
},
|
||||
label: "Features", href: "#features"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
title: "Support", items: [
|
||||
{
|
||||
label: "Contact Us",
|
||||
href: "#contact",
|
||||
},
|
||||
label: "Contact Us", href: "#contact"},
|
||||
{
|
||||
label: "FAQs",
|
||||
href: "#contact",
|
||||
},
|
||||
label: "FAQs", href: "#contact"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
label: "Privacy Policy", href: "#"},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
label: "Terms of Service", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
@@ -319,4 +217,4 @@ export default function LandingPage() {
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user