Goutam/Aaidea
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added AOS animation to all pages

Browse Source
This commit is contained in:
Goutam
2026-05-07 19:31:11 +05:30
parent 8a517c1673
commit f8725ababa
20 changed files with 312 additions and 310 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/services/page.tsx
+21 -21
View File
@@ -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>
<p className="subtitle">
<h2 data-aos="fade-up" data-aos-duration="1000">How Everything Connects</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>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>