Merge pull request #1601 from gtech-mulearn/old-dev

Old dev

src/App.js

@@ -14,6 +14,7 @@ import Career from "./Pages/Career/Career";
 import LeaderBoard from "./Pages/LeaderBoard/leaderBoard";
 import WikiSyllabus from "./Pages/WikiSyllabus/WikiSyllabus";
 import HacktoberFest from "./Pages/Events/HacktoberFest/HacktoberFest";
+import Wadhwani from "./Pages/Wadhwani/Wadhwani";
 // import Yip from "./Pages/YIP/Yip";
 import CampusChapters from "./Pages/CampusChapters/CampusChapters";
 import BlogLanding from "./Pages/CampusChapters/Blogs/BlogLanding";
@@ -122,6 +123,7 @@ function App() {
             <Route path="events/learningfest" element={<KKEMLearningFest />} />
             <Route path="/keralatechfest" element={<KKEMLearningFest />} />
             <Route path="/maveliportfolio" element={<MaveliPortfolio />} />
+            <Route path="/wadhwani" element={<Wadhwani />} />
 
             <Route path="/team">
               <Route path="" element={<Teams />} />

src/Components/Navbar/Mylinks.jsx

@@ -122,7 +122,7 @@ export const links = [
             name: "Magazine",
             submenu: false,
             sublinks: [],
-            link: "https://online.fliphtml5.com/blxtf/bicl/#p=1",
+            link: "https://online.fliphtml5.com/slydm/hrgi/",
             foreign: true,
           },
           {

src/Pages/Wadhwani/Wadhwani.jsx

@@ -0,0 +1,105 @@
+import React, { useEffect, useState } from "react";
+
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+
+import Typography from "@mui/material/Typography";
+import { CircularProgress } from "@mui/material";
+
+import styles from "./Wadhwani2.module.css";
+import styles2 from "./Wadhwani.module.css";
+import Navbar from "../../Components/Navbar/Navbar";
+import Footer from "../../Components/Footer/Footer";
+import leader from "./assets/Leader.gif";
+import {  getData  } from "./services/api";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: "#f78c40",
+    },
+  },
+});
+
+const Wadhwani = () => {
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    getData(setData,setLoading)
+  }, []);
+
+  if (loading) {
+    return (
+      <div className={styles.loadingContainer}>
+        <CircularProgress />
+        <Typography>Loading...</Typography>
+      </div>
+    );
+  }
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Navbar />
+      <div className={styles2.third_view_container} id="success-stories">
+        <div className={styles2.third_view}>
+          <div className={styles2.header}>
+            <div className={styles2.tv_texts}>
+              <p className={styles.tv_heading}>
+                <span>Wadhwani</span> Is Here!
+              </p>
+              <p className={styles.tv_tagline}>
+                Wadhwani helps students learn and grow holistically by focusing
+                on the soft skills of the person.
+              </p>
+              <p>Feel free to check out our courses!</p>
+              <a className={styles.buttonMuorange} href="https://app.mulearn.org/dashboard/wadhwani">
+                Explore Wadhwani
+              </a>
+            </div>
+            <div className="svg">
+              <img src={leader} alt="Leader" className={styles.fv_img} />
+            </div>
+          </div>
+
+          <div className={styles2.tv_story_container}>
+            {data.map((item, index) => (
+              <div className={styles2.tv_story}>
+                <Card
+                  key={index}
+                  sx={{
+                    width: 400,
+                    height: 200,
+                    border: "1px solid hsla(0, 0%, 100%, .18)",
+                    borderRadius: "15px",
+                    boxShadow: "0 1px 12px 0 rgb(193 195 211 / 37%)",
+                    marginBottom: "1rem",
+                    display: "flex",
+                    justifyContent: "space-between",
+
+
+                  }}
+                >
+                  <CardContent>
+                    <Typography gutterBottom variant="h5" component="div">
+                      {item.courseName}
+                    </Typography>
+                    <Typography variant="body2" color="text.secondary">
+                      {item.description.substring(0, 120)}...
+                    </Typography>
+                    <Typography variant="body4" color="text.secondary">
+                      Duration: {item.CourseDuration} hrs
+                    </Typography>
+                  </CardContent>
+                </Card>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+      <Footer />
+    </ThemeProvider>
+  );
+};
+
+export default Wadhwani;

src/Pages/Wadhwani/Wadhwani.module.css

@@ -0,0 +1,86 @@
+.third_view_container {
+    display: flex;
+    justify-content: center;
+    padding-top: 2rem;
+}
+
+.third_view {
+    max-width: 1300px;
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.header {
+    display: flex;
+    align-items: center;
+}
+
+.header .tv_texts p:nth-child(1) {
+    font-family: "Noto Sans", sans-serif;
+    font-size: 4.5rem;
+    line-height: 5rem;
+    font-weight: 600;
+}
+
+.tv_story_container {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+
+.tv_story {
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+    box-shadow: 1px 1px 45px -5px rgb(0 0 0 / 8%);
+    -webkit-box-shadow: 1px 1px 45px -5px rgb(0 0 0 / 8%);
+}
+
+@media only screen and (max-width: 1350px) {
+    .third_view {
+        max-width: unset;
+        margin: 50px;
+    }
+}
+
+@media only screen and (max-width: 1180px) {
+    .tv_story_container {
+        justify-content: space-around;
+    }
+
+    .header .tv_texts p:nth-child(1) {
+        font-size: 2.5rem;
+        line-height: 3rem;
+    }
+}
+
+@media only screen and (max-width: 1020px) {
+    .header {
+        flex-wrap: wrap;
+        flex-direction: column-reverse;
+    }
+
+    .header .tv_texts {
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+}
+
+@media only screen and (max-width: 400px) {
+    .header .tv_texts p:nth-child(1) {
+        font-size: 1.9rem;
+    }
+}
+
+.loadingContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    flex-direction: column;
+}