Added AOS animation to all pages

app/about/page.tsx

@@ -0,0 +1,291 @@
+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 <br />
+        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" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
+        <div className="hero-img-box">
+          <img src="assets/images/structure1.png" alt="Team Work" />
+        </div>
+      </div>
+
+      <div className="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="350" data-aos-duration="1000">
+        <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" data-aos="fade-up" data-aos-delay="500" data-aos-duration="1000">
+        <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="row align-items-center g-5">
+
+            <div className="col-lg-6" data-aos="fade-right" data-aos-duration="1000">
+              <div className="image-box">
+                <img
+                  src="assets/images/intersection.png"
+                  alt="Philosophy"
+                  className="img-fluid"
+                />
+              </div>
+            </div>
+
+            <div className="col-lg-6" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
+              <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" data-aos="fade-up" data-aos-duration="1000">What We Believe</h2>
+
+          <div className="row g-4">
+            {beliefData.map((item, i) => (
+              <div className="col-lg-3 col-md-6" key={i} data-aos="fade-up" data-aos-delay={100 + i * 150} data-aos-duration="1000">
+                <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%" }} data-aos="fade-up" data-aos-duration="1000">
+    <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" data-aos="fade-up" data-aos-delay="100" data-aos-duration="1000">
+        <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" data-aos="fade-up" data-aos-delay="250" data-aos-duration="1000">
+        <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" data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000">
+        <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" data-aos="fade-right" data-aos-duration="1000">
+
+        <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" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
+        <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" data-aos="fade-right" data-aos-duration="1000">
+        <div className="who-image">
+          <img
+            src="assets/images/Whoabout.png"
+            alt="Team"
+            className="img-fluid"
+          />
+        </div>
+      </div>
+
+      {/* RIGHT CONTENT */}
+      <div className="col-lg-6" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
+
+        <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>
+
+
+
+
+
+
+    </>
+  );
+}

app/ai_powered/page.tsx

@@ -1,3 +1,5 @@
+import Link from "next/link";
+
 export default function AiPowered() {
     return (
 <>
@@ -5,28 +7,28 @@ export default function AiPowered() {
     <div className="container">
       {/* center content */}
       <div className="ux-project-content text-center">
-        <h1 className="ux-project-title">
+        <h1 className="ux-project-title" data-aos="fade-up" data-aos-duration="1000">
           Intelligent Production. <br /> Built For Speed.
         </h1>
-        <p className="ux-project-subtitle">
+        <p className="ux-project-subtitle" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
           We integrate automation and AI workflows to reduce cost, <br />{" "}
           increase output, and maintain precision.
         </p>
       </div>
-      <div className="ux-hero-actions">
+      <div className="ux-hero-actions" data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000">
-        <a href="#" className="btn ux-btn-primary">
+        <Link href="/start_project" className="btn ux-btn-primary">
           Start a Project{" "}
           <span className="ux-btn-icon">
             <img src="assets/images/arrowbuttonwhite.svg" alt="" />
           </span>
-        </a>
+        </Link>
-        <a href="#" className="btn ux-btn-secondary">
+        <Link href="/work" className="btn ux-btn-secondary">
           View Case Studies
-        </a>
+        </Link>
       </div>
       <div className="row align-items-center g-5 ux-growth-section">
         {/* Left Content */}
-        <div className="col-lg-7">
+        <div className="col-lg-8" data-aos="fade-right" data-aos-duration="1000">
           <span className="ux-growth-label">Philosophy</span>
           <h2 className="ux-growth-title">Manual Processes Slow Growth</h2>
           <p className="ux-growth-subtitle">Teams waste time on:</p>
@@ -47,7 +49,7 @@ export default function AiPowered() {
           <p className="ux-growth-bottom">Growth requires velocity.</p>
         </div>
         {/* Right Image */}
-        <div className="col-lg-5">
+        <div className="col-lg-4" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
           <div className="ux-growth-image-box">
             <img
               src="assets/images/Intelligent.png"
@@ -61,13 +63,13 @@ export default function AiPowered() {
   <section className="ux-approach-section">
     <div className="container">
       <div className="row align-items-end mb-5">
-        <div className="col-lg-6">
+        <div className="col-lg-6" data-aos="fade-right" data-aos-duration="1000">
           <span className="ux-label">Our Approach</span>
           <h2 className="ux-section-title">
             We treat brand as infrastructure.
           </h2>
         </div>
-        <div className="col-lg-6 text-lg-end mt-4 mt-lg-0">
+        <div className="col-lg-6 text-lg-end mt-4 mt-lg-0" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
           <p className="ux-section-desc">
             We Build Intelligent Production Systems.
           </p>
@@ -75,7 +77,7 @@ export default function AiPowered() {
       </div>
       <div className="row g-4">
         {/* Card 1 */}
-        <div className="col-lg-4 col-md-6">
+        <div className="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100" data-aos-duration="1000">
           <div className="ux-card">
             <div className="ux-card-top">
               <span className="ux-icon">
@@ -88,7 +90,7 @@ export default function AiPowered() {
           </div>
         </div>
         {/* Card 2 */}
-        <div className="col-lg-4 col-md-6">
+        <div className="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="250" data-aos-duration="1000">
           <div className="ux-card">
             <div className="ux-card-top">
               <span className="ux-icon">
@@ -104,7 +106,7 @@ export default function AiPowered() {
           </div>
         </div>
         {/* Card 3 */}
-        <div className="col-lg-4 col-md-6">
+        <div className="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000">
           <div className="ux-card">
             <div className="ux-card-top">
               <span className="ux-icon">
@@ -121,37 +123,37 @@ export default function AiPowered() {
   </section>
   <section className="ux-deliver-section">
     <div className="container">
-      <h2 className="ux-deliver-title">What We Deliver</h2>
+      <h2 className="ux-deliver-title" data-aos="fade-up" data-aos-duration="1000">What We Deliver</h2>
       <div className="row g-5">
         {/* Left List */}
         <div className="col-lg-7">
-          <div className="ux-deliver-list active">
+          <div className="ux-deliver-list active" data-aos="fade-right" data-aos-delay="100" data-aos-duration="900">
             <span>01</span>
             Production workflow audits
           </div>
-          <div className="ux-deliver-list">
+          <div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="200" data-aos-duration="900">
             <span>02</span>
             Automation setup
           </div>
-          <div className="ux-deliver-list">
+          <div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="300" data-aos-duration="900">
             <span>03</span>
             AI tool integration
           </div>
-          <div className="ux-deliver-list">
+          <div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="400" data-aos-duration="900">
             <span>04</span>
             Template systems
           </div>
-          <div className="ux-deliver-list">
+          <div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="500" data-aos-duration="900">
             <span>05</span>
             Asset libraries
           </div>
-          <div className="ux-deliver-list">
+          <div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="600" data-aos-duration="900">
             <span>06</span>
             SOP documentation
           </div>
         </div>
         {/* Right Snapshot */}
-        <div className="col-lg-5">
+        <div className="col-lg-5" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
           <div className="ux-snapshot-box">
             <small>CASE SNAPSHOT</small>
             <hr />
@@ -168,18 +170,18 @@ export default function AiPowered() {
   {/* TOP CTA */}
   <div className="ux-footer-hero">
     <div className="container">
-      <div className="ux-footer-hero-content text-center">
+      <div className="ux-footer-hero-content text-center" data-aos="zoom-in" data-aos-duration="1000">
         <p className="ux-section-label">AAideA</p>
         <h2 className="ux-footer-title">
           If the idea is strong, we'll scale it.
         </h2>
         <div className="ux-hero-actions">
-          <a href="#" className="btn ux-btn-primary">
+          <Link href="/start_project" className="btn ux-btn-primary">
             Start a Project{" "}
             <span className="ux-btn-icon">
               <img src="assets/images/arrowbuttonwhite.svg" alt="" />
             </span>
-          </a>
+          </Link>
         </div>
       </div>
     </div>

app/brand-architecture/page.tsx

@@ -1,3 +1,5 @@
+import Link from "next/link";
+
 export default function Brandarchiture() {
     return (
         <>
@@ -5,26 +7,26 @@ export default function Brandarchiture() {
           <div className="container">
             {/* center content */}
             <div className="ux-project-content text-center">
-              <h1 className="ux-project-title">Brands Built As Systems</h1>
+              <h1 className="ux-project-title" data-aos="fade-up" data-aos-duration="1000">Brands Built As Systems</h1>
-              <p className="ux-project-subtitle">
+              <p className="ux-project-subtitle" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
                 We don't just design logos. We design structured identity ecosystems
                 that scale across channels.
               </p>
             </div>
-            <div className="ux-hero-actions">
+            <div className="ux-hero-actions" data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000">
-              <a href="#" className="btn ux-btn-primary">
+              <Link href="/start_project" className="btn ux-btn-primary">
                 Start a Project{" "}
                 <span className="ux-btn-icon">
                   <img src="assets/images/arrowbuttonwhite.svg" alt="" />
                 </span>
-              </a>
+              </Link>
-              <a href="#" className="btn ux-btn-secondary">
+              <Link href="/work" className="btn ux-btn-secondary">
                 View Case Studies
-              </a>
+              </Link>
             </div>
             <div className="row align-items-center g-5 ux-growth-section">
               {/* Left Content */}
-              <div className="col-lg-7">
+              <div className="col-lg-8" data-aos="fade-right" data-aos-duration="1000">
                 <span className="ux-growth-label">Philosophy</span>
                 <h2 className="ux-growth-title">
                   Most Brands Are Visual Collections — Not Strategic Systems
@@ -49,7 +51,7 @@ export default function Brandarchiture() {
                 </p>
               </div>
               {/* Right Image */}
-              <div className="col-lg-5">
+              <div className="col-lg-4" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
                 <div className="ux-growth-image-box">
                   <img src="assets/images/brandart.png" alt="Brand System" />
                 </div>
@@ -60,13 +62,13 @@ export default function Brandarchiture() {
         <section className="ux-approach-section">
           <div className="container">
             <div className="row align-items-end mb-5">
-              <div className="col-lg-6">
+              <div className="col-lg-6" data-aos="fade-right" data-aos-duration="1000">
                 <span className="ux-label">Our Approach</span>
                 <h2 className="ux-section-title">
                   We treat brand as infrastructure.
                 </h2>
               </div>
-              <div className="col-lg-6 text-lg-end mt-4 mt-lg-0">
+              <div className="col-lg-6 text-lg-end mt-4 mt-lg-0" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
                 <p className="ux-section-desc">
                   Brand Should Feel Consistent Whether It's On A Billboard Or A Mobile
                   App.
@@ -75,7 +77,7 @@ export default function Brandarchiture() {
             </div>
             <div className="row g-4">
               {/* Card 1 */}
-              <div className="col-lg-4 col-md-6">
+              <div className="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100" data-aos-duration="1000">
                 <div className="ux-card">
                   <div className="ux-card-top">
                     <span className="ux-icon">
@@ -88,7 +90,7 @@ export default function Brandarchiture() {
                 </div>
               </div>
               {/* Card 2 */}
-              <div className="col-lg-4 col-md-6">
+              <div className="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="250" data-aos-duration="1000">
                 <div className="ux-card">
                   <div className="ux-card-top">
                     <span className="ux-icon">
@@ -104,7 +106,7 @@ export default function Brandarchiture() {
                 </div>
               </div>
               {/* Card 3 */}
-              <div className="col-lg-4 col-md-6">
+              <div className="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000">
                 <div className="ux-card">
                   <div className="ux-card-top">
                     <span className="ux-icon">
@@ -123,41 +125,41 @@ export default function Brandarchiture() {
         </section>
         <section className="ux-deliver-section">
           <div className="container">
-            <h2 className="ux-deliver-title">What We Deliver</h2>
+            <h2 className="ux-deliver-title" data-aos="fade-up" data-aos-duration="1000">What We Deliver</h2>
             <div className="row g-5">
               {/* Left List */}
               <div className="col-lg-7">
-                <div className="ux-deliver-list active">
+                <div className="ux-deliver-list active" data-aos="fade-right" data-aos-delay="100" data-aos-duration="900">
                   <span>01</span>
                   Market and positioning analysis
                 </div>
-                <div className="ux-deliver-list">
+                <div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="200" data-aos-duration="900">
                   <span>02</span>
                   Logo and identity design
                 </div>
-                <div className="ux-deliver-list">
+                <div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="300" data-aos-duration="900">
                   <span>03</span>
                   Brand guidelines
                 </div>
-                <div className="ux-deliver-list">
+                <div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="400" data-aos-duration="900">
                   <span>04</span>
                   Asset system for scale
                 </div>
-                <div className="ux-deliver-list">
+                <div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="500" data-aos-duration="900">
                   <span>05</span>
                   Brand narrative development
                 </div>
-                <div className="ux-deliver-list">
+                <div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="600" data-aos-duration="900">
                   <span>06</span>
                   Typography and color systems
                 </div>
-                <div className="ux-deliver-list">
+                <div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="700" data-aos-duration="900">
                   <span>07</span>
                   Messaging architecture
                 </div>
               </div>
               {/* Right Snapshot */}
-              <div className="col-lg-5">
+              <div className="col-lg-5" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
                 <div className="ux-snapshot-box">
                   <small>CASE SNAPSHOT</small>
                   <hr />
@@ -174,18 +176,18 @@ export default function Brandarchiture() {
         {/* TOP CTA */}
         <div className="ux-footer-hero">
           <div className="container">
-            <div className="ux-footer-hero-content text-center">
+            <div className="ux-footer-hero-content text-center" data-aos="zoom-in" data-aos-duration="1000">
               <p className="ux-section-label">AAideA</p>
               <h2 className="ux-footer-title">
                 If the idea is strong, we'll scale it.
               </h2>
               <div className="ux-hero-actions">
-                <a href="#" className="btn ux-btn-primary">
+                <Link href="/start_project" className="btn ux-btn-primary">
                   Start a Project{" "}
                   <span className="ux-btn-icon">
                     <img src="assets/images/arrowbuttonwhite.svg" alt="" />
                   </span>
-                </a>
+                </Link>
               </div>
             </div>
           </div>

app/brand-build/page.tsx

@@ -1,3 +1,5 @@
+import Link from "next/link";
+
 export default function brand_build() {
     return (
         <>
@@ -5,26 +7,26 @@ export default function brand_build() {
           <div className="container">
             {/* center content */}
             <div className="ux-project-content text-center">
-              <h1 className="ux-project-title">Brand Built As Systems</h1>
+              <h1 className="ux-project-title" data-aos="fade-up" data-aos-duration="1000">Brand Built As Systems</h1>
-              <p className="ux-project-subtitle">
+              <p className="ux-project-subtitle" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
                 We don't just design logos. We design structured identity ecosystems
                 that scale across channels.
               </p>
             </div>
-            <div className="ux-hero-actions">
+            <div className="ux-hero-actions" data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000">
-              <a href="#" className="btn ux-btn-primary">
+              <Link href="/start_project" className="btn ux-btn-primary">
                 Start a Project{" "}
                 <span className="ux-btn-icon">
                   <img src="assets/images/arrowbuttonwhite.svg" alt="" />
                 </span>
-              </a>
+              </Link>
-              <a href="#" className="btn ux-btn-secondary">
+              <Link href="/work" className="btn ux-btn-secondary">
                 View Case Studies
-              </a>
+              </Link>
             </div>
             <div className="row align-items-center g-5 ux-growth-section">
               {/* Left Content */}
-              <div className="col-lg-7">
+              <div className="col-lg-8" data-aos="fade-right" data-aos-duration="1000">
                 <span className="ux-growth-label">Philosophy</span>
                 <h2 className="ux-growth-title">
                   Most Brands Are Visual Collections — Not Strategic Systems
@@ -49,7 +51,7 @@ export default function brand_build() {
                 </p>
               </div>
               {/* Right Image */}
-              <div className="col-lg-5">
+              <div className="col-lg-4" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
                 <div className="ux-growth-image-box">
                   <img src="assets/images/Philosophy.png" alt="Brand System" />
                 </div>
@@ -60,13 +62,13 @@ export default function brand_build() {
         <section className="ux-approach-section">
           <div className="container">
             <div className="row align-items-end mb-5">
-              <div className="col-lg-6">
+              <div className="col-lg-6" data-aos="fade-right" data-aos-duration="1000">
                 <span className="ux-label">Our Approach</span>
                 <h2 className="ux-section-title">
                   We treat brand as infrastructure.
                 </h2>
               </div>
-              <div className="col-lg-6 text-lg-end mt-4 mt-lg-0">
+              <div className="col-lg-6 text-lg-end mt-4 mt-lg-0" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
                 <p className="ux-section-desc">
                   Brand Should Feel Consistent Whether It's On A Billboard Or A Mobile
                   App.
@@ -75,7 +77,7 @@ export default function brand_build() {
             </div>
             <div className="row g-4">
               {/* Card 1 */}
-              <div className="col-lg-4 col-md-6">
+              <div className="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100" data-aos-duration="1000">
                 <div className="ux-card">
                   <div className="ux-card-top">
                     <span className="ux-icon">
@@ -88,7 +90,7 @@ export default function brand_build() {
                 </div>
               </div>
               {/* Card 2 */}
-              <div className="col-lg-4 col-md-6">
+              <div className="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="250" data-aos-duration="1000">
                 <div className="ux-card">
                   <div className="ux-card-top">
                     <span className="ux-icon">
@@ -104,7 +106,7 @@ export default function brand_build() {
                 </div>
               </div>
               {/* Card 3 */}
-              <div className="col-lg-4 col-md-6">
+              <div className="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000">
                 <div className="ux-card">
                   <div className="ux-card-top">
                     <span className="ux-icon">
@@ -123,41 +125,41 @@ export default function brand_build() {
         </section>
         <section className="ux-deliver-section">
           <div className="container">
-            <h2 className="ux-deliver-title">What We Deliver</h2>
+            <h2 className="ux-deliver-title" data-aos="fade-up" data-aos-duration="1000">What We Deliver</h2>
             <div className="row g-5">
               {/* Left List */}
               <div className="col-lg-7">
-                <div className="ux-deliver-list active">
+                <div className="ux-deliver-list active" data-aos="fade-right" data-aos-delay="100" data-aos-duration="900">
                   <span>01</span>
                   Market and positioning analysis
                 </div>
-                <div className="ux-deliver-list">
+                <div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="200" data-aos-duration="900">
                   <span>02</span>
                   Brand narrative development
                 </div>
-                <div className="ux-deliver-list">
+                <div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="300" data-aos-duration="900">
                   <span>03</span>
                   Logo and identity design
                 </div>
-                <div className="ux-deliver-list">
+                <div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="400" data-aos-duration="900">
                   <span>04</span>
                   Typography and color systems
                 </div>
-                <div className="ux-deliver-list">
+                <div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="500" data-aos-duration="900">
                   <span>05</span>
                   Brand guidelines
                 </div>
-                <div className="ux-deliver-list">
+                <div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="600" data-aos-duration="900">
                   <span>06</span>
                   Messaging architecture
                 </div>
-                <div className="ux-deliver-list">
+                <div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="700" data-aos-duration="900">
                   <span>07</span>
                   Asset system for scale
                 </div>
               </div>
               {/* Right Snapshot */}
-              <div className="col-lg-5">
+              <div className="col-lg-5" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
                 <div className="ux-snapshot-box">
                   <small>CASE SNAPSHOT</small>
                   <hr />
@@ -174,18 +176,18 @@ export default function brand_build() {
         {/* TOP CTA */}
         <div className="ux-footer-hero">
           <div className="container">
-            <div className="ux-footer-hero-content text-center">
+            <div className="ux-footer-hero-content text-center" data-aos="zoom-in" data-aos-duration="1000">
               <p className="ux-section-label">AAideA</p>
               <h2 className="ux-footer-title">
                 If the idea is strong, we'll scale it.
               </h2>
               <div className="ux-hero-actions">
-                <a href="#" className="btn ux-btn-primary">
+                <Link href="/start_project" className="btn ux-btn-primary">
                   Start a Project{" "}
                   <span className="ux-btn-icon">
                     <img src="assets/images/arrowbuttonwhite.svg" alt="" />
                   </span>
-                </a>
+                </Link>
               </div>
             </div>
           </div>

app/campaign_strategy/page.tsx

@@ -1,3 +1,5 @@
+import Link from "next/link";
+
 export default function Campaign() {
     return (
 <>
@@ -5,26 +7,26 @@ export default function Campaign() {
     <div className="container">
       {/* center content */}
       <div className="ux-project-content text-center">
-        <h1 className="ux-project-title">Campaigns Built To Perform</h1>
+        <h1 className="ux-project-title" data-aos="fade-up" data-aos-duration="1000">Campaigns Built To Perform</h1>
-        <p className="ux-project-subtitle">
+        <p className="ux-project-subtitle" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
           We design campaign systems that drive measurable growth, not temporary
           attention.
         </p>
       </div>
-      <div className="ux-hero-actions">
+      <div className="ux-hero-actions" data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000">
-        <a href="#" className="btn ux-btn-primary">
+        <Link href="/start_project" className="btn ux-btn-primary">
           Start a Project{" "}
           <span className="ux-btn-icon">
             <img src="assets/images/arrowbuttonwhite.svg" alt="" />
           </span>
-        </a>
+        </Link>
-        <a href="#" className="btn ux-btn-secondary">
+        <Link href="/work" className="btn ux-btn-secondary">
           View Case Studies
-        </a>
+        </Link>
       </div>
       <div className="row align-items-center g-5 ux-growth-section">
         {/* Left Content */}
-        <div className="col-lg-7">
+        <div className="col-lg-8" data-aos="fade-right" data-aos-duration="1000">
           <span className="ux-growth-label">Philosophy</span>
           <h2 className="ux-growth-title">
             Most Campaigns Look Impressive But Lack Structure
@@ -49,7 +51,7 @@ export default function Campaign() {
           </p>
         </div>
         {/* Right Image */}
-        <div className="col-lg-5">
+        <div className="col-lg-4" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
           <div className="ux-growth-image-box">
             <img src="assets/images/Philosophy.png" alt="Campaign System" />
           </div>
@@ -60,13 +62,13 @@ export default function Campaign() {
   <section className="ux-approach-section">
     <div className="container">
       <div className="row align-items-end mb-5">
-        <div className="col-lg-6">
+        <div className="col-lg-6" data-aos="fade-right" data-aos-duration="1000">
           <span className="ux-label">Our Approach</span>
           <h2 className="ux-section-title">
             We build campaigns like structured systems.
           </h2>
         </div>
-        <div className="col-lg-6 text-lg-end mt-4 mt-lg-0">
+        <div className="col-lg-6 text-lg-end mt-4 mt-lg-0" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
           <p className="ux-section-desc">
             Campaigns Must Be Scalable, Measurable, And Repeatable.
           </p>
@@ -74,7 +76,7 @@ export default function Campaign() {
       </div>
       <div className="row g-4">
         {/* Card 1 */}
-        <div className="col-lg-4 col-md-6">
+        <div className="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100" data-aos-duration="1000">
           <div className="ux-card">
             <div className="ux-card-top">
               <span className="ux-icon">
@@ -90,7 +92,7 @@ export default function Campaign() {
           </div>
         </div>
         {/* Card 2 */}
-        <div className="col-lg-4 col-md-6">
+        <div className="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="250" data-aos-duration="1000">
           <div className="ux-card">
             <div className="ux-card-top">
               <span className="ux-icon">
@@ -106,7 +108,7 @@ export default function Campaign() {
           </div>
         </div>
         {/* Card 3 */}
-        <div className="col-lg-4 col-md-6">
+        <div className="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000">
           <div className="ux-card">
             <div className="ux-card-top">
               <span className="ux-icon">
@@ -123,37 +125,37 @@ export default function Campaign() {
   </section>
   <section className="ux-deliver-section">
     <div className="container">
-      <h2 className="ux-deliver-title">What We Deliver</h2>
+      <h2 className="ux-deliver-title" data-aos="fade-up" data-aos-duration="1000">What We Deliver</h2>
       <div className="row g-5">
         {/* Left List */}
         <div className="col-lg-7">
-          <div className="ux-deliver-list active">
+          <div className="ux-deliver-list active" data-aos="fade-right" data-aos-delay="100" data-aos-duration="900">
             <span>01</span>
             Campaign strategy blueprint
           </div>
-          <div className="ux-deliver-list">
+          <div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="200" data-aos-duration="900">
             <span>02</span>
             Creative direction
           </div>
-          <div className="ux-deliver-list">
+          <div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="300" data-aos-duration="900">
             <span>03</span>
             Ad creative production
           </div>
-          <div className="ux-deliver-list">
+          <div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="400" data-aos-duration="900">
             <span>04</span>
             Landing page alignment
           </div>
-          <div className="ux-deliver-list">
+          <div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="500" data-aos-duration="900">
             <span>05</span>
             Performance funnel mapping
           </div>
-          <div className="ux-deliver-list">
+          <div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="600" data-aos-duration="900">
             <span>06</span>
             Optimization frameworks
           </div>
         </div>
         {/* Right Snapshot */}
-        <div className="col-lg-5">
+        <div className="col-lg-5" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
           <div className="ux-snapshot-box">
             <small>CASE SNAPSHOT</small>
             <hr />
@@ -170,18 +172,18 @@ export default function Campaign() {
   {/* TOP CTA */}
   <div className="ux-footer-hero">
     <div className="container">
-      <div className="ux-footer-hero-content text-center">
+      <div className="ux-footer-hero-content text-center" data-aos="zoom-in" data-aos-duration="1000">
         <p className="ux-section-label">AAideA</p>
         <h2 className="ux-footer-title">
           If the idea is strong, we'll scale it.
         </h2>
         <div className="ux-hero-actions">
-          <a href="#" className="btn ux-btn-primary">
+          <Link href="/start_project" className="btn ux-btn-primary">
             Start a Project{" "}
             <span className="ux-btn-icon">
               <img src="assets/images/arrowbuttonwhite.svg" alt="" />
             </span>
-          </a>
+          </Link>
         </div>
       </div>
     </div>

app/components/AosInit.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { useEffect } from 'react';
+// @ts-expect-error — aos has no bundled types and no @types/aos installed
+import AOS from 'aos';
+import { usePathname } from 'next/navigation';
+
+export default function AosInit() {
+  const pathname = usePathname();
+
+  useEffect(() => {
+    AOS.init({
+      duration: 800,
+      easing: 'ease-out-cubic',
+      offset: 60,
+      delay: 0,
+      once: true,
+      mirror: false,
+      anchorPlacement: 'top-bottom',
+      disable: () => window.matchMedia('(prefers-reduced-motion: reduce)').matches,
+    });
+  }, []);
+
+  useEffect(() => {
+    AOS.refreshHard();
+  }, [pathname]);
+
+  return null;
+}

app/components/Footer.tsx

@@ -6,9 +6,8 @@ export default function Footer() {
     <footer className="ux-main-footer">
       <div className="container">
         <div className="ux-footer-grid">
-          {/* LEFT */}
           <div className="ux-footer-left">
-            <Link href="#"><Image src="/assets/images/footerlogo.png" alt="Logo" width={120} height={40} /></Link>
+            <Link href="/"><Image src="/assets/images/footerlogo.png" alt="Logo" width={120} height={40} /></Link>
             <p className="ux-footer-desc">
               We build digital homes, brand systems, and scalable
               content engines designed for clarity and growth.
@@ -16,7 +15,6 @@ export default function Footer() {
             </p>
           </div>
 
-          {/* RIGHT */}
           <div className="ux-footer-right">
             <div className="ux-footer-links">
               <h6>POPULAR</h6>
@@ -28,29 +26,28 @@ export default function Footer() {
               <h6>HELP</h6>
               <Link href="/process">Process</Link>
               <Link href="/start_project">Start a Project</Link>
-              <Link href="/hvac">HVAC</Link>
+              <Link href="/contact">Contact</Link>
             </div>
             <div className="ux-footer-links">
               <h6>LEGAL</h6>
-              <Link href="#">Terms and Conditions</Link>
+              <Link href="/terms">Terms and Conditions</Link>
-              <Link href="#">Privacy Policy</Link>
+              <Link href="/privacy">Privacy Policy</Link>
-              <Link href="#">FAQ's</Link>
+              <Link href="/faq">FAQ&apos;s</Link>
             </div>
           </div>
         </div>
 
-        {/* BOTTOM */}
         <div className="ux-footer-bottom">
-          <p>© 2026 AAideA by Insignia Consultancy Solutions. All rights reserved.</p>
+          <p>&copy; 2026 AAideA by Insignia Consultancy Solutions. All rights reserved.</p>
           <div className="ux-footer-social">
-            <Link href="#"><Image src="/assets/images/facebook.svg" alt="facebook" width={20} height={20} /></Link>
+            <a href="https://facebook.com" target="_blank" rel="noopener noreferrer"><Image src="/assets/images/facebook.svg" alt="facebook" width={20} height={20} /></a>
-            <Link href="#"><Image src="/assets/images/linkdien.svg" alt="linkedin" width={20} height={20} /></Link>
+            <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer"><Image src="/assets/images/linkdien.svg" alt="linkedin" width={20} height={20} /></a>
-            <Link href="#"><Image src="/assets/images/instagram.svg" alt="instagram" width={20} height={20} /></Link>
+            <a href="https://instagram.com" target="_blank" rel="noopener noreferrer"><Image src="/assets/images/instagram.svg" alt="instagram" width={20} height={20} /></a>
-            <Link href="#"><Image src="/assets/images/twitter.svg" alt="twitter" width={20} height={20} /></Link>
+            <a href="https://twitter.com" target="_blank" rel="noopener noreferrer"><Image src="/assets/images/twitter.svg" alt="twitter" width={20} height={20} /></a>
-            <Link href="#"><Image src="/assets/images/youtube.svg" alt="youtube" width={20} height={20} /></Link>
+            <a href="https://youtube.com" target="_blank" rel="noopener noreferrer"><Image src="/assets/images/youtube.svg" alt="youtube" width={20} height={20} /></a>
           </div>
         </div>
       </div>
     </footer>
   );
-}
+}

app/contact/page.tsx

@@ -0,0 +1,55 @@
+import Link from "next/link";
+
+export default function Contact() {
+  return (
+    <>
+      <section className="ux-project-hero">
+        <div className="container">
+          <div className="ux-project-content text-center">
+            <h1 className="ux-project-title" data-aos="fade-up" data-aos-duration="1000">Get in touch.</h1>
+            <p className="ux-project-subtitle" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
+              Tell us about your project. We respond within one business day.
+            </p>
+            <div className="ux-breadcrumb-wrap" data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000">
+              <Link href="/">Home</Link>
+              <span>/</span>
+              <p>Contact</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="ux-about-section">
+        <div className="container">
+          <div className="row">
+            <div className="col-lg-9 mx-auto">
+              <h4 className="ux-card-title" data-aos="fade-up" data-aos-duration="900">Email</h4>
+              <p className="ux-card-text" data-aos="fade-up" data-aos-delay="100" data-aos-duration="900">
+                <a href="mailto:info@aaidea.com" className="ux-link">info@aaidea.com</a>
+              </p>
+
+              <h4 className="ux-card-title mt-5" data-aos="fade-up" data-aos-duration="900">Office</h4>
+              <p className="ux-card-text" data-aos="fade-up" data-aos-delay="100" data-aos-duration="900">
+                410 Sandtown, California 94001, USA
+              </p>
+
+              <h4 className="ux-card-title mt-5" data-aos="fade-up" data-aos-duration="900">Start a project</h4>
+              <p className="ux-card-text" data-aos="fade-up" data-aos-delay="100" data-aos-duration="900">
+                Ready to scope? Use our{" "}
+                <Link href="/start_project" className="ux-link">project intake form</Link>{" "}
+                &mdash; it takes about 3 minutes and we&apos;ll respond with next steps.
+              </p>
+
+              <h4 className="ux-card-title mt-5" data-aos="fade-up" data-aos-duration="900">Other resources</h4>
+              <p className="ux-card-text" data-aos="fade-up" data-aos-delay="100" data-aos-duration="900">
+                Read about our <Link href="/process" className="ux-link">process</Link>,
+                explore <Link href="/services" className="ux-link">services</Link>,
+                or check the <Link href="/faq" className="ux-link">FAQ</Link>.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}

app/content_motion/page.tsx

@@ -1,3 +1,5 @@
+import Link from "next/link";
+
 export default function Content() {
   return (
     <>
@@ -5,27 +7,27 @@ export default function Content() {
       <div className="container">
         {/* center content */}
         <div className="ux-project-content text-center">
-          <h1 className="ux-project-title">
+          <h1 className="ux-project-title" data-aos="fade-up" data-aos-duration="1000">
             Content Built For <br /> Consistency And Scale
           </h1>
-          <p className="ux-project-subtitle">
+          <p className="ux-project-subtitle" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
             Structured storytelling across video, motion, and digital channels.
           </p>
         </div>
-        <div className="ux-hero-actions">
+        <div className="ux-hero-actions" data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000">
-          <a href="#" className="btn ux-btn-primary">
+          <Link href="/start_project" className="btn ux-btn-primary">
             Start a Project{" "}
             <span className="ux-btn-icon">
               <img src="assets/images/arrowbuttonwhite.svg" alt="" />
             </span>
-          </a>
+          </Link>
-          <a href="#" className="btn ux-btn-secondary">
+          <Link href="/work" className="btn ux-btn-secondary">
             View Case Studies
-          </a>
+          </Link>
         </div>
         <div className="row align-items-center g-5 ux-growth-section">
           {/* Left Content */}
-          <div className="col-lg-7">
+          <div className="col-lg-8" data-aos="fade-right" data-aos-duration="1000">
             <span className="ux-growth-label">Philosophy</span>
             <h2 className="ux-growth-title">Content Often Becomes Reactive</h2>
             <p className="ux-growth-subtitle">Teams struggle with:</p>
@@ -48,7 +50,7 @@ export default function Content() {
             </p>
           </div>
           {/* Right Image */}
-          <div className="col-lg-5">
+          <div className="col-lg-4" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
             <div className="ux-growth-image-box">
               <img src="assets/images/Content.png" alt="Content System" />
             </div>
@@ -59,13 +61,13 @@ export default function Content() {
     <section className="ux-approach-section">
       <div className="container">
         <div className="row align-items-end mb-5">
-          <div className="col-lg-6">
+          <div className="col-lg-6" data-aos="fade-right" data-aos-duration="1000">
             <span className="ux-label">Our Approach</span>
             <h2 className="ux-section-title">
               We design repeatable content engines.
             </h2>
           </div>
-          <div className="col-lg-6 text-lg-end mt-4 mt-lg-0">
+          <div className="col-lg-6 text-lg-end mt-4 mt-lg-0" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
             <p className="ux-section-desc">
               We Design Repeatable Content Engines.
             </p>
@@ -73,7 +75,7 @@ export default function Content() {
         </div>
         <div className="row g-4">
           {/* Card 1 */}
-          <div className="col-lg-4 col-md-6">
+          <div className="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100" data-aos-duration="1000">
             <div className="ux-card">
               <div className="ux-card-top">
                 <span className="ux-icon">
@@ -86,7 +88,7 @@ export default function Content() {
             </div>
           </div>
           {/* Card 2 */}
-          <div className="col-lg-4 col-md-6">
+          <div className="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="250" data-aos-duration="1000">
             <div className="ux-card">
               <div className="ux-card-top">
                 <span className="ux-icon">
@@ -99,7 +101,7 @@ export default function Content() {
             </div>
           </div>
           {/* Card 3 */}
-          <div className="col-lg-4 col-md-6">
+          <div className="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000">
             <div className="ux-card">
               <div className="ux-card-top">
                 <span className="ux-icon">
@@ -119,37 +121,37 @@ export default function Content() {
     </section>
     <section className="ux-deliver-section">
       <div className="container">
-        <h2 className="ux-deliver-title">What We Deliver</h2>
+        <h2 className="ux-deliver-title" data-aos="fade-up" data-aos-duration="1000">What We Deliver</h2>
         <div className="row g-5">
           {/* Left List */}
           <div className="col-lg-7">
-            <div className="ux-deliver-list active">
+            <div className="ux-deliver-list active" data-aos="fade-right" data-aos-delay="100" data-aos-duration="900">
               <span>01</span>
               Content strategy framework
             </div>
-            <div className="ux-deliver-list">
+            <div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="200" data-aos-duration="900">
               <span>02</span>
               Editorial calendar architecture
             </div>
-            <div className="ux-deliver-list">
+            <div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="300" data-aos-duration="900">
               <span>03</span>
               Video and motion templates
             </div>
-            <div className="ux-deliver-list">
+            <div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="400" data-aos-duration="900">
               <span>04</span>
               Visual storytelling systems
             </div>
-            <div className="ux-deliver-list">
+            <div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="500" data-aos-duration="900">
               <span>05</span>
               Social content design patterns
             </div>
-            <div className="ux-deliver-list">
+            <div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="600" data-aos-duration="900">
               <span>06</span>
               Production workflows
             </div>
           </div>
           {/* Right Snapshot */}
-          <div className="col-lg-5">
+          <div className="col-lg-5" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
             <div className="ux-snapshot-box">
               <small>CASE SNAPSHOT</small>
               <hr />
@@ -166,18 +168,18 @@ export default function Content() {
     {/* TOP CTA */}
     <div className="ux-footer-hero">
       <div className="container">
-        <div className="ux-footer-hero-content text-center">
+        <div className="ux-footer-hero-content text-center" data-aos="zoom-in" data-aos-duration="1000">
           <p className="ux-section-label">AAideA</p>
           <h2 className="ux-footer-title">
             If the idea is strong, we'll scale it.
           </h2>
           <div className="ux-hero-actions">
-            <a href="#" className="btn ux-btn-primary">
+            <Link href="/start_project" className="btn ux-btn-primary">
               Start a Project{" "}
               <span className="ux-btn-icon">
                 <img src="assets/images/arrowbuttonwhite.svg" alt="" />
               </span>
-            </a>
+            </Link>
           </div>
         </div>
       </div>

app/digital_platform/page.tsx

@@ -1,3 +1,5 @@
+import Link from "next/link";
+
 export default function Digital() {
     return (
         <>
@@ -5,28 +7,28 @@ export default function Digital() {
           <div className="container">
             {/* center content */}
             <div className="ux-project-content text-center">
-              <h1 className="ux-project-title">
+              <h1 className="ux-project-title" data-aos="fade-up" data-aos-duration="1000">
                 Digital Platforms Built <br /> to Scale
               </h1>
-              <p className="ux-project-subtitle">
+              <p className="ux-project-subtitle" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
                 Web architecture designed for growth, integration, and performance —
                 not just design awards.
               </p>
             </div>
-            <div className="ux-hero-actions">
+            <div className="ux-hero-actions" data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000">
-              <a href="#" className="btn ux-btn-primary">
+              <Link href="/start_project" className="btn ux-btn-primary">
                 Start a Project{" "}
                 <span className="ux-btn-icon">
                   <img src="assets/images/arrowbuttonwhite.svg" alt="" />
                 </span>
-              </a>
+              </Link>
-              <a href="#" className="btn ux-btn-secondary">
+              <Link href="/work" className="btn ux-btn-secondary">
                 View Case Studies
-              </a>
+              </Link>
             </div>
             <div className="row align-items-center g-5 ux-growth-section">
               {/* Left Content */}
-              <div className="col-lg-7">
+              <div className="col-lg-8" data-aos="fade-right" data-aos-duration="1000">
                 <span className="ux-growth-label">Philosophy</span>
                 <h2 className="ux-growth-title">Most Websites Break Under Growth</h2>
                 <p className="ux-growth-subtitle">
@@ -55,7 +57,7 @@ export default function Digital() {
                 </p>
               </div>
               {/* Right Image */}
-              <div className="col-lg-5">
+              <div className="col-lg-4" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
                 <div className="ux-growth-image-box">
                   <img src="assets/images/Philosophy.png" alt="UI Design" />
                 </div>
@@ -69,7 +71,7 @@ export default function Digital() {
         <section className="ux-approach-section">
           <div className="container">
             <div className="row align-items-end mb-3">
-              <div className="col-lg-6">
+              <div className="col-lg-6" data-aos="fade-right" data-aos-duration="1000">
                 <span className="ux-label">Our Approach</span>
                 <h2 className="ux-section-title">
                   We don't design pages.
@@ -77,7 +79,7 @@ export default function Digital() {
                   We design digital infrastructure.
                 </h2>
               </div>
-              <div className="col-lg-6 text-lg-end mt-4 mt-lg-0">
+              <div className="col-lg-6 text-lg-end mt-4 mt-lg-0" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
                 <p className="ux-section-desc">
                   The Result Is A Platform That Evolves With The Business.
                 </p>
@@ -85,7 +87,7 @@ export default function Digital() {
             </div>
             <div className="row g-4">
               {/* Card 1 */}
-              <div className="col-lg-4 col-md-6">
+              <div className="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100" data-aos-duration="1000">
                 <div className="ux-card">
                   <div className="ux-card-top">
                     <span className="ux-icon">
@@ -101,7 +103,7 @@ export default function Digital() {
                 </div>
               </div>
               {/* Card 2 */}
-              <div className="col-lg-4 col-md-6">
+              <div className="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="250" data-aos-duration="1000">
                 <div className="ux-card">
                   <div className="ux-card-top">
                     <span className="ux-icon">
@@ -117,7 +119,7 @@ export default function Digital() {
                 </div>
               </div>
               {/* Card 3 */}
-              <div className="col-lg-4 col-md-6">
+              <div className="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000">
                 <div className="ux-card">
                   <div className="ux-card-top">
                     <span className="ux-icon">
@@ -137,41 +139,41 @@ export default function Digital() {
       =========================== */}
         <section className="ux-deliver-section">
           <div className="container">
-            <h2 className="ux-deliver-title">What We Deliver</h2>
+            <h2 className="ux-deliver-title" data-aos="fade-up" data-aos-duration="1000">What We Deliver</h2>
             <div className="row g-5">
               {/* Left List */}
               <div className="col-lg-7">
-                <div className="ux-deliver-list active">
+                <div className="ux-deliver-list active" data-aos="fade-right" data-aos-delay="100" data-aos-duration="900">
                   <span>01</span>
                   UX strategy and journey mapping
                 </div>
-                <div className="ux-deliver-list">
+                <div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="200" data-aos-duration="900">
                   <span>02</span>
                   Wireframes and structural prototypes
                 </div>
-                <div className="ux-deliver-list">
+                <div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="300" data-aos-duration="900">
                   <span>03</span>
                   Design systems (tokens, components, patterns)
                 </div>
-                <div className="ux-deliver-list">
+                <div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="400" data-aos-duration="900">
                   <span>04</span>
                   Development-ready UI
                 </div>
-                <div className="ux-deliver-list">
+                <div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="500" data-aos-duration="900">
                   <span>05</span>
                   Headless or CMS implementation
                 </div>
-                <div className="ux-deliver-list">
+                <div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="600" data-aos-duration="900">
                   <span>06</span>
                   Performance optimization
                 </div>
-                <div className="ux-deliver-list">
+                <div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="700" data-aos-duration="900">
                   <span>07</span>
                   Technical documentation
                 </div>
               </div>
               {/* Right Snapshot */}
-              <div className="col-lg-5">
+              <div className="col-lg-5" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
                 <div className="ux-snapshot-box">
                   <small>CASE SNAPSHOT</small>
                   <hr />
@@ -188,50 +190,50 @@ export default function Digital() {
         <section className="connect-section">
           <div className="container">
             {/* HEADING */}
-            <h2>How We Work</h2>
+            <h2 data-aos="fade-up" data-aos-duration="1000">How We Work</h2>
-            <p className="subtitle">
+            <p className="subtitle" data-aos="fade-up" data-aos-delay="150" data-aos-duration="1000">
               We design and build high-performance digital platforms structured for
               conversion, scale, and integration.
             </p>
             {/* FLOW */}
             <div className="connect-flow">
-              <div className="flow-item">
+              <div className="flow-item" data-aos="zoom-in" data-aos-delay="100" data-aos-duration="900">
                 <div className="icon">
                   <img src="assets/images/Brand1.png" alt="" />
                 </div>
                 <span>Discovery</span>
               </div>
-              <div className="arrow">
+              <div className="arrow" data-aos="fade-right" data-aos-delay="200" data-aos-duration="900">
                 <img src="assets/images/Everything.svg" alt="" />
               </div>
-              <div className="flow-item">
+              <div className="flow-item" data-aos="zoom-in" data-aos-delay="300" data-aos-duration="900">
                 <div className="icon">
                   <img src="assets/images/Platform.svg" alt="" />
                 </div>
                 <span>Architecture</span>
               </div>
-              <div className="arrow">
+              <div className="arrow" data-aos="fade-right" data-aos-delay="400" data-aos-duration="900">
                 <img src="assets/images/Everything.svg" alt="" />
               </div>
-              <div className="flow-item">
+              <div className="flow-item" data-aos="zoom-in" data-aos-delay="500" data-aos-duration="900">
                 <div className="icon">
                   <img src="assets/images/Campaign1.svg" alt="" />
                 </div>
                 <span>Design</span>
               </div>
-              <div className="arrow">
+              <div className="arrow" data-aos="fade-right" data-aos-delay="600" data-aos-duration="900">
                 <img src="assets/images/Everything.svg" alt="" />
               </div>
-              <div className="flow-item">
+              <div className="flow-item" data-aos="zoom-in" data-aos-delay="700" data-aos-duration="900">
                 <div className="icon">
                   <img src="assets/images/content1.svg" alt="" />
                 </div>
                 <span>Build</span>
               </div>
-              <div className="arrow">
+              <div className="arrow" data-aos="fade-right" data-aos-delay="800" data-aos-duration="900">
                 <img src="assets/images/Everything.svg" alt="" />
               </div>
-              <div className="flow-item">
+              <div className="flow-item" data-aos="zoom-in" data-aos-delay="900" data-aos-duration="900">
                 <div className="icon">
                   <img src="assets/images/Automation.png" alt="" />
                 </div>
@@ -239,7 +241,7 @@ export default function Digital() {
               </div>
             </div>
             {/* BOTTOM TEXT */}
-            <p className="bottom-text">
+            <p className="bottom-text" data-aos="fade-up" data-aos-duration="1000">
               No rushed mockups. No disconnected freelancers. Everything is structured
               from day one.
             </p>
@@ -248,18 +250,18 @@ export default function Digital() {
         {/* TOP CTA */}
         <div className="ux-footer-hero">
           <div className="container">
-            <div className="ux-footer-hero-content text-center">
+            <div className="ux-footer-hero-content text-center" data-aos="zoom-in" data-aos-duration="1000">
               <p className="ux-section-label">AAideA</p>
               <h2 className="ux-footer-title">
                 If the idea is strong, we'll scale it.
               </h2>
               <div className="ux-hero-actions">
-                <a href="#" className="btn ux-btn-primary">
+                <Link href="/start_project" className="btn ux-btn-primary">
                   Start a Project{" "}
                   <span className="ux-btn-icon">
                     <img src="assets/images/arrowbuttonwhite.svg" alt="" />
                   </span>
-                </a>
+                </Link>
               </div>
             </div>
           </div>

app/faq/page.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import { useState } from "react";
+import Link from "next/link";
+
+const faqData = [
+  {
+    question: "How do projects start?",
+    answer: (
+      <>
+        Begin with our{" "}
+        <Link href="/start_project" className="ux-link">
+          project intake form
+        </Link>
+        . We respond within one business day with next steps.
+      </>
+    ),
+  },
+  {
+    question: "What does pricing look like?",
+    answer:
+      "Engagements are scoped per project. Typical builds start in the $25K range.",
+  },
+  {
+    question: "Do you work with international clients?",
+    answer:
+      "Yes. We operate across US, EU, and APAC time zones.",
+  },
+  {
+    question: "Can I see your process?",
+    answer: (
+      <>
+        Check our{" "}
+        <Link href="/process" className="ux-link">
+          Absorb → Amplify → Activate
+        </Link>{" "}
+        workflow.
+      </>
+    ),
+  },
+];
+
+export default function FAQ() {
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+
+  const toggle = (index: number) => {
+    setActiveIndex(activeIndex === index ? null : index);
+  };
+
+  return (
+    <>
+      {/* HERO */}
+      <section className="ux-project-hero">
+        <div className="container text-center">
+          <h1 className="ux-project-title" data-aos="fade-up" data-aos-duration="1000">Frequently Asked Questions</h1>
+          <p className="ux-project-subtitle" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
+            Everything you need to know before working with us.
+          </p>
+        </div>
+      </section>
+
+      {/* ACCORDION */}
+      <section className="ux-about-section">
+        <div className="container">
+          <div className="faq-wrapper">
+
+            {faqData.map((item, index) => (
+              <div
+                key={index}
+                className={`faq-item ${activeIndex === index ? "active" : ""}`}
+                data-aos="fade-up"
+                data-aos-delay={100 + index * 120}
+                data-aos-duration="900"
+              >
+                <button
+                  className="faq-question"
+                  onClick={() => toggle(index)}
+                >
+                  <span>{item.question}</span>
+                  <span className="faq-icon">
+                    {activeIndex === index ? "−" : "+"}
+                  </span>
+                </button>
+
+                <div
+                  className="faq-answer"
+                  style={{
+                    maxHeight: activeIndex === index ? "200px" : "0px",
+                  }}
+                >
+                  <p>{item.answer}</p>
+                </div>
+              </div>
+            ))}
+
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}

app/hvac/page.tsx

@@ -1,3 +1,5 @@
+import Link from "next/link";
+
 export default function Hvac() {
     return (
         <>
@@ -5,12 +7,12 @@ export default function Hvac() {
           <div className="container">
             {/* center content */}
             <div className="ux-project-content text-center">
-              <h1 className="ux-project-title">HVAC</h1>
+              <h1 className="ux-project-title" data-aos="fade-up" data-aos-duration="1000">HVAC</h1>
-              <p className="ux-project-subtitle">
+              <p className="ux-project-subtitle" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
                 Legacy reputation. Fragmented digital presence.
               </p>
             </div>
-            <div className="breacampoffline">
+            <div className="breacampoffline" data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000">
               <p style={{ textAlign: "right" }}>
                 HVAC operated with strong offline credibility but weak digital
                 structure. Leads were inconsistent. Messaging lacked positioning
@@ -31,42 +33,42 @@ export default function Hvac() {
             {/* TOP BOX */}
             <div className="ux-result-box">
               {/* LEFT */}
-              <div className="ux-result-left">
+              <div className="ux-result-left" data-aos="fade-right" data-aos-duration="1000">
                 <p className="ux-step-label">Amplify</p>
                 <h3 className="ux-result-heading">WE BUILT:</h3>
                 <div className="ux-build-grid">
-                  <div className="ux-mini-card active">
+                  <div className="ux-mini-card active" data-aos="fade-up" data-aos-delay="100" data-aos-duration="900">
                     <span>01</span>
                     <p>Clear positioning architecture</p>
                   </div>
-                  <div className="ux-mini-card active">
+                  <div className="ux-mini-card active" data-aos="fade-up" data-aos-delay="200" data-aos-duration="900">
                     <span>02</span>
                     <p>Structured service segmentation</p>
                   </div>
-                  <div className="ux-mini-card active">
+                  <div className="ux-mini-card active" data-aos="fade-up" data-aos-delay="300" data-aos-duration="900">
                     <span>03</span>
                     <p>Conversion-led landing framework</p>
                   </div>
-                  <div className="ux-mini-card active">
+                  <div className="ux-mini-card active" data-aos="fade-up" data-aos-delay="400" data-aos-duration="900">
                     <span>04</span>
                     <p>Content packaging system</p>
                   </div>
                 </div>
               </div>
               {/* RIGHT */}
-              <div className="ux-result-right">
+              <div className="ux-result-right" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
                 <p className="ux-step-label">Amplify</p>
                 <h3 className="ux-result-heading">AI WAS USED TO:</h3>
                 <div className="ux-ai-grid">
-                  <div className="ux-mini-card">
+                  <div className="ux-mini-card" data-aos="fade-up" data-aos-delay="200" data-aos-duration="900">
                     <span>01</span>
                     <p>Rapidly test messaging variations</p>
                   </div>
-                  <div className="ux-mini-card">
+                  <div className="ux-mini-card" data-aos="fade-up" data-aos-delay="300" data-aos-duration="900">
                     <span>02</span>
                     <p>Produce scaled content formats</p>
                   </div>
-                  <div className="ux-mini-card">
+                  <div className="ux-mini-card" data-aos="fade-up" data-aos-delay="400" data-aos-duration="900">
                     <span>03</span>
                     <p>Optimize landing copy iterations</p>
                   </div>
@@ -76,7 +78,7 @@ export default function Hvac() {
             {/* BOTTOM BOX */}
             <div className="ux-deliver-box">
               {/* LEFT */}
-              <div className="ux-deliver-left">
+              <div className="ux-deliver-left" data-aos="fade-right" data-aos-duration="1000">
                 <p className="ux-step-label">Activate</p>
                 <h3 className="ux-result-heading">DELIVERED:</h3>
                 <ul className="ux-deliver-list">
@@ -88,19 +90,19 @@ export default function Hvac() {
                 </ul>
               </div>
               {/* CENTER */}
-              <div className="ux-deliver-center">
+              <div className="ux-deliver-center" data-aos="zoom-in" data-aos-delay="200" data-aos-duration="1000">
                 <img src="assets/images/Delivered.png" alt="" />
               </div>
               {/* RIGHT */}
-              <div className="ux-deliver-right">
+              <div className="ux-deliver-right" data-aos="fade-left" data-aos-delay="300" data-aos-duration="1000">
                 <h3 className="ux-result-heading">RESULT:</h3>
                 <p>
                   Clear digital authority. Improved lead capture flow. Scalable
                   marketing infrastructure.
                 </p>
-                <a href="#" className="ux-result-btn">
+                <Link href="/start_project" className="ux-result-btn">
                   Build your digital engine
-                </a>
+                </Link>
               </div>
             </div>
           </div>
@@ -108,18 +110,18 @@ export default function Hvac() {
         {/* TOP CTA */}
         <div className="ux-footer-hero">
           <div className="container">
-            <div className="ux-footer-hero-content text-center">
+            <div className="ux-footer-hero-content text-center" data-aos="zoom-in" data-aos-duration="1000">
               <p className="ux-section-label">AAideA</p>
               <h2 className="ux-footer-title">
                 If the idea is strong, we'll scale it.
               </h2>
               <div className="ux-hero-actions">
-                <a href="#" className="btn ux-btn-primary">
+                <Link href="/start_project" className="btn ux-btn-primary">
                   Start a Project{" "}
                   <span className="ux-btn-icon">
                     <img src="assets/images/arrowbuttonwhite.svg" alt="" />
                   </span>
-                </a>
+                </Link>
               </div>
             </div>
           </div>

app/layout.tsx

@@ -4,6 +4,7 @@ import "aos/dist/aos.css"
 import { Toaster } from "react-hot-toast";
 import Header from "./components/Header"
 import Footer from "./components//Footer"
+import AosInit from "./components/AosInit"
 import Script from "next/script"
 export default function RootLayout({
   children,
@@ -21,35 +22,25 @@ export default function RootLayout({
 
       <body>
       <Toaster position="top-right" />
+        <AosInit />
         <Header />
 
         {children}
 
 
-        <Footer />  
+        <Footer />
-   {/* ✅ 1. Bootstrap */}
+        <Script
-<Script
+          src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
-  src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
+          strategy="afterInteractive"
-  strategy="afterInteractive"
+        />
-/>
+        <Script
-
+          src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"
-{/* ✅ 2. Swiper JS (MISSING THA) */}
+          strategy="afterInteractive"
-<Script
+        />
-  src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"
+        <Script
-  strategy="afterInteractive"
+          src="/assets/js/main.js"
-/>
+          strategy="afterInteractive"
-
+        />
-{/* ✅ 3. AOS JS */}
-<Script
-  src="https://unpkg.com/aos@2.3.4/dist/aos.js"
-  strategy="afterInteractive"
-/>
-
-{/* ✅ 4. TERA main.js (LAST) */}
-<Script
-  src="/assets/js/main.js"
-  strategy="afterInteractive"
-/>
       </body>
     </html>
   )

app/linkedin_uppro/page.tsx

@@ -1,3 +1,5 @@
+import Link from "next/link";
+
 export default function linkedin_uppro() {
   return (
 <>
@@ -5,10 +7,10 @@ export default function linkedin_uppro() {
     <div className="container">
       {/* center content */}
       <div className="ux-project-content text-center">
-        <h1 className="ux-project-title">LynkedUp Pro</h1>
+        <h1 className="ux-project-title" data-aos="fade-up" data-aos-duration="1000">LynkedUp Pro</h1>
-        <p className="ux-project-subtitle">Trust vs. Scale.</p>
+        <p className="ux-project-subtitle" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">Trust vs. Scale.</p>
       </div>
-      <div className="breacampoffline">
+      <div className="breacampoffline" data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000">
         <p style={{ textAlign: "right" }}>
           The market lacked a structured bridge between vetted talent and field
           execution. Trust and scale needed to coexist.
@@ -29,42 +31,42 @@ export default function linkedin_uppro() {
       {/* TOP BOX */}
       <div className="ux-result-box">
         {/* LEFT */}
-        <div className="ux-result-left">
+        <div className="ux-result-left" data-aos="fade-right" data-aos-duration="1000">
           <p className="ux-step-label">Amplify</p>
           <h3 className="ux-result-heading">WE BUILT:</h3>
           <div className="ux-build-grid">
-            <div className="ux-mini-card active">
+            <div className="ux-mini-card active" data-aos="fade-up" data-aos-delay="100" data-aos-duration="900">
               <span>01</span>
               <p>Product UX architecture</p>
             </div>
-            <div className="ux-mini-card active">
+            <div className="ux-mini-card active" data-aos="fade-up" data-aos-delay="200" data-aos-duration="900">
               <span>02</span>
               <p>Modular UI system</p>
             </div>
-            <div className="ux-mini-card active">
+            <div className="ux-mini-card active" data-aos="fade-up" data-aos-delay="300" data-aos-duration="900">
               <span>03</span>
               <p>Marketing website</p>
             </div>
-            <div className="ux-mini-card active">
+            <div className="ux-mini-card active" data-aos="fade-up" data-aos-delay="400" data-aos-duration="900">
               <span>04</span>
               <p>Onboarding flows</p>
             </div>
           </div>
         </div>
         {/* RIGHT */}
-        <div className="ux-result-right">
+        <div className="ux-result-right" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
           <p className="ux-step-label">Amplify</p>
           <h3 className="ux-result-heading">AI WAS USED TO:</h3>
           <div className="ux-ai-grid">
-            <div className="ux-mini-card">
+            <div className="ux-mini-card" data-aos="fade-up" data-aos-delay="200" data-aos-duration="900">
               <span>01</span>
               <p>UI variation testing</p>
             </div>
-            <div className="ux-mini-card">
+            <div className="ux-mini-card" data-aos="fade-up" data-aos-delay="300" data-aos-duration="900">
               <span>02</span>
               <p>Content system expansion</p>
             </div>
-            <div className="ux-mini-card">
+            <div className="ux-mini-card" data-aos="fade-up" data-aos-delay="400" data-aos-duration="900">
               <span>03</span>
               <p>Workflow acceleration</p>
             </div>
@@ -74,7 +76,7 @@ export default function linkedin_uppro() {
       {/* BOTTOM BOX */}
       <div className="ux-deliver-box">
         {/* LEFT */}
-        <div className="ux-deliver-left">
+        <div className="ux-deliver-left" data-aos="fade-right" data-aos-duration="1000">
           <p className="ux-step-label">Activate</p>
           <h3 className="ux-result-heading">DELIVERED:</h3>
           <ul className="ux-deliver-list">
@@ -85,19 +87,19 @@ export default function linkedin_uppro() {
           </ul>
         </div>
         {/* CENTER */}
-        <div className="ux-deliver-center">
+        <div className="ux-deliver-center" data-aos="zoom-in" data-aos-delay="200" data-aos-duration="1000">
           <img src="assets/images/Delivered.png" alt="" />
         </div>
         {/* RIGHT */}
-        <div className="ux-deliver-right">
+        <div className="ux-deliver-right" data-aos="fade-left" data-aos-delay="300" data-aos-duration="1000">
           <h3 className="ux-result-heading">RESULT: </h3>
           <p>
             Professional-grade platform. Structured user journey. Scalable
             product foundation.
           </p>
-          <a href="#" className="ux-result-btn">
+          <Link href="/start_project" className="ux-result-btn">
             Design your platform
-          </a>
+          </Link>
         </div>
       </div>
     </div>
@@ -105,18 +107,18 @@ export default function linkedin_uppro() {
   {/* TOP CTA */}
   <div className="ux-footer-hero">
     <div className="container">
-      <div className="ux-footer-hero-content text-center">
+      <div className="ux-footer-hero-content text-center" data-aos="zoom-in" data-aos-duration="1000">
         <p className="ux-section-label">AAideA</p>
         <h2 className="ux-footer-title">
           If the idea is strong, we'll scale it.
         </h2>
         <div className="ux-hero-actions">
-          <a href="#" className="btn ux-btn-primary">
+          <Link href="/start_project" className="btn ux-btn-primary">
             Start a Project{" "}
             <span className="ux-btn-icon">
               <img src="assets/images/arrowbuttonwhite.svg" alt="" />
             </span>
-          </a>
+          </Link>
         </div>
       </div>
     </div>

app/page.tsx

@@ -11,39 +11,39 @@ export default function HomePage() {
       <div className="container">
         <div className="row justify-content-center text-center">
           <div className="col-lg-8">
-            <h1 className="ux-hero-title">
+            <h1 className="ux-hero-title" data-aos="fade-up" data-aos-duration="1000">
               One Strong Idea.
               <br />
               Executed Across Every <br />{" "}
               <span className="ux-text-highlight">Digital</span> Surface.
             </h1>
-            <p className="ux-hero-subtitle">
+            <p className="ux-hero-subtitle" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
               Designing digital homes, brand systems, and scalable content for
               modern operators.
             </p>
-            <div className="ux-hero-actions">
+            <div className="ux-hero-actions" data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000">
-              <a href="#" className="btn ux-btn-primary">
+              <Link href="/start_project" className="btn ux-btn-primary">
                 Start a Project{" "}
                 <span className="ux-btn-icon">
                   <img src="assets/images/arrowbuttonwhite.svg" alt="" />
                 </span>
-              </a>
+              </Link>
-              <a href="#" className="btn ux-btn-secondary">
+              <Link href="/work" className="btn ux-btn-secondary">
                 View Case Studies
-              </a>
+              </Link>
             </div>
           </div>
         </div>
         {/* BOTTOM CARDS */}
         <div className="row align-items-center mt-5 g-4 ux-bottom-wrapper">
           {/* Left Image */}
-          <div className="col-lg-3">
+          <div className="col-lg-3" data-aos="fade-right" data-aos-delay="100" data-aos-duration="1000">
             <div className="ux-img-card">
               <img src="assets/images/Onestrong.png" className="img-fluid" />
             </div>
           </div>
           {/* 400+ */}
-          <div className="col-lg-2">
+          <div className="col-lg-2" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
             <div className="ux-stat-box ux-light">
               <h2 className="ux-counter" data-count={400}>
                 0
@@ -56,7 +56,7 @@ export default function HomePage() {
             </div>
           </div>
           {/* Trusted */}
-          <div className="col-lg-2">
+          <div className="col-lg-2" data-aos="fade-up" data-aos-delay="300" data-aos-duration="1000">
             <div className="ux-stat-box ux-dark">
               <h5>
                 Trusted &amp;
@@ -71,7 +71,7 @@ export default function HomePage() {
             </div>
           </div>
           {/* 20+ */}
-          <div className="col-lg-2">
+          <div className="col-lg-2" data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000">
             <div className="ux-stat-box ux-dark">
               <h2>20+</h2>
               <p>
@@ -82,7 +82,7 @@ export default function HomePage() {
             </div>
           </div>
           {/* Right Image */}
-          <div className="col-lg-3">
+          <div className="col-lg-3" data-aos="fade-left" data-aos-delay="500" data-aos-duration="1000">
             <div className="ux-img-card">
               <img src="assets/images/Onestrong1.png" className="img-fluid" />
             </div>
@@ -94,10 +94,10 @@ export default function HomePage() {
       <div className="container">
         {/* Top Heading */}
         <div className="row mb-5">
-          <div className="col-lg-3">
+          <div className="col-lg-3" data-aos="fade-right" data-aos-duration="1000">
             <p className="ux-section-label">About AaideA</p>
           </div>
-          <div className="col-lg-9">
+          <div className="col-lg-9" data-aos="fade-left" data-aos-delay="150" data-aos-duration="1000">
             <h2 className="ux-main-heading">
               We build digital homes, brand systems, and scalable content engines
               designed for clarity and growth. Everything is structured to help{" "}
@@ -112,33 +112,33 @@ export default function HomePage() {
         {/* Content Row */}
         <div className="row align-items-end mb-5">
           {/* Left Counter */}
-          <div className="col-lg-3 text-center text-lg-start">
+          <div className="col-lg-3 text-center text-lg-start" data-aos="fade-up" data-aos-duration="1000">
             <h2 className="ux-big-counter">10+</h2>
             <p className="ux-small-text">Years Of Creative Excellence</p>
           </div>
           {/* Image */}
-          <div className="col-lg-3 text-center">
+          <div className="col-lg-3 text-center" data-aos="zoom-in" data-aos-delay="200" data-aos-duration="1000">
             <img
               src="assets/images/digitalabout.png"
               className="img-fluid ux-about-img"
             />
           </div>
           {/* Content */}
-          <div className="col-lg-6">
+          <div className="col-lg-6" data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000">
             <h4 className="ux-card-title">We build digital homes</h4>
             <p className="ux-card-text">
               We build digital homes, brand systems, and scalable content engines
               designed for clarity and growth.
             </p>
-            <a href="#" className="btn ux-btn-primary">
+            <Link href="/start_project" className="btn ux-btn-primary">
               Start a Project{" "}
               <span className="ux-btn-icon">
                 <img src="assets/images/arrowbuttonwhite.svg" alt="" />
               </span>
-            </a>
+            </Link>
           </div>
         </div>
-        <div className="partners-wrapper">
+        <div className="partners-wrapper" data-aos="fade-up" data-aos-duration="1000">
           <div className="partner-item">
             <img src="assets/images/lutron.png" alt="" />
           </div>
@@ -164,14 +164,14 @@ export default function HomePage() {
       <div className="container">
         {/* Header */}
         <div className="d-flex justify-content-between align-items-center mb-4">
-          <div className="displayflexhead">
+          <div className="displayflexhead" data-aos="fade-right" data-aos-duration="1000">
             <p className="ux-section-label">Featured Work</p>
             <h2 className="ux-main-heading">
               We build digital homes, brand systems, and scalable
             </h2>
           </div>
           {/* Arrows */}
-          <div className="ux-swiper-nav">
+          <div className="ux-swiper-nav" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
             <div className="ux-arrow work-prev">
               <img src="assets/images/arrowpre.png" alt="" />
             </div>
@@ -181,7 +181,7 @@ export default function HomePage() {
           </div>
         </div>
         {/* Slider */}
-        <div className="swiper ux-work-swiper">
+        <div className="swiper ux-work-swiper" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
           <div className="swiper-wrapper">
             {/* CARD */}
             <div className="swiper-slide">
@@ -195,9 +195,9 @@ export default function HomePage() {
                   Turning a legacy service business into a structured digital lead
                   engine.
                 </p>
-                <a href="#" className="ux-link">
+                <Link href="/work" className="ux-link">
                   Learn Case <img src="assets/images/arrowlearn.svg" alt="" />
-                </a>
+                </Link>
               </div>
             </div>
             <div className="swiper-slide">
@@ -208,9 +208,9 @@ export default function HomePage() {
                   Building a brand system for immersive learning in a fragmented
                   market.
                 </p>
-                <a href="#" className="ux-link">
+                <Link href="/work" className="ux-link">
                   Learn Case <img src="assets/images/arrowlearn.svg" alt="" />
-                </a>
+                </Link>
               </div>
             </div>
             <div className="swiper-slide">
@@ -221,9 +221,9 @@ export default function HomePage() {
                   Designing a SaaS platform that bridges vetted talent and
                   execution.
                 </p>
-                <a href="#" className="ux-link">
+                <Link href="/work" className="ux-link">
                   Learn Case <img src="assets/images/arrowlearn.svg" alt="" />
-                </a>
+                </Link>
               </div>
             </div>
             <div className="swiper-slide">
@@ -234,9 +234,9 @@ export default function HomePage() {
                   Turning a legacy service business into a structured digital lead
                   engine.
                 </p>
-                <a href="#" className="ux-link">
+                <Link href="/work" className="ux-link">
                   Learn Case <img src="assets/images/arrowlearn.svg" alt="" />
-                </a>
+                </Link>
               </div>
             </div>
             <div className="swiper-slide">
@@ -250,9 +250,9 @@ export default function HomePage() {
                   Turning a legacy service business into a structured digital lead
                   engine.
                 </p>
-                <a href="#" className="ux-link">
+                <Link href="/work" className="ux-link">
                   Learn Case <img src="assets/images/arrowlearn.svg" alt="" />
-                </a>
+                </Link>
               </div>
             </div>
             <div className="swiper-slide">
@@ -263,9 +263,9 @@ export default function HomePage() {
                   Building a brand system for immersive learning in a fragmented
                   market.
                 </p>
-                <a href="#" className="ux-link">
+                <Link href="/work" className="ux-link">
                   Learn Case <img src="assets/images/arrowlearn.svg" alt="" />
-                </a>
+                </Link>
               </div>
             </div>
             <div className="swiper-slide">
@@ -276,9 +276,9 @@ export default function HomePage() {
                   Designing a SaaS platform that bridges vetted talent and
                   execution.
                 </p>
-                <a href="#" className="ux-link">
+                <Link href="/work" className="ux-link">
                   Learn Case <img src="assets/images/arrowlearn.svg" alt="" />
-                </a>
+                </Link>
               </div>
             </div>
             <div className="swiper-slide">
@@ -289,9 +289,9 @@ export default function HomePage() {
                   Turning a legacy service business into a structured digital lead
                   engine.
                 </p>
-                <a href="#" className="ux-link">
+                <Link href="/work" className="ux-link">
                   Learn Case <img src="assets/images/arrowlearn.svg" alt="" />
-                </a>
+                </Link>
               </div>
             </div>
           </div>
@@ -301,7 +301,7 @@ export default function HomePage() {
     <section className="ux-why-section">
       <div className="container">
         {/* Heading */}
-        <div className="displayflexhead" style={{ width: "90%" }}>
+        <div className="displayflexhead" style={{ width: "90%" }} data-aos="fade-up" data-aos-duration="1000">
           <p className="ux-section-label">Why AAideA</p>
           <h2 className="ux-main-heading main-headingexit">
             AAideA exists for decision-makers who value clarity over noise. We
@@ -311,7 +311,7 @@ export default function HomePage() {
         {/* Content */}
         <div className="row align-items-center existpadd">
           {/* Image */}
-          <div className="col-lg-4">
+          <div className="col-lg-4" data-aos="fade-right" data-aos-duration="1000">
             <div className="ux-why-img">
               <img src="assets/images/Why AAideA.png" className="img-fluid" />
             </div>
@@ -319,37 +319,37 @@ export default function HomePage() {
           {/* Cards */}
           <div className="col-lg-8">
             <div className="row g-4">
-              <div className="col-md-4">
+              <div className="col-md-4" data-aos="fade-up" data-aos-delay="100" data-aos-duration="900">
                 <div className="ux-why-card">
                   <span className="ux-number">01</span>
                   <h6>Systems over chaos</h6>
                 </div>
               </div>
-              <div className="col-md-4">
+              <div className="col-md-4" data-aos="fade-up" data-aos-delay="200" data-aos-duration="900">
                 <div className="ux-why-card">
                   <span className="ux-number">02</span>
                   <h6>Taste without ego</h6>
                 </div>
               </div>
-              <div className="col-md-4">
+              <div className="col-md-4" data-aos="fade-up" data-aos-delay="300" data-aos-duration="900">
                 <div className="ux-why-card">
                   <span className="ux-number">03</span>
                   <h6>AI as amplifier</h6>
                 </div>
               </div>
-              <div className="col-md-4">
+              <div className="col-md-4" data-aos="fade-up" data-aos-delay="400" data-aos-duration="900">
                 <div className="ux-why-card">
                   <span className="ux-number">04</span>
                   <h6>Built for operators</h6>
                 </div>
               </div>
-              <div className="col-md-4">
+              <div className="col-md-4" data-aos="fade-up" data-aos-delay="500" data-aos-duration="900">
                 <div className="ux-why-card">
                   <span className="ux-number">05</span>
                   <h6>Structured to scale</h6>
                 </div>
               </div>
-              <div className="col-md-4">
+              <div className="col-md-4" data-aos="fade-up" data-aos-delay="600" data-aos-duration="900">
                 <div className="ux-why-card">
                   <span className="ux-number">06</span>
                   <h6>Designed to endure</h6>
@@ -364,7 +364,7 @@ export default function HomePage() {
       <div className="container">
         {/* Header */}
         <div className="d-flex justify-content-between align-items-center">
-          <div className="displayflexhead">
+          <div className="displayflexhead" data-aos="fade-right" data-aos-duration="1000">
             <p className="ux-section-label" style={{ color: "white" }}>
               What we build.
             </p>
@@ -373,7 +373,7 @@ export default function HomePage() {
             </h2>
           </div>
           {/* Arrows */}
-          <div className="ux-swiper-nav">
+          <div className="ux-swiper-nav" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
             {/* Work section arrows — change to work-prev / work-next */}
             <div className="ux-arrow build-prev">
               <img src="assets/images/arrowpre.png" />
@@ -385,7 +385,7 @@ export default function HomePage() {
         </div>
       </div>
       {/* Slider */}
-      <div className="swiper ux-build-swiper">
+      <div className="swiper ux-build-swiper" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
         <div className="swiper-wrapper">
           {/* CARD */}
           <div className="swiper-slide">
@@ -509,23 +509,23 @@ export default function HomePage() {
       <div className="container">
         {/* Top Header */}
         <div className="d-flex justify-content-between align-items-center mb-5 flex-wrap">
-          <div className="displayflexhead">
+          <div className="displayflexhead" data-aos="fade-right" data-aos-duration="1000">
             <p className="ux-section-label">Structured execution.</p>
             <h2 className="ux-main-heading">
               Every project follows the same internal discipline.
             </h2>
           </div>
-          <a href="#" className="btn ux-btn-primary">
+          <Link href="/process" className="btn ux-btn-primary" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
             Explore our Process
             <span className="ux-btn-icon">
               <img src="assets/images/arrowbuttonwhite.svg" alt="" />
             </span>
-          </a>
+          </Link>
         </div>
         {/* Steps */}
         <div className="row g-4 align-items-stretch">
           {/* STEP 1 */}
-          <div className="col-lg-4 position-relative">
+          <div className="col-lg-4 position-relative" data-aos="fade-up" data-aos-delay="100" data-aos-duration="1000">
             <div className="ux-process-card">
               <span className="ux-step">STEP 01</span>
               <h4>Absorb</h4>
@@ -541,7 +541,7 @@ export default function HomePage() {
             </div>
           </div>
           {/* STEP 2 */}
-          <div className="col-lg-4 position-relative">
+          <div className="col-lg-4 position-relative" data-aos="fade-up" data-aos-delay="300" data-aos-duration="1000">
             <div className="ux-process-card">
               <span className="ux-step">STEP 02</span>
               <h4>Amplify</h4>
@@ -557,7 +557,7 @@ export default function HomePage() {
             </div>
           </div>
           {/* STEP 3 */}
-          <div className="col-lg-4">
+          <div className="col-lg-4" data-aos="fade-up" data-aos-delay="500" data-aos-duration="1000">
             <div className="ux-process-card">
               <span className="ux-step">STEP 03</span>
               <h4>Activate</h4>
@@ -574,18 +574,18 @@ export default function HomePage() {
     {/* TOP CTA */}
     <div className="ux-footer-hero">
       <div className="container">
-        <div className="ux-footer-hero-content text-center">
+        <div className="ux-footer-hero-content text-center" data-aos="zoom-in" data-aos-duration="1000">
           <p className="ux-section-label">AAideA</p>
           <h2 className="ux-footer-title">
             If the idea is strong, we'll scale it.
           </h2>
           <div className="ux-hero-actions">
-            <a href="#" className="btn ux-btn-primary">
+            <Link href="/start_project" className="btn ux-btn-primary">
               Start a Project{" "}
               <span className="ux-btn-icon">
                 <img src="assets/images/arrowbuttonwhite.svg" alt="" />
               </span>
-            </a>
+            </Link>
           </div>
         </div>
       </div>

app/privacy/page.tsx

@@ -0,0 +1,49 @@
+import Link from "next/link";
+
+export default function Privacy() {
+  return (
+    <>
+      <section className="ux-project-hero">
+        <div className="container">
+          <div className="ux-project-content text-center">
+            <h1 className="ux-project-title" data-aos="fade-up" data-aos-duration="1000">Privacy Policy.</h1>
+            <p className="ux-project-subtitle" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
+              How we collect, use, and protect your information.
+            </p>
+
+          </div>
+        </div>
+      </section>
+
+      <section className="ux-about-section">
+        <div className="container">
+          <div className="row">
+            <div className="col-lg-9 mx-auto">
+              <h2 className="ux-main-heading mb-4" data-aos="fade-up" data-aos-duration="900">Information We Collect</h2>
+              <p className="ux-card-text" data-aos="fade-up" data-aos-delay="100" data-aos-duration="900">
+                We collect information you provide directly through our project intake form,
+                including name, company, email, and project details.
+              </p>
+
+              <h4 className="ux-card-title mt-5" data-aos="fade-up" data-aos-duration="900">How We Use It</h4>
+              <p className="ux-card-text" data-aos="fade-up" data-aos-delay="100" data-aos-duration="900">
+                We use the information to respond to inquiries, scope projects, and improve
+                our services. We do not sell your data.
+              </p>
+
+              <h4 className="ux-card-title mt-5" data-aos="fade-up" data-aos-duration="900">Cookies</h4>
+              <p className="ux-card-text" data-aos="fade-up" data-aos-delay="100" data-aos-duration="900">
+                We use minimal first-party cookies for site analytics and session continuity.
+              </p>
+
+              <h4 className="ux-card-title mt-5" data-aos="fade-up" data-aos-duration="900">Contact</h4>
+              <p className="ux-card-text" data-aos="fade-up" data-aos-delay="100" data-aos-duration="900">
+                For privacy questions, please <Link href="/contact" className="ux-link">contact us</Link>.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}

app/process/page.tsx

@@ -1,3 +1,5 @@
+import Link from "next/link";
+
 export default function Process() {
   return (
   <>
@@ -6,8 +8,8 @@ export default function Process() {
     <div className="container">
       {/* center content */}
       <div className="ux-project-content text-center">
-        <h1 className="ux-project-title">Structured Execution.</h1>
+        <h1 className="ux-project-title" data-aos="fade-up" data-aos-duration="1000">Structured Execution.</h1>
-        <p className="ux-project-subtitle">
+        <p className="ux-project-subtitle" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
           Every project follows a disciplined internal model.{" "}
         </p>
       </div>
@@ -18,7 +20,7 @@ export default function Process() {
 =========================== */}
   <section className="ux-process-step-section">
     <div className="container">
-      <div className="ux-process-step-box">
+      <div className="ux-process-step-box" data-aos="fade-up" data-aos-duration="1000">
         {/* TOP */}
         <span className="ux-process-number">01</span>
         <h2 className="ux-process-title">Absorb</h2>
@@ -28,12 +30,12 @@ export default function Process() {
         {/* CONTENT */}
         <div className="ux-process-grid">
           {/* IMAGE */}
-          <div className="ux-process-image">
+          <div className="ux-process-image" data-aos="fade-right" data-aos-delay="200" data-aos-duration="1000">
             <img src="assets/images/Absorb.png" alt="" />
           </div>
           {/* RIGHT TEXT */}
           <div className="ux-process-content">
-            <div className="ux-process-item">
+            <div className="ux-process-item" data-aos="fade-left" data-aos-delay="200" data-aos-duration="900">
               <h4>Research &amp; Discovery</h4>
               <p>
                 We dissect the problem before designing the solution. Market
@@ -41,7 +43,7 @@ export default function Process() {
                 constraints all feed into our strategic foundation.
               </p>
             </div>
-            <div className="ux-process-item">
+            <div className="ux-process-item" data-aos="fade-left" data-aos-delay="300" data-aos-duration="900">
               <h4>Positioning</h4>
               <p>
                 Clarity beats cleverness. We define the core idea that
@@ -49,7 +51,7 @@ export default function Process() {
                 and translation across every surface.
               </p>
             </div>
-            <div className="ux-process-item">
+            <div className="ux-process-item" data-aos="fade-left" data-aos-delay="400" data-aos-duration="900">
               <h4>Strategic Framework</h4>
               <p>
                 Commercial logic. Content architecture. Messaging hierarchy. We
@@ -59,7 +61,7 @@ export default function Process() {
           </div>
         </div>
       </div>
-      <div className="ux-process-step-box">
+      <div className="ux-process-step-box" data-aos="fade-up" data-aos-duration="1000">
         {/* TOP */}
         <span className="ux-process-number">02</span>
         <h2 className="ux-process-title">Amplify</h2>
@@ -69,12 +71,12 @@ export default function Process() {
         {/* CONTENT */}
         <div className="ux-process-grid">
           {/* IMAGE */}
-          <div className="ux-process-image">
+          <div className="ux-process-image" data-aos="fade-right" data-aos-delay="200" data-aos-duration="1000">
             <img src="assets/images/Amplify.png" alt="" />
           </div>
           {/* RIGHT TEXT */}
           <div className="ux-process-content">
-            <div className="ux-process-item">
+            <div className="ux-process-item" data-aos="fade-left" data-aos-delay="200" data-aos-duration="900">
               <h4>Design Systems</h4>
               <p>
                 We don't create isolated deliverables. We build scalable visual
@@ -82,14 +84,14 @@ export default function Process() {
                 consistency across platforms without creative compromise.{" "}
               </p>
             </div>
-            <div className="ux-process-item">
+            <div className="ux-process-item" data-aos="fade-left" data-aos-delay="300" data-aos-duration="900">
               <h4>Digital Architecture</h4>
               <p>
                 Information structure. User flows. Interface logic. Every screen
                 is intentional. Every interaction is justified.
               </p>
             </div>
-            <div className="ux-process-item">
+            <div className="ux-process-item" data-aos="fade-left" data-aos-delay="400" data-aos-duration="900">
               <h4>AI-Assisted Iteration</h4>
               <p>
                 We leverage AI to accelerate production without sacrificing
@@ -100,7 +102,7 @@ export default function Process() {
           </div>
         </div>
       </div>
-      <div className="ux-process-step-box">
+      <div className="ux-process-step-box" data-aos="fade-up" data-aos-duration="1000">
         {/* TOP */}
         <span className="ux-process-number">03</span>
         <h2 className="ux-process-title">Activate</h2>
@@ -108,12 +110,12 @@ export default function Process() {
         {/* CONTENT */}
         <div className="ux-process-grid">
           {/* IMAGE */}
-          <div className="ux-process-image">
+          <div className="ux-process-image" data-aos="fade-right" data-aos-delay="200" data-aos-duration="1000">
             <img src="assets/images/Activate.png" alt="" />
           </div>
           {/* RIGHT TEXT */}
           <div className="ux-process-content">
-            <div className="ux-process-item">
+            <div className="ux-process-item" data-aos="fade-left" data-aos-delay="200" data-aos-duration="900">
               <h4>Multi-Format Execution</h4>
               <p>
                 Website. Campaign assets. Motion. Content. Social. The core idea
@@ -121,14 +123,14 @@ export default function Process() {
                 integrity.{" "}
               </p>
             </div>
-            <div className="ux-process-item">
+            <div className="ux-process-item" data-aos="fade-left" data-aos-delay="300" data-aos-duration="900">
               <h4>Distribution Strategy</h4>
               <p>
                 Launch planning. Platform optimization. Performance tracking. We
                 ensure the work reaches the right audience with maximum impact.
               </p>
             </div>
-            <div className="ux-process-item">
+            <div className="ux-process-item" data-aos="fade-left" data-aos-delay="400" data-aos-duration="900">
               <h4>Ongoing Refinement</h4>
               <p>
                 Digital isn't static. We monitor, iterate, and optimize based on
@@ -143,18 +145,18 @@ export default function Process() {
   {/* TOP CTA */}
   <div className="ux-footer-hero">
     <div className="container">
-      <div className="ux-footer-hero-content text-center">
+      <div className="ux-footer-hero-content text-center" data-aos="zoom-in" data-aos-duration="1000">
         <p className="ux-section-label">AAideA</p>
         <h2 className="ux-footer-title">
           If the idea is strong, we'll scale it.
         </h2>
         <div className="ux-hero-actions">
-          <a href="#" className="btn ux-btn-primary">
+          <Link href="/start_project" className="btn ux-btn-primary">
             Start a Project{" "}
             <span className="ux-btn-icon">
               <img src="assets/images/arrowbuttonwhite.svg" alt="" />
             </span>
-          </a>
+          </Link>
         </div>
       </div>
     </div>

app/services/page.tsx

@@ -6,33 +6,33 @@ export default function Services() {
     <div className="container">
       {/* center content */}
       <div className="ux-project-content text-center">
-        <h1 className="ux-project-title">
+        <h1 className="ux-project-title" data-aos="fade-up" data-aos-duration="1000">
           We Don't Offer Services. <br />
           We Build Systems.
         </h1>
-        <p className="ux-project-subtitle">
+        <p className="ux-project-subtitle" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
           Each vertical is designed to scale brands, revenue, and operations —{" "}
           <br />
           not just deliver assets.
         </p>
       </div>
-      <div className="ux-hero-actions">
+      <div className="ux-hero-actions" data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000">
-        <a href="#" className="btn ux-btn-primary">
+        <Link href="/digital_platform" className="btn ux-btn-primary">
           View Digital Platforms
           <span className="ux-btn-icon">
             <img src="assets/images/arrowbuttonwhite.svg" alt="" />
           </span>
-        </a>
+        </Link>
-        <a href="#" className="btn ux-btn-secondary">
+        <Link href="/brand-architecture" className="btn ux-btn-secondary">
           Explore Brand Systems →
-        </a>
+        </Link>
       </div>
     </div>
   </section>
   <section className="systems-section">
     <div className="container systems-wrapper">
       {/* LEFT (STICKY) */}
-      <div className="systems-left">
+      <div className="systems-left" data-aos="fade-right" data-aos-duration="1000">
         <p className="small-label">Systems We Build</p>
         <h2>Engineered for measurable growth.</h2>
         <p className="desc">
@@ -43,7 +43,7 @@ export default function Services() {
       {/* RIGHT (CARDS) */}
       <div className="systems-right">
         {/* CARD 1 */}
-        <div className="system-card light">
+        <div className="system-card light" data-aos="fade-up" data-aos-duration="1000">
           <img src="assets/images/Digital.svg" alt="" />
           <h4>Digital Platforms &amp; Experience Architecture</h4>
           <p>
@@ -62,7 +62,7 @@ export default function Services() {
 </Link>
         </div>
         {/* CARD 2 (DARK) */}
-        <div className="system-card dark">
+        <div className="system-card dark" data-aos="fade-up" data-aos-duration="1000">
           <img src="assets/images/Brand.svg" alt="" />
           <h4>Brand Architecture &amp; Identity Systems</h4>
           <p>
@@ -81,7 +81,7 @@ export default function Services() {
 </Link>
         </div>
         {/* CARD 3 */}
-        <div className="system-card light">
+        <div className="system-card light" data-aos="fade-up" data-aos-duration="1000">
           <img src="assets/images/Campaign.svg" alt="" />
           <h4>Campaign Strategy &amp; Performance Systems</h4>
           <p>Campaign thinking engineered for measurable growth, not noise.</p>
@@ -95,7 +95,7 @@ export default function Services() {
           <Link href="/campaign_strategy">View Platform Systems →</Link>
         </div>
         {/* CARD 4 (DARK) */}
-        <div className="system-card dark">
+        <div className="system-card dark" data-aos="fade-up" data-aos-duration="1000">
           <img src="assets/images/Content.svg" alt="" />
           <h4>Content, Motion &amp; Story Systems</h4>
           <p>
@@ -112,7 +112,7 @@ export default function Services() {
           <Link href="/content_motion">View Platform Systems →</Link>
         </div>
         {/* CARD 5 (GREEN) */}
-        <div className="system-card highlight">
+        <div className="system-card highlight" data-aos="fade-up" data-aos-duration="1000">
           <img src="assets/images/AI-Powered.svg" alt="" />
           <h4>AI-Powered Production &amp; Automation</h4>
           <p>
@@ -134,50 +134,50 @@ export default function Services() {
   <section className="connect-section">
     <div className="container">
       {/* HEADING */}
-      <h2>How Everything Connects</h2>
+      <h2 data-aos="fade-up" data-aos-duration="1000">How Everything Connects</h2>
-      <p className="subtitle">
+      <p className="subtitle" data-aos="fade-up" data-aos-delay="150" data-aos-duration="1000">
         We design and build high-performance digital platforms structured for
         conversion, scale, and integration.
       </p>
       {/* FLOW */}
       <div className="connect-flow">
-        <div className="flow-item">
+        <div className="flow-item" data-aos="zoom-in" data-aos-delay="100" data-aos-duration="900">
           <div className="icon">
             <img src="assets/images/Brand1.png" alt="" />
           </div>
           <span>Brand</span>
         </div>
-        <div className="arrow">
+        <div className="arrow" data-aos="fade-right" data-aos-delay="200" data-aos-duration="900">
           <img src="assets/images/Everything.svg" alt="" />
         </div>
-        <div className="flow-item">
+        <div className="flow-item" data-aos="zoom-in" data-aos-delay="300" data-aos-duration="900">
           <div className="icon">
             <img src="assets/images/Platform.svg" alt="" />
           </div>
           <span>Platform</span>
         </div>
-        <div className="arrow">
+        <div className="arrow" data-aos="fade-right" data-aos-delay="400" data-aos-duration="900">
           <img src="assets/images/Everything.svg" alt="" />
         </div>
-        <div className="flow-item">
+        <div className="flow-item" data-aos="zoom-in" data-aos-delay="500" data-aos-duration="900">
           <div className="icon">
             <img src="assets/images/Campaign1.svg" alt="" />
           </div>
           <span>Campaign</span>
         </div>
-        <div className="arrow">
+        <div className="arrow" data-aos="fade-right" data-aos-delay="600" data-aos-duration="900">
           <img src="assets/images/Everything.svg" alt="" />
         </div>
-        <div className="flow-item">
+        <div className="flow-item" data-aos="zoom-in" data-aos-delay="700" data-aos-duration="900">
           <div className="icon">
             <img src="assets/images/content1.svg" alt="" />
           </div>
           <span>Content</span>
         </div>
-        <div className="arrow">
+        <div className="arrow" data-aos="fade-right" data-aos-delay="800" data-aos-duration="900">
           <img src="assets/images/Everything.svg" alt="" />
         </div>
-        <div className="flow-item">
+        <div className="flow-item" data-aos="zoom-in" data-aos-delay="900" data-aos-duration="900">
           <div className="icon">
             <img src="assets/images/Automation.png" alt="" />
           </div>
@@ -185,7 +185,7 @@ export default function Services() {
         </div>
       </div>
       {/* BOTTOM TEXT */}
-      <p className="bottom-text">
+      <p className="bottom-text" data-aos="fade-up" data-aos-duration="1000">
         Our systems are designed to interlock. Each strengthens the next.
       </p>
     </div>

app/start_project/page.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import toast from "react-hot-toast";
+import Link from "next/link";
 export default function Start() {
 
   const [form, setForm] = useState({
@@ -62,13 +63,13 @@ export default function Start() {
           <div className="container">
             {/* center content */}
             <div className="ux-project-content text-center">
-              <h1 className="ux-project-title">Start A Project</h1>
+              <h1 className="ux-project-title" data-aos="fade-up" data-aos-duration="1000">Start A Project</h1>
-              <p className="ux-project-subtitle">
+              <p className="ux-project-subtitle" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
                 Tell us what you're building. We'll structure the rest.
               </p>
             </div>
             {/* joined users */}
-            <div className="ux-joined-box">
+            <div className="ux-joined-box" data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000">
               <div className="ux-avatar-group">
                 <img src="assets/images/user1.png" alt="" />
                 <img src="assets/images/user2.png" alt="" />
@@ -89,7 +90,7 @@ export default function Start() {
           <div className="container">
             <div className="row g-4">
               {/* LEFT INFO */}
-              <div className="col-lg-4">
+              <div className="col-lg-4" data-aos="fade-right" data-aos-duration="1000">
                 <div className="ux-contact-left">
                   <a href="tel:+1236662343" className="ux-contact-link">
                     (123) 666-2343
@@ -98,26 +99,26 @@ export default function Start() {
                     hello@ovela.com
                   </a>
                   <div className="ux-social-list">
-                    <a href="#">
+                    <a href="https://twitter.com" target="_blank" rel="noopener noreferrer">
                       Twitter <img src="assets/images/witterarrow.svg" alt="" />
                     </a>
-                    <a href="#">
+                    <a href="https://facebook.com" target="_blank" rel="noopener noreferrer">
                       Facebook <img src="assets/images/witterarrow.svg" alt="" />
                     </a>
-                    <a href="#">
+                    <a href="https://instagram.com" target="_blank" rel="noopener noreferrer">
                       Instagram <img src="assets/images/witterarrow.svg" alt="" />
                     </a>
-                    <a href="#">
+                    <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer">
                       Linkedin <img src="assets/images/witterarrow.svg" alt="" />
                     </a>
-                    <a href="#">
+                    <a href="https://youtube.com" target="_blank" rel="noopener noreferrer">
                       Youtube <img src="assets/images/witterarrow.svg" alt="" />
                     </a>
                   </div>
                 </div>
               </div>
               {/* RIGHT FORM */}
-              <div className="col-lg-8">
+              <div className="col-lg-8" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
                 <div className="ux-contact-box">
                   <p className="ux-contact-mini">Let's Build it Properly.</p>
                   <h2 className="ux-contact-title">
@@ -242,18 +243,18 @@ export default function Start() {
         {/* TOP CTA */}
         <div className="ux-footer-hero">
           <div className="container">
-            <div className="ux-footer-hero-content text-center">
+            <div className="ux-footer-hero-content text-center" data-aos="zoom-in" data-aos-duration="1000">
               <p className="ux-section-label">AAideA</p>
               <h2 className="ux-footer-title">
                 If the idea is strong, we'll scale it.
               </h2>
               <div className="ux-hero-actions">
-                <a href="#" className="btn ux-btn-primary">
+                <Link href="/contact" className="btn ux-btn-primary">
-                  Start a Project{" "}
+                  Contact Us{" "}
                   <span className="ux-btn-icon">
                     <img src="assets/images/arrowbuttonwhite.svg" alt="" />
                   </span>
-                </a>
+                </Link>
               </div>
             </div>
           </div>

app/terms/page.tsx

@@ -0,0 +1,57 @@
+import Link from "next/link";
+
+export default function Terms() {
+  return (
+    <>
+      <section className="ux-project-hero">
+        <div className="container">
+          <div className="ux-project-content text-center">
+            <h1 className="ux-project-title" data-aos="fade-up" data-aos-duration="1000">Terms &amp; Conditions.</h1>
+            <p className="ux-project-subtitle" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
+              The terms that govern your use of this site and our services.
+            </p>
+
+          </div>
+        </div>
+      </section>
+
+      <section className="ux-about-section">
+        <div className="container">
+          <div className="row">
+            <div className="col-lg-9 mx-auto">
+              <h2 className="ux-main-heading mb-4" data-aos="fade-up" data-aos-duration="900">Acceptance of Terms</h2>
+              <p className="ux-card-text" data-aos="fade-up" data-aos-delay="100" data-aos-duration="900">
+                By accessing this site, you agree to these terms. If you do not agree,
+                please do not use the site.
+              </p>
+
+              <h4 className="ux-card-title mt-5" data-aos="fade-up" data-aos-duration="900">Use of Content</h4>
+              <p className="ux-card-text" data-aos="fade-up" data-aos-delay="100" data-aos-duration="900">
+                All content, branding, and materials on this site are owned by AAideA
+                and may not be reproduced without written permission.
+              </p>
+
+              <h4 className="ux-card-title mt-5" data-aos="fade-up" data-aos-duration="900">Engagements</h4>
+              <p className="ux-card-text" data-aos="fade-up" data-aos-delay="100" data-aos-duration="900">
+                Project work is governed by a separate Statement of Work signed at the
+                start of each engagement. See our{" "}
+                <Link href="/process" className="ux-link">process</Link> for how that flow runs.
+              </p>
+
+              <h4 className="ux-card-title mt-5" data-aos="fade-up" data-aos-duration="900">Privacy</h4>
+              <p className="ux-card-text" data-aos="fade-up" data-aos-delay="100" data-aos-duration="900">
+                Read our <Link href="/privacy" className="ux-link">Privacy Policy</Link>{" "}
+                for how we handle your information.
+              </p>
+
+              <h4 className="ux-card-title mt-5" data-aos="fade-up" data-aos-duration="900">Contact</h4>
+              <p className="ux-card-text" data-aos="fade-up" data-aos-delay="100" data-aos-duration="900">
+                Questions about these terms? <Link href="/contact" className="ux-link">Contact us</Link>.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}

app/work/page.tsx

@@ -1,3 +1,5 @@
+import Link from "next/link";
+
 export default function WorkPage() {
     return (
 <>
@@ -5,13 +7,13 @@ export default function WorkPage() {
     <div className="container">
       {/* center content */}
       <div className="ux-project-content text-center">
-        <h1 className="ux-project-title">Work</h1>
+        <h1 className="ux-project-title" data-aos="fade-up" data-aos-duration="1000">Work</h1>
-        <p className="ux-project-subtitle">
+        <p className="ux-project-subtitle" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
           Each project begins with one idea. Everything else extends from it.
         </p>
       </div>
       {/* joined users */}
-      <div className="ux-joined-box">
+      <div className="ux-joined-box" data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000">
         <div className="ux-avatar-group">
           <img src="assets/images/user1.png" alt="" />
           <img src="assets/images/user2.png" alt="" />
@@ -32,7 +34,7 @@ export default function WorkPage() {
     <div className="container">
       <div className="accordion ux-case-accordion" id="uxCaseAccordion">
         {/* ITEM 1 */}
-        <div className="accordion-item ux-case-item">
+        <div className="accordion-item ux-case-item" data-aos="fade-up" data-aos-duration="1000">
           <h2 className="accordion-header">
             <button
               className="accordion-button collapsed ux-case-btn"
@@ -89,7 +91,7 @@ export default function WorkPage() {
           </div>
         </div>
         {/* ITEM 2 OPEN */}
-        <div className="accordion-item ux-case-item">
+        <div className="accordion-item ux-case-item" data-aos="fade-up" data-aos-delay="150" data-aos-duration="1000">
           <h2 className="accordion-header">
             <button
               className="accordion-button ux-case-btn"
@@ -146,7 +148,7 @@ export default function WorkPage() {
           </div>
         </div>
         {/* ITEM 3 */}
-        <div className="accordion-item ux-case-item">
+        <div className="accordion-item ux-case-item" data-aos="fade-up" data-aos-delay="300" data-aos-duration="1000">
           <h2 className="accordion-header">
             <button
               className="accordion-button collapsed ux-case-btn"
@@ -208,18 +210,18 @@ export default function WorkPage() {
   {/* TOP CTA */}
   <div className="ux-footer-hero">
     <div className="container">
-      <div className="ux-footer-hero-content text-center">
+      <div className="ux-footer-hero-content text-center" data-aos="zoom-in" data-aos-duration="1000">
         <p className="ux-section-label">AAideA</p>
         <h2 className="ux-footer-title">
           If the idea is strong, we'll scale it.
         </h2>
         <div className="ux-hero-actions">
-          <a href="#" className="btn ux-btn-primary">
+          <Link href="/start_project" className="btn ux-btn-primary">
             Start a Project{" "}
             <span className="ux-btn-icon">
               <img src="assets/images/arrowbuttonwhite.svg" alt="" />
             </span>
-          </a>
+          </Link>
         </div>
       </div>
     </div>

public/assets/css/responsive.css

@@ -1,601 +1,350 @@
-/* ==========================================================================
+/* =====================================================
    AAideA — Responsive Stylesheet
-   Mobile-first overrides on top of style.css.
+   All rules are wrapped in media queries only.
-   Breakpoints (Bootstrap 5 aligned):
+   Desktop styles live in style.css and are not touched.
-     xs : <  576px   (default / mobile)
+===================================================== */
-     sm : >= 576px
-     md : >= 768px
-     lg : >= 992px
-     xl : >= 1200px
-     xxl: >= 1400px
-   ========================================================================== */
 
-/* ---------------- GLOBAL TOKENS & BASE ---------------- */
-:root {
-  --ux-radius: 14px;
-  --ux-gap: clamp(12px, 2vw, 24px);
-  --ux-section-y: clamp(48px, 8vw, 110px);
-  --ux-container-x: clamp(16px, 4vw, 32px);
-  --ux-tap: 44px;
-}
 
-html { -webkit-text-size-adjust: 100%; }
+/* =====================================================
-body { overflow-x: hidden; }
+   TABLET — max-width: 1024px
-img, svg, video { max-width: 100%; height: auto; }
+===================================================== */
-* { box-sizing: border-box; }
+@media (max-width: 1024px) {
 
-.container, .container-fluid {
+    /* ---------- GLOBAL ---------- */
-  padding-left: var(--ux-container-x);
+    body { overflow-x: hidden; }
-  padding-right: var(--ux-container-x);
+    img, video { max-width: 100%; height: auto; }
-}
+    .container { padding-left: 24px; padding-right: 24px; }
-
+  
-/* Touch-friendly defaults: every interactive element gets minimum 44px tap target */
+    /* ---------- HEADER / NAV ---------- */
-.ux-btn-primary,
+    .ux-header { padding: 14px 0; }
-.ux-btn-secondary,
+    .ux-navbar { padding: 12px 18px; }
-.ux-footer-cta-btn,
+    .ux-nav { gap: 22px; }
-.ux-result-btn,
+    .ux-nav a { font-size: 14px; }
-button,
+    .ux-brand img { width: 100px; height: auto; }
-a.btn {
+  
-  min-height: var(--ux-tap);
+    /* ---------- HERO ---------- */
-  display: inline-flex;
+    .ux-hero-section { padding: 160px 0 50px; background-size: cover; }
-  align-items: center;
+    .ux-hero-title { font-size: 40px; line-height: 1.2; }
-  justify-content: center;
+    .ux-hero-subtitle { width: 80%; font-size: 16px; }
-}
+  
-
+    .ux-bottom-wrapper { margin-top: 50px; }
-.ux-input,
+    .ux-bottom-wrapper .col-lg-3,
-.ux-textarea {
+    .ux-bottom-wrapper .col-lg-2 { flex: 0 0 auto; width: 50%; margin-bottom: 16px; }
-  width: 100%;
+    .ux-stat-box { padding: 28px 24px; }
-  font-size: 16px; /* prevent iOS zoom on focus */
+    .ux-light { padding: 36px 0; }
-}
+    .ux-counter { font-size: 34px; }
-
+    .ux-dark h2 { font-size: 32px; }
-/* ============================================================
+    .ux-dark p, .ux-dark h5 { font-size: 18px; line-height: 1.4; }
-   HEADER + MOBILE NAVIGATION
+  
-   ============================================================ */
+    /* ---------- ABOUT SECTION ---------- */
-.ux-header { padding: 14px 0; }
+    .ux-about-section { padding: 60px 0; }
-
+    .ux-section-label { width: 100%; }
-.ux-navbar {
+    .ux-main-heading { font-size: 24px; }
-  display: flex;
+    .ux-big-counter { font-size: 56px; }
-  align-items: center;
+    .ux-small-text { width: 80%; }
-  justify-content: space-between;
+    .ux-about-img { height: 260px; }
-  gap: 12px;
+  
-  padding: 12px 16px;
+    .partners-wrapper { flex-wrap: wrap; gap: 18px; justify-content: center; }
-  flex-wrap: nowrap;
+    .partner-item img { max-height: 36px; width: auto; }
-}
+  
-
+    /* ---------- WORK / SWIPER ---------- */
-.ux-navbar img { width: auto; height: auto; max-width: 110px; }
+    .ux-work-section { padding: 0 0 50px; }
-
+    .ux-work-card img {/* height: 240px; */}
-.ux-brand { display: inline-flex; align-items: center; }
+    .ux-work-card h4 { font-size: 18px; }
-
+  
-.ux-header-actions {
+    /* ---------- WHY ---------- */
-  display: flex;
+    .ux-why-section { padding: 70px 0; }
-  align-items: center;
+    .ux-why-img img { height: 260px; }
-  gap: 10px;
+    .ux-why-card { padding: 20px 22px; }
-}
+  
-
+    /* ---------- BUILD ---------- */
-/* HAMBURGER (mobile only by default) */
+    .ux-build-section { padding: 60px 0; }
-.ux-hamburger {
+    .ux-build-card { padding: 28px; }
-  width: 40px;
+    .ux-build-card h5 { font-size: 18px; line-height: 26px; min-height: auto; margin-top: 16px; }
-  height: 40px;
+    .ux-build-card p { min-height: auto; }
-  display: inline-flex;
+  
-  flex-direction: column;
+    /* ---------- PROCESS ---------- */
-  justify-content: center;
+    .ux-process-section { padding: 60px 0; }
-  align-items: center;
+    .ux-process-card { width: 100%; padding: 24px; }
-  gap: 5px;
+    .ux-process-card img { margin-top: 16px; }
-  background: transparent;
+    .ux-step-arrow { display: none !important; }
-  border: 1px solid rgba(255,255,255,0.18);
+  
-  border-radius: 10px;
+    /* ---------- FOOTER HERO ---------- */
-  padding: 0;
+    .ux-footer-hero { padding: 70px 0; }
-  cursor: pointer;
+    .ux-footer-title { font-size: 26px; }
-}
+  
-.ux-hamburger span {
+    /* ---------- MAIN FOOTER ---------- */
-  display: block;
+    .ux-footer-grid { grid-template-columns: 1fr; }
-  width: 20px;
+    .ux-footer-left { padding: 32px 24px; border-right: none; border-bottom: 1px solid rgba(255,255,255,.09); }
-  height: 2px;
+    .ux-footer-right { grid-template-columns: repeat(3, 1fr); }
-  background: #fff;
+    .ux-footer-links { padding: 28px 18px; }
-  border-radius: 2px;
+    .ux-footer-links h6 { font-size: 16px; }
-  transition: transform .25s ease, opacity .2s ease;
+    .ux-footer-bottom { padding: 16px 24px; flex-wrap: wrap; }
-}
+  
-.ux-hamburger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
+    /* ---------- PROJECT HERO ---------- */
-.ux-hamburger.is-active span:nth-child(2) { opacity: 0; }
+    .ux-project-hero { padding: 150px 0 70px; }
-.ux-hamburger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
+    .ux-project-title { font-size: 40px; }
-
+    .ux-project-subtitle { font-size: 16px; }
-/* CONTACT TOGGLE: hide the close icon by default and reveal when active */
+    .ux-breadcrumb-wrap { margin-bottom: 50px; }
-.ux-menu { width: 40px; height: 40px; background: transparent; border: 0; padding: 0; }
+  
-.ux-menu .icon {/* width: 100%; *//* height: 100%; */}
+    /* ---------- SERVICES SYSTEMS LAYOUT ---------- */
-.ux-menu .close-icon { opacity: 0; transform: rotate(90deg); }
+    .systems-wrapper { display: block; }
-.ux-menu.active .open-icon  { opacity: 0; transform: rotate(90deg); }
+    .systems-left { position: static; margin-bottom: 32px; }
-.ux-menu.active .close-icon { opacity: 1; transform: rotate(0); }
+    .system-card { padding: 28px; margin-bottom: 20px; }
-
+  
-/* OVERLAY (shared by mobile nav + contact panel on small screens) */
+    /* ---------- PROCESS STEP PAGE ---------- */
-.ux-overlay {
+    .ux-process-step-section { padding: 60px 0; }
-  position: fixed;
+    .ux-process-grid { gap: 24px; }
-  inset: 0;
+    .ux-process-image img { width: 100%; height: auto; border-radius: 12px; }
-  background: rgba(0,0,0,0.55);
+  
-  opacity: 0;
+    /* ---------- HVAC / CASE PAGES ---------- */
-  pointer-events: none;
+    .ux-deliver-right { padding-top: 24px; }
-  transition: opacity .3s ease;
+  
-  z-index: 0;
+    /* ---------- BUTTONS ---------- */
-}
+    .ux-hero-actions { flex-wrap: wrap; gap: 12px; justify-content: center; }
-.ux-overlay.active { opacity: 1; pointer-events: auto; }
+    .ux-btn-primary { padding: 6px 6px 6px 22px; font-size: 14px; }
-
+    .ux-btn-secondary { padding: 11px 22px; font-size: 14px; }
-/* MOBILE NAV DRAWER (default = mobile) */
+  
-.ux-nav {
+    /* ---------- CONTACT PANEL ---------- */
-  position: fixed;
+    .contact-panel { width: 360px; max-width: 80vw; }
-  top: 0;
-  right: 0;
-  width: min(82vw, 320px);
-  height: 100dvh;
-  background: #0e1414;
-  flex-direction: column;
-  gap: 6px;
-  padding: 88px 24px 32px;
-  margin: 0;
-  list-style: none;
-  transform: translateX(100%);
-  transition: transform .35s ease;
-  z-index: 95;
-  box-shadow: -10px 0 40px rgba(0,0,0,0.45);
-  overflow-y: auto;
-}
-.ux-nav.is-open { transform: translateX(0); }
-.ux-nav li {/* width: 100%; */}
-.ux-nav li a {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  padding: 14px 8px;
-  font-size: 17px;
-  color: #fff;
-  border-bottom: 1px solid rgba(255,255,255,0.06);
-  text-decoration: none;
-  min-height: var(--ux-tap);
-}
-.ux-nav .ux-nav-cta a {
-  margin-top: 12px;
-  background: var(--primary);
-  color: #000 !important;
-  border-radius: 30px;
-  justify-content: center;
-  border: 0;
-  padding: 12px 22px;
-  font-weight: 600;
-}
-
-/* CONTACT PANEL: full-width sheet on mobile */
-.contact-panel {
-  top: 0;
-  right: -100%;
-  width: min(88vw, 360px);
-  height: 100dvh;
-  border-radius: 0;
-  padding: 80px 22px 24px;
-  overflow-y: auto;
-  z-index: 96;
-}
-.contact-panel.active { right: 0; }
-.contact-panel .images { flex-wrap: wrap; }
-.contact-panel .images img { width: 72px; height: 72px; }
-
-/* ============================================================
-   HERO
-   ============================================================ */
-.ux-hero-section {
-  padding: 120px 0 40px;
-  background-size: cover;
-  background-position: center top;
-}
-.ux-hero-title { font-size: clamp(28px, 7vw, 52px); }
-.ux-hero-subtitle { width: 100%; font-size: 15px; }
-.ux-hero-actions {
-  flex-wrap: wrap;
-  gap: 12px;
-  margin-top: 28px;
-}
-.ux-hero-actions .btn {/* width: 100%; */max-width: 320px;}
-
-.ux-bottom-wrapper { margin-top: 40px; }
-.ux-bottom-wrapper .ux-img-card img { width: 100%; }
-.ux-stat-box { padding: 24px 20px; }
-.ux-counter { font-size: 32px; }
-.ux-dark h2 { font-size: 28px; }
-.ux-dark h5,
-.ux-dark p {font-size: 21px;line-height: 1.45;}
- .ux-about-img{
-    margin: 0 0 20px;
-} 
-/* ============================================================
-   ABOUT SECTION
-   ============================================================ */
-.ux-about-section { padding: var(--ux-section-y) 0; }
-.ux-section-label {/* width: 100%; */}
-.ux-main-heading { font-size: clamp(20px, 4vw, 32px); }
-.ux-sub-heading { font-size: 16px; }
-.ux-big-counter { font-size: clamp(40px, 10vw, 70px); }
-.ux-small-text { width: 100%; }
-.ux-about-img { height: auto; max-height: 280px; }
-.ux-card-text { max-width: 100%; }
-
-/* PARTNERS */
-.partners-wrapper {
-  grid-template-columns: repeat(2, 1fr);
-  gap: 8px;
-}
-.partner-item { height: 80px; }
-.partner-item img { max-width: 90px; }
-
-/* ============================================================
-   WORK / SWIPER
-   ============================================================ */
-.ux-work-section { padding: 30px 0 50px; }
-.ux-work-card img { height: auto; max-height: 240px; }
-.ux-work-card h4 { font-size: 17px; }
-.displayflexhead {
-  width: 100%;
-  flex-direction: column;
-  gap: 10px;
-}
-.ux-swiper-nav { gap: 10px; }
-.ux-swiper-nav .ux-arrow {
-  width: 70px;
-  height: 40px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* ============================================================
-   WHY SECTION
-   ============================================================ */
-.ux-why-section { padding: var(--ux-section-y) 0; }
-.ux-why-img img { height: auto; max-height: 260px; }
-.ux-why-card { padding: 22px 20px; }
-.main-headingexit { width: 100%; }
-
-/* ============================================================
-   BUILD / SELL SECTION
-   ============================================================ */
-.ux-build-section { padding: var(--ux-section-y) 0; background-size: cover; }
-.ux-build-card { padding: 26px 22px; }
-.ux-build-card h5 {}
-.ux-build-card p {}
-.ux-build-swiper .swiper-slide { width: 86%; }
-
-/* ============================================================
-   PROCESS SECTION
-   ============================================================ */
-.ux-process-section { padding: var(--ux-section-y) 0; }
-.ux-process-card {/* width: 100%; *//* padding: 24px 22px; */}
-.ux-step-arrow { display: none; }
-
-/* ============================================================
-   FOOTER CTA + MAIN FOOTER
-   ============================================================ */
-.ux-footer-hero { padding: 60px 0; background-size: cover; background-position: center; }
-.ux-footer-title { font-size: clamp(22px, 5vw, 30px); }
-.ux-footer-cta-btn {
-  font-size: 16px;
-  padding: 6px 6px 6px 22px;
-}
-.ux-footer-cta-btn .ux-btn-icon { width: 38px; height: 38px; }
-
-.ux-footer-grid {
-  grid-template-columns: 1fr;
-  border-left: 0;
-  border-right: 0;
-}
-.ux-footer-left {
-  padding: 32px 22px;
-  border-right: 0;
-  border-bottom: 1px solid rgba(255,255,255,0.08);
-}
-.ux-footer-desc { max-width: 100%; font-size: 15px; line-height: 1.7; }
-.ux-footer-right { grid-template-columns: repeat(2, 1fr); }
-.ux-footer-links { padding: 26px 22px; }
-.ux-footer-links h6 { font-size: 16px; margin-bottom: 12px; }
-.ux-footer-links a { font-size: 14px; margin-bottom: 10px; }
-
-.ux-footer-bottom {
-  flex-direction: column;
-  align-items: flex-start;
-  padding: 18px 22px;
-  gap: 14px;
-  text-align: left;
-}
-.ux-footer-bottom p { font-size: 13px; }
-.ux-footer-social { gap: 14px; flex-wrap: wrap; }
-
-/* ============================================================
-   START PROJECT / BREADCRUMB HERO
-   ============================================================ */
-.ux-project-hero { padding: 130px 0 60px; background-size: cover; }
-.ux-project-title { font-size: clamp(26px, 6vw, 50px); }
-.ux-project-subtitle { font-size: 15px; }
-.ux-breadcrumb-wrap { margin-bottom: 36px; flex-wrap: wrap; }
-.ux-joined-box {
-  position: static;
-  margin: 30px auto 0;
-  justify-content: center;
-  flex-wrap: wrap;
-}
-.ux-avatar-group img { width: 48px; height: 48px; border-width: 2px; margin-left: -10px; }
-
-/* CONTACT FORM */
-.ux-contact-section { padding: 50px 0; }
-.ux-contact-left,
-.ux-contact-box {}
-.ux-contact-email { font-size: clamp(24px, 6vw, 35px); margin-bottom: 36px; }
-.ux-contact-link { font-size: 18px; }
-.ux-contact-title { font-size: clamp(20px, 4vw, 26px); margin-bottom: 24px; }
-.ux-input {}
-.ux-textarea { font-size: 16px; padding: 16px 18px; }
-
-/* CASE ACCORDION */
-.ux-case-section { padding: 50px 0; }
-.ux-case-btn { padding: 22px 22px !important; flex-wrap: wrap; gap: 10px; }
-.ux-case-head {/* width: 100%; */}
-.ux-case-head h3 { font-size: clamp(20px, 5vw, 29px); }
-.ux-case-head p { font-size: 15px; }
-.ux-case-right { padding-right: 0; margin-left: 0; }
-.ux-case-body { padding: 0 18px 24px !important; }
-.ux-case-inner {
-  grid-template-columns: 1fr;
-  gap: 18px;
-  padding: 18px;
-}
-.ux-case-img { height: auto; max-height: 220px; }
-.ux-case-grid { grid-template-columns: 1fr; gap: 18px; }
-.ux-case-grid strong { font-size: 17px; }
-
-/* RESULT / DELIVER */
-.ux-result-section { padding: 50px 0; }
-.ux-result-box {
-  grid-template-columns: 1fr;
-  margin-bottom: 50px;
-  padding: 26px;
-}
-.ux-result-left { padding-right: 0; border-right: 0; padding-bottom: 22px; border-bottom: 1px solid #e3e3e3; }
-.ux-result-right { padding-left: 0; padding-top: 22px; }
-.ux-build-grid { grid-template-columns: repeat(2, 1fr); }
-.ux-ai-grid { grid-template-columns: 1fr; }
-.ux-mini-card { min-height: auto; }
-.ux-mini-card span { font-size: 32px; top: 8px; right: 12px; }
-.ux-mini-card p { margin-top: 56px; font-size: 14px; }
-
-.ux-deliver-box {
-  grid-template-columns: 1fr;
-  gap: 24px;
-  padding: 26px;
-}
-.ux-deliver-center img { height: auto; max-height: 240px; }
-
-/* ============================================================
-   PROCESS STEP CARD
-   ============================================================ */
-.ux-process-step-section { padding: 50px 0; }
-.ux-process-step-box { padding: 24px 22px; margin: 0 0 28px; }
-.ux-process-title { font-size: clamp(20px, 5vw, 28px); }
-.ux-process-grid { grid-template-columns: 1fr; gap: 24px; }
-.ux-process-image img { height: auto; max-height: 280px; }
-.ux-process-content { padding-right: 0; }
-.ux-process-item { margin-bottom: 22px; }
-
-/* SYSTEMS WRAPPER */
-.systems-wrapper {
-  flex-direction: column;
-  gap: 30px;
-  padding: 40px 0;
-}
-.systems-left,
-.systems-right { width: 100%; }
-.systems-left { position: static; }
-.systems-left .desc { width: 100%; }
-.system-card { padding: 22px; }
-.system-card ul { grid-template-columns: 1fr; }
-
-/* CONNECT SECTION (FLOW) */
-.connect-section { padding: 50px 0 30px; }
-.connect-section h2 { font-size: clamp(22px, 5vw, 30px); }
-.connect-flow { gap: 8px; }
-.flow-item { padding: 8px 18px 8px 8px; font-size: 13px; }
-.arrow { display: none; }
-.bottom-text { font-size: 17px; margin: 30px auto; }
-
-/* APPROACH / DELIVER */
-.ux-approach-section { padding: 60px 0; }
-.ux-section-desc { font-size: 16px; margin-left: 0; max-width: 100%; }
-.ux-card { padding: 22px 20px; }
-.ux-card-top { margin-bottom: 22px; }
-.ux-card h4 { font-size: 19px; }
-
-.ux-deliver-section { padding: 30px 0 60px; }
-.ux-snapshot-box { padding: 28px 24px; }
-.ux-snapshot-box h2 { font-size: clamp(30px, 8vw, 48px); }
-.ux-snapshot-box p { font-size: 17px; }
-
-/* GROWTH SECTION */
-.ux-growth-section { margin: 24px auto; padding: 30px 0; }
-.ux-growth-title { font-size: clamp(22px, 5vw, 30px); }
-.ux-growth-bottom { font-size: 17px; }
-
-/* BREACAMP OFFLINE TEXT BLOCK */
-.breacampoffline {
-  flex-direction: column;
-  gap: 14px;
-  margin: 30px auto 0;
-  align-items: stretch;
-}
-.breacampoffline p { width: 100%; }
-
-/* ==========================================================================
-   >= 576px  (sm)
-   ========================================================================== */
-@media (min-width: 576px) {
- 
-  .ux-hero-actions .btn { width: auto; }
-  .partners-wrapper { grid-template-columns: repeat(3, 1fr); }
-  .ux-build-grid { grid-template-columns: repeat(2, 1fr); }
-  .ux-ai-grid { grid-template-columns: repeat(2, 1fr); }
-  .ux-footer-right { grid-template-columns: repeat(3, 1fr); }
-  .ux-build-swiper .swiper-slide { width: 60%; }
-}
-
-/* ==========================================================================
-   >= 768px  (md / tablet)
-   ========================================================================== */
-@media (min-width: 768px) {
-  .ux-header { padding: 18px 0; }
-  .ux-navbar { padding: 14px 22px; }
-
-  .ux-hero-section { padding: 160px 0 50px; }
-  .ux-hero-subtitle { width: 80%; }
-
-  .partners-wrapper { grid-template-columns: repeat(4, 1fr); }
-  .partner-item { height: 90px; }
-
-  .ux-case-inner { grid-template-columns: 280px 1fr; }
-  .ux-case-grid { grid-template-columns: repeat(2, 1fr); }
-
-  .ux-result-box { grid-template-columns: 1.3fr .9fr; }
-  .ux-result-left {
-    padding-right: 26px;
-    padding-bottom: 0;
-    border-right: 1px solid #e3e3e3;
-    border-bottom: 0;
   }
-  .ux-result-right { padding-left: 30px; padding-top: 0; }
+  
-
+  
-  .ux-build-grid { grid-template-columns: repeat(3, 1fr); }
+  /* =====================================================
-  .ux-ai-grid { grid-template-columns: repeat(3, 1fr); }
+     MOBILE — max-width: 768px
-
+  ===================================================== */
-  .ux-deliver-box { grid-template-columns: .9fr 1fr .8fr; }
+  @media (max-width: 768px) {
-  .ux-process-grid { grid-template-columns: 1fr 1fr; }
+  
-
+    /* ---------- GLOBAL ---------- */
-  .ux-footer-grid { grid-template-columns: 1.1fr 1fr; }
+    body { overflow-x: hidden; }
-  .ux-footer-left {
+    .container { padding-left: 16px; padding-right: 16px; }
-    padding: 38px 32px;
+  
-    border-right: 1px solid rgba(255,255,255,0.08);
+    /* ---------- HEADER / NAV ---------- */
-    border-bottom: 0;
+    .ux-header { padding: 10px 0; }
+    .ux-navbar { padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; }
+    .ux-brand img { width: 90px; height: auto; }
+  
+    /* slide-in mobile menu */
+    .ux-nav {
+      position: fixed;
+      top: 0;
+      right: 0;
+      height: 100vh;
+      width: 80%;
+      max-width: 320px;
+      background: #0c0f0e;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0;
+      padding: 90px 28px 28px;
+      transform: translateX(100%);
+      transition: transform 0.35s ease;
+      z-index: 50;
+      overflow-y: auto;
+      box-shadow: -10px 0 30px rgba(0,0,0,0.35);
+    }
+    .ux-nav.is-open { transform: translateX(0); }
+    .ux-nav li { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.08); }
+    .ux-nav li a {
+      display: block;
+      color: #fff;
+      padding: 16px 4px;
+      font-size: 16px;
+      text-decoration: none;
+    }
+    .ux-nav-cta a { color: var(--primary) !important; font-weight: 600; }
+  
+    .ux-hamburger {
+      display: inline-flex;
+      flex-direction: column;
+      justify-content: center;
+      gap: 5px;
+      width: 38px;
+      height: 38px;
+      padding: 8px;
+      background: transparent;
+      border: 1px solid rgba(255,255,255,0.18);
+      border-radius: 8px;
+      cursor: pointer;
+      z-index: 60;
+      position: relative;
+    }
+    .ux-hamburger span {
+      display: block;
+      width: 100%;
+      height: 2px;
+      background: #fff;
+      transition: transform 0.3s ease, opacity 0.2s ease;
+    }
+    .ux-hamburger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
+    .ux-hamburger.is-active span:nth-child(2) { opacity: 0; }
+    .ux-hamburger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
+  
+    .ux-overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(0,0,0,0.55);
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.3s ease;
+      z-index: 40;
+    }
+    .ux-overlay.active { opacity: 1; pointer-events: auto; }
+  
+    /* ---------- HERO ---------- */
+    .ux-hero-section { padding: 130px 0 40px; }
+    .ux-hero-title { font-size: 30px; line-height: 1.25; }
+    .ux-hero-title br { display: none; }
+    .ux-hero-subtitle { width: 100%; font-size: 15px; margin: 14px auto 0; }
+    .ux-hero-actions {flex-direction: column;gap: 10px;}
+    .ux-hero-actions .btn {justify-content: center;width: fit-content;}
+  
+    /* ---------- BOTTOM CARDS (stat row) ---------- */
+    .ux-bottom-wrapper { margin-top: 32px; }
+    .ux-bottom-wrapper .col-lg-3,
+    .ux-bottom-wrapper .col-lg-2 { width: 100%; flex: 0 0 100%; margin-bottom: 14px; }
+    .ux-img-card img { width: 100%; }
+    .ux-stat-box { padding: 24px 22px; text-align: center; }
+    .ux-light { padding: 28px 0; }
+    .ux-counter { font-size: 30px; }
+    .ux-dark h2 { font-size: 28px; }
+    .ux-dark p, .ux-dark h5 { font-size: 16px; line-height: 1.4; }
+    .ux-dark .ux-icon { display: flex; justify-content: center; margin-top: 12px; }
+  
+    /* ---------- ABOUT ---------- */
+    .ux-about-section { padding: 50px 0; }
+    .ux-main-heading { font-size: 20px; line-height: 1.45; }
+    .ux-sub-heading { font-size: 15px; }
+    .ux-big-counter { font-size: 44px; }
+    .ux-small-text { width: 100%; font-size: 14px; }
+    .ux-about-img { height: 220px; margin: 18px 0; }
+    .ux-card-title { font-size: 18px; }
+    .ux-card-text { font-size: 14px; max-width: 100%; margin-bottom: 24px; }
+  
+    .partners-wrapper {gap: 14px;grid-template-columns: repeat(2, 1fr);}
+    .partner-item img { max-height: 28px; }
+  
+    /* ---------- WORK ---------- */
+    .ux-work-section { padding: 0 0 40px; }
+    .ux-work-card img {/* height: 200px; */}
+    .ux-work-card h4 { font-size: 17px; }
+    .ux-work-card p { font-size: 13px; }
+    .ux-swiper-nav { gap: 10px; }
+    .ux-arrow img {/* width: 36px; */height: 31px;}
+    .displayflexhead {width: 70%;margin-bottom: 16px;DISPLAY: BLOCK;}
+  
+    /* ---------- WHY ---------- */
+    .ux-why-section { padding: 50px 0; }
+    .ux-why-img img { height: 220px; margin-bottom: 20px; }
+    .ux-why-card { padding: 18px 20px; }
+    .ux-number { font-size: 26px; margin-bottom: 8px; }
+    .ux-why-card h6 { font-size: 15px; }
+    .main-headingexit { font-size: 20px !important; }
+    .existpadd { gap: 0 !important; }
+  
+    /* ---------- BUILD ---------- */
+    .ux-build-section { padding: 50px 0; }
+    .ux-build-card { padding: 22px; }
+    .ux-build-card h5 { font-size: 17px; line-height: 24px; min-height: auto; margin-top: 14px; }
+    .ux-build-card p { font-size: 14px; min-height: auto; }
+    .ux-build-swiper { padding-top: 24px; }
+  
+    /* ---------- PROCESS ---------- */
+    .ux-process-section { padding: 50px 0; }
+    .ux-process-card { padding: 22px; width: 100%; }
+    .ux-process-card h4 { font-size: 18px; margin: 0 0 14px; }
+    .ux-process-card p { font-size: 14px; }
+    .ux-step { font-size: 24px; }
+    .ux-step-arrow { display: none !important; }
+  
+    /* ---------- FOOTER HERO ---------- */
+    .ux-footer-hero { padding: 50px 0; background-size: cover; }
+    .ux-footer-title { font-size: 22px; line-height: 1.35; }
+  
+    /* ---------- MAIN FOOTER ---------- */
+    .ux-footer-grid { grid-template-columns: 1fr; border-left: none; border-right: none; }
+    .ux-footer-left { padding: 28px 18px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
+    .ux-footer-desc { font-size: 14px; line-height: 1.7; }
+  
+    .ux-footer-right { grid-template-columns: 1fr; }
+    .ux-footer-links { padding: 22px 18px; border-bottom: 1px solid rgba(255,255,255,0.06); }
+    .ux-footer-links:last-child { border-bottom: none; }
+    .ux-footer-links h6 { font-size: 14px; margin-bottom: 14px; }
+    .ux-footer-links a { font-size: 14px; margin-bottom: 10px; }
+  
+    .ux-footer-bottom {
+      flex-direction: column;
+      align-items: flex-start;
+      text-align: left;
+      padding: 16px 18px;
+      gap: 12px;
+    }
+    .ux-footer-bottom p { font-size: 12px; }
+    .ux-footer-social { gap: 14px; }
+    .ux-footer-social img { width: 18px; height: 18px; }
+  
+    /* ---------- PROJECT HERO ---------- */
+    .ux-project-hero { padding: 130px 0 60px; }
+    .ux-project-hero.ux-project-heropad { padding: 130px 0 40px; }
+    .ux-project-title { font-size: 30px; line-height: 1.25; }
+    .ux-project-title br { display: none; }
+    .ux-project-subtitle { font-size: 15px; }
+    .ux-project-subtitle br { display: none; }
+    .ux-breadcrumb-wrap { margin-bottom: 30px; flex-wrap: wrap; }
+  
+    /* ---------- SERVICES SYSTEMS ---------- */
+    .systems-section { padding: 50px 0; }
+    .systems-wrapper { display: block; }
+    .systems-left { position: static; margin-bottom: 24px; }
+    .systems-left h2 { font-size: 22px; }
+    .systems-left .desc { font-size: 14px; }
+    .system-card { padding: 22px; margin-bottom: 18px; }
+    .system-card h4 { font-size: 17px; }
+    .system-card p, .system-card li { font-size: 14px; }
+  
+    /* ---------- PROCESS STEP PAGE ---------- */
+    .ux-process-step-section { padding: 40px 0; }
+    .ux-process-step-box { padding: 24px 18px; }
+    .ux-process-number { font-size: 36px; }
+    .ux-process-title { font-size: 26px; }
+    .ux-process-subtitle { font-size: 15px; }
+    .ux-process-grid { display: block; }
+    .ux-process-image img { width: 100%; height: auto; margin: 16px 0; border-radius: 12px; }
+    .ux-process-item h4 { font-size: 17px; }
+    .ux-process-item p { font-size: 14px; }
+  
+    /* ---------- GROWTH SECTION (detail pages) ---------- */
+    .ux-growth-section { padding: 24px 0; }
+    .ux-growth-title { font-size: 22px; line-height: 1.35; }
+    .ux-growth-subtitle { font-size: 15px; }
+    .ux-growth-list { padding-left: 18px; }
+    .ux-growth-list li { font-size: 14px; }
+  
+    /* ---------- HVAC / LYNKEDUP CASE PAGES ---------- */
+    .ux-deliver-right { padding-top: 18px; }
+    .ux-result-heading { font-size: 22px; }
+    .ux-result-btn { display: inline-block; margin-top: 14px; }
+  
+    /* ---------- START PROJECT FORM ---------- */
+    .ux-contact-left { padding: 24px 18px; }
+    .ux-contact-link { font-size: 22px; }
+    .ux-contact-email { font-size: 16px; }
+    .ux-social-list a { font-size: 14px; }
+  
+    /* ---------- CONTACT PANEL (slide-out) ---------- */
+    .contact-panel { width: 86%; max-width: 320px; padding: 22px 18px; }
+    .contact-panel h4 { font-size: 18px; }
+    .contact-panel .images { gap: 8px; }
+    .contact-panel .images img { width: 60px; height: 60px; }
+    .contact-panel p { font-size: 13px; }
+  
+    /* ---------- BUTTONS ---------- */
+    .ux-btn-primary { padding: 6px 6px 6px 18px; font-size: 13px; gap: 8px; }
+    .ux-btn-icon { padding: 6px 10px; }
+    .ux-btn-secondary { padding: 10px 18px; font-size: 13px; }
+  
+    /* ---------- TYPOGRAPHY UTILS ---------- */
+    h2 { font-size: 22px; }
+    .ux-section-label { font-size: 14px; width: 100%; }
   }
-  .ux-footer-bottom {
+  
-    flex-direction: row;
-    align-items: center;
-    text-align: left;
-    padding: 18px 28px;
-  }
-
-  .systems-wrapper { padding: 60px 0; }
-  .ux-build-swiper .swiper-slide { width: 45%; }
-}
-
-/* ==========================================================================
-   >= 992px  (lg / desktop) — restore original desktop nav
-   ========================================================================== */
-@media (min-width: 992px) {
-  .ux-header { padding: 20px 0; }
-  .ux-navbar { padding: 15px 25px; }
-
-  .ux-hamburger { display: none; }
-
-  .ux-nav {
-    position: static;
-    width: auto;
-    height: auto;
-    background: transparent;
-    flex-direction: row;
-    gap: 30px;
-    padding: 0;
-    transform: none;
-    box-shadow: none;
-    overflow: visible;
-  }
-  .ux-nav li a {
-    padding: 0;
-    border-bottom: 0;
-    font-size: 16px;
-    min-height: auto;
-  }
-  .ux-nav .ux-nav-cta a {
-    margin-top: 0;
-    background: transparent;
-    color: var(--primary) !important;
-    padding: 0;
-    font-weight: 400;
-  }
-
-  /* Contact panel returns to floating card */
-  .contact-panel {
-    top: 100px;
-    right: -350px;
-    width: 320px;
-    height: auto;
-    border-radius: 12px;
-    padding: 20px;
-  }
-  .contact-panel.active { right: 40px; }
-
-  .ux-overlay { display: none; }
-
-  .ux-hero-section { padding: 200px 0 60px; }
-  .ux-hero-subtitle { width: 60%; }
-
-  .partners-wrapper { grid-template-columns: repeat(6, 1fr); }
-  .partner-item { height: 100px; }
-  .partner-item img { max-width: 120px; }
-
-  .ux-build-grid { grid-template-columns: repeat(4, 1fr); }
-  .ux-build-swiper .swiper-slide { width: 330px; }
-
-  .ux-joined-box {
-    position: absolute;
-    right: 8%;
-    bottom: 50px;
-    margin: 0;
-    flex-wrap: nowrap;
-  }
-  .ux-avatar-group img { width: 64px; height: 64px; border-width: 3px; margin-left: -14px; }
-
-  .ux-step-arrow { display: block; }
-
-  .systems-wrapper {
-    flex-direction: row;
-    gap: 80px;
-    padding: 80px 20px;
-  }
-  .systems-left { width: 45%; position: sticky; top: 90px; }
-  .systems-right { width: 65%; }
-  .systems-left .desc { width: 70%; }
-
-  .system-card ul { grid-template-columns: 1fr 1fr; }
-
-  .breacampoffline {
-    flex-direction: row;
-    align-items: self-start;
-    gap: 20px;
-    justify-content: center;
-  }
-  .breacampoffline p { width: 33%; }
-
-  .displayflexhead { flex-direction: row; width: 62%; gap: 0; }
-
-  .arrow { display: inline; }
-  .flow-item { padding: 10px 40px 10px 10px; font-size: 14px; }
-}
-
-/* ==========================================================================
-   >= 1200px  (xl)
-   ========================================================================== */
-@media (min-width: 1200px) {
-  .ux-hero-section { padding: 200px 0 60px; }
-  .ux-project-hero { padding: 190px 0 100px; }
-}
-
-/* ==========================================================================
-   Reduced motion respect
-   ========================================================================== */
-@media (prefers-reduced-motion: reduce) {
-  .ux-nav,
-  .contact-panel,
-  .ux-overlay,
-  .ux-hamburger span,
-  .ux-menu .icon { transition: none !important; }
-}     

public/assets/css/style.css

@@ -23,7 +23,7 @@ h2 {
 
 /* NAVBAR */
 .ux-header {
-  padding: 20px 0;
+  padding: 30px 0;
   position: absolute;
   z-index: 9;
   width: 100%;
@@ -141,7 +141,9 @@ h2 {
   padding: 80px 0;
   background: #ffffff;
 }
-
+.ux-footer-hero .ux-section-label {
+    color: white;
+}
 /* COMMON HEADINGS */
 .ux-section-label {
   font-size: 16px;
@@ -197,7 +199,7 @@ h2 {
 
 .ux-card-text {
   color: black;
-  margin-bottom: 20px;
+  margin-bottom: 40px;
   max-width: 80%;
 }
 
@@ -332,7 +334,7 @@ h2 {
 .ux-number {
   font-size: 32px;
   font-weight: 700;
-  color: #bbb;
+  color: #bbbbbb3d;
   display: block;
   margin-bottom: 13px;
 }
@@ -482,6 +484,10 @@ h2 {
 .ux-footer-hero-content{
     position:relative;
     z-index:2;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
 }
 .ux-footer-hero-content .ux-hero-actions {
     margin-top: 20px;
@@ -1671,7 +1677,7 @@ h2 {
 
 .ux-nav {
   display: flex;
-  gap: 25px;
+  gap: 40px;
   list-style: none;
   color: #fff;
 }
@@ -1682,18 +1688,24 @@ h2 {
 .ux-nav-cta { color: #baff00; }
 
 /* TOGGLE ICON */
+
 .ux-menu {
-  width: 26px;
+  width: unset;
-  height: 26px;
+  height: 30px;
+  /* width: 30px; */
   position: relative;
   cursor: pointer;
+  background: unset;
+  box-shadow: unset;
+  border: unset;
 }
 
-.icon {
+.ux-header-actions .icon {
   position: absolute;
-  width: 100%;
+  width: 20px;
-  height: 100%;
+  height: 19px;
   transition: 0.3s;
+  top: 11px;
 }
 
 .close-icon {
@@ -1811,10 +1823,7 @@ h2 {
   opacity: 1;
   transform: scale(1.05);
   }
-  .ux-navbar img {
+  .ux-navbar img {width: 100%;height: 100%;}
-    width: 100%;
-    height: 100%;
-}
   .ux-footer-left img {
     width: auto;
     height: auto;
@@ -1822,4 +1831,184 @@ h2 {
 .ux-footer-social img {
     width: 19px;
     height: 19px;
+}
+
+.ux-header-actions button {
+  border: none;
+    background: unset;
+}
+.faq-wrapper {
+  max-width: 800px;
+  margin: auto;
+}
+
+.faq-item {
+  border-bottom: 1px solid #e5e5e5;
+  padding: 20px 0;
+}
+
+.faq-question {
+  width: 100%;
+  background: none;
+  border: none;
+  font-size: 20px;
+  font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+}
+
+.faq-icon {
+  font-size: 24px;
+  transition: transform 0.3s ease;
+}
+
+.faq-item.active .faq-icon {
+  transform: rotate(180deg);
+}
+
+.faq-answer {
+  overflow: hidden;
+  transition: max-height 0.4s ease;
+}
+
+.faq-answer p {
+  margin-top: 10px;
+  color: #666;
+  line-height: 1.6;
+}
+
+
+.hero-img-box {
+  border-radius: 18px;
+  overflow: hidden;
+  transition: all 0.4s ease;
+}
+
+.hero-img-box img {
+  width: 100%;
+  height: 370px;
+  object-fit: cover;
+  transition: transform 0.4s ease;
+}
+
+/* Hover effect */
+.hero-img-box:hover img {
+  transform: scale(1.05);
+}
+.who-section {
+  padding: 70px 0;
+}
+.who-section p {font-size: 17px;}
+.who-section .who-muted {
+    opacity: 0.5;
+}
+
+.global-section {
+  background: url(../images/globalout.png);
+  color: #fff;
+  overflow: hidden;
+}
+
+.global-section .small-title {
+  color: #ffffff;
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+
+.global-section .main-heading {
+  font-weight: 600;
+  color: white !important;
+  line-height: 1.3;
+}
+
+.global-section .desc {
+  color: #cbd5e1;
+  font-size: 16px;
+  line-height: 1.7;
+  max-width: 520px;
+  margin-top: 30px !important;
+}
+
+/* Highlight Box */
+.highlight-box {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 20px;
+  border-radius: 12px;
+  border: 1px solid rgb(132 204 22 / 16%);
+  background: rgb(8 8 8 / 8%);
+  color: #a3e635;
+  font-weight: 500;
+}
+
+.highlight-box i {
+  font-size: 18px;
+}
+
+/* Image Styling */
+.image-box img {
+  border-radius: 16px;
+  width: 100%;
+  object-fit: cover;
+}
+
+.working-card {
+  background: #fff;
+  padding: 30px 30px;
+  border-radius: 16px;
+  position: relative;
+  min-height: 270px;
+  border: 1px solid #eee;
+  transition: all 0.3s ease;
+  margin-top: 40px;
+}
+
+.working-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
+}
+
+.working-card .number {
+  font-size: 48px;
+  font-weight: 700;
+  color: #e5e5e5;
+  display: block;
+  margin-bottom: 20px;
+}
+
+.working-card p {
+  font-size: 15px;
+  color: #555;
+  line-height: 1.6;
+}
+.working-section {
+  padding: 80px 0;
+}
+.belief-section{
+  padding: 80px 0;
+  background: #FBFBFB;
+}
+.belief-card  {
+    background: #FFFFFF;
+    border: 1px solid #F3E8E8;
+    backdrop-filter: blur(47px);
+    border-radius: 15px;
+    padding: 30px 24px;
+    min-height: 312px;
+}
+.belief-card h5 {
+    font-weight: 800;
+}
+.belief-card p {
+    margin-top: 60px;
+}
+.belief-card img {
+    margin: 0 0 30px;
+}
+.hero-img-boxup {
+    top: 51px;
+    margin-top: 60px;
 }

public/assets/images/Designabout.svg

@@ -0,0 +1,14 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 0.5H50C55.2467 0.5 59.5 4.7533 59.5 10V50C59.5 55.2467 55.2467 59.5 50 59.5H10C4.7533 59.5 0.5 55.2467 0.5 50V10C0.500001 4.7533 4.7533 0.5 10 0.5Z" fill="white"/>
+<path d="M10 0.5H50C55.2467 0.5 59.5 4.7533 59.5 10V50C59.5 55.2467 55.2467 59.5 50 59.5H10C4.7533 59.5 0.5 55.2467 0.5 50V10C0.500001 4.7533 4.7533 0.5 10 0.5Z" stroke="url(#paint0_linear_1_398)"/>
+<path d="M35.2064 43.3582C34.9391 43.6255 34.5765 43.7757 34.1984 43.7757C33.8204 43.7757 33.4578 43.6255 33.1904 43.3582L30.9292 41.097C30.6619 40.8296 30.5117 40.467 30.5117 40.089C30.5117 39.7109 30.6619 39.3483 30.9292 39.0809L38.8934 31.1167C39.1608 30.8494 39.5234 30.6992 39.9015 30.6992C40.2795 30.6992 40.6421 30.8494 40.9095 31.1167L43.1707 33.3779C43.438 33.6453 43.5882 34.0079 43.5882 34.3859C43.5882 34.764 43.438 35.1266 43.1707 35.3939L35.2064 43.3582Z" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M38.4762 31.5349L36.5158 21.7343C36.4625 21.4676 36.334 21.2218 36.1456 21.0257C35.9571 20.8297 35.7165 20.6917 35.4522 20.6279L17.4249 15.8915C17.1874 15.8341 16.9391 15.8386 16.7039 15.9048C16.4687 15.9709 16.2544 16.0964 16.0817 16.2692C15.9089 16.4419 15.7834 16.6562 15.7173 16.8914C15.6511 17.1266 15.6466 17.3749 15.704 17.6124L20.4404 35.6397C20.5042 35.904 20.6422 36.1446 20.8382 36.3331C21.0343 36.5215 21.2801 36.65 21.5468 36.7033L31.3474 38.6637" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.0938 16.2788L26.4818 26.6669" stroke="#BCEA3E" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M28.496 31.5346C30.0709 31.5346 31.3476 30.2579 31.3476 28.6831C31.3476 27.1082 30.0709 25.8315 28.496 25.8315C26.9212 25.8315 25.6445 27.1082 25.6445 28.6831C25.6445 30.2579 26.9212 31.5346 28.496 31.5346Z" stroke="#BCEA3E" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_1_398" x1="0" y1="0" x2="46.861" y2="65.6061" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BCEA3E"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+</defs>
+</svg>

public/assets/images/Ideasabout.svg

@@ -0,0 +1,13 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="59" height="59" rx="9.5" fill="white"/>
+<rect x="0.5" y="0.5" width="59" height="59" rx="9.5" stroke="url(#paint0_linear_1_388)"/>
+<path d="M31.104 16.1077C30.7325 15.9383 30.329 15.8506 29.9206 15.8506C29.5123 15.8506 29.1088 15.9383 28.7373 16.1077L16.5185 21.6682C16.2655 21.7797 16.0504 21.9625 15.8994 22.1941C15.7484 22.4257 15.668 22.6963 15.668 22.9728C15.668 23.2493 15.7484 23.5198 15.8994 23.7514C16.0504 23.9831 16.2655 24.1658 16.5185 24.2773L28.7515 29.852C29.123 30.0215 29.5266 30.1092 29.9349 30.1092C30.3432 30.1092 30.7468 30.0215 31.1183 29.852L43.3513 24.2916C43.6043 24.18 43.8194 23.9973 43.9704 23.7657C44.1214 23.5341 44.2018 23.2635 44.2018 22.987C44.2018 22.7105 44.1214 22.44 43.9704 22.2083C43.8194 21.9767 43.6043 21.794 43.3513 21.6824L31.104 16.1077Z" stroke="#BCEA3E" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.6641 30.1089C15.6634 30.3816 15.7409 30.6488 15.8875 30.8787C16.0341 31.1087 16.2435 31.2918 16.491 31.4063L28.7525 36.981C29.1221 37.1484 29.5231 37.235 29.9288 37.235C30.3345 37.235 30.7355 37.1484 31.105 36.981L43.338 31.4206C43.5904 31.3072 43.8043 31.1227 43.9537 30.8898C44.1031 30.6569 44.1814 30.3856 44.1792 30.1089" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.6641 37.2378C15.6634 37.5105 15.7409 37.7777 15.8875 38.0076C16.0341 38.2376 16.2435 38.4207 16.491 38.5352L28.7525 44.1099C29.1221 44.2773 29.5231 44.3639 29.9288 44.3639C30.3345 44.3639 30.7355 44.2773 31.105 44.1099L43.338 38.5495C43.5904 38.4361 43.8043 38.2516 43.9537 38.0187C44.1031 37.7858 44.1814 37.5145 44.1792 37.2378" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_1_388" x1="0" y1="0" x2="46.861" y2="65.6061" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BCEA3E"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+</defs>
+</svg>

public/assets/images/Systems.svg

@@ -0,0 +1,13 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 0.5H50C55.2467 0.5 59.5 4.7533 59.5 10V50C59.5 55.2467 55.2467 59.5 50 59.5H10C4.7533 59.5 0.5 55.2467 0.5 50V10C0.500001 4.7533 4.7533 0.5 10 0.5Z" fill="white"/>
+<path d="M10 0.5H50C55.2467 0.5 59.5 4.7533 59.5 10V50C59.5 55.2467 55.2467 59.5 50 59.5H10C4.7533 59.5 0.5 55.2467 0.5 50V10C0.500001 4.7533 4.7533 0.5 10 0.5Z" stroke="url(#paint0_linear_1_430)"/>
+<path d="M41.3277 17.2773H18.5156C17.7282 17.2773 17.0898 17.9157 17.0898 18.7031V25.8319C17.0898 26.6193 17.7282 27.2577 18.5156 27.2577H41.3277C42.1152 27.2577 42.7535 26.6193 42.7535 25.8319V18.7031C42.7535 17.9157 42.1152 17.2773 41.3277 17.2773Z" stroke="#BCEA3E" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M28.4959 32.9604H18.5156C17.7282 32.9604 17.0898 33.5988 17.0898 34.3862V41.515C17.0898 42.3024 17.7282 42.9408 18.5156 42.9408H28.4959C29.2833 42.9408 29.9217 42.3024 29.9217 41.515V34.3862C29.9217 33.5988 29.2833 32.9604 28.4959 32.9604Z" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M41.328 32.9604H37.0508C36.2633 32.9604 35.625 33.5988 35.625 34.3862V41.515C35.625 42.3024 36.2633 42.9408 37.0508 42.9408H41.328C42.1155 42.9408 42.7538 42.3024 42.7538 41.515V34.3862C42.7538 33.5988 42.1155 32.9604 41.328 32.9604Z" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_1_430" x1="0" y1="0" x2="46.861" y2="65.6061" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BCEA3E"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+</defs>
+</svg>

public/assets/images/buildaboiticon.svg

@@ -0,0 +1,5 @@
+<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.2713 26.1627C20.8392 26.1627 26.1636 20.8383 26.1636 14.2703C26.1636 7.70232 20.8392 2.37793 14.2713 2.37793C7.7033 2.37793 2.37891 7.70232 2.37891 14.2703C2.37891 20.8383 7.7033 26.1627 14.2713 26.1627Z" stroke="#C4F022" stroke-width="2.37847" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.2687 2.37793C11.215 5.58429 9.51172 9.84246 9.51172 14.2703C9.51172 18.6981 11.215 22.9563 14.2687 26.1627C17.3223 22.9563 19.0256 18.6981 19.0256 14.2703C19.0256 9.84246 17.3223 5.58429 14.2687 2.37793Z" stroke="#C4F022" stroke-width="2.37847" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.37891 14.2705H26.1636" stroke="#C4F022" stroke-width="2.37847" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/assets/images/leverage.svg

@@ -0,0 +1,23 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="59" height="59" rx="9.5" stroke="url(#paint0_linear_1_409)"/>
+<path d="M29.9219 41.5151V44.3667" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M29.9219 15.8516V18.7031" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M37.0508 41.5151V44.3667" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M37.0508 15.8516V18.7031" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.6641 30.1089H18.5156" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.6641 37.2378H18.5156" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.6641 22.9805H18.5156" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M41.3281 30.1089H44.1796" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M41.3281 37.2378H44.1796" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M41.3281 22.9805H44.1796" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.793 41.5151V44.3667" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.793 15.8516V18.7031" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M38.4762 18.7031H21.3671C19.7923 18.7031 18.5156 19.9798 18.5156 21.5546V38.6637C18.5156 40.2386 19.7923 41.5153 21.3671 41.5153H38.4762C40.0511 41.5153 41.3278 40.2386 41.3278 38.6637V21.5546C41.3278 19.9798 40.0511 18.7031 38.4762 18.7031Z" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M34.1991 24.4058H25.6445C24.8571 24.4058 24.2188 25.0441 24.2188 25.8315V34.3861C24.2188 35.1735 24.8571 35.8118 25.6445 35.8118H34.1991C34.9865 35.8118 35.6248 35.1735 35.6248 34.3861V25.8315C35.6248 25.0441 34.9865 24.4058 34.1991 24.4058Z" stroke="black" stroke-width="2.85152" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_1_409" x1="0" y1="0" x2="46.861" y2="65.6061" gradientUnits="userSpaceOnUse">
+<stop/>
+<stop offset="1" stop-color="#BCEA3E"/>
+</linearGradient>
+</defs>
+</svg>