worked on the image and and form and links

This commit is contained in:
2026-03-18 17:55:47 +05:30
parent 37a2959524
commit e09c0033bb
13 changed files with 129 additions and 107 deletions

View File

@@ -7,6 +7,7 @@ import { Card, CardContent } from "../components/ui/card";
import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
import { Separator } from "../components/ui/separator";
import { Calendar, Clock, User, ArrowRight, Share2, Linkedin, Twitter, ExternalLink, Tag } from "lucide-react";
import hosptialAi from "../assets/aihospital.jpg"
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { useNavigate } from "react-router-dom";
@@ -109,7 +110,8 @@ const articleData = {
readTime: "12 min read",
category: "Healthcare AI",
tags: ["Artificial Intelligence", "Healthcare", "Medical Technology", "Digital Health", "Machine Learning"],
bannerImage: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=1200&h=600&fit=crop&auto=format",
// bannerImage: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=1200&h=600&fit=crop&auto=format",
bannerImage: hosptialAi,
relatedArticles: [
{
id: "compliance-ready-systems-fintech",
@@ -123,7 +125,7 @@ const articleData = {
id: "automation-reshaping-business",
title: "5 Ways Automation is Reshaping Business Operations",
excerpt: "Discover how intelligent automation is transforming modern business processes and operations.",
readTime: "10 min read",
readTime: "10 min read",
image: "https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=400&h=250&fit=crop&auto=format",
category: "Automation"
},
@@ -142,7 +144,7 @@ export const FutureOfAIHealthcare = () => {
const handleShare = (platform: string) => {
const url = encodeURIComponent(window.location.href);
const title = encodeURIComponent(articleData.title);
let shareUrl = '';
switch (platform) {
case 'linkedin':
@@ -155,7 +157,7 @@ export const FutureOfAIHealthcare = () => {
shareUrl = `https://wa.me/?text=${title} ${url}`;
break;
}
if (shareUrl) {
window.open(shareUrl, '_blank', 'width=600,height=400');
}
@@ -166,7 +168,7 @@ export const FutureOfAIHealthcare = () => {
return (
<div className="dark min-h-screen bg-background">
{/* <Navigation /> */}
{/* Hero Section */}
<section className="pt-24 pb-16 bg-background">
<div className="container mx-auto px-6 lg:px-8">
@@ -233,13 +235,13 @@ export const FutureOfAIHealthcare = () => {
<section className="py-16 bg-card/50">
<div className="container mx-auto px-6 lg:px-8">
<div className="grid lg:grid-cols-10 gap-12 max-w-7xl mx-auto">
{/* Article Content - 70% */}
<article className="lg:col-span-7">
<Card className="bg-background/50 border-white/10">
<CardContent className="p-8 lg:p-12">
{/* Article Body */}
<div
<div
className="prose prose-invert prose-lg max-w-none
prose-headings:text-white prose-headings:font-semibold
prose-h2:text-3xl prose-h2:mt-12 prose-h2:mb-6
@@ -334,15 +336,15 @@ export const FutureOfAIHealthcare = () => {
{/* Sidebar - 30% */}
<aside className="lg:col-span-3 space-y-8">
{/* Related Articles */}
<Card className="bg-background/50 border-white/10">
<CardContent className="p-6">
<h3 className="text-xl font-semibold text-white mb-6">You Might Also Like</h3>
<div className="space-y-6">
{articleData.relatedArticles.map((article) => (
<div
key={article.id}
<div
key={article.id}
className="group cursor-pointer"
onClick={() => navigate(`/articles/${article.id}`)}
>
@@ -364,11 +366,11 @@ export const FutureOfAIHealthcare = () => {
</div>
))}
</div>
<Separator className="my-6" />
<Button
variant="outline"
<Button
variant="outline"
className="w-full border-white/20 text-white hover:bg-white/10"
onClick={() => navigate('/resources/blog')}
>
@@ -383,10 +385,10 @@ export const FutureOfAIHealthcare = () => {
<CardContent className="p-6">
<h3 className="text-xl font-semibold text-white mb-4">About WDI</h3>
<p className="text-muted-foreground text-sm leading-relaxed mb-4">
Web Development Institute helps startups and enterprises build scalable, secure digital products.
Web Development Institute helps startups and enterprises build scalable, secure digital products.
With 25+ years of experience, we've delivered 200+ successful projects across 15+ countries.
</p>
<Button
<Button
className="w-full bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
onClick={() => navigate('/contact')}
>
@@ -408,21 +410,21 @@ export const FutureOfAIHealthcare = () => {
Enjoyed this article? Let's talk.
</h2>
<p className="text-muted-foreground mb-8 max-w-2xl mx-auto">
Ready to transform your healthcare technology with AI? Our team of experts is here to help you build
Ready to transform your healthcare technology with AI? Our team of experts is here to help you build
innovative solutions that improve patient outcomes and operational efficiency.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button
size="lg"
<Button
size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
onClick={() => navigate('/contact')}
>
Start Your AI Project
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
<Button
size="lg"
variant="outline"
<Button
size="lg"
variant="outline"
className="border-white/20 text-white hover:bg-white/10"
onClick={() => navigate('/resources/blog')}
>