Full-Responsive-StatisticsSection

src/app/home/components/welcomepage/statisticsSection.tsx

@@ -25,36 +25,39 @@ export default function StatisticsSection() {
   ];
 
   return (
-    <section className="bg-slate-900 py-16 px-4">
+    <section className="bg-slate-900 py-12 md:py-16 px-4">
       <div className="max-w-6xl mx-auto text-center">
-        <h2 className="text-4xl md:text-5xl font-bold text-white mb-4">
+        <h2 className="text-3xl md:text-5xl font-bold text-white mb-4">
           Trusted by{" "}
           <span className="bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
             Industry Leaders
           </span>
         </h2>
-        <p className="text-gray-400 text-lg mb-16 max-w-2xl mx-auto">
+        <p className="text-gray-400 text-base md:text-lg mb-12 md:mb-16 max-w-2xl mx-auto">
           Join the largest community of Web3 professionals and get certified by
           industry experts
         </p>
 
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
           {stats.map((stat, index) => (
             <div
               key={index}
               className="font-poppins flex flex-col items-center"
             >
-              <div className="bg-gradient-to-r from-[#7E22CE] via-[#59168B] to-[#831843] rounded-2xl p-4 mb-4">
-                <stat.icon className="w-8 h-8 text-white" />
+              <div className="bg-gradient-to-r from-[#7E22CE] via-[#59168B] to-[#831843] rounded-2xl p-3 md:p-4 mb-3 md:mb-4">
+                <stat.icon className="w-6 h-6 md:w-8 md:h-8 text-white" />
               </div>
-              <div className="text-[32px] font-bold text-white mb-4">
+              <div className="text-2xl md:text-[32px] font-bold text-white mb-2 md:mb-4">
                 {stat.number}
               </div>
-              <div className="text-gray-400 text-sm">{stat.label}</div>
+              <div className="text-gray-400 text-xs md:text-sm text-center">
+                {stat.label}
+              </div>
             </div>
           ))}
         </div>
       </div>
     </section>
   );
 }
+

src/app/home/page.tsx

@@ -1,21 +1,22 @@
-// import ErrorTest from "@/components/ErrorTest";
 import CourseExplorationSection from "./components/welcomepage/courseExplorationSection";
 import HeroSection from "./components/welcomepage/heroSection";
-// import Register from "../register/page";
 import Journey from "./components/welcomepage/journey";
 import Ready from "./components/welcomepage/ready";
 import Steller from "./components/welcomepage/steller";
-// import PrinciplesSection from "../about/components/principlesSection";
 import Trusted from "./components/welcomepage/trusted";
-// import PrinciplesSection from "../about/components/principlesSection";
-import TeacherDashboard from "./teacherDashboard";
+import StatisticsSection from "./components/welcomepage/statisticsSection";
 
 const welcomePage = () => {
   return (
     <div className="">
-      <TeacherDashboard/>
-      {/* <HeroSection /> */}
+      <HeroSection />
       <div className="">
+        <Trusted />
+        <Journey />
+        <CourseExplorationSection />
+        <Steller />
+        <StatisticsSection />
+
         {/* <Trusted /> */}
         {/* <Journey /> */}
         {/* <CourseExplorationSection /> */}