-
- {/* Left Content */}
-
-
- Download the Jeevansathi app
-
-
- Connect with your matches anytime, anywhere
-
-
-
-
- Point your phone camera at the QR code or use
one of the download links below
-
-
- {/* QR Code */}
-
-
- {/* Download Buttons */}
-
-
-
-
-
GET IT ON
-
Google Play
-
-
-
-
-
-
Download on the
-
App Store
-
-
-
-
-
- Or get a download link
-
- on your SMS/Email
-
-
-
- {/* Right - Phone Mockup */}
-
-
- {/* Phone Frame */}
-
-
-
- {/* Phone Screen Content */}
-
-
-
- {/* Profile Cards */}
-
- {[1, 2].map((i) => (
-
-
-
-
-
Profile Name
-
25 yrs, 5'6"
-
-
-
-
-
-
- ))}
-
-
- {/* Features Tags */}
-
-
- โ Easy Verification
-
-
- โ Voice & Video Calls
-
-
-
+ {/* Features Grid */}
+
+ {features.map((feature, index) => (
+
+
+
+
+
+
+
+
+ {feature.title}
+
+
+ {feature.description}
+
+
+
+
+
+ {/* App Download Section */}
+
+
+
+ {/* Left Content */}
+
+
+
+ Connect with your matches anytime, anywhere
+
+
+ Impress your matches with instant chats!
+
+
+
+
+ {/* Jeevansathi Match Hour */}
+
+
+ Jeevansathi Match Hour
+
+
+ Register to join an online event to connect with members of your community in a short time
+
+
+
+
+ {/* Voice & Video Calling */}
+
+
+
+ Voice & Video Calling
+
+
+ Enjoy secure conversations using our voice & video calling services without revealing your number
+
+
+
+
+
+ {/* Introducing Video Profiles */}
+
+
+
+ Introducing Video Profiles
+
+
+ Stand out amongst others and engage faster! Introduce yourself by adding a video to your profile
+
+
+
+
- {/* Download Badge */}
-
- 10M+ downloads
+
+
+
-
-
+
+ {[
+ { number: "25+", label: "Years of Trust" },
+ { number: "10M+", label: "Happy Users" },
+ { number: "100%", label: "Verified Profiles" },
+ { number: "24/7", label: "Support" },
+ ].map((stat, index) => (
+
+
+ {stat.number}
+
+
+ {stat.label}
+
+
+ ))}
+
+
-
- {[
- { number: "25+", label: "Years of Trust" },
- { number: "10M+", label: "Happy Users" },
- { number: "100%", label: "Verified Profiles" },
- { number: "24/7", label: "Support" }
- ].map((stat, index) => (
-
-
- {stat.number}
-
- {stat.label}
-
- ))}
-
-
-
- )
-}
+ );
+};
-export default AppPromoteSection
+export default AppPromoteSection;
diff --git a/src/components/landing/AppQRCode.jsx b/src/components/landing/AppQRCode.jsx
new file mode 100644
index 0000000..4cf2191
--- /dev/null
+++ b/src/components/landing/AppQRCode.jsx
@@ -0,0 +1,191 @@
+import { Star, StarBorder } from '@mui/icons-material';
+import apppromo from "../../assets/images/apppromo.png";
+import LazyImage from '../common/LazyImage';
+const AppQRCode = () => {
+ return (
+ <>
+
+
+
+ {/* Left Content Section */}
+
+ {/* QR Code */}
+
+
+
+
+ {/* Heading */}
+
+
+ To speed up your partner
search, download
+
+
+ Thirukalyanam App
+
+
+
+ {/* App Store Buttons */}
+
+
+ {/* App Info */}
+
+
+ Thirukalyanam Matrimonyยฎ - Official & Trusted Matrimony App
+
+
+ 1M+ Downloads
+
+
+ {/* Rating */}
+
+
4.2
+
+ {[...Array(4)].map((_, i) => (
+
+ ))}
+
+
+
+
+ Based on Customer Reviews
+
+
+
+
+ {/* Right Mobile Mockup Section */}
+ {/*
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Pragati Ram
+
27 Yrs, 5 ft 5 in
+
B.Sc, Computer Science
+
Administrative Professional
+
+
+
+
+
+
+
+
+
+
+
+
+ Regular
+ PRIME
+
+
+
+
+
+
All matches (9524)
+
+
+
+
Priyanka Sani...
+
28 Yrs, 5'7"
+
+
+
+
Karthika
+
26 Yrs, 5'4"
+
+
+
+
+
+
+
+
*/}
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default AppQRCode
diff --git a/src/components/lightswind/ThreeDScrollTrigger.jsx b/src/components/lightswind/ThreeDScrollTrigger.jsx
new file mode 100644
index 0000000..8348b00
--- /dev/null
+++ b/src/components/lightswind/ThreeDScrollTrigger.jsx
@@ -0,0 +1,193 @@
+"use client";
+
+import React, {
+ useRef,
+ useEffect,
+ useState,
+ useMemo,
+ useContext,
+} from "react";
+import {
+ motion,
+ useAnimationFrame,
+ useMotionValue,
+ useScroll,
+ useSpring,
+ useTransform,
+ useVelocity,
+} from "framer-motion";
+
+// Utility for merging classnames (replace with own utility if needed)
+function cn(...classes) {
+ return classes.filter(Boolean).join(" ");
+}
+
+// Utility: wrap
+export const wrap = (min, max, v) => {
+ const rangeSize = max - min;
+ return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;
+};
+
+// Context to share velocity
+const ThreeDScrollTriggerContext = React.createContext(null);
+
+// Container providing velocity
+export function ThreeDScrollTriggerContainer({ children, className, ...props }) {
+ const { scrollY } = useScroll();
+ const scrollVelocity = useVelocity(scrollY);
+ const smoothVelocity = useSpring(scrollVelocity, {
+ damping: 50,
+ stiffness: 400,
+ });
+
+ // map to bounded factor [-5...5]
+ const velocityFactor = useTransform(smoothVelocity, (v) => {
+ const sign = v < 0 ? -1 : 1;
+ const magnitude = Math.min(5, (Math.abs(v) / 1000) * 5);
+ return sign * magnitude;
+ });
+
+ return (
+
+
+ {children}
+
+
+ );
+}
+
+// Row chooses shared or local velocity
+export function ThreeDScrollTriggerRow(props) {
+ const sharedVelocityFactor = useContext(ThreeDScrollTriggerContext);
+ if (sharedVelocityFactor) {
+ return (
+
+ );
+ }
+ return
;
+}
+
+// Row implementation
+function ThreeDScrollTriggerRowImpl({
+ children,
+ baseVelocity = 5,
+ direction = 1,
+ paused = false,
+ className,
+ velocityFactor,
+ ...props
+}) {
+ const containerRef = useRef(null);
+ const [numCopies, setNumCopies] = useState(3);
+ const x = useMotionValue(0);
+
+ const prevTimeRef = useRef(null);
+ const unitWidthRef = useRef(0);
+ const baseXRef = useRef(0);
+
+ // Memoized children
+ const childrenArray = useMemo(() => React.Children.toArray(children), [children]);
+
+ const BlockContent = useMemo(() => (
+
+ {childrenArray}
+
+ ), [childrenArray]);
+
+ // Measure block width
+ useEffect(() => {
+ const container = containerRef.current;
+ if (!container) return;
+ const block = container.querySelector(".threed-scroll-trigger-block");
+ if (block) {
+ unitWidthRef.current = block.scrollWidth;
+ const containerWidth = container.offsetWidth;
+ const needed = Math.max(3, Math.ceil(containerWidth / unitWidthRef.current) + 2);
+ setNumCopies(needed);
+ }
+ }, [childrenArray]);
+
+ // Animation loop
+ useAnimationFrame((time) => {
+ if (paused) return; // <--- THIS STOPS SCROLL WHEN PAUSED
+ if (prevTimeRef.current == null) prevTimeRef.current = time;
+ const dt = Math.max(0, (time - prevTimeRef.current) / 1000);
+ prevTimeRef.current = time;
+
+ const unitWidth = unitWidthRef.current;
+ if (unitWidth <= 0) return;
+
+ const velocity = velocityFactor.get();
+ const speedMultiplier = Math.min(5, Math.abs(velocity));
+ const scrollDirection = velocity >= 0 ? 1 : -1;
+ const currentDirection = direction * scrollDirection;
+
+ const pixelsPerSecond = (unitWidth * baseVelocity) / 100;
+ const moveBy = currentDirection * pixelsPerSecond * (1 + speedMultiplier) * dt;
+
+ const newX = baseXRef.current + moveBy;
+
+ // Proper wrapping in both directions
+ if (newX >= unitWidth) {
+ baseXRef.current = newX % unitWidth;
+ } else if (newX <= 0) {
+ baseXRef.current = unitWidth + (newX % unitWidth);
+ } else {
+ baseXRef.current = newX;
+ }
+
+ x.set(baseXRef.current);
+ });
+
+ const xTransform = useTransform(x, (v) => `translate3d(${-v}px,0,0)`);
+
+ return (
+
+
+ {Array.from({ length: numCopies }).map((_, i) => (
+
+ {BlockContent}
+
+ ))}
+
+
+ );
+}
+
+// Local row: if no shared velocity
+function ThreeDScrollTriggerRowLocal(props) {
+ const { scrollY } = useScroll();
+ const localVelocity = useVelocity(scrollY);
+ const localSmoothVelocity = useSpring(localVelocity, {
+ damping: 50,
+ stiffness: 400,
+ });
+ const localVelocityFactor = useTransform(localSmoothVelocity, (v) => {
+ const sign = v < 0 ? -1 : 1;
+ const magnitude = Math.min(5, (Math.abs(v) / 1000) * 5);
+ return sign * magnitude;
+ });
+
+ return (
+
+ );
+}
+
+// Optionally export default
+export default ThreeDScrollTriggerRow;
diff --git a/src/components/lightswind/border-beam.jsx b/src/components/lightswind/border-beam.jsx
new file mode 100644
index 0000000..431755f
--- /dev/null
+++ b/src/components/lightswind/border-beam.jsx
@@ -0,0 +1,72 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+export const BorderBeam = ({
+ className,
+ size = 50,
+ delay = 0,
+ duration = 6,
+ colorFrom = "#7400ff",
+ colorTo = "#9b41ff",
+ transition,
+ style,
+ reverse = false,
+ initialOffset = 0,
+ borderThickness = 5,
+ opacity = 1,
+ glowIntensity = 0,
+ beamBorderRadius,
+ pauseOnHover = false,
+ speedMultiplier = 1,
+}) => {
+
+ // Calculate actual duration
+ const actualDuration = speedMultiplier ? duration / speedMultiplier : duration;
+
+ // Glow shadow
+ const glowEffect =
+ glowIntensity > 0
+ ? `0 0 ${glowIntensity * 5}px ${glowIntensity * 2}px var(--color-from)`
+ : undefined;
+
+ return (
+
+
+
+ );
+};
diff --git a/src/components/ui/ThreeDMarquee.jsx b/src/components/ui/ThreeDMarquee.jsx
index 05d0a76..5c58e71 100644
--- a/src/components/ui/ThreeDMarquee.jsx
+++ b/src/components/ui/ThreeDMarquee.jsx
@@ -21,14 +21,14 @@ const ThreeDMarquee = ({ images = [], className = "", cols = 4, onImageClick })
return (
-
+
Now, chat for free !
Finding your perfect match just become easier
diff --git a/src/index.css b/src/index.css
index a041a74..aad5ae9 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,3 @@
@import "tailwindcss";
-
+@plugin "lightswind/plugin";
diff --git a/src/layout/LandingLayout.jsx b/src/layout/LandingLayout.jsx
index cdba822..d3ebaf9 100644
--- a/src/layout/LandingLayout.jsx
+++ b/src/layout/LandingLayout.jsx
@@ -4,7 +4,7 @@ const LandingLayout = () => {
return (
<>
-
+
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index de7d92d..cc3c8dc 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -12,6 +12,10 @@ import wedding9 from "../assets/images/wedding9.avif";
import wedding10 from "../assets/images/wedding10.jpg";
import wedding11 from "../assets/images/wedding11.jpg";
import wedding12 from "../assets/images/wedding12.avif";
+import MatrimonySwipeCards from "../components/common/MatrimonySwipeCards";
+import ThreeScrollTrigger from "../components/common/Threemarquee";
+import AppQRCode from "../components/landing/AppQRCode";
+
const HomePage = () => {
@@ -63,8 +67,22 @@ const HomePage = () => {
return (
);
};