diff --git a/app/(default)/page.tsx b/app/(default)/page.tsx
index bf8595d..0e9af01 100644
--- a/app/(default)/page.tsx
+++ b/app/(default)/page.tsx
@@ -4,6 +4,7 @@ export const metadata = {
 };
 
 import Hero from "@/components/hero";
+import WhatWeDo from "@/components/whatwedo";
 import Domains from "@/components/domains";
 import "../css/additional-styles/landing.css";
 import Activities from "@/components/activities";
@@ -14,13 +15,15 @@ import EventComponent from "@/components/eventcards";
 import Leads from "@/components/leads";
 import Achievements from '@/components/achievements';
 import Founder from "@/components/founder";
-// import Announce from "@/components/announcement";
+import Share from "@/components/share";
 
 
 export default function Home() {
   return (
     <>
       <Hero />
+      <WhatWeDo />
+      <Domains />
       <div className="flex flex-col justify-center items-center py-10 px-5 mb-20">
         <SparklesText text="Upcoming Events" className="text-4xl font-bold text-center text-gray-200 mb-4" />
         {/* <Image
@@ -55,9 +58,10 @@ export default function Home() {
       <Domains />
       <Activities />
       <Founder />
-      <Leads />
+      {/* <Leads /> */}
       <Achievements />
       <EventComponent />
+      <Share />
     </>
   );
 }
