285 lines
9.7 KiB
JavaScript
285 lines
9.7 KiB
JavaScript
import { useState, useEffect } from "react";
|
|
import { motion } from "framer-motion";
|
|
import {
|
|
Users,
|
|
Shield,
|
|
Lock,
|
|
Download,
|
|
Smartphone,
|
|
QrCode,
|
|
} from "lucide-react";
|
|
import { BorderBeam } from "../lightswind/border-beam";
|
|
import LazyImage from "../common/LazyImage";
|
|
import records1 from "../../assets/images/records-new-1.svg"
|
|
import records2 from "../../assets/images/records-new-2.svg"
|
|
|
|
import records3 from "../../assets/images/records-new-3.svg"
|
|
import MatrimonySwipeCards from "../common/MatrimonySwipeCards";
|
|
|
|
const AppPromoteSection = () => {
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setIsVisible(true);
|
|
}, []);
|
|
|
|
const fadeInUp = {
|
|
hidden: { opacity: 0, y: 60 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: { duration: 0.6, ease: "easeOut" },
|
|
},
|
|
};
|
|
|
|
const staggerContainer = {
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: {
|
|
staggerChildren: 0.2,
|
|
},
|
|
},
|
|
};
|
|
|
|
const scaleIn = {
|
|
hidden: { opacity: 0, scale: 0.8 },
|
|
visible: {
|
|
opacity: 1,
|
|
scale: 1,
|
|
transition: { duration: 0.5 },
|
|
},
|
|
};
|
|
|
|
const features = [
|
|
{
|
|
icon: records1,
|
|
title: "100% Screened Profiles",
|
|
description:
|
|
"Search by location, community, profession & more from lakhs of active profiles",
|
|
color: "bg-pink-50 dark:bg-pink-900/20",
|
|
},
|
|
{
|
|
icon: records2,
|
|
title: "Verifications by Personal Visit",
|
|
description:
|
|
"Special listing for profiles verified by our agents through personal visits",
|
|
color: "bg-blue-50 dark:bg-blue-900/20",
|
|
},
|
|
{
|
|
icon: records3,
|
|
title: "Control over Privacy",
|
|
description:
|
|
"Restrict unwanted access to contact details & photos/videos",
|
|
color: "bg-purple-50 dark:bg-purple-900/20",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<section className="md:-mt-[100px] mx-auto w-[100%] max-w-[1200px] relative z-9 md:my-8 p-2 md:p-4">
|
|
<div
|
|
className="-mt-[20px] md:mt-[0px]
|
|
rounded-[20px] overflow-hidden bg-white " style={{boxShadow:"0 2px 6px 0 rgba(142, 142, 142, .2)"}}
|
|
>
|
|
{/* Hero Section */}
|
|
<section className="relative p-2 pb-15 flex items-center justify-center overflow-hidden border-none">
|
|
{/* Background Image with Overlay */}
|
|
<div
|
|
className="absolute inset-0 z-0"
|
|
// style={{
|
|
// backgroundImage: 'url(https://images.unsplash.com/photo-1519741497674-611481863552?w=1200)',
|
|
// backgroundSize: 'cover',
|
|
// backgroundPosition: 'center',
|
|
// }}
|
|
>
|
|
{/* <div className="absolute inset-0 bg-gradient-to-r from-black/70 to-black/50"></div> */}
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2">
|
|
<motion.div
|
|
initial="hidden"
|
|
animate={isVisible ? "visible" : "hidden"}
|
|
variants={fadeInUp}
|
|
className="text-center"
|
|
>
|
|
|
|
{/* <motion.h1
|
|
variants={fadeInUp}
|
|
className="text-[18px] md:text-[25px] font-bold mt-4 text-black mb-8"
|
|
>
|
|
Bringing People{" "}
|
|
<span className="text-pink-400">Together</span>
|
|
</motion.h1> */}
|
|
</motion.div>
|
|
|
|
{/* Features Grid */}
|
|
<motion.div
|
|
variants={staggerContainer}
|
|
initial="hidden"
|
|
animate={isVisible ? "visible" : "hidden"}
|
|
className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-16 max-w-6xl mx-auto"
|
|
>
|
|
{features.map((feature, index) => (
|
|
<div className="relative overflow-hidden bg-white rounded-2xl p-2 shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden">
|
|
<BorderBeam
|
|
colorFrom="#ff0000ff"
|
|
colorTo="#338105ff"
|
|
size={90}
|
|
duration={6}
|
|
borderThickness={6}
|
|
glowIntensity={6}
|
|
/>
|
|
<div className="relative bg-card py-2 px-2 rounded-md z-10">
|
|
<motion.div
|
|
key={index}
|
|
variants={scaleIn}
|
|
whileHover={{ scale: 1, y: -5 }}
|
|
className="flex flex-col items-center text-center "
|
|
>
|
|
<motion.div
|
|
className={`w-[80px] h-[80px] flex items-center justify-center mb-6`}
|
|
whileHover={{ scale: 1.1}}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
<LazyImage
|
|
src={feature.icon}
|
|
className="w-full h-full rounded-lg object-cover"
|
|
/>
|
|
</motion.div>
|
|
<h3 className="text-[18px] font-semibold text-[#A70710] text-center mb-3">
|
|
{feature.title}
|
|
</h3>
|
|
<p className="text-gray-600 text-justify leading-relaxed">
|
|
{feature.description}
|
|
</p>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* App Download Section */}
|
|
<section className="relative py-8 bg-[#a707100f]">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
|
|
{/* Left Content */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -50 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
|
|
<p className="text-[14px] text-gray-600 mb-2">
|
|
Connect with your matches anytime, anywhere
|
|
</p>
|
|
<h2 className="text-[22px] font-bold text-gray-900 mb-2">
|
|
Impress your matches with instant <span className="text-[#A70710]">chats!</span>
|
|
</h2>
|
|
|
|
|
|
<div className="mt-6 ">
|
|
{/* Jeevansathi Match Hour */}
|
|
<div className="mb-4">
|
|
<h2 className="text-lg font-semibold text-gray-900 relative after:content-[''] after:block after:w-15 after:h-1 after:bg-[#A70710] after:rounded-full after:mt-1">
|
|
Jeevansathi Match Hour
|
|
</h2>
|
|
<p className="text-gray-600 mt-2">
|
|
Register to join an online event to connect with members of your community in a short time
|
|
</p>
|
|
</div>
|
|
|
|
|
|
{/* Voice & Video Calling */}
|
|
|
|
<div className="mb-4">
|
|
<h2 className="text-lg font-semibold text-gray-900 relative after:content-[''] after:block after:w-15 after:h-1 after:bg-[#A70710] after:rounded-full after:mt-1">
|
|
Voice & Video Calling
|
|
</h2>
|
|
<p className="text-gray-600 mt-2">
|
|
Enjoy secure conversations using our voice & video calling services without revealing your number
|
|
</p>
|
|
</div>
|
|
|
|
|
|
|
|
{/* Introducing Video Profiles */}
|
|
|
|
<div className="mb-4">
|
|
<h2 className="text-lg font-semibold text-gray-900 relative after:content-[''] after:block after:w-15 after:h-1 after:bg-[#A70710] after:rounded-full after:mt-1">
|
|
Introducing Video Profiles
|
|
</h2>
|
|
<p className="text-gray-600 mt-2">
|
|
Stand out amongst others and engage faster! Introduce yourself by adding a video to your profile
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</motion.div>
|
|
|
|
{/* Right - Phone Mockup */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 50 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
className="relative"
|
|
>
|
|
|
|
<MatrimonySwipeCards/>
|
|
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Stats Section */}
|
|
<motion.section
|
|
className="py-16 bg-[#fff]"
|
|
initial={{ opacity: 0 }}
|
|
whileInView={{ opacity: 1 }}
|
|
viewport={{ once: true }}
|
|
>
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
|
|
{[
|
|
{ number: "25+", label: "Years of Trust" },
|
|
{ number: "10M+", label: "Happy Users" },
|
|
{ number: "100%", label: "Verified Profiles" },
|
|
{ number: "24/7", label: "Support" },
|
|
].map((stat, index) => (
|
|
<motion.div
|
|
key={index}
|
|
className="text-center"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: index * 0.1 }}
|
|
>
|
|
<motion.h3
|
|
className="text-4xl md:text-5xl font-bold text-pink-500 mb-2"
|
|
whileHover={{ scale: 1.1 }}
|
|
>
|
|
{stat.number}
|
|
</motion.h3>
|
|
<p className="text-gray-600 dark:text-gray-400 font-medium">
|
|
{stat.label}
|
|
</p>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</motion.section>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default AppPromoteSection;
|