291 lines
8.9 KiB
TypeScript
291 lines
8.9 KiB
TypeScript
export default function About() {
|
||
const beliefData = [
|
||
{
|
||
title: "Ideas must survive scale",
|
||
desc: "A strong concept doesn't break when applied across formats, platforms, or timezones. It adapts without dilution.",
|
||
icon: "bi-layers",
|
||
},
|
||
{
|
||
title: "Design must justify itself",
|
||
desc: "Every decision has a reason. We don't chase trends or add complexity for its own sake. Form follows function always.",
|
||
icon: "bi-vector-pen",
|
||
},
|
||
{
|
||
title: "AI is leverage, not identity",
|
||
desc: "We use AI to accelerate execution, not replace judgment. Technology amplifies structured thinking—it doesn't create it.",
|
||
icon: "bi-cpu",
|
||
highlight: true,
|
||
},
|
||
{
|
||
title: "Systems beat style",
|
||
desc: "A beautiful website that can't be updated is a liability. We build for longevity, not just launch day.",
|
||
icon: "bi-columns-gap",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<>
|
||
{/* HERO */}
|
||
<section className="ux-project-hero">
|
||
<div className="container">
|
||
|
||
<div className="ux-project-content text-center">
|
||
<h1 className="ux-project-title" data-aos="fade-up">
|
||
We Build With Structure.
|
||
</h1>
|
||
|
||
<p
|
||
className="ux-project-subtitle"
|
||
data-aos="fade-up"
|
||
data-aos-delay="120"
|
||
>
|
||
AAideA is a boutique systems-led creative studio for operators who need <br />
|
||
more than aesthetic polish—they need scalable execution.
|
||
</p>
|
||
</div>
|
||
|
||
{/* 🔥 IMAGE ROW */}
|
||
<div className="hero-images row justify-content-center mt-5 g-4">
|
||
|
||
<div className="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
|
||
<div className="hero-img-box">
|
||
<img src="assets/images/structure1.png" alt="Team Work" />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="350" data-aos-duration="1000">
|
||
<div className="hero-img-box hero-img-boxup">
|
||
<img src="assets/images/structure2.png" alt="Office" />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="500" data-aos-duration="1000">
|
||
<div className="hero-img-box">
|
||
<img src="assets/images/structure3.png" alt="Collaboration" />
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
{/* PHILOSOPHY */}
|
||
<section className="philosophy-section py-5">
|
||
<div className="container">
|
||
<div className="row align-items-center g-5">
|
||
|
||
<div className="col-lg-6" data-aos="fade-right" data-aos-duration="1000">
|
||
<div className="image-box">
|
||
<img
|
||
src="assets/images/intersection.png"
|
||
alt="Philosophy"
|
||
className="img-fluid"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="col-lg-6" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
|
||
<p className="ux-section-label">Philosophy</p>
|
||
|
||
<h2 className="main-heading">
|
||
We exist at the intersection of strategy, design, and execution.
|
||
Not as separate phases—but as a single disciplined approach.
|
||
</h2>
|
||
|
||
<p className="desc mt-3">
|
||
Too Many Agencies Deliver Beautiful Work That Doesn't Scale.
|
||
Too Many Consultancies Deliver Strategies That Never Ship. We Do Both.
|
||
</p>
|
||
|
||
<p className="desc">
|
||
Our Clients Don't Need Hand-Holding. They Need Clarity, Structure,
|
||
And Speed—Without Sacrificing Taste Or Long-Term Thinking.
|
||
</p>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ✅ BELIEF SECTION (ADDED HERE) */}
|
||
<section className="belief-section">
|
||
<div className="container">
|
||
<h2 className="section-title mb-5" data-aos="fade-up" data-aos-duration="1000">What We Believe</h2>
|
||
|
||
<div className="row g-4">
|
||
{beliefData.map((item, i) => (
|
||
<div className="col-lg-3 col-md-6" key={i} data-aos="fade-up" data-aos-delay={100 + i * 150} data-aos-duration="1000">
|
||
<div className={`belief-card ${item.highlight ? "active" : ""}`}>
|
||
|
||
<div className="icon-box">
|
||
<img
|
||
src="assets/images/Ideasabout.svg"
|
||
alt="Global"
|
||
className="img-fluid"
|
||
/>
|
||
</div>
|
||
|
||
<h5>{item.title}</h5>
|
||
<p>{item.desc}</p>
|
||
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section className="working-section">
|
||
<div className="container">
|
||
<div className="displayflexhead" style={{ width: "100%" }} data-aos="fade-up" data-aos-duration="1000">
|
||
<p className="ux-section-label" style={{ width: "18%" }}>Working Model</p>
|
||
|
||
<h2 className="main-heading">
|
||
We operate lean. Senior-led execution. No bloated teams.<br />
|
||
No outsource chaos.
|
||
</h2>
|
||
</div>
|
||
<div className="row g-4">
|
||
|
||
{/* CARD 1 */}
|
||
<div className="col-lg-4" data-aos="fade-up" data-aos-delay="100" data-aos-duration="1000">
|
||
<div className="working-card">
|
||
<span className="number">01</span>
|
||
<p>
|
||
Every project is led by senior practitioners—not delegated to junior
|
||
teams or external freelancers. You work directly with the people
|
||
building your brand.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* CARD 2 */}
|
||
<div className="col-lg-4" data-aos="fade-up" data-aos-delay="250" data-aos-duration="1000">
|
||
<div className="working-card">
|
||
<span className="number">02</span>
|
||
<p>
|
||
We don't scale headcount. We scale systems. This means faster
|
||
timelines, clearer communication, and consistent quality from
|
||
concept through deployment.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* CARD 3 */}
|
||
<div className="col-lg-4" data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000">
|
||
<div className="working-card">
|
||
<span className="number">03</span>
|
||
<p>
|
||
Small teams move faster. Less bureaucracy. More accountability.
|
||
Better outcomes.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
<section className="global-section py-5">
|
||
<div className="container">
|
||
<div className="row align-items-center g-5">
|
||
|
||
{/* LEFT CONTENT */}
|
||
<div className="col-lg-6" data-aos="fade-right" data-aos-duration="1000">
|
||
|
||
<p className="small-title">Global Outlook</p>
|
||
|
||
<h2 className="main-heading">
|
||
Built for global decision-makers.
|
||
</h2>
|
||
|
||
<p className="desc mt-3">
|
||
We work with operators across industries and geographies—from
|
||
venture-backed startups to established brands entering new markets.
|
||
Location doesn’t limit execution.
|
||
</p>
|
||
|
||
<div className="highlight-box mt-4">
|
||
|
||
<span>
|
||
<img
|
||
src="assets/images/buildaboiticon.svg"
|
||
alt="Global"
|
||
className="img-fluid"
|
||
/> Remote-first. Timezone-flexible. Outcome-focused.
|
||
</span>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
{/* RIGHT IMAGE */}
|
||
<div className="col-lg-6" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
|
||
<div className="image-box">
|
||
<img
|
||
src="assets/images/decision.png"
|
||
alt="Global"
|
||
className="img-fluid"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="who-section ">
|
||
<div className="container">
|
||
<div className="row align-items-center g-5">
|
||
|
||
{/* LEFT IMAGE */}
|
||
<div className="col-lg-6" data-aos="fade-right" data-aos-duration="1000">
|
||
<div className="who-image">
|
||
<img
|
||
src="assets/images/Whoabout.png"
|
||
alt="Team"
|
||
className="img-fluid"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* RIGHT CONTENT */}
|
||
<div className="col-lg-6" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
|
||
|
||
<h2 className="who-title">Who We Work With</h2>
|
||
|
||
<p className="who-desc">
|
||
Founders building brands that need to scale without losing coherence.
|
||
</p>
|
||
|
||
<p className="who-desc">
|
||
Operators who move fast but think long-term—execution speed matters,
|
||
but structure matters more.
|
||
</p>
|
||
|
||
<p className="who-desc">
|
||
Companies entering new markets or repositioning existing offerings—
|
||
where clarity is the competitive advantage.
|
||
</p>
|
||
|
||
<p className="who-muted mt-4">
|
||
If you value noise over signal, we’re not the right fit.
|
||
</p>
|
||
|
||
<p className="who-muted">
|
||
If you need cheap and fast over structured and right, look elsewhere.
|
||
</p>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</>
|
||
);
|
||
} |