Added AOS animation to all pages
This commit is contained in:
@@ -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.
|
||||
|
||||
Reference in New Issue
Block a user