Merge pull request #1568 from alanfrancis442/dev

feat(Trivialideas): Added new pages for Trivial Ideas

package.json

@@ -18,7 +18,7 @@
         "axios": "^1.3.4",
         "file-saver": "^2.0.5",
         "formik": "^2.2.9",
-        "framer-motion": "^10.15.0",
+        "framer-motion": "^10.18.0",
         "lottie-react": "^2.4.0",
         "moment": "^2.29.4",
         "razorpay": "^2.9.3",
@@ -28,7 +28,7 @@
         "react-google-charts": "^4.0.0",
         "react-helmet": "^6.1.0",
         "react-hot-toast": "^2.4.1",
-        "react-icons": "^4.10.1",
+        "react-icons": "^4.12.0",
         "react-qr-code": "^2.0.11",
         "react-router-dom": "^6.9.0",
         "react-select": "^5.7.7",

src/App.tsx

@@ -241,6 +241,8 @@ const ConnectedDevices = lazy(
 );
 const Wadhwani = lazy(() => import("./modules/Dashboard/modules/Wadhwani"));
 
+const Trivial = lazy(() => import("./modules/Public/TrivialIdeas/modules/trivial"));
+
 function App() {
     const AuthChecker = SecureAuthRoutes();
     const router = createBrowserRouter([
@@ -277,6 +279,10 @@ function App() {
             path: "donation/refund",
             element: <Refund />
         },
+        {
+            path:"trivial-ideas",
+            element:<Trivial />
+        },
         {
             path: "/",
             element: <AuthRoutes />,

src/modules/Public/TrivialIdeas/components/botton/button.module.css

@@ -0,0 +1,8 @@
+button{
+    font-size: 1.2vw;
+}
+@media (max-width: 768px) {
+    button{
+        font-size: 2.5vw;
+    }
+}

src/modules/Public/TrivialIdeas/components/botton/button.tsx

@@ -0,0 +1,20 @@
+import styles from './button.module.css'
+function Button({name,color,text}:{name:string,color:string,text:string|null}) {
+
+
+    return ( 
+        <button
+        style={
+            {
+                color: text?text:'white',
+                backgroundColor: `${color}`,
+                padding: "15px 20px",
+                borderRadius: "5rem",
+            }
+        }
+        className={styles.button}
+        >{name}</button>
+     );
+}
+
+export default Button;

src/modules/Public/TrivialIdeas/components/footer/footer.module.css

@@ -0,0 +1,80 @@
+.footer {
+    padding: 40px 20px;
+    border-top: 2px solid #e5e5e5;
+  }
+
+  .container {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    max-width: 1200px;
+    /* margin: 0 auto; */
+  }
+
+  .section {
+    flex: 1;
+    min-width: 200px;
+    margin: 10px 20px;
+  }
+
+  .logo {
+    margin-bottom: 10px;
+  }
+
+  .description {
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+
+  .socialMedia {
+    display: flex;
+    gap: 10px;
+  }
+
+  .socialMedia a img {
+    width: 24px;
+    height: 24px;
+  }
+
+  h3 {
+    font-size: 18px;
+    margin-bottom: 10px;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+  }
+
+  li {
+    margin-bottom: 10px;
+  }
+
+  li a {
+    color: #333;
+    text-decoration: none;
+  }
+
+  li a:hover {
+    text-decoration: underline;
+  }
+
+  @media (max-width: 768px) {
+    .footer {
+      padding: 20px 0px;
+    }
+    .container {
+      flex-direction: column;
+    }
+    .description {
+      font-size: small;
+    }
+    h3 {
+      font-size: 18px;
+      margin-bottom: 4px;
+    }
+    li {
+      margin-bottom: 4px;
+    }
+
+}

src/modules/Public/TrivialIdeas/components/footer/footer.tsx

@@ -0,0 +1,71 @@
+import logo from '../../assets/µLearn.svg';
+import styles from './footer.module.css';
+import { FaDiscord } from "react-icons/fa";
+import { FaYoutube } from "react-icons/fa";
+import { FaFacebookSquare } from "react-icons/fa";
+import { FaInstagram } from "react-icons/fa";
+import { FaXTwitter } from "react-icons/fa6";
+
+
+
+const Footer = () => {
+  return (
+    <footer className={styles.footer}>
+      <div className={styles.container}>
+        <div className={styles.section}>
+          {/* <h2 className={styles.logo}>µLearn</h2> */}
+          <img className={styles.logo} src={logo} alt="" />
+          <p className={styles.description}>
+            A community that focuses on learning, upskilling and networking, while striving for creativity and innovation. TLDR, it's a place for every passionate learner out there!
+          </p>
+          <div className={styles.socialMedia}>
+            <a href="" target="_blank" rel="noreferrer">
+              <FaDiscord size={20} />
+            </a>
+            <a href="" target="_blank" rel="noreferrer">
+              <FaYoutube size={20} />
+            </a>
+            <a href="" target="_blank" rel="noreferrer">
+              <FaXTwitter size={20} />
+            </a>
+            <a href="" target="_blank" rel="noreferrer">
+              <FaFacebookSquare size={20} />
+            </a>
+            <a href="" target="_blank" rel="noreferrer">
+              <FaInstagram size={20} />
+            </a>
+          </div>
+        </div>
+        <div className={styles.section}>
+          <h3>Documentation</h3>
+          <ul>
+            <li><a href="#">Getting Started</a></li>
+            <li><a href="#">API Reference</a></li>
+            <li><a href="#">Integrations</a></li>
+            <li><a href="#">Examples</a></li>
+          </ul>
+        </div>
+        <div className={styles.section}>
+          <h3>Resources</h3>
+          <ul>
+            <li><a href="#">Changelog</a></li>
+            <li><a href="#">Pricing</a></li>
+            <li><a href="#">Status</a></li>
+            <li><a href="#">Webhooks</a></li>
+          </ul>
+        </div>
+        <div className={styles.section}>
+          <h3>Contact</h3>
+          <ul>
+            <li>Abin outreach - 99999 99999</li>
+            <li>Abin outreach - 99999 99999</li>
+            <li>Copyright © 2023. All Rights Reserved.</li>
+            <li>µLearn Foundation.</li>
+          </ul>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

src/modules/Public/TrivialIdeas/components/priceCard/PriceCard.tsx

@@ -0,0 +1,13 @@
+import styles from './priceCard.module.css'
+function PriceCard({prize,amount}:{prize:string,amount:string}) {
+    return ( 
+        <div className={styles.price_card}>
+            <div className={styles.price_card_header}>
+                <h2 className={styles.price_card_header_title}>{prize} Prize</h2>
+                <p className="price-card__header__price">{amount} INR</p>
+            </div>
+        </div>
+     );
+}
+
+export default PriceCard;

src/modules/Public/TrivialIdeas/components/priceCard/priceCard.module.css

@@ -0,0 +1,34 @@
+.price_card{
+    padding: 2rem 0rem;
+    background-color: #F5F5F7;
+    border-radius: 1rem;
+    width: 300px;
+}
+
+.price_card div{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+
+}
+.price_card_header p{
+    color: #2E85FE;
+    font-size: 22px;
+    font-weight: bold;
+}
+.price_card_header_title{
+    /* font-size: 2vw; */
+    font-size: 24px;
+    font-weight: bold;
+}
+
+@media (max-width: 768px) {
+    .price_card_header_title{
+        font-size: 18px;
+    }
+    .price_card__header p{
+        font-size: 4vw;
+    }
+  }