Components
Loading preview...
Content With Illustration This component displays a section with textual content alongside an illustration. It's built to be responsive, adapting from a stacked layout on mobile to a two-column layout on larger screens. The text highlighting and icon animation add a dynamic, polished touch.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/content-with-illustrationimport { ContentWithIllustration } from '@/components/ui/content-with-illustration'; // Adjust path as needed
export default function ContentWithIllustrationDemo() {
const content = {
title: 'At Eternal, it is always Day 1',
highlightedText: 'always Day 1',
paragraphs: [
'Every day, just like today, has the potential to redefine the rest of our lives as an organization.',
"Eternal started as Zomato, on 26th January 2008 (Deepinder's 25th birthday), when one weekend, he went around town, collected all takeaway menus he could find, and put them up on a website, mostly in the spirit of service to his friends, and other people around him.",
'At the time, he had no intention of it turning into a business. He did not think there was any money to be made out of this.',
'Eternal is a result of tackling challenges day by day. Progress happened incrementally, and sometimes in leaps. That\'s how we got here. And that\'s how we move forward - one day at a time. One step after another.',
],
// Using public domain SVGs for demonstration
imageSrc: 'https://b.zmtcdn.com/data/o2_assets/014994354a98f17fdaad8f12c791653d1743675055.png',
iconSrc: 'https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-o53JuZpiN3JOy3N3lXQMLmskV0OslK.png&w=320&q=75',
};
return (
<div className="w-full bg-background">
<ContentWithIllustration
title={content.title}
highlightedText={content.highlightedText}
paragraphs={content.paragraphs}
imageSrc={content.imageSrc}
imageAlt="Illustration of a person with a backpack looking towards the sun"
iconSrc={content.iconSrc}
iconAlt="Animated sun doodle"
/>
</div>
);
}