Skip to content

Commit 8b275a3

Browse files
Ase020Ase020
committed
Merge remote-tracking branch 'origin/main' into feat/seo-add-suspense
merge main
2 parents b379710 + c982e22 commit 8b275a3

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+152
-373
lines changed

‎package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@
4646
"yup": "^1.3.2"
4747
},
4848
"devDependencies": {
49+
"@types/node": "^20.14.1",
4950
"@types/react": "^18.0.28",
5051
"@types/react-dom": "^18.0.11",
5152
"@vitejs/plugin-react": "^4.0.0",
@@ -58,10 +59,11 @@
5859
"eslint-plugin-react": "^7.32.2",
5960
"eslint-plugin-react-hooks": "^4.6.0",
6061
"husky": "^8.0.0",
61-
"knip": "^4.3.1",
62+
"knip": "^4.6.0",
6263
"postcss": "^8.4.23",
6364
"prettier": "^2.8.8",
6465
"tailwindcss": "^3.3.2",
66+
"typescript": "^5.4.5",
6567
"vite": "^5.0.0"
6668
},
6769
"lint-staged": {

‎pnpm-lock.yaml

Lines changed: 19 additions & 13 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/APP/pages/landingPage/sections/HeroSection.jsx

Lines changed: 93 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState } from "react";
1+
import React, { useState, useEffect, useRef } from "react";
22
import JoinSYTModal from "../../community/sections/JoinSYTModal";
33

