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,12 +7,12 @@ export default function Hvac() {
<div className="container">
{/* center content */}
<div className="ux-project-content text-center">
<h1 className="ux-project-title">HVAC</h1>
<p className="ux-project-subtitle">
<h1 className="ux-project-title" data-aos="fade-up" data-aos-duration="1000">HVAC</h1>
<p className="ux-project-subtitle" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
Legacy reputation. Fragmented digital presence.
</p>
</div>
<div className="breacampoffline">
<div className="breacampoffline" data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000">
<p style={{ textAlign: "right" }}>
HVAC operated with strong offline credibility but weak digital
structure. Leads were inconsistent. Messaging lacked positioning
@@ -33,42 +33,42 @@ export default function Hvac() {
{/* 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>Clear positioning 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>Structured service segmentation</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>Conversion-led landing framework</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>Content packaging system</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>Rapidly test messaging variations</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>Produce scaled content formats</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>Optimize landing copy iterations</p>
</div>
@@ -78,7 +78,7 @@ export default function Hvac() {
{/* 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">
@@ -90,11 +90,11 @@ export default function Hvac() {
</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>
Clear digital authority. Improved lead capture flow. Scalable
@@ -110,7 +110,7 @@ export default function Hvac() {
{/* 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.