import Link from "next/link"; import Image from "next/image"; import { Card, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { CalendarIcon } from "lucide-react"; export default function FeaturedArticleList() { // Sample blog posts data const featuredPost = { id: "1", title: "Creating Accessible Web Applications with React and ARIA", excerpt: "Learn how to build web applications that are accessible to everyone using React best practices and ARIA attributes. This comprehensive guide covers everything from basic accessibility principles to advanced techniques for creating inclusive user experiences.", date: "Apr 15, 2023", category: "Development", imageUrl: "https://images.unsplash.com/photo-1593720213428-28a5b9e94613?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", slug: "creating-accessible-web-applications", }; const posts = [ { id: "2", title: "The Future of Design Systems in 2023", excerpt: "Explore the trends and innovations shaping design systems and component libraries this year.", date: "Mar 28, 2023", category: "Design", imageUrl: "https://images.unsplash.com/photo-1561070791-2526d30994b5?q=80&w=2000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", slug: "future-of-design-systems", }, { id: "3", title: "Optimizing Performance in Next.js Applications", excerpt: "Practical strategies to improve loading times and overall performance in your Next.js web applications.", date: "Mar 12, 2023", category: "Performance", imageUrl: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=2015&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", slug: "optimizing-nextjs-performance", }, { id: "4", title: "Crafting Effective User Onboarding Experiences", excerpt: "How to design user onboarding that reduces friction and increases conversion rates for your product.", date: "Feb 24, 2023", category: "UX Design", imageUrl: "https://images.unsplash.com/photo-1559028012-481c04fa702d?q=80&w=2036&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", slug: "effective-user-onboarding", }, ]; const title = "From the Blog"; const description = "Insights, thoughts, and deep dives into my work and expertise"; return (

{title}

{description}

{/* Featured Article */}

{featuredPost.date} • {featuredPost.category}

{featuredPost.title} {featuredPost.excerpt} {/* Article List */}

{title}

Recent Articles

{post.title}

Portfolio Blog Writing And Previews

Featured Article List

Grid Blog CardsPreview

Horizontal Blog CarouselPreview

Masonry Layout ArticlesPreview

Minimal List DatesPreview