Initial commit
This commit is contained in:
@@ -0,0 +1,196 @@
|
||||
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">
|
||||
We Don't Offer Services. <br />
|
||||
We Build Systems.
|
||||
</h1>
|
||||
<p className="ux-project-subtitle">
|
||||
Each vertical is designed to scale brands, revenue, and operations —{" "}
|
||||
<br />
|
||||
not just deliver assets.
|
||||
</p>
|
||||
</div>
|
||||
<div className="ux-hero-actions">
|
||||
<a href="#" className="btn ux-btn-primary">
|
||||
View Digital Platforms
|
||||
<span className="ux-btn-icon">
|
||||
<img src="assets/images/arrowbuttonwhite.svg" alt="" />
|
||||
</span>
|
||||
</a>
|
||||
<a href="#" className="btn ux-btn-secondary">
|
||||
Explore Brand Systems →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="systems-section">
|
||||
<div className="container systems-wrapper">
|
||||
{/* LEFT (STICKY) */}
|
||||
<div className="systems-left">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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>How Everything Connects</h2>
|
||||
<p className="subtitle">
|
||||
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="icon">
|
||||
<img src="assets/images/Brand1.png" alt="" />
|
||||
</div>
|
||||
<span>Brand</span>
|
||||
</div>
|
||||
<div className="arrow">
|
||||
<img src="assets/images/Everything.svg" alt="" />
|
||||
</div>
|
||||
<div className="flow-item">
|
||||
<div className="icon">
|
||||
<img src="assets/images/Platform.svg" alt="" />
|
||||
</div>
|
||||
<span>Platform</span>
|
||||
</div>
|
||||
<div className="arrow">
|
||||
<img src="assets/images/Everything.svg" alt="" />
|
||||
</div>
|
||||
<div className="flow-item">
|
||||
<div className="icon">
|
||||
<img src="assets/images/Campaign1.svg" alt="" />
|
||||
</div>
|
||||
<span>Campaign</span>
|
||||
</div>
|
||||
<div className="arrow">
|
||||
<img src="assets/images/Everything.svg" alt="" />
|
||||
</div>
|
||||
<div className="flow-item">
|
||||
<div className="icon">
|
||||
<img src="assets/images/content1.svg" alt="" />
|
||||
</div>
|
||||
<span>Content</span>
|
||||
</div>
|
||||
<div className="arrow">
|
||||
<img src="assets/images/Everything.svg" alt="" />
|
||||
</div>
|
||||
<div className="flow-item">
|
||||
<div className="icon">
|
||||
<img src="assets/images/Automation.png" alt="" />
|
||||
</div>
|
||||
<span>Automation</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* BOTTOM TEXT */}
|
||||
<p className="bottom-text">
|
||||
Our systems are designed to interlock. Each strengthens the next.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user