Update About Page

app/about/page.tsx

@@ -1,30 +1,291 @@
-import Link from "next/link";
-import Image from "next/image";
-
 export default function About() {
+  const beliefData = [
+    {
+      title: "Ideas must survive scale",
+      desc: "A strong concept doesn't break when applied across formats, platforms, or timezones. It adapts without dilution.",
+      icon: "bi-layers",
+    },
+    {
+      title: "Design must justify itself",
+      desc: "Every decision has a reason. We don't chase trends or add complexity for its own sake. Form follows function always.",
+      icon: "bi-vector-pen",
+    },
+    {
+      title: "AI is leverage, not identity",
+      desc: "We use AI to accelerate execution, not replace judgment. Technology amplifies structured thinking—it doesn't create it.",
+      icon: "bi-cpu",
+      highlight: true,
+    },
+    {
+      title: "Systems beat style",
+      desc: "A beautiful website that can't be updated is a liability. We build for longevity, not just launch day.",
+      icon: "bi-columns-gap",
+    },
+  ];
+
   return (
     <>
       {/* HERO */}
       <section className="ux-project-hero">
+  <div className="container">
+
+    <div className="ux-project-content text-center">
+      <h1 className="ux-project-title" data-aos="fade-up">
+        We Build With Structure.
+      </h1>
+
+      <p
+        className="ux-project-subtitle"
+        data-aos="fade-up"
+        data-aos-delay="120"
+      >
+        AAideA is a boutique systems-led creative studio for operators who need
+        more than aesthetic polish—they need scalable execution.
+      </p>
+    </div>
+
+    {/* 🔥 IMAGE ROW */}
+    <div className="hero-images row justify-content-center mt-5 g-4">
+
+      <div className="col-lg-4 col-md-6">
+        <div className="hero-img-box">
+          <img src="assets/images/structure1.png" alt="Team Work" />
+        </div>
+      </div>
+
+      <div className="col-lg-4 col-md-6">
+        <div className="hero-img-box hero-img-boxup">
+          <img src="assets/images/structure2.png" alt="Office" />
+        </div>
+      </div>
+
+      <div className="col-lg-4 col-md-6">
+        <div className="hero-img-box">
+          <img src="assets/images/structure3.png" alt="Collaboration" />
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+</section>
+
+      {/* PHILOSOPHY */}
+      <section className="philosophy-section py-5">
         <div className="container">
-          <div className="ux-project-content text-center">
-            <h1 className="ux-project-title" data-aos="fade-up">
-              About AAideA.
-            </h1>
-            <p
-              className="ux-project-subtitle"
-              data-aos="fade-up"
-              data-aos-delay="120"
-            >
-              We build digital homes, brand systems, and scalable content
-              <br />
-              engines designed for clarity and growth.
-            </p>
-       
+          <div className="row align-items-center g-5">
+            
+            <div className="col-lg-6">
+              <div className="image-box">
+                <img
+                  src="assets/images/intersection.png"
+                  alt="Philosophy"
+                  className="img-fluid"
+                />
+              </div>
+            </div>
+
+            <div className="col-lg-6">
+              <p className="ux-section-label">Philosophy</p>
+
+              <h2 className="main-heading">
+                We exist at the intersection of strategy, design, and execution.
+                Not as separate phases—but as a single disciplined approach.
+              </h2>
+
+              <p className="desc mt-3">
+                Too Many Agencies Deliver Beautiful Work That Doesn't Scale.
+                Too Many Consultancies Deliver Strategies That Never Ship. We Do Both.
+              </p>
+
+              <p className="desc">
+                Our Clients Don't Need Hand-Holding. They Need Clarity, Structure,
+                And Speed—Without Sacrificing Taste Or Long-Term Thinking.
+              </p>
+            </div>
+
           </div>
         </div>
       </section>
 
+      {/* ✅ BELIEF SECTION (ADDED HERE) */}
+      <section className="belief-section">
+        <div className="container">
+          <h2 className="section-title mb-5">What We Believe</h2>
+
+          <div className="row g-4">
+            {beliefData.map((item, i) => (
+              <div className="col-lg-3 col-md-6" key={i}>
+                <div className={`belief-card ${item.highlight ? "active" : ""}`}>
+                  
+                  <div className="icon-box">
+                  <img
+            src="assets/images/Ideasabout.svg" 
+            alt="Global"
+            className="img-fluid"
+          />  
+                  </div>
+
+                  <h5>{item.title}</h5>
+                  <p>{item.desc}</p>
+
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+      <section className="working-section">
+  <div className="container">
+  <div className="displayflexhead" style={{ width: "100%" }}>
+    <p className="ux-section-label" style={{ width: "18%" }}>Working Model</p>
+
+    <h2 className="main-heading">
+      We operate lean. Senior-led execution. No bloated teams.<br />
+      No outsource chaos.
+    </h2>
+    </div>
+    <div className="row g-4">
+
+      {/* CARD 1 */}
+      <div className="col-lg-4">
+        <div className="working-card">
+          <span className="number">01</span>
+          <p>
+            Every project is led by senior practitioners—not delegated to junior
+            teams or external freelancers. You work directly with the people
+            building your brand.
+          </p>
+        </div>
+      </div>
+
+      {/* CARD 2 */}
+      <div className="col-lg-4">
+        <div className="working-card">
+          <span className="number">02</span>
+          <p>
+            We don't scale headcount. We scale systems. This means faster
+            timelines, clearer communication, and consistent quality from
+            concept through deployment.
+          </p>
+        </div>
+      </div>
+
+      {/* CARD 3 */}
+      <div className="col-lg-4">
+        <div className="working-card">
+          <span className="number">03</span>
+          <p>
+            Small teams move faster. Less bureaucracy. More accountability.
+            Better outcomes.
+          </p>
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+</section>
+<section className="global-section py-5">
+  <div className="container">
+    <div className="row align-items-center g-5">
+
+      {/* LEFT CONTENT */}
+      <div className="col-lg-6">
+
+        <p className="small-title">Global Outlook</p>
+
+        <h2 className="main-heading">
+          Built for global decision-makers.
+        </h2>
+
+        <p className="desc mt-3">
+          We work with operators across industries and geographies—from
+          venture-backed startups to established brands entering new markets.
+          Location doesn’t limit execution.
+        </p>
+
+        <div className="highlight-box mt-4">
+        
+          <span>
+          <img
+            src="assets/images/buildaboiticon.svg" 
+            alt="Global"
+            className="img-fluid"
+          />    Remote-first. Timezone-flexible. Outcome-focused.
+          </span>
+        </div>
+
+      </div>
+
+      {/* RIGHT IMAGE */}
+      <div className="col-lg-6">
+        <div className="image-box">
+          <img
+            src="assets/images/decision.png" 
+            alt="Global"
+            className="img-fluid"
+          />
+        </div>
+      </div>
+
+    </div>
+  </div>
+</section>
+
+<section className="who-section ">
+  <div className="container">
+    <div className="row align-items-center g-5">
+
+      {/* LEFT IMAGE */}
+      <div className="col-lg-6">
+        <div className="who-image">
+          <img
+            src="assets/images/Whoabout.png" 
+            alt="Team"
+            className="img-fluid"
+          />
+        </div>
+      </div>
+
+      {/* RIGHT CONTENT */}
+      <div className="col-lg-6">
+
+        <h2 className="who-title">Who We Work With</h2>
+
+        <p className="who-desc">
+          Founders building brands that need to scale without losing coherence.
+        </p>
+
+        <p className="who-desc">
+          Operators who move fast but think long-term—execution speed matters,
+          but structure matters more.
+        </p>
+
+        <p className="who-desc">
+          Companies entering new markets or repositioning existing offerings—
+          where clarity is the competitive advantage.
+        </p>
+
+        <p className="who-muted mt-4">
+          If you value noise over signal, we’re not the right fit.
+        </p>
+
+        <p className="who-muted">
+          If you need cheap and fast over structured and right, look elsewhere.
+        </p>
+
+      </div>
+
+    </div>
+  </div>
+</section>
+
+
+
+
+
+
     </>
   );
-}
+}