198 lines
8.9 KiB
TypeScript
198 lines
8.9 KiB
TypeScript
import Link from "next/link";
|
|
|
|
export default function brand_build() {
|
|
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" data-aos="fade-up" data-aos-duration="1000">Brand Built As Systems</h1>
|
|
<p className="ux-project-subtitle" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
|
|
We don't just design logos. We design structured identity ecosystems
|
|
that scale across channels.
|
|
</p>
|
|
</div>
|
|
<div className="ux-hero-actions" data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000">
|
|
<Link href="/start_project" className="btn ux-btn-primary">
|
|
Start a Project{" "}
|
|
<span className="ux-btn-icon">
|
|
<img src="assets/images/arrowbuttonwhite.svg" alt="" />
|
|
</span>
|
|
</Link>
|
|
<Link href="/work" className="btn ux-btn-secondary">
|
|
View Case Studies
|
|
</Link>
|
|
</div>
|
|
<div className="row align-items-center g-5 ux-growth-section">
|
|
{/* Left Content */}
|
|
<div className="col-lg-8" data-aos="fade-right" data-aos-duration="1000">
|
|
<span className="ux-growth-label">Philosophy</span>
|
|
<h2 className="ux-growth-title">
|
|
Most Brands Are Visual Collections — Not Strategic Systems
|
|
</h2>
|
|
<p className="ux-growth-subtitle">They struggle with:</p>
|
|
<div className="row">
|
|
<div className="col-md-6">
|
|
<ul className="ux-growth-list">
|
|
<li>Inconsistent messaging</li>
|
|
<li>Weak positioning</li>
|
|
</ul>
|
|
</div>
|
|
<div className="col-md-6">
|
|
<ul className="ux-growth-list">
|
|
<li>Visual fragmentation</li>
|
|
<li>Rebranding cycles every few years</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<p className="ux-growth-bottom">
|
|
Without structure, brand becomes decoration.
|
|
</p>
|
|
</div>
|
|
{/* Right Image */}
|
|
<div className="col-lg-4" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
|
|
<div className="ux-growth-image-box">
|
|
<img src="assets/images/Philosophy.png" alt="Brand System" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section className="ux-approach-section">
|
|
<div className="container">
|
|
<div className="row align-items-end mb-5">
|
|
<div className="col-lg-6" data-aos="fade-right" data-aos-duration="1000">
|
|
<span className="ux-label">Our Approach</span>
|
|
<h2 className="ux-section-title">
|
|
We treat brand as infrastructure.
|
|
</h2>
|
|
</div>
|
|
<div className="col-lg-6 text-lg-end mt-4 mt-lg-0" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
|
|
<p className="ux-section-desc">
|
|
Brand Should Feel Consistent Whether It's On A Billboard Or A Mobile
|
|
App.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="row g-4">
|
|
{/* Card 1 */}
|
|
<div className="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100" data-aos-duration="1000">
|
|
<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>Positioning First</h4>
|
|
<p>Clear category, audience, and narrative foundation.</p>
|
|
</div>
|
|
</div>
|
|
{/* Card 2 */}
|
|
<div className="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="250" data-aos-duration="1000">
|
|
<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>Identity With Structure</h4>
|
|
<p>
|
|
Typography, color systems, spacing logic, scalable visual
|
|
patterns.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{/* Card 3 */}
|
|
<div className="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000">
|
|
<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>Messaging Framework</h4>
|
|
<p>
|
|
Voice principles, brand language rules, modular copy structure.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section className="ux-deliver-section">
|
|
<div className="container">
|
|
<h2 className="ux-deliver-title" data-aos="fade-up" data-aos-duration="1000">What We Deliver</h2>
|
|
<div className="row g-5">
|
|
{/* Left List */}
|
|
<div className="col-lg-7">
|
|
<div className="ux-deliver-list active" data-aos="fade-right" data-aos-delay="100" data-aos-duration="900">
|
|
<span>01</span>
|
|
Market and positioning analysis
|
|
</div>
|
|
<div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="200" data-aos-duration="900">
|
|
<span>02</span>
|
|
Brand narrative development
|
|
</div>
|
|
<div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="300" data-aos-duration="900">
|
|
<span>03</span>
|
|
Logo and identity design
|
|
</div>
|
|
<div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="400" data-aos-duration="900">
|
|
<span>04</span>
|
|
Typography and color systems
|
|
</div>
|
|
<div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="500" data-aos-duration="900">
|
|
<span>05</span>
|
|
Brand guidelines
|
|
</div>
|
|
<div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="600" data-aos-duration="900">
|
|
<span>06</span>
|
|
Messaging architecture
|
|
</div>
|
|
<div className="ux-deliver-list" data-aos="fade-right" data-aos-delay="700" data-aos-duration="900">
|
|
<span>07</span>
|
|
Asset system for scale
|
|
</div>
|
|
</div>
|
|
{/* Right Snapshot */}
|
|
<div className="col-lg-5" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
|
|
<div className="ux-snapshot-box">
|
|
<small>CASE SNAPSHOT</small>
|
|
<hr />
|
|
<span className="ux-mini-title">CHALLENGE</span>
|
|
<h4>Generic positioning in competitive market</h4>
|
|
<span className="ux-mini-title mt-4 d-block">OUTCOME</span>
|
|
<h2>3x Engagement</h2>
|
|
<p>Growth after structured rebrand</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/* TOP CTA */}
|
|
<div className="ux-footer-hero">
|
|
<div className="container">
|
|
<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.
|
|
</h2>
|
|
<div className="ux-hero-actions">
|
|
<Link href="/start_project" className="btn ux-btn-primary">
|
|
Start a Project{" "}
|
|
<span className="ux-btn-icon">
|
|
<img src="assets/images/arrowbuttonwhite.svg" alt="" />
|
|
</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
|
|
);
|
|
} |