diff --git a/app/index.css b/app/index.css
index 3b19d49..83a196d 100644
--- a/app/index.css
+++ b/app/index.css
@@ -3,3 +3,99 @@
 /* body {
   background-color: #000000;
 } */
+
+/* JoinCommunity Professional Card Animations */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes borderGlow {
+  0%, 100% {
+    opacity: 0.3;
+    filter: blur(0px);
+  }
+  50% {
+    opacity: 0.6;
+    filter: blur(1px);
+  }
+}
+
+@keyframes borderSlide {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes breathe {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+  50% {
+    transform: scale(1.2);
+    opacity: 0.8;
+  }
+}
+
+@keyframes countUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes expandWidth {
+  from {
+    width: 0;
+    opacity: 0;
+  }
+  to {
+    width: 3rem;
+    opacity: 1;
+  }
+}
+
+/* HeroSection Professional Card Animations */
+@keyframes fadeInScale {
+  from {
+    opacity: 0;
+    transform: scale(0.9) translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes progressFill {
+  from {
+    width: 0%;
+  }
+  to {
+    width: 85%;
+  }
+}
+
+@keyframes shimmerBorder {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
diff --git a/app/page.js b/app/page.js
index a19ba73..902455b 100644
--- a/app/page.js
+++ b/app/page.js
@@ -1,6 +1,7 @@
 import React from "react";
 import HeroSection from "../components/home/HeroSection";
 import QuestionSection from "../components/home/QuestionSection";
+import FAQSection from "../components/home/FAQSection";
 import JoinCommunity from "../components/home/JoinCommunity";
 
 const DevCrackPage = () => {
@@ -12,6 +13,9 @@ const DevCrackPage = () => {
       {/* Questions by Technology */}
       <QuestionSection />
 
+      {/* FAQ Section */}
+      <FAQSection />
+
       {/* Join Our Community */}
       <JoinCommunity />
     </div>
diff --git a/components/home/FAQSection.jsx b/components/home/FAQSection.jsx
new file mode 100644
index 0000000..6f7c9af
--- /dev/null
+++ b/components/home/FAQSection.jsx
@@ -0,0 +1,278 @@
+"use client";
+import React, { useState } from "react";
+import {
+  HiOutlineQuestionMarkCircle,
+  HiOutlinePlus,
+  HiOutlineMinus,
+  HiOutlineLightBulb,
+  HiOutlineAcademicCap,
+  HiOutlineChevronRight,
+} from "react-icons/hi";
+import { BiCodeBlock, BiSupport, BiRocket } from "react-icons/bi";
+import { FiBook, FiTarget, FiUsers, FiTrendingUp } from "react-icons/fi";
+
+const FAQSection = () => {
+  const [activeIndex, setActiveIndex] = useState(null);
+  const [activeCategory, setActiveCategory] = useState("general");
+
+  const categories = [
+    { id: "general", name: "General", icon: <HiOutlineLightBulb />, color: "from-blue-400 to-cyan-400" },
+    { id: "learning", name: "Learning Path", icon: <HiOutlineAcademicCap />, color: "from-purple-400 to-pink-400" },
+    { id: "technical", name: "Technical", icon: <BiCodeBlock />, color: "from-green-400 to-emerald-400" },
+    { id: "community", name: "Community", icon: <FiUsers />, color: "from-orange-400 to-red-400" },
+  ];
+
+  const faqs = {
+    general: [
+      {
+        question: "What makes Dev Crack different from other interview prep platforms?",
+        answer: "Dev Crack is 100% free, open-source, and community-driven. We focus on real interview questions from actual developer experiences, with detailed explanations and multiple solution approaches. Our content is constantly updated by active developers worldwide.",
+        icon: <FiTarget className="w-5 h-5" />,
+      },
+      {
+        question: "Is Dev Crack really free forever?",
+        answer: "Yes! Dev Crack is completely free and will always remain free. We believe in democratizing technical education and interview preparation. No hidden fees, no premium tiers - everything is accessible to everyone.",
+        icon: <BiRocket className="w-5 h-5" />,
+      },
+      {
+        question: "How often is the content updated?",
+        answer: "Our content is updated daily through community contributions. We review and merge pull requests regularly, ensuring you always have access to the latest interview trends and questions from the tech industry.",
+        icon: <FiTrendingUp className="w-5 h-5" />,
+      },
+    ],
+    learning: [
+      {
+        question: "What's the recommended learning path for beginners?",
+        answer: "Start with HTML/CSS fundamentals, then progress to JavaScript basics. Once comfortable, move to React for frontend or Node.js for backend. We recommend spending 2-3 weeks on each technology, practicing with our questions daily.",
+        icon: <FiBook className="w-5 h-5" />,
+      },
+      {
+        question: "How should I use Dev Crack for interview preparation?",
+        answer: "Begin with basic questions in your chosen technology, then progress to intermediate and advanced levels. Practice explaining your solutions out loud, and try to solve each problem multiple ways. Aim for 5-10 questions daily for optimal retention.",
+        icon: <HiOutlineAcademicCap className="w-5 h-5" />,
+      },
+      {
+        question: "Can I track my learning progress?",
+        answer: "Currently, we encourage self-tracking through note-taking. However, we're working on implementing a progress tracking feature that will help you monitor your learning journey and identify areas for improvement.",
+        icon: <FiTarget className="w-5 h-5" />,
+      },
+    ],
+    technical: [
+      {
+        question: "What technologies are covered in Dev Crack?",
+        answer: "We cover HTML/CSS, JavaScript, React, Redux, Next.js, Node.js, Express.js, MongoDB, and Mongoose. Each technology has questions categorized into basic, intermediate, and advanced levels with comprehensive explanations.",
+        icon: <BiCodeBlock className="w-5 h-5" />,
+      },
+      {
+        question: "Are code examples provided with answers?",
+        answer: "Yes! Every answer includes practical code examples with detailed explanations. We show multiple approaches when applicable, discuss time/space complexity, and highlight best practices and common pitfalls.",
+        icon: <HiOutlineLightBulb className="w-5 h-5" />,
+      },
+      {
+        question: "How technical are the advanced questions?",
+        answer: "Our advanced questions cover system design, performance optimization, security considerations, and complex problem-solving scenarios that you might encounter in senior developer interviews at top tech companies.",
+        icon: <BiRocket className="w-5 h-5" />,
+      },
+    ],
+    community: [
+      {
+        question: "How can I contribute to Dev Crack?",
+        answer: "You can contribute by submitting new questions, improving existing answers, fixing bugs, or enhancing documentation. Simply fork our GitHub repository, make your changes, and submit a pull request. Check our CONTRIBUTING.md for guidelines.",
+        icon: <FiUsers className="w-5 h-5" />,
+      },
+      {
+        question: "Is there a community where I can discuss questions?",
+        answer: "Yes! Join our Discord server with 1000+ active members. You can discuss questions, share interview experiences, participate in mock interviews, and get help from experienced developers worldwide.",
+        icon: <BiSupport className="w-5 h-5" />,
+      },
+      {
+        question: "Can I request specific topics or questions?",
+        answer: "Absolutely! Open an issue on our GitHub repository or discuss it in our Discord community. We actively consider community requests and prioritize topics based on demand and relevance to current interview trends.",
+        icon: <HiOutlineQuestionMarkCircle className="w-5 h-5" />,
+      },
+    ],
+  };
+
+  const toggleAccordion = (index) => {
+    setActiveIndex(activeIndex === index ? null : index);
+  };
+
+  return (
+    <section className="py-24 bg-gradient-to-b from-black via-gray-950 to-black relative overflow-hidden">
+      {/* Background Elements */}
+      <div className="absolute inset-0">
+        {/* Gradient Mesh */}
+        <div className="absolute top-1/4 left-0 w-96 h-96 bg-teal-500/5 rounded-full blur-3xl"></div>
+        <div className="absolute bottom-1/4 right-0 w-96 h-96 bg-green-500/5 rounded-full blur-3xl"></div>
+        
+        {/* Grid Pattern */}
+        <div 
+          className="absolute inset-0 opacity-10"
+          style={{
+            backgroundImage: `linear-gradient(rgba(34, 197, 94, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(34, 197, 94, 0.1) 1px, transparent 1px)`,
+            backgroundSize: '50px 50px'
+          }}
+        ></div>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-4 relative z-10">
+        {/* Section Header */}
+        <div className="text-center mb-16">
+          <div className="inline-flex items-center justify-center p-2 bg-gradient-to-r from-teal-500/10 to-green-500/10 rounded-full mb-4 backdrop-blur-sm border border-teal-500/20">
+            <HiOutlineQuestionMarkCircle className="w-5 h-5 text-teal-400 mr-2" />
+            <span className="text-sm font-bold text-teal-400 uppercase tracking-wider">Frequently Asked</span>
+          </div>
+          
+          <h2 className="text-4xl sm:text-5xl lg:text-6xl font-black mb-6">
+            <span className="text-white">Got Questions?</span>
+            <br />
+            <span className="bg-gradient-to-r from-teal-400 via-green-400 to-teal-400 bg-clip-text text-transparent">
+              We've Got Answers
+            </span>
+          </h2>
+          
+          <p className="text-gray-400 text-lg sm:text-xl max-w-3xl mx-auto">
+            Everything you need to know about Dev Crack and your journey to interview success
+          </p>
+        </div>
+
+        {/* Category Tabs */}
+        <div className="flex flex-wrap justify-center gap-4 mb-12">
+          {categories.map((category) => (
+            <button
+              key={category.id}
+              onClick={() => {
+                setActiveCategory(category.id);
+                setActiveIndex(null);
+              }}
+              className={`relative group px-6 py-3 rounded-xl transition-all duration-300 ${
+                activeCategory === category.id
+                  ? 'bg-gradient-to-r ' + category.color + ' text-white shadow-lg shadow-teal-500/20'
+                  : 'bg-gray-900/50 text-gray-400 hover:text-white border border-gray-800 hover:border-gray-700'
+              }`}
+            >
+              {/* Active Indicator */}
+              {activeCategory === category.id && (
+                <div className="absolute inset-0 bg-white/10 rounded-xl animate-pulse"></div>
+              )}
+              
+              <div className="relative flex items-center gap-2">
+                <span className="text-lg">{category.icon}</span>
+                <span className="font-medium">{category.name}</span>
+                {activeCategory === category.id && (
+                  <span className="ml-2 px-2 py-0.5 bg-white/20 rounded-full text-xs">
+                    {faqs[category.id].length}
+                  </span>
+                )}
+              </div>
+            </button>
+          ))}
+        </div>
+
+        {/* FAQ Accordion */}
+        <div className="max-w-4xl mx-auto space-y-4">
+          {faqs[activeCategory].map((faq, index) => (
+            <div
+              key={index}
+              className="group"
+              style={{
+                animation: `fadeInUp 0.5s ease-out forwards`,
+                animationDelay: `${index * 0.1}s`,
+                opacity: 0,
+              }}
+            >
+              <div className="relative">
+                {/* Glow Effect */}
+                <div className={`absolute inset-0 bg-gradient-to-r ${
+                  categories.find(c => c.id === activeCategory)?.color
+                } rounded-2xl opacity-0 group-hover:opacity-10 blur-xl transition-opacity duration-500`}></div>
+                
+                {/* Accordion Item */}
+                <div className="relative bg-gray-900/40 backdrop-blur-xl border border-gray-800/50 rounded-2xl overflow-hidden hover:border-gray-700/50 transition-all duration-300">
+                  {/* Question Header */}
+                  <button
+                    onClick={() => toggleAccordion(index)}
+                    className="w-full px-8 py-6 flex items-center justify-between text-left hover:bg-gray-800/30 transition-colors duration-300"
+                  >
+                    <div className="flex items-center gap-4 flex-1">
+                      {/* Icon Container */}
+                      <div className={`p-3 bg-gradient-to-br ${
+                        categories.find(c => c.id === activeCategory)?.color
+                      } rounded-xl opacity-80`}>
+                        <div className="text-white">
+                          {faq.icon}
+                        </div>
+                      </div>
+                      
+                      {/* Question Text */}
+                      <h3 className="text-lg font-semibold text-white group-hover:text-teal-400 transition-colors duration-300">
+                        {faq.question}
+                      </h3>
+                    </div>
+                    
+                    {/* Toggle Icon */}
+                    <div className={`ml-4 p-2 rounded-lg bg-gray-800/50 transition-all duration-300 ${
+                      activeIndex === index ? 'rotate-180 bg-teal-500/10' : ''
+                    }`}>
+                      {activeIndex === index ? (
+                        <HiOutlineMinus className="w-5 h-5 text-teal-400" />
+                      ) : (
+                        <HiOutlinePlus className="w-5 h-5 text-gray-400" />
+                      )}
+                    </div>
+                  </button>
+                  
+                  {/* Answer Content */}
+                  <div className={`overflow-hidden transition-all duration-500 ${
+                    activeIndex === index ? 'max-h-96' : 'max-h-0'
+                  }`}>
+                    <div className="px-8 pb-6">
+                      {/* Divider */}
+                      <div className="h-px bg-gradient-to-r from-transparent via-gray-700 to-transparent mb-6"></div>
+                      
+                      {/* Answer Text */}
+                      <p className="text-gray-300 leading-relaxed pl-16">
+                        {faq.answer}
+                      </p>
+                      
+                      {/* Action Link */}
+                      <div className="mt-4 pl-16">
+                        <a href="#" className="inline-flex items-center gap-2 text-teal-400 hover:text-teal-300 transition-colors duration-300">
+                          <span className="text-sm font-medium">Learn more</span>
+                          <HiOutlineChevronRight className="w-4 h-4" />
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Bottom CTA */}
+        <div className="text-center mt-16">
+          <p className="text-gray-400 mb-4">Still have questions?</p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <a
+              href="https://github.com/abdullahalsuad/dev-crack/issues"
+              className="inline-flex items-center gap-2 px-6 py-3 bg-gray-900/50 border border-gray-800 rounded-xl hover:border-teal-500/50 hover:bg-gray-900/70 transition-all duration-300"
+            >
+              <BiSupport className="text-xl text-teal-400" />
+              <span className="text-white font-medium">Contact Support</span>
+            </a>
+            <a
+              href="https://discord.gg/hECbGhyY5b"
+              className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-teal-500 to-green-500 rounded-xl text-white font-medium hover:shadow-lg hover:shadow-teal-500/25 transition-all duration-300"
+            >
+              <FiUsers className="text-xl" />
+              <span>Join Community</span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default FAQSection;
\ No newline at end of file
diff --git a/components/home/HeroSection.jsx b/components/home/HeroSection.jsx
index 64a9a79..561a6c3 100644
--- a/components/home/HeroSection.jsx
+++ b/components/home/HeroSection.jsx
@@ -1,6 +1,23 @@
 import Link from "next/link";
 import GitStarButton from "../button/GitStarButton";
 import StartLearning from "../button/StartLearning";
+import { 
+  HiOutlineQuestionMarkCircle, 
+  HiOutlineCode,
+  HiOutlineSparkles,
+  HiOutlineClock
+} from "react-icons/hi";
+import { 
+  BiCodeAlt,
+  BiRocket,
+  BiInfinite
+} from "react-icons/bi";
+import { 
+  FiTarget,
+  FiZap,
+  FiGift,
+  FiActivity
+} from "react-icons/fi";
 
 // stat card with value and label.
 
@@ -9,21 +26,37 @@ const stats = [
     id: 1,
     value: "500+",
     label: "Questions",
+    icon: <HiOutlineQuestionMarkCircle className="w-6 h-6" />,
+    gradient: "from-blue-400 to-cyan-400",
+    bgGradient: "from-blue-500/10 to-cyan-500/10",
+    description: "Curated from real interviews"
   },
   {
     id: 2,
     value: "8",
     label: "Technologies",
+    icon: <BiCodeAlt className="w-6 h-6" />,
+    gradient: "from-purple-400 to-pink-400",
+    bgGradient: "from-purple-500/10 to-pink-500/10",
+    description: "Full-stack coverage"
   },
   {
     id: 3,
     value: "100%",
     label: "Free",
+    icon: <FiGift className="w-6 h-6" />,
+    gradient: "from-green-400 to-emerald-400",
+    bgGradient: "from-green-500/10 to-emerald-500/10",
+    description: "Forever free & open-source"
   },
   {
     id: 4,
     value: "24/7",
     label: "Available",
+    icon: <BiInfinite className="w-6 h-6" />,
+    gradient: "from-orange-400 to-red-400",
+    bgGradient: "from-orange-500/10 to-red-500/10",
+    description: "Learn at your own pace"
   },
 ];
 
@@ -66,22 +99,115 @@ const HeroSection = () => {
           </Link>
         </div>
 
-        {/* Statistics Grid */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 my-30 ">
-          {stats.map(({ id, value, label }) => (
+        {/* Statistics Grid - Professional Creative Design */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 my-20">
+          {stats.map((stat, index) => (
             <div
-              key={id}
-              className="bg-gray-800/30 backdrop-blur-md border border-teal-800/30 rounded-2xl p-6 text-center shadow-lg hover:shadow-teal-700/90 transition-shadow duration-300 cursor-pointer"
-              role="region"
-              aria-labelledby={`stat-label-${id}`}
+              key={stat.id}
+              className="relative group"
+              style={{
+                animation: `fadeInScale 0.6s ease-out forwards`,
+                animationDelay: `${index * 0.15}s`,
+                opacity: 0,
+                perspective: '1000px'
+              }}
             >
-              <h3
-                id={`stat-label-${id}`}
-                className="text-emerald-400 text-4xl  mb-2 font-extrabold"
-              >
-                {value}
-              </h3>
-              <p className="text-gray-400 text-lg ">{label}</p>
+              {/* Card Container with 3D Hover Effect */}
+              <div className="relative transition-transform duration-700 group-hover:scale-105" style={{ transformStyle: 'preserve-3d' }}>
+                
+                {/* Glow Effect Behind Card */}
+                <div 
+                  className={`absolute -inset-1 bg-gradient-to-r ${stat.gradient} rounded-2xl opacity-0 group-hover:opacity-30 blur transition-all duration-700`}
+                ></div>
+                
+                {/* Main Card */}
+                <div className="relative bg-gradient-to-b from-gray-900/90 to-black/90 backdrop-blur-xl rounded-2xl border border-gray-800/50 group-hover:border-gray-700/50 transition-all duration-500 overflow-hidden">
+                  
+                  {/* Premium Glass Overlay */}
+                  <div className="absolute inset-0 bg-gradient-to-tr from-white/[0.02] to-transparent"></div>
+                  
+                  {/* Animated Border Gradient */}
+                  <div className="absolute inset-0 rounded-2xl">
+                    <div 
+                      className={`absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-700`}
+                      style={{
+                        background: `linear-gradient(90deg, transparent, ${stat.gradient.includes('blue') ? '#60a5fa' : stat.gradient.includes('purple') ? '#c084fc' : stat.gradient.includes('green') ? '#34d399' : '#fb923c'}, transparent)`,
+                        backgroundSize: '200% 100%',
+                        animation: 'shimmerBorder 3s linear infinite',
+                      }}
+                    ></div>
+                  </div>
+                  
+                  {/* Content Container */}
+                  <div className="relative p-8">
+                    
+                    {/* Icon Section */}
+                    <div className="flex items-center justify-between mb-6">
+                      {/* Icon Box */}
+                      <div className="relative">
+                        <div className={`p-3 bg-gradient-to-br ${stat.bgGradient} rounded-xl group-hover:scale-110 transition-transform duration-500`}>
+                          <div className={`text-white opacity-80 group-hover:opacity-100 transition-opacity duration-300`}>
+                            {stat.icon}
+                          </div>
+                        </div>
+                        
+                        {/* Icon Animation Line */}
+                        <div 
+                          className={`absolute -bottom-1 left-0 right-0 h-[2px] bg-gradient-to-r ${stat.gradient} scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left`}
+                        ></div>
+                      </div>
+                      
+                      {/* Indicator Dot */}
+                      <div className="relative">
+                        <div className={`w-2 h-2 rounded-full bg-gradient-to-r ${stat.gradient} opacity-50 group-hover:opacity-100 transition-opacity duration-500`}>
+                          <div className="absolute inset-0 rounded-full bg-white/50 animate-ping"></div>
+                        </div>
+                      </div>
+                    </div>
+                    
+                    {/* Value Section */}
+                    <div className="mb-4">
+                      <h3 className="text-4xl font-bold text-white group-hover:scale-105 transition-transform duration-500 origin-left">
+                        {stat.value}
+                      </h3>
+                      
+                      {/* Progress Bar */}
+                      <div className="mt-3 h-1 bg-gray-800/50 rounded-full overflow-hidden">
+                        <div 
+                          className={`h-full bg-gradient-to-r ${stat.gradient} rounded-full transition-all duration-1000 ease-out`}
+                          style={{
+                            width: '0%',
+                            animation: `progressFill 2s ease-out forwards`,
+                            animationDelay: `${0.5 + index * 0.15}s`
+                          }}
+                        ></div>
+                      </div>
+                    </div>
+                    
+                    {/* Label & Description */}
+                    <div>
+                      <p className="text-gray-300 font-medium text-base mb-1">
+                        {stat.label}
+                      </p>
+                      <p className="text-gray-500 text-sm opacity-0 group-hover:opacity-100 transition-all duration-500 transform translate-y-2 group-hover:translate-y-0">
+                        {stat.description}
+                      </p>
+                    </div>
+                    
+                    {/* Hover Arrow Indicator */}
+                    <div className="absolute bottom-4 right-4 opacity-0 group-hover:opacity-100 transition-all duration-500 transform translate-x-2 group-hover:translate-x-0">
+                      <svg className="w-5 h-5 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                      </svg>
+                    </div>
+                    
+                    {/* Corner Accent */}
+                    <div className={`absolute top-0 right-0 w-20 h-20 opacity-5 group-hover:opacity-10 transition-opacity duration-700`}>
+                      <div className={`absolute top-0 right-0 w-full h-full bg-gradient-to-bl ${stat.gradient}`}></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           ))}
         </div>
diff --git a/components/home/JoinCommunity.jsx b/components/home/JoinCommunity.jsx
index 43d0043..b355b9f 100644
--- a/components/home/JoinCommunity.jsx
+++ b/components/home/JoinCommunity.jsx
@@ -1,27 +1,172 @@
 import Link from "next/link";
 import Button from "../button/Button";
+import { FaUsers, FaCode, FaRocket, FaGithub } from "react-icons/fa";
+import { HiSparkles } from "react-icons/hi";
 
 const JoinCommunity = () => {
+  const stats = [
+    { icon: <FaUsers />, value: "1K+", label: "Active Members" },
+    { icon: <FaCode />, value: "50+", label: "Contributors" },
+    { icon: <FaRocket />, value: "24/7", label: "Support" },
+  ];
+
   return (
-    <section className="py-20  bg-[#000000] text-gray-200">
-      <div className="max-w-7xl mx-auto px-4">
-        <div className="bg-gray-900/50 border border-gray-800 rounded-2xl p-15 text-center shadow-lg backdrop-blur-md">
-          <h2 className="text-3xl sm:text-4xl font-extrabold mb-4">
-            🚀 Join Our{" "}
-            <span className="bg-gradient-to-r from-green-500 to-teal-400 bg-clip-text text-transparent">
-              Developer Community
-            </span>
-          </h2>
-          <p className="text-gray-400 my-10 mb-8 text-base sm:text-lg leading-relaxed">
-            Be part of a growing tech community where we build, share, and grow
-            together. <br />
-            Whether you are fixing bugs, adding features, or improving docs —
-            your contribution drives us forward.
-          </p>
-          <div className="flex flex-col sm:flex-row justify-center gap-4">
-            <Link href="https://discord.gg/hECbGhyY5b" target="_blank">
-              <Button />
-            </Link>
+    <section className="py-24 bg-[#000000] text-gray-200 relative overflow-hidden">
+      {/* Background Effects */}
+      <div className="absolute inset-0">
+        <div className="absolute top-0 left-1/4 w-96 h-96 bg-teal-500/10 rounded-full blur-3xl"></div>
+        <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-green-500/10 rounded-full blur-3xl"></div>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-4 relative z-10">
+        <div className="bg-gradient-to-br from-gray-900/90 via-gray-900/70 to-gray-900/90 border border-teal-900/30 rounded-3xl p-12 lg:p-16 shadow-2xl backdrop-blur-xl relative overflow-hidden">
+          {/* Decorative Corner Elements */}
+          <div className="absolute top-0 left-0 w-32 h-32 border-t-2 border-l-2 border-teal-500/20 rounded-tl-3xl"></div>
+          <div className="absolute bottom-0 right-0 w-32 h-32 border-b-2 border-r-2 border-green-500/20 rounded-br-3xl"></div>
+
+          {/* Sparkle Icon */}
+          <div className="flex justify-center mb-6">
+            <div className="relative">
+              <div className="absolute inset-0 bg-gradient-to-r from-green-500 to-teal-400 rounded-full blur-xl opacity-50"></div>
+              <div className="relative bg-gradient-to-r from-green-500 to-teal-400 p-4 rounded-full">
+                <HiSparkles className="text-3xl text-white" />
+              </div>
+            </div>
+          </div>
+
+          {/* Main Content */}
+          <div className="text-center max-w-4xl mx-auto">
+            <h2 className="text-4xl sm:text-5xl lg:text-4xl font-extrabold mb-6 leading-tight">
+              Join Our{" "}
+              <span className="bg-gradient-to-r from-green-500 via-teal-400 to-green-500 bg-clip-text text-transparent animate-pulse">
+                Developer Community
+              </span>
+            </h2>
+
+            <p className="text-gray-300 text-lg sm:text-xl mb-12 leading-relaxed max-w-3xl mx-auto">
+              Connect with passionate developers worldwide. Share knowledge,
+              collaborate on projects, and accelerate your growth in a
+              supportive environment where every contribution matters.
+            </p>
+
+            {/* Stats Grid */}
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-12 mb-12 max-w-2xl mx-auto">
+              {stats.map((stat, index) => (
+                <div
+                  key={index}
+                  className="relative group"
+                  style={{
+                    animation: `fadeInUp 0.6s ease-out forwards`,
+                    animationDelay: `${index * 0.1}s`,
+                    opacity: 0,
+                  }}
+                >
+                  {/* Modern Gradient Border - Subtle */}
+                  <div
+                    className="absolute inset-0 bg-gradient-to-br from-teal-500/20 via-transparent to-green-500/20 rounded-2xl"
+                    style={{
+                      animation: `borderGlow ${
+                        4 + index
+                      }s ease-in-out infinite`,
+                      animationDelay: `${index * 0.3}s`,
+                    }}
+                  ></div>
+
+                  {/* Elegant Moving Border Line */}
+                  <div className="absolute inset-0 rounded-2xl overflow-hidden">
+                    <div
+                      className="absolute top-0 left-0 w-full h-[2px] bg-gradient-to-r from-transparent via-teal-400 to-transparent"
+                      style={{
+                        animation: `borderSlide ${
+                          3 + index * 0.5
+                        }s linear infinite`,
+                      }}
+                    ></div>
+                    <div
+                      className="absolute bottom-0 right-0 w-full h-[2px] bg-gradient-to-l from-transparent via-green-400 to-transparent"
+                      style={{
+                        animation: `borderSlide ${
+                          3 + index * 0.5
+                        }s linear infinite`,
+                        animationDelay: `${1.5 + index * 0.25}s`,
+                      }}
+                    ></div>
+                  </div>
+
+                  {/* Card Content */}
+                  <div className="relative bg-gray-900/80 backdrop-blur-xl border border-gray-800/50 rounded-2xl p-6 hover:bg-gray-900/90 transition-all duration-500 hover:transform hover:translateY(-4px) hover:shadow-2xl hover:shadow-teal-500/10">
+                    {/* Professional Icon Container */}
+                    <div className="relative flex justify-center mb-4">
+                      {/* Subtle Glow Behind Icon */}
+                      <div
+                        className="absolute w-12 h-12 bg-gradient-to-br from-teal-400/30 to-green-400/30 rounded-full blur-2xl"
+                        style={{
+                          animation: `breathe ${
+                            3 + index * 0.3
+                          }s ease-in-out infinite`,
+                        }}
+                      ></div>
+
+                      {/* Icon with Modern Styling */}
+                      <div className="relative bg-gradient-to-br from-gray-800 to-gray-900 p-3 rounded-xl border border-teal-500/20">
+                        <div className="text-teal-400 text-2xl transform transition-transform duration-300 group-hover:scale-110">
+                          {stat.icon}
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Clean Value Display */}
+                    <div className="relative">
+                      <div
+                        className="text-3xl font-bold bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent mb-2"
+                        style={{
+                          animation: `countUp ${2}s ease-out forwards`,
+                          animationDelay: `${0.5 + index * 0.2}s`,
+                        }}
+                      >
+                        {stat.value}
+                      </div>
+
+                      {/* Subtle Underline */}
+                      <div
+                        className="h-[1px] bg-gradient-to-r from-transparent via-teal-500/50 to-transparent mx-auto w-12"
+                        style={{
+                          animation: `expandWidth ${2}s ease-out forwards`,
+                          animationDelay: `${0.8 + index * 0.2}s`,
+                        }}
+                      ></div>
+                    </div>
+
+                    {/* Clean Label */}
+                    <div className="text-sm text-gray-400 mt-2 font-medium tracking-wide uppercase">
+                      {stat.label}
+                    </div>
+
+                    {/* Corner Accent */}
+                    <div className="absolute top-0 right-0 w-8 h-8 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
+                      <div className="absolute top-2 right-2 w-2 h-2 bg-teal-400 rounded-full animate-pulse"></div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {/* CTA Buttons */}
+            <div className="flex flex-col sm:flex-row justify-center gap-4 items-center">
+              <Link href="https://discord.gg/hECbGhyY5b" target="_blank">
+                <Button />
+              </Link>
+
+              <Link
+                href="https://github.com/abdullahalsuad/dev-crack"
+                target="_blank"
+                className="inline-flex items-center gap-2 px-6 py-3 text-gray-300 hover:text-white transition-colors duration-300"
+              >
+                <FaGithub className="text-xl" />
+                <span className="font-medium">View on GitHub</span>
+                <span className="text-teal-400">→</span>
+              </Link>
+            </div>
           </div>
         </div>
       </div>