Added AOS animation to all pages

app/about/page.tsx

@@ -39,7 +39,7 @@ export default function About() {
         data-aos="fade-up"
         data-aos-delay="120"
       >
-        AAideA is a boutique systems-led creative studio for operators who need
+        AAideA is a boutique systems-led creative studio for operators who need <br />
         more than aesthetic polish—they need scalable execution.
       </p>
     </div>
@@ -47,19 +47,19 @@ export default function About() {
     {/* 🔥 IMAGE ROW */}
     <div className="hero-images row justify-content-center mt-5 g-4">
 
-      <div className="col-lg-4 col-md-6">
+      <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">
+      <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">
+      <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>
@@ -74,8 +74,8 @@ export default function About() {
       <section className="philosophy-section py-5">
         <div className="container">
           <div className="row align-items-center g-5">
-            
+
-            <div className="col-lg-6">
+            <div className="col-lg-6" data-aos="fade-right" data-aos-duration="1000">
               <div className="image-box">
                 <img
                   src="assets/images/intersection.png"
@@ -85,7 +85,7 @@ export default function About() {
               </div>
             </div>
 
-            <div className="col-lg-6">
+            <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">
@@ -111,19 +111,19 @@ export default function About() {
       {/* ✅ BELIEF SECTION (ADDED HERE) */}
       <section className="belief-section">
         <div className="container">
-          <h2 className="section-title mb-5">What We Believe</h2>
+          <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}>
+              <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" 
+            src="assets/images/Ideasabout.svg"
             alt="Global"
             className="img-fluid"
-          />  
+          />
                   </div>
 
                   <h5>{item.title}</h5>
@@ -137,7 +137,7 @@ export default function About() {
       </section>
       <section className="working-section">
   <div className="container">
-  <div className="displayflexhead" style={{ width: "100%" }}>
+  <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">
@@ -148,7 +148,7 @@ export default function About() {
     <div className="row g-4">
 
       {/* CARD 1 */}
-      <div className="col-lg-4">
+      <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>
@@ -160,7 +160,7 @@ export default function About() {
       </div>
 
       {/* CARD 2 */}
-      <div className="col-lg-4">
+      <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>
@@ -172,7 +172,7 @@ export default function About() {
       </div>
 
       {/* CARD 3 */}
-      <div className="col-lg-4">
+      <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>
@@ -191,7 +191,7 @@ export default function About() {
     <div className="row align-items-center g-5">
 
       {/* LEFT CONTENT */}
-      <div className="col-lg-6">
+      <div className="col-lg-6" data-aos="fade-right" data-aos-duration="1000">
 
         <p className="small-title">Global Outlook</p>
 
@@ -206,10 +206,10 @@ export default function About() {
         </p>
 
         <div className="highlight-box mt-4">
-        
+
           <span>
           <img
-            src="assets/images/buildaboiticon.svg" 
+            src="assets/images/buildaboiticon.svg"
             alt="Global"
             className="img-fluid"
           />    Remote-first. Timezone-flexible. Outcome-focused.
@@ -219,10 +219,10 @@ export default function About() {
       </div>
 
       {/* RIGHT IMAGE */}
-      <div className="col-lg-6">
+      <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" 
+            src="assets/images/decision.png"
             alt="Global"
             className="img-fluid"
           />
@@ -238,10 +238,10 @@ export default function About() {
     <div className="row align-items-center g-5">
 
       {/* LEFT IMAGE */}
-      <div className="col-lg-6">
+      <div className="col-lg-6" data-aos="fade-right" data-aos-duration="1000">
         <div className="who-image">
           <img
-            src="assets/images/Whoabout.png" 
+            src="assets/images/Whoabout.png"
             alt="Team"
             className="img-fluid"
           />
@@ -249,7 +249,7 @@ export default function About() {
       </div>
 
       {/* RIGHT CONTENT */}
-      <div className="col-lg-6">
+      <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>
 

app/ai_powered/page.tsx

@@ -7,15 +7,15 @@ 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">
         <Link href="/start_project" className="btn ux-btn-primary">
           Start a Project{" "}
           <span className="ux-btn-icon">
@@ -28,7 +28,7 @@ export default function AiPowered() {
       </div>
       <div className="row align-items-center g-5 ux-growth-section">
         {/* Left Content */}
-        <div className="col-lg-8">
+        <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>
@@ -49,7 +49,7 @@ export default function AiPowered() {
           <p className="ux-growth-bottom">Growth requires velocity.</p>
         </div>
         {/* Right Image */}
-        <div className="col-lg-4">
+        <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"
@@ -63,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>
@@ -77,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">
@@ -90,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">
@@ -106,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">
@@ -123,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 />
@@ -170,7 +170,7 @@ 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.

app/brand-architecture/page.tsx

@@ -7,13 +7,13 @@ 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">
               <Link href="/start_project" className="btn ux-btn-primary">
                 Start a Project{" "}
                 <span className="ux-btn-icon">
@@ -26,7 +26,7 @@ export default function Brandarchiture() {
             </div>
             <div className="row align-items-center g-5 ux-growth-section">
               {/* Left Content */}
-              <div className="col-lg-8">
+              <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
@@ -51,7 +51,7 @@ export default function Brandarchiture() {
                 </p>
               </div>
               {/* Right Image */}
-              <div className="col-lg-4">
+              <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>
@@ -62,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.
@@ -77,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">
@@ -90,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">
@@ -106,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">
@@ -125,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 />
@@ -176,7 +176,7 @@ 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.

app/brand-build/page.tsx

@@ -7,13 +7,13 @@ 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">
               <Link href="/start_project" className="btn ux-btn-primary">
                 Start a Project{" "}
                 <span className="ux-btn-icon">
@@ -26,7 +26,7 @@ export default function brand_build() {
             </div>
             <div className="row align-items-center g-5 ux-growth-section">
               {/* Left Content */}
-              <div className="col-lg-8">
+              <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
@@ -51,7 +51,7 @@ export default function brand_build() {
                 </p>
               </div>
               {/* Right Image */}
-              <div className="col-lg-4">
+              <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>
@@ -62,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.
@@ -77,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">
@@ -90,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">
@@ -106,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">
@@ -125,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 />
@@ -176,7 +176,7 @@ 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.

app/campaign_strategy/page.tsx

@@ -7,13 +7,13 @@ 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">
         <Link href="/start_project" className="btn ux-btn-primary">
           Start a Project{" "}
           <span className="ux-btn-icon">
@@ -26,7 +26,7 @@ export default function Campaign() {
       </div>
       <div className="row align-items-center g-5 ux-growth-section">
         {/* Left Content */}
-        <div className="col-lg-8">
+        <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
@@ -51,7 +51,7 @@ export default function Campaign() {
           </p>
         </div>
         {/* Right Image */}
-        <div className="col-lg-4">
+        <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>
@@ -62,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>
@@ -76,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">
@@ -92,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">
@@ -108,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">
@@ -125,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 />
@@ -172,7 +172,7 @@ 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.

app/components/Header.tsx

@@ -37,7 +37,6 @@ export default function Header() {
               <li><Link href="/services" onClick={closeAll}>Services</Link></li>
               <li><Link href="/about" onClick={closeAll}>About</Link></li>
               <li><Link href="/process" onClick={closeAll}>Process</Link></li>
-              <li><Link href="/contact" onClick={closeAll}>Contact</Link></li>
 
               <li className="ux-nav-cta">
                 <Link href="/start_project" onClick={closeAll}>Start a Project</Link>

app/contact/page.tsx

@@ -6,11 +6,11 @@ export default function Contact() {
       <section className="ux-project-hero">
         <div className="container">
           <div className="ux-project-content text-center">
-            <h1 className="ux-project-title">Get in touch.</h1>
+            <h1 className="ux-project-title" data-aos="fade-up" data-aos-duration="1000">Get in touch.</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 about your project. We respond within one business day.
             </p>
-            <div className="ux-breadcrumb-wrap">
+            <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>
@@ -23,25 +23,25 @@ export default function Contact() {
         <div className="container">
           <div className="row">
             <div className="col-lg-9 mx-auto">
-              <h4 className="ux-card-title">Email</h4>
+              <h4 className="ux-card-title" data-aos="fade-up" data-aos-duration="900">Email</h4>
-              <p className="ux-card-text">
+              <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">Office</h4>
+              <h4 className="ux-card-title mt-5" data-aos="fade-up" data-aos-duration="900">Office</h4>
-              <p className="ux-card-text">
+              <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">Start a project</h4>
+              <h4 className="ux-card-title mt-5" data-aos="fade-up" data-aos-duration="900">Start a project</h4>
-              <p className="ux-card-text">
+              <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">Other resources</h4>
+              <h4 className="ux-card-title mt-5" data-aos="fade-up" data-aos-duration="900">Other resources</h4>
-              <p className="ux-card-text">
+              <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>.

app/content_motion/page.tsx

@@ -7,14 +7,14 @@ 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">
           <Link href="/start_project" className="btn ux-btn-primary">
             Start a Project{" "}
             <span className="ux-btn-icon">
@@ -27,7 +27,7 @@ export default function Content() {
         </div>
         <div className="row align-items-center g-5 ux-growth-section">
           {/* Left Content */}
-          <div className="col-lg-8">
+          <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>
@@ -50,7 +50,7 @@ export default function Content() {
             </p>
           </div>
           {/* Right Image */}
-          <div className="col-lg-4">
+          <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>
@@ -61,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>
@@ -75,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">
@@ -88,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">
@@ -101,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">
@@ -121,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 />
@@ -168,7 +168,7 @@ 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.

app/digital_platform/page.tsx

@@ -7,15 +7,15 @@ 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">
               <Link href="/start_project" className="btn ux-btn-primary">
                 Start a Project{" "}
                 <span className="ux-btn-icon">
@@ -28,7 +28,7 @@ export default function Digital() {
             </div>
             <div className="row align-items-center g-5 ux-growth-section">
               {/* Left Content */}
-              <div className="col-lg-8">
+              <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">
@@ -57,7 +57,7 @@ export default function Digital() {
                 </p>
               </div>
               {/* Right Image */}
-              <div className="col-lg-4">
+              <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>
@@ -71,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.
@@ -79,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>
@@ -87,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">
@@ -103,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">
@@ -119,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">
@@ -139,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 />
@@ -190,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>
@@ -241,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>
@@ -250,7 +250,7 @@ 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.

app/faq/page.tsx

@@ -52,8 +52,8 @@ export default function FAQ() {
       {/* HERO */}
       <section className="ux-project-hero">
         <div className="container text-center">
-          <h1 className="ux-project-title">Frequently Asked Questions</h1>
+          <h1 className="ux-project-title" data-aos="fade-up" data-aos-duration="1000">Frequently Asked Questions</h1>
-          <p className="ux-project-subtitle">
+          <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>
@@ -68,6 +68,9 @@ export default function FAQ() {
               <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"

app/hvac/page.tsx

@@ -7,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
@@ -33,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>
@@ -78,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">
@@ -90,11 +90,11 @@ 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
@@ -110,7 +110,7 @@ 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.

app/linkedin_uppro/page.tsx

@@ -7,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.
@@ -31,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>
@@ -76,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">
@@ -87,11 +87,11 @@ 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
@@ -107,7 +107,7 @@ 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.

app/page.tsx

@@ -11,17 +11,17 @@ 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">
               <Link href="/start_project" className="btn ux-btn-primary">
                 Start a Project{" "}
                 <span className="ux-btn-icon">
@@ -37,13 +37,13 @@ export default function HomePage() {
         {/* 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,19 +112,19 @@ 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
@@ -138,7 +138,7 @@ export default function HomePage() {
             </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">
@@ -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,13 +509,13 @@ 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>
-          <Link href="/process" 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="" />
@@ -525,7 +525,7 @@ export default function HomePage() {
         {/* 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,7 +574,7 @@ 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.

app/privacy/page.tsx

@@ -6,11 +6,11 @@ export default function Privacy() {
       <section className="ux-project-hero">
         <div className="container">
           <div className="ux-project-content text-center">
-            <h1 className="ux-project-title">Privacy Policy.</h1>
+            <h1 className="ux-project-title" data-aos="fade-up" data-aos-duration="1000">Privacy Policy.</h1>
-            <p className="ux-project-subtitle">
+            <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>
@@ -19,25 +19,25 @@ export default function Privacy() {
         <div className="container">
           <div className="row">
             <div className="col-lg-9 mx-auto">
-              <h2 className="ux-main-heading mb-4">Information We Collect</h2>
+              <h2 className="ux-main-heading mb-4" data-aos="fade-up" data-aos-duration="900">Information We Collect</h2>
-              <p className="ux-card-text">
+              <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">How We Use It</h4>
+              <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">
+              <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">Cookies</h4>
+              <h4 className="ux-card-title mt-5" data-aos="fade-up" data-aos-duration="900">Cookies</h4>
-              <p className="ux-card-text">
+              <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">Contact</h4>
+              <h4 className="ux-card-title mt-5" data-aos="fade-up" data-aos-duration="900">Contact</h4>
-              <p className="ux-card-text">
+              <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>

app/process/page.tsx

@@ -8,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>
@@ -20,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>
@@ -30,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
@@ -43,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
@@ -51,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
@@ -61,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>
@@ -71,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
@@ -84,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
@@ -102,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>
@@ -110,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
@@ -123,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
@@ -145,7 +145,7 @@ 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.

app/services/page.tsx

@@ -6,17 +6,17 @@ 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">
         <Link href="/digital_platform" className="btn ux-btn-primary">
           View Digital Platforms
           <span className="ux-btn-icon">
@@ -32,7 +32,7 @@ export default function Services() {
   <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

@@ -63,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="" />
@@ -90,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
@@ -118,7 +118,7 @@ export default function Start() {
                 </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">
@@ -243,7 +243,7 @@ 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.

app/terms/page.tsx

@@ -6,11 +6,11 @@ export default function Terms() {
       <section className="ux-project-hero">
         <div className="container">
           <div className="ux-project-content text-center">
-            <h1 className="ux-project-title">Terms &amp; Conditions.</h1>
+            <h1 className="ux-project-title" data-aos="fade-up" data-aos-duration="1000">Terms &amp; Conditions.</h1>
-            <p className="ux-project-subtitle">
+            <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>
@@ -19,33 +19,33 @@ export default function Terms() {
         <div className="container">
           <div className="row">
             <div className="col-lg-9 mx-auto">
-              <h2 className="ux-main-heading mb-4">Acceptance of Terms</h2>
+              <h2 className="ux-main-heading mb-4" data-aos="fade-up" data-aos-duration="900">Acceptance of Terms</h2>
-              <p className="ux-card-text">
+              <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">Use of Content</h4>
+              <h4 className="ux-card-title mt-5" data-aos="fade-up" data-aos-duration="900">Use of Content</h4>
-              <p className="ux-card-text">
+              <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">Engagements</h4>
+              <h4 className="ux-card-title mt-5" data-aos="fade-up" data-aos-duration="900">Engagements</h4>
-              <p className="ux-card-text">
+              <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">Privacy</h4>
+              <h4 className="ux-card-title mt-5" data-aos="fade-up" data-aos-duration="900">Privacy</h4>
-              <p className="ux-card-text">
+              <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">Contact</h4>
+              <h4 className="ux-card-title mt-5" data-aos="fade-up" data-aos-duration="900">Contact</h4>
-              <p className="ux-card-text">
+              <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>

app/work/page.tsx

@@ -7,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="" />
@@ -34,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"
@@ -91,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"
@@ -148,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"
@@ -210,7 +210,7 @@ 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.

public/assets/css/style.css

@@ -1677,7 +1677,7 @@ h2 {
 
 .ux-nav {
   display: flex;
-  gap: 25px;
+  gap: 40px;
   list-style: none;
   color: #fff;
 }