fix about page

components/aiero/BenefitsGridSection.tsx

@@ -0,0 +1,51 @@
+import { CheckCircle2 } from "lucide-react";
+
+export function BenefitsGridSection() {
+  return (
+    <section className="relative overflow-hidden bg-white px-[20px] pb-[60px] md:pb-[100px]">
+      <div className="mx-auto max-w-[1260px]">
+        
+        <div className="grid grid-cols-1 gap-[30px] md:grid-cols-3">
+          
+          {/* Card 1 */}
+          <div className="flex flex-col gap-[20px] rounded-[25px] border border-aiero-card-border p-[40px] transition-transform duration-300 hover:-translate-y-2">
+            <h4 className="text-[22px] font-bold leading-[1.3] text-aiero-dark font-[var(--font-sora)]">
+              AI-Powered Marketing & Personalization
+            </h4>
+            <ul className="flex flex-col gap-[15px] mt-[10px]">
+              <li className="flex items-start gap-[10px] text-[16px] text-aiero-text-muted">
+                <span className="mt-[5px] h-[6px] w-[6px] rounded-full bg-aiero-accent-teal shrink-0"></span>
+                Hyper-personalized recommendations
+              </li>
+              <li className="flex items-start gap-[10px] text-[16px] text-aiero-text-muted">
+                <span className="mt-[5px] h-[6px] w-[6px] rounded-full bg-aiero-accent-teal shrink-0"></span>
+                AI-driven ad targeting & optimization
+              </li>
+            </ul>
+          </div>
+
+          {/* Card 2 */}
+          <div className="flex flex-col gap-[20px] rounded-[25px] border border-aiero-card-border p-[40px] transition-transform duration-300 hover:-translate-y-2">
+            <h4 className="text-[22px] font-bold leading-[1.3] text-aiero-dark font-[var(--font-sora)]">
+              Seamless AI integration for your business success
+            </h4>
+            <p className="text-[16px] leading-[1.6] text-aiero-text-muted mt-[10px]">
+              Seamless integration with existing systems and platforms & Scalable and flexible architecture
+            </p>
+          </div>
+
+          {/* Card 3 (OpenAI Logo) */}
+          <div className="flex items-center justify-center rounded-[25px] border border-aiero-card-border bg-[#F8F9FA] p-[40px] transition-transform duration-300 hover:-translate-y-2">
+            <img 
+              src="https://8ded8880.delivery.rocketcdn.me/themes/aiero/wp-content/uploads/2024/12/openai-logo-1.png" 
+              alt="OpenAI Logo" 
+              className="w-[180px] h-auto object-contain"
+            />
+          </div>
+
+        </div>
+        
+      </div>
+    </section>
+  );
+}

components/aiero/BlogSection.tsx

