new code
This commit is contained in:
Nithish-stoic
parent
26b39fe52a
commit
32b1347223
26
src/assets/images/astrology-horoscope-svgrepo-com.svg
Normal file
26
src/assets/images/astrology-horoscope-svgrepo-com.svg
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||||
|
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||||
|
<svg fill="#000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
viewBox="0 0 512 512" xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path d="M256,0C114.616,0,0,114.614,0,256s114.616,256,256,256c141.386,0,256-114.614,256-256S397.386,0,256,0z M428.717,135.014
|
||||||
|
c17.777,25.264,29.667,53.969,34.961,84.403l-76.655-17.69L428.717,135.014z M376.984,83.281l-66.712,41.695l-17.69-76.654
|
||||||
|
C323.016,53.617,351.72,65.504,376.984,83.281z M219.418,48.322l-17.69,76.654l-66.712-41.693
|
||||||
|
C160.28,65.506,188.984,53.617,219.418,48.322z M83.281,135.016l41.695,66.712l-76.654,17.69
|
||||||
|
C53.617,188.984,65.506,160.28,83.281,135.016z M83.281,376.983c-17.775-25.263-29.666-53.968-34.959-84.402l76.654,17.69
|
||||||
|
L83.281,376.983z M135.014,428.716l66.714-41.695l17.69,76.657C188.982,458.383,160.279,446.494,135.014,428.716z M256,421.29
|
||||||
|
l-24.496-106.151l-92.381,57.737l57.737-92.38L90.71,256l106.151-24.496l-57.74-92.381l92.383,57.737L256,90.71l24.496,106.15
|
||||||
|
l92.38-57.739l-57.739,92.383L421.289,256l-106.15,24.496l57.739,92.381l-92.381-57.737L256,421.29z M292.582,463.679
|
||||||
|
l17.69-76.655l66.712,41.695C351.72,446.496,323.016,458.385,292.582,463.679z M428.717,376.984l-41.695-66.712l76.655-17.69
|
||||||
|
C458.383,323.016,446.494,351.72,428.717,376.984z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path d="M264.016,256c0-17.331,12.604-31.714,29.145-34.489c-7.873-6.664-18.046-10.687-29.145-10.687
|
||||||
|
c-24.91,0-45.176,20.265-45.176,45.176c0,24.91,20.266,45.176,45.176,45.176c11.098,0,21.272-4.024,29.145-10.689
|
||||||
|
C276.62,287.712,264.016,273.328,264.016,256z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.7 KiB |
4
src/assets/images/scorpio-svgrepo-com.svg
Normal file
4
src/assets/images/scorpio-svgrepo-com.svg
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||||
|
<svg width="800px" height="800px" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M0 3C0.552285 3 1 3.44772 1 4V14H3V4C3 3.44772 3.44772 3 4 3C4.55228 3 5 3.44772 5 4V14H7V4C7 3.44772 7.44772 3 8 3C8.55228 3 9 3.44772 9 4V11.1716C9 13.8443 12.2314 15.1828 14.1213 13.2929L14.4571 12.9571L15 13.5H16V10H12.5V11L13.0429 11.5429L12.7071 11.8787C12.0771 12.5086 11 12.0625 11 11.1716V4C11 2.34315 9.65685 1 8 1C7.23165 1 6.53076 1.28885 6 1.76389C5.46924 1.28885 4.76835 1 4 1C3.23165 1 2.53076 1.28885 2 1.76389C1.46924 1.28885 0.768354 1 0 1V3Z" fill="#000000"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 715 B |
@ -5,7 +5,7 @@ export default function Footer() {
|
|||||||
return (
|
return (
|
||||||
<footer className="bg-gradient-to-b from-green-50 to-white">
|
<footer className="bg-gradient-to-b from-green-50 to-white">
|
||||||
<div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
<div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 mb-8">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-4">
|
||||||
{/* Need Help Section */}
|
{/* Need Help Section */}
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-[#A70710] font-bold text-lg mb-4">
|
<h3 className="text-[#A70710] font-bold text-lg mb-4">
|
||||||
@ -13,8 +13,8 @@ export default function Footer() {
|
|||||||
</h3>
|
</h3>
|
||||||
<ul className="space-y-2">
|
<ul className="space-y-2">
|
||||||
<li>
|
<li>
|
||||||
<Link to="/login"
|
<Link
|
||||||
|
to="/login"
|
||||||
className="text-gray-600 hover:text-green-600 transition-colors"
|
className="text-gray-600 hover:text-green-600 transition-colors"
|
||||||
>
|
>
|
||||||
Member Login
|
Member Login
|
||||||
@ -70,20 +70,20 @@ export default function Footer() {
|
|||||||
</li> */}
|
</li> */}
|
||||||
</ul>
|
</ul>
|
||||||
<ul className="space-y-2 py-2">
|
<ul className="space-y-2 py-2">
|
||||||
<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>
|
||||||
</ul>
|
</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="#"
|
||||||
className="text-gray-600 hover:text-green-600 transition-colors"
|
className="text-gray-600 hover:text-green-600 transition-colors"
|
||||||
@ -91,7 +91,7 @@ export default function Footer() {
|
|||||||
About Us
|
About Us
|
||||||
</a>
|
</a>
|
||||||
</li> */}
|
</li> */}
|
||||||
{/* <li>
|
{/* <li>
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
className="text-gray-600 hover:text-green-600 transition-colors"
|
className="text-gray-600 hover:text-green-600 transition-colors"
|
||||||
@ -99,7 +99,7 @@ export default function Footer() {
|
|||||||
Thirukalyanam Blog
|
Thirukalyanam Blog
|
||||||
</a>
|
</a>
|
||||||
</li> */}
|
</li> */}
|
||||||
{/* <li>
|
{/* <li>
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
className="text-gray-600 hover:text-green-600 transition-colors"
|
className="text-gray-600 hover:text-green-600 transition-colors"
|
||||||
@ -107,7 +107,7 @@ export default function Footer() {
|
|||||||
Careers
|
Careers
|
||||||
</a>
|
</a>
|
||||||
</li> */}
|
</li> */}
|
||||||
{/* <li>
|
{/* <li>
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
className="text-gray-600 hover:text-green-600 transition-colors"
|
className="text-gray-600 hover:text-green-600 transition-colors"
|
||||||
@ -115,7 +115,7 @@ 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"
|
||||||
@ -123,7 +123,7 @@ export default function Footer() {
|
|||||||
Contact Us
|
Contact Us
|
||||||
</Link>
|
</Link>
|
||||||
</li> */}
|
</li> */}
|
||||||
{/* </ul>
|
{/* </ul>
|
||||||
</div> */}
|
</div> */}
|
||||||
|
|
||||||
{/* Privacy & You Section */}
|
{/* Privacy & You Section */}
|
||||||
@ -190,7 +190,7 @@ export default function Footer() {
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Social Media Section */}
|
{/* Social Media Section */}
|
||||||
<div className="mb-4">
|
<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:
|
||||||
@ -227,50 +227,10 @@ 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
|
||||||
</h3>
|
</h3>
|
||||||
<div className="space-y-3">
|
<div className="flex gap-3">
|
||||||
<a href="#" className="block">
|
<a href="#" className="block">
|
||||||
<img
|
<img
|
||||||
src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Download_on_the_App_Store_Badge.svg"
|
src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Download_on_the_App_Store_Badge.svg"
|
||||||
@ -286,21 +246,18 @@ export default function Footer() {
|
|||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-xs text-gray-500 mt-3">
|
|
||||||
Apple and the Apple Logo are trademarks of Apple Inc.
|
|
||||||
</p>
|
|
||||||
<p className="text-xs text-gray-500 mt-1">
|
|
||||||
Google Play and the Google Play logo are trademarks of Google LLC.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Social Media & Apps Section */}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Bottom Copyright Section */}
|
{/* Bottom Copyright Section */}
|
||||||
<div className="border-t border-gray-200 pt-6">
|
<div className="border-t border-gray-200 pt-6">
|
||||||
<div className="flex flex-col md:flex-row justify-between items-center">
|
<div className="flex flex-col md:flex-row justify-between items-center">
|
||||||
<p className="text-sm text-gray-600 mb-4 md:mb-0">
|
<p className="text-sm text-gray-600 mb-4 md:mb-0">
|
||||||
© {new Date().getFullYear()} Thirukalyanam, The World's
|
© {new Date().getFullYear()} Thirukalyanam, The World's Leading
|
||||||
Leading Matchmaking Service™
|
Matchmaking Service™
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p className="text-sm text-gray-600">
|
<p className="text-sm text-gray-600">
|
||||||
|
|||||||
@ -2,6 +2,7 @@ import ThreeDScrollTriggerRow, {
|
|||||||
ThreeDScrollTriggerContainer,
|
ThreeDScrollTriggerContainer,
|
||||||
} from "../lightswind/ThreeDScrollTrigger";
|
} from "../lightswind/ThreeDScrollTrigger";
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
|
|
||||||
const reviews = [
|
const reviews = [
|
||||||
{
|
{
|
||||||
name: "Aria Thompson",
|
name: "Aria Thompson",
|
||||||
@ -28,51 +29,41 @@ const reviews = [
|
|||||||
"From landing pages to complex dashboards, Lightswind UI makes building visually consistent UIs effortless and fun.",
|
"From landing pages to complex dashboards, Lightswind UI makes building visually consistent UIs effortless and fun.",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Liam Patel",
|
name: "Sarah Mitchell",
|
||||||
company: "NextGen Interfaces",
|
company: "DesignFlow Co",
|
||||||
image:
|
image:
|
||||||
"https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=facearea&w=96&h=96&facepad=2",
|
"https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=facearea&w=96&h=96&facepad=2",
|
||||||
review:
|
review:
|
||||||
"From landing pages to complex dashboards, Lightswind UI makes building visually consistent UIs effortless and fun.",
|
"The component library is extensive and well-documented. Saved us months of development time.",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Liam Patel",
|
name: "James Chen",
|
||||||
company: "NextGen Interfaces",
|
company: "TechVision Labs",
|
||||||
image:
|
image:
|
||||||
"https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=facearea&w=96&h=96&facepad=2",
|
"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=facearea&w=96&h=96&facepad=2",
|
||||||
review:
|
review:
|
||||||
"From landing pages to complex dashboards, Lightswind UI makes building visually consistent UIs effortless and fun.",
|
"Outstanding support and continuous updates. Lightswind UI keeps getting better every release.",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Liam Patel",
|
name: "Emma Davis",
|
||||||
company: "NextGen Interfaces",
|
company: "PixelPerfect Studios",
|
||||||
image:
|
image:
|
||||||
"https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=facearea&w=96&h=96&facepad=2",
|
"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=facearea&w=96&h=96&facepad=2",
|
||||||
review:
|
review:
|
||||||
"From landing pages to complex dashboards, Lightswind UI makes building visually consistent UIs effortless and fun.",
|
"Responsive by default and looks amazing on all devices. This is exactly what we needed.",
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Liam Patel",
|
|
||||||
company: "NextGen Interfaces",
|
|
||||||
image:
|
|
||||||
"https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=facearea&w=96&h=96&facepad=2",
|
|
||||||
review:
|
|
||||||
"From landing pages to complex dashboards, Lightswind UI makes building visually consistent UIs effortless and fun.",
|
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export default function ThreeScrollTrigger() {
|
export default function ThreeScrollTrigger() {
|
||||||
// Split reviews across 3 rows for masonry feel
|
// Split reviews into 2 rows with 3 cards each
|
||||||
// Split reviews across 3 rows
|
const row1 = reviews.slice(0, 3);
|
||||||
const row1 = [reviews[0], reviews[1]];
|
const row2 = reviews.slice(3, 6);
|
||||||
const row2 = [reviews[2], reviews[3]];
|
|
||||||
const row3 = [reviews[4], reviews[5], reviews[6]];
|
|
||||||
const [paused, setPaused] = useState(false);
|
const [paused, setPaused] = useState(false);
|
||||||
return (
|
|
||||||
<div className="w-full mx-auto max-w-[1300px] overflow-hidden">
|
|
||||||
<ThreeDScrollTriggerContainer className="py-8 space-y-8">
|
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full mx-auto max-w-[1400px] overflow-hidden">
|
||||||
|
<ThreeDScrollTriggerContainer className="py-8 space-y-8">
|
||||||
|
{/* Row 1 - 3 Cards scrolling right */}
|
||||||
<ThreeDScrollTriggerRow baseVelocity={2} direction={1} paused={paused}>
|
<ThreeDScrollTriggerRow baseVelocity={2} direction={1} paused={paused}>
|
||||||
<div className="flex flex-row gap-6 px-3 py-1">
|
<div className="flex flex-row gap-6 px-3 py-1">
|
||||||
{row1.map((rev, idx) => (
|
{row1.map((rev, idx) => (
|
||||||
@ -86,48 +77,54 @@ export default function ThreeScrollTrigger() {
|
|||||||
</div>
|
</div>
|
||||||
</ThreeDScrollTriggerRow>
|
</ThreeDScrollTriggerRow>
|
||||||
|
|
||||||
<ThreeDScrollTriggerRow baseVelocity={2} direction={-1}>
|
{/* Row 2 - 3 Cards scrolling left */}
|
||||||
|
<ThreeDScrollTriggerRow baseVelocity={2} direction={-1} paused={paused}>
|
||||||
<div className="flex flex-row gap-6 px-3 py-1">
|
<div className="flex flex-row gap-6 px-3 py-1">
|
||||||
{row2.map((rev, idx) => (
|
{row2.map((rev, idx) => (
|
||||||
<ReviewCard key={idx} {...rev} onMouseEnter={() => setPaused(true)}
|
<ReviewCard
|
||||||
onMouseLeave={() => setPaused(false)} />
|
key={idx}
|
||||||
|
{...rev}
|
||||||
|
onMouseEnter={() => setPaused(true)}
|
||||||
|
onMouseLeave={() => setPaused(false)}
|
||||||
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</ThreeDScrollTriggerRow>
|
</ThreeDScrollTriggerRow>
|
||||||
|
|
||||||
{/* <ThreeDScrollTriggerRow baseVelocity={2} direction={1}>
|
|
||||||
<div className="flex flex-row gap-6 px-3 py-1">
|
|
||||||
{row3.map((rev, idx) => (
|
|
||||||
<ReviewCard key={idx} {...rev} onMouseEnter={() => setPaused(true)}
|
|
||||||
onMouseLeave={() => setPaused(false)} />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</ThreeDScrollTriggerRow> */}
|
|
||||||
</ThreeDScrollTriggerContainer>
|
</ThreeDScrollTriggerContainer>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Card component for clarity and reuse
|
// Card component for clarity and reuse
|
||||||
function ReviewCard({ name, company, image, review ,onMouseEnter, onMouseLeave}) {
|
function ReviewCard({
|
||||||
|
name,
|
||||||
|
company,
|
||||||
|
image,
|
||||||
|
review,
|
||||||
|
onMouseEnter,
|
||||||
|
onMouseLeave,
|
||||||
|
}) {
|
||||||
return (
|
return (
|
||||||
<div className="bg-[#fbfbfb] rounded-xl shadow-md p-5 w-72 " onMouseEnter={onMouseEnter}
|
<div
|
||||||
onMouseLeave={onMouseLeave}>
|
className="bg-[#fbfbfb] rounded-xl shadow-md p-6 w-80 min-w-80 flex-shrink-0 hover:shadow-lg transition-shadow"
|
||||||
<div className="flex items-center mb-2">
|
onMouseEnter={onMouseEnter}
|
||||||
|
onMouseLeave={onMouseLeave}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3 mb-4">
|
||||||
<img
|
<img
|
||||||
src={image}
|
src={image}
|
||||||
alt={name}
|
alt={name}
|
||||||
className="w-10 h-10 rounded-full mr-3 object-cover"
|
className="w-12 h-12 rounded-full object-cover flex-shrink-0"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
/>
|
/>
|
||||||
<div>
|
<div className="flex-1 min-w-0">
|
||||||
<div className="font-semibold text-gray-900">{name}</div>
|
<div className="font-semibold text-gray-900 truncate">{name}</div>
|
||||||
<div className="text-xs text-gray-400">{company}</div>
|
<div className="text-xs text-gray-500 truncate">{company}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="text-sm text-gray-700 break-words text-wrap">
|
<div className="text-sm text-gray-700 line-clamp-4">
|
||||||
{review}
|
"{review}"
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -4,8 +4,8 @@ import LazyImage from '../common/LazyImage';
|
|||||||
const AppQRCode = () => {
|
const AppQRCode = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="relative z-9 bg-[#034f08] text-white rounded-[10px]">
|
<div className="relative z-9 bg-[#034f08] text-white ">
|
||||||
<div className="container mx-auto px-4 py-8 lg:py-16">
|
<div className="container mx-auto max-w-[1400px] px-2 md:px-0 py-8 lg:py-16">
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16 items-center">
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16 items-center">
|
||||||
{/* Left Content Section */}
|
{/* Left Content Section */}
|
||||||
<div className="space-y-6 lg:space-y-8">
|
<div className="space-y-6 lg:space-y-8">
|
||||||
@ -171,7 +171,7 @@ const AppQRCode = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div> */}
|
</div> */}
|
||||||
|
|
||||||
<div className=''>
|
<div className='flex justify-center lg:justify-end'>
|
||||||
|
|
||||||
<LazyImage
|
<LazyImage
|
||||||
src={apppromo}
|
src={apppromo}
|
||||||
|
|||||||
@ -5,12 +5,13 @@ const AstroChatUI = () => {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|
||||||
<div className="flex items-center justify-center py-4 px-4">
|
<div className="flex items-center justify-center py-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">
|
<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-4 sm:mb-6 md: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-12 h-12 sm:w-14 sm:h-14 md:w-16 md: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">
|
||||||
|
|||||||
@ -1,8 +1,23 @@
|
|||||||
import { useRef, useState } from 'react';
|
import { useRef, useState } from "react";
|
||||||
import { motion } from 'framer-motion';
|
import { motion } from "framer-motion";
|
||||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
import { Swiper, SwiperSlide } from "swiper/react";
|
||||||
import { Navigation, Pagination, Autoplay, EffectCoverflow } from 'swiper/modules';
|
import {
|
||||||
import { Crown, Bookmark, User, Briefcase, MapPin, X, Send, ChevronLeft, ChevronRight } from 'lucide-react';
|
Navigation,
|
||||||
|
Pagination,
|
||||||
|
Autoplay,
|
||||||
|
EffectCoverflow,
|
||||||
|
} from "swiper/modules";
|
||||||
|
import {
|
||||||
|
Crown,
|
||||||
|
Bookmark,
|
||||||
|
User,
|
||||||
|
Briefcase,
|
||||||
|
MapPin,
|
||||||
|
X,
|
||||||
|
Send,
|
||||||
|
ChevronLeft,
|
||||||
|
ChevronRight,
|
||||||
|
} from "lucide-react";
|
||||||
import CakeIcon from "@mui/icons-material/Cake";
|
import CakeIcon from "@mui/icons-material/Cake";
|
||||||
import HeightIcon from "@mui/icons-material/Height";
|
import HeightIcon from "@mui/icons-material/Height";
|
||||||
import GroupsIcon from "@mui/icons-material/Groups";
|
import GroupsIcon from "@mui/icons-material/Groups";
|
||||||
@ -10,155 +25,174 @@ import TempleHinduIcon from "@mui/icons-material/TempleHindu";
|
|||||||
import SchoolIcon from "@mui/icons-material/School";
|
import SchoolIcon from "@mui/icons-material/School";
|
||||||
import LocationOnIcon from "@mui/icons-material/LocationOn";
|
import LocationOnIcon from "@mui/icons-material/LocationOn";
|
||||||
import AccessibilityNewIcon from "@mui/icons-material/AccessibilityNew";
|
import AccessibilityNewIcon from "@mui/icons-material/AccessibilityNew";
|
||||||
import profilebg from "../../assets/images/profilebg.jpg";
|
import AccountBalanceWalletIcon from "@mui/icons-material/AccountBalanceWallet";
|
||||||
|
import profilebg from "../../assets/images/profilebg.jpg";
|
||||||
|
import Image from "../../assets/images/astrology-horoscope-svgrepo-com.svg";
|
||||||
|
import Image1 from "../../assets/images/scorpio-svgrepo-com.svg";
|
||||||
// Import Swiper styles
|
// Import Swiper styles
|
||||||
import 'swiper/css';
|
import "swiper/css";
|
||||||
import 'swiper/css/navigation';
|
import "swiper/css/navigation";
|
||||||
import 'swiper/css/pagination';
|
import "swiper/css/pagination";
|
||||||
import 'swiper/css/effect-coverflow';
|
import "swiper/css/effect-coverflow";
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
const MatchingList = () => {
|
const MatchingList = () => {
|
||||||
|
const swiperRef = useRef(null);
|
||||||
const swiperRef = useRef(null);
|
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
// Sample profile data
|
// Sample profile data
|
||||||
const profiles = [
|
const profiles = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
name: 'Selva Kumar . R',
|
name: "Selva Kumar . R",
|
||||||
userId: 'TK52586A',
|
userId: "TK52586A",
|
||||||
lastSeen: '14 Nov 25',
|
lastSeen: "14 Nov 25",
|
||||||
age: 23,
|
age: 23,
|
||||||
height: '5\'2"',
|
height: "5'2\"",
|
||||||
religion: 'Hindu / Agamudayar / Thuluva Vellal',
|
salary: "5-10 LPA",
|
||||||
education: 'BCA, Data Analyst',
|
location: "chennai",
|
||||||
location: 'Vellore, Tamil Nadu',
|
caste: "Brahmin",
|
||||||
image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=500&fit=crop',
|
zodiac1: "Aries",
|
||||||
isPremium: true
|
zodiac2: "Scorpio",
|
||||||
|
image:
|
||||||
|
"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=500&fit=crop",
|
||||||
|
isPremium: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
name: 'Priya Sharma',
|
name: "Priya Sharma",
|
||||||
userId: 'TK52587B',
|
userId: "TK52587B",
|
||||||
lastSeen: '15 Nov 25',
|
lastSeen: "15 Nov 25",
|
||||||
age: 25,
|
age: 25,
|
||||||
height: '5\'4"',
|
height: "5'4\"",
|
||||||
religion: 'Hindu / Brahmin / Iyer',
|
salary: "8-12 LPA",
|
||||||
education: 'MBA, Marketing Manager',
|
location: "hyderabad",
|
||||||
location: 'Chennai, Tamil Nadu',
|
caste: "Brahmin",
|
||||||
image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=500&fit=crop',
|
zodiac1: "Aries",
|
||||||
isPremium: true
|
zodiac2: "Scorpio",
|
||||||
|
image:
|
||||||
|
"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=500&fit=crop",
|
||||||
|
isPremium: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
name: 'Rahul Venkat',
|
name: "Rahul Venkat",
|
||||||
userId: 'TK52588C',
|
userId: "TK52588C",
|
||||||
lastSeen: '16 Nov 25',
|
lastSeen: "16 Nov 25",
|
||||||
age: 28,
|
age: 28,
|
||||||
height: '5\'10"',
|
height: "5'10\"",
|
||||||
religion: 'Hindu / Mudaliar / Arcot',
|
salary: "6-11 LPA",
|
||||||
education: 'B.Tech, Software Engineer',
|
location: "Mumbai",
|
||||||
location: 'Bangalore, Karnataka',
|
caste: "Brahmin",
|
||||||
image: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=500&fit=crop',
|
zodiac1: "Aries",
|
||||||
isPremium: false
|
zodiac2: "Scorpio",
|
||||||
|
image:
|
||||||
|
"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=500&fit=crop",
|
||||||
|
isPremium: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 4,
|
id: 4,
|
||||||
name: 'Aishwarya Reddy',
|
name: "Aishwarya Reddy",
|
||||||
userId: 'TK52589D',
|
userId: "TK52589D",
|
||||||
lastSeen: '17 Nov 25',
|
lastSeen: "17 Nov 25",
|
||||||
age: 26,
|
age: 26,
|
||||||
height: '5\'5"',
|
height: "5'5\"",
|
||||||
religion: 'Hindu / Reddy / Telangana',
|
salary: "7-11 LPA",
|
||||||
education: 'CA, Chartered Accountant',
|
location: "Bangalore",
|
||||||
location: 'Hyderabad, Telangana',
|
caste: "Brahmin",
|
||||||
image: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=500&fit=crop',
|
zodiac1: "Aries",
|
||||||
isPremium: true
|
zodiac2: "Scorpio",
|
||||||
|
image:
|
||||||
|
"https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=500&fit=crop",
|
||||||
|
isPremium: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 5,
|
id: 5,
|
||||||
name: 'Karthik Mohan',
|
name: "Karthik Mohan",
|
||||||
userId: 'TK52590E',
|
userId: "TK52590E",
|
||||||
lastSeen: '18 Nov 25',
|
lastSeen: "18 Nov 25",
|
||||||
age: 27,
|
age: 27,
|
||||||
height: '5\'8"',
|
height: "5'8\"",
|
||||||
religion: 'Hindu / Nadar / Tamil',
|
salary: "9-14 LPA",
|
||||||
education: 'M.Tech, Civil Engineer',
|
location: "kerala",
|
||||||
location: 'Madurai, Tamil Nadu',
|
caste: "Brahmin",
|
||||||
image: 'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=400&h=500&fit=crop',
|
zodiac1: "Aries",
|
||||||
isPremium: false
|
zodiac2: "Scorpio",
|
||||||
|
image:
|
||||||
|
"https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=400&h=500&fit=crop",
|
||||||
|
isPremium: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 6,
|
id: 6,
|
||||||
name: 'Divya Lakshmi',
|
name: "Divya Lakshmi",
|
||||||
userId: 'TK52591F',
|
userId: "TK52591F",
|
||||||
lastSeen: '19 Nov 25',
|
lastSeen: "19 Nov 25",
|
||||||
age: 24,
|
age: 24,
|
||||||
height: '5\'3"',
|
height: "5'3\"",
|
||||||
religion: 'Hindu / Pillai / Tamil',
|
salary: "5-10 LPA",
|
||||||
education: 'B.Com, HR Executive',
|
location: "madya pradesh",
|
||||||
location: 'Coimbatore, Tamil Nadu',
|
caste: "Brahmin",
|
||||||
image: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=400&h=500&fit=crop',
|
zodiac1: "Aries",
|
||||||
isPremium: true
|
zodiac2: "Scorpio",
|
||||||
}
|
image:
|
||||||
|
"https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=400&h=500&fit=crop",
|
||||||
|
isPremium: true,
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
// Profile Card Component
|
// Profile Card Component
|
||||||
|
|
||||||
|
const ProfileCard = ({ profile }) => {
|
||||||
const ProfileCard = ({ profile }) => {
|
|
||||||
const [isLiked, setIsLiked] = useState(false);
|
const [isLiked, setIsLiked] = useState(false);
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<motion.div
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, scale: 0.9 }}
|
initial={{ opacity: 0, scale: 0.9 }}
|
||||||
whileInView={{ opacity: 1, scale: 1 }}
|
whileInView={{ opacity: 1, scale: 1 }}
|
||||||
viewport={{ once: true }}
|
viewport={{ once: true }}
|
||||||
transition={{ duration: 0.5 }}
|
transition={{ duration: 0.5 }}
|
||||||
onClick={() => navigate(`/profile-details/${profile.id}`)}
|
onClick={() => navigate(`/profile-details/${profile.id}`)}
|
||||||
className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border-2 border-gray-200">
|
className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border-2 border-gray-200"
|
||||||
|
>
|
||||||
{/* Profile Image Section */}
|
{/* Profile Image Section */}
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
|
{/* Premium Badge */}
|
||||||
|
{profile.isPremium && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ scale: 0 }}
|
||||||
|
animate={{ scale: 1 }}
|
||||||
|
transition={{ delay: 0.2, type: "spring" }}
|
||||||
|
className="absolute top-4 left-4 z-10 bg-red-900 rounded-full p-2 shadow-lg"
|
||||||
|
>
|
||||||
|
<Crown className="w-5 h-5 text-white" />
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Premium Badge */}
|
{/* Shortlist Button */}
|
||||||
{profile.isPremium && (
|
<motion.button
|
||||||
<motion.div
|
whileHover={{ scale: 1 }}
|
||||||
initial={{ scale: 0 }}
|
whileTap={{ scale: 0.9 }}
|
||||||
animate={{ scale: 1 }}
|
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"
|
||||||
transition={{ delay: 0.2, type: 'spring' }}
|
onClick={(e) => {
|
||||||
className="absolute top-4 left-4 z-10 bg-red-900 rounded-full p-2 shadow-lg"
|
e.stopPropagation();
|
||||||
>
|
// shortlist logic
|
||||||
<Crown className="w-5 h-5 text-white" />
|
}}
|
||||||
</motion.div>
|
>
|
||||||
)}
|
<Bookmark className="w-4 h-4" />
|
||||||
|
<span className="text-[12px] font-medium">Shortlist</span>
|
||||||
|
</motion.button>
|
||||||
|
|
||||||
{/* Shortlist Button */}
|
<div
|
||||||
<motion.button
|
classname=" bg-gray-200 overflow-hidden w-full max-w-sm h-[300px]"
|
||||||
whileHover={{ scale: 1 }}
|
style={{ height: "300px" }}
|
||||||
whileTap={{ scale: 0.9 }}
|
>
|
||||||
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"
|
<img
|
||||||
|
src={profile.image}
|
||||||
onClick={(e) => {
|
alt={profile.name}
|
||||||
e.stopPropagation();
|
className="w-full h-full object-cover"
|
||||||
// shortlist logic
|
/>
|
||||||
}}
|
</div>
|
||||||
>
|
|
||||||
<Bookmark className="w-4 h-4" />
|
|
||||||
<span className="text-[12px] font-medium">Shortlist</span>
|
|
||||||
</motion.button>
|
|
||||||
|
|
||||||
<div classname=" bg-gray-200 overflow-hidden w-full max-w-sm h-[300px]" style={{height:"300px"}}>
|
|
||||||
|
|
||||||
<img
|
|
||||||
src={profile.image}
|
|
||||||
alt={profile.name}
|
|
||||||
className="w-full h-full object-cover"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{/* <LazyImage
|
{/* <LazyImage
|
||||||
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=600&h=800&fit=crop&crop=faces,top"
|
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=600&h=800&fit=crop&crop=faces,top"
|
||||||
alt="Profile"
|
alt="Profile"
|
||||||
@ -177,10 +211,10 @@ className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border-2 bor
|
|||||||
{/* Profile Info Overlay - positioned at bottom */}
|
{/* Profile Info Overlay - positioned at bottom */}
|
||||||
<div className="absolute bottom-1 left-0 right-0 p-6 pb-1 text-gray-900">
|
<div className="absolute bottom-1 left-0 right-0 p-6 pb-1 text-gray-900">
|
||||||
<h1 className="text-[18px] text-green-900 font-bold mb-2">
|
<h1 className="text-[18px] text-green-900 font-bold mb-2">
|
||||||
{profile.name}
|
{profile.name}
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-[14px] text-gray-700 leading-relaxed">
|
<p className="text-[14px] text-gray-700 leading-relaxed">
|
||||||
Matrimony ID: {profile.userId}
|
Matrimony ID: {profile.userId}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -194,183 +228,191 @@ className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border-2 bor
|
|||||||
>
|
>
|
||||||
<div className="flex items-center gap-4">
|
<div className="flex items-center gap-4">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<CakeIcon className="w-4 h-4 text-gray-700" />
|
<CakeIcon className="w-4 h-4 text-gray-700" />
|
||||||
<span className="text-[14px] font-600 text-gray-900">
|
<span className="text-[14px] font-600 text-gray-900">
|
||||||
Age : {profile.age}
|
Age : {profile.age}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<AccessibilityNewIcon className="w-4 h-4 text-gray-700" />
|
<AccessibilityNewIcon className="w-4 h-4 text-gray-700" />
|
||||||
<span className="text-[14px] font-600 text-gray-900">
|
<span className="text-[14px] font-600 text-gray-900">
|
||||||
Height: {profile.height}
|
Height: {profile.height}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<AccountBalanceWalletIcon className="w-4 h-4 text-gray-700" />
|
||||||
|
<span className="text-[14px] font-600 text-gray-900">
|
||||||
|
{profile.salary}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<LocationOnIcon className="w-4 h-4 text-gray-700" />
|
||||||
|
<span className="text-[14px] font-600 text-gray-900">
|
||||||
|
{profile.location}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center gap-4">
|
<div className="flex items-center gap-4">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<GroupsIcon className="w-4 h-4 text-gray-700" />
|
<TempleHinduIcon className="w-4 h-4 text-gray-700" />
|
||||||
<span className="text-[14px] font-600 text-gray-900">
|
<span className="text-[14px] font-600 text-gray-900">
|
||||||
{profile.religion}
|
{profile.caste}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<img src={Image} alt="" className="w-4 h-4 text-gray-700" />
|
||||||
|
<span className="text-[14px] font-600 text-gray-900">
|
||||||
|
{profile.zodiac1}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center gap-4">
|
<div className="flex items-center gap-4">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<SchoolIcon className="w-4 h-4 text-gray-700" />
|
<img src={Image1} alt="" className="w-4 h-4 text-gray-700" />
|
||||||
<span className="text-[14px] font-600 text-gray-900">
|
<span className="text-[14px] font-600 text-gray-900">
|
||||||
{profile.education}
|
{profile.zodiac2}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center gap-4">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<LocationOnIcon className="w-4 h-4 text-gray-700" />
|
|
||||||
<span className="text-[14px] font-600 text-gray-900">
|
|
||||||
{profile.location}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div
|
<div
|
||||||
className="py-10 bg-cover bg-center bg-no-repeat"
|
className="py-10 bg-cover bg-center bg-no-repeat"
|
||||||
// style={{ backgroundImage: `url(${profilebg})` }}
|
// style={{ backgroundImage: `url(${profilebg})` }}
|
||||||
|
>
|
||||||
>
|
<div className="w-[100%] max-w-[1400px] mx-auto">
|
||||||
<div className="w-[100%] max-w-[1400px] mx-auto">
|
{/* Header */}
|
||||||
{/* Header */}
|
<motion.div
|
||||||
<motion.div
|
initial={{ opacity: 0, y: -20 }}
|
||||||
initial={{ opacity: 0, y: -20 }}
|
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-[#00000] sm:text-[22px] lg:text-[24px] font-semibold mb-3">
|
|
||||||
Your Matching List
|
|
||||||
</h1>
|
|
||||||
<p className="text-gray-900 text-[12px]">Find your perfect match today</p>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Swiper Container */}
|
|
||||||
<div className="relative">
|
|
||||||
<Swiper
|
|
||||||
ref={swiperRef}
|
|
||||||
modules={[Navigation, Pagination, Autoplay, EffectCoverflow]}
|
|
||||||
spaceBetween={30}
|
|
||||||
slidesPerView={1}
|
|
||||||
autoplay={{
|
|
||||||
delay: 5000,
|
|
||||||
disableOnInteraction: false,
|
|
||||||
pauseOnMouseEnter: true
|
|
||||||
}}
|
|
||||||
// pagination={{
|
|
||||||
// clickable: true,
|
|
||||||
// dynamicBullets: true
|
|
||||||
// }}
|
|
||||||
loop={true}
|
|
||||||
speed={800}
|
|
||||||
breakpoints={{
|
|
||||||
640: {
|
|
||||||
slidesPerView: 2,
|
|
||||||
spaceBetween: 10
|
|
||||||
},
|
|
||||||
1024: {
|
|
||||||
slidesPerView: 3,
|
|
||||||
spaceBetween: 15
|
|
||||||
},
|
|
||||||
1280: {
|
|
||||||
slidesPerView: 4,
|
|
||||||
spaceBetween: 10
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
className="pb-16"
|
|
||||||
>
|
>
|
||||||
{profiles.map((profile) => (
|
<h1 className="text-[20px] text-[#00000] sm:text-[22px] lg:text-[24px] font-semibold mb-3">
|
||||||
<SwiperSlide key={profile.id}>
|
Your Matching List
|
||||||
<ProfileCard profile={profile} />
|
</h1>
|
||||||
</SwiperSlide>
|
<p className="text-gray-900 text-[12px]">
|
||||||
))}
|
Find your perfect match today
|
||||||
</Swiper>
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
{/* Custom Navigation Buttons */}
|
{/* Swiper Container */}
|
||||||
<motion.button
|
<div className="relative">
|
||||||
whileHover={{ scale: 1.1, x: -5 }}
|
<Swiper
|
||||||
whileTap={{ scale: 0.9 }}
|
ref={swiperRef}
|
||||||
onClick={() => swiperRef.current?.swiper.slidePrev()}
|
modules={[Navigation, Pagination, Autoplay, EffectCoverflow]}
|
||||||
className="hidden sm:flex absolute left-0 top-1/2 -translate-y-1/2 z-10
|
spaceBetween={30}
|
||||||
|
slidesPerView={1}
|
||||||
|
autoplay={{
|
||||||
|
delay: 5000,
|
||||||
|
disableOnInteraction: false,
|
||||||
|
pauseOnMouseEnter: true,
|
||||||
|
}}
|
||||||
|
// pagination={{
|
||||||
|
// clickable: true,
|
||||||
|
// dynamicBullets: true
|
||||||
|
// }}
|
||||||
|
loop={true}
|
||||||
|
speed={800}
|
||||||
|
breakpoints={{
|
||||||
|
640: {
|
||||||
|
slidesPerView: 2,
|
||||||
|
spaceBetween: 10,
|
||||||
|
},
|
||||||
|
1024: {
|
||||||
|
slidesPerView: 3,
|
||||||
|
spaceBetween: 15,
|
||||||
|
},
|
||||||
|
1280: {
|
||||||
|
slidesPerView: 4,
|
||||||
|
spaceBetween: 10,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
className="pb-16"
|
||||||
|
>
|
||||||
|
{profiles.map((profile) => (
|
||||||
|
<SwiperSlide key={profile.id}>
|
||||||
|
<ProfileCard profile={profile} />
|
||||||
|
</SwiperSlide>
|
||||||
|
))}
|
||||||
|
</Swiper>
|
||||||
|
|
||||||
|
{/* Custom Navigation Buttons */}
|
||||||
|
<motion.button
|
||||||
|
whileHover={{ scale: 1.1, x: -5 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
onClick={() => swiperRef.current?.swiper.slidePrev()}
|
||||||
|
className="hidden sm:flex absolute left-0 top-1/2 -translate-y-1/2 z-10
|
||||||
bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all
|
bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all
|
||||||
w-12 h-12 rounded-full shadow-xl hover:shadow-2xl items-center justify-center "
|
w-12 h-12 rounded-full shadow-xl hover:shadow-2xl items-center justify-center "
|
||||||
>
|
>
|
||||||
<ChevronLeft className="w-6 h-6 text-gray-700" />
|
<ChevronLeft className="w-6 h-6 text-gray-700" />
|
||||||
</motion.button>
|
</motion.button>
|
||||||
|
|
||||||
<motion.button
|
<motion.button
|
||||||
whileHover={{ scale: 1.1, x: 5 }}
|
whileHover={{ scale: 1.1, x: 5 }}
|
||||||
whileTap={{ scale: 0.9 }}
|
whileTap={{ scale: 0.9 }}
|
||||||
onClick={() => swiperRef.current?.swiper.slideNext()}
|
onClick={() => swiperRef.current?.swiper.slideNext()}
|
||||||
className="hidden sm:flex absolute right-0 top-1/2 -translate-y-1/2 z-10
|
className="hidden sm:flex absolute right-0 top-1/2 -translate-y-1/2 z-10
|
||||||
bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all
|
bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all
|
||||||
w-12 h-12 rounded-full shadow-xl hover:shadow-2xl items-center justify-center transition-all"
|
w-12 h-12 rounded-full shadow-xl hover:shadow-2xl items-center justify-center transition-all"
|
||||||
|
>
|
||||||
|
<ChevronRight className="w-6 h-6 text-gray-700" />
|
||||||
|
</motion.button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* View All Button */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ delay: 0.5 }}
|
||||||
|
className="text-center mt-12"
|
||||||
>
|
>
|
||||||
<ChevronRight className="w-6 h-6 text-gray-700" />
|
<motion.button
|
||||||
</motion.button>
|
whileHover={{ scale: 1.05 }}
|
||||||
|
whileTap={{ scale: 0.95 }}
|
||||||
|
className="px-6 py-3 bg-[#034E08] text-white rounded-full font-semibold text-lg shadow-lg hover:shadow-xl transition-shadow"
|
||||||
|
onClick={() => navigate("/matches")}
|
||||||
|
>
|
||||||
|
View All Matches
|
||||||
|
</motion.button>
|
||||||
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* View All Button */}
|
{/* Custom Swiper Styles */}
|
||||||
<motion.div
|
<style jsx global>{`
|
||||||
initial={{ opacity: 0 }}
|
.swiper-pagination-bullet {
|
||||||
animate={{ opacity: 1 }}
|
width: 10px;
|
||||||
transition={{ delay: 0.5 }}
|
height: 10px;
|
||||||
className="text-center mt-12"
|
background: #a70710;
|
||||||
>
|
opacity: 0.5;
|
||||||
<motion.button
|
}
|
||||||
whileHover={{ scale: 1.05 }}
|
|
||||||
whileTap={{ scale: 0.95 }}
|
.swiper-pagination-bullet-active {
|
||||||
className="px-6 py-3 bg-[#034E08] text-white rounded-full font-semibold text-lg shadow-lg hover:shadow-xl transition-shadow"
|
opacity: 1;
|
||||||
|
width: 30px;
|
||||||
onClick={() => navigate("/matches")}
|
border-radius: 5px;
|
||||||
>
|
}
|
||||||
View All Matches
|
|
||||||
</motion.button>
|
.swiper-slide {
|
||||||
</motion.div>
|
height: auto;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Custom Swiper Styles */}
|
|
||||||
<style jsx global>{`
|
|
||||||
.swiper-pagination-bullet {
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
background: #A70710;
|
|
||||||
opacity: 0.5;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper-pagination-bullet-active {
|
|
||||||
opacity: 1;
|
|
||||||
width: 30px;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper-slide {
|
|
||||||
height: auto;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
`}</style>
|
|
||||||
</div>
|
|
||||||
</>
|
</>
|
||||||
)
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
export default MatchingList
|
export default MatchingList;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user