{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"marketing-blog-sections-timeline-blog","type":"registry:block","title":"Timeline Blog","files":[{"path":"components/blocks/marketing/blog-sections/timeline-blog.tsx","content":"import { Button } from '@/components/ui/button';\nimport { Badge } from '@/components/ui/badge';\nimport { CalendarIcon, Clock3Icon, ArrowRightIcon } from 'lucide-react';\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';\n\n// Define blog post type\ninterface BlogPost {\n id: number;\n title: string;\n excerpt: string;\n category: string;\n date: string;\n month: string;\n readTime: string;\n imageUrl: string;\n}\n\nconst allPosts: BlogPost[] = [\n {\n id: 1,\n title: 'The Future of AI in Marketing: Predictions for 2023',\n excerpt:\n 'Explore how artificial intelligence is transforming marketing strategies and what to expect in the coming year.',\n category: 'AI & Technology',\n date: 'April 10, 2023',\n month: 'April',\n readTime: '10 min read',\n imageUrl:\n 'https://images.unsplash.com/photo-1558346490-a72e53ae2d4f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',\n },\n {\n id: 2,\n title: 'Customer Retention Strategies That Actually Work',\n excerpt:\n 'Discover proven tactics to keep your customers coming back and increase lifetime value.',\n category: 'Customer Success',\n date: 'April 3, 2023',\n month: 'April',\n readTime: '8 min read',\n imageUrl:\n 'https://images.unsplash.com/photo-1552581234-26160f608093?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',\n },\n {\n id: 3,\n title: 'How to Build a Strong Brand Identity in 2023',\n excerpt:\n 'Learn the essential elements of creating a memorable brand that resonates with your target audience.',\n category: 'Branding',\n date: 'March 25, 2023',\n month: 'March',\n readTime: '12 min read',\n imageUrl:\n 'https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',\n },\n {\n id: 4,\n title: 'Social Media Marketing Strategies for Small Businesses',\n excerpt:\n 'Practical social media tactics that small businesses can implement without big budgets.',\n category: 'Social Media',\n date: 'March 18, 2023',\n month: 'March',\n readTime: '7 min read',\n imageUrl:\n 'https://images.unsplash.com/photo-1611162616305-c69b3fa7fbe0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80',\n },\n {\n id: 5,\n title: 'Email Automation: Setting Up Effective Drip Campaigns',\n excerpt:\n 'Step-by-step guide to creating email sequences that nurture leads and drive conversions.',\n category: 'Email Marketing',\n date: 'February 28, 2023',\n month: 'February',\n readTime: '9 min read',\n imageUrl:\n 'https://images.unsplash.com/photo-1596526131083-e8c633c948d2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80',\n },\n {\n id: 6,\n title: 'Content Marketing ROI: Measuring What Matters',\n excerpt:\n 'Learn how to track and analyze the true impact of your content marketing efforts.',\n category: 'Content',\n date: 'February 15, 2023',\n month: 'February',\n readTime: '11 min read',\n imageUrl:\n 'https://images.unsplash.com/photo-1434030216411-0b793f4b4173?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',\n },\n];\n\nconst recentPosts = allPosts.slice(0, 4);\nconst popularPosts = [allPosts[2]!, allPosts[4]!, allPosts[0]!, allPosts[5]!];\n\nexport default function BlogSectionTimeline() {\n // Group posts by month\n const groupedByMonth = allPosts.reduce>(\n (acc, post) => {\n if (!acc[post.month]) {\n acc[post.month] = [];\n }\n acc[post.month]!.push(post);\n return acc;\n },\n {}\n );\n\n // Sort months chronologically (newest first)\n const months = Object.keys(groupedByMonth).sort((a, b) => {\n const monthOrder = [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December',\n ];\n return monthOrder.indexOf(b) - monthOrder.indexOf(a);\n });\n\n return (\n
\n
\n

\n Marketing Insights Timeline\n

\n

\n Stay up to date with our latest marketing articles, tips, and\n strategies.\n

\n
\n\n \n \n Timeline\n Recent\n Popular\n \n\n \n
\n {months.map((month) => (\n
\n
\n

{month}

\n
\n
\n\n
\n {groupedByMonth[month]!.map((post) => (\n
\n {/* Timeline dot */}\n
\n\n
\n
\n \n
\n\n
\n
\n {post.category}\n
\n \n {post.date}\n
\n
\n \n {post.readTime}\n
\n
\n\n

\n {post.title}\n

\n\n

\n {post.excerpt}\n

\n\n \n
\n
\n
\n ))}\n
\n
\n ))}\n
\n \n\n \n
\n {recentPosts.map((post) => (\n
\n
\n \n
\n
\n \n {post.category}\n \n

{post.title}

\n
\n \n {post.date}\n
\n \n
\n
\n ))}\n
\n \n\n \n
\n {popularPosts.map((post) => (\n
\n
\n \n
\n
\n \n {post.category}\n \n

{post.title}

\n
\n \n {post.readTime}\n
\n \n
\n
\n ))}\n
\n \n \n\n
\n \n
\n\n \n
\n );\n}\n","type":"registry:component","target":"components/blocks/marketing/blog-sections/timeline-blog.tsx"},{"path":"components/ui/button.tsx","content":"import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n \"group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n outline:\n \"border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n ghost:\n \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n destructive:\n \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default:\n \"h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n xs: \"h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n sm: \"h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5\",\n lg: \"h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n icon: \"size-9\",\n \"icon-xs\":\n \"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3\",\n \"icon-sm\":\n \"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md\",\n \"icon-lg\": \"size-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nfunction Button({\n className,\n variant = \"default\",\n size = \"default\",\n asChild = false,\n ...props\n}: React.ComponentProps<\"button\"> &\n VariantProps & {\n asChild?: boolean\n }) {\n const Comp = asChild ? Slot.Root : \"button\"\n\n return (\n \n )\n}\n\nexport { Button, buttonVariants }\n","type":"registry:ui","target":"components/ui/button.tsx"},{"path":"components/ui/badge.tsx","content":"import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n \"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n secondary:\n \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n destructive:\n \"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20\",\n outline:\n \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n ghost:\n \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nfunction Badge({\n className,\n variant = \"default\",\n asChild = false,\n ...props\n}: React.ComponentProps<\"span\"> &\n VariantProps & { asChild?: boolean }) {\n const Comp = asChild ? Slot.Root : \"span\"\n\n return (\n \n )\n}\n\nexport { Badge, badgeVariants }\n","type":"registry:ui","target":"components/ui/badge.tsx"},{"path":"components/ui/tabs.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Tabs as TabsPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Tabs({\n className,\n orientation = \"horizontal\",\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nconst tabsListVariants = cva(\n \"group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none\",\n {\n variants: {\n variant: {\n default: \"bg-muted\",\n line: \"gap-1 bg-transparent\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nfunction TabsList({\n className,\n variant = \"default\",\n ...props\n}: React.ComponentProps &\n VariantProps) {\n return (\n \n )\n}\n\nfunction TabsTrigger({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction TabsContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n","type":"registry:ui","target":"components/ui/tabs.tsx"}],"description":"A vertical timeline that orders posts by date with markers and dots. Use it for a changelog, release notes, or a chronological story archive.","dependencies":["class-variance-authority","lucide-react","radix-ui"]}