Button Adjustments

app/components/benefits/Benefits.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { BENEFITS_HOME_DATA, BenefitsHomeType } from './benefits-data';
+import BenefitsCard from './BenefitsCard';
+import { Button } from '@/components/ui/button';
+import Link from 'next/link';
+
+const Benefits = () => {
+  return (
+    <section className="w-full benefits-section py-16 px-4 sm:px-16 bg-muted">
+      <div className="benefits-heading flex flex-col gap-2 items-center mb-12">
+        <h2 className="text-4xl font-semibold text-center font-site_header">
+          Level Up with Flushing Tech
+        </h2>
+        <p className="text-muted-foreground text-xl text-center">Member Benefits</p>
+      </div>
+
+      <div className="cards-container grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto justify-items-center">
+        {BENEFITS_HOME_DATA.map(({ title, description, icon }: BenefitsHomeType, index) => (
+          <div
+            key={index}
+            className={index === BENEFITS_HOME_DATA.length - 1 ? "sm:col-span-2 lg:col-span-1 flex justify-center" : ""}
+          >
+            <BenefitsCard title={title} description={description} icon={icon} />
+          </div>
+        ))}
+      </div>
+
+      <div className="w-full flex justify-center mt-12">
+        <Link href='https://www.meetup.com/flushing-tech/' passHref target="_blank">
+          <Button size="xl" className='px-4 sm:px-10'>
+           See Everything We Offer
+          </Button>
+        </Link>
+      </div>
+    </section>
+  );
+};
+
+export default Benefits;

app/components/benefits/BenefitsCard.tsx

@@ -0,0 +1,19 @@
+
+import React from 'react';
+import { BenefitsHomeType } from './benefits-data';
+
+const BenefitsCard = ({ title, description, icon }: BenefitsHomeType) => {
+  const Icon = icon;
+
+  return (
+    <div className="flex flex-col items-center text-center px-4 sm:px-6 max-w-sm mx-auto">
+      <div className="flex items-center justify-center w-16 h-16 rounded-full border-2 border-site_orange mb-4">
+        <Icon className="h-6 w-6 text-orange-500" />
+      </div>
+      <h3 className="text-lg 2xl:text-2xl font-semibold mb-2">{title}</h3>
+      <p className="text-base text-muted-foreground">{description}</p>
+    </div>
+  );
+};
+
+export default BenefitsCard;

app/components/benefits/benefits-data.ts

@@ -0,0 +1,83 @@
+import { RocketIcon, Users, FileText, LucideIcon } from "lucide-react";
+
+export type BenefitsType = {
+  title: string;
+  description: string;
+};
+
+export type BenefitsHomeType = {
+  title: string;
+  description: string;
+  icon: LucideIcon;
+}
+
+export const BENEFITS_HOME_DATA: BenefitsHomeType[] = [
+  {
+    title: "Rapid Skill Growth",
+    description: "Sharpen your coding skills and learn new technologies fast by working on real-world challenges in a supportive, high-energy environment.",
+    icon: RocketIcon,
+  },
+  {
+    title: "Collaborative Networking",
+    description: "Meet other passionate developers, designers, and entrepreneurs. Build lasting connections that can lead to future projects, jobs, or startup ideas.",
+    icon: Users,
+  },
+  {
+    title: "Build Your Portfolio",
+    description: "Create tangible projects you can showcase to employers or clients. Every hackathon is a chance to walk away with a new portfolio piece and more experience.",
+    icon: FileText,
+  },
+];
+
+export const BENEFITS_DATA: BenefitsType[] = [
+  {
+    title: "Collaborative Hackathons",
+    description:
+      "Join hands-on coding events where you can brainstorm, build, and launch creative projects with like-minded individuals.",
+  },
+  {
+    title: "Real-World Experience",
+    description:
+      "Gain practical development experience by working on real projects under time constraints — just like in tech jobs.",
+  },
+  {
+    title: "Meet Developers & Creators",
+    description:
+      "Connect with developers, designers, and tech enthusiasts from Flushing and beyond. Expand your circle and make new friends.",
+  },
+  {
+    title: "Learn by Doing",
+    description:
+      "Whether you're a beginner or experienced, you'll level up by solving problems, debugging, and shipping ideas fast.",
+  },
+  {
+    title: "Get Inspired",
+    description:
+      "Hear from guest speakers, mentors, and fellow hackers about their journeys. Leave every event with new motivation.",
+  },
+  {
+    title: "Build Your Portfolio",
+    description:
+      "Add hackathon projects to your GitHub and resume — show employers what you’ve created, not just what you know.",
+  },
+  {
+    title: "Team Up with Others",
+    description:
+      "Find teammates with complementary skills. Designers, coders, product thinkers — build something awesome together.",
+  },
+  {
+    title: "Win Prizes & Recognition",
+    description:
+      "Compete for cool prizes and earn recognition from local businesses, mentors, and peers.",
+  },
+  {
+    title: "Stay Ahead of Trends",
+    description:
+      "Explore new tools, frameworks, and APIs. Hackathons are a playground for trying out cutting-edge tech.",
+  },
+  {
+    title: "Supportive Community",
+    description:
+      "No gatekeeping, just good vibes. Whether you’re building your first app or tenth, you’re welcome here.",
+  },
+];

app/page.tsx

@@ -4,14 +4,16 @@ import HeroComponent from "@/components/components-hero"
 import ProjectsComponent from "@/components/components-projects"
 import ConnectWithUsComponent from "@/components/components-connect-with-us"
 import FooterComponent from "@/components/components-footer"
+import Benefits from "./components/benefits/Benefits"
 
 export default function Homepage() {
   return (
     <div className="min-h-screen bg-[#FBE8D8]">
       <HeroComponent />
       <ProjectsComponent />
       <ConnectWithUsComponent />
+      <Benefits />
       <FooterComponent />
     </div>
   )
-}
+}

components/ui/button.tsx

@@ -20,13 +20,13 @@ const buttonVariants = cva(
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },
-      size: {
-        default: "h-9 px-6",
-        sm: "h-8 px-3 text-xs",
-        lg: "h-12 px-8 text-lg",
-        xl: "h-16 w-64 px-10 text-2xl",
-        icon: "h-9 w-9",
-      },
+  size: {
+    default: "h-9 px-6",
+    sm: "h-8 px-3 text-xs",
+    lg: "h-12 px-8 text-lg",
+    xl: "h-16 px-6 sm:px-10 text-lg sm:text-2xl",
+    icon: "h-9 w-9",
+  },
     },
     defaultVariants: {
       variant: "default",