357 lines
11 KiB
JavaScript
357 lines
11 KiB
JavaScript
import { useState, useEffect, useRef } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { Box, Typography } from '@mui/material';
|
|
import { useInView } from 'react-intersection-observer';
|
|
|
|
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 ">
|
|
{/* <div className="absolute bottom-0 left-0 w-full h-[300px] " style={{background: "linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 70%)"}} />
|
|
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">
|
|
Thirukalyanam 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 */}
|
|
{/* Stats Section with MUI Counter */}
|
|
<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: 10000000, label: "Happy Users" },
|
|
{ number: 100, label: "Verified Profiles" },
|
|
{ number: 24, label: "Support" },
|
|
].map((stat, index) => {
|
|
const [ref, inView] = useInView({
|
|
threshold: 0.3,
|
|
triggerOnce: true,
|
|
delay: index * 100,
|
|
});
|
|
|
|
const Counter = ({ endValue }) => {
|
|
const [count, setCount] = useState(0);
|
|
|
|
useEffect(() => {
|
|
if (inView) {
|
|
const duration = 2000; // 2 seconds
|
|
const startTime = Date.now();
|
|
|
|
const animate = () => {
|
|
const elapsed = Date.now() - startTime;
|
|
const progress = Math.min(elapsed / duration, 1);
|
|
const easeProgress = 1 - Math.pow(1 - progress, 3); // easeOut cubic
|
|
const currentValue = Math.floor(easeProgress * endValue);
|
|
setCount(currentValue);
|
|
|
|
if (progress < 1) {
|
|
requestAnimationFrame(animate);
|
|
} else {
|
|
setCount(endValue);
|
|
}
|
|
};
|
|
animate();
|
|
}
|
|
}, [inView, endValue]);
|
|
|
|
return (
|
|
<Typography
|
|
variant="h3"
|
|
sx={{
|
|
fontSize: { xs: '1.5rem', md: '2rem' },
|
|
fontWeight: 700,
|
|
color: '#A70710',
|
|
|
|
mb: 1,
|
|
fontFamily: 'inherit'
|
|
}}
|
|
>
|
|
{stat.number >= 1000000
|
|
? `${(count / 1000000).toFixed(0)}M+`
|
|
: stat.number === 100
|
|
? `${count}%`
|
|
: stat.number === 24
|
|
? `${count}/7`
|
|
: `+${count}`
|
|
}
|
|
</Typography>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<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 }}
|
|
style={{background:"#eaf7deff", padding:"20px 5px", borderRadius:"10px"}}
|
|
>
|
|
<Box ref={ref}>
|
|
<Counter endValue={stat.number} />
|
|
</Box>
|
|
<Typography
|
|
variant="body1"
|
|
sx={{
|
|
color: 'grey.600',
|
|
fontWeight: 500,
|
|
fontSize: '1.1rem'
|
|
}}
|
|
>
|
|
{stat.label}
|
|
</Typography>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</motion.section>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default AppPromoteSection;
|