Components
Loading preview...
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.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/app-download-section// 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://ik.imagekit.io/fpxbgsota/Untitled.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;