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
+24 -24
View File
@@ -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 polishthey 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>