44
function HeroSection() {
@@ -11,6 +11,30 @@ function HeroSection() {
1111
function openModal() {
1212
setIsOpen(true);
1313
}
14+
15+
{/* Hero Image Animation*/}
16+
17+
const containerRef = useRef(null);
18+
19+
useEffect(() => {
20+
const ellipses = containerRef.current.querySelectorAll(".ellipse");
21+
22+
ellipses.forEach((ellipse) => {
23+
ellipse.style.transitionDuration = `${Math.random() * 12 + 8}s`;
24+
25+
const animate = () => {
26+
ellipse.style.transform = `translate(${Math.random() * 100 - 50}%, ${
27+
Math.random() * 100 - 50
28+
}%) rotate(${Math.random() * 0}deg)`;
29+
setTimeout(() => {
30+
requestAnimationFrame(animate);
31+
}, 7000);
32+
};
33+
34+
animate();
35+
});
36+
}, []);
37+
1438
return (
1539
<section className="py-16 flex items-center justify-center flex-col md:gap-10 max-w-1440 mx-auto">
1640
{/* Hero section Description */}
@@ -36,104 +60,79 @@ function HeroSection() {
3660
</button>
3761
</div>
3862

39-
<div className="hidden lg:flex flex-col items-center min-w-[1440px] min-h-[600px] rounded-[70%] relative my-6">
40-
<div className="relative creative-shapes my-10">
41-
<div className="ellipse115 rounded-full" />
42-
<div className="ellipse116 rounded-full" />
43-
<div className="ellipse117 rounded-full" />
44-
<div className="ellipse118 rounded-full" />
45-
<div className="ellipse132 rounded-full" />
46-
<div className="ellipse119 rounded-full" />
47-
<div className="ellipse133 rounded-full" />
48-
<div className="ellipse134 rounded-full" />
49-
<div className="ellipse172 rounded-full" />
50-
<div className="ellipse173 rounded-full" />
51-
<div className="ellipse174 rounded-full" />
52-
<div className="ellipse175 rounded-full" />
53-
<div className="ellipse176 rounded-full" />
54-
<div className="ellipse135 rounded-full" />
55-
<div className="ellipse136 rounded-full" />
56-
<div className="ellipse120 rounded-full" />
57-
<div className="ellipse124 rounded-full" />
58-
<div className="ellipse125 rounded-full" />
59-
<div className="ellipse126 rounded-full" />
60-
<div className="ellipse121 rounded-full" />
61-
<div className="ellipse127 rounded-full" />
62-
<div className="ellipse128 rounded-full" />
63-
<div className="ellipse129 rounded-full" />
64-
<div className="ellipse130 rounded-full" />
65-
<div className="ellipse1311 rounded-full" />
66-
<div className="ellipse122 rounded-full" />
67-
<div className="ellipse123 rounded-full" />
68-
<div className="ellipse137 rounded-full" />
69-
<div className="ellipse138 rounded-full" />
70-
<div className="ellipse139 rounded-full" />
71-
<div className="ellipse140 rounded-full" />
72-
<div className="ellipse141 rounded-full" />
73-
<div className="ellipse142 rounded-full" />
74-
<div className="ellipse143 rounded-full" />
75-
<div className="ellipse144 rounded-full" />
76-
<div className="ellipse145 rounded-full" />
77-
<div className="ellipse177 rounded-full" />
78-
<div className="ellipse178 rounded-full" />
79-
<div className="ellipse146 rounded-full" />
80-
<div className="ellipse156 rounded-full" />
81-
<div className="ellipse157 rounded-full" />
82-
<div className="ellipse179 rounded-full" />
83-
<div className="ellipse158 rounded-full" />
84-
<div className="ellipse164 rounded-full" />
85-
<div className="ellipse165 rounded-full" />
86-
<div className="ellipse167 rounded-full" />
87-
<div className="ellipse168 rounded-full" />
88-
<div className="ellipse169 rounded-full" />
89-
<div className="ellipse170 rounded-full" />
90-
<div className="ellipse171 rounded-full" />
91-
<div className="ellipse166 rounded-full" />
92-
<div className="ellipse147 rounded-full" />
93-
<div className="ellipse148 rounded-full" />
94-
<div className="ellipse151 rounded-full" />
95-
<div className="ellipse149 rounded-full" />
96-
<div className="ellipse152 rounded-full" />
97-
<div className="ellipse153 rounded-full" />
98-
<div className="ellipse159 rounded-full" />
99-
<div className="ellipse160 rounded-full" />
100-
<div className="ellipse161 rounded-full" />
101-
<div className="ellipse162 rounded-full" />
102-
<div className="ellipse163 rounded-full" />
103-
<div className="ellipse154 rounded-full" />
104-
<div className="ellipse155 rounded-full" />
105-
<div className="ellipse150 rounded-full" />
106-
<div className="ellipse147 rounded-full" />
107-
<div className="ellipse1411 rounded-full" />
108-
<div className="ellipse128 rounded-full" />
109-
<div className="ellipse142 rounded-full" />
110-
<div className="ellipse175 rounded-full" />
111-
<div className="ellipse146 rounded-full" />
112-
<div className="ellipse159 rounded-full" />
113-
<div className="ellipse167 rounded-full" />
114-
<div className="ellipse160 rounded-full" />
115-
<div className="ellipse118 rounded-full" />
116-
<div className="ellipse138 rounded-full" />
117-
<div className="ellipse141 rounded-full" />
118-
<div className="ellipse157 rounded-full" />
119-
<div className="ellipse132 rounded-full" />
120-
<div className="ellipse131 rounded-full" />
121-
<div className="ellipse136 rounded-full" />
122-
<div className="ellipse124 rounded-full" />
123-
<div className="ellipse164 rounded-full" />
124-
<div className="ellipse165 rounded-full" />
125-
<div className="ellipse148 rounded-full" />
126-
<div className="ellipse152 rounded-full" />
127-
<div className="ellipse153 rounded-full" />
128-
<div className="ellipse155 rounded-full" />
129-
<div className="ellipse127 rounded-full" />
130-
<div className="ellipse117 rounded-full" />
63+
<div className="hidden md:block lg:flex flex-col items-center min-w-[1440px] min-h-[600px] rounded-[70%] relative my-6">
64+
<div className="relative creative-shapes my-10" ref={containerRef}>
65+
<div className="ellipse ellipse115 rounded-full" />
66+
<div className="ellipse ellipse116 rounded-full" />
67+
<div className="ellipse ellipse117 rounded-full" />
68+
<div className="ellipse ellipse118 rounded-full" />
69+
<div className="ellipse ellipse132 rounded-full" />
70+
<div className="ellipse ellipse119 rounded-full" />
71+
<div className="ellipse ellipse133 rounded-full" />
72+
<div className="ellipse ellipse134 rounded-full" />
73+
<div className="ellipse ellipse172 rounded-full" />
74+
<div className="ellipse ellipse173 rounded-full" />
75+
<div className="ellipse ellipse174 rounded-full" />
76+
<div className="ellipse ellipse175 rounded-full" />
77+
<div className="ellipse ellipse176 rounded-full" />
78+
<div className="ellipse ellipse135 rounded-full" />
79+
<div className="ellipse ellipse136 rounded-full" />
80+
<div className="ellipse ellipse120 rounded-full" />
81+
<div className="ellipse ellipse124 rounded-full" />
82+
<div className="ellipse ellipse125 rounded-full" />
83+
<div className="ellipse ellipse126 rounded-full" />
84+
<div className="ellipse ellipse121 rounded-full" />
85+
<div className="ellipse ellipse127 rounded-full" />
86+
<div className="ellipse ellipse128 rounded-full" />
87+
<div className="ellipse ellipse129 rounded-full" />
88+
<div className="ellipse ellipse130 rounded-full" />
89+
<div className="ellipse ellipse1311 rounded-full" />
90+
<div className="ellipse ellipse122 rounded-full" />
91+
<div className="ellipse ellipse123 rounded-full" />
92+
<div className="ellipse ellipse137 rounded-full" />
93+
<div className="ellipse ellipse138 rounded-full" />
94+
<div className="ellipse ellipse139 rounded-full" />
95+
<div className="ellipse ellipse140 rounded-full" />
96+
<div className="ellipse ellipse141 rounded-full" />
97+
<div className="ellipse ellipse142 rounded-full" />
98+
<div className="ellipse ellipse143 rounded-full" />
99+
<div className="ellipse ellipse144 rounded-full" />
100+
<div className="ellipse ellipse145 rounded-full" />
101+
<div className="ellipse ellipse177 rounded-full" />
102+
<div className="ellipse ellipse178 rounded-full" />
103+
<div className="ellipse ellipse146 rounded-full" />
104+
<div className="ellipse ellipse156 rounded-full" />
105+
<div className="ellipse ellipse157 rounded-full" />
106+
<div className="ellipse ellipse179 rounded-full" />
107+
<div className="ellipse ellipse158 rounded-full" />
108+
<div className="ellipse ellipse164 rounded-full" />
109+
<div className="ellipse ellipse165 rounded-full" />
110+
<div className="ellipse ellipse167 rounded-full" />
111+
<div className="ellipse ellipse168 rounded-full" />
112+
<div className="ellipse ellipse169 rounded-full" />
113+
<div className="ellipse ellipse170 rounded-full" />
114+
<div className="ellipse ellipse171 rounded-full" />
115+
<div className="ellipse ellipse166 rounded-full" />
116+
<div className="ellipse ellipse147 rounded-full" />
117+
<div className="ellipse ellipse148 rounded-full" />
118+
<div className="ellipse ellipse151 rounded-full" />
119+
<div className="ellipse ellipse149 rounded-full" />
120+
<div className="ellipse ellipse152 rounded-full" />
121+
<div className="ellipse ellipse153 rounded-full" />
122+
<div className="ellipse ellipse159 rounded-full" />
123+
<div className="ellipse ellipse160 rounded-full" />
124+
<div className="ellipse ellipse161 rounded-full" />
125+
<div className="ellipse ellipse162 rounded-full" />
126+
<div className="ellipse ellipse163 rounded-full" />
127+
<div className="ellipse ellipse154 rounded-full" />
128+
<div className="ellipse ellipse155 rounded-full" />
129+
<div className="ellipse ellipse150 rounded-full" />
130+
<div className="ellipse ellipse1411 rounded-full" />
131131
</div>
132132
</div>
133133

134134
{/* Image Section */}
135135
<JoinSYTModal isOpen={isOpen} closeModal={closeModal} />
136-
137136
</section>
138137
);
139138
}

‎src/APP/pages/landingPage/sections/OurEvents.jsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,18 @@
22
/* eslint-disable import/no-unresolved */
33
/* eslint-disable import/extensions */
44
import React, { useEffect } from "react";
5+
import { LazyLoadImage } from "react-lazy-load-image-component";
56
import { Link } from "react-router-dom";
67

8+
import { error500svg } from "../../../../assets/images/errorPages";
79
import {
810
calculateDistanceToDate,
911
formatEventTime,
1012
startEventDate,
1113
} from "../../../../utilities/formatEventDate";
1214
import { Loader, Button } from "../../../components";
13-
import Error500 from "../../errorPages/Error500";
1415
import useTopEvents from "@/hooks/Queries/eventsSection/useTopEvents";
15-
import { LazyLoadImage } from "react-lazy-load-image-component";
16-
import { error500svg } from "../../../../assets/images/errorPages";
16+
1717
function OurEvents() {
1818
const {
1919
data: topEvents,
@@ -31,7 +31,7 @@ function OurEvents() {
3131
<section className="w-full max-w-1440 mx-auto flex-center flex-col gap-8 px-3 pt-2">
3232
<div className="flex-center gap-4 flex-col w-full max-w-2xl text-center">
3333
<h3 className="max-w-lg text-green-header text-center font-semibold text-xl md:text-3xl">
34-
You can’t spell community without meet-up{" "}
34+
You can’t spell community without meet-up
3535
</h3>
3636

3737
<p className="text-sm md:text-base font-normal">
@@ -73,8 +73,8 @@ function OurEvents() {
7373
)}
7474

7575
{isSuccess && (
76-
// <div className="py-4 flex flex-row md:flex-col gap-4 md:pr-8 overflow-x-scroll md:overflow-y-scroll h-full md:py-2 w-full md:w-1/2 scrollbar">
77-
<div className="w-full flex flex-row md:flex-col overflow-x-auto gap-4">
76+
<div className="py-4 flex flex-row md:flex-col gap-4 md:pr-8 overflow-x-scroll md:overflow-y-scroll h-full md:py-2 w-full md:w-1/2 scrollbar">
77+
{/* <div className="w-full flex flex-row md:flex-col overflow-x-auto gap-4"> */}
7878
{topEvents?.count === 0 ? (
7979
<p className="">No events found!</p>
8080
) : (

0 commit comments

Comments
 (0)