test commit--changed the colors

package.json

@@ -3,15 +3,25 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^6.1.3",
+    "@mui/material": "^6.1.3",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
+    "autosuggest-highlight": "^3.3.4",
+    "axios": "^1.7.7",
+    "js-cookie": "^3.0.5",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-icons": "^4.3.1",
+    "react-router-dom": "^6.27.0",
     "react-scripts": "5.0.1",
     "react-typed": "^1.2.0",
-    "web-vitals": "^2.1.0"
+    "styled-components": "^6.1.13",
+    "web-vitals": "^2.1.0",
+    "webfontloader": "^1.6.28"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -40,6 +50,6 @@
   "devDependencies": {
     "autoprefixer": "^10.4.4",
     "postcss": "^8.4.12",
-    "tailwindcss": "^3.0.24"
+    "tailwindcss": "^3.4.13"
   }
 }

src/App.css

@@ -0,0 +1,43 @@
+.App {
+    text-align: center;
+  }
+
+  .App-logo {
+    height: 40vmin;
+    pointer-events: none;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .App-logo {
+      animation: App-logo-spin infinite 20s linear;
+    }
+  }
+
+  .App-header {
+    background-color: #282c34;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: calc(10px + 2vmin);
+    color: white;
+  }
+
+  .App-link {
+    color: #61dafb;
+  }
+
+  @keyframes App-logo-spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+.font-loader {
+  font-family: 'Chilanka';
+}
+

src/App.js

@@ -1,21 +1,69 @@
 import React from 'react';
-import Analytics from './components/Analytics';
-import Cards from './components/Cards';
-import Footer from './components/Footer';
-import Hero from './components/Hero';
 import Navbar from './components/Navbar';
-import Newsletter from './components/Newsletter';
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+} from "react-router-dom";
+import Home from "./components/pages/home";
+import Company from "./components/pages/company";
+import Resources from "./components/pages/resources";
+import About from "./components/pages/about";
+import Contact from "./components/pages/contact";
+import Login from "./components/pages/login";
+import Form from "./components/pages/form";
+import { useEffect } from 'react';
+import WebFont from 'webfontloader';
+import Mentor from "./components/pages/mentor";
+
+
+
+
 
 function App() {
+  useEffect(() => {
+    WebFont.load({
+        google: {
+            families: ['Droid Sans', 'Chilanka', 'Mukta'],
+        },
+    });
+}, []);
+
   return (
     <div>
-      <Navbar />
-      <Hero />
-      <Analytics />
-      <Newsletter />
-      <Cards />
-      <Footer />
+
+      <Router>
+            <Navbar />
+            <Routes>
+                <Route path="/" element={<Home />} />
+                <Route path="/company" element={<Company />} />
+                <Route
+                    path="/resources"
+                    element={<Resources />}
+                />
+                <Route path="/about" element={<About />} />
+                <Route
+                    path="/contact"
+                    element={<Contact />}
+                />
+                <Route path="/login" element={<Login />}
+                />
+                <Route path="/home" element={<Home />}
+                />
+                <Route path="/form" element={<Form />}
+                />
+                <Route path="/mentor" element={<Mentor />}
+                />
+            </Routes>
+        </Router>
+
+
+
     </div>
+
+
+
+
   );
 }
 

src/components/Analytics.jsx

@@ -1,25 +1,28 @@
 import React from 'react';
 import Laptop from '../assets/laptop.jpg';
 
