Product Mockup Section

Features 1.4K

About

responsive React component for displaying a section with text (title, description) and a styled image mockup. Features optional layout reversal and subtle scroll-triggered animations using framer-motion, including a parallax effect for the mockup and its background.

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

Code

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

Usage.tsx


import React from 'react';

// Ensure this import path is correct for your project structure
import SectionWithMockup from "@/components/blocks/section-with-mockup"
// Data for the first section (default layout)
const exampleData1 = {
    title: (
        <>
            Intelligence,
            <br />
            delivered to you.
        </>
    ),
    description: (
        <>
            Get a tailored Monday morning brief directly in
            <br />
            your inbox, crafted by your virtual personal
            <br />
            analyst, spotlighting essential watchlist stories
            <br />
            and earnings for the week ahead.
        </>
    ),
    primaryImageSrc: 'https://www.fey.com/marketing/_next/static/media/newsletter-desktop-2_4x.e594b737.png',
    secondaryImageSrc: 'https://www.fey.com/marketing/_next/static/media/newsletter-desktop-1_4x.9cc114e6.png',
};

// Changed from 'export default function ...' to 'export function ...'
export function SectionMockupDemoPage() {
    return (
        <SectionWithMockup
            title={exampleData1.title}
            description={exampleData1.description}
            primaryImageSrc={exampleData1.primaryImageSrc}
            secondaryImageSrc={exampleData1.secondaryImageSrc}
        />
    );
}