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
+16 -16
View File
@@ -7,10 +7,10 @@ export default function linkedin_uppro() {
<div className="container">
{/* center content */}
<div className="ux-project-content text-center">
<h1 className="ux-project-title">LynkedUp Pro</h1>
<p className="ux-project-subtitle">Trust vs. Scale.</p>
<h1 className="ux-project-title" data-aos="fade-up" data-aos-duration="1000">LynkedUp Pro</h1>
<p className="ux-project-subtitle" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">Trust vs. Scale.</p>
</div>
<div className="breacampoffline">
<div className="breacampoffline" data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000">
<p style={{ textAlign: "right" }}>
The market lacked a structured bridge between vetted talent and field
execution. Trust and scale needed to coexist.
@@ -31,42 +31,42 @@ export default function linkedin_uppro() {
{/* TOP BOX */}
<div className="ux-result-box">
{/* LEFT */}
<div className="ux-result-left">
<div className="ux-result-left" data-aos="fade-right" data-aos-duration="1000">
<p className="ux-step-label">Amplify</p>
<h3 className="ux-result-heading">WE BUILT:</h3>
<div className="ux-build-grid">
<div className="ux-mini-card active">
<div className="ux-mini-card active" data-aos="fade-up" data-aos-delay="100" data-aos-duration="900">
<span>01</span>
<p>Product UX architecture</p>
</div>
<div className="ux-mini-card active">
<div className="ux-mini-card active" data-aos="fade-up" data-aos-delay="200" data-aos-duration="900">
<span>02</span>
<p>Modular UI system</p>
</div>
<div className="ux-mini-card active">
<div className="ux-mini-card active" data-aos="fade-up" data-aos-delay="300" data-aos-duration="900">
<span>03</span>
<p>Marketing website</p>
</div>
<div className="ux-mini-card active">
<div className="ux-mini-card active" data-aos="fade-up" data-aos-delay="400" data-aos-duration="900">
<span>04</span>
<p>Onboarding flows</p>
</div>
</div>
</div>
{/* RIGHT */}
<div className="ux-result-right">
<div className="ux-result-right" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
<p className="ux-step-label">Amplify</p>
<h3 className="ux-result-heading">AI WAS USED TO:</h3>
<div className="ux-ai-grid">
<div className="ux-mini-card">
<div className="ux-mini-card" data-aos="fade-up" data-aos-delay="200" data-aos-duration="900">
<span>01</span>
<p>UI variation testing</p>
</div>
<div className="ux-mini-card">
<div className="ux-mini-card" data-aos="fade-up" data-aos-delay="300" data-aos-duration="900">
<span>02</span>
<p>Content system expansion</p>
</div>
<div className="ux-mini-card">
<div className="ux-mini-card" data-aos="fade-up" data-aos-delay="400" data-aos-duration="900">
<span>03</span>
<p>Workflow acceleration</p>
</div>
@@ -76,7 +76,7 @@ export default function linkedin_uppro() {
{/* BOTTOM BOX */}
<div className="ux-deliver-box">
{/* LEFT */}
<div className="ux-deliver-left">
<div className="ux-deliver-left" data-aos="fade-right" data-aos-duration="1000">
<p className="ux-step-label">Activate</p>
<h3 className="ux-result-heading">DELIVERED:</h3>
<ul className="ux-deliver-list">
@@ -87,11 +87,11 @@ export default function linkedin_uppro() {
</ul>
</div>
{/* CENTER */}
<div className="ux-deliver-center">
<div className="ux-deliver-center" data-aos="zoom-in" data-aos-delay="200" data-aos-duration="1000">
<img src="assets/images/Delivered.png" alt="" />
</div>
{/* RIGHT */}
<div className="ux-deliver-right">
<div className="ux-deliver-right" data-aos="fade-left" data-aos-delay="300" data-aos-duration="1000">
<h3 className="ux-result-heading">RESULT: </h3>
<p>
Professional-grade platform. Structured user journey. Scalable
@@ -107,7 +107,7 @@ export default function linkedin_uppro() {
{/* 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.