Components
Loading preview...
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.
npx shadcn@latest add https://21st.dev/r/aghasisahakyan1/section-with-mockup
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}
/>
);
}