Sustainability Section

Features 2

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Sustainability Section to your project and fits it to your theme.

Code

How Sustainability Section is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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;