landing done
This commit is contained in:
parent
9a0ff761f6
commit
c873c7cd56
844
package-lock.json
generated
844
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -18,7 +18,7 @@
|
|||||||
"@tailwindcss/vite": "^4.1.17",
|
"@tailwindcss/vite": "^4.1.17",
|
||||||
"axios": "^1.13.2",
|
"axios": "^1.13.2",
|
||||||
"framer-motion": "^12.23.24",
|
"framer-motion": "^12.23.24",
|
||||||
"lightswind": "^3.1.15",
|
"lightswind": "^3.1.18",
|
||||||
"lucide-react": "^0.553.0",
|
"lucide-react": "^0.553.0",
|
||||||
"react": "^19.2.0",
|
"react": "^19.2.0",
|
||||||
"react-dom": "^19.2.0",
|
"react-dom": "^19.2.0",
|
||||||
|
|||||||
19
src/App.css
19
src/App.css
@ -0,0 +1,19 @@
|
|||||||
|
button{
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.body-bg {
|
||||||
|
background-image: url("./assets/images/bg3.jpg");
|
||||||
|
background-size: contain;
|
||||||
|
background-position: center;
|
||||||
|
position: relative;
|
||||||
|
background-repeat: repeat;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.body-bg::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(255, 255, 255, 0.7); /* white overlay */
|
||||||
|
}
|
||||||
202
src/assets/images/How_it_works.svg
Normal file
202
src/assets/images/How_it_works.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 32 KiB |
BIN
src/assets/images/apppromo.png
Normal file
BIN
src/assets/images/apppromo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
BIN
src/assets/images/bg.jpg
Normal file
BIN
src/assets/images/bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 151 KiB |
BIN
src/assets/images/bg2.jpg
Normal file
BIN
src/assets/images/bg2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 182 KiB |
BIN
src/assets/images/bg3.jpg
Normal file
BIN
src/assets/images/bg3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
BIN
src/assets/images/nomoreimg.png
Normal file
BIN
src/assets/images/nomoreimg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
9
src/assets/images/records-new-1.svg
Normal file
9
src/assets/images/records-new-1.svg
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
<svg width="68" height="66" viewBox="0 0 68 66" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M13.77 23.52c0 4.19 3.41 7.6 7.6 7.6 4.19 0 7.6-3.41 7.6-7.6 0-4.19-3.41-7.6-7.6-7.6-4.19 0-7.6 3.41-7.6 7.6zm1.86 0c0-3.16 2.57-5.74 5.74-5.74a5.74 5.74 0 1 1-5.74 5.74z" fill="#1F1F1F"/>
|
||||||
|
<path d="M21.37 31.22c-4.25 0-7.7-3.45-7.7-7.7s3.45-7.7 7.7-7.7 7.7 3.45 7.7 7.7-3.45 7.7-7.7 7.7zm0-15.2c-4.14 0-7.5 3.36-7.5 7.5 0 4.14 3.36 7.5 7.5 7.5 4.14 0 7.5-3.36 7.5-7.5 0-4.14-3.36-7.5-7.5-7.5zm0 13.34c-3.22 0-5.84-2.62-5.84-5.84 0-3.22 2.62-5.84 5.84-5.84 3.22 0 5.84 2.62 5.84 5.84 0 3.22-2.62 5.84-5.84 5.84zm0-11.47c-3.11 0-5.64 2.53-5.64 5.64s2.53 5.64 5.64 5.64 5.64-2.53 5.64-5.64-2.53-5.64-5.64-5.64zM31.14 43.19c0 .52.4.93.91.93s.91-.42.91-.93c0-5.68-5.45-10.27-12.1-10.27-6.65 0-12.1 4.59-12.1 10.27 0 .52.4.93.91.93s.91-.42.91-.93c0-4.62 4.59-8.4 10.27-8.4s10.27 3.78 10.27 8.4h.02z" fill="#1F1F1F"/>
|
||||||
|
<path d="M32.06 44.22c-.56 0-1.01-.46-1.01-1.03 0-4.58-4.56-8.3-10.17-8.3s-10.17 3.72-10.17 8.3c0 .57-.45 1.03-1.01 1.03s-1.01-.46-1.01-1.03c0-5.72 5.47-10.37 12.2-10.37 6.73 0 12.2 4.65 12.2 10.37 0 .57-.45 1.03-1.01 1.03h-.02zm-11.19-9.53c5.72 0 10.37 3.81 10.37 8.5 0 .46.36.83.81.83.45 0 .81-.37.81-.83 0-5.61-5.38-10.17-12-10.17s-12 4.56-12 10.17c0 .46.36.83.81.83.45 0 .81-.37.81-.83 0-4.69 4.65-8.5 10.37-8.5h.02z" fill="#1F1F1F"/>
|
||||||
|
<path d="M53.38 57.32c8.01 0 14.5-6.49 14.5-14.5s-6.49-14.5-14.5-14.5-14.5 6.49-14.5 14.5 6.49 14.5 14.5 14.5z" fill="#6ECFB2"/>
|
||||||
|
<path d="M49.38 57.32c-8 0-14.5-6.5-14.5-14.5s6.5-14.5 14.5-14.5 14.5 6.5 14.5 14.5-6.5 14.5-14.5 14.5zm0-27.21c-7 0-12.7 5.7-12.7 12.7 0 7 5.7 12.7 12.7 12.7 7 0 12.7-5.7 12.7-12.7 0-7-5.7-12.7-12.7-12.7z" fill="#1F1F1F"/>
|
||||||
|
<path d="m54.96 38.06-7.47 7.48-3.02-3.02a.947.947 0 0 0-.67-.28c-.25 0-.49.1-.67.28a.922.922 0 0 0-.28.67c0 .12.02.25.07.36.05.12.12.22.21.31l3.7 3.7a.937.937 0 0 0 .68.28c.25 0 .5-.1.68-.28l8.15-8.15a.922.922 0 0 0 .28-.67c0-.12-.02-.25-.07-.36a.945.945 0 0 0-.21-.31.945.945 0 0 0-.31-.21.946.946 0 0 0-1.05.2h-.02z" fill="#1F1F1F"/>
|
||||||
|
<path d="M37.9 65.91H5.57C2.5 65.91 0 63.41 0 60.34V5.57c0-1.49.58-2.89 1.64-3.95C2.7.57 4.09.03 5.58 0h32.33c3.07 0 5.57 2.5 5.57 5.57v19.74c0 .5-.4.9-.9.9s-.9-.4-.9-.9V5.57c0-2.08-1.69-3.77-3.77-3.77H5.58c-1 .03-1.95.39-2.67 1.1A3.72 3.72 0 0 0 1.8 5.57v54.77c0 2.08 1.69 3.77 3.77 3.77H37.9c2.08 0 3.77-1.69 3.77-3.77v-.54c0-.5.4-.9.9-.9s.9.4.9.9v.54c0 3.07-2.5 5.57-5.57 5.57z" fill="#1F1F1F"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.4 KiB |
5
src/assets/images/records-new-2.svg
Normal file
5
src/assets/images/records-new-2.svg
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<svg width="59" height="66" viewBox="0 0 59 66" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M28.724 65.217c-.38 0-.75-.22-.92-.6-.22-.51 0-1.1.51-1.32 37.12-16.34 27.65-47.33 26.04-51.83-7.45-1.35-21.88-7.9-25.22-9.44-8.87 5.17-22.28 8.51-25.48 9.27-7.59 30.35 13.47 45.04 13.68 45.19.46.31.58.93.27 1.39-.31.46-.93.58-1.39.27-.23-.15-22.55-15.66-14.44-47.57.15-.59.62-1.04 1.2-1.17 1.63-.38 16.29-3.87 25.34-9.19.45-.26 1-.29 1.47-.07 1.79.83 17.71 8.15 25.13 9.41.55.09 1.02.46 1.22 1 1.4 3.77 12.44 37.21-27.03 54.59-.13.06-.27.08-.4.08l.02-.01z" fill="#1F1F1F"/>
|
||||||
|
<path d="M29.294 52.907s-24.14-8.26-17.27-34.14c.07-.24.26-.42.5-.47 1.94-.39 10.62-2.29 16.4-6.08.22-.14.5-.15.72 0 1.3.9 6.25 3.97 15.78 5.94.24.05.43.23.5.46.87 3.13 5.97 24.67-16.63 34.29z" fill="#6ECFB2"/>
|
||||||
|
<path d="M26.614 38.217c-.39 0-.77-.15-1.06-.44l-4.5-4.5a1.49 1.49 0 0 1 0-2.12 1.49 1.49 0 0 1 2.12 0l3.51 3.51 9.94-8.59c.63-.54 1.58-.47 2.12.15.54.63.47 1.57-.15 2.12l-11 9.5c-.28.24-.63.37-.98.37z" fill="#1F1F1F"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
6
src/assets/images/records-new-3.svg
Normal file
6
src/assets/images/records-new-3.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<svg width="71" height="62" viewBox="0 0 71 62" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M8.72.14a.998.998 0 0 0-1.37.35.998.998 0 0 0 .35 1.37L8.72.14zM7.7 1.86l9.27 5.51 1.02-1.72L8.72.14 7.7 1.86zm9.27 5.51c1.06.63 1.44 1.97.89 3.06l1.78.91c1.03-2.03.31-4.52-1.65-5.69l-1.02 1.72zm.89 3.06L4.84 36.07l1.78.91 13.02-25.64-1.78-.91zM4.84 36.07c-.54 1.07-1.67 1.72-2.85 1.63l-.15 1.99c2 .15 3.88-.95 4.78-2.72l-1.78-.91v.01zM1.99 37.7c-.42-.03-.78-.12-1.06-.27L0 39.2c.6.31 1.25.45 1.84.49l.15-1.99z" fill="#1F1F1F"/>
|
||||||
|
<path d="m34.62 59.22-.62-.78.63.78h-.01zm.82.62a.999.999 0 1 0-1.3-1.52l1.3 1.52zM5.12 38.08l23.3 21.62 1.36-1.47-23.3-21.61-1.36 1.47v-.01zm23.3 21.62c1.88 1.74 4.8 1.92 6.83.29L34 58.43c-1.23.99-3.03.9-4.22-.2l-1.36 1.47zm6.83.29c.07-.05.13-.11.2-.16l-1.3-1.52s-.1.08-.14.12l1.25 1.56h-.01zM39.79 58.26c-1.28 0-2.56-.47-3.56-1.37l-8.57-7.73A.997.997 0 1 1 29 47.68l8.57 7.73c1.1.99 2.72 1.14 3.92.36.29-.18.58-.41.88-.67.42-.36 1.05-.32 1.41.09.36.42.32 1.05-.09 1.41-.37.33-.75.61-1.12.85-.85.54-1.81.81-2.78.81zM51.17 53.56c.42-.36.46-1 .09-1.41-.36-.42-1-.46-1.41-.09l1.32 1.5zm-18.02-9.24 10.56 9.53 1.34-1.48-10.56-9.53-1.34 1.48zm10.56 9.53c1.74 1.57 4.34 1.85 6.34.56l-1.08-1.68c-1.21.78-2.83.63-3.93-.36l-1.34 1.49.01-.01zm6.34.56c.37-.23.74-.52 1.12-.85l-1.32-1.5c-.31.27-.6.49-.88.67l1.08 1.68z" fill="#1F1F1F"/>
|
||||||
|
<path d="M56.77 15.22s-13.75-3.6-19.56-3.78L20.5 25.06l3.47 4.62 11.47-5.03 21.65 18.28 7.44-3.15-7.75-24.56h-.01z" fill="#6ECFB2"/>
|
||||||
|
<path d="M48.3 14.54a.999.999 0 0 0 1.26-.65.999.999 0 0 0-.65-1.26l-.6 1.91h-.01zm-8.87 24.9 12.12 10.91 1.34-1.49-12.12-10.91-1.34 1.49zm12.12 10.91c1.15 1.04 2.71 1.59 4.29 1.39l-.24-1.99c-.96.12-1.96-.21-2.71-.89l-1.34 1.49zm4.29 1.39c.69-.09 1.47-.32 2.14-.86.68-.56 1.16-1.37 1.36-2.47l-1.97-.35c-.12.68-.38 1.04-.65 1.26-.29.23-.67.37-1.12.43l.25 1.98-.01.01zm3.5-3.33c.33-1.86-.35-3.72-1.67-5.01l-1.39 1.43c.88.85 1.29 2.07 1.09 3.23l1.97.35zm-1.67-5.01L37.16 23.46l-1.39 1.43 20.51 19.94 1.39-1.43zM37.16 23.46c-.93-.9-2.36-1.07-3.46-.39l1.05 1.7c.32-.2.75-.15 1.02.11l1.39-1.43v.01zm-3.46-.39-7.08 4.33 1.04 1.71 7.08-4.33-1.04-1.71zm-7.08 4.33c-.97.59-2.14.75-3.18.42l-.62 1.9c1.64.53 3.41.26 4.84-.61l-1.04-1.71zm-3.18.42c-.44-.14-.81-.35-1.09-.64-.26-.28-.48-.68-.54-1.31l-1.99.19c.1 1.04.49 1.86 1.07 2.48.57.61 1.27.97 1.93 1.18l.62-1.9zm-1.62-1.95c-.11-1.1.4-2.2 1.31-2.9l-1.22-1.59c-1.42 1.09-2.26 2.84-2.09 4.68l1.99-.19h.01zm1.31-2.9 12.29-9.39-1.21-1.59-12.29 9.39 1.21 1.59zm12.29-9.39a5.62 5.62 0 0 1 4.01-1.13l.21-1.99c-1.94-.2-3.89.35-5.44 1.53l1.22 1.59zm4.01-1.13c1.78.18 4.58.73 8.87 2.09l.6-1.91c-4.38-1.39-7.32-1.97-9.27-2.17l-.21 1.99h.01zM56.75 14.01l-.96.29.95-.29h.01zM69.46 42l.19.98-.2-.98h.01zm.45.93c.54-.13.87-.67.74-1.21-.13-.54-.67-.87-1.21-.74l.47 1.95zM66.7 5.49l-8.47 3.57.78 1.84 8.47-3.57-.78-1.84zm-8.47 3.57c-1.94.82-3.06 2.94-2.5 5.02l1.93-.52c-.29-1.06.29-2.21 1.35-2.66l-.78-1.84zm-2.51 5.01c.02.09.05.18.07.23l1.92-.57c-.02-.08-.03-.11-.04-.15l-1.94.5-.01-.01zm.07.24c.68 2.19 6.14 19.75 7.78 25.01l1.91-.59c-1.63-5.26-7.09-22.82-7.78-25.01l-1.91.6v-.01zm7.78 25.01c.8 2.57 3.4 4.19 6.07 3.67l-.39-1.96c-1.64.32-3.27-.67-3.78-2.3l-1.91.59h.01zm6.08 3.67c.07-.01.16-.03.26-.05l-.47-1.95c-.05.01-.11.02-.18.04l.39 1.96zM25.83 15.16a.997.997 0 1 0 .15-1.99l-.15 1.99zm-8.56-.65 8.56.65.15-1.99-8.56-.65-.15 1.99z" fill="#1F1F1F"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.3 KiB |
BIN
src/assets/images/trusted-couple-banner-img.avif
Normal file
BIN
src/assets/images/trusted-couple-banner-img.avif
Normal file
Binary file not shown.
19
src/components/common/BorderBeam.jsx
Normal file
19
src/components/common/BorderBeam.jsx
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import { BorderBeam } from "../lightswind/border-beam";
|
||||||
|
|
||||||
|
export default function BorderBeamDemo() {
|
||||||
|
return (
|
||||||
|
<div className="relative p-1 rounded-lg overflow-hidden w-[100%] max-w-[300px] mx-auto mt-10">
|
||||||
|
<BorderBeam
|
||||||
|
colorFrom="#ff0000ff"
|
||||||
|
colorTo="#338105ff"
|
||||||
|
size={90}
|
||||||
|
duration={6}
|
||||||
|
borderThickness={6}
|
||||||
|
glowIntensity={6}
|
||||||
|
/>
|
||||||
|
<div className="relative bg-card p-4 rounded-md z-10">
|
||||||
|
Content with animated border
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
18
src/components/common/DemoScrollTrigger.jsx
Normal file
18
src/components/common/DemoScrollTrigger.jsx
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
export default function DemoScrollTrigger() {
|
||||||
|
return (
|
||||||
|
<ThreeDScrollTriggerContainer className="my-12">
|
||||||
|
<ThreeDScrollTriggerRow baseVelocity={5} direction={1}>
|
||||||
|
<div className="px-4 py-2 bg-blue-500 text-white rounded-lg shadow-lg mx-1">
|
||||||
|
Item 1
|
||||||
|
</div>
|
||||||
|
<div className="px-4 py-2 bg-green-500 text-white rounded-lg shadow-lg mx-1">
|
||||||
|
Item 2
|
||||||
|
</div>
|
||||||
|
<div className="px-4 py-2 bg-red-500 text-white rounded-lg shadow-lg mx-1">
|
||||||
|
Item 3
|
||||||
|
</div>
|
||||||
|
</ThreeDScrollTriggerRow>
|
||||||
|
{/* You can add more rows to create a 3D layered effect */}
|
||||||
|
</ThreeDScrollTriggerContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,4 +1,3 @@
|
|||||||
import { useState } from "react";
|
|
||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import AppBar from "@mui/material/AppBar";
|
import AppBar from "@mui/material/AppBar";
|
||||||
import Box from "@mui/material/Box";
|
import Box from "@mui/material/Box";
|
||||||
@ -22,14 +21,102 @@ import Divider from "@mui/material/Divider";
|
|||||||
import AdbIcon from "@mui/icons-material/Adb";
|
import AdbIcon from "@mui/icons-material/Adb";
|
||||||
import ListItemIcon from "@mui/material/ListItemIcon";
|
import ListItemIcon from "@mui/material/ListItemIcon";
|
||||||
import { InboxIcon, MailIcon } from "lucide-react";
|
import { InboxIcon, MailIcon } from "lucide-react";
|
||||||
|
import LazyImage from "./LazyImage";
|
||||||
|
import Logo from "../../assets/images/logo.png"
|
||||||
|
import { Navigate, useNavigate } from "react-router-dom";
|
||||||
const pages = ["Matches", "Search", "Help"];
|
const pages = ["Matches", "Search", "Help"];
|
||||||
const settings = ["Profile", "Account", "Dashboard", "Logout"];
|
const settings = ["Profile", "Account", "Dashboard", "Logout"];
|
||||||
|
|
||||||
|
|
||||||
|
import { useState, useRef, useEffect } from 'react';
|
||||||
|
import { Home, Search, Heart, MessageCircle, User, Settings } from 'lucide-react';
|
||||||
|
|
||||||
|
// Sparkle Navbar Component
|
||||||
|
const SparkleNavbar = ({ items, color = "#0fec1eff", onItemClick }) => {
|
||||||
|
const [activeIndex, setActiveIndex] = useState(0);
|
||||||
|
const [indicatorStyle, setIndicatorStyle] = useState({});
|
||||||
|
const [isAnimating, setIsAnimating] = useState(false);
|
||||||
|
const navRef = useRef(null);
|
||||||
|
const buttonRefs = useRef([]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
updateIndicator(activeIndex);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const updateIndicator = (index) => {
|
||||||
|
const button = buttonRefs.current[index];
|
||||||
|
if (button && navRef.current) {
|
||||||
|
const navRect = navRef.current.getBoundingClientRect();
|
||||||
|
const btnRect = button.getBoundingClientRect();
|
||||||
|
setIndicatorStyle({
|
||||||
|
left: btnRect.left - navRect.left + btnRect.width / 2 - 18,
|
||||||
|
opacity: 1
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClick = (index) => {
|
||||||
|
if (index === activeIndex || isAnimating) return;
|
||||||
|
setIsAnimating(true);
|
||||||
|
const newButton = buttonRefs.current[index];
|
||||||
|
|
||||||
|
if (newButton && navRef.current) {
|
||||||
|
const navRect = navRef.current.getBoundingClientRect();
|
||||||
|
const newRect = newButton.getBoundingClientRect();
|
||||||
|
|
||||||
|
setIndicatorStyle(prev => ({
|
||||||
|
...prev,
|
||||||
|
left: newRect.left - navRect.left + newRect.width / 2 - 18,
|
||||||
|
}));
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
setActiveIndex(index);
|
||||||
|
setIsAnimating(false);
|
||||||
|
if (onItemClick) onItemClick(items[index], index);
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<nav ref={navRef} className="relative flex items-center gap-8 px-6 py-4">
|
||||||
|
{items.map((item, index) => (
|
||||||
|
<button
|
||||||
|
key={item}
|
||||||
|
ref={el => buttonRefs.current[index] = el}
|
||||||
|
onClick={() => handleClick(index)}
|
||||||
|
className={`cursor-pointer relative uppercase text-sm font-medium transition-all duration-300 pb-2 ${
|
||||||
|
activeIndex === index ? 'text-black' : 'text-gray-900 hover:text-gray-600'
|
||||||
|
}`}
|
||||||
|
style={{
|
||||||
|
textShadow: activeIndex === index
|
||||||
|
? `0 0 10px ${color}, 0 0 20px ${color}, 0 0 30px ${color}`
|
||||||
|
: 'none'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{item}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* Underline only - no dots */}
|
||||||
|
<div
|
||||||
|
className="absolute bottom-3 h-[3px] w-9 rounded-full transition-all duration-300 ease-out"
|
||||||
|
style={{
|
||||||
|
left: indicatorStyle.left,
|
||||||
|
opacity: indicatorStyle.opacity,
|
||||||
|
backgroundColor: color,
|
||||||
|
boxShadow: `0 0 10px ${color}, 0 0 20px ${color}, 0 0 30px ${color}, 0 0 40px ${color}`,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
const LandingHeader = () => {
|
const LandingHeader = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
const [drawerOpen, setDrawerOpen] = useState(false);
|
const [drawerOpen, setDrawerOpen] = useState(false);
|
||||||
const [anchorElUser, setAnchorElUser] = React.useState(null);
|
const [anchorElUser, setAnchorElUser] = React.useState(null);
|
||||||
|
const [selectedItem, setSelectedItem] = useState('Home');
|
||||||
const toggleDrawer = (open) => () => {
|
const toggleDrawer = (open) => () => {
|
||||||
setDrawerOpen(open);
|
setDrawerOpen(open);
|
||||||
};
|
};
|
||||||
@ -99,12 +186,11 @@ const LandingHeader = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<AppBar position="sticky">
|
<AppBar position="sticky" sx={{ backgroundColor: "#fff" }}>
|
||||||
<Container maxWidth="xl">
|
<Container maxWidth="xl">
|
||||||
<Toolbar disableGutters>
|
<Toolbar disableGutters>
|
||||||
{/* Desktop Logo */}
|
{/* Desktop Logo */}
|
||||||
<AdbIcon sx={{ display: { xs: "none", md: "flex" }, mr: 1 }} />
|
{/* <Typography
|
||||||
<Typography
|
|
||||||
variant="h6"
|
variant="h6"
|
||||||
noWrap
|
noWrap
|
||||||
component="a"
|
component="a"
|
||||||
@ -115,25 +201,37 @@ const LandingHeader = () => {
|
|||||||
fontFamily: "monospace",
|
fontFamily: "monospace",
|
||||||
fontWeight: 700,
|
fontWeight: 700,
|
||||||
letterSpacing: ".3rem",
|
letterSpacing: ".3rem",
|
||||||
color: "inherit",
|
color: "#000000",
|
||||||
textDecoration: "none",
|
textDecoration: "none",
|
||||||
position:"sticky",
|
position:"sticky",
|
||||||
zIndex:"99"
|
zIndex:"99"
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
LOGO
|
LOGO
|
||||||
</Typography>
|
</Typography> */}
|
||||||
|
<Box sx={{ display: { xs: "none", md: "flex" }, mr: 1 }}>
|
||||||
|
|
||||||
|
<LazyImage
|
||||||
|
src={Logo}
|
||||||
|
className="w-full h-[50px] rounded-lg object-cover "
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
{/* Mobile Drawer Button */}
|
{/* Mobile Drawer Button */}
|
||||||
<Box sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}>
|
<Box sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}>
|
||||||
<IconButton size="large" color="inherit" onClick={toggleDrawer(true)}>
|
<IconButton size="large" color="#000000" onClick={toggleDrawer(true)}>
|
||||||
<MenuIcon />
|
<MenuIcon />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
{/* Mobile Logo */}
|
{/* Mobile Logo */}
|
||||||
<AdbIcon sx={{ display: { xs: "flex", md: "none" }, mr: 1 }} />
|
<Box sx={{ display: { xs: "flex", md: "none" }, mr: 1 ,flexGrow: 1,}}>
|
||||||
<Typography
|
<LazyImage
|
||||||
|
src={Logo}
|
||||||
|
className="w-full h-[50px] rounded-lg object-cover "
|
||||||
|
onClick={()=> navigate("/")}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
{/* <Typography
|
||||||
variant="h5"
|
variant="h5"
|
||||||
noWrap
|
noWrap
|
||||||
component="a"
|
component="a"
|
||||||
@ -145,20 +243,26 @@ const LandingHeader = () => {
|
|||||||
fontFamily: "monospace",
|
fontFamily: "monospace",
|
||||||
fontWeight: 700,
|
fontWeight: 700,
|
||||||
letterSpacing: ".3rem",
|
letterSpacing: ".3rem",
|
||||||
color: "inherit",
|
color: "#000000",
|
||||||
textDecoration: "none",
|
textDecoration: "none",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
LOGO
|
LOGO
|
||||||
</Typography>
|
</Typography> */}
|
||||||
|
|
||||||
{/* Desktop Menu */}
|
{/* Desktop Menu */}
|
||||||
<Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
|
<Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex", marginLeft:"20px" } }}>
|
||||||
{pages.map((page) => (
|
{/* {pages.map((page) => (
|
||||||
<Button key={page} sx={{ my: 2, color: "white", display: "block" }}>
|
<Button key={page} sx={{ my: 2, color: "#000000", display: "block" }}>
|
||||||
{page}
|
{page}
|
||||||
</Button>
|
</Button>
|
||||||
))}
|
))} */}
|
||||||
|
|
||||||
|
<SparkleNavbar
|
||||||
|
items={['Home', 'Matches', 'Search', 'Chat']}
|
||||||
|
color="#034E08"
|
||||||
|
onItemClick={(item) => setSelectedItem(item)}
|
||||||
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
{/* Avatar Menu */}
|
{/* Avatar Menu */}
|
||||||
|
|||||||
279
src/components/common/MatrimonySwipeCards.jsx
Normal file
279
src/components/common/MatrimonySwipeCards.jsx
Normal file
@ -0,0 +1,279 @@
|
|||||||
|
import { useState, useRef, useMemo } from 'react';
|
||||||
|
import { Heart, X, RotateCcw, MapPin, Briefcase, GraduationCap } from 'lucide-react';
|
||||||
|
import LazyImage from './LazyImage';
|
||||||
|
import nomoreimg from "../../assets/images/nomoreimg.png";
|
||||||
|
const TinderCard = ({ children, onSwipe, onCardLeftScreen, preventSwipe, className }) => {
|
||||||
|
const [pos, setPos] = useState({ x: 0, y: 0 });
|
||||||
|
const [dragging, setDragging] = useState(false);
|
||||||
|
const [startPos, setStartPos] = useState({ x: 0, y: 0 });
|
||||||
|
const [gone, setGone] = useState(false);
|
||||||
|
|
||||||
|
const handleStart = (clientX, clientY) => {
|
||||||
|
if (gone) return;
|
||||||
|
setDragging(true);
|
||||||
|
setStartPos({ x: clientX - pos.x, y: clientY - pos.y });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMove = (clientX, clientY) => {
|
||||||
|
if (!dragging || gone) return;
|
||||||
|
setPos({ x: clientX - startPos.x, y: clientY - startPos.y });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEnd = () => {
|
||||||
|
if (gone) return;
|
||||||
|
setDragging(false);
|
||||||
|
if (Math.abs(pos.x) > 120) {
|
||||||
|
const dir = pos.x > 0 ? 'right' : 'left';
|
||||||
|
if (onSwipe) onSwipe(dir);
|
||||||
|
setGone(true);
|
||||||
|
setTimeout(() => onCardLeftScreen && onCardLeftScreen(dir), 300);
|
||||||
|
} else {
|
||||||
|
setPos({ x: 0, y: 0 });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (gone) return null;
|
||||||
|
|
||||||
|
const rotation = pos.x / 20;
|
||||||
|
const opacity = Math.min(Math.abs(pos.x) / 100, 1);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={className}
|
||||||
|
style={{
|
||||||
|
transform: `translate(${pos.x}px, ${pos.y}px) rotate(${rotation}deg)`,
|
||||||
|
transition: dragging ? 'none' : 'transform 0.3s ease-out',
|
||||||
|
touchAction: 'none'
|
||||||
|
}}
|
||||||
|
onMouseDown={(e) => handleStart(e.clientX, e.clientY)}
|
||||||
|
onMouseMove={(e) => handleMove(e.clientX, e.clientY)}
|
||||||
|
onMouseUp={handleEnd}
|
||||||
|
onMouseLeave={() => dragging && handleEnd()}
|
||||||
|
onTouchStart={(e) => handleStart(e.touches[0].clientX, e.touches[0].clientY)}
|
||||||
|
onTouchMove={(e) => handleMove(e.touches[0].clientX, e.touches[0].clientY)}
|
||||||
|
onTouchEnd={handleEnd}
|
||||||
|
>
|
||||||
|
{pos.x > 50 && (
|
||||||
|
<div className="absolute top-8 left-8 z-10 border-4 border-green-500 text-green-500 px-4 py-2 rounded-lg text-2xl font-bold rotate-[-20deg]" style={{ opacity }}>
|
||||||
|
LIKE
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{pos.x < -50 && (
|
||||||
|
<div className="absolute top-8 right-8 z-10 border-4 border-red-500 text-red-500 px-4 py-2 rounded-lg text-2xl font-bold rotate-[20deg]" style={{ opacity }}>
|
||||||
|
NOPE
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const profiles = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: 'Priya Sharma',
|
||||||
|
age: 26,
|
||||||
|
location: 'Mumbai, India',
|
||||||
|
profession: 'Software Engineer',
|
||||||
|
education: 'B.Tech from IIT Bombay',
|
||||||
|
about: 'Love traveling, reading, and cooking. Looking for someone who values family.',
|
||||||
|
image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=500&fit=crop'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: 'Ananya Patel',
|
||||||
|
age: 24,
|
||||||
|
location: 'Bangalore, India',
|
||||||
|
profession: 'Doctor',
|
||||||
|
education: 'MBBS from AIIMS',
|
||||||
|
about: 'Passionate about healthcare and music. Seeking a caring life partner.',
|
||||||
|
image: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=500&fit=crop'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: 'Neha Gupta',
|
||||||
|
age: 27,
|
||||||
|
location: 'Delhi, India',
|
||||||
|
profession: 'CA',
|
||||||
|
education: 'CA from ICAI',
|
||||||
|
about: 'Enjoy yoga and meditation. Looking for someone with similar values.',
|
||||||
|
image: 'https://images.unsplash.com/photo-1517841905240-472988babdf9?w=400&h=500&fit=crop'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: 'Kavya Reddy',
|
||||||
|
age: 25,
|
||||||
|
location: 'Hyderabad, India',
|
||||||
|
profession: 'Marketing Manager',
|
||||||
|
education: 'MBA from ISB',
|
||||||
|
about: 'Creative soul who loves art and dance. Seeking a supportive partner.',
|
||||||
|
image: 'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?w=400&h=500&fit=crop'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function MatrimonySwipeCards() {
|
||||||
|
const [swipedCards, setSwipedCards] = useState(new Set());
|
||||||
|
const [lastDirection, setLastDirection] = useState('');
|
||||||
|
const [likedProfiles, setLikedProfiles] = useState([]);
|
||||||
|
const [dislikedProfiles, setDislikedProfiles] = useState([]);
|
||||||
|
const [key, setKey] = useState(0);
|
||||||
|
|
||||||
|
const activeProfiles = profiles.filter(p => !swipedCards.has(p.id));
|
||||||
|
const canSwipe = activeProfiles.length > 0;
|
||||||
|
|
||||||
|
const swiped = (direction, profile) => {
|
||||||
|
setLastDirection(direction);
|
||||||
|
setSwipedCards(prev => new Set([...prev, profile.id]));
|
||||||
|
if (direction === 'right') {
|
||||||
|
setLikedProfiles(prev => [...prev, profile]);
|
||||||
|
} else {
|
||||||
|
setDislikedProfiles(prev => [...prev, profile]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const swipe = (dir) => {
|
||||||
|
if (canSwipe) {
|
||||||
|
const topProfile = activeProfiles[activeProfiles.length - 1];
|
||||||
|
swiped(dir, topProfile);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const reset = () => {
|
||||||
|
setSwipedCards(new Set());
|
||||||
|
setLikedProfiles([]);
|
||||||
|
setDislikedProfiles([]);
|
||||||
|
setLastDirection('');
|
||||||
|
setKey(prev => prev + 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className=" w-[100%] max-w-[fit-screen] p-2 md:px-6 overflow-hidden">
|
||||||
|
<div className="max-w-md mx-auto">
|
||||||
|
{/* <h1 className="text-2xl font-bold text-center text-purple-800 mb-2">
|
||||||
|
💍 Find Your Match
|
||||||
|
</h1>
|
||||||
|
<p className="text-center text-gray-600 mb-4 text-sm">
|
||||||
|
Swipe right to like, left to pass
|
||||||
|
</p> */}
|
||||||
|
|
||||||
|
{/* Card Container with overflow hidden */}
|
||||||
|
<div className="relative h-[480px] w-full overflow-hidden rounded-2xl">
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center">
|
||||||
|
{!canSwipe ? (
|
||||||
|
<div className="text-center p-8 bg-white rounded-2xl shadow-lg">
|
||||||
|
<p className="text-xl text-gray-600 mb-4">No more profiles!</p>
|
||||||
|
<LazyImage
|
||||||
|
src={nomoreimg}
|
||||||
|
className="w-full h-[190px] object-cover "
|
||||||
|
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={reset}
|
||||||
|
className="cursor-pointer flex items-center gap-2 mx-auto px-6 py-3 bg-[#034E08] text-white rounded-full hover:bg-[#A70710] transition"
|
||||||
|
>
|
||||||
|
<RotateCcw size={20} />
|
||||||
|
Start Over
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
profiles
|
||||||
|
.filter(p => !swipedCards.has(p.id))
|
||||||
|
.map((profile, index) => (
|
||||||
|
<TinderCard
|
||||||
|
key={`${key}-${profile.id}`}
|
||||||
|
onSwipe={(dir) => swiped(dir, profile)}
|
||||||
|
onCardLeftScreen={() => {}}
|
||||||
|
preventSwipe={['up', 'down']}
|
||||||
|
className="absolute w-full max-w-sm cursor-grab active:cursor-grabbing"
|
||||||
|
>
|
||||||
|
<div className="bg-white rounded-2xl shadow-xl overflow-hidden select-none">
|
||||||
|
<div className="relative">
|
||||||
|
<img
|
||||||
|
src={profile.image}
|
||||||
|
alt={profile.name}
|
||||||
|
className="w-full h-72 object-cover pointer-events-none"
|
||||||
|
draggable={false}
|
||||||
|
/>
|
||||||
|
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
|
||||||
|
<h2 className="text-2xl font-bold text-white">
|
||||||
|
{profile.name}, {profile.age}
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-4 space-y-3">
|
||||||
|
<div className="flex items-center gap-2 text-gray-600">
|
||||||
|
<MapPin size={16} className="text-pink-500 flex-shrink-0" />
|
||||||
|
<span className="text-sm">{profile.location}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2 text-gray-600">
|
||||||
|
<Briefcase size={16} className="text-purple-500 flex-shrink-0" />
|
||||||
|
<span className="text-sm">{profile.profession}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2 text-gray-600">
|
||||||
|
<GraduationCap size={16} className="text-indigo-500 flex-shrink-0" />
|
||||||
|
<span className="text-sm">{profile.education}</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-700 text-sm mt-2 line-clamp-2">
|
||||||
|
{profile.about}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TinderCard>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Action Buttons */}
|
||||||
|
{canSwipe && (
|
||||||
|
<div className="flex justify-center gap-6 mt-4">
|
||||||
|
<button
|
||||||
|
onClick={() => swipe('left')}
|
||||||
|
className="w-16 h-16 bg-white rounded-full shadow-lg flex items-center justify-center hover:bg-red-50 transition border-2 border-red-200 hover:border-red-400 active:scale-95"
|
||||||
|
>
|
||||||
|
<X size={32} className="text-red-500" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={reset}
|
||||||
|
className="w-12 h-12 bg-white rounded-full shadow-lg flex items-center justify-center hover:bg-yellow-50 transition border-2 border-yellow-200 hover:border-yellow-400 active:scale-95 self-center"
|
||||||
|
>
|
||||||
|
<RotateCcw size={20} className="text-yellow-500" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => swipe('right')}
|
||||||
|
className="w-16 h-16 bg-white rounded-full shadow-lg flex items-center justify-center hover:bg-green-50 transition border-2 border-green-200 hover:border-green-400 active:scale-95"
|
||||||
|
>
|
||||||
|
<Heart size={32} className="text-green-500" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Stats */}
|
||||||
|
{/* <div className="mt-6 flex gap-4 text-sm">
|
||||||
|
<div className="flex-1 bg-green-100 rounded-lg p-3 text-center">
|
||||||
|
<p className="font-semibold text-green-700">👍 Liked: {likedProfiles.length}</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 bg-red-100 rounded-lg p-3 text-center">
|
||||||
|
<p className="font-semibold text-red-700">👎 Passed: {dislikedProfiles.length}</p>
|
||||||
|
</div>
|
||||||
|
</div> */}
|
||||||
|
|
||||||
|
{/* Liked Profiles Preview */}
|
||||||
|
{/* {likedProfiles.length > 0 && (
|
||||||
|
<div className="mt-4 bg-white rounded-xl p-4 shadow-md">
|
||||||
|
<h3 className="font-semibold text-gray-700 mb-3">💚 Your Likes</h3>
|
||||||
|
<div className="flex gap-2 flex-wrap">
|
||||||
|
{likedProfiles.map(p => (
|
||||||
|
<div key={p.id} className="flex items-center gap-2 bg-green-50 px-3 py-1.5 rounded-full">
|
||||||
|
<img src={p.image} alt={p.name} className="w-6 h-6 rounded-full object-cover" />
|
||||||
|
<span className="text-sm text-green-700">{p.name.split(' ')[0]}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)} */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
133
src/components/common/Threemarquee.jsx
Normal file
133
src/components/common/Threemarquee.jsx
Normal file
@ -0,0 +1,133 @@
|
|||||||
|
import ThreeDScrollTriggerRow, {
|
||||||
|
ThreeDScrollTriggerContainer,
|
||||||
|
} from "../lightswind/ThreeDScrollTrigger";
|
||||||
|
import React, { useState } from "react";
|
||||||
|
const reviews = [
|
||||||
|
{
|
||||||
|
name: "Aria Thompson",
|
||||||
|
company: "CreativePixel Studio",
|
||||||
|
image:
|
||||||
|
"https://images.unsplash.com/photo-1517841905240-472988babdf9?auto=format&fit=facearea&w=96&h=96&facepad=2",
|
||||||
|
review:
|
||||||
|
"Lightswind UI has completely changed how we design modern interfaces. Every component feels elegant, responsive, and intuitive.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Ethan Rivera",
|
||||||
|
company: "CodeLoom Technologies",
|
||||||
|
image:
|
||||||
|
"https://images.unsplash.com/photo-1465101162946-4377e57745c3?auto=format&fit=facearea&w=96&h=96&facepad=2",
|
||||||
|
review:
|
||||||
|
"The customization options in Lightswind UI are unmatched. We built an entire SaaS dashboard in days instead of weeks.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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() {
|
||||||
|
// Split reviews across 3 rows for masonry feel
|
||||||
|
// Split reviews across 3 rows
|
||||||
|
const row1 = [reviews[0], reviews[1]];
|
||||||
|
const row2 = [reviews[2], reviews[3]];
|
||||||
|
const row3 = [reviews[4], reviews[5], reviews[6]];
|
||||||
|
const [paused, setPaused] = useState(false);
|
||||||
|
return (
|
||||||
|
<div className="w-full mx-auto max-w-[1300px] overflow-hidden">
|
||||||
|
<ThreeDScrollTriggerContainer className="py-8 space-y-8">
|
||||||
|
|
||||||
|
|
||||||
|
<ThreeDScrollTriggerRow baseVelocity={2} direction={1} paused={paused}>
|
||||||
|
<div className="flex flex-row gap-6 px-3 py-1">
|
||||||
|
{row1.map((rev, idx) => (
|
||||||
|
<ReviewCard
|
||||||
|
key={idx}
|
||||||
|
{...rev}
|
||||||
|
onMouseEnter={() => setPaused(true)}
|
||||||
|
onMouseLeave={() => setPaused(false)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</ThreeDScrollTriggerRow>
|
||||||
|
|
||||||
|
<ThreeDScrollTriggerRow baseVelocity={2} direction={-1}>
|
||||||
|
<div className="flex flex-row gap-6 px-3 py-1">
|
||||||
|
{row2.map((rev, idx) => (
|
||||||
|
<ReviewCard key={idx} {...rev} onMouseEnter={() => setPaused(true)}
|
||||||
|
onMouseLeave={() => setPaused(false)} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Card component for clarity and reuse
|
||||||
|
function ReviewCard({ name, company, image, review ,onMouseEnter, onMouseLeave}) {
|
||||||
|
return (
|
||||||
|
<div className="bg-[#fbfbfb] rounded-xl shadow-md p-5 w-72 " onMouseEnter={onMouseEnter}
|
||||||
|
onMouseLeave={onMouseLeave}>
|
||||||
|
<div className="flex items-center mb-2">
|
||||||
|
<img
|
||||||
|
src={image}
|
||||||
|
alt={name}
|
||||||
|
className="w-10 h-10 rounded-full mr-3 object-cover"
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<div className="font-semibold text-gray-900">{name}</div>
|
||||||
|
<div className="text-xs text-gray-400">{company}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-700 break-words text-wrap">
|
||||||
|
{review}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,11 +1,23 @@
|
|||||||
|
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 { useState, useEffect } from 'react';
|
import records3 from "../../assets/images/records-new-3.svg"
|
||||||
import { motion } from 'framer-motion';
|
import MatrimonySwipeCards from "../common/MatrimonySwipeCards";
|
||||||
import { Users, Shield, Lock, Download, Smartphone, QrCode } from 'lucide-react';
|
|
||||||
|
|
||||||
const AppPromoteSection = () => {
|
const AppPromoteSection = () => {
|
||||||
|
const [isVisible, setIsVisible] = useState(false);
|
||||||
const [isVisible, setIsVisible] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setIsVisible(true);
|
setIsVisible(true);
|
||||||
@ -13,11 +25,11 @@ const AppPromoteSection = () => {
|
|||||||
|
|
||||||
const fadeInUp = {
|
const fadeInUp = {
|
||||||
hidden: { opacity: 0, y: 60 },
|
hidden: { opacity: 0, y: 60 },
|
||||||
visible: {
|
visible: {
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
y: 0,
|
y: 0,
|
||||||
transition: { duration: 0.6, ease: "easeOut" }
|
transition: { duration: 0.6, ease: "easeOut" },
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
const staggerContainer = {
|
const staggerContainer = {
|
||||||
@ -25,317 +37,248 @@ const AppPromoteSection = () => {
|
|||||||
visible: {
|
visible: {
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
transition: {
|
transition: {
|
||||||
staggerChildren: 0.2
|
staggerChildren: 0.2,
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
const scaleIn = {
|
const scaleIn = {
|
||||||
hidden: { opacity: 0, scale: 0.8 },
|
hidden: { opacity: 0, scale: 0.8 },
|
||||||
visible: {
|
visible: {
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
scale: 1,
|
scale: 1,
|
||||||
transition: { duration: 0.5 }
|
transition: { duration: 0.5 },
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
const features = [
|
const features = [
|
||||||
{
|
{
|
||||||
icon: <Users className="w-8 h-8 text-pink-500" />,
|
icon: records1,
|
||||||
title: "100% Screened Profiles",
|
title: "100% Screened Profiles",
|
||||||
description: "Search by location, community, profession & more from lakhs of active profiles",
|
description:
|
||||||
color: "bg-pink-50 dark:bg-pink-900/20"
|
"Search by location, community, profession & more from lakhs of active profiles",
|
||||||
|
color: "bg-pink-50 dark:bg-pink-900/20",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: <Shield className="w-8 h-8 text-blue-500" />,
|
icon: records2,
|
||||||
title: "Verifications by Personal Visit",
|
title: "Verifications by Personal Visit",
|
||||||
description: "Special listing for profiles verified by our agents through personal visits",
|
description:
|
||||||
color: "bg-blue-50 dark:bg-blue-900/20"
|
"Special listing for profiles verified by our agents through personal visits",
|
||||||
|
color: "bg-blue-50 dark:bg-blue-900/20",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: <Lock className="w-8 h-8 text-purple-500" />,
|
icon: records3,
|
||||||
title: "Control over Privacy",
|
title: "Control over Privacy",
|
||||||
description: "Restrict unwanted access to contact details & photos/videos",
|
description:
|
||||||
color: "bg-purple-50 dark:bg-purple-900/20"
|
"Restrict unwanted access to contact details & photos/videos",
|
||||||
}
|
color: "bg-purple-50 dark:bg-purple-900/20",
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
<section className="md:-mt-[100px] mx-auto w-[100%] max-w-[1100px] relative z-9 md:my-8 p-2 md:p-12">
|
||||||
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-pink-50 dark:from-gray-900 dark:to-pink-900/20">
|
<div
|
||||||
{/* Hero Section */}
|
className="-mt-[20px] md:mt-[0px]
|
||||||
<section className="relative min-h-screen flex items-center justify-center overflow-hidden">
|
rounded-[20px] overflow-hidden bg-white " style={{boxShadow:"0 2px 6px 0 rgba(142, 142, 142, .2)"}}
|
||||||
{/* 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>
|
{/* Hero Section */}
|
||||||
</div>
|
<section className="relative p-2 pb-15 flex items-center justify-center overflow-hidden border-none">
|
||||||
|
{/* Background Image with Overlay */}
|
||||||
{/* Content */}
|
<div
|
||||||
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
|
className="absolute inset-0 z-0"
|
||||||
<motion.div
|
// style={{
|
||||||
initial="hidden"
|
// backgroundImage: 'url(https://images.unsplash.com/photo-1519741497674-611481863552?w=1200)',
|
||||||
animate={isVisible ? "visible" : "hidden"}
|
// backgroundSize: 'cover',
|
||||||
variants={fadeInUp}
|
// backgroundPosition: 'center',
|
||||||
className="text-center"
|
// }}
|
||||||
>
|
|
||||||
<motion.p
|
|
||||||
variants={fadeInUp}
|
|
||||||
className="text-pink-300 text-sm font-medium tracking-wider uppercase mb-4"
|
|
||||||
>
|
>
|
||||||
MORE THAN 25 YEARS OF
|
{/* <div className="absolute inset-0 bg-gradient-to-r from-black/70 to-black/50"></div> */}
|
||||||
</motion.p>
|
</div>
|
||||||
<motion.h1
|
|
||||||
variants={fadeInUp}
|
|
||||||
className="text-5xl md:text-7xl font-bold text-white mb-8"
|
|
||||||
>
|
|
||||||
Bringing People <span className="text-pink-400">Together</span>
|
|
||||||
</motion.h1>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Features Grid */}
|
{/* Content */}
|
||||||
<motion.div
|
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2">
|
||||||
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) => (
|
|
||||||
<motion.div
|
<motion.div
|
||||||
key={index}
|
initial="hidden"
|
||||||
variants={scaleIn}
|
animate={isVisible ? "visible" : "hidden"}
|
||||||
whileHover={{ scale: 1.05, y: -5 }}
|
variants={fadeInUp}
|
||||||
className="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300"
|
className="text-center"
|
||||||
>
|
>
|
||||||
<motion.div
|
|
||||||
className={`${feature.color} w-16 h-16 rounded-full flex items-center justify-center mb-6`}
|
{/* <motion.h1
|
||||||
whileHover={{ rotate: 360 }}
|
variants={fadeInUp}
|
||||||
transition={{ duration: 0.6 }}
|
className="text-[18px] md:text-[25px] font-bold mt-4 text-black mb-8"
|
||||||
>
|
>
|
||||||
{feature.icon}
|
Bringing People{" "}
|
||||||
</motion.div>
|
<span className="text-pink-400">Together</span>
|
||||||
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
|
</motion.h1> */}
|
||||||
{feature.title}
|
|
||||||
</h3>
|
|
||||||
<p className="text-gray-600 dark:text-gray-300 leading-relaxed">
|
|
||||||
{feature.description}
|
|
||||||
</p>
|
|
||||||
</motion.div>
|
</motion.div>
|
||||||
))}
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* App Download Section */}
|
{/* Features Grid */}
|
||||||
<section className="relative py-20 bg-gradient-to-br from-pink-50 to-rose-100 dark:from-pink-900/10 dark:to-rose-900/20">
|
<motion.div
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
variants={staggerContainer}
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
initial="hidden"
|
||||||
{/* Left Content */}
|
animate={isVisible ? "visible" : "hidden"}
|
||||||
<motion.div
|
className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-16 max-w-6xl mx-auto"
|
||||||
initial={{ opacity: 0, x: -50 }}
|
>
|
||||||
whileInView={{ opacity: 1, x: 0 }}
|
{features.map((feature, index) => (
|
||||||
viewport={{ once: true }}
|
<div className="relative overflow-hidden bg-white rounded-2xl p-2 shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden">
|
||||||
transition={{ duration: 0.6 }}
|
<BorderBeam
|
||||||
>
|
colorFrom="#ff0000ff"
|
||||||
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4">
|
colorTo="#338105ff"
|
||||||
Download the Jeevansathi app
|
size={90}
|
||||||
</h2>
|
duration={6}
|
||||||
<p className="text-xl text-gray-600 dark:text-gray-300 mb-8">
|
borderThickness={6}
|
||||||
Connect with your matches anytime, anywhere
|
glowIntensity={6}
|
||||||
</p>
|
/>
|
||||||
|
<div className="relative bg-card py-2 px-2 rounded-md z-10">
|
||||||
<div className="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-xl">
|
<motion.div
|
||||||
<p className="text-center text-gray-700 dark:text-gray-300 mb-6 font-medium">
|
key={index}
|
||||||
Point your phone camera at the QR code or use<br />one of the download links below
|
variants={scaleIn}
|
||||||
</p>
|
whileHover={{ scale: 1, y: -5 }}
|
||||||
|
className="flex flex-col items-center text-center "
|
||||||
{/* QR Code */}
|
>
|
||||||
<div className="flex justify-center mb-6">
|
<motion.div
|
||||||
<motion.div
|
className={`w-[80px] h-[80px] flex items-center justify-center mb-6`}
|
||||||
className="bg-white p-4 rounded-xl shadow-lg"
|
whileHover={{ scale: 1.1}}
|
||||||
whileHover={{ scale: 1.05 }}
|
transition={{ duration: 0.6 }}
|
||||||
>
|
>
|
||||||
<div className="w-32 h-32 bg-gray-900 rounded-lg flex items-center justify-center">
|
<LazyImage
|
||||||
<QrCode className="w-24 h-24 text-white" />
|
src={feature.icon}
|
||||||
</div>
|
className="w-full h-full rounded-lg object-cover"
|
||||||
</motion.div>
|
/>
|
||||||
</div>
|
</motion.div>
|
||||||
|
<h3 className="text-[18px] font-semibold text-[#A70710] text-center mb-3">
|
||||||
{/* Download Buttons */}
|
{feature.title}
|
||||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
</h3>
|
||||||
<motion.button
|
<p className="text-gray-600 text-justify leading-relaxed">
|
||||||
whileHover={{ scale: 1.05 }}
|
{feature.description}
|
||||||
whileTap={{ scale: 0.95 }}
|
</p>
|
||||||
className="bg-black text-white px-6 py-3 rounded-lg flex items-center justify-center space-x-2 hover:bg-gray-800 transition-colors"
|
</motion.div>
|
||||||
>
|
|
||||||
<Smartphone className="w-5 h-5" />
|
|
||||||
<div className="text-left">
|
|
||||||
<div className="text-xs">GET IT ON</div>
|
|
||||||
<div className="font-bold">Google Play</div>
|
|
||||||
</div>
|
|
||||||
</motion.button>
|
|
||||||
|
|
||||||
<motion.button
|
|
||||||
whileHover={{ scale: 1.05 }}
|
|
||||||
whileTap={{ scale: 0.95 }}
|
|
||||||
className="bg-black text-white px-6 py-3 rounded-lg flex items-center justify-center space-x-2 hover:bg-gray-800 transition-colors"
|
|
||||||
>
|
|
||||||
<Download className="w-5 h-5" />
|
|
||||||
<div className="text-left">
|
|
||||||
<div className="text-xs">Download on the</div>
|
|
||||||
<div className="font-bold">App Store</div>
|
|
||||||
</div>
|
|
||||||
</motion.button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p className="text-center mt-6">
|
|
||||||
<span className="text-pink-600 dark:text-pink-400 font-medium">
|
|
||||||
Or get a download link
|
|
||||||
</span>
|
|
||||||
<span className="text-gray-600 dark:text-gray-400"> on your SMS/Email</span>
|
|
||||||
</p>
|
|
||||||
</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"
|
|
||||||
>
|
|
||||||
<div className="relative">
|
|
||||||
{/* Phone Frame */}
|
|
||||||
<motion.div
|
|
||||||
className="relative mx-auto w-full max-w-sm"
|
|
||||||
animate={{ y: [0, -10, 0] }}
|
|
||||||
transition={{ duration: 3, repeat: Infinity, ease: "easeInOut" }}
|
|
||||||
>
|
|
||||||
<div className="bg-gray-900 rounded-[3rem] p-4 shadow-2xl">
|
|
||||||
<div className="bg-white dark:bg-gray-800 rounded-[2.5rem] overflow-hidden">
|
|
||||||
{/* Phone Screen Content */}
|
|
||||||
<div className="aspect-[9/19] bg-gradient-to-br from-pink-100 to-purple-100 dark:from-pink-900/20 dark:to-purple-900/20 p-6">
|
|
||||||
<div className="flex items-center justify-between mb-6">
|
|
||||||
<h3 className="font-bold text-gray-900 dark:text-white">My Matches</h3>
|
|
||||||
<div className="flex space-x-2">
|
|
||||||
<div className="w-8 h-8 rounded-full bg-pink-400"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Profile Cards */}
|
|
||||||
<div className="space-y-4">
|
|
||||||
{[1, 2].map((i) => (
|
|
||||||
<motion.div
|
|
||||||
key={i}
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ delay: i * 0.2 }}
|
|
||||||
className="bg-white dark:bg-gray-700 rounded-2xl p-4 shadow-lg"
|
|
||||||
>
|
|
||||||
<div className="flex items-center space-x-3 mb-3">
|
|
||||||
<div className="w-16 h-16 rounded-full bg-gradient-to-br from-pink-400 to-purple-500"></div>
|
|
||||||
<div className="flex-1">
|
|
||||||
<h4 className="font-semibold text-gray-900 dark:text-white">Profile Name</h4>
|
|
||||||
<p className="text-sm text-gray-600 dark:text-gray-400">25 yrs, 5'6"</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex space-x-2">
|
|
||||||
<button className="flex-1 bg-pink-500 text-white py-2 rounded-lg text-sm font-medium">
|
|
||||||
Connect
|
|
||||||
</button>
|
|
||||||
<button className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg">
|
|
||||||
<span className="text-xl">💬</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Features Tags */}
|
|
||||||
<div className="mt-6 space-y-2">
|
|
||||||
<motion.div
|
|
||||||
className="bg-white dark:bg-gray-700 rounded-full px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 inline-block"
|
|
||||||
animate={{ x: [0, 5, 0] }}
|
|
||||||
transition={{ duration: 2, repeat: Infinity }}
|
|
||||||
>
|
|
||||||
✓ Easy Verification
|
|
||||||
</motion.div>
|
|
||||||
<motion.div
|
|
||||||
className="bg-white dark:bg-gray-700 rounded-full px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 inline-block ml-2"
|
|
||||||
animate={{ x: [0, -5, 0] }}
|
|
||||||
transition={{ duration: 2, repeat: Infinity, delay: 0.3 }}
|
|
||||||
>
|
|
||||||
✓ Voice & Video Calls
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</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>
|
</motion.div>
|
||||||
|
|
||||||
{/* Download Badge */}
|
{/* Right - Phone Mockup */}
|
||||||
<motion.div
|
<motion.div
|
||||||
className="absolute -bottom-4 -right-4 bg-white dark:bg-gray-800 rounded-2xl px-6 py-3 shadow-xl"
|
initial={{ opacity: 0, x: 50 }}
|
||||||
initial={{ opacity: 0, scale: 0 }}
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
whileInView={{ opacity: 1, scale: 1 }}
|
|
||||||
viewport={{ once: true }}
|
viewport={{ once: true }}
|
||||||
transition={{ delay: 0.5 }}
|
transition={{ duration: 0.6 }}
|
||||||
|
className="relative"
|
||||||
>
|
>
|
||||||
<p className="text-sm text-gray-600 dark:text-gray-400">10M+ downloads</p>
|
|
||||||
|
<MatrimonySwipeCards/>
|
||||||
|
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Stats Section */}
|
|
||||||
<motion.section
|
|
||||||
className="py-16 bg-white dark:bg-gray-900"
|
|
||||||
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>
|
|
||||||
|
|
||||||
</>
|
</>
|
||||||
)
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
export default AppPromoteSection
|
export default AppPromoteSection;
|
||||||
|
|||||||
191
src/components/landing/AppQRCode.jsx
Normal file
191
src/components/landing/AppQRCode.jsx
Normal file
@ -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 (
|
||||||
|
<>
|
||||||
|
<div className="relative z-9 bg-[#034f08] text-white">
|
||||||
|
<div className="container mx-auto px-4 py-8 lg:py-16">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16 items-center">
|
||||||
|
{/* Left Content Section */}
|
||||||
|
<div className="space-y-6 lg:space-y-8">
|
||||||
|
{/* QR Code */}
|
||||||
|
<div className="w-32 h-32 lg:w-40 lg:h-40 bg-white p-3 rounded-lg">
|
||||||
|
<img
|
||||||
|
src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https://tamilmatrimony.com"
|
||||||
|
alt="QR Code"
|
||||||
|
className="w-full h-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Heading */}
|
||||||
|
<div>
|
||||||
|
<h1 className="text-[25px] font-bold leading-tight mb-2">
|
||||||
|
To speed up your partner<br />search, download
|
||||||
|
</h1>
|
||||||
|
<h2 className="text-[20px] font-bold text-white">
|
||||||
|
Thirukalyanam App
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* App Store Buttons */}
|
||||||
|
<div className="flex flex-wrap gap-4">
|
||||||
|
<a href="#" className="inline-block">
|
||||||
|
<img
|
||||||
|
src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Download_on_the_App_Store_Badge.svg"
|
||||||
|
alt="Download on App Store"
|
||||||
|
className="h-12 lg:h-14"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
<a href="#" className="inline-block">
|
||||||
|
<img
|
||||||
|
src="https://upload.wikimedia.org/wikipedia/commons/7/78/Google_Play_Store_badge_EN.svg"
|
||||||
|
alt="Get it on Google Play"
|
||||||
|
className="h-12 lg:h-14"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* App Info */}
|
||||||
|
<div className="space-y-3 pt-4">
|
||||||
|
<p className="text-lg lg:text-xl font-semibold">
|
||||||
|
Thirukalyanam Matrimony® - Official & Trusted Matrimony App
|
||||||
|
</p>
|
||||||
|
<p className="text-base lg:text-lg text-gray-200">
|
||||||
|
1M+ Downloads
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Rating */}
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<span className="text-4xl lg:text-5xl font-bold">4.2</span>
|
||||||
|
<div className="flex gap-1">
|
||||||
|
{[...Array(4)].map((_, i) => (
|
||||||
|
<Star key={i} className="text-yellow-400" sx={{ fontSize: 32 }} />
|
||||||
|
))}
|
||||||
|
<StarBorder className="text-yellow-400" sx={{ fontSize: 32 }} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm lg:text-base text-gray-300">
|
||||||
|
Based on Customer Reviews
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Mobile Mockup Section */}
|
||||||
|
{/* <div className="flex justify-center lg:justify-end items-center relative">
|
||||||
|
<div className="absolute w-64 h-64 lg:w-96 lg:h-96 bg-purple-700 rounded-full opacity-30 blur-3xl"></div>
|
||||||
|
|
||||||
|
<div className="relative flex items-center justify-center gap-4">
|
||||||
|
<div className="relative z-10 bg-gray-900 rounded-3xl p-3 shadow-2xl w-64 lg:w-80">
|
||||||
|
<div className="bg-white rounded-2xl overflow-hidden">
|
||||||
|
<div className="relative">
|
||||||
|
<img
|
||||||
|
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=500&fit=crop"
|
||||||
|
alt="Profile"
|
||||||
|
className="w-full h-80 object-cover"
|
||||||
|
/>
|
||||||
|
<div className="absolute top-4 right-4 flex flex-col gap-2">
|
||||||
|
<button className="w-10 h-10 bg-white rounded-full shadow-lg flex items-center justify-center text-sm">
|
||||||
|
😊
|
||||||
|
</button>
|
||||||
|
<button className="w-10 h-10 bg-white rounded-full shadow-lg flex items-center justify-center text-sm">
|
||||||
|
👤
|
||||||
|
</button>
|
||||||
|
<button className="w-10 h-10 bg-white rounded-full shadow-lg flex items-center justify-center text-sm">
|
||||||
|
ℹ️
|
||||||
|
</button>
|
||||||
|
<div className="w-10 h-10 bg-white rounded-full shadow-lg overflow-hidden">
|
||||||
|
<img
|
||||||
|
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=50&h=50&fit=crop"
|
||||||
|
alt="Thumb"
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="p-4 bg-white">
|
||||||
|
<h3 className="text-gray-900 font-bold text-lg">Pragati Ram</h3>
|
||||||
|
<p className="text-gray-600 text-sm">27 Yrs, 5 ft 5 in</p>
|
||||||
|
<p className="text-gray-600 text-sm">B.Sc, Computer Science</p>
|
||||||
|
<p className="text-gray-600 text-sm">Administrative Professional</p>
|
||||||
|
<div className="flex gap-2 mt-3">
|
||||||
|
<button className="flex-1 px-4 py-2 border border-orange-500 text-orange-500 rounded-md text-sm">
|
||||||
|
📨 Send Message
|
||||||
|
</button>
|
||||||
|
<button className="flex-1 px-4 py-2 bg-orange-500 text-white rounded-md text-sm">
|
||||||
|
❤️ Send Interest
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="absolute -right-8 lg:-right-12 top-12 bg-gray-900 rounded-3xl p-2.5 shadow-2xl w-48 lg:w-60 opacity-90">
|
||||||
|
<div className="bg-gradient-to-b from-purple-900 to-purple-800 rounded-2xl p-4 text-white">
|
||||||
|
<div className="flex justify-between items-start mb-4">
|
||||||
|
<div>
|
||||||
|
<span className="text-xs bg-white text-purple-900 px-2 py-1 rounded">Regular</span>
|
||||||
|
<span className="text-xs bg-purple-700 px-2 py-1 rounded ml-1">PRIME</span>
|
||||||
|
</div>
|
||||||
|
<button className="text-white">☰</button>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2 mb-4">
|
||||||
|
<div className="w-10 h-10 bg-purple-600 rounded-full"></div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-semibold">Arjun</p>
|
||||||
|
<p className="text-xs">Mahadewan</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mb-4">
|
||||||
|
<p className="text-xs mb-2">All matches (9524)</p>
|
||||||
|
<div className="grid grid-cols-2 gap-2">
|
||||||
|
<div className="bg-purple-700 rounded-lg p-2">
|
||||||
|
<img
|
||||||
|
src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?w=100&h=100&fit=crop"
|
||||||
|
alt="Match 1"
|
||||||
|
className="w-full h-16 object-cover rounded mb-1"
|
||||||
|
/>
|
||||||
|
<p className="text-xs">Priyanka Sani...</p>
|
||||||
|
<p className="text-xs text-gray-300">28 Yrs, 5'7"</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-purple-700 rounded-lg p-2">
|
||||||
|
<img
|
||||||
|
src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop"
|
||||||
|
alt="Match 2"
|
||||||
|
className="w-full h-16 object-cover rounded mb-1"
|
||||||
|
/>
|
||||||
|
<p className="text-xs">Karthika</p>
|
||||||
|
<p className="text-xs text-gray-300">26 Yrs, 5'4"</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-xs mb-2">New matches (524)</p>
|
||||||
|
<div className="grid grid-cols-2 gap-2">
|
||||||
|
<div className="bg-purple-700 rounded-lg h-16"></div>
|
||||||
|
<div className="bg-purple-700 rounded-lg h-16"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div> */}
|
||||||
|
|
||||||
|
<div className=''>
|
||||||
|
|
||||||
|
<LazyImage
|
||||||
|
src={apppromo}
|
||||||
|
className="w-full "
|
||||||
|
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AppQRCode
|
||||||
193
src/components/lightswind/ThreeDScrollTrigger.jsx
Normal file
193
src/components/lightswind/ThreeDScrollTrigger.jsx
Normal file
@ -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 (
|
||||||
|
<ThreeDScrollTriggerContext.Provider value={velocityFactor}>
|
||||||
|
<div className={cn("relative w-full", className)} {...props}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</ThreeDScrollTriggerContext.Provider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Row chooses shared or local velocity
|
||||||
|
export function ThreeDScrollTriggerRow(props) {
|
||||||
|
const sharedVelocityFactor = useContext(ThreeDScrollTriggerContext);
|
||||||
|
if (sharedVelocityFactor) {
|
||||||
|
return (
|
||||||
|
<ThreeDScrollTriggerRowImpl
|
||||||
|
{...props}
|
||||||
|
velocityFactor={sharedVelocityFactor}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return <ThreeDScrollTriggerRowLocal {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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(() => (
|
||||||
|
<div className="inline-flex shrink-0" style={{ contain: "paint" }}>
|
||||||
|
{childrenArray}
|
||||||
|
</div>
|
||||||
|
), [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 (
|
||||||
|
<div
|
||||||
|
ref={containerRef}
|
||||||
|
className={cn("w-full overflow-hidden whitespace-nowrap", className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<motion.div
|
||||||
|
className="inline-flex will-change-transform transform-gpu"
|
||||||
|
style={{ transform: xTransform }}
|
||||||
|
>
|
||||||
|
{Array.from({ length: numCopies }).map((_, i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className={cn("inline-flex shrink-0", i === 0 ? "threed-scroll-trigger-block" : "")}
|
||||||
|
>
|
||||||
|
{BlockContent}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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 (
|
||||||
|
<ThreeDScrollTriggerRowImpl
|
||||||
|
{...props}
|
||||||
|
velocityFactor={localVelocityFactor}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Optionally export default
|
||||||
|
export default ThreeDScrollTriggerRow;
|
||||||
72
src/components/lightswind/border-beam.jsx
Normal file
72
src/components/lightswind/border-beam.jsx
Normal file
@ -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 (
|
||||||
|
<div
|
||||||
|
className="pointer-events-none absolute inset-0 rounded-[inherit]
|
||||||
|
border border-transparent [mask-clip:padding-box,border-box]
|
||||||
|
[mask-composite:intersect] [mask-image:linear-gradient(transparent,transparent),linear-gradient(#000,#000)]"
|
||||||
|
>
|
||||||
|
<motion.div
|
||||||
|
className={(
|
||||||
|
"absolute aspect-square",
|
||||||
|
"bg-gradient-to-l from-[var(--color-from)] via-[var(--color-to)] to-transparent",
|
||||||
|
pauseOnHover && "group-hover:animation-play-state-paused",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
style={{
|
||||||
|
width: size,
|
||||||
|
offsetPath: `rect(0 auto auto 0 round ${beamBorderRadius ?? size}px)`,
|
||||||
|
"--color-from": colorFrom,
|
||||||
|
"--color-to": colorTo,
|
||||||
|
opacity: opacity,
|
||||||
|
boxShadow: glowEffect,
|
||||||
|
borderRadius: beamBorderRadius ? `${beamBorderRadius}px` : undefined,
|
||||||
|
...style,
|
||||||
|
}}
|
||||||
|
initial={{ offsetDistance: `${initialOffset}%` }}
|
||||||
|
animate={{
|
||||||
|
offsetDistance: reverse
|
||||||
|
? [`${100 - initialOffset}%`, `${-initialOffset}%`]
|
||||||
|
: [`${initialOffset}%`, `${100 + initialOffset}%`],
|
||||||
|
}}
|
||||||
|
transition={{
|
||||||
|
repeat: Infinity,
|
||||||
|
ease: "linear",
|
||||||
|
duration: actualDuration,
|
||||||
|
delay: -delay,
|
||||||
|
...transition,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -21,14 +21,14 @@ const ThreeDMarquee = ({ images = [], className = "", cols = 4, onImageClick })
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<section
|
<section
|
||||||
className={`mx-auto block h-[600px] max-sm:h-[400px]
|
className={`mx-auto block h-[680px] max-sm:h-[400px]
|
||||||
overflow-hidden bg-[#034E08] relative ${className} max-w-[1400px] ` }
|
overflow-hidden bg-[#034E08] relative ${className} max-w-[1400px] ` }
|
||||||
|
|
||||||
style={{background: "linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(2, 77, 14, 1) 70%)"}}
|
style={{background: "linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(2, 77, 14, 1) 70%)"}}
|
||||||
>
|
>
|
||||||
<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%)"}} />
|
<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%)"}} />
|
||||||
<div className="absolute top-0 left-0 w-full h-[200px] " style={{background: "linear-gradient(rgba(255, 255, 255, 0.88) 10%, rgba(255, 255, 255, 0) 70% )"}} />
|
<div className="absolute top-0 left-0 w-full h-[200px] " style={{background: "linear-gradient(rgba(255, 255, 255, 0.88) 10%, rgba(255, 255, 255, 0) 70% )"}} />
|
||||||
<div className="text-white rounded-[0px] md:rounded-[10px] p-[20px] absolute md:top-[40%] md:left-[30%] w-full md:max-w-[600px] h-[100%] md:h-[230px] z-9 backdrop-blur-[5px] bg-black/50">
|
<div className="text-white rounded-[0px] md:rounded-[10px] p-[20px] absolute md:top-[40%] md:left-[30%] w-full md:max-w-[600px] h-[100%] md:h-[230px] z-9 backdrop-blur-[5px] bg-[#a70710a8]">
|
||||||
|
|
||||||
<h2 className="text-center text-[45px] font-900 pb-2">Now, chat for free !</h2>
|
<h2 className="text-center text-[45px] font-900 pb-2">Now, chat for free !</h2>
|
||||||
<p className="text-center text-[22px] font-900 pb-4">Finding your perfect match just become easier</p>
|
<p className="text-center text-[22px] font-900 pb-4">Finding your perfect match just become easier</p>
|
||||||
|
|||||||
@ -1,3 +1,3 @@
|
|||||||
@import "tailwindcss";
|
@import "tailwindcss";
|
||||||
|
@plugin "lightswind/plugin";
|
||||||
|
|
||||||
|
|||||||
@ -4,7 +4,7 @@ const LandingLayout = () => {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<LandingHeader/>
|
<LandingHeader/>
|
||||||
<div className="body-container" style={{ marginBottom:'90px' }}>
|
<div className="body-container body-bg " style={{ marginBottom:'90px' }}>
|
||||||
<Outlet />
|
<Outlet />
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
|||||||
@ -12,6 +12,10 @@ import wedding9 from "../assets/images/wedding9.avif";
|
|||||||
import wedding10 from "../assets/images/wedding10.jpg";
|
import wedding10 from "../assets/images/wedding10.jpg";
|
||||||
import wedding11 from "../assets/images/wedding11.jpg";
|
import wedding11 from "../assets/images/wedding11.jpg";
|
||||||
import wedding12 from "../assets/images/wedding12.avif";
|
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 = () => {
|
const HomePage = () => {
|
||||||
@ -63,8 +67,22 @@ const HomePage = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="">
|
<div className="">
|
||||||
|
<div className="relative">
|
||||||
<ThreeDMarquee images={images} cols = {4} />
|
<ThreeDMarquee images={images} cols = {4} />
|
||||||
|
<div
|
||||||
|
className="absolute bottom-0 left-0 w-full h-[100px] z-9"
|
||||||
|
style={{
|
||||||
|
bottom: "0px",
|
||||||
|
background:
|
||||||
|
"linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 40%, rgba(255,255,255,1) 100%)",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<AppPromoteSection/>
|
<AppPromoteSection/>
|
||||||
|
<div className="w-full bg-white py-8 pt-0">
|
||||||
|
<AppQRCode/>
|
||||||
|
<ThreeScrollTrigger/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user