mageshwaran/thirukalyanamweb
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change

Browse Source
This commit is contained in:
Nithish-stoic 2025-12-26 18:04:08 +05:30
parent d2cc8e2797
commit 26b39fe52a
10 changed files with 206 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/components/common/Footer.jsx
View File

@ -69,12 +69,20 @@ export default function Footer() {
</a> </a>
</li> */} </li> */}
</ul> </ul>
<ul className="space-y-2 py-2">
<Link
to="/contact"
className="text-gray-600 hover:text-green-600 transition-colors"
>
Contact Us
</Link>
</ul>
</div> </div>
{/* Company Section */} {/* Company Section */}
<div> {/* <div> */}
<h3 className="text-[#A70710] font-bold text-lg mb-4">Company</h3> {/* <h3 className="text-[#A70710] font-bold text-lg mb-4">Company</h3> */}
<ul className="space-y-2"> {/* <ul className="space-y-2"> */}
{/* <li> {/* <li>
<a <a
href="#" href="#"
@ -107,16 +115,16 @@ export default function Footer() {
Awards & Recognition Awards & Recognition
</a> </a>
</li> */} </li> */}
<li> {/* <li>
<Link <Link
to="/contact" to="/contact"
className="text-gray-600 hover:text-green-600 transition-colors" className="text-gray-600 hover:text-green-600 transition-colors"
> >
Contact Us Contact Us
</Link> </Link>
</li> </li> */}
</ul> {/* </ul>
</div> </div> */}
{/* Privacy & You Section */} {/* Privacy & You Section */}
<div> <div>
@ -182,8 +190,8 @@ export default function Footer() {
</ul> </ul>
</div> </div>
{/* Social Media & Apps Section */} {/* Social Media Section */}
<div> <div className="mb-4">
<h3 className="text-[#A70710] font-bold text-lg mb-4"> <h3 className="text-[#A70710] font-bold text-lg mb-4">
Find us on: Find us on:
</h3> </h3>
@ -219,6 +227,45 @@ export default function Footer() {
<Youtube className="w-5 h-5 text-gray-700" /> <Youtube className="w-5 h-5 text-gray-700" />
</a> </a>
</div> </div>
</div>
{/* Social Media & Apps Section */}
<div>
{/* <h3 className="text-[#A70710] font-bold text-lg mb-4">
Find us on:
</h3> */}
{/* <div className="flex gap-3 mb-6">
<a
href="#"
className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all"
>
<Facebook className="w-5 h-5 text-gray-700" />
</a>
<a
href="#"
className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all"
>
<Instagram className="w-5 h-5 text-gray-700" />
</a>
<a
href="#"
className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all"
>
<Linkedin className="w-5 h-5 text-gray-700" />
</a>
<a
href="#"
className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all"
>
<Twitter className="w-5 h-5 text-gray-700" />
</a>
<a
href="#"
className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all"
>
<Youtube className="w-5 h-5 text-gray-700" />
</a>
</div> */}
<h3 className="text-[#A70710] font-bold text-lg mb-4"> <h3 className="text-[#A70710] font-bold text-lg mb-4">
Get the Thirukalyanam App Get the Thirukalyanam App

42
src/components/profiledashboard/AstroChatUI.jsx
View File

@ -5,15 +5,15 @@ const AstroChatUI = () => {
return ( return (
<> <>
<div className="flex items-center justify-center py-4"> <div className="flex items-center justify-center py-4 px-4">
<div className="w-full max-w-[550px] pt-12 bg-gradient-to-br from-red-50 to-green-50 rounded-3xl shadow-2xl p-8 relative overflow-hidden"> <div className="w-full max-w-[690px] h-full max-h-[690px] md:max-h-[600px] sm:max-h-[500px] pt-6 sm:pt-8 md:pt-12 bg-gradient-to-br from-red-50 to-green-50 rounded-2xl sm:rounded-3xl p-4 sm:p-6 md:p-8 relative overflow-hidden">
{/* Logo Section */} {/* Logo Section */}
<div className="mb-8"> <div className="mb-4 sm:mb-6 md:mb-8">
<div className="flex items-center gap-2 mb-2"> <div className="flex items-center gap-2 mb-2">
<div className="relative"> <div className="relative">
{/* Planet Icon */} {/* Planet Icon */}
<svg className="w-16 h-16" viewBox="0 0 64 64" fill="none"> <svg className="w-12 h-12 sm:w-14 sm:h-14 md:w-16 md:h-16" viewBox="0 0 64 64" fill="none">
<circle cx="32" cy="32" r="20" fill="#A70710" opacity="0.9"/> <circle cx="32" cy="32" r="20" fill="#A70710" opacity="0.9"/>
<ellipse cx="32" cy="32" rx="35" ry="8" fill="none" stroke="#A70710" strokeWidth="3" transform="rotate(-20 32 32)"/> <ellipse cx="32" cy="32" rx="35" ry="8" fill="none" stroke="#A70710" strokeWidth="3" transform="rotate(-20 32 32)"/>
{/* Chat dots */} {/* Chat dots */}
@ -26,46 +26,46 @@ const AstroChatUI = () => {
</svg> </svg>
</div> </div>
<div> <div>
<h1 className="text-3xl font-bold"> <h1 className="text-xl sm:text-2xl md:text-3xl font-bold">
<span className="text-gray-900">Astro</span> <span className="text-gray-900">Astro</span>
<span className="text-[#A70710]">Horoscope</span> <span className="text-[#A70710]">Horoscope</span>
</h1> </h1>
</div> </div>
</div> </div>
<p className="text-sm text-gray-700 ml-1"> <p className="text-xs sm:text-sm md:text-[16px] text-gray-700 ml-1">
From <span className="text-[#A70710] font-semibold">Thirukalyanam Matrimony</span> Group From <span className="text-xs sm:text-sm md:text-[16px] text-[#A70710] font-semibold">Thirukalyanam Matrimony</span> Group
</p> </p>
</div> </div>
{/* Main Heading */} {/* Main Heading */}
<h2 className="text-[18px] font-bold text-gray-900 mb-4 leading-tight"> <h2 className="text-base sm:text-lg md:text-[18px] font-bold text-gray-900 mb-3 sm:mb-4 leading-tight">
Looking for astrology guidance in love, relationships, career, or health? Looking for astrology guidance in love, relationships, career, or health?
</h2> </h2>
{/* Subheading */} {/* Subheading */}
<p className="text-gray-700 mb-4"> <p className="text-sm sm:text-base md:text-[16px] text-gray-700 mb-3 sm:mb-4">
Connect instantly with expert astrologers on AstroFreeChat. Connect instantly with expert astrologers on AstroFreeChat.
</p> </p>
{/* Features List */} {/* Features List */}
<div className="space-y-2 mb-8"> <div className="space-y-1.5 sm:space-y-2 mb-6 sm:mb-8">
<div className="flex items-center gap-3"> <div className="flex items-center gap-2 sm:gap-3">
<span className="text-[#A70710] text-xl mt-1">✓</span> <span className="text-[#A70710] text-lg sm:text-xl mt-1 flex-shrink-0">✓</span>
<p className="text-gray-900 font-medium text-[14px]"> <p className="text-xs sm:text-sm md:text-[16px] text-gray-900 font-medium">
Instant Astrology Insights Instant Astrology Insights
</p> </p>
</div> </div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-2 sm:gap-3">
<span className="text-[#A70710] text-xl mt-1">✓</span> <span className="text-[#A70710] text-lg sm:text-xl mt-1 flex-shrink-0">✓</span>
<p className="text-gray-900 font-medium text-[14px]"> <p className="text-xs sm:text-sm md:text-[16px] text-gray-900 font-medium">
Chat Anytime, Anywhere Chat Anytime, Anywhere
</p> </p>
</div> </div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-2 sm:gap-3">
<span className="text-[#A70710] text-xl mt-1">✓</span> <span className="text-[#A70710] text-lg sm:text-xl mt-1 flex-shrink-0">✓</span>
<p className="text-gray-900 font-medium text-[14px]"> <p className="text-xs sm:text-sm md:text-[16px] text-gray-900 font-medium">
First 5 Minutes <span className="font-bold">FREE</span> First 5 Minutes <span className="font-bold">FREE</span>
</p> </p>
</div> </div>
@ -74,12 +74,12 @@ const AstroChatUI = () => {
{/* CTA Button */} {/* CTA Button */}
<button onClick={()=>{ <button onClick={()=>{
navigate("/horoscoper-generate") navigate("/horoscoper-generate")
}} className="relative z-[99] w-[fit-content] bg-[#034E08] hover:bg-[#A70710] text-white font-bold text-[16px] py-4 px-6 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105"> }} className="relative z-[99] w-[fit-content] bg-[#034E08] hover:bg-[#A70710] text-white font-bold text-xs sm:text-sm md:text-[16px] py-2.5 sm:py-3 md:py-4 px-4 sm:px-5 md:px-6 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105">
Upload Horoscope Upload Horoscope
</button> </button>
{/* Girl Image - Positioned at bottom right */} {/* Girl Image - Positioned at bottom right */}
<div className="absolute bottom-0 right-0 z-[1]"> <div className="absolute bottom-0 right-0 z-[1] w-32 h-32 sm:w-40 sm:h-40 md:w-auto md:h-auto">
<img <img
src={girlchat} src={girlchat}
alt="Woman using chat" alt="Woman using chat"

12
src/components/profiledashboard/DailyRecommendedCard.jsx
View File

@ -289,10 +289,10 @@ className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border-1 bor
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
className="text-center mb-12" className="text-center mb-12"
> >
<h1 className="text-[20px] text-[#034E08] sm:text-[22px] lg:text-[24px] font-bold mb-3"> <h1 className="text-[20px] text-[#00000] sm:text-[22px] lg:text-[24px] font-semibold mb-3">
Daily Recommended Daily Recommended
</h1> </h1>
<p className="text-gray-600 text-[12px]">Find your perfect match today</p> <p className="text-gray-900 text-[12px]">Find your perfect match today</p>
</motion.div> </motion.div>
{/* Swiper Container */} {/* Swiper Container */}
@ -307,10 +307,10 @@ className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border-1 bor
disableOnInteraction: false, disableOnInteraction: false,
pauseOnMouseEnter: true pauseOnMouseEnter: true
}} }}
pagination={{ // pagination={{
clickable: true, // clickable: true,
dynamicBullets: true // dynamicBullets: true
}} // }}
loop={true} loop={true}
speed={800} speed={800}
breakpoints={{ breakpoints={{

12
src/components/profiledashboard/MatchingList.jsx
View File

@ -256,10 +256,10 @@ className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border-2 bor
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
className="text-center mb-12" className="text-center mb-12"
> >
<h1 className="text-[20px] text-[#034E08] sm:text-[22px] lg:text-[24px] font-bold mb-3"> <h1 className="text-[20px] text-[#00000] sm:text-[22px] lg:text-[24px] font-semibold mb-3">
Your Matching List Your Matching List
</h1> </h1>
<p className="text-gray-600 text-[12px]">Find your perfect match today</p> <p className="text-gray-900 text-[12px]">Find your perfect match today</p>
</motion.div> </motion.div>
{/* Swiper Container */} {/* Swiper Container */}
@ -274,10 +274,10 @@ className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border-2 bor
disableOnInteraction: false, disableOnInteraction: false,
pauseOnMouseEnter: true pauseOnMouseEnter: true
}} }}
pagination={{ // pagination={{
clickable: true, // clickable: true,
dynamicBullets: true // dynamicBullets: true
}} // }}
loop={true} loop={true}
speed={800} speed={800}
breakpoints={{ breakpoints={{

4
src/components/profiledashboard/MatrimonyArticles.jsx
View File

@ -50,8 +50,8 @@ const MatrimonyArticles = () => {
return ( return (
<> <>
<div className="custom-article-swiper py-10 px-2 max-w-[1400px] mx-auto my-10"> <div className="custom-article-swiper py-10 px-2 max-w-[1400px] mx-auto my-10">
<h2 className="pb-10 text-[20px] text-[#034E08] <h2 className="pb-10 text-[20px] text-[#00000]
sm:text-[22px] lg:text-[24px] font-bold text-center"> sm:text-[22px] lg:text-[24px] font-semibold text-center">
Matrimony Articles Matrimony Articles
</h2> </h2>

28
src/components/profiledashboard/MembershipCard.jsx
View File

@ -13,49 +13,49 @@ return (
{/* Left Content Section */} {/* Left Content Section */}
<div className="flex flex-col p-2 lg:p-4 lg:w-3/5"> <div className="flex flex-col p-2 lg:p-4 lg:w-3/5">
{/* Heading */} {/* Heading */}
<h1 className="text-[12px]] font-bold text-gray-900 mb-4"> <h1 className="text-[16px] font-bold text-gray-900 mb-4">
Become a paid member Become a paid member
</h1> </h1>
{/* Subheading with offer */} {/* Subheading with offer */}
<p className="text-[12px] lg:text-[14px] text-gray-900 mb-4"> <p className="text-[16px] lg:text-[16px] text-gray-900 mb-4">
Get up to <span className="text-red-600 font-bold">58% OFF</span> on paid membership! Get up to <span className="text-red-600 font-bold">58% OFF</span> on paid membership!
</p> </p>
{/* Features List */} {/* Features List */}
<div className="space-y-2 mb-2"> <div className="space-y-2 mb-2">
<div className="flex items-start gap-4"> <div className="flex items-start gap-4">
<div className="w-4 h-4 flex-shrink-0 mt-0"> <div className="w-4 h-4 flex-shrink-0 mt-0 py-1">
<Phone className="w-4 h-4 text-gray-700" /> <Phone className="w-5 h-5 text-gray-700" />
</div> </div>
<p className="text-[12px] lg:text-[12px] text-gray-900 font-medium"> <p className="text-[16px] lg:text-[16px] text-gray-900 font-medium">
Call/WhatsApp matches Call/WhatsApp matches
</p> </p>
</div> </div>
<div className="flex items-start gap-4"> <div className="flex items-start gap-4">
<div className="w-4 h-4 flex-shrink-0 mt-0"> <div className="w-4 h-4 flex-shrink-0 mt-0 py-1">
<MessageCircle className="w-4 h-4 text-gray-700" /> <MessageCircle className="w-5 h-5 text-gray-700" />
</div> </div>
<p className="text-[12px] lg:text-[12px] text-gray-900 font-medium"> <p className="text-[16px] lg:text-[16px] text-gray-900 font-medium">
Unlimited messages Unlimited messages
</p> </p>
</div> </div>
<div className="flex items-start gap-4"> <div className="flex items-start gap-4">
<div className="w-4 h-4 flex-shrink-0 mt-0"> <div className="w-4 h-4 flex-shrink-0 mt-0 py-1">
<ThumbsUp className="w-4 h-4 text-gray-700" /> <ThumbsUp className="w-5 h-5 text-gray-700" />
</div> </div>
<p className="text-[12px] lg:text-[12px] text-gray-900 font-medium"> <p className="text-[16px] lg:text-[16px] text-gray-900 font-medium">
Higher chances of response Higher chances of response
</p> </p>
</div> </div>
<div className="flex items-start gap-4"> <div className="flex items-start gap-4">
<div className="w-4 h-4 flex-shrink-0 mt-0"> <div className="w-4 h-4 flex-shrink-0 mt-0 py-1">
<Eye className="w-4 h-4 text-gray-700" /> <Eye className="w-5 h-5 text-gray-700" />
</div> </div>
<p className="text-[12px] lg:text-[12px] text-gray-900 font-medium"> <p className="text-[16px] lg:text-[16px] text-gray-900 font-medium">
View and match horoscopes View and match horoscopes
</p> </p>
</div> </div>

4
src/components/profiledashboard/ProfileCompletion.jsx
View File

@ -174,7 +174,7 @@ const ProfileCompletion = () => {
</div> </div>
</div> </div>
{/* Additional Info Section */} {/* Additional Info Section */}
<motion.div {/* <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ delay: 1.5, duration: 0.6 }} transition={{ delay: 1.5, duration: 0.6 }}
@ -183,7 +183,7 @@ const ProfileCompletion = () => {
<p className="text-gray-600 text-sm sm:text-base"> <p className="text-gray-600 text-sm sm:text-base">
Complete your profile to increase visibility and get better matches Complete your profile to increase visibility and get better matches
</p> </p>
</motion.div> </motion.div> */}
</motion.div> </motion.div>
</div> </div>
</> </>

4
src/components/profiledashboard/VideoSwiperGallery.jsx
View File

@ -247,10 +247,10 @@ const VideoSwiperGallery = () => {
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
className="text-center mb-12" className="text-center mb-12"
> >
<h1 className="text-[20px] text-[#034E08] sm:text-[22px] lg:text-[24px] font-bold mb-3"> <h1 className="text-[20px] text-[#00000] sm:text-[22px] lg:text-[24px] font-semibold mb-3">
Video Gallery Video Gallery
</h1> </h1>
<p className="text-gray-600 text-[12px]"> <p className="text-gray-900 text-[12px]">
Discover profiles through their stories Discover profiles through their stories
</p> </p>
</motion.div> </motion.div>

51
src/components/ui/ProfileCardDemo.jsx
View File

@ -5,6 +5,8 @@ import Profile1 from "../../assets/images/bride1.jpg";
import Profile2 from "../../assets/images/bride2.jpg"; import Profile2 from "../../assets/images/bride2.jpg";
import Profile3 from "../../assets/images/bride3.jpg"; import Profile3 from "../../assets/images/bride3.jpg";
import Profile4 from "../../assets/images/bride4.jpg"; import Profile4 from "../../assets/images/bride4.jpg";
import { motion } from "framer-motion";
export default function ProfileCard() { export default function ProfileCard() {
// Sample data for multiple cards with image paths // Sample data for multiple cards with image paths
@ -68,13 +70,30 @@ export default function ProfileCard() {
]; ];
return ( return (
<div className="min-h-screen flex justify-center items-center py-8 px-4"> <div className="h-auto py-8 px-4">
{/* Grid Container - max-w-[1400px] with 4 columns */}
{/* HEADING */}
<motion.div
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
className="text-center mb-12"
>
<h1 className="text-[20px] text-[#000000] sm:text-[22px] lg:text-[24px] font-semibold mb-3">
Daily Recommended
</h1>
<p className="text-gray-900 text-[12px]">
Find your perfect match today
</p>
</motion.div>
{/* CARDS GRID */}
<div className="flex justify-center">
<div className="w-full max-w-[1400px] grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> <div className="w-full max-w-[1400px] grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
{profiles.map((profile) => ( {profiles.map((profile) => (
<div <div
key={profile.id} key={profile.id}
className="w-full rounded-[28px] overflow-hidden bg-white shadow-md " className="w-full rounded-[28px] overflow-hidden bg-white shadow-md"
> >
{/* IMAGE SECTION */} {/* IMAGE SECTION */}
<div className="relative"> <div className="relative">
@ -84,26 +103,21 @@ export default function ProfileCard() {
className="w-full h-[320px] object-cover" className="w-full h-[320px] object-cover"
/> />
{/* LEFT ICON (CROWN) */}
<div className="absolute top-4 left-4 w-9 h-9 rounded-full bg-[#8b0000] flex items-center justify-center"> <div className="absolute top-4 left-4 w-9 h-9 rounded-full bg-[#8b0000] flex items-center justify-center">
<Crown size={18} color="#fff" /> <Crown size={18} color="#fff" />
</div> </div>
{/* RIGHT ICON (SHORTLIST) */}
<div className="absolute top-4 right-4 px-3 py-1.5 rounded-[20px] bg-white flex items-center gap-1.5 text-[13px] font-medium shadow-lg"> <div className="absolute top-4 right-4 px-3 py-1.5 rounded-[20px] bg-white flex items-center gap-1.5 text-[13px] font-medium shadow-lg">
<Bookmark size={14} /> Shortlist <Bookmark size={14} /> Shortlist
</div> </div>
{/* FADE FOR GLASS */}
<div className="absolute bottom-0 left-0 right-0 h-0 bg-gradient-to-t from-white/90 to-transparent" />
</div> </div>
{/* GLASS CONTENT */} {/* CONTENT */}
<div className="px-4 py-4 -mt-[60px] bg-white/65 backdrop-blur-[25px] rounded-t-[15px] shadow-[0_-10px_30px_rgba(0,0,0,0.15)] relative z-[2]"> <div className="px-4 py-4 -mt-[60px] bg-white/65 backdrop-blur-[25px] rounded-t-[15px] shadow-[0_-10px_30px_rgba(0,0,0,0.15)] relative z-[2]">
<h2 className="text-center text-[22px] font-semibold mb-1"> <h2 className="text-center text-[22px] font-semibold mb-1">
{profile.name} {profile.name}
</h2> </h2>
{/* ID AND LAST SEEN - ROW */}
<div className="flex justify-between items-center mb-2 text-[11px] text-gray-600 px-8"> <div className="flex justify-between items-center mb-2 text-[11px] text-gray-600 px-8">
<p>ID: {profile.idNumber}</p> <p>ID: {profile.idNumber}</p>
<p className="flex items-center gap-0.5"> <p className="flex items-center gap-0.5">
@ -111,8 +125,7 @@ export default function ProfileCard() {
</p> </p>
</div> </div>
{/* INFO PILLS */} <div className="flex flex-wrap justify-center gap-2">
<div className="flex flex-wrap justify-center gap-2 ">
{[ {[
profile.age, profile.age,
profile.height, profile.height,
@ -124,28 +137,28 @@ export default function ProfileCard() {
].map((v, i) => ( ].map((v, i) => (
<span <span
key={i} key={i}
className="px-1.5 py-1.5 rounded-[20px] bg-white/70 border border-black/8 text-[13px] " className="px-1.5 py-1.5 rounded-[20px] bg-white/70 border border-black/8 text-[13px]"
> >
{v} {v}
</span> </span>
))} ))}
</div> </div>
{/* ACTION BUTTONS */} <div className="flex gap-4 mt-[15px] justify-center">
<div className="flex gap-4 mt-[15px] items-center justify-center"> <button className="px-2 py-1 rounded-[20px] border border-red-200 bg-red-50 flex items-center gap-1.5 font-semibold text-red-900">
<button className="px-2 py-1 rounded-[20px] border border-red-200 bg-red-50 flex items-center justify-center gap-1.5 cursor-pointer font-semibold text-red-900">
<X size={18} /> Decline <X size={18} /> Decline
</button> </button>
<button className=" px-2 py-1 rounded-[20px] border border-green-200 bg-green-50 text-green-900 flex items-center justify-center gap-1.5 font-semibold cursor-pointer"> <button className="px-2 py-1 rounded-[20px] border border-green-200 bg-green-50 text-green-900 flex items-center gap-1.5 font-semibold">
<Heart size={18} /> Interest <Heart size={18} /> Interest
</button> </button>
</div> </div>
</div> </div>
</div> </div>
))} ))}
</div> </div>
</div> </div>
); </div>
);
} }

157
src/pages/UserDashboardHome.jsx
View File

@ -19,6 +19,7 @@ import ProfileCard from '../components/common/ProfileCard';
import NewJoinedProfile from '../components/profiledashboard/NewJoinedProfile'; import NewJoinedProfile from '../components/profiledashboard/NewJoinedProfile';
import CustomerSupportCard from '../components/profiledashboard/CustomerSupportCard'; import CustomerSupportCard from '../components/profiledashboard/CustomerSupportCard';
import VideoSwiperGallery from '../components/profiledashboard/VideoSwiperGallery'; import VideoSwiperGallery from '../components/profiledashboard/VideoSwiperGallery';
import Profilecardemo from '../components/ui/ProfileCardDemo';
const images = [ const images = [
@ -39,7 +40,7 @@ const UserDashboardHome = () => {
return ( return (
<> <>
<div className="custom-swiper-hero flex items-center justify-center p-4"> <div className="custom-swiper-hero flex items-center justify-center p-4">
<div className="w-full max-w-7xl relative"> <div className="w-full max-w-15xl relative">
{/* Left Arrow */} {/* Left Arrow */}
<button className="swiper-button-prev-custom absolute left-0 top-1/2 -translate-y-1/2 z-10 w-12 h-12 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all"> <button className="swiper-button-prev-custom absolute left-0 top-1/2 -translate-y-1/2 z-10 w-12 h-12 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all">
<ChevronLeft className="w-6 h-6 text-white" /> <ChevronLeft className="w-6 h-6 text-white" />
@ -82,7 +83,7 @@ const UserDashboardHome = () => {
> >
{images.map((img, idx) => ( {images.map((img, idx) => (
<SwiperSlide key={idx}> <SwiperSlide key={idx}>
<div className="relative overflow-hidden rounded-3xl w-[100%] "> <div className="relative overflow-hidden rounded-3xl w-[100%]">
<img <img
src={img} src={img}
alt={`Slide ${idx + 1}`} alt={`Slide ${idx + 1}`}
@ -106,110 +107,76 @@ const UserDashboardHome = () => {
<style>{` <style>{`
.custom-swiper-hero .swiper {
width: 100%;
margin: 0 auto;
}
/* ================= MOBILE (≤768px) ================= */
@media (max-width: 768px) {
.custom-swiper-hero .swiper { .custom-swiper-hero .swiper {
width: 100%; overflow: hidden;
overflow: visible;
} }
.custom-swiper-hero .swiper-slide { .custom-swiper-hero .swiper-slide {
width: 320px; width: 100% !important;
height: 320px; height: 200px;
transition: all 0.4s ease;
opacity: 1;
transform: scale(0.85);
}
.custom-swiper-hero .swiper-slide-active {
width: 630px !important;
height: 320px !important;
opacity: 1;
transform: scale(1); transform: scale(1);
z-index: 2; opacity: 1;
}
@media only screen and (max-width: 768px) {
.custom-swiper-hero .swiper-slide {
width: 300px;
height: 150px;
}
.custom-swiper-hero .swiper-slide-active {
width: 300px !important;
height: 150px !important;
}
}
.custom-swiper-hero .swiper-slide > div {
width: 100%;
height: 100%;
}
.custom-swiper-hero .swiper-button-prev-custom,
.custom-swiper-hero .swiper-button-next-custom {
cursor: pointer;
}
@media (max-width: 1024px) {
.custom-swiper-hero .swiper-slide {
width: 240px;
height: 340px;
}
.custom-swiper-hero .swiper-slide-active {
width: 380px !important;
height: 480px !important;
}
}
@media (max-width: 768px) {
.custom-swiper-hero .swiper-slide {
width: 180px;
height: 280px;
}
.custom-swiper-hero .swiper-slide-active {
width: 300px !important;
height: 280px !important;
}
.custom-swiper-hero .swiper-button-prev-custom,
.custom-swiper-hero .swiper-button-next-custom {
width: 40px;
height: 40px;
}
}
@media (max-width: 480px) {
.custom-swiper-hero .swiper-slide {
width: 140px;
height: 220px;
}
.custom-swiper-hero .swiper-slide-active {
width: 300px !important;
height: 220px !important;
}
.custom-swiper-hero .swiper-button-prev-custom,
.custom-swiper-hero .swiper-button-next-custom {
width: 36px;
height: 36px;
}
}
/* Mobile Styles (for screens <= 768px) */
@media only screen and (max-width: 768px) {
.custom-swiper-hero .swiper-slide {
width: 100%;
height: 200px; /* Adjust the height for mobile */
} }
.custom-swiper-hero .swiper-slide-active { .custom-swiper-hero .swiper-slide-active {
width: 100% !important; width: 100% !important;
height: 200px !important; height: 200px !important;
transform: scale(1);
opacity: 1;
} }
}
/* ================= TABLET & DESKTOP (≥769px) ================= */
@media (min-width: 769px) {
.custom-swiper-hero .swiper {
overflow: visible;
} }
.custom-swiper-hero .swiper-wrapper {
align-items: center;
}
.custom-swiper-hero .swiper-slide {
width: 320px;
height: 320px;
transform: scale(1); /* ❌ removed zoom out */
opacity: 1; /* ❌ removed fade */
transition: all 0.4s ease;
}
.custom-swiper-hero .swiper-slide-active {
width: 630px !important; /* center slide bigger */
height: 320px !important;
transform: scale(1);
opacity: 1;
z-index: 2;
}
}
/* ================= COMMON ================= */
.custom-swiper-hero .swiper-slide > div {
width: 100%;
height: 100%;
}
.custom-swiper-hero .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Desktop Styles */ /* Desktop Styles */
// @media (min-width: 1024px) { // @media (min-width: 1024px) {
// .custom-swiper-hero .swiper-slide { // .custom-swiper-hero .swiper-slide {
@ -225,11 +192,11 @@ const UserDashboardHome = () => {
`}</style> `}</style>
</div> </div>
<Profilecardemo/>
{/* <DailyRecommendedCard/> */}
<DailyRecommendedCard/>
<ProfileCompletion/> <ProfileCompletion/>
{/* <DailyRecommendedCard/> */} {/* <DailyRecommendedCard/> */}