+
+
+
+
+
+
+
diff --git a/src/modules/Public/TrivialIdeas/assets/mark.png b/src/modules/Public/TrivialIdeas/assets/mark.png
new file mode 100644
index 000000000..b5755e97d
Binary files /dev/null and b/src/modules/Public/TrivialIdeas/assets/mark.png differ
diff --git a/src/modules/Public/TrivialIdeas/assets/pattern1.png b/src/modules/Public/TrivialIdeas/assets/pattern1.png
new file mode 100644
index 000000000..f33cd779b
Binary files /dev/null and b/src/modules/Public/TrivialIdeas/assets/pattern1.png differ
diff --git a/src/modules/Public/TrivialIdeas/assets/pattern2.png b/src/modules/Public/TrivialIdeas/assets/pattern2.png
new file mode 100644
index 000000000..d4f8b1124
Binary files /dev/null and b/src/modules/Public/TrivialIdeas/assets/pattern2.png differ
diff --git a/src/modules/Public/TrivialIdeas/assets/pattern3.png b/src/modules/Public/TrivialIdeas/assets/pattern3.png
new file mode 100644
index 000000000..aeb13d1af
Binary files /dev/null and b/src/modules/Public/TrivialIdeas/assets/pattern3.png differ
diff --git a/src/modules/Public/TrivialIdeas/assets/pattern4.png b/src/modules/Public/TrivialIdeas/assets/pattern4.png
new file mode 100644
index 000000000..1e620e376
Binary files /dev/null and b/src/modules/Public/TrivialIdeas/assets/pattern4.png differ
diff --git a/src/modules/Public/TrivialIdeas/assets/peoples.png b/src/modules/Public/TrivialIdeas/assets/peoples.png
new file mode 100644
index 000000000..a923d71b5
Binary files /dev/null and b/src/modules/Public/TrivialIdeas/assets/peoples.png differ
diff --git a/src/modules/Public/TrivialIdeas/assets/steve.png b/src/modules/Public/TrivialIdeas/assets/steve.png
new file mode 100644
index 000000000..4f4613eee
Binary files /dev/null and b/src/modules/Public/TrivialIdeas/assets/steve.png differ
diff --git "a/src/modules/Public/TrivialIdeas/assets/\302\265Learn.svg" "b/src/modules/Public/TrivialIdeas/assets/\302\265Learn.svg"
new file mode 100644
index 000000000..7c12c0a99
--- /dev/null
+++ "b/src/modules/Public/TrivialIdeas/assets/\302\265Learn.svg"
@@ -0,0 +1,8 @@
+
+
diff --git a/src/modules/Public/TrivialIdeas/components/botton/button.module.css b/src/modules/Public/TrivialIdeas/components/botton/button.module.css
new file mode 100644
index 000000000..d21820782
--- /dev/null
+++ b/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;
+ }
+}
\ No newline at end of file
diff --git a/src/modules/Public/TrivialIdeas/components/botton/button.tsx b/src/modules/Public/TrivialIdeas/components/botton/button.tsx
new file mode 100644
index 000000000..219376a47
--- /dev/null
+++ b/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 (
+
{name}
+ );
+}
+
+export default Button;
\ No newline at end of file
diff --git a/src/modules/Public/TrivialIdeas/components/footer/footer.module.css b/src/modules/Public/TrivialIdeas/components/footer/footer.module.css
new file mode 100644
index 000000000..d36a27f11
--- /dev/null
+++ b/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;
+ }
+
+}
\ No newline at end of file
diff --git a/src/modules/Public/TrivialIdeas/components/footer/footer.tsx b/src/modules/Public/TrivialIdeas/components/footer/footer.tsx
new file mode 100644
index 000000000..8513ad23e
--- /dev/null
+++ b/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 (
+
+
+
+ {/*
µLearn */}
+
+
+ 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!
+
+
+
+
+
+
+
Contact
+
+ Abin outreach - 99999 99999
+ Abin outreach - 99999 99999
+ Copyright © 2023. All Rights Reserved.
+ µLearn Foundation.
+
+
+
+ );
+};
+
+export default Footer;
diff --git a/src/modules/Public/TrivialIdeas/components/priceCard/PriceCard.tsx b/src/modules/Public/TrivialIdeas/components/priceCard/PriceCard.tsx
new file mode 100644
index 000000000..063256ee2
--- /dev/null
+++ b/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 (
+
+
+
{prize} Prize
+
{amount} INR
+
+
+ );
+}
+
+export default PriceCard;
\ No newline at end of file
diff --git a/src/modules/Public/TrivialIdeas/components/priceCard/priceCard.module.css b/src/modules/Public/TrivialIdeas/components/priceCard/priceCard.module.css
new file mode 100644
index 000000000..1db0753a9
--- /dev/null
+++ b/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;
+ }
+ }
diff --git a/src/modules/Public/TrivialIdeas/components/questionCard/card.module.css b/src/modules/Public/TrivialIdeas/components/questionCard/card.module.css
new file mode 100644
index 000000000..112ce18cd
--- /dev/null
+++ b/src/modules/Public/TrivialIdeas/components/questionCard/card.module.css
@@ -0,0 +1,58 @@
+.questionCard {
+ width: 100%;
+ background-color: #f9f9f9;
+ border-radius: 10px;
+ box-shadow: 0 0px 6px rgba(0, 0, 0, 0.1);
+ overflow: hidden;
+ border: 2px solid #e5e5e5;
+ /* border: 2px solid #2E85FE; */
+ }
+
+ .header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 25px 20px;
+ cursor: pointer;
+ }
+
+ .questionText {
+ font-size: 16px;
+ font-weight: bold;
+ color: #333;
+ }
+
+ .arrowButton {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 30px;
+ height: 30px;
+ background-color: #e5e5e5;
+ border: none;
+ border-radius: 50%;
+ outline: none;
+ cursor: pointer;
+ }
+
+ .arrowButton svg {
+ transform: rotate(0deg);
+ transition: transform 0.3s ease;
+ }
+
+ .ani_svg {
+ transform: rotate(90deg);
+ background: #2E85FE;
+ }
+
+ .content {
+ height: 0;
+ overflow: hidden;
+ transition: height 0.5s ease;
+ padding: 0px 20px;
+ }
+
+ .content.show {
+ height: 100px; /* Adjust according to content length */
+ padding: 0px 20px 20px;
+ }
diff --git a/src/modules/Public/TrivialIdeas/components/questionCard/card.tsx b/src/modules/Public/TrivialIdeas/components/questionCard/card.tsx
new file mode 100644
index 000000000..24bff09f6
--- /dev/null
+++ b/src/modules/Public/TrivialIdeas/components/questionCard/card.tsx
@@ -0,0 +1,28 @@
+import React,{useState} from 'react';
+import styles from './card.module.css';
+
+const QuestionCard = ({text,content}:{text:string,content:string}) => {
+ const [isOpen, setIsOpen] = useState(false);
+
+ const toggleContent = () => {
+ setIsOpen(!isOpen);
+ }
+ return (
+ //put this style when isopen is true border: 2px solid #2E85FE;
+
+
+
Is there a registration cost ?
+
+
+
+
+
+
+
+ );
+};
+
+export default QuestionCard;
diff --git a/src/modules/Public/TrivialIdeas/components/stepBox/stepBox.module.css b/src/modules/Public/TrivialIdeas/components/stepBox/stepBox.module.css
new file mode 100644
index 000000000..507e894d1
--- /dev/null
+++ b/src/modules/Public/TrivialIdeas/components/stepBox/stepBox.module.css
@@ -0,0 +1,38 @@
+.stepBox {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background-color: #f9f9f9;
+ padding: 20px;
+ border-radius: 10px;
+ box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
+ text-align: center;
+ width: 250px;
+ margin: 20px;
+ }
+
+ .numberCircle {
+ background-color: #FE2E6C;
+ color: white;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 18px;
+ margin-bottom: 10px;
+ box-shadow: 0px 0px 10px #FE2E6C;
+ }
+
+ .title {
+ font-size: 18px;
+ margin-bottom: 10px;
+ font-weight: bolder;
+ }
+
+ .description {
+ font-weight: 600;
+ font-size: 12px;
+ }
+
\ No newline at end of file
diff --git a/src/modules/Public/TrivialIdeas/components/stepBox/stepBox.tsx b/src/modules/Public/TrivialIdeas/components/stepBox/stepBox.tsx
new file mode 100644
index 000000000..e3bfcc736
--- /dev/null
+++ b/src/modules/Public/TrivialIdeas/components/stepBox/stepBox.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import styles from './stepBox.module.css';
+
+interface StepBoxProps {
+ number: number;
+ title: string;
+ description: string;
+
+}
+
+const StepBox = ({ number, title, description }:StepBoxProps) => {
+ return (
+
+
{number}
+
{title}
+
{description}
+
+ );
+};
+
+export default StepBox;
diff --git a/src/modules/Public/TrivialIdeas/modules/faq.tsx b/src/modules/Public/TrivialIdeas/modules/faq.tsx
new file mode 100644
index 000000000..254ac0ed2
--- /dev/null
+++ b/src/modules/Public/TrivialIdeas/modules/faq.tsx
@@ -0,0 +1,70 @@
+import { useState,useEffect } from "react";
+import QuestionCard from "../components/questionCard/card";
+
+let data = [
+ {
+ text: "Is there is a registration cost ?",
+ content:'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
+ },
+ {
+ text: "What are the prizes for winning ?",
+ content:'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
+ },
+ {
+ text:"What idea can i submit ?",
+ content:'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
+ },
+ {
+ text:"How can i submit ?",
+ content:'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
+ }
+
+]
+
+function Faqs() {
+
+ const [windowWidth, setwindowWidth] = useState(window.innerWidth);
+ useEffect(()=>{
+ window.addEventListener('resize',()=>{
+ setwindowWidth(window.innerWidth);
+ })
+
+ return ()=>{
+ window.removeEventListener('resize',()=>{
+ setwindowWidth(window.innerWidth);
+ })
+ }
+ },[])
+ return (
+
768?"50%":"100%",
+ display:"flex",
+ gap:"3rem",
+ flexDirection:"column",
+ padding:"80px 0px",
+ }}>
+
768?"3vw":"6vw",
+ fontWeight:"bold",
+ textAlign:"center",
+ }}>Got questions?
+
+ {
+ data.map((question, index) => {
+ return (
+
+
+ );
+}
+
+export default Faqs;
\ No newline at end of file
diff --git a/src/modules/Public/TrivialIdeas/modules/price.tsx b/src/modules/Public/TrivialIdeas/modules/price.tsx
new file mode 100644
index 000000000..6aef1a26c
--- /dev/null
+++ b/src/modules/Public/TrivialIdeas/modules/price.tsx
@@ -0,0 +1,92 @@
+import { useState,useEffect } from "react";
+import PriceCard from "../components/priceCard/PriceCard";
+
+const data = [
+ {
+ prize: "First",
+ amount: '50,000'
+ },
+ {
+ prize: "Second",
+ amount: '25,000'
+ },
+ {
+ prize: "Third",
+ amount: "12,500"
+ },
+ {
+ prize: "Fourth",
+ amount: "6,250"
+ },
+ {
+ prize: "Fifth",
+ amount: "3,125"
+ },
+ {
+ prize: "Sixth",
+ amount: "1,600"
+ }
+];
+
+
+function Price() {
+
+ const [windowWidth, setwindowWidth] = useState(window.innerWidth);
+ useEffect(()=>{
+ window.addEventListener('resize',()=>{
+ setwindowWidth(window.innerWidth);
+ })
+
+ return ()=>{
+ window.removeEventListener('resize',()=>{
+ setwindowWidth(window.innerWidth);
+ })
+ }
+ },[])
+
+ return (
+
+
768?"3vw":"6vw",
+ fontWeight:"bold",
+ textAlign:"center",
+
+ }}>What we’ve got for you
+
780?"repeat(3,1fr)":"1fr",
+ // gap:windowWidth>768?"2.5vw":"1.5rem",
+ // backgroundColor:"red",
+ //responsive flex
+ display:windowWidth>950?"grid":"flex",
+ flexDirection:windowWidth>768?"row":"column",
+ gap:windowWidth>768?"2.5rem":"1rem",
+ justifyContent:"center",
+ flexWrap:"wrap",
+ }}
+ >
+ {
+ data.map((e, index) => {
+ return (
+
+ );
+ })
+ }
+
+
+400 Karma Points!
+
+ );
+}
+
+export default Price;
\ No newline at end of file
diff --git a/src/modules/Public/TrivialIdeas/modules/process/Process.module.css b/src/modules/Public/TrivialIdeas/modules/process/Process.module.css
new file mode 100644
index 000000000..6634cd67d
--- /dev/null
+++ b/src/modules/Public/TrivialIdeas/modules/process/Process.module.css
@@ -0,0 +1,96 @@
+.processDiagram {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 40px 20px;
+ }
+
+ .heading {
+ font-size: 24px;
+ margin-bottom: 30px;
+ text-align: center;
+ }
+
+ .stepsContainer {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ max-width: 80%;
+ }
+ .stepsInnerContainer {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ }
+ .arrow {
+ font-size: 24px;
+ margin: 0 20px;
+ }
+
+ @media (max-width: 768px) {
+ .stepsContainer {
+ flex-direction: column;
+ }
+
+ .arrow {
+ transform: rotate(90deg);
+ margin: 10px 0;
+ }
+ }
+ .processDiagram {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 40px 20px;
+ }
+
+ .heading {
+ font-size: 3vw;
+ font-weight: bold;
+ text-align: center;
+ }
+
+ .stepsContainer {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .arrow {
+ font-size: 24px;
+ margin: 0 20px;
+ display: none;
+ }
+
+ @media (max-width: 768px) {
+ .heading {
+ font-size: 6vw;
+ }
+ .stepsContainer {
+ flex-direction: column;
+ }
+
+ .arrow {
+ transform: rotate(90deg);
+ margin: 10px 0;
+ }
+ }
+
+ @media (min-width: 1500px) {
+ /* .processDiagram{
+
+ } */
+ }
+
+/*mobile view*/
+@media (max-width: 768px) {
+ .stepsContainer{
+ max-width: 100%;
+ }
+ .arrow {
+ display: block;
+ }
+}
\ No newline at end of file
diff --git a/src/modules/Public/TrivialIdeas/modules/process/process.tsx b/src/modules/Public/TrivialIdeas/modules/process/process.tsx
new file mode 100644
index 000000000..d06d4812b
--- /dev/null
+++ b/src/modules/Public/TrivialIdeas/modules/process/process.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import StepBox from '../../components/stepBox/stepBox';
+import styles from './Process.module.css';
+
+const ProcessDiagram = () => {
+const steps = [
+ {
+ number: 1,
+ title: 'Develop Your Project',
+ description: 'Unleash your programming skills and create something truly innovative.'
+ },
+ {
+ number: 2,
+ title: 'Hosted PWA Format',
+ description: 'Your project must be in the form of a hosted Progressive Web App.'
+ },
+ {
+ number: 3,
+ title: 'GitHub Repository',
+ description: 'Include a link to your GitHub repository in the About section of your PWA.'
+ },
+ {
+ number: 4,
+ title: 'Evaluation Criteria',
+ description: 'Projects will be evaluated based on the content, the GitHub repository and the deployed PWA.'
+ },
+ {
+ number: 5,
+ title: 'Discord Submission',
+ description: 'Share your project by posting it in our Trivial Ideas channel on Discord. Be sure to use the tag #buildinship.'
+ },
+ {
+ number: 6,
+ title: 'Win Amazing Prizes',
+ description: 'Submit your project and stand a chance to win cash prizes up to 1 Lakh and earn 400 karma points.'
+ },
+];
+
+ return (
+
+
How Does This Work?
+
+ {steps.map((step, index) => (
+
+ →
}
+
+ ))}
+
+
+ );
+};
+
+export default ProcessDiagram;
diff --git a/src/modules/Public/TrivialIdeas/modules/trivial.module.css b/src/modules/Public/TrivialIdeas/modules/trivial.module.css
new file mode 100644
index 000000000..a6207addc
--- /dev/null
+++ b/src/modules/Public/TrivialIdeas/modules/trivial.module.css
@@ -0,0 +1,309 @@
+@font-face{
+ font-family: 'pacifico';
+ src: url('../assets/font/Pacifico.ttf')
+
+}
+
+.container{
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding-left: 5rem;
+ padding-right: 5rem;
+ position: relative;
+ overflow: hidden;
+}
+.sidenav {
+ position: absolute;
+ top: 0;
+ right: -100%;
+ height: 100vh;
+ width: 100%;
+ background-color: black;
+ color: white;
+ display: flex;
+ flex-direction: column;
+ justify-content: start;
+ align-items: center;
+ padding: 2rem;
+ font-size: 2rem;
+ gap: 5rem;
+ z-index: 100;
+ transform: translateY(-10%);
+}
+.sidenav div:nth-child(2){
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 1rem;
+}
+.sidenav a:hover{
+ text-decoration: underline;
+}
+.navbar{
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1.2rem 0;
+ /* background: grey; */
+}
+
+.navbarLinks{
+ /* background: red; */
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-weight: 500;
+}
+
+.navbarLinks a{
+ /* margin-right: 2rem; */
+ padding: 0.8vw;
+ font-weight: bold;
+}
+
+.navbarLinks a:hover{
+ text-decoration: underline;
+}
+.no-scroll {
+ overflow: hidden;
+}
+.hamburger{
+ display: none;
+
+}
+.content{
+ font-size: 8vw;
+ padding-top: 8rem;
+ text-align: center;
+ line-height: 1.1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 4rem;
+}
+
+.bold_text{
+ font-size: 3vw;
+ font-weight: bold;
+}
+
+.content h1{
+ font-family: 'pacifico';
+ font-size: 4vw;
+ color: #FE2E6C;
+}
+.content p{
+ font-weight: bolder;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ letter-spacing: -0.025em;
+ font-size: 7vw;
+}
+.content img{
+ margin: 0px 10px;
+ object-position: center;
+ object-fit: contain;
+ width: 11vw;
+}
+.content .subText{
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 1rem;
+}
+.content .subText p{
+ font-weight: 600;
+ font-size: 21px;
+ color: #6E6E73;
+ line-height: 1;
+ letter-spacing: 0em;
+}
+.content2{
+ /* font-size: 3vw; */
+ /*font-weight: bold; */
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 5% 0% 5%;
+ gap: 3rem;
+}
+
+.content2 span{
+ font-family: pacifico;
+ color: #2E85FE;
+ font-weight: 100;
+}
+div[style*="padding: 0rem 0"] {
+ font-size: 1.4vw;
+ font-weight: 600;
+ color: #1D1D1F;
+}
+.content2 .patter_container{
+ display: flex;
+ gap: 2vw;
+}
+
+.content2 .patter_container .card{
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 5px;
+ border-radius: 1rem;
+ text-align: center;
+}
+
+.content2 .patter_container p{
+ font-size: medium;
+ font-weight: bold;
+ padding: 1rem;
+ word-wrap: break-word;
+ max-width: 250px;
+}
+.content3{
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 5% 0% 5%;
+ gap: 1rem;
+}
+.content3 div:nth-child(3){
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 8px;
+}
+.content4{
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 5% 0% 5%;
+ gap: 1rem;
+ font-size: medium;
+ font-weight: 700;
+ font-size: 1.4vw;
+ letter-spacing: -0.025rem;
+ line-height: 1.2;
+
+}
+.content4 h1{
+ font-size: 3vw;
+ font-weight: bold;
+}
+.content4 span{
+ font-family: pacifico;
+ font-weight: normal;
+ color: #FE2E6C;
+ /* font-weight: 100; */
+}
+.content4 .image_container{
+ padding: 2.5rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+
+}
+.content4 .image_container .arrow{
+ position: absolute;
+ right: 0;
+ transform: translateX(7vw);
+ width: 10vw;
+}
+
+@media (max-width: 768px) {
+ .bold_text{
+ font-size: 6vw;
+ }
+ .navbar .navbarLinks a{
+ margin-right: 1rem;
+ padding: 0.5rem;
+ display: none;
+ }
+ .hamburger{
+ display: block;
+ }
+ .container{
+ padding-left: 1.2rem;
+ padding-right: 1.2rem;
+ }
+ .content{
+ gap: 0.8rem;
+ padding-top: 2rem;
+ }
+ .content p{
+ font-size: 8.6vw;
+ line-height: normal;
+ }
+ .content .subText p{
+ font-size: 11px;
+ }
+ .content img{
+ margin: 0px 4px;
+ width: 60px;
+ }
+ .content h1{
+ font-size: 5vw;
+ }
+ .content2>div div{
+ padding: 0;
+ }
+ div[style*="padding: 0rem 0"] {
+ font-size: 2.5vw;
+ }
+ .content2 .patter_container{
+ flex-direction: column;
+ gap: 0.5rem;
+ }
+ .content2 .patter_container .card{
+ gap: 0px;
+ }
+ .content2 .patter_container .card p{
+ font-size: small;
+ padding: 0rem;
+ max-width: 150px;
+ }
+ .content2 .patter_container .card img{
+ /* max-height: 200px; */
+ max-width: 150px;
+ object-fit: contain;
+ }
+
+ .content3 div:nth-child(3){
+ gap: 4px;
+ }
+ .content4 h1{
+ font-size: 6vw;
+ }
+ .content4 P{
+ font-weight: 700;
+ font-size: 14px;
+ }
+ .content4 .image_container{
+ padding: 0rem 3rem;
+ }
+ .content4 .image_container .arrow{
+ transform: translateX(0.5vw);
+ /* width: 20vw; */
+ }
+}
+@media (max-width: 425px) {
+ .content p{
+ font-size: 24px;
+ }
+ .content img{
+ width: 50px;
+ }
+
+}
\ No newline at end of file
diff --git a/src/modules/Public/TrivialIdeas/modules/trivial.tsx b/src/modules/Public/TrivialIdeas/modules/trivial.tsx
new file mode 100644
index 000000000..70810e4e3
--- /dev/null
+++ b/src/modules/Public/TrivialIdeas/modules/trivial.tsx
@@ -0,0 +1,202 @@
+import {useState,useEffect} from "react";
+import styles from "./trivial.module.css";
+import logo from "../assets/µLearn.svg";
+import white_logo from "../assets/logo_whight.svg";
+import Button from "../components/botton/button";
+import Price from "./price";
+import ProcessDiagram from "./process/process";
+import Faqs from "./faq";
+import Footer from "../components/footer/footer";
+import pattern1 from "../assets/pattern1.png";
+import pattern2 from "../assets/pattern2.png";
+import pattern3 from "../assets/pattern3.png";
+import pattern4 from "../assets/pattern4.png";
+import steve from "../assets/steve.png"
+import elone from "../assets/elone.png"
+import mark from "../assets/mark.png"
+import peoples from "../assets/peoples.png"
+import arrow from "../assets/arrow.png"
+import { IoMenu } from "react-icons/io5";
+import { IoMdClose } from "react-icons/io";
+import { motion } from "framer-motion"
+
+
+const navbar = (handelClick:any) => {
+
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+
+const patterns = [
+ {
+ img: pattern1,
+ text: "A chance to build and deploy your ideas"
+ },
+ {
+ img: pattern2,
+ text: "Forge connections that elevate you"
+ },
+ {
+ img: pattern3,
+ text: "Get a chance to win ₹ 1 lakh prize pool"
+ },
+ {
+ img: pattern4,
+ text: "Get feedbacks from certified mentors"
+ }
+];
+
+function Trivial() {
+ const [isopen, setisopen] = useState(false);
+
+ useEffect(() => {
+ if (isopen) {
+ // Disable scrolling
+ document.body.style.overflow = 'hidden';
+ } else {
+ // Enable scrolling
+ document.body.style.overflow = 'auto';
+ }
+
+ // Clean up function to re-enable scrolling when the component unmounts
+ return () => {
+ document.body.style.overflow = 'auto';
+ };
+ }, [isopen]);
+
+ const handelSideNav = () => {
+ setisopen(!isopen);
+ // console.log("clicked");
+ }
+ return (
+ <>
+
+
+
+
+
+
+
+ {navbar(handelSideNav)}
+
+
Trivial Ideas
+
+
+ Turn
+
+ Crazy, Wild
+
+ Into
+
+
+
+
+ The ultimate playground for innovative minds ready to transform
+
+
+ even their wildest dreams into tangible projects.
+
+
+
+
+
+
+
+
Work on ideas that Excites you
+
+
This monthly event is your chance to transform your
+
'What If' ideas into something real. And guess what?
+
We’ll reward you for your creativity!
+
+
+
+ {
+ patterns.map((pattern, index) => {
+ return (
+
+
+
{pattern.text}
+
+ );
+ })
+ }
+
+
+
+
+
+
+
Some Crazy People
+
+
+
+
+
+
Let Us See Your Creation
+
submit now!
+
+
+
+
+
+
+
+ );
+}
+
+export default Trivial;
\ No newline at end of file
- 
-
- {/* Let's grow together */}
+ 
+ 
+ 
+ 
+