Spaces:
Runtime error
Runtime error
File size: 2,462 Bytes
64c5e26 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
import { Badge } from "./ui/badge";
import {
Card,
CardContent,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import image from "../assets/growth.png";
import image3 from "../assets/reflecting.png";
import image4 from "../assets/looking-ahead.png";
interface FeatureProps {
title: string;
description: string;
image: string;
}
const features: FeatureProps[] = [
{
title: "Responsive Design",
description:
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi nesciunt est nostrum omnis ab sapiente.",
image: image4,
},
{
title: "Intuitive user interface",
description:
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi nesciunt est nostrum omnis ab sapiente.",
image: image3,
},
{
title: "AI-Powered insights",
description:
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi nesciunt est nostrum omnis ab sapiente.",
image: image,
},
];
const featureList: string[] = [
"Dark/Light theme",
"Reviews",
"Features",
"Pricing",
"Contact form",
"Our team",
"Responsive design",
"Newsletter",
"Minimalist",
];
export const Features = () => {
return (
<section
id="features"
className="container py-24 sm:py-32 space-y-8"
>
<h2 className="text-3xl lg:text-4xl font-bold md:text-center">
Many{" "}
<span className="bg-gradient-to-b from-primary/60 to-primary text-transparent bg-clip-text">
Great Features
</span>
</h2>
<div className="flex flex-wrap md:justify-center gap-4">
{featureList.map((feature: string) => (
<div key={feature}>
<Badge
variant="secondary"
className="text-sm"
>
{feature}
</Badge>
</div>
))}
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{features.map(({ title, description, image }: FeatureProps) => (
<Card key={title}>
<CardHeader>
<CardTitle>{title}</CardTitle>
</CardHeader>
<CardContent>{description}</CardContent>
<CardFooter>
<img
src={image}
alt="About feature"
className="w-[200px] lg:w-[300px] mx-auto"
/>
</CardFooter>
</Card>
))}
</div>
</section>
);
};
|