558 lines
22 KiB
TypeScript
558 lines
22 KiB
TypeScript
import React, { useState } from "react";
|
|
import { Navigation } from "../components/Navigation";
|
|
import { Footer } from "../components/Footer";
|
|
import { Button } from "../components/ui/button";
|
|
import { Badge } from "../components/ui/badge";
|
|
import { Card, CardContent } from "../components/ui/card";
|
|
import { Input } from "../components/ui/input";
|
|
import hospitalAi from "../assets/aihospital.jpg"
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "../components/ui/select";
|
|
import {
|
|
Search,
|
|
Calendar,
|
|
User,
|
|
Tag,
|
|
ArrowRight,
|
|
BookOpen,
|
|
} from "lucide-react";
|
|
import { Helmet } from "react-helmet-async";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
export const Blog = () => {
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|
const [selectedCategory, setSelectedCategory] = useState("all");
|
|
const [selectedTag, setSelectedTag] = useState("all");
|
|
|
|
const categories = [
|
|
"All Categories",
|
|
"Healthcare AI",
|
|
"Fintech",
|
|
"Case Study",
|
|
"Automation",
|
|
"Tech Trends",
|
|
"How-to Guides",
|
|
];
|
|
|
|
const tags = [
|
|
"All Tags",
|
|
"Artificial Intelligence",
|
|
"Healthcare",
|
|
"Fintech",
|
|
"Compliance",
|
|
"System Architecture",
|
|
"Business Automation",
|
|
"Digital Transformation",
|
|
"Performance Optimization",
|
|
];
|
|
|
|
const featuredPosts = [
|
|
{
|
|
id: "future-of-ai-healthcare",
|
|
title:
|
|
"The Future of AI in Healthcare: Transforming Patient Care Through Technology",
|
|
excerpt:
|
|
"Discover how artificial intelligence is revolutionizing healthcare delivery, from diagnostic accuracy to personalized treatment plans and administrative efficiency.",
|
|
// image:
|
|
// "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=800&h=600&fit=crop&auto=format",
|
|
image: hospitalAi,
|
|
author: "Dr. Sarah Chen",
|
|
date: "January 8, 2025",
|
|
category: "Healthcare AI",
|
|
tags: ["Artificial Intelligence", "Healthcare", "Digital Transformation"],
|
|
readTime: "12 min read",
|
|
},
|
|
{
|
|
id: "compliance-ready-systems-fintech",
|
|
title: "Why Compliance-Ready Systems Are Crucial in Fintech Development",
|
|
excerpt:
|
|
"Exploring the critical importance of building compliance into fintech systems from day one, ensuring regulatory adherence while maintaining innovation and user experience.",
|
|
image:
|
|
"https://images.unsplash.com/photo-1551434678-e076c223a692?w=800&h=600&fit=crop&auto=format",
|
|
author: "Michael Rodriguez",
|
|
date: "January 5, 2025",
|
|
category: "Fintech",
|
|
tags: ["Fintech", "Compliance", "Financial Services"],
|
|
readTime: "8 min read",
|
|
},
|
|
{
|
|
id: "legacy-system-scaling",
|
|
title: "How WDI Scaled a Legacy System for 1 Million+ Users",
|
|
excerpt:
|
|
"A detailed case study on modernizing and scaling legacy systems for massive user growth, overcoming technical debt while maintaining business continuity.",
|
|
image:
|
|
"https://images.unsplash.com/photo-1558655146-9f40138edfeb?w=800&h=600&fit=crop&auto=format",
|
|
author: "Alex Thompson",
|
|
date: "December 28, 2024",
|
|
category: "Case Study",
|
|
tags: ["System Architecture", "Performance Optimization", "DevOps"],
|
|
readTime: "15 min read",
|
|
},
|
|
];
|
|
|
|
const blogPosts = [
|
|
{
|
|
id: "automation-reshaping-business",
|
|
title: "5 Ways Automation is Reshaping Business Operations",
|
|
excerpt:
|
|
"Discover how intelligent automation is transforming modern business processes and operations, driving efficiency and creating new opportunities for growth.",
|
|
image:
|
|
"https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=600&h=400&fit=crop&auto=format",
|
|
author: "Rachel Kim",
|
|
date: "January 3, 2025",
|
|
category: "Automation",
|
|
tags: ["Business Automation", "Digital Transformation"],
|
|
readTime: "10 min read",
|
|
},
|
|
{
|
|
id: 5,
|
|
title: "Mobile-First Design: Creating Exceptional User Experiences",
|
|
excerpt:
|
|
"Why mobile-first design is crucial for modern applications and how to implement it effectively.",
|
|
image:
|
|
"https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?auto=format&fit=crop&w=600&q=80",
|
|
author: "Emma Johnson",
|
|
date: "December 8, 2024",
|
|
category: "Tech Trends",
|
|
tags: ["Mobile", "UI/UX", "Design"],
|
|
readTime: "5 min read",
|
|
},
|
|
{
|
|
id: 6,
|
|
title:
|
|
"Cybersecurity in the Age of Remote Work: Protecting Your Digital Assets",
|
|
excerpt:
|
|
"Essential cybersecurity practices for protecting your business in an increasingly remote world.",
|
|
image:
|
|
"https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&w=600&q=80",
|
|
author: "James Wilson",
|
|
date: "December 5, 2024",
|
|
category: "Tech Trends",
|
|
tags: ["Cybersecurity", "Remote Work"],
|
|
readTime: "7 min read",
|
|
},
|
|
{
|
|
id: 7,
|
|
title:
|
|
"Complete Guide to Cloud Migration: Strategies, Challenges, and Solutions",
|
|
excerpt:
|
|
"A comprehensive guide to successfully migrating your infrastructure to the cloud with minimal disruption.",
|
|
image:
|
|
"https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=600&q=80",
|
|
author: "David Kumar",
|
|
date: "November 30, 2024",
|
|
category: "How-to Guides",
|
|
tags: ["Cloud", "Digital Transformation"],
|
|
readTime: "10 min read",
|
|
},
|
|
{
|
|
id: 8,
|
|
title:
|
|
"The Rise of Low-Code Development: Accelerating Digital Innovation",
|
|
excerpt:
|
|
"How low-code platforms are democratizing software development and accelerating digital transformation.",
|
|
image:
|
|
"https://images.unsplash.com/photo-1517077304055-6e89abbf09b0?auto=format&fit=crop&w=600&q=80",
|
|
author: "Lisa Thompson",
|
|
date: "November 28, 2024",
|
|
category: "Tech Trends",
|
|
tags: ["Software Development", "Innovation"],
|
|
readTime: "6 min read",
|
|
},
|
|
];
|
|
|
|
const filteredPosts = blogPosts.filter((post) => {
|
|
const matchesSearch =
|
|
post.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
post.excerpt.toLowerCase().includes(searchTerm.toLowerCase());
|
|
const matchesCategory =
|
|
selectedCategory === "all" || post.category === selectedCategory;
|
|
const matchesTag =
|
|
selectedTag === "all" || post.tags.some((tag) => tag === selectedTag);
|
|
|
|
return matchesSearch && matchesCategory && matchesTag;
|
|
});
|
|
const navigate = useNavigate();
|
|
|
|
const handlePostClick = (post: any) => {
|
|
if (typeof post.id === "string") {
|
|
// Navigate to dedicated article page
|
|
navigate(`/articles/${post.id}`);
|
|
} else {
|
|
// For placeholder posts, navigate to generic article detail
|
|
navigate("/articles/generic-article");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="dark min-h-screen bg-background">
|
|
{/* <Navigation /> */}
|
|
|
|
{/* Hero Section */}
|
|
<section className="pt-24 pb-16 bg-background">
|
|
<Helmet>
|
|
{/* Page Title and Meta Description */}
|
|
<title>Blogs | Thought Leadership in Software Development</title>
|
|
<meta
|
|
name="description"
|
|
content="Read expert blogs from WDI on software development and digital transformation. Stay informed with insights, trends, and thought leadership content."
|
|
/>
|
|
|
|
{/* Canonical Link */}
|
|
<link rel="canonical" href="https://www.wdipl.com/resources/blog" />
|
|
|
|
{/* Open Graph Tags (for Facebook, LinkedIn) */}
|
|
<meta property="og:title" content="Blogs | Thought Leadership in Software Development" />
|
|
<meta
|
|
property="og:description"
|
|
content="Read expert blogs from WDI on software development and digital transformation. Stay informed with insights, trends, and thought leadership content."
|
|
/>
|
|
<meta property="og:url" content="https://www.wdipl.com/services" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" />
|
|
|
|
{/* Twitter Card Tags */}
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content="Blogs | Thought Leadership in Software Development" />
|
|
<meta
|
|
name="twitter:description"
|
|
content="Read expert blogs from WDI on software development and digital transformation. Stay informed with insights, trends, and thought leadership content."
|
|
/>
|
|
<meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
|
|
|
|
{/* Social Profiles (using JSON-LD Schema) */}
|
|
<script type="application/ld+json">
|
|
{`
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "Organization",
|
|
"name": "WDI",
|
|
"url": "https://www.wdipl.com",
|
|
"sameAs": [
|
|
"https://www.facebook.com/wdideas",
|
|
"https://www.linkedin.com/in/website-developers-india/",
|
|
"https://www.instagram.com/wdipl/"
|
|
]
|
|
}
|
|
`}
|
|
</script>
|
|
</Helmet>
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<div className="max-w-4xl mx-auto text-center">
|
|
<div className="flex items-center justify-center gap-2 mb-6">
|
|
<BookOpen className="w-6 h-6 text-[#E5195E]" />
|
|
<Badge
|
|
variant="outline"
|
|
className="border-[#E5195E]/20 text-[#E5195E]"
|
|
>
|
|
WDI Blog
|
|
</Badge>
|
|
</div>
|
|
<h1 className="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-white via-white to-white/80 bg-clip-text text-transparent">
|
|
WDI Blog: Insights, Innovation & Industry Trends
|
|
</h1>
|
|
<p className="text-lg text-muted-foreground mb-8 max-w-3xl mx-auto">
|
|
Welcome to the WDI Blog, your go-to source for the latest
|
|
insights, expert opinions, and thought leadership in software
|
|
development and digital transformation. We cover a range of topics
|
|
from cutting-edge technologies to industry best practices,
|
|
designed to inform, inspire, and empower your digital journey.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Search and Filters */}
|
|
<section className="py-8 bg-card/50 border-y border-white/10">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<div className="flex flex-col lg:flex-row gap-4 items-center justify-between">
|
|
<div className="flex-1 max-w-md">
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
|
|
<Input
|
|
placeholder="Search articles..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="pl-10 bg-background/50 border-white/10"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-4">
|
|
<Select
|
|
value={selectedCategory}
|
|
onValueChange={setSelectedCategory}
|
|
>
|
|
<SelectTrigger className="w-48 bg-background/50 border-white/10 text-white">
|
|
<SelectValue
|
|
placeholder="Select Category"
|
|
className="text-white"
|
|
/>
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{categories.map((category) => (
|
|
<SelectItem
|
|
key={category}
|
|
value={category === "All Categories" ? "all" : category}
|
|
>
|
|
{category}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
<Select value={selectedTag} onValueChange={setSelectedTag}>
|
|
<SelectTrigger className="w-48 bg-background/50 border-white/10 text-white">
|
|
<SelectValue
|
|
placeholder="Select Tag"
|
|
className="text-white"
|
|
/>
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{tags.map((tag) => (
|
|
<SelectItem
|
|
key={tag}
|
|
value={tag === "All Tags" ? "all" : tag}
|
|
>
|
|
{tag}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Featured Posts */}
|
|
<section className="py-16 bg-background">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<h2 className="text-3xl font-bold text-white mb-12 text-center">
|
|
Featured Blogs
|
|
</h2>
|
|
|
|
<div className="grid lg:grid-cols-3 gap-8">
|
|
{featuredPosts.map((post) => (
|
|
<Card
|
|
key={post.id}
|
|
className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group cursor-pointer overflow-hidden"
|
|
onClick={() => handlePostClick(post)}
|
|
>
|
|
<div className="aspect-video overflow-hidden">
|
|
<img
|
|
src={post.image}
|
|
alt={post.title}
|
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
|
/>
|
|
</div>
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<Badge
|
|
variant="secondary"
|
|
className="bg-[#E5195E]/20 text-[#E5195E] border-none"
|
|
>
|
|
{post.category}
|
|
</Badge>
|
|
<span className="text-sm text-muted-foreground">
|
|
{post.readTime}
|
|
</span>
|
|
</div>
|
|
|
|
<h3 className="text-xl font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300 line-clamp-2">
|
|
{post.title}
|
|
</h3>
|
|
|
|
<p className="text-muted-foreground mb-4 line-clamp-3">
|
|
{post.excerpt}
|
|
</p>
|
|
|
|
<div className="flex flex-wrap gap-2 mb-4">
|
|
{post.tags.map((tag) => (
|
|
<Badge
|
|
key={tag}
|
|
variant="outline"
|
|
className="border-white/20 text-white/70 text-xs"
|
|
>
|
|
{tag}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between pt-4 border-t border-white/10">
|
|
<div className="flex items-center gap-2">
|
|
<User className="w-4 h-4 text-muted-foreground" />
|
|
<span className="text-sm text-muted-foreground">
|
|
{post.author}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Calendar className="w-4 h-4 text-muted-foreground" />
|
|
<span className="text-sm text-muted-foreground">
|
|
{post.date}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Blog Posts Grid */}
|
|
<section className="py-16 bg-card/50">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<div className="flex items-center justify-between mb-12">
|
|
<h2 className="text-3xl font-bold text-white">Latest Blogs</h2>
|
|
<div className="text-sm text-muted-foreground">
|
|
{filteredPosts.length} article
|
|
{filteredPosts.length !== 1 ? "s" : ""} found
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{filteredPosts.map((post) => (
|
|
<Card
|
|
key={post.id}
|
|
className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group cursor-pointer overflow-hidden"
|
|
onClick={() => handlePostClick(post)}
|
|
>
|
|
<div className="aspect-video overflow-hidden">
|
|
<img
|
|
src={post.image}
|
|
alt={post.title}
|
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
|
/>
|
|
</div>
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<Badge
|
|
variant="secondary"
|
|
className="bg-[#E5195E]/20 text-[#E5195E] border-none"
|
|
>
|
|
{post.category}
|
|
</Badge>
|
|
<span className="text-sm text-muted-foreground">
|
|
{post.readTime}
|
|
</span>
|
|
</div>
|
|
|
|
<h3 className="text-lg font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300 line-clamp-2">
|
|
{post.title}
|
|
</h3>
|
|
|
|
<p className="text-muted-foreground mb-4 line-clamp-3">
|
|
{post.excerpt}
|
|
</p>
|
|
|
|
<div className="flex flex-wrap gap-2 mb-4">
|
|
{post.tags.map((tag) => (
|
|
<Badge
|
|
key={tag}
|
|
variant="outline"
|
|
className="border-white/20 text-white/70 text-xs"
|
|
>
|
|
{tag}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between pt-4 border-t border-white/10">
|
|
<div className="flex items-center gap-2">
|
|
<User className="w-4 h-4 text-muted-foreground" />
|
|
<span className="text-sm text-muted-foreground">
|
|
{post.author}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Calendar className="w-4 h-4 text-muted-foreground" />
|
|
<span className="text-sm text-muted-foreground">
|
|
{post.date}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
|
|
{filteredPosts.length === 0 && (
|
|
<div className="text-center py-12">
|
|
<p className="text-muted-foreground">
|
|
No articles found matching your criteria.
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Newsletter Signup */}
|
|
<section className="py-16 bg-background">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<div className="max-w-2xl mx-auto text-center">
|
|
<h2 className="text-3xl font-bold text-white mb-4">
|
|
Never Miss an Update
|
|
</h2>
|
|
<p className="text-muted-foreground mb-8">
|
|
Subscribe to our newsletter for the latest blog posts and insights
|
|
directly to your inbox.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
|
|
<Input
|
|
type="email"
|
|
placeholder="Enter your email address"
|
|
className="flex-1 bg-card/50 border-white/10"
|
|
/>
|
|
<Button className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
|
|
Subscribe Now
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section className="py-16 bg-card/50">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<div className="max-w-4xl mx-auto text-center">
|
|
<h2 className="text-3xl font-bold text-white mb-6">
|
|
Ready to Transform Your Business?
|
|
</h2>
|
|
<p className="text-lg text-muted-foreground mb-8">
|
|
Get insights from our experts and discover how we can help
|
|
accelerate your digital transformation.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<Button
|
|
size="lg"
|
|
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
|
|
onClick={() => navigate("/resources/blog")}
|
|
>
|
|
Explore All Articles
|
|
<ArrowRight className="ml-2 w-4 h-4" />
|
|
</Button>
|
|
<Button
|
|
size="lg"
|
|
variant="outline"
|
|
className="border-white/20 text-white hover:bg-white/10"
|
|
// onClick={() => navigate('/contact')}
|
|
onClick={() => navigate("/start-a-project")}
|
|
>
|
|
Contact Our Experts
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* <Footer /> */}
|
|
</div>
|
|
);
|
|
};
|