-const Analytics = () => {
+const Forum = () => {
   return (
     <div className='w-full bg-white py-16 px-4'>
       <div className='max-w-[1240px] mx-auto grid md:grid-cols-2'>
-        <img className='w-[500px] mx-auto my-4' src={Laptop} alt='/' />
+        <img className='w-[500px] mx-auto my-4' src={Laptop} alt='Connecting with Mentors' />
         <div className='flex flex-col justify-center'>
-          <p className='text-[#00df9a] font-bold '>DATA ANALYTICS DASHBOARD</p>
-          <h1 className='md:text-4xl sm:text-3xl text-2xl font-bold py-2'>Manage Data Analytics Centrally</h1>
-          <p>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum
-            molestiae delectus culpa hic assumenda, voluptate reprehenderit
-            dolore autem cum ullam sed odit perspiciatis. Doloribus quos velit,
-            eveniet ex deserunt fuga?
+          <p className='text-[#FFA500] font-bold'>JOIN THE SUNRISE FORUM</p>
+          <h1 className='md:text-4xl sm:text-3xl text-2xl font-bold py-2'>
+            Connect with Compassionate Mentors
+          </h1>
+          <p className='py-4 text-gray-600'>
+            Welcome to the <span className="font-bold">Sunrise Forum</span>, a safe and welcoming space where foster children can connect with experienced mentors who understand their journey. Our forum offers opportunities to engage in meaningful conversations, share experiences, and receive guidance from individuals who have faced similar challenges.
+            <br /><br />
+            Whether you’re looking for advice, support, or just someone to talk to, the Sunrise Forum is here to help you navigate your path. Join us today and take the first step towards a brighter future!
           </p>
-          <button className='bg-black text-[#00df9a] w-[200px] rounded-md font-medium my-6 mx-auto md:mx-0 py-3'>Get Started</button>
+          <button className='bg-[#233c67] text-white w-[200px] rounded-md font-medium my-6 mx-auto md:mx-0 py-3 hover:bg-[#1a2a48] transition duration-300'>
+            Join the Forum
+          </button>
         </div>
       </div>
     </div>
   );
 };
 
-export default Analytics;
+export default Forum;

src/components/Cards.jsx

@@ -1,48 +1,50 @@
 import React from 'react';
-import Single from '../assets/single.png'
-import Double from '../assets/double.png'
-import Triple from '../assets/triple.png'
+import Mentor from '../assets/single.png';
+import Community from '../assets/double.png';
+import Resources from '../assets/triple.png';
 
 const Cards = () => {
   return (
-    <div className='w-full py-[10rem] px-4 bg-white'>
+    <div className='w-full py-[10rem] px-4 bg-gradient-to-r from-orange-400 to-pink-600'>
       <div className='max-w-[1240px] mx-auto grid md:grid-cols-3 gap-8'>
-          <div className='w-full shadow-xl flex flex-col p-4 my-4 rounded-lg hover:scale-105 duration-300'>
-              <img className='w-20 mx-auto mt-[-3rem] bg-white' src={Single} alt="/" />
-              <h2 className='text-2xl font-bold text-center py-8'>Single User</h2>
-              <p className='text-center text-4xl font-bold'>$149</p>
-              <div className='text-center font-medium'>
-                  <p className='py-2 border-b mx-8 mt-8'>500 GB Storage</p>
-                  <p className='py-2 border-b mx-8'>1 Granted User</p>
-                  <p className='py-2 border-b mx-8'>Send up to 2 GB</p>
-              </div>
-              <button className='bg-[#00df9a] w-[200px] rounded-md font-medium my-6 mx-auto px-6 py-3'>Start Trial</button>
+        {/* Mentor Program Card */}
+        <div className='w-full shadow-xl flex flex-col p-4 my-4 rounded-lg hover:scale-105 duration-300 bg-white'>
+          <img className='w-20 mx-auto mt-[-3rem] bg-white' src={Mentor} alt="Mentorship" />
+          <h2 className='text-2xl font-bold text-center py-8'>Mentorship Program</h2>
+          <div className='text-center font-medium'>
+            <p className='py-2 border-b mx-8 mt-8'>One-on-One Guidance</p>
+            <p className='py-2 border-b mx-8'>Personalized Support</p>
+            <p className='py-2 border-b mx-8'>Experience-based Learning</p>
           </div>
-          <div className='w-full shadow-xl bg-gray-100 flex flex-col p-4 md:my-0 my-8 rounded-lg hover:scale-105 duration-300'>
-              <img className='w-20 mx-auto mt-[-3rem] bg-transparent' src={Double} alt="/" />
-              <h2 className='text-2xl font-bold text-center py-8'>Single User</h2>
-              <p className='text-center text-4xl font-bold'>$149</p>
-              <div className='text-center font-medium'>
-                  <p className='py-2 border-b mx-8 mt-8'>500 GB Storage</p>
-                  <p className='py-2 border-b mx-8'>1 Granted User</p>
-                  <p className='py-2 border-b mx-8'>Send up to 2 GB</p>
-              </div>
-              <button className='bg-black text-[#00df9a] w-[200px] rounded-md font-medium my-6 mx-auto px-6 py-3'>Start Trial</button>
+          <button className='bg-[#FFA500] w-[200px] rounded-md font-medium my-6 mx-auto px-6 py-3 hover:bg-[#ff9800] transition duration-300'>Join Now</button>
+        </div>
+
+        {/* Community Support Card */}
+        <div className='w-full shadow-xl flex flex-col p-4 my-4 rounded-lg hover:scale-105 duration-300 bg-white'>
+          <img className='w-20 mx-auto mt-[-3rem] bg-white' src={Community} alt="Community Support" />
+          <h2 className='text-2xl font-bold text-center py-8'>Community Support</h2>
+          <div className='text-center font-medium'>
+            <p className='py-2 border-b mx-8 mt-8'>Peer Networking</p>
+            <p className='py-2 border-b mx-8'>Workshops & Events</p>
+            <p className='py-2 border-b mx-8'>Safe Space for Sharing</p>
           </div>
-          <div className='w-full shadow-xl flex flex-col p-4 my-4 rounded-lg hover:scale-105 duration-300'>
-              <img className='w-20 mx-auto mt-[-3rem] bg-white' src={Triple} alt="/" />
-              <h2 className='text-2xl font-bold text-center py-8'>Single User</h2>
-              <p className='text-center text-4xl font-bold'>$149</p>
-              <div className='text-center font-medium'>
-                  <p className='py-2 border-b mx-8 mt-8'>500 GB Storage</p>
-                  <p className='py-2 border-b mx-8'>1 Granted User</p>
-                  <p className='py-2 border-b mx-8'>Send up to 2 GB</p>
-              </div>
-              <button className='bg-[#00df9a] w-[200px] rounded-md font-medium my-6 mx-auto px-6 py-3'>Start Trial</button>
+          <button className='bg-[#FFA500] w-[200px] rounded-md font-medium my-6 mx-auto px-6 py-3 hover:bg-[#ff9800] transition duration-300'>Get Involved</button>
+        </div>
+
+        {/* Resources Card */}
+        <div className='w-full shadow-xl flex flex-col p-4 my-4 rounded-lg hover:scale-105 duration-300 bg-white'>
+          <img className='w-20 mx-auto mt-[-3rem] bg-white' src={Resources} alt="Resources" />
+          <h2 className='text-2xl font-bold text-center py-8'>Essential Resources</h2>
+          <div className='text-center font-medium'>
+            <p className='py-2 border-b mx-8 mt-8'>Job Opportunities</p>
+            <p className='py-2 border-b mx-8'>Mental Health Support</p>
+            <p className='py-2 border-b mx-8'>Educational Materials</p>
           </div>
+          <button className='bg-[#FFA500] w-[200px] rounded-md font-medium my-6 mx-auto px-6 py-3 hover:bg-[#ff9800] transition duration-300'>Explore Now</button>
+        </div>
       </div>
     </div>
   );
 };
 
-export default Cards;
+export default Cards;