Gated Download

A download offer behind a short email form so visitors trade contact details for the file. Use it to capture leads while sharing a guide or kit.

import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Checkbox } from '@/components/ui/checkbox';
import { Download, Check, Lock } from 'lucide-react';
import { Badge } from '@/components/ui/badge';

export default function PortfolioGatedDownload() {
  const [email, setEmail] = useState('');
  const [subscribed, setSubscribed] = useState(true);
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setSubmitted(true);
    // In a real implementation, you would handle the form submission here
    // For example, sending the email to your backend/API
  };

  return (
    <div className="container mx-auto px-4 py-12 md:py-16">
      <div className="bg-card mx-auto max-w-5xl overflow-hidden rounded-xl border shadow-sm">
        <div className="grid grid-cols-1 md:grid-cols-12">
          {/* Image/Preview Column (5/12) */}
          <div className="bg-muted relative md:col-span-5">
            <div className="relative h-64 w-full md:h-full">
              <img
                src="https://images.unsplash.com/photo-1586282391129-76a6df230234?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3"
                alt="Client Proposal Template Preview"
                className="object-cover object-center"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent"></div>

              {/* Premium Badge */}
              <Badge className="absolute top-4 right-4">Premium Resource</Badge>

              {/* Preview Info */}
              <div className="absolute bottom-0 left-0 w-full p-6 text-white">
                <h3 className="text-xl font-bold md:text-2xl">
                  Client Proposal Template
                </h3>
                <p className="mt-1 text-sm text-white/80 md:text-base">
                  20-page customizable template with example content
                </p>
              </div>
            </div>
          </div>

          {/* Form Column (7/12) */}
          <div className="p-6 md:col-span-7 md:p-8">
            {!submitted ? (
              <>
                <div className="mb-6">
                  <h2 className="text-xl font-bold md:text-2xl">
                    Get This Client Proposal Template
                  </h2>
                  <p className="text-muted-foreground mt-2">
                    {' '}
                    out the form below to receive this resource in your inbox
                    immediately.
                  </p>
                </div>

                <form onSubmit={handleSubmit} className="space-y-5">
                  <div className="space-y-2">
                    <Label htmlFor="email">Email address</Label>
                    <Input
                      id="email"
                      type="email"
                      placeholder="your@email.com"
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                      required
                    />
                  </div>

                  <div className="flex items-start space-x-2">
                    <Checkbox
                      id="subscribe"
                      checked={subscribed}
                      onCheckedChange={(checked) => {
                        setSubscribed(checked as boolean);
                      }}
                    />
                    <Label
                      htmlFor="subscribe"
                      className="text-sm leading-tight font-normal"
                    >
                      Also subscribe me to receive future resource updates and
                      professional tips (optional)
                    </Label>
                  </div>

                  <div className="pt-2">
                    <Button type="submit" className="w-full">
                      <Lock className="mr-2 h-4 w-4" />
                      Unlock This Resource
                    </Button>
                  </div>

                  <p className="text-muted-foreground text-center text-xs">
                    We respect your privacy and will never share your
                    information. View our{' '}
                    <a href="#" className="text-primary underline">
                      Privacy Policy
                    </a>
                    .
                  </p>
                </form>
              </>
            ) : (
              <div className="flex flex-col items-center justify-center py-8 text-center">
                <div className="bg-primary/10 text-primary mb-6 flex h-16 w-16 items-center justify-center rounded-full">
                  <Check className="h-8 w-8" />
                </div>

                <h2 className="text-xl font-bold md:text-2xl">Thank You!</h2>

                <p className="text-muted-foreground mx-auto mt-2 max-w-md">
                  Your download link has been sent to <strong>{email}</strong>.
                  Check your inbox!
                </p>

                <Button className="mt-6">
                  <Download className="mr-2 h-4 w-4" />
                  Download Directly
                </Button>

                {subscribed && (
                  <p className="text-muted-foreground mt-4 text-sm">
                    You&apos;re now subscribed to my resource updates. You can
                    unsubscribe anytime.
                  </p>
                )}
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

About this block

Gated Download is a two-column card that trades a file for an email address. The left column fills five of twelve grid units with a cover image, a "Premium Resource" badge in the top corner, and a title and subtitle overlaid at the bottom. The right column holds a heading, a short description, an email input, an optional newsletter checkbox, and a full-width submit button. After the visitor submits the form, the right column replaces itself with a confirmation state: a check icon, a thank-you heading, the address the link was sent to, and a direct download button.

The two columns, the badge label, all copy, and the checkbox opt-in text are independent. You can drop the newsletter checkbox entirely, swap the cover image for any asset, and rewrite every string without touching the form logic or the confirmation flow.

When to use

Reach for this block when you want a lead-capture moment alongside a genuine content offer. For a product analytics SaaS it fits a resource page that gates a benchmarks report or a data audit checklist: the visitor gets a tangible file and you get a verified email. It does more work than a plain download button because it captures intent, and it is lighter than a full multi-field form that can feel like friction for a single asset.

A natural flow around it on a Portfolio page:

Before

A hero showcase to establish credibility before the offer
A featured resource card to spotlight the asset before asking for an email

After

Contact Sections to catch visitors who want to talk after downloading
A resources grid to show additional assets once interest is established

What you can display

The most natural fit is a single premium asset worth a short form, with the cover image previewing what the visitor will receive. A few other ways to use the frame:

A data report or benchmark file. Gate an annual metrics report so downloads double as qualified pipeline for a follow-up sequence.
A template or starter kit. Offer a reusable deliverable that demonstrates your process and keeps your work in front of the lead.
A recorded walkthrough or slide deck. Use the cover image as a still frame from the recording to signal exactly what is inside.

Tip: keep the description in the right column to one or two sentences so the form stays the visual focus and the visitor reaches the button without scrolling.

About this block

When to use

A natural flow around it on a Portfolio page:

Before

A hero showcase to establish credibility before the offer
A featured resource card to spotlight the asset before asking for an email

After

Contact Sections to catch visitors who want to talk after downloading
A resources grid to show additional assets once interest is established

What you can display

The most natural fit is a single premium asset worth a short form, with the cover image previewing what the visitor will receive. A few other ways to use the frame:

A data report or benchmark file. Gate an annual metrics report so downloads double as qualified pipeline for a follow-up sequence.
A template or starter kit. Offer a reusable deliverable that demonstrates your process and keeps your work in front of the lead.
A recorded walkthrough or slide deck. Use the cover image as a still frame from the recording to signal exactly what is inside.

Tip: keep the description in the right column to one or two sentences so the form stays the visual focus and the visitor reaches the button without scrolling.

Gated Download

About this block

When to use

What you can display

Search Shadcn UI Blocks

About this block

When to use

What you can display