Components
Loading preview...
A comprehensive UI component for a landing page hero section. It includes responsive navigation, a headline content area, and a structured application preview section with filters and a data table. Designed to be populated dynamically with data.
npx shadcn@latest add https://21st.dev/r/aghasisahakyan1/hero-section// This is a demo of a preview
// That's what users will see in the preview
import HeroSection, { HeroSectionComponentData } from "@/components/ui/hero-section";
const heroSectionData: HeroSectionComponentData = {
navbar: {
logoText: "MyApp",
navLinks: [
{ text: "Features", href: "#features" },
{ text: "Pricing", href: "#pricing" },
{ text: "About", href: "#about" },
{ text: "Contact", href: "#contact" },
],
authLinks: [
{ type: 'link', text: "Sign In", href: "#signin" },
{ type: 'button-primary', text: "Sign Up", href: "#signup" },
],
},
heroContent: {
subheadline: "Introducing Version 2.0",
headline: "Effortless Project Management for Modern Teams",
description: "Streamline your workflow, boost collaboration, and get more done with our intuitive platform. From task tracking to reporting, we've got you covered.",
secondaryCtaText: "Learn More",
secondaryCtaLink: "#details",
primaryCtaText: "Get Started Free",
primaryCtaLink: "#try-for-free",
},
appPreview: {
headerControls: {
filters: [
{ label: "Assignee", icon: "user", dropdown: true },
{ label: "Status", icon: "info", dropdown: true },
{ label: "Due Date", icon: "calendar", dropdown: true },
{ label: "Project", icon: "folder", dropdown: true },
],
actions: [
{ type: 'button-outline', text: "Import", icon: "upload" },
{ type: 'button-primary', text: "Add New Task", icon: "plus" },
],
},
appDataTable: {
headers: [
{ id: "name", label: "Task Name", icon: "document" },
{ id: "assignee", label: "Assignee", icon: "user" },
{ id: "status", label: "Status", icon: "info" },
{ id: "dueDate", label: "Due Date", icon: "calendar" },
{ id: "project", label: "Project", icon: "folder" },
],
data: [
{
id: 1,
name: "Design website homepage",
assignee: ["Alice Johnson"],
status: "Completed",
dueDate: "2023-10-26",
project: "Marketing Website",
statusColor: "green", // Corresponds to Tailwind classes like bg-green-500
},
{
id: 2,
name: "Develop user authentication module",
assignee: ["Bob Williams", "Charlie Brown"],
status: "In Progress",
dueDate: "2023-11-15",
project: "Platform Backend",
statusColor: "blue", // Corresponds to Tailwind classes like bg-blue-500
},
{
id: 3,
name: "Write blog post on new features",
assignee: ["Alice Johnson"],
status: "Needs Review",
dueDate: "2023-11-05",
project: "Content Marketing",
statusColor: "yellow", // Corresponds to Tailwind classes like bg-yellow-500
},
{
id: 4,
name: "Plan Q4 product roadmap",
assignee: ["David Miller"],
status: "Pending",
dueDate: "2023-11-10",
project: "Product Strategy",
statusColor: "gray", // Corresponds to Tailwind classes like bg-gray-500
},
{
id: 5,
name: "Setup CI/CD pipeline",
assignee: ["Charlie Brown"],
status: "In Progress",
dueDate: "2023-11-20",
project: "Platform Backend",
statusColor: "blue", // Corresponds to Tailwind classes like bg-blue-500
},
],
},
},
};
const DemoOne = () => {
return <HeroSection data={heroSectionData}/>;
};
// IMPORTANT:
// format of the export MUST be export default { DemoOneOrOtherName }
// if you don't do this, the demo will not be shown
export default { DemoOne };