diff --git a/components/ActivityCard.tsx b/components/ActivityCard.tsx
index d1fc31d..87e5a1b 100644
--- a/components/ActivityCard.tsx
+++ b/components/ActivityCard.tsx
@@ -12,45 +12,49 @@ interface ActivityCardProps {
 
 export default function ActivityCard({...props}: ActivityCardProps) {
     return (
-      <div
-        className={cn(
-            "flex flex-col gap-4 md:gap-0 md:flex-row h-full px-8 md:px-24 text-center", 
-            !props.LeftAligned ? "md:text-left" : "md:text-right",
-            props.LeftAligned ? "" : "md:flex-row-reverse",
-        )}
-        data-aos="zoom-y-out"
-        data-aos-delay="150"
-      >
-        <div className="highlight flex-6">
-            <div className="flex flex-col bg-black-800 p-0 md:p-24 md:justify-center content-center">
-                <div className={cn(
-                        "mx-auto",
-                        !props.LeftAligned ? "md:mr-auto md:ml-0" : "md:ml-auto md:mr-0"
-                    )}>
-                    <HyperText
-                        className={cn("text-3xl font-bold text-green-500 text-wrap")}
-                        duration={200}
-                        text={props.Title}
-                    />
+        <div
+            className={cn(
+                "flex flex-col-reverse md:flex-row gap-4 h-full px-4 sm:px-8 md:px-24 text-center",
+                !props.LeftAligned ? "md:text-left" : "md:text-right",
+                props.LeftAligned ? "" : "md:flex-row-reverse",
+            )}
+            data-aos="zoom-y-out"
+            data-aos-delay="150"
+        >
+            <div className="highlight flex-6">
+                <div className="flex flex-col p-4 md:p-24 justify-center content-center bg-black-800">
+                    <div
+                        className={cn(
+                            "mx-auto",
+                            !props.LeftAligned ? "md:mr-auto md:ml-0" : "md:ml-auto md:mr-0"
+                        )}
+                    >
+                        <HyperText
+                            className={cn("text-2xl sm:text-3xl font-bold text-green-500")}
+                            duration={200}
+                            text={props.Title}
+                        />
+                    </div>
+                    <h2 className="text-xl sm:text-2xl font-semibold mb-4 -mt-2 sm:-mt-4 px-0">
+                        {props.Subtitle}
+                    </h2>
+                    <p className="text-base sm:text-lg px-0 text-gray-300">
+                        {props.Description}
+                    </p>
                 </div>
-                <h2 className="text-4xl font-semibold mb-4 -mt-4 px-0">{props.Subtitle}</h2>
-                <p className="text-lg px-0 text-gray-300">
-                    {props.Description}
-                </p>
             </div>
-        </div>
 
-        <div className="highlight md:flex-6 md:my-auto md:px-8">
-            <div className="highlight md:w-96 h-96 flex-3 flex items-center justify-center bg-black-900">
-                <Image
-                    src={props.ImageSrc}
-                    alt=""
-                    className="rounded-xl object-cover w-full h-full"
-                    width={"500"}
-                    height={"500"}
-                />
+            <div className="highlight flex-6 my-auto px-4 sm:px-8">
+                <div className="highlight w-full h-64 sm:w-96 sm:h-96 flex items-center justify-center bg-black-900">
+                    <Image
+                        src={props.ImageSrc}
+                        alt=""
+                        className="rounded-xl object-cover w-full h-full"
+                        width={500}
+                        height={500}
+                    />
+                </div>
             </div>
         </div>
-      </div>
     );
 }
\ No newline at end of file
diff --git a/components/achievements.tsx b/components/achievements.tsx
index 3dff8ac..53fb503 100644
--- a/components/achievements.tsx
+++ b/components/achievements.tsx
@@ -11,7 +11,9 @@ function Achievements() {
   return (
     <>
       <div className="container place-items-center font-bold pt-20 pb-5">
-        <h2 className="text-5xl text-white-800 text-center">Achievements</h2>
+        <h2 className="text-3xl sm:text-4xl text-white-800 text-center font-black">
+          Achievements
+        </h2>
       </div>
       <div className="sm:w-[50%] md:w-[40%]  m-auto pt-11">
         <Carousel slides={slides} />
@@ -20,4 +22,4 @@ function Achievements() {
   );
 }
 
-export default Achievements;
+export default Achievements;
\ No newline at end of file
diff --git a/components/activities.tsx b/components/activities.tsx
index 0a62115..f0ffca3 100644
--- a/components/activities.tsx
+++ b/components/activities.tsx
@@ -11,7 +11,7 @@ interface ActivityData {
 }
 
 const activityData: ActivityData[] = [
-  { Title: "Competitive Programming", Subtitle: "PB Hustle", Image: "/images/cp.jpeg", Description: "Point Blank has organized over 40+ editions of its PB Hustle coding contest, where participants solve 5-7 increasingly difficult problems in their preferred programming language. The contest aims to enhance the programming culture in colleges and help teams qualify for the ACM ICPC. Impressively, DSCE's leading programmers have risen through this platform, with participation in the CodeChef Long Challenge expanding from just 3 to over 70+ participants."  },
+  { Title: "CP Contests", Subtitle: "PB Hustle", Image: "/images/cp.jpeg", Description: "Point Blank has organized over 40+ editions of its PB Hustle coding contest, where participants solve 5-7 increasingly difficult problems in their preferred programming language. The contest aims to enhance the programming culture in colleges and help teams qualify for the ACM ICPC. Impressively, DSCE's leading programmers have risen through this platform, with participation in the CodeChef Long Challenge expanding from just 3 to over 70+ participants."  },
   { Title: "Development", Subtitle: "PB Chronicles", Image: "/images/dev.jpg", Description: "Point Blank has hosted over 100+ workshops, covering a wide range of topics including open source, DevOps, machine learning, placement preparation, data structures and algorithms, and mobile and web development, among others. These workshops are typically conducted in an informal and unscripted manner, though we do document some of our most significant sessions. One notable example is our primer on F/OSS development."  },
   { Title: "Hackathons", Subtitle: "Smart India Hackathon", Image: "/images/hack.jpg", Description: "Each year, we organize the internal round of the Smart India Hackathon. In the 2020 edition, over 300+ individuals from DSCE participated. Two of our teams advanced to the finals, with one emerging as the winner of the software edition. Along with this, teams from Point Blank have won hackathons all across the city and country."  },
   { Title: "Cybersecurity", Subtitle: "PB CTF", Image: "/images/ctf.jpg", Description: "We organize workshops and sessions on various topics in cybersecurity, including hands-on practice on different platforms. In 2023, we launched the first in-house Capture The Flag event, PBCTF, which attracted over 70+ participants."  },
@@ -20,25 +20,22 @@ const activityData: ActivityData[] = [
 export default function Activities() {
 
   return (
-    <>
-      <div className="flex flex-col place-items-center font-bold pt-20 pb-10">
-        <h2 className="text-5xl text-white-800 text-center mb-0">Activities</h2>
-      </div>
-
-      <div className="flex flex-col gap-16 md:gap-0">
-        {
-          activityData.map((value, index) => {
-            return (
-              <ActivityCard key={index}
-                            Title={value.Title}
-                            Subtitle={value.Subtitle}
-                            Description={value.Description}
-                            ImageSrc={value.Image}
-                            LeftAligned={index % 2 == 0} />
-            )
-          })
-        }
-      </div>
-    </>
+<>
+  <div className="flex flex-col items-center font-bold pt-20 pb-10">
+    <h2 className="text-3xl sm:text-4xl md:text-5xl text-white text-center font-black mb-0">Activities</h2>
+  </div>
+  <div className="flex flex-col gap-12 md:gap-16">
+    {activityData.map((value, index) => (
+      <ActivityCard
+        key={index}
+        Title={value.Title}
+        Subtitle={value.Subtitle}
+        Description={value.Description}
+        ImageSrc={value.Image}
+        LeftAligned={index % 2 === 0}
+      />
+    ))}
+  </div>
+</>
   );
 }
diff --git a/components/domains.tsx b/components/domains.tsx
index 2b66a5d..679a772 100644
--- a/components/domains.tsx
+++ b/components/domains.tsx
@@ -64,21 +64,19 @@ const Card = ({ img, name }: { img: string; name: string }) => {
 
 export default function Domains() {
   return (
-    <div className="">
-      <h2 className="text-5xl font-bold text-center text-gray-200 m-2">
-        Domains We Explore
+    <div className="relative">
+      <h2 className="text-2xl sm:text-3xl md:text-4xl font-black text-center text-gray-200 m-4">
+        Domains we ❤️
       </h2>
-      <p className="text-md text-center text-gray-300 mb-8">
-        Our club covers a wide range of interests and fields, bringing unique
-        perspectives and expertise to every project!
+      <p className="text-base sm:text-lg md:text-xl text-center text-gray-100 mb-6 sm:mb-8 px-2">
+        Our club covers a wide range of interests and fields, bringing unique perspectives and expertise to every project!
       </p>
+
       <Marquee pauseOnHover className="[--duration:30s]">
         {domains.map((domain) => (
           <Card key={domain.name} {...domain} />
         ))}
       </Marquee>
-      <div className="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-background"></div>
-      <div className="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-background"></div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/components/eventcards.tsx b/components/eventcards.tsx
index 41fd8f7..208925b 100644
--- a/components/eventcards.tsx
+++ b/components/eventcards.tsx
@@ -29,9 +29,9 @@ const EventComponent = () => {
   return (
     <>
       <div className="container place-items-center font-bold pt-20 pb-10">
-        <h2 className="text-5xl text-white-800 text-center">Events</h2>
-        <h5 className="text-2xl text-white-800 text-center">
-          We organise lots of student centric activities
+        <h2 className="text-3xl sm:text-4xl text-white-800 text-center font-black">Events</h2>
+        <h5 className="text-lg sm:text-xl text-white-800 text-center">
+          We organise lots of student-centric activities
         </h5>
       </div>
       <div className="view">
@@ -59,4 +59,4 @@ const EventComponent = () => {
   );
 };
 
-export default EventComponent;
+export default EventComponent;
\ No newline at end of file
diff --git a/components/founder.tsx b/components/founder.tsx
index a1aa7ab..ab4e811 100644
--- a/components/founder.tsx
+++ b/components/founder.tsx
@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import React from 'react';
-export default function Teams() {
 
+export default function Teams() {
   const teamData = [
     {
       url: '/images/founder1.png',
@@ -22,29 +22,33 @@ export default function Teams() {
 
   return (
     <section className="relative" data-aos="zoom-y-out" data-aos-delay="150">
-      <div className="py-20">
+      <div className="py-16 md:py-20">
         <div className="container mx-auto px-6 md:px-12 xl:px-32">
-          <div className="mb-16 text-center">
-            <div className="container place-items-center font-bold pt-20 pb-4">
-              <h2 className="text-5xl text-white-800 text-center">Our Founding Members</h2>
+          <div className="mb-12 md:mb-16 text-center">
+            <div className="font-bold pt-10 md:pt-20 pb-4">
+              <h2 className="text-3xl sm:text-4xl text-center font-black">
+                Our Founding Members
+              </h2>
             </div>
-            <p className="text-gray-300 text-xl lg:w-8/12 lg:mx-auto">
-              Point Blank started as a project by three friends who wanted to induce a change by providing a platform for like minded smart students to come together and learn from each other.
+            <p className="text-gray-300 text-lg sm:text-xl lg:w-8/12 lg:mx-auto">
+              Point Blank started as a project by three friends who wanted to induce a change by providing a platform for like-minded, smart students to come together and learn from each other.
             </p>
           </div>
-          <div className="flex flex-col md:flex-row gap-16 md:gap-0">
+          <div className="flex flex-col md:flex-row gap-16 md:gap-8 lg:gap-16">
             {teamData.map((member, index) => (
-              <div key={index} className="flex-1 space-y-8 text-center">
+              <div key={index} className="flex-1 space-y-6 text-center">
                 <Image
-                  className="w-64 h-64 mx-auto object-cover rounded-xl md:w-40 md:h-40 lg:w-64 lg:h-64"
+                  className="w-40 h-40 sm:w-64 sm:h-64 mx-auto object-cover rounded-xl"
                   src={member.url}
                   alt={member.name}
                   width="640"
                   height="805"
                 />
-                <div className='flex flex-col gap-2'>
-                  <h4 className="text-3xl md:text-2xl font-bold text-green-500">{member.name}</h4>
-                  <p className="text-gray-300 text-lg md:px-10">
+                <div className="flex flex-col gap-2">
+                  <h4 className="text-2xl sm:text-3xl font-bold text-green-500">
+                    {member.name}
+                  </h4>
+                  <p className="text-gray-300 text-base sm:text-lg md:px-6 lg:px-10">
                     {member.description}
                   </p>
                 </div>
diff --git a/components/hero.tsx b/components/hero.tsx
index 6c49251..710573b 100644
--- a/components/hero.tsx
+++ b/components/hero.tsx
@@ -3,38 +3,36 @@ import Link from "next/link";
 import Image from "next/image";
 import FlickeringGrid from "@/components/magicui/flickering-grid";
 import { cn } from "@/lib/server/utils";
+import TypingAnimation from "@/components/ui/typing-animation";
 import "../app/css/additional-styles/landing.css";
 
+
 export default function Hero() {
   return (
     <section className="relative h-screen flex justify-center items-center">
-      <div className="max-w-6xl mx-auto px-4 sm:px-6 ">
-        <div className="pt-32 pb-5 md:pt-40 md:pb-5">
-          <div className="pb-5 md:pb-5">
-            <div className="max-w-6xl mx-auto">
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6">
+          <div className="pt-20 sm:pt-32 pb-5 md:pt-40 md:pb-5">
+            <div className="pb-5 md:pb-5">
+              <div className="max-w-6xl mx-auto">
                 <div>
-                  <Image
-                    src={logo}
-                    alt="Logo"
-                    height={100}
-                    className="mx-auto mb-8"
+                  <TypingAnimation
+                    className="text-3xl sm:text-3xl md:text-4xl font-bold mb-6 sm:mb-8"
+                    text="Hey there! 👋"
+                    duration={50}
                   />
                   <p
-                    className="text-xl text-gray-100 mb-8"
+                    className="text-3xl sm:text-3xl md:text-4xl text-gray-100 mb-6 sm:mb-8 font-bold"
                     data-aos="zoom-y-out"
-                    data-aos-delay="350"
+                    data-aos-delay="450"
                   >
-                    We are a student run tech community at Dayananda Sagar
-                    College of Engineering, Bangalore. We aim to provide a
-                    platform for students to learn, grow and innovate.
+                    We are a student-run <span className="bg-[#00c853] p-2 sm:p-3 rounded-xl" style={{ wordBreak: 'keep-all' }}>tech-community</span><br />
+                    from Dayananda Sagar College of Engineering.
                   </p>
                 </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
       <FlickeringGrid
         className="z-1 absolute inset-0 size-full"
         squareSize={8}
diff --git a/components/magicui/flickering-grid.tsx b/components/magicui/flickering-grid.tsx
index 9df6fec..8df6cb4 100644
--- a/components/magicui/flickering-grid.tsx
+++ b/components/magicui/flickering-grid.tsx
@@ -22,7 +22,7 @@ interface FlickeringGridProps {
 const FlickeringGrid: React.FC<FlickeringGridProps> = ({
   squareSize = 4,
   gridGap = 6,
-  flickerChance = 0.3,
+  flickerChance = 0.5,
   color = "rgb(0, 0, 0)",
   width,
   height,
@@ -170,7 +170,7 @@ const FlickeringGrid: React.FC<FlickeringGridProps> = ({
   return (
     <canvas
       ref={canvasRef}
-      className={`size-full pointer-events-none ${className}`}
+      className={`size-full pointer-events-none ${className} -z-10`}
       style={{
         width: width || "100%",
         height: height || "100%",
diff --git a/components/magicui/hyper-text.tsx b/components/magicui/hyper-text.tsx
index a85517d..cdd08b8 100644
--- a/components/magicui/hyper-text.tsx
+++ b/components/magicui/hyper-text.tsx
@@ -67,14 +67,15 @@ export default function HyperText({
 
   return (
     <div
-      className="overflow-hidden py-2 flex cursor-default scale-100"
+      className="py-2 flex cursor-default scale-100 overflow-hidden"
       onMouseEnter={triggerAnimation}
+      onTouchStart={triggerAnimation}
     >
       <AnimatePresence mode="wait">
         {displayText.map((letter, i) => (
           <motion.p
             key={i}
-            className={cn("font-mono", letter === " " ? "w-3" : "", className)}
+            className={cn("font-mono", letter === " " ? "w-2" : "", className)}
             {...framerProps}
           >
             {letter.toUpperCase()}
diff --git a/components/magicui/sparkles-text.tsx b/components/magicui/sparkles-text.tsx
index 693c16b..e116e47 100644
--- a/components/magicui/sparkles-text.tsx
+++ b/components/magicui/sparkles-text.tsx
@@ -49,7 +49,7 @@ interface SparklesTextProps {
   sparklesCount?: number;
 
   /**
-   * @default "{first: '#9E7AFF', second: '#FE8BBB'}"
+   * @default "{first: '#FFFFFF', second: '#00c853'}"
    * @type string
    * @description
    * The colors of the sparkles
@@ -62,7 +62,7 @@ interface SparklesTextProps {
 
 const SparklesText: React.FC<SparklesTextProps> = ({
   text,
-  colors = { first: "#9E7AFF", second: "#FE8BBB" },
+  colors = { first: "#FFFFFF", second: "#00c853" },
   className,
   sparklesCount = 10,
   ...props
diff --git a/components/share.tsx b/components/share.tsx
new file mode 100644
index 0000000..41660bf
--- /dev/null
+++ b/components/share.tsx
@@ -0,0 +1,70 @@
+import Image from 'next/image'; // Assuming you are using next/image for optimization
+
+export default function Share() {
+  return (
+    <section className="py-12">
+      <div className="text-center mb-12">
+        <h1 className="text-3xl sm:text-4xl font-extrabold text-gray-100 mt-2 p-2">
+          Stay <span className="text-green-500">Connected</span>
+        </h1>
+      </div>
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {/* Card 1 */}
+          <div className="bg-gradient-to-tr from-blue-600 to-blue-300 p-6 rounded-lg shadow-md text-white rounded-xl">
+            <div className="flex justify-start mb-4">
+              {/* Replace the src with the actual Slack logo you use */}
+              <Image
+                src="/images/ln.png"
+                alt="Slack Logo"
+                width={150}
+                height={50}
+              />
+            </div>
+            <h3 className="text-lg font-bold mb-2">Follow us on Linkedin</h3>
+            <p>
+            We post about upcoming events, activities, and other cool stuff on Instagram.
+            </p>
+            <a className="btn-sm px-4 py-2 text-l font-bold bg-gradient-to-tr from-blue-600 to-blue-800 mx-3 rounded-xl mt-10" href="https://www.linkedin.com/company/point-blank-d">
+              Follow Us
+            </a>
+          </div>
+
+          {/* Card 2 */}
+          <div className="bg-gradient-to-tr from-purple-400 to-pink-500 p-6 rounded-lg shadow-md text-white rounded-xl">
+            <div className="flex justify-start mb-4">
+              {/* Replace with GitHub logo */}
+              <Image
+                src="/images/ig.png"
+                alt="Insta Logo"
+                width={150}
+                height={50}
+              />
+            </div>
+            <h3 className="text-lg font-bold mb-2">Follow Us On Instagram</h3>
+            <p>
+              We post about upcoming events, activities, and other cool stuff on Instagram.
+            </p>
+            <a className="btn-sm px-4 py-2 text-l font-bold text-white bg-gradient-to-tr from-purple-400 to-pink-500 mx-3 rounded-xl mt-10" href="https://www.instagram.com/pointblank_dsce/">
+              Follow Us
+            </a>
+          </div>
+
+          {/* Card 3 */}
+            <div className="bg-gradient-to-tr from-green-500 to-green-300 p-6 rounded-lg shadow-md text-white rounded-xl">
+            <div className="flex justify-start mb-4">
+              <p className="text-2xl font-bold">📄 Brochure </p>
+            </div>
+            <h3 className="text-lg font-bold mb-2">Download our Brochure</h3>
+            <p>
+              We have listed all of recent events, activities, and other stats in our brochure.
+            </p>
+            <a className="btn-sm px-4 py-2 text-l font-bold bg-gradient-to-tr from-green-500 to-green-300 mx-3 rounded-xl mt-10" href="/brochure.pdf">
+              Download Now
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/components/ui/typing-animation.tsx b/components/ui/typing-animation.tsx
new file mode 100644
index 0000000..b9cbd72
--- /dev/null
+++ b/components/ui/typing-animation.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { cn } from "@/lib/server/utils";
+
+interface TypingAnimationProps {
+  text: string;
+  duration?: number;
+  className?: string;
+}
+
+export default function TypingAnimation({
+  text,
+  duration = 200,
+  className,
+}: TypingAnimationProps) {
+  const [displayedText, setDisplayedText] = useState<string>("");
+  const [i, setI] = useState<number>(0);
+
+  useEffect(() => {
+    const typingEffect = setInterval(() => {
+      if (i < text.length) {
+        setDisplayedText(text.substring(0, i + 1));
+        setI(i + 1);
+      } else {
+        clearInterval(typingEffect);
+      }
+    }, duration);
+
+    return () => {
+      clearInterval(typingEffect);
+    };
+  }, [duration, i]);
+
+  return (
+    <h1
+      className={cn(
+        "font-display text-4xl font-bold leading-[5rem] tracking-[-0.02em] drop-shadow-sm",
+        className,
+      )}
+    >
+      {displayedText ? displayedText : text}
+    </h1>
+  );
+}
diff --git a/components/whatwedo.tsx b/components/whatwedo.tsx
new file mode 100644
index 0000000..8d16965
--- /dev/null
+++ b/components/whatwedo.tsx
@@ -0,0 +1,57 @@
+import Image from "next/image";
+import logo from "@/public/images/alien.webp";
+
+export default function WhatWeDo() {
+  return (
+    <section className="py-12 max-w-6xl md:mx-20 mx-5">
+      <div className="max-w-7xl mx-auto px-6 lg:px-8">
+        <div className="flex flex-col lg:flex-row items-center justify-between">
+          {/* Left Column */}
+          <div className="lg:w-1/2 mb-8 lg:mb-0 text-center lg:text-left">
+            <h2 className="text-3xl sm:text-4xl font-black mb-4">
+              Our <span className="bg-clip-text text-transparent bg-gradient-to-r from-green-100 to-[#00c853]">Mission</span>, together.
+            </h2>
+            <p className="text-gray-200 text-base sm:text-lg leading-relaxed mb-6">
+              In Point Blank, we believe in the concept of no spoon-feeding. We are here to help you learn and grow together. We are a community of coders, hackers, developers, and tech enthusiasts passionate about technology and learning.
+            </p>
+            {/* List of Values */}
+            <div className="text-left">
+              <div className="flex items-start mb-4">
+                <div className="text-[#00c853] font-bold text-xl sm:text-2xl mr-4">1</div>
+                <div>
+                  <h3 className="font-semibold text-lg sm:text-xl">Connect with other coders</h3>
+                  <p className="text-gray-400 text-sm sm:text-base">
+                    Have a coding question? Looking for project feedback? Just hit the Pseudorandom group chat.
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-start mb-4">
+                <div className="text-[#00c853] font-bold text-xl sm:text-2xl mr-4">2</div>
+                <div>
+                  <h3 className="font-semibold text-lg sm:text-xl">Want to learn something new?</h3>
+                  <p className="text-gray-400 text-sm sm:text-base">
+                    We have a variety of people willing to help you learn new things. Dont just ask how to get started, ask what to do next.
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-start mb-4">
+                <div className="text-[#00c853] font-bold text-xl sm:text-2xl mr-4">3</div>
+                <div>
+                  <h3 className="font-semibold text-lg sm:text-xl">Feeling bored?</h3>
+                  <p className="text-gray-400 text-sm sm:text-base">
+                    We are not just about coding. We are also a group of friends who love to play games, going out on trips, and having fun.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          {/* Right Column with Image */}
+          <div className="lg:w-1/2 flex justify-left lg:justify-end">
+            <Image src={logo} alt="Logo" width={300} height={300} className="shadow-lg rounded-lg" />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/public/brochure.pdf b/public/brochure.pdf
new file mode 100644
index 0000000..6d73f4d
Binary files /dev/null and b/public/brochure.pdf differ
diff --git a/public/images/alien.webp b/public/images/alien.webp
new file mode 100644
index 0000000..c992f8c
Binary files /dev/null and b/public/images/alien.webp differ
diff --git a/public/images/ig.png b/public/images/ig.png
new file mode 100644
index 0000000..cdd0785
Binary files /dev/null and b/public/images/ig.png differ
diff --git a/public/images/ln.png b/public/images/ln.png
new file mode 100644
index 0000000..8029eac
Binary files /dev/null and b/public/images/ln.png differ
diff --git a/public/images/v.gif b/public/images/v.gif
new file mode 100644
index 0000000..808d4ca
Binary files /dev/null and b/public/images/v.gif differ