tenext redesign
This commit is contained in:
132
components/sections/FeaturesSection.tsx
Normal file
132
components/sections/FeaturesSection.tsx
Normal file
@@ -0,0 +1,132 @@
|
||||
import { CardHeading, IconButton } from "@/components/shared/CardShared";
|
||||
|
||||
export function FeaturesSection() {
|
||||
return (
|
||||
<section className="bg-white px-[20px] pb-[100px] pt-[150px]">
|
||||
<div className="mx-auto max-w-[1260px]">
|
||||
{/* Top text and separator */}
|
||||
<div className="mb-[70px] pr-[10%]">
|
||||
<div className="mb-[20px] h-px w-[130px] bg-tenext-card-border" />
|
||||
<h2
|
||||
className="max-w-[700px] tracking-[-0.03em] text-tenext-dark"
|
||||
style={{
|
||||
fontFamily: "var(--font-sora)",
|
||||
fontSize: "clamp(32px, 4vw, 56px)",
|
||||
fontWeight: 700,
|
||||
lineHeight: 1.1,
|
||||
}}
|
||||
>
|
||||
Engineered for outcomes, built for scale
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Feature Cards Grid */}
|
||||
<div className="grid grid-cols-1 gap-[20px] lg:grid-cols-2">
|
||||
{/* Card 1 - Left */}
|
||||
<div className="relative flex flex-col justify-between overflow-hidden rounded-[25px] border border-tenext-card-border bg-tenext-card-dark p-[40px_35px_45px_35px] lg:p-[22%_9%_20%_9%]">
|
||||
<div
|
||||
className="absolute inset-0 bg-[url('/images/tenext/home-9-img.png')] bg-bottom bg-no-repeat transition-all duration-300 hover:scale-105"
|
||||
style={{ backgroundSize: "100% auto" }}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-[#0D0D0D99] to-transparent to-[20%]" />
|
||||
|
||||
<div className="relative z-10 mt-auto">
|
||||
<CardHeading
|
||||
title="Integrate data across your enterprise to uncover deep insight"
|
||||
titleClassName="text-white"
|
||||
/>
|
||||
|
||||
<ul className="mt-[20px] flex flex-col gap-3">
|
||||
<li className="flex items-center gap-3 text-tenext-text-muted">
|
||||
<span className="flex h-1 w-1 rounded-full bg-tenext-text-muted" />
|
||||
Advanced analytics processing
|
||||
</li>
|
||||
<li className="flex items-center gap-3 text-tenext-text-muted">
|
||||
<span className="flex h-1 w-1 rounded-full bg-tenext-text-muted" />
|
||||
Real-time data synchronization
|
||||
</li>
|
||||
<li className="flex items-center gap-3 text-tenext-text-muted">
|
||||
<span className="flex h-1 w-1 rounded-full bg-tenext-text-muted" />
|
||||
Secure API endpoints
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<IconButton />
|
||||
</div>
|
||||
|
||||
{/* Card 2 - Right */}
|
||||
<div className="relative flex flex-col justify-between overflow-hidden rounded-[25px] border border-tenext-card-border bg-tenext-card-dark p-[40px_35px_45px_35px] lg:p-[10%_9%_11%_9%]">
|
||||
<div className="absolute inset-0 bg-[url('/images/tenext/Dots.png')] bg-[length:auto] bg-[50%_20px] bg-no-repeat opacity-20" />
|
||||
|
||||
<div className="relative z-10 flex h-[42px] w-[42px] items-center justify-center text-white">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="h-full w-full"
|
||||
>
|
||||
<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 mt-[60px] lg:mt-[100px]">
|
||||
<CardHeading
|
||||
title="Data privacy and security with robust measures"
|
||||
titleClassName="text-white"
|
||||
/>
|
||||
<p className="text-[16px] text-tenext-text-muted">
|
||||
Enterprise-grade security and governance built into every
|
||||
engagement — from secure architecture and access controls to
|
||||
compliance-ready data handling.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<IconButton />
|
||||
</div>
|
||||
|
||||
{/* Card 3 - Bottom Full Width */}
|
||||
<div className="relative col-span-1 overflow-hidden rounded-[25px] border border-tenext-card-border bg-tenext-card-dark lg:col-span-2">
|
||||
<div
|
||||
className="absolute inset-0 bg-[url('/images/tenext/3d-woman-shape-glowing-with-bright-holographic-colors-1-min.png')] bg-right-bottom bg-no-repeat transition-all duration-300 hover:scale-105"
|
||||
style={{ backgroundSize: "83% auto" }}
|
||||
/>
|
||||
|
||||
<div className="relative z-10 grid grid-cols-1 gap-[40px] p-[40px_35px] lg:grid-cols-2 lg:p-[80px_60px]">
|
||||
<div>
|
||||
<CardHeading
|
||||
subtitle="Technology"
|
||||
title="Tailored solutions specifically to your needs"
|
||||
titleClassName="text-white"
|
||||
subtitleClassName="text-tenext-teal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-[30px] lg:pl-[15%]">
|
||||
<div>
|
||||
<h4 className="text-[20px] font-bold text-white font-[var(--font-sora)]">
|
||||
Engineering ownership
|
||||
</h4>
|
||||
<p className="mt-[8px] text-[15px] leading-[1.7] text-tenext-text-muted">
|
||||
The team that designs a system builds and supports it.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-[20px] font-bold text-white font-[var(--font-sora)]">
|
||||
Support beyond go-live
|
||||
</h4>
|
||||
<p className="mt-[8px] text-[15px] leading-[1.7] text-tenext-text-muted">
|
||||
Monitoring, optimization, and managed support after launch.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user