270 lines
10 KiB
TypeScript
270 lines
10 KiB
TypeScript
export default function Digital() {
|
|
return (
|
|
<>
|
|
<section className="ux-project-hero ux-project-heropad">
|
|
<div className="container">
|
|
{/* center content */}
|
|
<div className="ux-project-content text-center">
|
|
<h1 className="ux-project-title">
|
|
Digital Platforms Built <br /> to Scale
|
|
</h1>
|
|
<p className="ux-project-subtitle">
|
|
Web architecture designed for growth, integration, and performance —
|
|
not just design awards.
|
|
</p>
|
|
</div>
|
|
<div className="ux-hero-actions">
|
|
<a href="#" className="btn ux-btn-primary">
|
|
Start a Project{" "}
|
|
<span className="ux-btn-icon">
|
|
<img src="assets/images/arrowbuttonwhite.svg" alt="" />
|
|
</span>
|
|
</a>
|
|
<a href="#" className="btn ux-btn-secondary">
|
|
View Case Studies
|
|
</a>
|
|
</div>
|
|
<div className="row align-items-center g-5 ux-growth-section">
|
|
{/* Left Content */}
|
|
<div className="col-lg-7">
|
|
<span className="ux-growth-label">Philosophy</span>
|
|
<h2 className="ux-growth-title">Most Websites Break Under Growth</h2>
|
|
<p className="ux-growth-subtitle">
|
|
Most websites look polished at launch — and collapse under growth.
|
|
</p>
|
|
<p className="ux-growth-small">They aren't structured for:</p>
|
|
<div className="row">
|
|
<div className="col-md-6">
|
|
<ul className="ux-growth-list">
|
|
<li>Traffic spikes</li>
|
|
<li>Campaign scale</li>
|
|
<li>Data flow</li>
|
|
</ul>
|
|
</div>
|
|
<div className="col-md-6">
|
|
<ul className="ux-growth-list">
|
|
<li>CRM integrations</li>
|
|
<li>Multi-region expansion</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<p className="ux-growth-bottom">
|
|
Design without architecture becomes technical debt.
|
|
<br />
|
|
Growth exposes weak foundations.
|
|
</p>
|
|
</div>
|
|
{/* Right Image */}
|
|
<div className="col-lg-5">
|
|
<div className="ux-growth-image-box">
|
|
<img src="assets/images/Philosophy.png" alt="UI Design" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/* ===========================
|
|
APPROACH SECTION
|
|
=========================== */}
|
|
<section className="ux-approach-section">
|
|
<div className="container">
|
|
<div className="row align-items-end mb-3">
|
|
<div className="col-lg-6">
|
|
<span className="ux-label">Our Approach</span>
|
|
<h2 className="ux-section-title">
|
|
We don't design pages.
|
|
<br />
|
|
We design digital infrastructure.
|
|
</h2>
|
|
</div>
|
|
<div className="col-lg-6 text-lg-end mt-4 mt-lg-0">
|
|
<p className="ux-section-desc">
|
|
The Result Is A Platform That Evolves With The Business.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="row g-4">
|
|
{/* Card 1 */}
|
|
<div className="col-lg-4 col-md-6">
|
|
<div className="ux-card">
|
|
<div className="ux-card-top">
|
|
<span className="ux-icon">
|
|
<img src="assets/images/Architecture.svg" alt="" />
|
|
</span>
|
|
<span className="ux-num">01</span>
|
|
</div>
|
|
<h4>Architecture First</h4>
|
|
<p>
|
|
We map user journeys, conversion paths, and information
|
|
hierarchies before visual design begins.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{/* Card 2 */}
|
|
<div className="col-lg-4 col-md-6">
|
|
<div className="ux-card">
|
|
<div className="ux-card-top">
|
|
<span className="ux-icon">
|
|
<img src="assets/images/Built.svg" alt="" />
|
|
</span>
|
|
<span className="ux-num">02</span>
|
|
</div>
|
|
<h4>Built for Integration</h4>
|
|
<p>
|
|
CRM, automation, analytics, payment systems — all planned into the
|
|
structure.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{/* Card 3 */}
|
|
<div className="col-lg-4 col-md-6">
|
|
<div className="ux-card">
|
|
<div className="ux-card-top">
|
|
<span className="ux-icon">
|
|
<img src="assets/images/Designed.svg" alt="" />
|
|
</span>
|
|
<span className="ux-num">03</span>
|
|
</div>
|
|
<h4>Designed for Scale</h4>
|
|
<p>Modular components, flexible CMS logic, multi-site readiness.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/* ===========================
|
|
DELIVER SECTION
|
|
=========================== */}
|
|
<section className="ux-deliver-section">
|
|
<div className="container">
|
|
<h2 className="ux-deliver-title">What We Deliver</h2>
|
|
<div className="row g-5">
|
|
{/* Left List */}
|
|
<div className="col-lg-7">
|
|
<div className="ux-deliver-list active">
|
|
<span>01</span>
|
|
UX strategy and journey mapping
|
|
</div>
|
|
<div className="ux-deliver-list">
|
|
<span>02</span>
|
|
Wireframes and structural prototypes
|
|
</div>
|
|
<div className="ux-deliver-list">
|
|
<span>03</span>
|
|
Design systems (tokens, components, patterns)
|
|
</div>
|
|
<div className="ux-deliver-list">
|
|
<span>04</span>
|
|
Development-ready UI
|
|
</div>
|
|
<div className="ux-deliver-list">
|
|
<span>05</span>
|
|
Headless or CMS implementation
|
|
</div>
|
|
<div className="ux-deliver-list">
|
|
<span>06</span>
|
|
Performance optimization
|
|
</div>
|
|
<div className="ux-deliver-list">
|
|
<span>07</span>
|
|
Technical documentation
|
|
</div>
|
|
</div>
|
|
{/* Right Snapshot */}
|
|
<div className="col-lg-5">
|
|
<div className="ux-snapshot-box">
|
|
<small>CASE SNAPSHOT</small>
|
|
<hr />
|
|
<span className="ux-mini-title">CHALLENGE</span>
|
|
<h4>Disconnected marketing + outdated web structure</h4>
|
|
<span className="ux-mini-title mt-4 d-block">OUTCOME</span>
|
|
<h2>42% increase</h2>
|
|
<p>in qualified conversions within 90 days</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section className="connect-section">
|
|
<div className="container">
|
|
{/* HEADING */}
|
|
<h2>How We Work</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>Discovery</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>Architecture</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>Design</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>Build</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>Optimize</span>
|
|
</div>
|
|
</div>
|
|
{/* BOTTOM TEXT */}
|
|
<p className="bottom-text">
|
|
No rushed mockups. No disconnected freelancers. Everything is structured
|
|
from day one.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
{/* TOP CTA */}
|
|
<div className="ux-footer-hero">
|
|
<div className="container">
|
|
<div className="ux-footer-hero-content text-center">
|
|
<p className="ux-section-label">AAideA</p>
|
|
<h2 className="ux-footer-title">
|
|
If the idea is strong, we'll scale it.
|
|
</h2>
|
|
<div className="ux-hero-actions">
|
|
<a href="#" className="btn ux-btn-primary">
|
|
Start a Project{" "}
|
|
<span className="ux-btn-icon">
|
|
<img src="assets/images/arrowbuttonwhite.svg" alt="" />
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
|
|
);
|
|
} |