Components
Sustainability Section A responsive section component designed to showcase key features or points, such as sustainability efforts. It features an animated layout with a title, a list of features with custom icons, and an image that animates into view. The component is fully themeable using shadcn/ui CSS variables.
Loading preview...
import * as React from "react";
import { SustainabilitySection } from "@/components/ui/sustainability-section"; // Adjust the import path as needed
// Demo component to showcase the SustainabilitySection
const SustainabilitySectionDemo = () => {
const sustainabilityFeatures = [
"Eco-friendly, recyclable packaging.",
"Responsibly sourced, transparent ingredients.",
"Reduced carbon footprint with green practices.",
];
return (
<div className="w-full bg-background flex items-center justify-center p-4">
<SustainabilitySection
title="Sustainability"
features={sustainabilityFeatures}
imageUrl="https://cdn.grofers.com/layout-engine/v2/2024-12/desk---bistro_pack-(1).png" // Using a hosted image link
imageAlt="Two green branded paper bags representing sustainable packaging"
/>
</div>
);
};
export default SustainabilitySectionDemo;