124 lines
3.7 KiB
TypeScript
124 lines
3.7 KiB
TypeScript
import React from "react";
|
|
import { Heading } from "./heading";
|
|
import { Subheading } from "./subheading";
|
|
import { cn } from "@/lib/utils";
|
|
import { GridLineHorizontal, GridLineVertical } from "./grid-lines";
|
|
import { SkeletonOne } from "./skeletons/first";
|
|
import { SkeletonTwo } from "./skeletons/second";
|
|
import { SkeletonFour } from "./skeletons/fourth";
|
|
import { SkeletonThree } from "./skeletons/third";
|
|
|
|
export const Features = () => {
|
|
const features = [
|
|
{
|
|
title: "Strategy & ICP",
|
|
description:
|
|
"We deep dive into your offer, ideal customer profile, and messaging angles to ensure we hit the right pain points from day one.",
|
|
skeleton: null,
|
|
className:
|
|
"col-span-1 lg:col-span-4 border-b border-r dark:border-neutral-800",
|
|
},
|
|
{
|
|
title: "Setup & Enrichment",
|
|
description:
|
|
"We handle the technical heavy lifting: domains, inboxes, lead sourcing, and Clay-style enrichment for hyper-personalization.",
|
|
skeleton: null,
|
|
className: "border-b col-span-1 lg:col-span-2 dark:border-neutral-800",
|
|
},
|
|
{
|
|
title: "Scale & Optimize",
|
|
description:
|
|
"Weekly iterations, lead refreshes, and reply handling. We optimize your engine constantly to keep the meetings flowing.",
|
|
skeleton: null,
|
|
className: "col-span-1 lg:col-span-3 border-r dark:border-neutral-800",
|
|
},
|
|
{
|
|
title: "Outcome-First Approach",
|
|
description:
|
|
"No spray and pray. We focus on high-intent ICP and tight targeting. If we can't get the system live in 14 days, you don't pay the management fee.",
|
|
skeleton: null,
|
|
className: "col-span-1 lg:col-span-3",
|
|
},
|
|
];
|
|
return (
|
|
<div className="relative z-20 py-10 lg:py-40 overflow-hidden">
|
|
<Heading as="h2">We build you a predictable outbound engine — you only show up to close.</Heading>
|
|
<Subheading className="text-center ">
|
|
R3venue provides all the tools you need to build a high-intent pipeline with hyper-personalized targeting and automated enrichment.
|
|
</Subheading>
|
|
|
|
<div className="relative overflow-hidden">
|
|
<div className="grid grid-cols-1 lg:grid-cols-6 mt-12">
|
|
{features.map((feature) => (
|
|
<FeatureCard key={feature.title} className={feature.className}>
|
|
<FeatureTitle>{feature.title}</FeatureTitle>
|
|
<FeatureDescription>{feature.description}</FeatureDescription>
|
|
<div className=" h-full w-full">{feature.skeleton}</div>
|
|
</FeatureCard>
|
|
))}
|
|
</div>
|
|
<GridLineHorizontal
|
|
style={{
|
|
top: 0,
|
|
left: "-10%",
|
|
width: "120%",
|
|
}}
|
|
/>
|
|
|
|
<GridLineHorizontal
|
|
style={{
|
|
bottom: 0,
|
|
left: "-10%",
|
|
width: "120%",
|
|
}}
|
|
/>
|
|
|
|
<GridLineVertical
|
|
style={{
|
|
top: "-10%",
|
|
right: 0,
|
|
height: "120%",
|
|
}}
|
|
/>
|
|
<GridLineVertical
|
|
style={{
|
|
top: "-10%",
|
|
left: 0,
|
|
height: "120%",
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const FeatureCard = ({
|
|
children,
|
|
className,
|
|
}: {
|
|
children?: React.ReactNode;
|
|
className?: string;
|
|
}) => {
|
|
return (
|
|
<div className={cn(`p-4 sm:p-8 relative overflow-hidden`, className)}>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const FeatureTitle = ({ children }: { children?: React.ReactNode }) => {
|
|
return (
|
|
<Heading as="h3" size="sm" className="text-left">
|
|
{children}
|
|
</Heading>
|
|
);
|
|
};
|
|
|
|
const FeatureDescription = ({ children }: { children?: React.ReactNode }) => {
|
|
return (
|
|
<Subheading className="text-left max-w-sm mx-0 lg:text-sm my-2">
|
|
{children}
|
|
</Subheading>
|
|
);
|
|
};
|