196 lines
7.7 KiB
TypeScript
196 lines
7.7 KiB
TypeScript
import Link from "next/link";
|
||
export default function Services() {
|
||
return (
|
||
<>
|
||
<section className="ux-project-hero">
|
||
<div className="container">
|
||
{/* center content */}
|
||
<div className="ux-project-content text-center">
|
||
<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" 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" 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">
|
||
<img src="assets/images/arrowbuttonwhite.svg" alt="" />
|
||
</span>
|
||
</Link>
|
||
<Link href="/brand-architecture" className="btn ux-btn-secondary">
|
||
Explore Brand Systems →
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section className="systems-section">
|
||
<div className="container systems-wrapper">
|
||
{/* LEFT (STICKY) */}
|
||
<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">
|
||
We don’t just deliver assets. We build interlocked systems designed to
|
||
scale your operations and revenue.
|
||
</p>
|
||
</div>
|
||
{/* RIGHT (CARDS) */}
|
||
<div className="systems-right">
|
||
{/* CARD 1 */}
|
||
<div className="system-card light" data-aos="fade-up" data-aos-duration="1000">
|
||
<img src="assets/images/Digital.svg" alt="" />
|
||
<h4>Digital Platforms & Experience Architecture</h4>
|
||
<p>
|
||
We design and build high-performance digital platforms structured
|
||
for conversion, scale, and integration.
|
||
</p>
|
||
<span>Includes:</span>
|
||
<ul>
|
||
<li>UX architecture</li>
|
||
<li>Scalable CMS builds</li>
|
||
<li>SaaS integrations</li>
|
||
<li>Conversion systems</li>
|
||
</ul>
|
||
<Link href="/digital_platform">
|
||
View Digital Platforms →
|
||
</Link>
|
||
</div>
|
||
{/* CARD 2 (DARK) */}
|
||
<div className="system-card dark" data-aos="fade-up" data-aos-duration="1000">
|
||
<img src="assets/images/Brand.svg" alt="" />
|
||
<h4>Brand Architecture & Identity Systems</h4>
|
||
<p>
|
||
We design brands as structured systems — from positioning to
|
||
scalable visual identity.
|
||
</p>
|
||
<span>Includes:</span>
|
||
<ul>
|
||
<li>Positioning</li>
|
||
<li>Messaging frameworks</li>
|
||
<li>Identity design</li>
|
||
<li>Brand guidelines</li>
|
||
</ul>
|
||
<Link href="/brand_architecture">
|
||
Explore Brand Systems →
|
||
</Link>
|
||
</div>
|
||
{/* CARD 3 */}
|
||
<div className="system-card light" data-aos="fade-up" data-aos-duration="1000">
|
||
<img src="assets/images/Campaign.svg" alt="" />
|
||
<h4>Campaign Strategy & Performance Systems</h4>
|
||
<p>Campaign thinking engineered for measurable growth, not noise.</p>
|
||
<span>Includes:</span>
|
||
<ul>
|
||
<li>Campaign architecture</li>
|
||
<li>Creative direction</li>
|
||
<li>Performance funnel systems</li>
|
||
<li>Paid creative frameworks</li>
|
||
</ul>
|
||
<Link href="/campaign_strategy">View Platform Systems →</Link>
|
||
</div>
|
||
{/* CARD 4 (DARK) */}
|
||
<div className="system-card dark" data-aos="fade-up" data-aos-duration="1000">
|
||
<img src="assets/images/Content.svg" alt="" />
|
||
<h4>Content, Motion & Story Systems</h4>
|
||
<p>
|
||
Narrative-driven content structured to build consistency and
|
||
velocity.
|
||
</p>
|
||
<span>Includes:</span>
|
||
<ul>
|
||
<li>Video systems</li>
|
||
<li>Motion design</li>
|
||
<li>Social content engines</li>
|
||
<li>Editorial frameworks</li>
|
||
</ul>
|
||
<Link href="/content_motion">View Platform Systems →</Link>
|
||
</div>
|
||
{/* CARD 5 (GREEN) */}
|
||
<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 & Automation</h4>
|
||
<p>
|
||
We integrate intelligent workflows to increase speed, scale, and
|
||
precision.
|
||
</p>
|
||
<span>Includes:</span>
|
||
<ul>
|
||
<li>Automation frameworks</li>
|
||
<li>AI-assisted production</li>
|
||
<li>Workflow optimization</li>
|
||
<li>Toolchain integration</li>
|
||
</ul>
|
||
<Link href="/ai_powered">View Platform Systems →</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section className="connect-section">
|
||
<div className="container">
|
||
{/* HEADING */}
|
||
<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" 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" data-aos="fade-right" data-aos-delay="200" data-aos-duration="900">
|
||
<img src="assets/images/Everything.svg" alt="" />
|
||
</div>
|
||
<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" data-aos="fade-right" data-aos-delay="400" data-aos-duration="900">
|
||
<img src="assets/images/Everything.svg" alt="" />
|
||
</div>
|
||
<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" data-aos="fade-right" data-aos-delay="600" data-aos-duration="900">
|
||
<img src="assets/images/Everything.svg" alt="" />
|
||
</div>
|
||
<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" data-aos="fade-right" data-aos-delay="800" data-aos-duration="900">
|
||
<img src="assets/images/Everything.svg" alt="" />
|
||
</div>
|
||
<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>
|
||
<span>Automation</span>
|
||
</div>
|
||
</div>
|
||
{/* 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>
|
||
</section>
|
||
</>
|
||
|
||
);
|
||
} |