Developed fully responsive "Explore by Category" section.

src/components/CategorySection/Category-Styles.css

@@ -0,0 +1,76 @@
+.category-section{
+    width: 100vw;
+    height: 100vh;
+    margin-bottom: 250px;
+}
+
+.category-subheading{
+    color: white !important;
+}
+
+.category-section-cards{
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    margin-top: 30px;
+}
+
+.category-card{
+    width: 30vw;
+    height: 380px;
+    background-color: rgba(64, 57, 75, 0.603) !important;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: 14px;
+    border: 1px solid white;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+.category-section-text{
+    text-align: center;
+    margin-top: 20px;
+    color: white;
+}
+
+.see-more{
+    width: 100vw;
+    display: flex;
+    justify-content: center;
+    margin-top: 70px;
+}
+
+.see-more-button{
+    width: 200px;
+    height: 50px;
+    background-color: black;
+    color: white;
+    border-radius: 100px;
+    font-size: 16px;
+    border: 4px solid yellowgreen;
+}
+
+@media (min-width: 300px) and (max-width : 750px) {
+    .category-section-cards{
+        flex-direction: column;
+        margin-top: 30px;
+    }
+    .category-card{
+        width: 80vw;
+        height: 40vh;
+        margin-bottom: 20px;
+        padding-left: 20px;
+        padding-right: 20px;
+    }
+    .category-section{
+        margin-bottom: 500px;
+    }
+}
+
+@media (min-width: 750px) and (max-width: 1200px) {
+    .category-card{
+        height: 40vh;
+    }
+}

src/components/CategorySection/Category.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import "./Category-Styles.css"
+import hackthons from "./assets/hackthon.png"
+import seminars from "./assets/seminars.png"
+import techtalks from "./assets/techtalks.png"
+
+const Category = () => {
+    return (
+        <div className='category-section'>
+            <div className="category-heading text-5xl md:text-8xl pt-10 text-center text-transparent font-[Bayon] bg-clip-text bg-gradient-to-r from-[#FCFF73] from-30% to-70% to-[#0085FF]">Explore</div>
+            <div className="category-subheading text-4xl md:text-5xl text-center text-transparent font-[Bayon] bg-clip-text bg-gradient-to-r from-[#FCFF73] from-30% to-70% to-[#0085FF]">By Category</div>
+            <div className="category-section-cards">
+                <div className="category-card">
+                    <img src={hackthons} alt="hackthons" />
+                    <p className='category-section-text'>Hackthons</p>
+                </div>
+                <div className="category-card">
+                    <img src={seminars} alt="seminar" />
+                    <p className='category-section-text'>Seminars</p>
+                </div>
+                <div className="category-card">
+                    <img src={techtalks} alt="techtalk" />
+                    <p className='category-section-text'>Tech Talks</p>
+                </div>
+            </div>
+            <div className="see-more">
+                <button className='see-more-button'>SEE MORE</button>
+            </div>
+        </div>
+    )
+}
+
+export default Category

src/components/LandingPage.jsx

@@ -3,6 +3,7 @@ import MainLanding from './MainLanding/MainLanding'
 import Join_us from './why_join_us/Join_us'
 import MeetOurTeam from './MeetOurTeam/MeetOurTeam'
 import Footer from './Footer/Footer'
+import Category from './CategorySection/Category'
 
 function LandingPage() {
   return (
@@ -11,6 +12,7 @@ function LandingPage() {
       <Join_us />
       <MeetOurTeam />
       {/* <Join_us /> */}
+      <Category/>
       <Footer/>
     </div>
   )