Feature Carousel

Heroes 1.7K

About

Feature Carousel Interactive showcase for highlighting multiple app features in a swipeable, modern layout. Perfect for engaging users while promoting mobile-friendly tools and experiences.

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

Code

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

Usage.tsx

import React from 'react';
import { HeroSection } from '@/components/ui/feature-carousel'; // Adjust the import path as needed

const App: React.FC = () => {
  const images = [
    {
      src: 'https://cdn.21st.dev/assets/mirror/3d/3db702a1ed76683584d89bd83ad183704d215a5070d642be28a28a224acc3f5c.jpg',
      alt: 'Professional portrait of a woman',
    },
    {
      src: 'https://cdn.21st.dev/assets/mirror/a2/a274943ea7b284ffcb66214957d1fde9db8b73b1d6830ebc804bea9a47c69fc7.jpg',
      alt: 'Scenic landscape with mountains and a lake',
    },
    {
      src: 'https://cdn.21st.dev/assets/mirror/66/66a230562aa63505d3089a2040fd63a69f123bd9a36377b5c27f9bfa10de0ac2.jpg',
      alt: 'Artistic photo of a girl with flowers',
    },
    {
      src: 'https://cdn.21st.dev/assets/mirror/61/6172e1733d7481ef0c4d97869883ed274c76a2ec712ad2ffd4443f5c8de0db78.jpg',
      alt: 'A dog wearing sunglasses',
    },
    {
      src: 'https://cdn.21st.dev/assets/mirror/03/03ae1dfe758f85ffc2e1b35168819781697dff334890b7e5be6bae9eee06df8b.jpg',
      alt: 'Creative shot of a person from behind',
    },
  ];

  const title = (
    <>
      Edit Your <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-purple-500">Photos </span> on the Go
    </>
  );

  return (
    <div className="w-full">
      <HeroSection
        title={title}
        subtitle="Use all our AI-powered photo editing tools on your phone, available for all iOS and Android."
        images={images}
        appStoreLink="#"
        googlePlayLink="#"
      />
    </div>
  );
};

export default App;