125 lines
3.6 KiB
TypeScript
125 lines
3.6 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: "Generate images with text",
|
|
description:
|
|
"Generate images from a text prompt, a video, or a video segment in bulk at the speed of light.",
|
|
skeleton: <SkeletonOne />,
|
|
className:
|
|
"col-span-1 lg:col-span-4 border-b border-r dark:border-neutral-800",
|
|
},
|
|
{
|
|
title: "Create stupid simple chatbots",
|
|
description:
|
|
"Create Chatbots with a single button click. Customize as per your requirements and the AI will take care of the rest.",
|
|
skeleton: <SkeletonTwo />,
|
|
className: "border-b col-span-1 lg:col-span-2 dark:border-neutral-800",
|
|
},
|
|
{
|
|
title: "We support every single LLM",
|
|
description:
|
|
"Whether it's OpenAI, GroQ or Your Mom's Basement LLM, we support everything.",
|
|
skeleton: <SkeletonThree />,
|
|
className: "col-span-1 lg:col-span-3 border-r dark:border-neutral-800",
|
|
},
|
|
{
|
|
title: "Deploy in seconds",
|
|
description:
|
|
"With our blazing fast, state of the art, cutting edge, we are so back cloud servies (read AWS) - you can deploy your model in seconds.",
|
|
skeleton: <SkeletonFour />,
|
|
className: "col-span-1 lg:col-span-3",
|
|
},
|
|
];
|
|
return (
|
|
<div className="relative z-20 py-10 lg:py-40 overflow-hidden">
|
|
<Heading as="h2">Packed with thousands of features</Heading>
|
|
<Subheading className="text-center ">
|
|
[App Name] provides all the tools you need to build amazing applications
|
|
with powerful features and seamless integration.
|
|
</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>
|
|
);
|
|
};
|