Added AOS animation to all pages

This commit is contained in:
2026-05-07 19:31:11 +05:30
parent 8a517c1673
commit f8725ababa
20 changed files with 312 additions and 310 deletions
+18 -18
View File
@@ -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>
<p className="ux-project-subtitle">
<h1 className="ux-project-title" data-aos="fade-up" data-aos-duration="1000">Structured Execution.</h1>
<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.