App Download Section

Features 48

About

App Download Section This component provides a promotional section to encourage users to download an application. It features a QR code, a list of benefits, and a prominent visual element, all of which are fully customizable through props.

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

Code

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

Usage.tsx

// demo.tsx
import { AppDownloadSection } from '@/components/ui/app-download-section';
import {
  Archive,
  Percent,
  Gem,
  Coins,
  Truck,
  HandCoins,
  ShieldCheck,
} from 'lucide-react';

const AppDownloadDemo = () => {
  // Define the props for the component
  const componentProps = {
    title: 'Download realme Store App',
    subtitle: 'Explore more fun activities and get surprise benefits',
    features: [
      { icon: <Archive size={24} />, title: 'Full Range of Products' },
      { icon: <Percent size={24} />, title: 'Enjoy Exclusive Discount' },
      { icon: <Gem size={24} />, title: 'Join Membership Club' },
      { icon: <Coins size={24} />, title: 'Redeem in Coins Market' },
    ],
    benefits: [
      { icon: <Truck size={20} />, title: 'Free Shipping*' },
      { icon: <HandCoins size={20} />, title: 'Cash on Delivery*' },
      { icon: <ShieldCheck size={20} />, title: 'Secured Payments' },
    ],
    qrCodeUrl: 'https://cdn.21st.dev/assets/mirror/3e/3e2cc9b7c90e06b0f88ec8290055284e8d05d755430b40cbf709bba4ee93750e.png', // Replace with your actual QR code URL
    qrCodeAlt: 'QR code to download the realme store app',
    mainImageUrl: 'https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-wp0lyIxuyGtDkw1H7AU8Kl8TP0o2t6.png&w=1000&q=75', // Replace with your actual promotional image URL
    mainImageAlt: 'Promotional image showing app benefits like coupons and gifts',
  };

  return (
    <div className="w-full">
      <AppDownloadSection {...componentProps} />
    </div>
  );
};

export default AppDownloadDemo;