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>
</li> */}
</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>
{/* Company Section */}
<div>
<h3 className="text-[#A70710] font-bold text-lg mb-4">Company</h3>
<ul className="space-y-2">
{/* <div> */}
{/* <h3 className="text-[#A70710] font-bold text-lg mb-4">Company</h3> */}
{/* <ul className="space-y-2"> */}
{/* <li>
<a
href="#"
@ -107,16 +115,16 @@ export default function Footer() {
Awards & Recognition
</a>
</li> */}
<li>
{/* <li>
<Link
to="/contact"
className="text-gray-600 hover:text-green-600 transition-colors"
>
Contact Us
</Link>
</li>
</ul>
</div>
</li> */}
{/* </ul>
</div> */}
{/* Privacy & You Section */}
<div>
@ -182,8 +190,8 @@ export default function Footer() {
</ul>
</div>
{/* Social Media & Apps Section */}
<div>
{/* Social Media Section */}
<div className="mb-4">
<h3 className="text-[#A70710] font-bold text-lg mb-4">
Find us on:
</h3>
@ -219,6 +227,45 @@ export default function Footer() {
<Youtube className="w-5 h-5 text-gray-700" />
</a>
</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">
Get the Thirukalyanam App

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

@ -5,15 +5,15 @@ const AstroChatUI = () => {
return (
<>
<div className="flex items-center justify-center py-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="flex items-center justify-center py-4 px-4">
<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 */}
<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="relative">
{/* 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"/>
<ellipse cx="32" cy="32" rx="35" ry="8" fill="none" stroke="#A70710" strokeWidth="3" transform="rotate(-20 32 32)"/>
{/* Chat dots */}
@ -26,46 +26,46 @@ const AstroChatUI = () => {
</svg>
</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-[#A70710]">Horoscope</span>
</h1>
</div>
</div>
<p className="text-sm text-gray-700 ml-1">
From <span className="text-[#A70710] font-semibold">Thirukalyanam Matrimony</span> Group
<p className="text-xs sm:text-sm md:text-[16px] text-gray-700 ml-1">
From <span className="text-xs sm:text-sm md:text-[16px] text-[#A70710] font-semibold">Thirukalyanam Matrimony</span> Group
</p>
</div>
{/* 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?
</h2>
{/* 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.
</p>
{/* Features List */}
<div className="space-y-2 mb-8">
<div className="flex items-center gap-3">
<span className="text-[#A70710] text-xl mt-1">✓</span>
<p className="text-gray-900 font-medium text-[14px]">
<div className="space-y-1.5 sm:space-y-2 mb-6 sm:mb-8">
<div className="flex items-center gap-2 sm:gap-3">
<span className="text-[#A70710] text-lg sm:text-xl mt-1 flex-shrink-0">✓</span>
<p className="text-xs sm:text-sm md:text-[16px] text-gray-900 font-medium">
Instant Astrology Insights
</p>
</div>
<div className="flex items-center gap-3">
<span className="text-[#A70710] text-xl mt-1">✓</span>
<p className="text-gray-900 font-medium text-[14px]">
<div className="flex items-center gap-2 sm:gap-3">
<span className="text-[#A70710] text-lg sm:text-xl mt-1 flex-shrink-0">✓</span>
<p className="text-xs sm:text-sm md:text-[16px] text-gray-900 font-medium">
Chat Anytime, Anywhere
</p>
</div>
<div className="flex items-center gap-3">
<span className="text-[#A70710] text-xl mt-1">✓</span>
<p className="text-gray-900 font-medium text-[14px]">
<div className="flex items-center gap-2 sm:gap-3">
<span className="text-[#A70710] text-lg sm:text-xl mt-1 flex-shrink-0">✓</span>
<p className="text-xs sm:text-sm md:text-[16px] text-gray-900 font-medium">
First 5 Minutes <span className="font-bold">FREE</span>
</p>
</div>
@ -74,12 +74,12 @@ const AstroChatUI = () => {
{/* CTA Button */}
<button onClick={()=>{
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
</button>
{/* 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
src={girlchat}
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 }}
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
</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>
{/* Swiper Container */}
@ -307,10 +307,10 @@ className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border-1 bor
disableOnInteraction: false,
pauseOnMouseEnter: true
}}
pagination={{
clickable: true,
dynamicBullets: true
}}
// pagination={{
// clickable: true,
// dynamicBullets: true
// }}
loop={true}
speed={800}
breakpoints={{

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

@ -18,7 +18,7 @@ import 'swiper/css/pagination';
import 'swiper/css/effect-coverflow';
import { useNavigate } from 'react-router-dom';
const MatchingList = () => {
const MatchingList = () => {
const swiperRef = useRef(null);
const navigate = useNavigate();
@ -143,7 +143,7 @@ className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border-2 bor
className="absolute top-4 right-4 z-10 bg-white rounded-full px-4 py-2 shadow-lg flex items-center space-x-2 hover:bg-gray-50 transition-colors"
onClick={(e) => {
e.stopPropagation();
e.stopPropagation();
// shortlist logic
}}
>
@ -256,10 +256,10 @@ className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border-2 bor
animate={{ opacity: 1, y: 0 }}
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
</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>
{/* Swiper Container */}
@ -274,10 +274,10 @@ className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border-2 bor
disableOnInteraction: false,
pauseOnMouseEnter: true
}}
pagination={{
clickable: true,
dynamicBullets: true
}}
// pagination={{
// clickable: true,
// dynamicBullets: true
// }}
loop={true}
speed={800}
breakpoints={{

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

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

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

@ -13,49 +13,49 @@ return (
{/* Left Content Section */}
<div className="flex flex-col p-2 lg:p-4 lg:w-3/5">
{/* 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
</h1>
{/* 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!
</p>
{/* Features List */}
<div className="space-y-2 mb-2">
<div className="flex items-start gap-4">
<div className="w-4 h-4 flex-shrink-0 mt-0">
<Phone className="w-4 h-4 text-gray-700" />
<div className="w-4 h-4 flex-shrink-0 mt-0 py-1">
<Phone className="w-5 h-5 text-gray-700" />
</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
</p>
</div>
<div className="flex items-start gap-4">
<div className="w-4 h-4 flex-shrink-0 mt-0">
<MessageCircle className="w-4 h-4 text-gray-700" />
<div className="w-4 h-4 flex-shrink-0 mt-0 py-1">
<MessageCircle className="w-5 h-5 text-gray-700" />
</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
</p>
</div>
<div className="flex items-start gap-4">
<div className="w-4 h-4 flex-shrink-0 mt-0">
<ThumbsUp className="w-4 h-4 text-gray-700" />
<div className="w-4 h-4 flex-shrink-0 mt-0 py-1">
<ThumbsUp className="w-5 h-5 text-gray-700" />
</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
</p>
</div>
<div className="flex items-start gap-4">
<div className="w-4 h-4 flex-shrink-0 mt-0">
<Eye className="w-4 h-4 text-gray-700" />
<div className="w-4 h-4 flex-shrink-0 mt-0 py-1">
<Eye className="w-5 h-5 text-gray-700" />
</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
</p>
</div>

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

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

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

@ -247,10 +247,10 @@ const VideoSwiperGallery = () => {
animate={{ opacity: 1, y: 0 }}
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
</h1>
<p className="text-gray-600 text-[12px]">
<p className="text-gray-900 text-[12px]">
Discover profiles through their stories
</p>
</motion.div>

55
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 Profile3 from "../../assets/images/bride3.jpg";
import Profile4 from "../../assets/images/bride4.jpg";
import { motion } from "framer-motion";
export default function ProfileCard() {
// Sample data for multiple cards with image paths
@ -67,14 +69,31 @@ export default function ProfileCard() {
},
];
return (
<div className="min-h-screen flex justify-center items-center py-8 px-4">
{/* Grid Container - max-w-[1400px] with 4 columns */}
return (
<div className="h-auto py-8 px-4">
{/* 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">
{profiles.map((profile) => (
<div
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 */}
<div className="relative">
@ -84,35 +103,29 @@ export default function ProfileCard() {
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">
<Crown size={18} color="#fff" />
</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">
<Bookmark size={14} /> Shortlist
</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>
{/* 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]">
<h2 className="text-center text-[22px] font-semibold mb-1">
{profile.name}
</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 className="flex items-center gap-0.5">
<Eye size={12} /> {profile.lastSeen}
</p>
</div>
{/* INFO PILLS */}
<div className="flex flex-wrap justify-center gap-2 ">
<div className="flex flex-wrap justify-center gap-2">
{[
profile.age,
profile.height,
@ -124,28 +137,28 @@ export default function ProfileCard() {
].map((v, i) => (
<span
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}
</span>
))}
</div>
{/* ACTION BUTTONS */}
<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 justify-center gap-1.5 cursor-pointer font-semibold text-red-900">
<div className="flex gap-4 mt-[15px] 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">
<X size={18} /> Decline
</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
</button>
</div>
</div>
</div>
))}
</div>
</div>
);
</div>
);
}

155
src/pages/UserDashboardHome.jsx
View File

@ -19,6 +19,7 @@ import ProfileCard from '../components/common/ProfileCard';
import NewJoinedProfile from '../components/profiledashboard/NewJoinedProfile';
import CustomerSupportCard from '../components/profiledashboard/CustomerSupportCard';
import VideoSwiperGallery from '../components/profiledashboard/VideoSwiperGallery';
import Profilecardemo from '../components/ui/ProfileCardDemo';
const images = [
@ -39,7 +40,7 @@ const UserDashboardHome = () => {
return (
<>
<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 */}
<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" />
@ -82,7 +83,7 @@ const UserDashboardHome = () => {
>
{images.map((img, idx) => (
<SwiperSlide key={idx}>
<div className="relative overflow-hidden rounded-3xl w-[100%] ">
<div className="relative overflow-hidden rounded-3xl w-[100%]">
<img
src={img}
alt={`Slide ${idx + 1}`}
@ -106,109 +107,75 @@ const UserDashboardHome = () => {
<style>{`
.custom-swiper-hero .swiper {
width: 100%;
overflow: visible;
}
.custom-swiper-hero .swiper {
width: 100%;
margin: 0 auto;
}
.custom-swiper-hero .swiper-slide {
width: 320px;
height: 320px;
transition: all 0.4s ease;
opacity: 1;
transform: scale(0.85);
}
/* ================= MOBILE (≤768px) ================= */
@media (max-width: 768px) {
.custom-swiper-hero .swiper {
overflow: hidden;
}
.custom-swiper-hero .swiper-slide-active {
width: 630px !important;
height: 320px !important;
opacity: 1;
transform: scale(1);
z-index: 2;
}
.custom-swiper-hero .swiper-slide {
width: 100% !important;
height: 200px;
transform: scale(1);
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: 100% !important;
height: 200px !important;
transform: scale(1);
opacity: 1;
}
}
.custom-swiper-hero .swiper-slide-active {
width: 300px !important;
height: 150px !important;
}
}
/* ================= TABLET & DESKTOP (≥769px) ================= */
@media (min-width: 769px) {
.custom-swiper-hero .swiper {
overflow: visible;
}
.custom-swiper-hero .swiper-slide > div {
width: 100%;
height: 100%;
}
.custom-swiper-hero .swiper-wrapper {
align-items: center;
}
.custom-swiper-hero .swiper-button-prev-custom,
.custom-swiper-hero .swiper-button-next-custom {
cursor: pointer;
}
.custom-swiper-hero .swiper-slide {
width: 320px;
height: 320px;
transform: scale(1); /* ❌ removed zoom out */
opacity: 1; /* ❌ removed fade */
transition: all 0.4s ease;
}
@media (max-width: 1024px) {
.custom-swiper-hero .swiper-slide {
width: 240px;
height: 340px;
}
.custom-swiper-hero .swiper-slide-active {
width: 630px !important; /* center slide bigger */
height: 320px !important;
transform: scale(1);
opacity: 1;
z-index: 2;
}
}
.custom-swiper-hero .swiper-slide-active {
width: 380px !important;
height: 480px !important;
}
}
/* ================= COMMON ================= */
.custom-swiper-hero .swiper-slide > div {
width: 100%;
height: 100%;
}
@media (max-width: 768px) {
.custom-swiper-hero .swiper-slide {
width: 180px;
height: 280px;
}
.custom-swiper-hero .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.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 {
width: 100% !important;
height: 200px !important;
}
}
/* Desktop Styles */
// @media (min-width: 1024px) {
@ -225,11 +192,11 @@ const UserDashboardHome = () => {
`}</style>
</div>
<Profilecardemo/>
<DailyRecommendedCard/>
{/* <DailyRecommendedCard/> */}
<ProfileCompletion/>
{/* <DailyRecommendedCard/> */}