Unknown39825 · Priyanshu-Sharma13 · Aug 2, 2024
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -2,20 +2,23 @@
   "name": "fine-arts",
   "version": "0.1.0",
   "private": true,
-  "proxy":"http://localhost:8000",
+  "proxy": "http://localhost:8000",
   "dependencies": {
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
     "aos": "^2.3.4",
     "axios": "^0.21.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
     "react-img-mapper": "^1.1.10",
     "react-owl-carousel": "^2.3.3",
-    "react-router": "^5.2.0",
+    "react-player": "^2.16.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3",
+    "react-slick": "^0.30.2",
+    "react-toastify": "^10.0.5",
+    "slick-carousel": "^1.8.1",
     "web-vitals": "^1.1.2"
   },
   "scripts": {
@@ -41,5 +44,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "react-scripts": "^5.0.1"
   }
 }
diff --git a/client/public/index.html b/client/public/index.html
@@ -15,6 +15,7 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
 
 
     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
@@ -33,9 +34,11 @@
     -->
     <title>FineArts</title>
   </head>
-  <body>
+  <body style="background: white;">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <div id="overlay"></div>
+
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/client/src/App.css b/client/src/App.css
@@ -1,38 +1,64 @@
-.App {
-  text-align: center;
-}
+:root {
+  /* colors */
+  --primary-50: #e0eef9;
+  --primary-100: #c5e5fc;
+  --primary-200: #a5d5f8;
+  --primary-300: #8bcbf9;
+  --primary-400: #6ebef7;
+  --primary-500: #49a6e9;
+  --primary-600: #2d87c8;
+  --primary-700: #1a6aa2;
+  --primary-800: #104e7a;
+  --primary-900: #063251;
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
+  /* grey */
+  --grey-50: #f8fafc;
+  --grey-100: #f1f5f9;
+  --grey-200: #e2e8f0;
+  --grey-300: #cbd5e1;
+  --grey-400: #94a3b8;
+  --grey-500: #64748b;
+  --grey-600: #475569;
+  --grey-700: #334155;
+  --grey-800: #1e293b;
+  --grey-900: #0f172a;
+  /* rest of the colors */
+  --black: #222;
+  --white: #fff;
+  --red-dark: #842029;
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
+  --small-text: 0.875rem;
+  --extra-small-text: 0.7em;
+  /* rest of the vars */
+  --backgroundColor: var(--grey-50);
+  --textColor: var(--grey-900);
+  --borderRadius: 0.25rem;
+  --letterSpacing: 1px;
+  --transition: 0.3s ease-in-out all;
+  --max-width: 1120px;
+  --fixed-width: 600px;
 
-.App-header {
-
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  /* box shadow*/
+  --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
+    0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }
 
-.App-link {
-  color: #61dafb;
+#overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
+  z-index: 1; /* Make sure it's above other elements */
+  display: none; /* Hide it by default */
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+body.no-scroll {
+  overflow: hidden !important;
+}
diff --git a/client/src/App.js b/client/src/App.js
@@ -14,15 +14,22 @@ import WorkshopUpdate from './Components/Authentication/adminPanel/Updates/Updat
 import AdminRoute from './Components/Authentication/auth/AdminRouters.js'
 import ProtectedRoute from './Components/Authentication/auth/ProtectedRoutes.js'
 import PhotoUpdate from './Components/Authentication/adminPanel/Updates/photoGalleryUpdate.jsx'
+import './App.css';
+import Sidebar from './Components/Sidebar/Sidebar.jsx';
+import Allies from './Components/Allies/Allies';
+import Workshops from './Components/Workshops/Workshops.jsx'
+import Sponsors from './Components/Sponsors/Sponsors.jsx'
 
 export default function App() {
   return (
     <BrowserRouter>
+      <Sidebar />
       <Switch>
         <Route exact path="/art" component={ArtGallery} />
         <Route exact path="/signup" component={Signup} />
         <Route exact path="/signin" component={Signin} />
         <Route exact path="/forgot" component={Forgot} />
+        <Route exact path='/ourAllies' component={Allies} />
         <ProtectedRoute exact path="/join" component={JoinUs} />
         <ProtectedRoute exact path="/artwork/:id" component={PhotoUpdate} />
         <AdminRoute exact path="/admin" component={admin} />
@@ -31,6 +38,9 @@ export default function App() {
         <AdminRoute exact path="/Workshop/:id" component={WorkshopUpdate} />
         <AdminRoute exact path="/artwork/:id" component={PhotoUpdate} />
 
+
+        <Route path='/workshops' component={Workshops} />
+        <Route path='/sponsors' component={Sponsors} />
         <Route path="/" exact={true} component={Hompage} />
         <Route path="*" component={Error} />
       </Switch>

diff --git a/client/src/Components/Allies/Allies.css b/client/src/Components/Allies/Allies.css
@@ -0,0 +1,150 @@
+.allies-container {
+    margin: 0 auto;
+    margin-top: 3rem;
+    width: 50vw;
+    max-width: 800px;
+    position: relative;
+    height: 550px;
+    overflow: hidden;
+    /* border: solid red 2px; */
+}
+
+.allies-flex-container {
+    display: flex;
+    gap: 2rem;
+    /* margin-left: 5rem; */
+    margin-bottom: 3rem;
+    /* height:  */
+    /* background: rgb(229, 225, 225, 0.4); */
+    /* margin-right: 5rem; */
+    padding: 2rem;
+    border-radius: 15px;
+    /* border: solid red 2px; */
+}
+
+.allies-logo {
+    margin-top: 5rem;
+    width: 30%;
+
+}
+
+.allies-title {
+    text-align: center;
+    width: 90%;
+    margin: 20px auto;
+    margin-top: 100px;
+    margin-bottom: -5rem;
+}
+
+@media screen and (max-width: 500px) {
+    .allies-container {
+        height: 450px;
+    }
+}
+@media screen and (max-width: 1000px) {
+    .allies-logo {
+        display: none;
+    }
+    .allies-container {
+        width: 80vw;
+    }
+    .allies-flex-container {
+        display: block;
+        margin-left: 0;
+    }
+    .allies-left {
+        width: 100%;
+        /* border: solid red 2px; */
+        margin-right: 0;
+    }
+    .allies-form {
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+
+/* .temp-title {
+    margin-top: 10rem;
+} */
+
+
+.allies-prev, .allies-next {
+    position: absolute;
+    top: 200px;
+    background: var(--primary-500);
+    width: 2rem;
+    height: 2rem;
+    border-color: transparent;
+    cursor: pointer;
+    border-radius: 50%;
+    transition: var(--transition);
+    transform: translateY(-100%);
+}
+
+.allies-prev:hover, .allies-next:hover {
+    background: var(--primary-700);
+    border-radius: 40%;
+}
+
+.allies-icon {
+    transform: translate(0, 10%);
+    color: white;
+}
+
+.allies-next {
+    right: 0;
+}
+
+.allies-prev {
+    left: 0;
+}
+
+.form {
+    margin: 0 auto;
+    margin-top: 6rem;
+    text-align: center; /* Center align content */
+}
+
+.allie-year-input {
+    width: 60%;
+    height: 2.5rem; /* Adjust height for consistency */
+    border-color: transparent;
+    background: var(--grey-200);
+    border-radius: 2px;
+    font-size: 15px;
+    padding: 5px; /* Add padding for better appearance */
+}
+
+.allie-submit-btn {
+    color: var(--white);
+    background: var(--primary-500);
+    border-color: transparent;
+    height: 2.5rem;
+    width: 30%; /* Adjust width for smaller screens */
+    margin-top: 10px; /* Add margin for spacing */
+    font-size: 17px;
+    cursor: pointer;
+    border-radius: 5px;
+    transition: var(--transition);
+}
+
+/* @media screen and (max-width: 530px) {
+    .allie-year-input,
+    .allie-submit-btn {
+        width: 80%;
+    }
+    .allie-submit-btn {
+        display: block;
+        margin: 0 auto;
+    }
+} */
+
+.allie-submit-btn:hover {
+    background: var(--primary-700);
+}
+
+
+
+/* .allies-super-container {
+    border: solid red 2px;
+} */