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
+32 -32
View File
@@ -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>
<p className="subtitle">
<h2 data-aos="fade-up" data-aos-duration="1000">How We Work</h2>
<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.