69 lines
2.7 KiB
TypeScript
69 lines
2.7 KiB
TypeScript
|
|
import { PageContainer } from "@/components/shared/PageContainer";
|
|
import { SectionContainer } from "@/components/shared/SectionContainer";
|
|
import { Counter } from "@/components/shared/Counter";
|
|
|
|
export function MissionSection() {
|
|
return (
|
|
<SectionContainer paddingY="lg">
|
|
<PageContainer className="grid grid-cols-1 gap-12 lg:grid-cols-[1fr_1.2fr] lg:gap-[60px] xl:gap-[100px]">
|
|
{/* Left: Images */}
|
|
<div className="relative aspect-square w-full md:aspect-[4/3] lg:aspect-square">
|
|
<div className="absolute bottom-0 left-0 h-[85%] w-[85%] overflow-hidden rounded-[25px] bg-aiero-card-dark">
|
|
<div
|
|
className="absolute inset-0 bg-cover bg-center"
|
|
style={{
|
|
backgroundImage: "url(/images/aiero/home-9-img.png)",
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="absolute right-0 top-0 h-[50%] w-[50%] overflow-hidden rounded-[25px] border-[8px] border-aiero-dark bg-aiero-card-purple">
|
|
<div
|
|
className="absolute inset-0 bg-cover bg-center"
|
|
style={{
|
|
backgroundImage: "url(/images/aiero/home-9-img.png)",
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right: Text and Stats */}
|
|
<div className="flex flex-col items-start justify-center pt-5">
|
|
<span
|
|
className="aiero-subheading mb-4 text-aiero-teal"
|
|
style={{ fontFamily: "var(--font-sora)" }}
|
|
>
|
|
Mission
|
|
</span>
|
|
<h2
|
|
className="mb-6 tracking-[-0.03em] text-white"
|
|
style={{
|
|
fontFamily: "var(--font-dm-sans)",
|
|
fontSize: "clamp(32px, 4vw, 56px)",
|
|
fontWeight: 500,
|
|
lineHeight: 1.1,
|
|
}}
|
|
>
|
|
we create a professional product using artificial intelligence
|
|
</h2>
|
|
<p className="mb-10 text-base leading-relaxed text-aiero-text-muted">
|
|
Certainly, crafting a clear and inspiring mission statement is
|
|
essential for a development company. It should reflect your
|
|
company's values, purpose, and commitment to innovation.
|
|
</p>
|
|
|
|
<div className="w-full rounded-[25px] border border-aiero-card-border bg-aiero-card-dark p-8 md:p-10">
|
|
<Counter
|
|
target={1250}
|
|
suffix="+"
|
|
numberClassName="text-[60px] md:text-[80px] font-bold leading-none font-[var(--font-manrope)] gradient-text-purple"
|
|
title="Created projects"
|
|
titleClassName="font-[var(--font-sora)] text-[11px] font-semibold tracking-[0.18em] uppercase text-aiero-text-muted mt-2"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</PageContainer>
|
|
</SectionContainer>
|
|
);
|
|
}
|