WDIPL/Wdipl-react
2
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

worked on the image and and form and links

Browse Source
This commit is contained in:
Parth Ramani
2026-03-18 17:55:47 +05:30
parent 37a2959524
commit e09c0033bb
13 changed files with 129 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/aihospital.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
assets/hospitalise.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 533 KiB

3
components/HeroSection.tsx
View File

@@ -70,7 +70,8 @@ export function HeroSection() {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.3 }}
>
Architecting Digital Success for Startups & Enterprises
{/* Architecting Digital Success for Startups & Enterprises */}
AI mobile application developers for Startups & Enterprises
</motion.h1>
<motion.p

21
components/Navigation.tsx
View File

@@ -461,9 +461,9 @@ const navigationData = {
{ text: "Careers", icon: Briefcase, href: "/company/careers" },
],
resources: [
{
text: "Blogs",
icon: BookOpen,
{
text: "Blogs",
icon: BookOpen,
href: "https://www.wdipl.com/blog",
target: "_blank",
rel: "noopener noreferrer"
@@ -621,7 +621,7 @@ const MegaMenu = ({
timeoutRef,
}: MegaMenuProps) => {
const navigate = useNavigate();
if (!isOpen) return null;
const handleNavigate = (path: string, target?: string) => {
@@ -1030,9 +1030,8 @@ export const Navigation = () => {
{item}
{hasDropdown(item) && (
<ChevronDown
className={`w-4 h-4 transition-transform duration-200 ${
activeMenu === item ? "rotate-180" : ""
}`}
className={`w-4 h-4 transition-transform duration-200 ${activeMenu === item ? "rotate-180" : ""
}`}
/>
)}
</a>
@@ -1045,7 +1044,8 @@ export const Navigation = () => {
onClick={() => handleNavigation("/start-a-project")}
className="hidden lg:flex"
>
Get Started
{/* Get Started */}
Contact Us
</Button>
{/* Mobile Menu Button */}
@@ -1100,7 +1100,7 @@ export const Navigation = () => {
{item}
</a>
))}
{/* Mobile Resources Submenu */}
<div className="pl-4 space-y-2 border-l-2 border-[#E5195E]/30">
{navigationData.resources.map((resource) => (
@@ -1124,7 +1124,8 @@ export const Navigation = () => {
onClick={() => handleNavigation("/start-a-project")}
className="w-full mt-4"
>
Get Started
{/* Get Started */}
Contact Us
</Button>
</div>
</div>

23
components/PackagesSection.tsx
View File

@@ -15,7 +15,8 @@ const packages: Package[] = [
icon: <Tablet className="w-8 h-8" />,
title: "The Blueprint",
timeline: "Product Definition in 1 Week",
priceRange: "$1,500 - $2,500",
// priceRange: "$1,500 - $2,500",
priceRange: "",
features: [
"Strategy & roadmap",
"User flows & wireframes",
@@ -26,7 +27,9 @@ const packages: Package[] = [
icon: <Rocket className="w-8 h-8" />,
title: "The Prototype",
timeline: "Working Demo in 2 Weeks",
priceRange: "$6,000 - $8,000",
// priceRange: "$6,000 - $8,000",
priceRange: "",
features: [
"Functional web or mobile prototype",
"Core features implemented",
@@ -37,7 +40,9 @@ const packages: Package[] = [
icon: <Crown className="w-8 h-8" />,
title: "The Launchpad",
timeline: "Market-Ready MVP in 6 Weeks",
priceRange: "$20,000 - $30,000",
// priceRange: "$20,000 - $30,000",
priceRange: "",
features: [
"Full website or app",
"SEO-optimized & scalable",
@@ -50,7 +55,7 @@ export const PackagesSection = () => {
return (
<section className="relative py-20 bg-background overflow-hidden">
<GridPattern strokeDasharray="4 2" />
<div className="relative z-10 container mx-auto px-6 lg:px-8">
<motion.div
initial={{ opacity: 0, y: 30 }}
@@ -63,7 +68,7 @@ export const PackagesSection = () => {
Choose Your Speed. We'll Deliver Your Launch.
</h2>
</motion.div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
{packages.map((pkg, index) => (
<motion.div
@@ -78,22 +83,22 @@ export const PackagesSection = () => {
<div className="mb-6 inline-flex items-center justify-center w-16 h-16 rounded-full bg-accent/10 text-accent group-hover:bg-accent/20 group-hover:scale-110 transition-all duration-300">
{pkg.icon}
</div>
{/* Title */}
<h3 className="text-2xl font-semibold text-foreground mb-2 group-hover:text-accent transition-colors duration-300">
{pkg.title}
</h3>
{/* Timeline */}
<p className="text-muted-foreground mb-4">
{pkg.timeline}
</p>
{/* Price Range */}
<div className="text-3xl font-semibold text-foreground mb-8">
{pkg.priceRange}
</div>
{/* Features List */}
<ul className="space-y-4">
{pkg.features.map((feature, idx) => (

44
pages/AutomationReshapingBusiness.tsx
View File

@@ -9,6 +9,7 @@ import { Separator } from "../components/ui/separator";
import { Calendar, Clock, User, ArrowRight, Share2, Linkedin, Twitter, ExternalLink, Tag } from "lucide-react";
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { useNavigate } from "react-router-dom";
import hospitalAi from "../assets/aihospital.jpg"
const articleData = {
id: "automation-reshaping-business",
@@ -276,7 +277,8 @@ const articleData = {
title: "The Future of AI in Healthcare: Transforming Patient Care Through Technology",
excerpt: "Discover how artificial intelligence is revolutionizing healthcare delivery and patient outcomes.",
readTime: "12 min read",
image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=250&fit=crop&auto=format",
// image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=250&fit=crop&auto=format",
image: hospitalAi,
category: "Healthcare AI"
}
]
@@ -286,7 +288,7 @@ export const AutomationReshapingBusiness = () => {
const handleShare = (platform: string) => {
const url = encodeURIComponent(window.location.href);
const title = encodeURIComponent(articleData.title);
let shareUrl = '';
switch (platform) {
case 'linkedin':
@@ -299,7 +301,7 @@ export const AutomationReshapingBusiness = () => {
shareUrl = `https://wa.me/?text=${title} ${url}`;
break;
}
if (shareUrl) {
window.open(shareUrl, '_blank', 'width=600,height=400');
}
@@ -310,7 +312,7 @@ export const AutomationReshapingBusiness = () => {
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">
@@ -377,13 +379,13 @@ export const AutomationReshapingBusiness = () => {
<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
@@ -478,15 +480,15 @@ export const AutomationReshapingBusiness = () => {
{/* 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}`)}
>
@@ -508,11 +510,11 @@ export const AutomationReshapingBusiness = () => {
</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')}
>
@@ -527,10 +529,10 @@ export const AutomationReshapingBusiness = () => {
<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')}
>
@@ -552,21 +554,21 @@ export const AutomationReshapingBusiness = () => {
Enjoyed this article? Let's talk.
</h2>
<p className="text-muted-foreground mb-8 max-w-2xl mx-auto">
Ready to automate your business operations and drive efficiency? Our team of experts is here to help you
Ready to automate your business operations and drive efficiency? Our team of experts is here to help you
implement intelligent automation solutions that transform your business processes.
</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 Automation Journey
<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')}
>

6
pages/Blog.tsx
View File

@@ -5,6 +5,7 @@ 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,
@@ -57,8 +58,9 @@ export const Blog = () => {
"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:
// "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",

4
pages/ComplianceReadyFintech.tsx
View File

@@ -6,6 +6,7 @@ import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card";
import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
import { Separator } from "../components/ui/separator";
import hosptialAi from "../assets/aihospital.jpg"
import { Calendar, Clock, User, ArrowRight, Share2, Linkedin, Twitter, ExternalLink, Tag } from "lucide-react";
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { useNavigate } from "react-router-dom";
@@ -196,7 +197,8 @@ const articleData = {
title: "The Future of AI in Healthcare: Transforming Patient Care Through Technology",
excerpt: "Discover how artificial intelligence is revolutionizing healthcare delivery and patient outcomes.",
readTime: "12 min read",
image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=250&fit=crop&auto=format",
// image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=250&fit=crop&auto=format",
image: hosptialAi,
category: "Healthcare AI"
},
{

18
pages/ComplianceReadySystems.tsx
View File

@@ -27,6 +27,7 @@ import {
X,
} from "lucide-react";
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import hospitalize from "../assets/hospitalise.jpg"
import { Footer } from "../components/Footer";
import { Navigation } from "../components/Navigation";
import {
@@ -227,8 +228,8 @@ const ComplianceReadySystemsHero = () => {
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5, delay: item.delay }}
className={`p-3 rounded-lg border text-center ${item.status === "compliant"
? "bg-green-500/10 border-green-500/30"
: "bg-orange-500/10 border-orange-500/30"
? "bg-green-500/10 border-green-500/30"
: "bg-orange-500/10 border-orange-500/30"
}`}
>
<div className="flex items-center justify-center mb-2">
@@ -240,16 +241,16 @@ const ComplianceReadySystemsHero = () => {
</div>
<div
className={`text-sm font-medium ${item.status === "compliant"
? "text-green-300"
: "text-orange-300"
? "text-green-300"
: "text-orange-300"
}`}
>
{item.standard}
</div>
<div
className={`text-xs ${item.status === "compliant"
? "text-green-400"
: "text-orange-400"
? "text-green-400"
: "text-orange-400"
}`}
>
{item.status === "compliant"
@@ -1141,8 +1142,9 @@ const ComplianceReadySystemsCaseStudies = () => {
client: "Healthcare Provider",
description:
"Developed a secure platform for patient data, achieving full HIPAA compliance within 8 months while ensuring seamless patient-provider communication and maintaining the highest security standards for protected health information.",
image:
"https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
// image:
// "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
image: hospitalize,
results: "Full HIPAA compliance in 8 months",
engagement: "Healthcare compliance success",
gradient: "from-blue-500/20 to-cyan-500/20",

46
pages/FutureOfAIHealthcare.tsx
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')}
>

24
pages/HealthTechApplications.tsx
View File

@@ -35,6 +35,7 @@ import {
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { Footer } from "../components/Footer";
import { Navigation } from "../components/Navigation";
import hospitalize from "../assets/hospitalise.jpg"
import {
Accordion,
AccordionContent,
@@ -391,18 +392,18 @@ const HealthTechHero = () => {
>
<div
className={`w-8 h-8 rounded-full flex items-center justify-center ${activity.color === "blue"
? "bg-blue-500/20"
: activity.color === "green"
? "bg-green-500/20"
: "bg-purple-500/20"
? "bg-blue-500/20"
: activity.color === "green"
? "bg-green-500/20"
: "bg-purple-500/20"
}`}
>
<activity.icon
className={`w-4 h-4 ${activity.color === "blue"
? "text-blue-400"
: activity.color === "green"
? "text-green-400"
: "text-purple-400"
? "text-blue-400"
: activity.color === "green"
? "text-green-400"
: "text-purple-400"
}`}
/>
</div>
@@ -983,9 +984,10 @@ const HealthTechCaseStudies = () => {
"WDI developed an end-to-end telemedicine solution with secure video conferencing, appointment scheduling, e-prescribing, and patient record access, ensuring full HIPAA compliance.",
results:
"Enabled 30% more patient consultations and extended reach to underserved areas, significantly improving patient access.",
image:
"https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
engagement: "Telehealth transformation",
// image:
// "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
// engagement: "Telehealth transformation",
image: hospitalize,
gradient: "from-blue-500/20 to-cyan-500/20",
},
{

3
pages/Homepage.tsx
View File

@@ -185,7 +185,8 @@ export const Homepage = () => {
<div className="text-center">
<h2 className="text-3xl sm:text-4xl font-semibold tracking-tight text-white">What We Do</h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
End-to-end solutions for every stage of your product lifecycle.
{/* End-to-end solutions for every stage of your product lifecycle. */}
We are the ai app development company, End-to-end solutions for every stage of your product lifecycle.
</p>
</div>
</motion.div>

44
pages/LegacySystemScaling.tsx
View File

@@ -6,6 +6,7 @@ import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card";
import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
import { Separator } from "../components/ui/separator";
import hosptialAi from "../assets/aihospital.jpg"
import { Calendar, Clock, User, ArrowRight, Share2, Linkedin, Twitter, ExternalLink, Tag } from "lucide-react";
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { useNavigate } from "react-router-dom";
@@ -218,7 +219,8 @@ const articleData = {
title: "The Future of AI in Healthcare: Transforming Patient Care Through Technology",
excerpt: "Discover how artificial intelligence is revolutionizing healthcare delivery and patient outcomes.",
readTime: "12 min read",
image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=250&fit=crop&auto=format",
// image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=250&fit=crop&auto=format",
image: hosptialAi,
category: "Healthcare AI"
},
{
@@ -236,7 +238,7 @@ export const LegacySystemScaling = () => {
const handleShare = (platform: string) => {
const url = encodeURIComponent(window.location.href);
const title = encodeURIComponent(articleData.title);
let shareUrl = '';
switch (platform) {
case 'linkedin':
@@ -249,7 +251,7 @@ export const LegacySystemScaling = () => {
shareUrl = `https://wa.me/?text=${title} ${url}`;
break;
}
if (shareUrl) {
window.open(shareUrl, '_blank', 'width=600,height=400');
}
@@ -260,7 +262,7 @@ export const LegacySystemScaling = () => {
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">
@@ -327,13 +329,13 @@ export const LegacySystemScaling = () => {
<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
@@ -429,15 +431,15 @@ export const LegacySystemScaling = () => {
{/* 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}`)}
>
@@ -459,11 +461,11 @@ export const LegacySystemScaling = () => {
</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')}
>
@@ -478,10 +480,10 @@ export const LegacySystemScaling = () => {
<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')}
>
@@ -503,21 +505,21 @@ export const LegacySystemScaling = () => {
Enjoyed this article? Let's talk.
</h2>
<p className="text-muted-foreground mb-8 max-w-2xl mx-auto">
Ready to scale your legacy system or modernize your infrastructure? Our team of experts is here to help you
Ready to scale your legacy system or modernize your infrastructure? Our team of experts is here to help you
build scalable, high-performance systems that grow with your business.
</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 Modernization 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')}
>