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

changes 1 - 21/07

Browse Source
This commit is contained in:
priyanshuvish
2025-07-21 15:57:34 +05:30
parent b54a0ddcc8
commit 312c23392c
32 changed files with 3829 additions and 1704 deletions
Download Patch File Download Diff File Expand all files Collapse all files

279
pages/SoftwareEngineering.tsx
View File

@@ -1,26 +1,29 @@
import React from "react";
import { motion } from "framer-motion";
import { Navigation } from "../components/Navigation";
import { Footer } from "../components/Footer";
import { ProcessSection } from "../components/ProcessSection";
import { FAQSection } from "../components/FAQSection";
import { AnimatedGradientText } from "../components/AnimatedGradientText";
import { Button } from "../components/ui/button";
import { ShimmerButton } from "../components/ui/shimmer-button";
import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card";
import { GridPattern } from "../components/GridPattern";
import { navigateTo } from "../App";
import {
Code, Cpu, Database, Server, Shield, Zap, Users, Star,
ArrowRight, ChevronRight, Clock, TrendingUp, Layers,
Target, Layout, Rocket, Monitor, Lock, RefreshCcw, ShieldCheck,
MessageSquare, Heart, CheckCircle, Lightbulb, Coffee,
Download, Calendar, Camera, Music, Gamepad2,
CreditCard, Bell, Mail, Search, Home, MapPin,
Github, Slack, Figma, Chrome, Zap as ZapIcon, Video, MessageCircle, Brain,
Cog, Settings, Sparkles, Handshake, Eye, Award, UserPlus, Building, Package
import {
Building,
Calendar,
CheckCircle,
Code,
Eye,
Layers,
RefreshCcw,
Rocket,
Server,
Settings,
Shield,
TrendingUp,
UserPlus,
Zap,
} from "lucide-react";
import { navigateTo } from "../App";
import { FAQSection } from "../components/FAQSection";
import { Footer } from "../components/Footer";
import { Navigation } from "../components/Navigation";
import { ProcessSection } from "../components/ProcessSection";
import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button";
// Enhanced Hero Section
const HeroWithCTA = () => {
@@ -40,7 +43,9 @@ const HeroWithCTA = () => {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
>
<span className="text-white/70 text-sm font-medium">Software Engineering</span>
<span className="text-white/70 text-sm font-medium">
Software Engineering
</span>
</motion.div>
{/* Main Heading */}
@@ -50,12 +55,13 @@ const HeroWithCTA = () => {
<span className="text-[#E5195E]">Software Engineering</span>
<span className="text-white"> Solutions</span>
</h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Build robust, scalable enterprise software systems with modern engineering practices and proven methodologies.
Build robust, scalable enterprise software systems with modern
engineering practices and proven methodologies.
</p>
</div>
{/* CTAs */}
<motion.div
initial={{ opacity: 0, y: 20 }}
@@ -63,7 +69,11 @@ const HeroWithCTA = () => {
transition={{ duration: 0.8, delay: 0.3 }}
className="flex flex-col sm:flex-row gap-4"
>
<ShimmerButton className="text-lg px-8 py-4" onClick={() => navigateTo('/contact/schedule-a-discovery-call')}>
<ShimmerButton
className="text-lg px-8 py-4"
// onClick={() => navigateTo('/contact/schedule-a-discovery-call')}
onClick={() => navigateTo("/start-a-project")}
>
<div className="inline-flex items-center gap-2">
<Calendar className="w-4 h-4 flex-shrink-0" />
<span>Discuss Your Project</span>
@@ -72,15 +82,15 @@ const HeroWithCTA = () => {
<Button
variant="secondary"
size="lg"
className="text-lg px-8 py-4"
onClick={() => navigateTo('/case-studies')}
className="text-lg px-8 py-4 h-[56px]"
onClick={() => navigateTo("/case-studies")}
>
<Eye className="w-4 h-4 flex-shrink-0" />
<span>View Case Studies</span>
</Button>
</motion.div>
</motion.div>
{/* Right side with stats */}
<motion.div
initial={{ opacity: 0, x: 50 }}
@@ -95,23 +105,39 @@ const HeroWithCTA = () => {
className="grid grid-cols-2 gap-8 text-center"
>
<div className="space-y-2 flex flex-col items-center">
<div className="text-3xl lg:text-4xl font-bold text-white">150+</div>
<div className="text-sm text-gray-400 leading-tight">Software Systems</div>
<div className="text-3xl lg:text-4xl font-bold text-white">
150+
</div>
<div className="text-sm text-gray-400 leading-tight">
Software Systems
</div>
</div>
<div className="space-y-2 flex flex-col items-center">
<div className="text-3xl lg:text-4xl font-bold text-white">95%</div>
<div className="text-sm text-gray-400 leading-tight">Code Quality Score</div>
<div className="text-3xl lg:text-4xl font-bold text-white">
95%
</div>
<div className="text-sm text-gray-400 leading-tight">
Code Quality Score
</div>
</div>
<div className="space-y-2 flex flex-col items-center">
<div className="text-3xl lg:text-4xl font-bold text-white">60%</div>
<div className="text-sm text-gray-400 leading-tight">Faster Development</div>
<div className="text-3xl lg:text-4xl font-bold text-white">
60%
</div>
<div className="text-sm text-gray-400 leading-tight">
Faster Development
</div>
</div>
<div className="space-y-2 flex flex-col items-center">
<div className="text-3xl lg:text-4xl font-bold text-white">24/7</div>
<div className="text-sm text-gray-400 leading-tight">System Reliability</div>
<div className="text-3xl lg:text-4xl font-bold text-white">
24/7
</div>
<div className="text-sm text-gray-400 leading-tight">
System Reliability
</div>
</div>
</motion.div>
</motion.div>
@@ -124,12 +150,16 @@ const HeroWithCTA = () => {
// Enhanced Horizontal Tag Scroller with Engineering Practices
const HorizontalTagScroller = () => {
const practices = [
{ name: "Microservices Architecture", icon: Layers, color: "text-blue-400" },
{
name: "Microservices Architecture",
icon: Layers,
color: "text-blue-400",
},
{ name: "DevOps & CI/CD", icon: Zap, color: "text-green-400" },
{ name: "API-First Design", icon: Code, color: "text-purple-400" },
{ name: "Test-Driven Development", icon: Shield, color: "text-cyan-400" },
{ name: "Agile Methodologies", icon: TrendingUp, color: "text-orange-400" },
{ name: "System Integration", icon: Settings, color: "text-yellow-400" }
{ name: "System Integration", icon: Settings, color: "text-yellow-400" },
];
return (
@@ -148,10 +178,11 @@ const HorizontalTagScroller = () => {
<span className="text-foreground"> We Follow</span>
</h2>
<p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
Industry-leading methodologies that ensure code quality, scalability, and maintainability.
Industry-leading methodologies that ensure code quality,
scalability, and maintainability.
</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -161,7 +192,7 @@ const HorizontalTagScroller = () => {
>
<div className="absolute left-0 top-0 bottom-0 w-20 bg-gradient-to-r from-card to-transparent z-10 pointer-events-none"></div>
<div className="absolute right-0 top-0 bottom-0 w-20 bg-gradient-to-l from-card to-transparent z-10 pointer-events-none"></div>
<div className="flex animate-marquee hover:animate-marquee-paused">
{/* First set */}
{practices.map((practice, index) => {
@@ -177,7 +208,9 @@ const HorizontalTagScroller = () => {
>
<div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 px-8 py-6 hover:border-accent/30 transition-all duration-300 cursor-pointer shadow-lg hover:shadow-xl min-w-fit group-hover:scale-105 group-hover:-translate-y-1">
<div className="flex items-center gap-4">
<div className={`w-8 h-8 flex items-center justify-center ${practice.color}`}>
<div
className={`w-8 h-8 flex items-center justify-center ${practice.color}`}
>
<IconComponent className="w-6 h-6" />
</div>
<span className="text-xl font-medium text-foreground whitespace-nowrap">
@@ -188,7 +221,7 @@ const HorizontalTagScroller = () => {
</motion.div>
);
})}
{/* Second and third sets for seamless loop */}
{[...practices, ...practices].map((practice, index) => {
const IconComponent = practice.icon;
@@ -197,13 +230,18 @@ const HorizontalTagScroller = () => {
key={`loop-${practice.name}-${index}`}
initial={{ opacity: 0, scale: 0.8 }}
whileInView={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5, delay: (index + practices.length) * 0.1 }}
transition={{
duration: 0.5,
delay: (index + practices.length) * 0.1,
}}
viewport={{ once: true }}
className="group flex-shrink-0 mx-3"
>
<div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 px-8 py-6 hover:border-accent/30 transition-all duration-300 cursor-pointer shadow-lg hover:shadow-xl min-w-fit group-hover:scale-105 group-hover:-translate-y-1">
<div className="flex items-center gap-4">
<div className={`w-8 h-8 flex items-center justify-center ${practice.color}`}>
<div
className={`w-8 h-8 flex items-center justify-center ${practice.color}`}
>
<IconComponent className="w-6 h-6" />
</div>
<span className="text-xl font-medium text-foreground whitespace-nowrap">
@@ -227,28 +265,28 @@ const SideBySideContentWithIcons = () => {
{
id: "architecture",
title: "Robust Architecture",
icon: Building
icon: Building,
},
{
id: "quality",
id: "quality",
title: "Code Quality Excellence",
icon: CheckCircle
icon: CheckCircle,
},
{
id: "scalability",
title: "Future-Proof Scalability",
icon: TrendingUp
icon: TrendingUp,
},
{
id: "integration",
title: "Seamless Integration",
icon: Layers
icon: Layers,
},
{
id: "maintenance",
title: "Long-Term Maintainability",
icon: Settings
}
icon: Settings,
},
];
return (
@@ -266,7 +304,7 @@ const SideBySideContentWithIcons = () => {
<span className="text-[#E5195E]">WDI</span>
<span className="text-white"> for Software Engineering</span>
</h2>
<p className="text-2xl text-gray-300 leading-relaxed">
Engineering excellence that stands the test of time.
</p>
@@ -297,7 +335,7 @@ const SideBySideContentWithIcons = () => {
<div className="mb-6">
<IconComponent className="w-10 h-10 text-accent mx-auto" />
</div>
<h3 className="text-lg font-semibold text-white leading-tight">
{advantage.title}
</h3>
@@ -318,39 +356,44 @@ const TabbedServiceDisplay = () => {
{
title: "Enterprise Software Solutions",
icon: Building,
description: "Complex enterprise systems with robust architecture and scalability.",
link: "/services/enterprise-software-solutions"
description:
"Complex enterprise systems with robust architecture and scalability.",
link: "/services/enterprise-software-solutions",
},
{
title: "System Architecture & DevOps",
title: "System Architecture & DevOps",
icon: Layers,
description: "Modern system design with automated deployment and monitoring.",
link: "/services/system-architecture-devops"
description:
"Modern system design with automated deployment and monitoring.",
link: "/services/system-architecture-devops",
},
{
title: "Third-Party Integrations",
icon: Zap,
description: "Seamless integration with existing systems and external services.",
link: "/services/third-party-integrations"
description:
"Seamless integration with existing systems and external services.",
link: "/services/third-party-integrations",
},
{
title: "Product Modernization",
icon: RefreshCcw,
description: "Upgrade legacy systems with modern technologies and practices.",
link: "/services/product-modernization"
description:
"Upgrade legacy systems with modern technologies and practices.",
link: "/services/product-modernization",
},
{
title: "API & Backend Development",
icon: Server,
description: "Robust APIs and scalable backend infrastructure solutions.",
link: "/services/api-backend-development"
link: "/services/api-backend-development",
},
{
title: "Custom Software Development",
icon: Code,
description: "Tailored software solutions built to your specific requirements.",
link: "/services/custom-web-app-development"
}
description:
"Tailored software solutions built to your specific requirements.",
link: "/services/custom-web-app-development",
},
];
return (
@@ -367,10 +410,11 @@ const TabbedServiceDisplay = () => {
Software Engineering Services
</h2>
<p className="text-lg text-gray-300 max-w-4xl mx-auto leading-relaxed">
Comprehensive software engineering solutions designed for enterprise-grade performance and reliability.
Comprehensive software engineering solutions designed for
enterprise-grade performance and reliability.
</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -396,7 +440,7 @@ const TabbedServiceDisplay = () => {
<div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center">
<IconComponent className="w-6 h-6 text-accent" />
</div>
<div>
<h3 className="text-xl font-semibold text-white mb-4">
{service.title}
@@ -440,37 +484,44 @@ const InlineCTA = () => {
<div className="bg-gradient-to-r from-[#E5195E]/20 to-purple-500/20 border border-[#E5195E]/30 rounded-full px-6 py-3">
<div className="flex items-center gap-2">
<Rocket className="w-4 h-4 text-[#E5195E]" />
<span className="text-[#E5195E] text-sm font-medium">Ready to Launch?</span>
<span className="text-[#E5195E] text-sm font-medium">
Ready to Launch?
</span>
</div>
</div>
</div>
{/* Main Heading */}
<h2 className="text-4xl lg:text-5xl font-semibold leading-tight">
<span className="text-foreground">Build Enterprise Software with </span>
<span className="text-foreground">
Build Enterprise Software with{" "}
</span>
<span className="text-[#E5195E]">Engineering Excellence</span>
</h2>
{/* Subtitle */}
<p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
Robust, scalable systems engineered with modern practices and proven methodologies.
Robust, scalable systems engineered with modern practices and
proven methodologies.
</p>
{/* CTA Button */}
<div className="flex flex-col items-center gap-4">
<ShimmerButton
<ShimmerButton
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl bg-[#E5195E] hover:bg-[#E5195E]/90"
onClick={() => navigateTo('/contact/schedule-a-discovery-call')}
// onClick={() => navigateTo('/contact/schedule-a-discovery-call')}
onClick={() => navigateTo("/start-a-project")}
>
<div className="inline-flex items-center gap-3">
<Code className="w-6 h-6 flex-shrink-0" />
<span>Start Your Software Project</span>
</div>
</ShimmerButton>
{/* Small benefit text */}
<p className="text-sm text-muted-foreground">
Architecture review • Code quality audit • Technical consultation
Architecture review • Code quality audit • Technical
consultation
</p>
</div>
</motion.div>
@@ -489,15 +540,15 @@ const HireDevelopersSection = () => {
skills: ["System Design", "Microservices", "Scalability"],
iconBg: "bg-blue-500",
iconColor: "text-white",
link: "/hire-talent/full-stack-developers"
link: "/hire-talent/full-stack-developers",
},
{
title: "Backend Engineers",
title: "Backend Engineers",
icon: Server,
skills: ["Node.js", "Python", "Java", "Go"],
iconBg: "bg-green-500",
iconColor: "text-white",
link: "/hire-talent/backend-developers"
link: "/hire-talent/backend-developers",
},
{
title: "DevOps Engineers",
@@ -505,7 +556,7 @@ const HireDevelopersSection = () => {
skills: ["CI/CD", "Docker", "Kubernetes", "AWS"],
iconBg: "bg-purple-500",
iconColor: "text-white",
link: "/hire-talent/full-stack-developers"
link: "/hire-talent/full-stack-developers",
},
{
title: "Full Stack Developers",
@@ -513,8 +564,8 @@ const HireDevelopersSection = () => {
skills: ["React", "Node.js", "TypeScript", "APIs"],
iconBg: "bg-orange-500",
iconColor: "text-white",
link: "/hire-talent/full-stack-developers"
}
link: "/hire-talent/full-stack-developers",
},
];
return (
@@ -532,10 +583,11 @@ const HireDevelopersSection = () => {
<span className="text-[#E5195E]">Engineering Experts</span>
</h2>
<p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
Get access to senior software engineers who build robust, scalable enterprise systems.
Get access to senior software engineers who build robust, scalable
enterprise systems.
</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -560,8 +612,12 @@ const HireDevelopersSection = () => {
{/* Header */}
<div className="p-8 pb-6">
<div className="flex items-start gap-4 mb-6">
<div className={`w-12 h-12 ${specialist.iconBg} rounded-xl flex items-center justify-center backdrop-blur-sm`}>
<IconComponent className={`w-6 h-6 ${specialist.iconColor}`} />
<div
className={`w-12 h-12 ${specialist.iconBg} rounded-xl flex items-center justify-center backdrop-blur-sm`}
>
<IconComponent
className={`w-6 h-6 ${specialist.iconColor}`}
/>
</div>
<div className="flex-1">
<div className="text-xs text-muted-foreground mb-2 uppercase tracking-wider">
@@ -569,26 +625,30 @@ const HireDevelopersSection = () => {
</div>
</div>
</div>
<h3 className="text-xl font-semibold text-foreground mb-4 leading-tight">
{specialist.title}
</h3>
</div>
{/* Skills */}
<div className="px-8 pb-6 flex-1">
<div className="flex flex-wrap gap-2">
{specialist.skills.map((skill) => (
<Badge key={skill} variant="secondary" className="text-xs bg-white/10 text-foreground">
<Badge
key={skill}
variant="secondary"
className="text-xs bg-white/10 text-foreground"
>
{skill}
</Badge>
))}
</div>
</div>
{/* CTA */}
<div className="p-8 pt-0 mt-auto space-y-3">
<ShimmerButton
<ShimmerButton
className="w-full py-3 text-sm rounded-xl shadow-lg hover:shadow-xl"
onClick={() => navigateTo(specialist.link)}
>
@@ -613,24 +673,29 @@ const HireDevelopersSection = () => {
const softwareEngineeringFAQs = [
{
question: "What software engineering methodologies do you follow?",
answer: "We follow modern engineering practices including Agile/Scrum, DevOps, Test-Driven Development, continuous integration/deployment, and microservices architecture to ensure high-quality, maintainable software."
answer:
"We follow modern engineering practices including Agile/Scrum, DevOps, Test-Driven Development, continuous integration/deployment, and microservices architecture to ensure high-quality, maintainable software.",
},
{
question: "How do you ensure code quality and maintainability?",
answer: "We implement comprehensive code review processes, automated testing, static code analysis, documentation standards, and follow SOLID principles and design patterns to ensure long-term maintainability."
answer:
"We implement comprehensive code review processes, automated testing, static code analysis, documentation standards, and follow SOLID principles and design patterns to ensure long-term maintainability.",
},
{
question: "Can you modernize our existing legacy software?",
answer: "Yes, we specialize in legacy system modernization including code refactoring, architecture updates, technology migration, and gradual system replacement while maintaining business continuity."
answer:
"Yes, we specialize in legacy system modernization including code refactoring, architecture updates, technology migration, and gradual system replacement while maintaining business continuity.",
},
{
question: "What is your approach to system architecture?",
answer: "We design scalable, modular architectures using microservices, API-first approaches, cloud-native patterns, and modern frameworks that can evolve with your business requirements."
answer:
"We design scalable, modular architectures using microservices, API-first approaches, cloud-native patterns, and modern frameworks that can evolve with your business requirements.",
},
{
question: "Do you provide ongoing software maintenance?",
answer: "Yes, we offer comprehensive maintenance services including bug fixes, performance optimization, security updates, feature enhancements, and 24/7 monitoring to keep your software running smoothly."
}
answer:
"Yes, we offer comprehensive maintenance services including bug fixes, performance optimization, security updates, feature enhancements, and 24/7 monitoring to keep your software running smoothly.",
},
];
export function SoftwareEngineering() {
@@ -644,7 +709,7 @@ export function SoftwareEngineering() {
<ProcessSection />
<InlineCTA />
<HireDevelopersSection />
<FAQSection
<FAQSection
title="Software Engineering Questions"
subtitle="Get answers to common questions about our software engineering services."
faqs={softwareEngineeringFAQs}
@@ -652,4 +717,4 @@ export function SoftwareEngineering() {
<Footer />
</div>
);
}
}