|
1 | 1 | import React, { useState } from 'react'; |
2 | | -import { ArrowRight, ExternalLink, Github, Download, BookOpen, Users, MessageCircle, ChevronDown, FileText, Info } from 'lucide-react'; |
| 2 | +import { ArrowRight, ExternalLink, Github, Download, BookOpen, Users, MessageCircle, ChevronDown, FileText, Info, Calendar } from 'lucide-react'; |
3 | 3 | import { ThemeProvider } from '../components/ThemeProvider'; |
4 | 4 | import { Header } from '../components/Header'; |
5 | 5 | import { CodeBlock } from '../components/CodeBlock'; |
@@ -93,6 +93,38 @@ const Index = () => { |
93 | 93 | } |
94 | 94 | }; |
95 | 95 |
|
| 96 | + const blogPosts = [ |
| 97 | + { |
| 98 | + title: 'Prompt Less Smile More: Let the LLM Know your Intentions without Prompt Soup', |
| 99 | + description: 'Discover how byLLM revolutionizes LLM integration by eliminating complex prompt engineering and letting you focus on building.', |
| 100 | + link: 'https://medium.com/@jayanaka15/prompt-less-smile-more-let-the-llm-know-your-intentions-without-prompt-soup-01414cc48942', |
| 101 | + // You can add the actual Medium image URL here by: |
| 102 | + // 1. Opening the article on Medium |
| 103 | + // 2. Right-clicking the featured image |
| 104 | + // 3. Selecting "Copy Image Address" |
| 105 | + // Example: image: 'https://miro.medium.com/v2/resize:fit:1400/...' |
| 106 | + image: null, |
| 107 | + author: '@jayanaka15', |
| 108 | + readTime: '5 min read' |
| 109 | + }, |
| 110 | + { |
| 111 | + title: "The Developer's Dream: How Jaseci is Revolutionising Backend Development and AI Integration", |
| 112 | + description: 'Explore how Jaseci is changing the game for developers building AI-powered applications with unprecedented ease.', |
| 113 | + link: 'https://medium.com/@kashmithnisakya/the-developers-dream-how-jaseci-is-revolutionising-backend-development-and-ai-integration-c73be8fe2a6b', |
| 114 | + image: null, |
| 115 | + author: '@kashmithnisakya', |
| 116 | + readTime: '7 min read' |
| 117 | + }, |
| 118 | + { |
| 119 | + title: 'From Prompt Hell to AI Heaven: A Complete Tutorial on Building Intelligent Agents Effectively', |
| 120 | + description: 'A comprehensive guide to building intelligent AI agents without getting lost in the complexity of prompt engineering.', |
| 121 | + link: 'https://medium.com/@udithishanka.s/c8b44d322df1', |
| 122 | + image: null, |
| 123 | + author: '@udithishanka.s', |
| 124 | + readTime: '10 min read' |
| 125 | + } |
| 126 | + ]; |
| 127 | + |
96 | 128 | const tutorials = [ |
97 | 129 | { |
98 | 130 | title: 'Build an AI-integrated RPG (code-along)', |
@@ -611,7 +643,82 @@ const Index = () => { |
611 | 643 | </div> |
612 | 644 | </section> |
613 | 645 |
|
| 646 | + {/* Blog Posts Section */} |
| 647 | + <section className="py-12 bg-background"> |
| 648 | + <div className="container"> |
| 649 | + <div className="text-center mb-8"> |
| 650 | + <h2 className="text-section mb-4">Latest from Our Blogs</h2> |
| 651 | + <p className="text-body-large text-muted-foreground max-w-2xl mx-auto"> |
| 652 | + Read our latest articles on the future of AI-Integrated Programming |
| 653 | + </p> |
| 654 | + </div> |
614 | 655 |
|
| 656 | + <div className="max-w-6xl mx-auto relative"> |
| 657 | + <Carousel> |
| 658 | + <CarouselContent className="gap-4"> |
| 659 | + {blogPosts.map((post, idx) => ( |
| 660 | + <CarouselItem key={idx} className="md:basis-1/2 lg:basis-1/3"> |
| 661 | + <a |
| 662 | + href={post.link} |
| 663 | + target="_blank" |
| 664 | + rel="noopener noreferrer" |
| 665 | + className="block h-full" |
| 666 | + > |
| 667 | + <Card className="card-interactive h-full flex flex-col overflow-hidden group hover:shadow-xl transition-all duration-300 cursor-pointer"> |
| 668 | + <div className="overflow-hidden aspect-video relative"> |
| 669 | + {post.image ? ( |
| 670 | + <img |
| 671 | + src={post.image} |
| 672 | + alt={post.title} |
| 673 | + className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" |
| 674 | + onError={(e) => { |
| 675 | + e.currentTarget.style.display = 'none'; |
| 676 | + }} |
| 677 | + /> |
| 678 | + ) : ( |
| 679 | + <div className="w-full h-full bg-gradient-to-br from-primary/30 via-primary/15 to-background flex items-center justify-center relative overflow-hidden"> |
| 680 | + <div className="absolute inset-0 bg-grid-pattern opacity-10"></div> |
| 681 | + <div className="relative z-10 text-center p-6"> |
| 682 | + <div className="w-16 h-16 mx-auto mb-3 rounded-full bg-card/50 backdrop-blur-sm flex items-center justify-center border border-primary/20"> |
| 683 | + <BookOpen className="w-8 h-8 text-primary" /> |
| 684 | + </div> |
| 685 | + <div className="inline-block px-4 py-1.5 rounded-full bg-card/50 backdrop-blur-sm border border-primary/20"> |
| 686 | + <span className="text-xs font-medium text-muted-foreground">Medium Article</span> |
| 687 | + </div> |
| 688 | + </div> |
| 689 | + </div> |
| 690 | + )} |
| 691 | + </div> |
| 692 | + <CardHeader className="flex-1 pb-2"> |
| 693 | + <CardTitle className="text-lg line-clamp-2 group-hover:text-primary transition-colors leading-snug mb-2"> |
| 694 | + {post.title} |
| 695 | + </CardTitle> |
| 696 | + <CardDescription className="line-clamp-2 text-sm"> |
| 697 | + {post.description} |
| 698 | + </CardDescription> |
| 699 | + <div className="flex items-center gap-2 text-xs text-muted-foreground pt-3"> |
| 700 | + <span>{post.author}</span> |
| 701 | + <span>•</span> |
| 702 | + <span>{post.readTime}</span> |
| 703 | + </div> |
| 704 | + </CardHeader> |
| 705 | + <CardContent className="p-4 pt-0"> |
| 706 | + <div className="flex items-center justify-between w-full px-4 py-2 rounded-md bg-primary/10 group-hover:bg-primary group-hover:text-primary-foreground transition-colors text-sm font-medium"> |
| 707 | + <span>Read on Medium</span> |
| 708 | + <ArrowRight className="h-4 w-4 group-hover:translate-x-1 transition-transform" /> |
| 709 | + </div> |
| 710 | + </CardContent> |
| 711 | + </Card> |
| 712 | + </a> |
| 713 | + </CarouselItem> |
| 714 | + ))} |
| 715 | + </CarouselContent> |
| 716 | + <CarouselPrevious className="hidden md:flex" /> |
| 717 | + <CarouselNext className="hidden md:flex" /> |
| 718 | + </Carousel> |
| 719 | + </div> |
| 720 | + </div> |
| 721 | + </section> |
615 | 722 |
|
616 | 723 | {/* Tutorials */} |
617 | 724 | <section id="tutorials" className="py-12 bg-muted/30"> |
|
0 commit comments