landing done
This commit is contained in:
meena committed
1 parent
9a0ff761f6
commit
c873c7cd56
26 files changed
+2350
-303
No files matched your search
Generated
+840
-4
File diff suppressed because it is too large.
Load diff
+1
-1
@@ -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
@@ -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 */
|
||||||
|
}
|
||||||
@@ -0,0 +1,202 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="714" height="111" viewBox="0 0 714 111">
|
||||||
|
<defs>
|
||||||
|
<path id="how_it_works-a" d="M11.2116788,0 L1.40145985,0 C0.630656934,0 0,0.626470588 0,1.39215686 L0,11.1372549 C0,11.9029412 0.630656934,12.5294118 1.40145985,12.5294118 L11.2116788,12.5294118 C11.9824818,12.5294118 12.6131387,11.9029412 12.6131387,11.1372549 L12.6131387,1.39215686 C12.6131387,0.626470588 11.9824818,0 11.2116788,0 Z M5.40262774,9.25088235 C5.12934307,9.52235294 4.68788321,9.52235294 4.41459854,9.25088235 L1.8989781,6.75196078 C1.76776455,6.62191139 1.69402469,6.44535052 1.69402469,6.26122549 C1.69402469,6.07710046 1.76776455,5.90053959 1.8989781,5.7704902 C2.17226277,5.49901961 2.61372263,5.49901961 2.8870073,5.7704902 L4.90510949,7.77519608 L9.72613139,2.98617647 C9.99941606,2.71470588 10.4408759,2.71470588 10.7141606,2.98617647 C10.9874453,3.25764706 10.9874453,3.69617647 10.7141606,3.96764706 L5.40262774,9.25088235 Z"/>
|
||||||
|
<path id="how_it_works-b" d="M11.2116788,0 L1.40145985,0 C0.630656934,0 0,0.626470588 0,1.39215686 L0,11.1372549 C0,11.9029412 0.630656934,12.5294118 1.40145985,12.5294118 L11.2116788,12.5294118 C11.9824818,12.5294118 12.6131387,11.9029412 12.6131387,11.1372549 L12.6131387,1.39215686 C12.6131387,0.626470588 11.9824818,0 11.2116788,0 Z M5.40262774,9.25088235 C5.12934307,9.52235294 4.68788321,9.52235294 4.41459854,9.25088235 L1.8989781,6.75196078 C1.76776455,6.62191139 1.69402469,6.44535052 1.69402469,6.26122549 C1.69402469,6.07710046 1.76776455,5.90053959 1.8989781,5.7704902 C2.17226277,5.49901961 2.61372263,5.49901961 2.8870073,5.7704902 L4.90510949,7.77519608 L9.72613139,2.98617647 C9.99941606,2.71470588 10.4408759,2.71470588 10.7141606,2.98617647 C10.9874453,3.25764706 10.9874453,3.69617647 10.7141606,3.96764706 L5.40262774,9.25088235 Z"/>
|
||||||
|
<rect id="how_it_works-d" width="137.343" height="38.98" x="0" y="0" rx="19.49"/>
|
||||||
|
<filter id="how_it_works-c" width="124%" height="184.7%" x="-12%" y="-34.6%" filterUnits="objectBoundingBox">
|
||||||
|
<feOffset dy="3" in="SourceAlpha" result="shadowOffsetOuter1"/>
|
||||||
|
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="5"/>
|
||||||
|
<feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0.203921569 0 0 0 0 0.28627451 0 0 0 0 0.368627451 0 0 0 0.271144701 0"/>
|
||||||
|
</filter>
|
||||||
|
<path id="how_it_works-e" d="M10.3764704,1.72941174 C5.60329402,1.72941174 1.72941174,5.60329402 1.72941174,10.3764704 C1.72941174,15.1496468 5.60329402,19.0235291 10.3764704,19.0235291 C15.1496468,19.0235291 19.0235291,15.1496468 19.0235291,10.3764704 C19.0235291,5.60329402 15.1496468,1.72941174 10.3764704,1.72941174 Z M10.3764704,4.32352934 C11.8118822,4.32352934 12.970588,5.4822352 12.970588,6.91764694 C12.970588,8.35305868 11.8118822,9.51176454 10.3764704,9.51176454 C8.94105867,9.51176454 7.78235281,8.35305868 7.78235281,6.91764694 C7.78235281,5.4822352 8.94105867,4.32352934 10.3764704,4.32352934 Z M10.3764704,16.6023527 C8.21470574,16.6023527 6.30370578,15.4955291 5.18823521,13.8179998 C5.21417638,12.0972351 8.64705868,11.1547057 10.3764704,11.1547057 C12.0972351,11.1547057 15.5387644,12.0972351 15.5647056,13.8179998 C14.449235,15.4955291 12.5382351,16.6023527 10.3764704,16.6023527 Z"/>
|
||||||
|
<path id="how_it_works-g" d="M10.3764704,1.72941174 C5.60329402,1.72941174 1.72941174,5.60329402 1.72941174,10.3764704 C1.72941174,15.1496468 5.60329402,19.0235291 10.3764704,19.0235291 C15.1496468,19.0235291 19.0235291,15.1496468 19.0235291,10.3764704 C19.0235291,5.60329402 15.1496468,1.72941174 10.3764704,1.72941174 Z M10.3764704,4.32352934 C11.8118822,4.32352934 12.970588,5.4822352 12.970588,6.91764694 C12.970588,8.35305868 11.8118822,9.51176454 10.3764704,9.51176454 C8.94105867,9.51176454 7.78235281,8.35305868 7.78235281,6.91764694 C7.78235281,5.4822352 8.94105867,4.32352934 10.3764704,4.32352934 Z M10.3764704,16.6023527 C8.21470574,16.6023527 6.30370578,15.4955291 5.18823521,13.8179998 C5.21417638,12.0972351 8.64705868,11.1547057 10.3764704,11.1547057 C12.0972351,11.1547057 15.5387644,12.0972351 15.5647056,13.8179998 C14.449235,15.4955291 12.5382351,16.6023527 10.3764704,16.6023527 Z"/>
|
||||||
|
<rect id="how_it_works-j" width="164.044" height="38.711" x="0" y="0" rx="2.8"/>
|
||||||
|
<filter id="how_it_works-i" width="120.1%" height="185.2%" x="-10.1%" y="-34.9%" filterUnits="objectBoundingBox">
|
||||||
|
<feOffset dy="3" in="SourceAlpha" result="shadowOffsetOuter1"/>
|
||||||
|
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="5"/>
|
||||||
|
<feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0.203921569 0 0 0 0 0.28627451 0 0 0 0 0.368627451 0 0 0 0.271144701 0"/>
|
||||||
|
</filter>
|
||||||
|
<ellipse id="how_it_works-k" cx="13.833" cy="13.819" rx="13.833" ry="13.819"/>
|
||||||
|
<path id="how_it_works-m" d="M6.42697569,12.3202659 C3.02571511,12.3202659 0.268448616,9.56228043 0.268448616,6.16013295 C0.268448616,2.75798546 3.02571511,0 6.42697569,0 C9.82823628,0 12.5855028,2.75798546 12.5855028,6.16013295 C12.5855028,9.56228043 9.82823628,12.3202659 6.42697569,12.3202659 Z M6.16013295,13.4399984 L6.89910267,13.4399984 C10.3012502,13.4399984 13.0592356,16.1979839 13.0592356,19.6001313 C13.0592356,23.0022788 10.3012502,25.7602643 6.89910267,25.7602643 L6.16013295,25.7602643 C2.75798546,25.7602643 4.16642903e-16,23.0022788 0,19.6001313 C-4.16642903e-16,16.1979839 2.75798546,13.4399984 6.16013295,13.4399984 Z"/>
|
||||||
|
<path id="how_it_works-o" d="M9.8,0 L103.718248,3.55271368e-15 C109.130639,2.55847366e-15 113.518248,4.38760945 113.518248,9.8 L113.518248,9.8 C113.518248,15.2123905 109.130639,19.6 103.718248,19.6 L9.8,19.6 C4.38760945,19.6 6.62826676e-16,15.2123905 0,9.8 L0,9.8 C-6.62826676e-16,4.38760945 4.38760945,9.94240014e-16 9.8,0 Z"/>
|
||||||
|
<filter id="how_it_works-n" width="111.5%" height="166.3%" x="-5.7%" y="-28.1%" filterUnits="objectBoundingBox">
|
||||||
|
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
|
||||||
|
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="2"/>
|
||||||
|
<feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
|
||||||
|
<feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0.203921569 0 0 0 0 0.28627451 0 0 0 0 0.368627451 0 0 0 0.120216259 0"/>
|
||||||
|
</filter>
|
||||||
|
<path id="how_it_works-p" d="M7.92791988,7.04174496 L7.46660601,7.04174496 L7.30310236,6.88424496 C8.00383229,6.0675783 8.36587609,4.95341163 8.16733594,3.76924496 C7.89288338,2.1475783 6.53813886,0.852578298 4.90310236,0.654244965 C2.43302937,0.350911631 0.354197253,2.4275783 0.657846889,4.8950783 C0.856387034,6.52841163 2.1527374,7.88174496 3.77609506,8.15591163 C4.96149652,8.35424496 6.07682499,7.9925783 6.89434324,7.2925783 L7.05200747,7.45591163 L7.05200747,7.91674496 L9.5337593,10.3959116 C9.77317536,10.6350783 10.1644162,10.6350783 10.4038323,10.3959116 C10.6432483,10.156745 10.6432483,9.76591163 10.4038323,9.52674496 L7.92791988,7.04174496 Z M4.42427025,7.04174496 C2.97025565,7.04174496 1.79653302,5.86924496 1.79653302,4.41674496 C1.79653302,2.96424496 2.97025565,1.79174496 4.42427025,1.79174496 C5.87828484,1.79174496 7.05200747,2.96424496 7.05200747,4.41674496 C7.05200747,5.86924496 5.87828484,7.04174496 4.42427025,7.04174496 Z"/>
|
||||||
|
<path id="how_it_works-q" d="M10.605683,0.375786396 C4.94993896,0.375786396 0.359769877,5.02699282 0.359769877,10.7579436 C0.359769877,16.4888944 4.94993896,21.1401008 10.605683,21.1401008 C16.2614271,21.1401008 20.8515961,16.4888944 20.8515961,10.7579436 C20.8515961,5.02699282 16.2614271,0.375786396 10.605683,0.375786396 Z M10.605683,3.49043356 C12.3065046,3.49043356 13.679457,4.88164262 13.679457,6.60508072 C13.679457,8.32851881 12.3065046,9.71972788 10.605683,9.71972788 C8.90486143,9.71972788 7.53190907,8.32851881 7.53190907,6.60508072 C7.53190907,4.88164262 8.90486143,3.49043356 10.605683,3.49043356 Z M10.605683,18.2330968 C8.04420473,18.2330968 5.77985792,16.9041807 4.45813513,14.8900422 C4.48887287,12.8239929 8.55650038,11.6923377 10.605683,11.6923377 C12.6446197,11.6923377 16.7224932,12.8239929 16.7532309,14.8900422 C15.4315081,16.9041807 13.1671613,18.2330968 10.605683,18.2330968 Z"/>
|
||||||
|
<path id="how_it_works-r" d="M10.605683,0.375786396 C4.94993896,0.375786396 0.359769877,5.02699282 0.359769877,10.7579436 C0.359769877,16.4888944 4.94993896,21.1401008 10.605683,21.1401008 C16.2614271,21.1401008 20.8515961,16.4888944 20.8515961,10.7579436 C20.8515961,5.02699282 16.2614271,0.375786396 10.605683,0.375786396 Z M10.605683,3.49043356 C12.3065046,3.49043356 13.679457,4.88164262 13.679457,6.60508072 C13.679457,8.32851881 12.3065046,9.71972788 10.605683,9.71972788 C8.90486143,9.71972788 7.53190907,8.32851881 7.53190907,6.60508072 C7.53190907,4.88164262 8.90486143,3.49043356 10.605683,3.49043356 Z M10.605683,18.2330968 C8.04420473,18.2330968 5.77985792,16.9041807 4.45813513,14.8900422 C4.48887287,12.8239929 8.55650038,11.6923377 10.605683,11.6923377 C12.6446197,11.6923377 16.7224932,12.8239929 16.7532309,14.8900422 C15.4315081,16.9041807 13.1671613,18.2330968 10.605683,18.2330968 Z"/>
|
||||||
|
<rect id="how_it_works-t" width="92.4" height="82.942" x="0" y="0" rx="4.2"/>
|
||||||
|
<filter id="how_it_works-s" width="135.7%" height="139.8%" x="-17.9%" y="-16.3%" filterUnits="objectBoundingBox">
|
||||||
|
<feOffset dy="3" in="SourceAlpha" result="shadowOffsetOuter1"/>
|
||||||
|
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="5"/>
|
||||||
|
<feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0.203921569 0 0 0 0 0.28627451 0 0 0 0 0.368627451 0 0 0 0.271144701 0"/>
|
||||||
|
</filter>
|
||||||
|
<ellipse id="how_it_works-u" cx="16.582" cy="16.651" rx="16.582" ry="16.651"/>
|
||||||
|
<path id="how_it_works-w" d="M7.70433711,14.8455378 C3.62707598,14.8455378 0.321802779,11.522251 0.321802779,7.4227689 C0.321802779,3.32328683 3.62707598,0 7.70433711,0 C11.7815982,0 15.0868714,3.32328683 15.0868714,7.4227689 C15.0868714,11.522251 11.7815982,14.8455378 7.70433711,14.8455378 Z M7.4227689,16.1947807 L8.2319898,16.1947807 C12.3314719,16.1947807 15.6547587,19.5180675 15.6547587,23.6175496 C15.6547587,27.7170316 12.3314719,31.0403185 8.2319898,31.0403185 L7.4227689,31.0403185 C3.32328683,31.0403185 5.02041759e-16,27.7170316 0,23.6175496 C-5.02041759e-16,19.5180675 3.32328683,16.1947807 7.4227689,16.1947807 Z"/>
|
||||||
|
<path id="how_it_works-x" d="M9.92727273,0 L1.65454545,0 C0.744545455,0 0,0.773188406 0,1.71819646 L0,15.4637681 L5.79090909,12.8864734 L11.5818182,15.4637681 L11.5818182,1.71819646 C11.5818182,0.773188406 10.8372727,0 9.92727273,0 Z"/>
|
||||||
|
<path id="how_it_works-y" d="M9.33333333,0 L1.55555556,0 C0.7,0 0,0.658967391 0,1.46437198 L0,13.1793478 L5.44444444,10.9827899 L10.8888889,13.1793478 L10.8888889,1.46437198 C10.8888889,0.658967391 10.1888889,0 9.33333333,0 Z"/>
|
||||||
|
<rect id="how_it_works-A" width="22.4" height="22.493" x="0" y="0" rx="11.2"/>
|
||||||
|
<filter id="how_it_works-z" width="198.2%" height="197.8%" x="-49.1%" y="-44.5%" filterUnits="objectBoundingBox">
|
||||||
|
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
|
||||||
|
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="3.5"/>
|
||||||
|
<feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0.203921569 0 0 0 0 0.28627451 0 0 0 0 0.368627451 0 0 0 0.305197011 0"/>
|
||||||
|
</filter>
|
||||||
|
<path id="how_it_works-B" d="M8.70633911,6.91557971 L7.55586854,6.78422677 C7.27957443,6.75252089 7.00780972,6.84763854 6.81304502,7.04240324 L5.97963327,7.87581499 C4.69780976,7.22357971 3.64698625,6.17728561 2.99475097,4.89093269 L3.83269213,4.05299153 C4.02745683,3.85822682 4.12257448,3.58646212 4.0908686,3.31016801 L3.95951566,2.16875626 C3.90516272,1.71128568 3.52016272,1.36705039 3.05816273,1.36705039 L2.27457451,1.36705039 C1.76275099,1.36705039 1.33698629,1.79281509 1.36869217,2.30463861 C1.60875099,6.1727562 4.70233918,9.26181497 8.56592734,9.50187379 C9.07775087,9.53357967 9.50351556,9.10781497 9.50351556,8.59599145 L9.50351556,7.81240323 C9.50804498,7.35493265 9.16380969,6.96993265 8.70633911,6.91557971 Z"/>
|
||||||
|
<path id="how_it_works-E" d="M23.5741935,0 L1.62580645,0 C0.731612903,0 0.00812903226,0.759130435 0.00812903226,1.68695652 L0,16.8695652 L3.2516129,13.4956522 L23.5741935,13.4956522 C24.4683871,13.4956522 25.2,12.7365217 25.2,11.8086957 L25.2,1.68695652 C25.2,0.759130435 24.4683871,0 23.5741935,0 Z"/>
|
||||||
|
<filter id="how_it_works-D" width="195.2%" height="233.5%" x="-47.6%" y="-53.4%" filterUnits="objectBoundingBox">
|
||||||
|
<feMorphology in="SourceAlpha" radius=".5" result="shadowSpreadOuter1"/>
|
||||||
|
<feOffset dy="3" in="shadowSpreadOuter1" result="shadowOffsetOuter1"/>
|
||||||
|
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="4"/>
|
||||||
|
<feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0.149019608 0 0 0 0 0.188235294 0 0 0 0 0.549019608 0 0 0 0.204115716 0"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
<g fill="none" fill-rule="evenodd">
|
||||||
|
<g transform="translate(14 20)">
|
||||||
|
<rect width="103.708" height="6.961" x="19.62" y="1.392" fill="#A3ACBC" rx="3.48"/>
|
||||||
|
<path fill="#DBDEE3" d="M2.79999995 0L8.41167888 0C9.95807615-2.84068571e-16 11.2116788 1.25360268 11.2116788 2.79999995L11.2116788 8.33725495C11.2116788 9.88365222 9.95807615 11.1372549 8.41167888 11.1372549L2.79999995 11.1372549C1.25360268 11.1372549 6.33468257e-16 9.88365222 4.4408921e-16 8.33725495L4.4408921e-16 2.79999995C2.54710163e-16 1.25360268 1.25360268 2.84068571e-16 2.79999995 0zM23.1008301 2.78431373L72.19844 2.78431373C74.1206075 2.78431373 75.6788321 4.34253837 75.6788321 6.26470588L75.6788321 6.26470588C75.6788321 8.18687339 74.1206075 9.74509804 72.19844 9.74509804L23.1008301 9.74509804C21.1786626 9.74509804 19.620438 8.18687339 19.620438 6.26470588L19.620438 6.26470588C19.620438 4.34253837 21.1786626 2.78431373 23.1008301 2.78431373z" transform="translate(0 19.49)"/>
|
||||||
|
<g fill="#DBDEE3" transform="translate(0 59.863)">
|
||||||
|
<path d="M2.79999995,0 L8.41167888,0 C9.95807615,-2.84068571e-16 11.2116788,1.25360268 11.2116788,2.79999995 L11.2116788,8.33725495 C11.2116788,9.88365222 9.95807615,11.1372549 8.41167888,11.1372549 L2.79999995,11.1372549 C1.25360268,11.1372549 1.89379047e-16,9.88365222 0,8.33725495 L0,2.79999995 C-1.89379047e-16,1.25360268 1.25360268,2.84068571e-16 2.79999995,0 Z"/>
|
||||||
|
<rect width="92.496" height="6.961" x="19.62" y="2.784" rx="3.48"/>
|
||||||
|
</g>
|
||||||
|
<path fill="#A3ACBC" d="M23.1008301,40.372549 L86.2130385,40.372549 C88.135206,40.372549 89.6934307,41.9307737 89.6934307,43.8529412 L89.6934307,43.8529412 C89.6934307,45.7751087 88.135206,47.3333333 86.2130385,47.3333333 L23.1008301,47.3333333 C21.1786626,47.3333333 19.620438,45.7751087 19.620438,43.8529412 L19.620438,43.8529412 C19.620438,41.9307737 21.1786626,40.372549 23.1008301,40.372549 Z"/>
|
||||||
|
<use fill="#D9475C" fill-rule="nonzero" xlink:href="#how_it_works-a"/>
|
||||||
|
<use fill="#D9475C" fill-rule="nonzero" transform="translate(0 37.588)" xlink:href="#how_it_works-b"/>
|
||||||
|
<g transform="translate(54.657 16.706)">
|
||||||
|
<use fill="#000" filter="url(#how_it_works-c)" xlink:href="#how_it_works-d"/>
|
||||||
|
<use fill="#FFF" xlink:href="#how_it_works-d"/>
|
||||||
|
<g transform="translate(21.022 23.667)">
|
||||||
|
<path fill="#DBDEE3" d="M1.04411765,1.04411765 L91.8129145,1.04411765 C92.3895648,1.04411765 92.8570322,1.51158504 92.8570322,2.08823529 L92.8570322,2.08823529 C92.8570322,2.66488555 92.3895648,3.13235294 91.8129145,3.13235294 L1.04411765,3.13235294 C0.467467394,3.13235294 7.06192887e-17,2.66488555 0,2.08823529 L0,2.08823529 C-7.06192887e-17,1.51158504 0.467467394,1.04411765 1.04411765,1.04411765 Z"/>
|
||||||
|
<path fill="#0E68C2" d="M22.1570193,1.04411765 L60.1832973,1.04411765 C60.7599475,1.04411765 61.2274149,1.51158504 61.2274149,2.08823529 L61.2274149,2.08823529 C61.2274149,2.66488555 60.7599475,3.13235294 60.1832973,3.13235294 L22.1570193,3.13235294 C21.5803691,3.13235294 21.1129017,2.66488555 21.1129017,2.08823529 L21.1129017,2.08823529 C21.1129017,1.51158504 21.5803691,1.04411765 22.1570193,1.04411765 Z"/>
|
||||||
|
<ellipse cx="21.113" cy="2.088" fill="#FFF" stroke="#0E68C2" stroke-width="1.4" rx="2.111" ry="2.088"/>
|
||||||
|
<ellipse cx="62.283" cy="2.088" fill="#FFF" stroke="#0E68C2" stroke-width="1.4" rx="2.111" ry="2.088"/>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(21.022 11.137)">
|
||||||
|
<path fill="#DBDEE3" d="M1.04411765,1.04411765 L91.8129145,1.04411765 C92.3895648,1.04411765 92.8570322,1.51158504 92.8570322,2.08823529 L92.8570322,2.08823529 C92.8570322,2.66488555 92.3895648,3.13235294 91.8129145,3.13235294 L1.04411765,3.13235294 C0.467467394,3.13235294 7.06192887e-17,2.66488555 0,2.08823529 L0,2.08823529 C-7.06192887e-17,1.51158504 0.467467394,1.04411765 1.04411765,1.04411765 Z"/>
|
||||||
|
<rect width="29.558" height="2.088" x="2.111" y="1.044" fill="#0E68C2" rx="1.044"/>
|
||||||
|
<ellipse cx="2.111" cy="2.088" fill="#FFF" stroke="#0E68C2" stroke-width="1.4" rx="2.111" ry="2.088"/>
|
||||||
|
<ellipse cx="31.669" cy="2.088" fill="#FFF" stroke="#0E68C2" stroke-width="1.4" rx="2.111" ry="2.088"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(233 10)">
|
||||||
|
<g transform="translate(0 4.2)">
|
||||||
|
<g transform="translate(18.227 63.655)">
|
||||||
|
<g opacity=".247">
|
||||||
|
<mask id="how_it_works-f" fill="#fff">
|
||||||
|
<use xlink:href="#how_it_works-e"/>
|
||||||
|
</mask>
|
||||||
|
<g fill="#5E6C84" mask="url(#how_it_works-f)">
|
||||||
|
<rect width="21.06" height="21.06"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<path fill="#D8DBE1" d="M2.71777047 0L64.0084546-4.88498131e-15C65.5094378-5.16070745e-15 66.7262251 1.21678729 66.7262251 2.71777047L66.7262251 2.71777047C66.7262251 4.21875366 65.5094378 5.43554094 64.0084546 5.43554094L2.71777047 5.43554094C1.21678729 5.43554094 1.83817425e-16 4.21875366 0 2.71777047L0 2.71777047C-1.83817425e-16 1.21678729 1.21678729-1.68363072e-16 2.71777047-4.4408921e-16zM1.5530117 7.76505849L47.2467648 7.76505849C48.1044695 7.76505849 48.7997765 8.46036551 48.7997765 9.31807019L48.7997765 9.31807019C48.7997765 10.1757749 48.1044695 10.8710819 47.2467648 10.8710819L1.5530117 10.8710819C.695307021 10.8710819 1.05038529e-16 10.1757749 0 9.31807019L0 9.31807019C-1.05038529e-16 8.46036551.695307021 7.76505849 1.5530117 7.76505849z" transform="translate(29.44 5.125)"/>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(18.227 .059)">
|
||||||
|
<g opacity=".247">
|
||||||
|
<mask id="how_it_works-h" fill="#fff">
|
||||||
|
<use xlink:href="#how_it_works-g"/>
|
||||||
|
</mask>
|
||||||
|
<g fill="#5E6C84" mask="url(#how_it_works-h)">
|
||||||
|
<rect width="21.06" height="21.06"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<path fill="#D8DBE1" d="M2.71777047 0L64.0084546-1.33226763e-15C65.5094378-1.60799377e-15 66.7262251 1.21678729 66.7262251 2.71777047L66.7262251 2.71777047C66.7262251 4.21875366 65.5094378 5.43554094 64.0084546 5.43554094L2.71777047 5.43554094C1.21678729 5.43554094 1.83817425e-16 4.21875366 0 2.71777047L0 2.71777047C-1.83817425e-16 1.21678729 1.21678729 7.19815348e-16 2.71777047 4.4408921e-16zM1.5530117 7.76505849L47.2467648 7.76505849C48.1044695 7.76505849 48.7997765 8.46036551 48.7997765 9.31807019L48.7997765 9.31807019C48.7997765 10.1757749 48.1044695 10.8710819 47.2467648 10.8710819L1.5530117 10.8710819C.695307021 10.8710819 1.05038529e-16 10.1757749 0 9.31807019L0 9.31807019C-1.05038529e-16 8.46036551.695307021 7.76505849 1.5530117 7.76505849z" transform="translate(29.44 5.125)"/>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(0 21.257)">
|
||||||
|
<use fill="#000" filter="url(#how_it_works-i)" xlink:href="#how_it_works-j"/>
|
||||||
|
<use fill="#FFF" xlink:href="#how_it_works-j"/>
|
||||||
|
<g transform="translate(8.409 5.6)">
|
||||||
|
<mask id="how_it_works-l" fill="#fff">
|
||||||
|
<use xlink:href="#how_it_works-k"/>
|
||||||
|
</mask>
|
||||||
|
<use fill="#EEF3F9" xlink:href="#how_it_works-k"/>
|
||||||
|
<g mask="url(#how_it_works-l)">
|
||||||
|
<use fill="#FFF" stroke="#14202B" stroke-linecap="round" stroke-linejoin="round" stroke-width=".84" transform="translate(7.39 6.815)" xlink:href="#how_it_works-m"/>
|
||||||
|
</g>
|
||||||
|
<ellipse cx="14.582" cy="12.891" fill="#F5CAD0" mask="url(#how_it_works-l)" rx="5.596" ry="5.598" style="mix-blend-mode:multiply"/>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(45.477 12.947)">
|
||||||
|
<rect width="78.286" height="6.363" fill="#A3ACBC" rx="3.181"/>
|
||||||
|
<path fill="#CCD3E1" d="M1.81790667,9.08953335 L55.4360336,9.08953335 C56.4400357,9.08953335 57.2539402,9.90343789 57.2539402,10.90744 L57.2539402,10.90744 C57.2539402,11.9114421 56.4400357,12.7253467 55.4360336,12.7253467 L1.81790667,12.7253467 C0.813904539,12.7253467 1.229548e-16,11.9114421 0,10.90744 L0,10.90744 C-1.229548e-16,9.90343789 0.813904539,9.08953335 1.81790667,9.08953335 Z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(78.482)">
|
||||||
|
<use fill="#000" filter="url(#how_it_works-n)" xlink:href="#how_it_works-o"/>
|
||||||
|
<path fill="#FFF" stroke="#EBEDF2" stroke-linejoin="square" stroke-width=".7" d="M9.8,0.349999994 C4.58090911,0.349999994 0.349999994,4.58090911 0.349999994,9.8 C0.349999994,15.0190909 4.58090911,19.25 9.8,19.25 L103.718248,19.25 C108.937339,19.25 113.168248,15.0190909 113.168248,9.8 C113.168248,4.58090911 108.937339,0.349999994 103.718248,0.349999994 L9.8,0.349999994 Z"/>
|
||||||
|
<use fill="#0E68C2" fill-rule="nonzero" transform="translate(89.693 4.2)" xlink:href="#how_it_works-p"/>
|
||||||
|
<path fill="#A3ACBC" d="M16.2291765,12.9185384 C15.8923492,12.8475629 15.6213125,12.7647594 15.4160584,12.6701254 L15.518685,11.8736266 C15.7818313,11.9998053 16.0791822,12.1102099 16.4107466,12.2048439 C16.7423109,12.2994779 17.0712389,12.3467942 17.3975404,12.3467942 C17.7659452,12.3467942 18.0514547,12.2797628 18.2540774,12.145698 C18.4567001,12.0116331 18.5580099,11.8105389 18.5580099,11.5424092 C18.5580099,11.3426264 18.5066971,11.175705 18.40407,11.0416402 C18.301443,10.9075753 18.1514518,10.794542 17.9540921,10.7025367 C17.7567323,10.6105314 17.4817485,10.5119558 17.1291324,10.4068069 C16.7712534,10.301658 16.4739025,10.1886247 16.2370708,10.0677035 C16.0002391,9.94678225 15.8094609,9.78117523 15.6647304,9.57087746 C15.52,9.36057968 15.4476358,9.09508272 15.4476358,8.77437861 C15.4476358,8.32749584 15.6199941,7.9673663 15.9647158,7.69397919 C16.3094374,7.42059208 16.7949351,7.28390058 17.4212234,7.28390058 C17.7580507,7.28390058 18.0777687,7.32070214 18.380387,7.39430636 C18.6830053,7.46791058 18.9474634,7.55728579 19.1737692,7.66243468 L19.0948257,8.45893353 C18.8001018,8.28543786 18.515908,8.15926109 18.2422359,8.08039942 C17.9685637,8.00153776 17.6843699,7.96210751 17.389646,7.96210751 C17.0475558,7.96210751 16.7752034,8.0251959 16.5725807,8.15137457 C16.3699581,8.27755323 16.2686482,8.47207576 16.2686482,8.73494798 C16.2686482,8.91370109 16.3146982,9.06090732 16.4067994,9.1765711 C16.4989006,9.29223488 16.6317875,9.39081048 16.8054641,9.47230087 C16.9791407,9.55379126 17.2212316,9.64185213 17.5317443,9.73648613 C18.1527697,9.92575413 18.6159003,10.1505065 18.92115,10.41075 C19.2263997,10.6709935 19.3790223,11.0298087 19.3790223,11.4872064 C19.3790223,11.9708912 19.1974541,12.3481072 18.8343121,12.6188656 C18.4711702,12.889624 17.9343597,13.0250012 17.2238646,13.0250012 C16.8975632,13.0250012 16.5660038,12.9895139 16.2291765,12.9185384 Z M20.8276356,12.7213853 C20.5144915,12.5400034 20.2763476,12.2942216 20.1131969,11.9840324 C19.9500462,11.6738432 19.868472,11.3294857 19.868472,10.9509497 C19.868472,10.588186 19.9434676,10.2556577 20.093461,9.95335462 C20.2434544,9.65105157 20.4618626,9.41184144 20.7486921,9.23571705 C21.0355216,9.05959266 21.3736596,8.97153179 21.7631162,8.97153179 C22.2578313,8.97153179 22.6591234,9.11610934 22.9670046,9.40526879 C23.2748858,9.69442823 23.4288241,10.093988 23.4288241,10.6039601 C23.4288241,10.7353962 23.4182984,10.861573 23.3972467,10.9824942 L20.5947523,10.9824942 C20.6421186,11.4819514 20.7947412,11.8368236 21.0526246,12.0471214 C21.310508,12.2574192 21.6420674,12.3625665 22.0473128,12.3625665 C22.4525581,12.3625665 22.8235889,12.2863347 23.1604162,12.1338688 L23.2551484,12.6937838 C22.8077996,12.8935667 22.3762461,12.9934566 21.9604749,12.9934566 C21.5183891,12.9934566 21.1407798,12.9027671 20.8276356,12.7213853 Z M22.6946495,10.4935543 C22.6946495,10.2149098 22.6157068,9.99672911 22.457819,9.83900578 C22.2999312,9.68128245 22.0631031,9.60242197 21.7473275,9.60242197 C21.4420777,9.60242197 21.2026181,9.67733942 21.0289416,9.82717659 C20.855265,9.97701375 20.7315881,10.1991374 20.6579071,10.4935543 L22.6946495,10.4935543 Z M24.1827346,12.6780116 C23.9643231,12.4677138 23.855119,12.1995881 23.855119,11.8736266 C23.855119,11.3846843 24.0866843,11.0350695 24.5498219,10.8247717 C25.0129594,10.6144739 25.5524013,10.5040692 26.1681637,10.4935543 C26.1681637,10.146563 26.1010624,9.9112959 25.9668578,9.78774595 C25.8326531,9.66419601 25.6181921,9.60242197 25.3234682,9.60242197 C25.1603175,9.60242197 24.9971692,9.62739445 24.8340185,9.67734017 C24.6708678,9.7272859 24.4945624,9.81797545 24.305097,9.94941156 L24.2024704,9.37372428 C24.3603582,9.25280306 24.5550836,9.15554179 24.7866524,9.08193757 C25.0182211,9.00833335 25.2603121,8.97153179 25.5129326,8.97153179 C25.844497,8.97153179 26.1089551,9.02936281 26.3063148,9.14502659 C26.5036746,9.26069037 26.6484029,9.45258421 26.7405041,9.72071387 C26.8326053,9.98884354 26.8786552,10.3568591 26.8786552,10.8247717 L26.8786552,11.6133844 C26.8786552,11.8236822 26.8878652,11.9827175 26.9062855,12.0904951 C26.9247057,12.1982727 26.9654928,12.2810762 27.0286479,12.3389081 C27.091803,12.39674 27.1891657,12.4256555 27.3207389,12.4256555 L27.391788,12.4256555 L27.2812671,12.9934566 L27.2260067,12.9934566 C27.0049637,12.9934566 26.8312898,12.9724272 26.7049795,12.9303676 C26.5786693,12.8883081 26.4826223,12.8278484 26.4168357,12.7489867 C26.3510492,12.670125 26.2892107,12.562349 26.2313185,12.4256555 C25.9050171,12.8041915 25.5103035,12.9934566 25.0471659,12.9934566 C24.6892869,12.9934566 24.401146,12.8883093 24.1827346,12.6780116 Z M25.7300273,12.2837052 C25.9063353,12.1890712 26.0523793,12.0628944 26.1681637,11.9051711 L26.1681637,10.9824942 C25.5997676,11.003524 25.1932126,11.0784415 24.9484866,11.2072488 C24.7037605,11.3360562 24.5813993,11.5450365 24.5813993,11.834196 C24.5813993,12.0339788 24.6353435,12.1824994 24.7432335,12.2797621 C24.8511234,12.3770249 24.9971675,12.4256555 25.1813699,12.4256555 C25.3708353,12.4256Line truncated
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(449 7)">
|
||||||
|
<g transform="rotate(-10 145.512 7.1)">
|
||||||
|
<rect width="80.5" height="61.155" x=".35" y=".35" fill="#FFF" stroke="#CCD3E1" stroke-opacity=".833" stroke-width=".7" rx="2.8"/>
|
||||||
|
<g transform="translate(14 11.246)">
|
||||||
|
<use fill="#D8DBE1" fill-rule="nonzero" transform="translate(15.4)" xlink:href="#how_it_works-q"/>
|
||||||
|
<g opacity=".416" transform="translate(0 28.116)">
|
||||||
|
<rect width="53.2" height="4.217" fill="#A3ACBC" rx="2.109"/>
|
||||||
|
<rect width="37.8" height="4.217" x="7" y="7.029" fill="#CCD3E1" rx="2.109"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g transform="scale(-1 1) rotate(-10 46.68 1136.75)">
|
||||||
|
<rect width="80.5" height="61.155" x=".35" y=".35" fill="#FFF" stroke="#CCD3E1" stroke-opacity=".833" stroke-width=".7" rx="2.8"/>
|
||||||
|
<g transform="translate(14 11.246)">
|
||||||
|
<use fill="#D8DBE1" fill-rule="nonzero" transform="translate(15.4)" xlink:href="#how_it_works-r"/>
|
||||||
|
<g opacity=".416" transform="translate(0 28.116)">
|
||||||
|
<rect width="53.2" height="4.217" fill="#A3ACBC" rx="2.109"/>
|
||||||
|
<rect width="37.8" height="4.217" x="7" y="7.029" fill="#CCD3E1" rx="2.109"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(52.8 7.029)">
|
||||||
|
<use fill="#000" filter="url(#how_it_works-s)" xlink:href="#how_it_works-t"/>
|
||||||
|
<use fill="#FFF" xlink:href="#how_it_works-t"/>
|
||||||
|
<g transform="translate(29.4 11.246)">
|
||||||
|
<mask id="how_it_works-v" fill="#fff">
|
||||||
|
<use xlink:href="#how_it_works-u"/>
|
||||||
|
</mask>
|
||||||
|
<use fill="#EEF3F9" xlink:href="#how_it_works-u"/>
|
||||||
|
<g mask="url(#how_it_works-v)">
|
||||||
|
<use fill="#FFF" stroke="#14202B" stroke-linecap="round" stroke-linejoin="round" stroke-width=".98" transform="translate(8.859 8.211)" xlink:href="#how_it_works-w"/>
|
||||||
|
</g>
|
||||||
|
<ellipse cx="17.48" cy="15.533" fill="#F5CAD0" mask="url(#how_it_works-v)" rx="6.709" ry="6.745" style="mix-blend-mode:multiply"/>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(19.6 50.609)">
|
||||||
|
<rect width="53.2" height="4.217" fill="#A3ACBC" rx="2.109"/>
|
||||||
|
<rect width="37.8" height="4.217" x="7" y="7.029" fill="#CCD3E1" rx="2.109"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(62.6 2.812)">
|
||||||
|
<use fill="#D8DBE1" fill-rule="nonzero" transform="translate(1.4)" xlink:href="#how_it_works-x"/>
|
||||||
|
<use fill="#0E68C2" fill-rule="nonzero" xlink:href="#how_it_works-y"/>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(41.6 74.507)">
|
||||||
|
<use fill="#000" filter="url(#how_it_works-z)" xlink:href="#how_it_works-A"/>
|
||||||
|
<use fill="#D9475C" xlink:href="#how_it_works-A"/>
|
||||||
|
<g transform="translate(5.6 5.623)">
|
||||||
|
<mask id="how_it_works-C" fill="#fff">
|
||||||
|
<use xlink:href="#how_it_works-B"/>
|
||||||
|
</mask>
|
||||||
|
<g fill="#FFF" mask="url(#how_it_works-C)">
|
||||||
|
<rect width="11.031" height="11.031"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(129.8)">
|
||||||
|
<g fill-rule="nonzero">
|
||||||
|
<use fill="#000" filter="url(#how_it_works-D)" xlink:href="#how_it_works-E"/>
|
||||||
|
<use fill="#FFF" xlink:href="#how_it_works-E"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#FFF" fill-opacity=".576" transform="translate(8.4 5.623)">
|
||||||
|
<ellipse cx="1.279" cy="1.289" rx="1.279" ry="1.289"/>
|
||||||
|
<ellipse cx="4.69" cy="1.289" rx="1.279" ry="1.289"/>
|
||||||
|
<ellipse cx="8.101" cy="1.289" rx="1.279" ry="1.289"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 151 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 182 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
@@ -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 |
@@ -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 |
@@ -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 |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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 */}
|
||||||
|
|||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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);
|
||||||
@@ -16,8 +28,8 @@ const AppPromoteSection = () => {
|
|||||||
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,9 +37,9 @@ const AppPromoteSection = () => {
|
|||||||
visible: {
|
visible: {
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
transition: {
|
transition: {
|
||||||
staggerChildren: 0.2
|
staggerChildren: 0.2,
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
const scaleIn = {
|
const scaleIn = {
|
||||||
@@ -35,307 +47,238 @@ const AppPromoteSection = () => {
|
|||||||
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">
|
|
||||||
{/* Hero Section */}
|
|
||||||
<section className="relative min-h-screen flex items-center justify-center overflow-hidden">
|
|
||||||
{/* Background Image with Overlay */}
|
|
||||||
<div
|
<div
|
||||||
className="absolute inset-0 z-0"
|
className="-mt-[20px] md:mt-[0px]
|
||||||
style={{
|
rounded-[20px] overflow-hidden bg-white " style={{boxShadow:"0 2px 6px 0 rgba(142, 142, 142, .2)"}}
|
||||||
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;
|
||||||
@@ -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
|
||||||
@@ -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;
|
||||||
@@ -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
-1
@@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in new issue
Block a user