@@ -0,0 +1,77 @@
+import Link from "next/link";
+import { ArrowUpRight } from "lucide-react";
+import { SectionHeading } from "@/components/shared/SectionHeading";
+
+const blogPosts = [
+  {
+    title: "How to Build a Custom AI Model for Your Business",
+    image: "https://8ded8880.delivery.rocketcdn.me/themes/aiero/wp-content/uploads/2024/12/portrait-confident-man.jpg", // Placeholder
+    category: "AI Technology",
+    date: "March 15, 2025",
+    link: "/blog/custom-ai-model",
+  },
+  {
+    title: "The Future of Machine Learning in Enterprise",
+    image: "https://8ded8880.delivery.rocketcdn.me/themes/aiero/wp-content/uploads/2025/02/Group-18301.jpg", // Placeholder
+    category: "Machine Learning",
+    date: "April 2, 2025",
+    link: "/blog/machine-learning-enterprise",
+  },
+  {
+    title: "Ethics in AI: What You Need to Know",
+    image: "https://8ded8880.delivery.rocketcdn.me/themes/aiero/wp-content/uploads/2024/12/3d-woman-shape-glowing-with-bright-holographic-colors-1-min.png", // Placeholder
+    category: "AI Ethics",
+    date: "April 10, 2025",
+    link: "/blog/ethics-in-ai",
+  },
+];
+
+export function BlogSection() {
+  return (
+    <section className="bg-[#F8F9FA] px-[20px] py-[80px] md:py-[120px]">
+      <div className="mx-auto max-w-[1260px]">
+        <div className="mb-[60px] flex flex-col items-center text-center">
+          <SectionHeading
+            subtitle="blog"
+            title="Exploring the world of artificial intelligence with Aiero blogging"
+            titleClassName="max-w-[800px] text-aiero-dark"
+          />
+        </div>
+
+        <div className="grid grid-cols-1 gap-[30px] md:grid-cols-2 lg:grid-cols-3">
+          {blogPosts.map((post, index) => (
+            <div key={index} className="group flex flex-col overflow-hidden rounded-[25px] border border-aiero-card-border bg-white transition-shadow duration-300 hover:shadow-xl">
+              <div className="relative h-[250px] w-full overflow-hidden">
+                <img 
+                  src={post.image} 
+                  alt={post.title} 
+                  className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110" 
+                />
+                <div className="absolute left-[20px] top-[20px] rounded-full bg-white px-[15px] py-[5px] text-[12px] font-bold tracking-wide text-aiero-dark uppercase font-[var(--font-sora)]">
+                  {post.category}
+                </div>
+              </div>
+              <div className="flex flex-col p-[30px]">
+                <div className="mb-[15px] text-[14px] text-aiero-text-muted">
+                  {post.date}
+                </div>
+                <h4 className="mb-[20px] text-[22px] font-bold leading-[1.3] text-aiero-dark font-[var(--font-sora)] transition-colors group-hover:text-aiero-accent-teal">
+                  <Link href={post.link}>{post.title}</Link>
+                </h4>
+                <div className="mt-auto">
+                  <Link 
+                    href={post.link} 
+                    className="inline-flex items-center gap-[10px] text-[15px] font-bold text-aiero-dark font-[var(--font-sora)] hover:text-aiero-accent-teal"
+                  >
+                    Read more
+                    <ArrowUpRight className="h-[18px] w-[18px]" />
+                  </Link>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

components/aiero/HowItWorksSection.tsx

@@ -0,0 +1,65 @@
+import { SectionHeading } from "@/components/shared/SectionHeading";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+
+export function HowItWorksSection() {
+  const steps = [
+    {
+      number: "01",
+      title: "Neurons and Layers",
+      description: "A neural network consists of interconnected nodes called neurons. Neurons are organized into layers.",
+    },
+    {
+      number: "02",
+      title: "Activation Function",
+      description: "Each neuron applies an activation function to the weighted sum of its inputs and produces an output",
+    },
+    {
+      number: "03",
+      title: "Feedforward Process",
+      description: "The inputs are multiplied by their respective weights, summed up, and passed through the activation function.",
+    },
+    {
+      number: "04",
+      title: "Activation Function",
+      description: "The inputs are multiplied by their respective weights, summed up, and passed through the activation function.",
+    },
+  ];
+
+  return (
+    <section className="bg-white px-[20px] py-[60px] md:py-[100px]">
+      <div className="mx-auto max-w-[1260px]">
+        <div className="flex flex-col md:flex-row md:items-end justify-between gap-[30px] mb-[60px]">
+          <SectionHeading
+            subtitle="how it works"
+            title="Neural networks are a fundamental component of Artificial Intelligence (AI) systems"
+            titleClassName="max-w-[700px] text-aiero-dark"
+          />
+          <div className="flex gap-[15px]">
+            <button className="flex h-[50px] w-[50px] items-center justify-center rounded-full border border-aiero-card-border text-aiero-dark transition-colors hover:bg-aiero-card-border">
+              <ArrowLeft size={20} />
+            </button>
+            <button className="flex h-[50px] w-[50px] items-center justify-center rounded-full border border-aiero-card-border text-aiero-dark transition-colors hover:bg-aiero-card-border">
+              <ArrowRight size={20} />
+            </button>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[30px]">
+          {steps.map((step, index) => (
+            <div key={index} className="flex flex-col border-t border-aiero-card-border pt-[30px]">
+              <div className="text-[50px] font-bold text-transparent font-[var(--font-sora)]" style={{ WebkitTextStroke: "1px #3F3F3F" }}>
+                {step.number}
+              </div>
+              <h6 className="mt-[20px] mb-[15px] text-[20px] font-bold text-aiero-dark font-[var(--font-sora)]">
+                {step.title}
+              </h6>
+              <p className="text-[16px] leading-[1.6] text-aiero-text-muted">
+                {step.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

components/aiero/MarqueeStrip.tsx

@@ -10,7 +10,7 @@ export function MarqueeStrip({
   const marqueeItems = Array.from({ length: 6 });
 
   return (
-    <div className={`relative z-10 mx-[-5px] mb-[-90px] mt-[20px] overflow-hidden bg-gradient-to-r from-aiero-teal to-aiero-blue py-[42px] ${className}`} style={{ transform: "rotate(-2.07deg)" }}>
+    <div className={`relative z-10 mx-[-5px] mb-[-20px] mt-0 overflow-hidden bg-gradient-to-r from-aiero-teal to-aiero-blue py-[42px] ${className}`} style={{ transform: "rotate(-2.07deg)" }}>
       <div className="marquee-track flex w-max whitespace-nowrap">
         {[0, 1].map((track) => (
           <div key={track} className="flex shrink-0 items-center">

components/aiero/MetricsSection.tsx

@@ -0,0 +1,46 @@
+import { Counter } from "@/components/shared/Counter";
+
+export function MetricsSection() {
+  return (
+    <section className="bg-white px-[20px] py-[60px] md:py-[100px]">
+      <div className="mx-auto max-w-[1260px]">
+        <div className="grid grid-cols-1 gap-[50px] md:grid-cols-2 md:gap-[80px]">
+          
+          {/* Left Metric */}
+          <div className="flex flex-col gap-[20px]">
+            <Counter
+              target={125}
+              suffix="k"
+              numberClassName="text-[60px] md:text-[80px] font-bold leading-none text-transparent gradient-text-purple font-[var(--font-sora)]"
+              title=""
+            />
+            <h3 className="text-[28px] font-bold leading-[1.3] text-aiero-dark font-[var(--font-sora)]">
+              Happy & satisfied customers
+            </h3>
+            <p className="text-[16px] leading-[1.8] text-aiero-text-muted mt-[10px]">
+              Achieved a 95% customer satisfaction rate across all AI solutions.
+            </p>
+          </div>
+
+          {/* Right Metric */}
+          <div className="flex flex-col gap-[20px]">
+            <Counter
+              prefix="$"
+              target={150}
+              suffix="b"
+              numberClassName="text-[60px] md:text-[80px] font-bold leading-none text-transparent gradient-text-purple font-[var(--font-sora)]"
+              title=""
+            />
+            <h3 className="text-[28px] font-bold leading-[1.3] text-aiero-dark font-[var(--font-sora)]">
+              Earns with our Aiero product
+            </h3>
+            <p className="text-[16px] leading-[1.8] text-aiero-text-muted mt-[10px]">
+              Delivered over $150 billion in cost savings for clients through optimized AI solutions.
+            </p>
+          </div>
+
+        </div>
+      </div>
+    </section>
+  );
+}

components/aiero/TinkerSection.tsx

@@ -1,42 +1,50 @@
 export function TinkerSection() {
   return (
     <section className="relative px-[20px] py-[60px] md:py-[100px] overflow-hidden">
-      <div className="mx-auto flex max-w-[1260px] flex-col gap-[50px] lg:flex-row lg:items-center">
+      <div className="mx-auto flex max-w-[1340px] flex-col gap-[50px] lg:flex-row lg:items-center lg:gap-0">
         
         {/* Left Column - Images */}
-        <div className="relative flex w-full flex-col items-center justify-center lg:w-1/2">
-          {/* Background Glow */}
-          <div className="absolute inset-0 z-0 flex items-center justify-center pointer-events-none">
+        <div className="relative flex w-full flex-col lg:mt-[30px] lg:w-[22%]">
+          
+          {/* Background Glow (elementor-absolute) */}
+          <div className="absolute left-0 top-0 z-0 pointer-events-none min-[576px]:left-[-40vw] min-[576px]:top-[-19.252vw]">
             <img 
               src="https://8ded8880.delivery.rocketcdn.me/themes/aiero/wp-content/uploads/2025/02/Group-18433.svg" 
               alt="" 
-              className="w-[120%] max-w-[800px] h-auto object-contain opacity-80"
+              width={1283}
+              height={1471}
+              className="h-auto w-auto max-w-[100vw] object-contain opacity-80"
               aria-hidden="true"
             />
           </div>
-          {/* Big X Image */}
-          <div className="relative z-10 w-full max-w-[450px]">
+          
+          {/* Main Vector Image */}
+          <div className="relative z-10 min-[576px]:ml-[-26vw]">
             <img 
               src="https://8ded8880.delivery.rocketcdn.me/themes/aiero/wp-content/uploads/2025/01/Vector-13.png" 
               alt="Neural Network Visualization" 
-              className="w-full h-auto"
+              width={670}
+              height={694}
+              className="w-full h-auto max-w-[800px] object-contain"
             />
           </div>
         </div>
 
         {/* Right Column - Text & Partners */}
-        <div className="relative z-10 flex w-full flex-col lg:w-1/2 lg:pl-[5%]">
-          <h2 
-            className="mb-[60px] text-aiero-dark tracking-[-0.03em]"
-            style={{
-              fontFamily: "var(--font-dm-sans)",
-              fontSize: "clamp(36px, 4.5vw, 65px)",
-              fontWeight: 500,
-              lineHeight: 1.1,
-            }}
-          >
-            Tinker with a <span className="gradient-text-purple">Neural Network right here</span> in your browser. Don’t worry, you can’t break it. We Promise.
-          </h2>
+        <div className="relative z-10 flex w-full flex-col lg:w-[78%]">
+          <div className="min-[576px]:mr-[-4%]">
+            <h2 
+              className="mb-[60px] text-aiero-dark tracking-[-0.03em]"
+              style={{
+                fontFamily: "var(--font-dm-sans)",
+                fontSize: "clamp(36px, 4.5vw, 58px)",
+                fontWeight: 500,
+                lineHeight: 1.1,
+              }}
+            >
+              Tinker with a <span className="gradient-text-purple">Neural Network right here</span> in your browser. Don’t worry, you can’t break it. We Promise.
+            </h2>
+          </div>
 
           {/* Partners row */}
           <div className="flex flex-wrap items-center justify-start gap-x-[40px] gap-y-[30px]">

components/aiero/WOWSection.tsx

@@ -0,0 +1,75 @@
+import Link from "next/link";
+import { ArrowIcon } from "@/components/shared/icons/ArrowIcon";
+import { PageContainer } from "@/components/shared/PageContainer";
+
+export function WOWSection() {
+  return (
+    <section className="relative z-20 px-[20px]">
+      <div className="relative z-20 mx-auto max-w-[1340px] overflow-hidden rounded-t-[20px] bg-aiero-dark pt-[30px] pb-[60px] md:pt-[40px] md:pb-[80px]">
+        <PageContainer>
+          <div className="grid grid-cols-1 gap-[40px] lg:grid-cols-2 lg:gap-[60px]">
+            <div className="flex flex-col justify-between">
+              <div className="mb-[35px] md:mb-[70px] md:pr-[10%]">
+                <span
+                  className="mb-[18px] block text-[12px] font-semibold uppercase tracking-[0.1em] text-white"
+                  style={{ fontFamily: "var(--font-sora)" }}
+                >
+                  [ about ]
+                </span>
+                <h2
+                  className="tracking-[-0.03em] text-white"
+                  style={{
+                    fontFamily: "var(--font-dm-sans)",
+                    fontSize: "clamp(44px, 5vw, 80px)",
+                    fontWeight: 500,
+                    lineHeight: 1.1,
+                  }}
+                >
+                  WOW! Meet the next evolution of neural networks
+                </h2>
+              </div>
+
+              <img
+                src="/images/aiero/home-9-img.png"
+                alt="Aiiero"
+                width={632}
+                height={158}
+                className="h-auto w-full max-w-[632px] object-contain"
+              />
+            </div>
+
+            <div className="flex flex-col justify-between">
+              <div className="max-w-[560px] text-white">
+                <p className="text-[16px] font-bold leading-[1.7]">
+                  Artificial Intelligence refers to the development of computer
+                  systems that can perform tasks that would typically require
+                  human intelligence. It involves the creation of algorithms and
+                  models that enable machines to learn, reason, perceive, and
+                  make decisions.
+                </p>
+                <p className="mt-[27px] text-[16px] font-medium leading-[1.7]">
+                  There are generally two types of AI: Narrow or Weak AI, which
+                  is designed to perform specific tasks, and General or Strong
+                  AI, which possesses human-level intelligence and can handle a
+                  wide range of tasks. AI strategies that drive innovation,
+                  optimize processes, and unlock new opportunities for growth.
+                </p>
+              </div>
+
+              <div className="mt-[40px] md:mt-[60px]">
+                <Link
+                  href="/services"
+                  className="aiero-button aiero-button-gradient-border group rounded-full px-[35px] py-[15px] font-[var(--font-sora)] text-[15px] font-semibold tracking-wide text-white transition-all"
+                >
+                  <span className="button-inner" />
+                  Explore more
+                  <ArrowIcon className="ml-2 h-[12px] w-[12px] transition-transform duration-300 group-hover:translate-x-1 group-hover:-translate-y-1" />
+                </Link>
+              </div>
+            </div>
+          </div>
+        </PageContainer>
+      </div>
+    </section>
+  );
+}