Merge pull request #102 from suvanbanerjee/main

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 />
     </>
   );
 }

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>
     );
 }

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;

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>
+</>
   );
 }

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>
   );
-}
+}

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;

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>

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}

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%",

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()}