Activities components

.gitignore

@@ -17,6 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.env
 
 npm-debug.log*
 yarn-debug.log*

package.json

@@ -3,17 +3,23 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@hookform/resolvers": "^3.6.0",
+    "@tanstack/react-query": "^5.40.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.7.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.51.5",
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.23.1",
     "react-scripts": "5.0.1",
     "react-slick": "^0.30.2",
+    "react-toastify": "^10.0.5",
     "slick-carousel": "^1.8.1",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "yup": "^1.4.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.css

@@ -6,6 +6,10 @@
   box-sizing: border-box;
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   font-family: "Mulish", sans-serif;
 }
@@ -32,6 +36,39 @@ body {
   /* border: 2px solid blue !important;
   width: 100% !important; */
 }
+.custom-skeleton {
+  overflow: hidden;
+}
+
+.custom-skeleton::before {
+  position: absolute;
+  content: "";
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 1px;
+  box-shadow: 0 0 80px 20px #fff;
+
+  height: 100%;
+  animation: skeletonSlide 0.6s infinite ease-in-out;
+}
+
+@keyframes skeletonSlide {
+  from {
+    left: -100px;
+  }
+  to {
+    left: calc(100% + 100px);
+  }
+}
+
+.star-bg {
+  background-image: url("./assets/images/contact-us/Star-one.png"),
+    url("./assets/images/contact-us/Star-two.png"),
+    url("./assets/images/contact-us/Star-three.png");
+  background-repeat: no-repeat;
+  background-position: -5% center, right 20px, 85% 430px;
+}
 
 @media (max-width: 1023px) {
   .menu-items {
@@ -49,3 +86,15 @@ body {
     transform: translateX(0);
   }
 }
+
+@media (min-width: 400px) {
+  .star-bg {
+    background-position: left center, right 50px, 85% 430px;
+  }
+}
+
+@media (min-width: 992px) {
+  .star-bg {
+    background-position: left center, 90% 96px, 85% 430px;
+  }
+}

src/App.js

@@ -7,11 +7,17 @@ import {
   CodingPage,
   RoboticsPage,
   GameDevelopment,
+  ContactUsPage,
 } from "./pages";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+
+const queryClient = new QueryClient();
 
 function App() {
   return (
-    <>
+    <QueryClientProvider client={queryClient}>
       <Routes>
         <Route path="/" element={<HomePage />} />
         <Route path="/outreach" element={<OutreachPage />} />
@@ -22,8 +28,10 @@ function App() {
           element={<GameDevelopment />}
         />
         <Route path="/stem-clubs" element={<StemClubs />} />
+        <Route path="/contact-us" element={<ContactUsPage />} />
       </Routes>
-    </>
+      <ToastContainer />
+    </QueryClientProvider>
   );
 }