108:"ExplicitChatIdProvider" 109:I[903690,["$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$7e","$84","$85","$86","$80","$87","$82","$81","$88","$89","$8a","$8b","$8c"],"$108"] 10a:I[838238,["$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$7e","$84","$85","$86","$80","$87","$82","$81","$88","$89","$8a","$8b","$8c"],"SWRDataProvider"] 10c:[] 10d:[["VfEdYBN3pEQ","b_ez62LuHTzIj"],["b_gaCGKfRiUBd",null]] 10e:[["VfEdYBN3pEQ",{"templateVersionId":null,"templateCanonId":null}],["b_gaCGKfRiUBd",{"templateVersionId":null,"templateCanonId":null}]] 10f:[["VfEdYBN3pEQ","$D2025-07-07T08:47:12.061Z"],["b_gaCGKfRiUBd","$D2025-07-07T08:50:04.118Z"]] 110:[["VfEdYBN3pEQ",false],["b_gaCGKfRiUBd",false]] 111:[["VfEdYBN3pEQ","$undefined"],["b_gaCGKfRiUBd","$undefined"]] 112:[["VfEdYBN3pEQ",null],["b_gaCGKfRiUBd",null]] 113:[["VfEdYBN3pEQ",true],["b_gaCGKfRiUBd",true]] 114:[["VfEdYBN3pEQ",true],["b_gaCGKfRiUBd",true]] 115:[] 116:T1ab9,add server.jsconst { createServer } = require("http")const { parse } = require("url")const next = require("next")const dev = process.env.NODE_ENV !== "production"const hostname = process.env.HOSTNAME || "localhost"// Function to find an available portasync function findAvailablePort(startPort = 3000) {const net = require("net")return new Promise((resolve, reject) => {const server = net.createServer() server.listen(startPort, (err) => {if (err) { server.close()if (err.code === "EADDRINUSE") {// Try next portfindAvailablePort(startPort + 1) .then(resolve) .catch(reject) } else {reject(err) } } else {const port = server.address().port server.close(() => {resolve(port) }) } }) server.on("error", (err) => {if (err.code === "EADDRINUSE") { server.close()findAvailablePort(startPort + 1) .then(resolve) .catch(reject) } else {reject(err) } }) })}async function startServer() {try {// Get port from environment or find available portlet port = process.env.PORT ? Number.parseInt(process.env.PORT, 10) : nullif (!port) { port = await findAvailablePort(3000) } console.log(`Starting server in ${dev ? "development" : "production"} mode...`) console.log(`Attempting to use port: ${port}`)// Create Next.js appconst app = next({ dev, hostname: dev ? "localhost" : hostname, port })const handle = app.getRequestHandler()await app.prepare()const server = createServer(async (req, res) => {try {// Parse the URLconst parsedUrl = parse(req.url, true)const { pathname, query } = parsedUrl// Health check endpointif (pathname === "/api/health") { res.writeHead(200, { "Content-Type": "application/json" }) res.end(JSON.stringify({ status: "ok", timestamp: new Date().toISOString(), environment: process.env.NODE_ENV || "development", port: port, hostname: hostname, }), )return }// Handle the request with Next.jsawait handle(req, res, parsedUrl) } catch (err) { console.error("Error occurred handling", req.url, err) res.statusCode = 500 res.end("Internal server error") } })// Handle server errors server.on("error", (err) => {if (err.code === "EADDRINUSE") { console.error(`Port ${port} is already in use. Trying to find another port...`) server.close()// Restart with a different port process.env.PORT = ""startServer() } else { console.error("Server error:", err) process.exit(1) } })// Start listening server.listen(port, () => { console.log(`✅ Server ready on http://${hostname}:${port}`) console.log(`📊 Environment: ${process.env.NODE_ENV || "development"}`) console.log(`🔍 Health check: http://${hostname}:${port}/api/health`) })// Graceful shutdownconst gracefulShutdown = () => { console.log("🛑 Received shutdown signal, closing server gracefully...") server.close(() => { console.log("✅ Server closed successfully") process.exit(0) }) } process.on("SIGTERM", gracefulShutdown) process.on("SIGINT", gracefulShutdown) } catch (error) { console.error("Failed to start server:", error) process.exit(1) }}// Start the serverstartServer()add .npmrclegacy-peer-deps=truefund=falseaudit=falseadd ecosystem.config.jsmodule.exports = { apps: [ { name: "nuvatech-website", script: "server.js", instances: 1, autorestart: true, watch: false, max_memory_restart: "1G", env: { NODE_ENV: "production", PORT: 3000, HOSTNAME: "localhost", }, env_production: { NODE_ENV: "production", PORT: process.env.PORT || 3000, HOSTNAME: process.env.HOSTNAME || "localhost", }, error_file: "./logs/err.log", out_file: "./logs/out.log", log_file: "./logs/combined.log", time: true, log_date_format: "YYYY-MM-DD HH:mm:ss Z", merge_logs: true, kill_timeout: 5000, restart_delay: 1000, }, ],}add start.sh#!/bin/bash# Create logs directory if it doesn't existmkdir -p logs# Kill any existing processes on common portsecho "🔍 Checking for existing processes..."lsof -ti:3000,3001,3002,3003,3004,3005 | xargs kill -9 2>/dev/null || true# Wait a moment for processes to fully terminatesleep 2# Clear npm cache and reinstall if neededif [ ! -d "node_modules" ]; then echo "📦 Installing dependencies..." npm cache clean --force npm install --legacy-peer-depsfi# Build the applicationecho "🏗️ Building application..."npm run build# Start the serverecho "🚀 Starting server..."npm startAdd deploy.sh#!/bin/bashecho "🚀 Starting deployment process..."# Stop any running processesecho "🛑 Stopping existing processes..."pkill -f "node server.js" || truepkill -f "next" || true# Wait for processes to stopsleep 3# Create necessary directoriesmkdir -p logsmkdir -p .next# Clear npm cacheecho "🧹 Clearing npm cache..."npm cache clean --force# Remove node_modules and package-lock.json for clean installecho "🗑️ Removing old dependencies..."rm -rf node_modules package-lock.json# Install dependenciesecho "📦 Installing dependencies..."npm install --legacy-peer-deps# Build the applicationecho "🏗️ Building application..."npm run build# Start the applicationecho "🚀 Starting application..."nohup npm start > logs/startup.log 2>&1 &# Wait a moment and check if server startedsleep 5# Check if server is runningif pgrep -f "node server.js" > /dev/null; then echo "✅ Server started successfully!" echo "📊 Check logs: tail -f logs/startup.log" echo "🔍 Health check: curl http://localhost:3000/api/health"else echo "❌ Server failed to start. Check logs:" cat logs/startup.logfiadd check-port.jsconst net = require("net")function checkPort(port) {return new Promise((resolve) => {const server = net.createServer() server.listen(port, (err) => {if (err) { server.close()resolve(false) // Port is in use } else { server.close(() => {resolve(true) // Port is available }) } }) server.on("error", () => {resolve(false) // Port is in use }) })}async function findAvailablePorts() { console.log("🔍 Checking port availability...")const portsToCheck = [3000, 3001, 3002, 3003, 3004, 3005, 8000, 8080]for (const port of portsToCheck) {const available = await checkPort(port) console.log(`Port ${port}: ${available ? "✅ Available" : "❌ In use"}`) }}// Check what's using the portsconst { exec } = require("child_process")exec("lsof -i :3000-3005", (error, stdout, stderr) => {if (stdout) { console.log("\n🔍 Processes using ports 3000-3005:") console.log(stdout) }})findAvailablePorts()i am deploying it on plesk server117:Tadc3a,[V0_FILE]plaintext:file=".gitignore" isMerged="true" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" isMerged="true" # Nuvatech website review *Automatically synced with your [v0.dev](https://v0.dev) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/dhruv191004-4668s-projects/v0-nuvatech-website-review) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.dev-black?style=for-the-badge)](https://v0.dev/chat/projects/hboembkQxp0) ## Overview This repository will stay in sync with your deployed chats on [v0.dev](https://v0.dev). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.dev](https://v0.dev). ## Deployment Your project is live at: **[https://vercel.com/dhruv191004-4668s-projects/v0-nuvatech-website-review](https://vercel.com/dhruv191004-4668s-projects/v0-nuvatech-website-review)** ## Build your app Continue building your app on: **[https://v0.dev/chat/projects/hboembkQxp0](https://v0.dev/chat/projects/hboembkQxp0)** ## How It Works 1. Create and modify your project using [v0.dev](https://v0.dev) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescriptreact:file="app/about/page.tsx" isMerged="true" import Image from "next/image" import { ArrowRight, CheckCircle, Users, Zap, Shield, Target, MapPin, Phone, Mail } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import EnhancedHeader from "../../components/enhanced-header" import EnhancedFooter from "../../components/enhanced-footer" import Link from "next/link" export default function AboutPage() { const milestones = [ { year: "2014", title: "Company Founded", description: "Nuvatech Technology was established in Ahmedabad with a vision to transform businesses through innovative software solutions.", }, { year: "2015", title: "First ERP Solution", description: "Launched our first industry-specific ERP solution for garment manufacturing, which later evolved into StitchIT.", }, { year: "2017", title: "Expansion of Services", description: "Expanded our product portfolio with WashIT for laundry management and HR TECH for human resource management.", }, { year: "2019", title: "Digital Transformation", description: "Launched DigitAil to help businesses navigate the e-commerce landscape with comprehensive multi-channel management.", }, { year: "2021", title: "500+ Clients Milestone", description: "Reached the milestone of serving 500+ businesses across India with our innovative software solutions.", }, { year: "2023", title: "Cloud Transformation", description: "Migrated all our solutions to cloud infrastructure, enabling better scalability and accessibility for our clients.", }, ] const values = [ { title: "Innovation", description: "We constantly push the boundaries of what's possible in software development to deliver cutting-edge solutions.", icon: Zap, }, { title: "Customer Focus", description: "Our clients' success is our success. We work closely with each client to understand their unique needs and challenges.", icon: Users, }, { title: "Excellence", description: "We strive for excellence in everything we do, from code quality to customer service and support.", icon: Target, }, { title: "Integrity", description: "We operate with transparency, honesty, and ethical business practices in all our dealings.", icon: Shield, }, ] return (

{/* Enhanced Header */} {/* Hero Section */}

About Us

Transforming Businesses Through {" "} Innovative Technology

Since 2018, Nuvate Technology has been at the forefront of developing industry-specific software solutions that empower businesses to streamline operations, increase efficiency, and drive growth.

{/* Vision & Mission */}

Our Vision

To be the leading provider of innovative technology solutions that transform businesses and drive industry standards across India and beyond.

Our Mission

To empower businesses with tailored software solutions that address their unique challenges, streamline operations, and accelerate growth through digital transformation.

What Sets Us Apart

{item}

{/* Our Values */}

Our Core Values

The Principles That Guide Us

Our values define who we are and how we work. They shape our culture and guide our decisions every day.

{values.map((value, index) => (

{value.title}

{value.description}

))}

{/* Company Timeline */}

Our Journey

Milestones That Define Us

From our humble beginnings to becoming a leading technology provider, our journey has been defined by innovation and growth.

{/* Timeline Line */}

{milestones.map((milestone, index) => (

{/* Year Marker */}

{milestone.year}

{/* Content */}

{milestone.title}

{milestone.description}

))}

{/* Contact Information */}

Get In Touch

Connect With Our Team

Have questions about our company or solutions? We'd love to hear from you.

Visit Us

B-901, Empire Business Hub,
Science City Road, Sola,
Ahmedabad - 380060, Gujarat, India

Call Us

+91 76007 67857

Monday - Saturday: 9:00 AM - 6:00 PM

Email Us

info@nuvatetechnology.com

We'll respond within 24 hours

{/* Enhanced Footer */}

) } [V0_FILE]typescript:file="app/actions/send-application.ts" isMerged="true" "use server" export async function sendJobApplication(formData: FormData) { // Simulate processing time await new Promise((resolve) => setTimeout(resolve, 2000)) // Extract form data const applicationData = { firstName: formData.get("firstName") as string, lastName: formData.get("lastName") as string, email: formData.get("email") as string, phone: formData.get("phone") as string, position: formData.get("position") as string, experience: formData.get("experience") as string, currentLocation: formData.get("currentLocation") as string, skills: formData.get("skills") as string, coverLetter: formData.get("coverLetter") as string, portfolio: formData.get("portfolio") as string, consent: formData.get("consent") === "on", updates: formData.get("updates") === "on", } // Validate required fields if ( !applicationData.firstName || !applicationData.lastName || !applicationData.email || !applicationData.phone || !applicationData.currentLocation || !applicationData.consent ) { return { success: false, message: "Please fill in all required fields and accept the consent.", } } // Validate email format const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ if (!emailRegex.test(applicationData.email)) { return { success: false, message: "Please enter a valid email address.", } } // In a real application, you would: // 1. Save to database // 2. Send email to HR team // 3. Send confirmation email to applicant // 4. Process resume file upload // For demo purposes, we'll simulate success console.log("Job Application Received:", applicationData) // Simulate email sending (in real app, use services like Resend, SendGrid, etc.) try { // Example: await sendEmailToHR(applicationData) // Example: await sendConfirmationEmail(applicationData.email) return { success: true, message: `Thank you ${applicationData.firstName}! Your application has been submitted successfully. We'll review your application and get back to you within 2-3 business days.`, } } catch (error) { return { success: false, message: "There was an error submitting your application. Please try again or contact us directly.", } } } [V0_FILE]typescriptreact:file="app/blog/digital-transformation-success-stories/page.tsx" isMerged="true" import Image from "next/image" import { ArrowLeft, Calendar, User, Clock, Share2, BookOpen } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import EnhancedHeader from "../../../components/enhanced-header" import EnhancedFooter from "../../../components/enhanced-footer" import Link from "next/link" export default function DigitalTransformationBlogPost() { const relatedPosts = [ { title: "How Industry 4.0 is Transforming Garment Manufacturing", slug: "/blog/industry-4-0-transforming-garment-manufacturing", category: "Industry Insights", readTime: "8 min read", }, { title: "The Future of E-commerce: Trends to Watch in 2024", slug: "/blog/future-of-ecommerce-trends-2024", category: "E-commerce", readTime: "7 min read", }, { title: "5 Ways to Optimize Your Laundry Business Operations", slug: "/blog/optimize-laundry-business-operations", category: "Business Tips", readTime: "6 min read", }, ] return (

{/* Back Button */}

{/* Article Header */}

Case Studies

Digital Transformation Success Stories: Lessons from Indian SMEs

Vikram Singh

May 15, 2024

10 min read

{/* Article Content */}

Digital transformation is no longer a luxury—it's a necessity for survival in today's competitive business landscape. Indian SMEs are leading the charge, demonstrating remarkable innovation and adaptability in their digital journeys.

The Digital Imperative for SMEs

Small and Medium Enterprises (SMEs) form the backbone of the Indian economy, contributing over 30% to the GDP and employing millions of people. The COVID-19 pandemic accelerated the need for digital adoption, forcing businesses to rethink their operations and customer engagement strategies.

Digital Transformation Statistics

• 73% of Indian SMEs accelerated digital initiatives post-pandemic
• Digital-first SMEs saw 2.5x faster revenue growth
• 68% reported improved operational efficiency
• 45% expanded to new markets through digital channels

Success Story 1: Mumbai-Based Textile Manufacturer

Company: Shree Textiles Pvt. Ltd.
Industry: Textile Manufacturing
Challenge: Manual inventory management and production planning

The Challenge

Shree Textiles was struggling with inventory discrepancies, production delays, and customer complaints. Their manual processes were causing bottlenecks and affecting their ability to scale operations.

The Solution

They implemented our StitchIT platform, which provided real-time inventory tracking, automated production planning, and integrated quality control systems.

The Results

40% reduction in inventory holding costs
35% improvement in production efficiency
50% decrease in customer complaints
25% increase in overall revenue

Success Story 2: Delhi-Based E-commerce Startup

Company: FashionForward Online
Industry: E-commerce Fashion
Challenge: Multi-channel inventory management

The Transformation Journey

FashionForward was selling across multiple platforms but struggled with inventory synchronization. They often faced stockouts on one platform while having excess inventory on another.

Key Achievements

✓ 99% inventory accuracy across all channels
✓ 60% reduction in stockouts
✓ 80% faster order processing
✓ 150% increase in sales volume

Success Story 3: Bangalore-Based Service Company

Company: CleanTech Services
Industry: Commercial Cleaning
Challenge: Route optimization and customer management

Digital Innovation

CleanTech implemented our WashIT platform to optimize their service routes, manage customer relationships, and automate billing processes.

Measurable Impact

45% reduction in fuel costs through route optimization
90% improvement in on-time service delivery
70% reduction in billing errors
200% increase in customer retention rate

Common Success Factors

Analyzing these success stories, we identified several common factors that contributed to successful digital transformation:

Leadership Commitment: Strong support from top management
Employee Training: Comprehensive training programs for staff
Phased Implementation: Gradual rollout to minimize disruption
Data-Driven Decisions: Using analytics to guide business decisions
Customer Focus: Keeping customer experience at the center
Continuous Improvement: Regular system updates and optimizations

Lessons Learned

1. Start Small, Think Big

Successful SMEs didn't try to transform everything at once. They started with one critical process and gradually expanded their digital footprint.

2. Invest in People

Technology is only as good as the people using it. Successful companies invested heavily in training and change management.

3. Choose the Right Partner

Working with experienced technology partners who understand the local market and business challenges is crucial for success.

Ready to Start Your Digital Journey?

At Nuvatech, we've helped hundreds of SMEs successfully navigate their digital transformation journey. Our industry-specific solutions are designed to deliver quick wins while building a foundation for long-term growth.

The Road Ahead

Digital transformation is not a destination—it's an ongoing journey. The SMEs that will thrive in the future are those that embrace continuous innovation, stay close to their customers, and leverage technology to create competitive advantages.

As we look ahead, emerging technologies like AI, IoT, and blockchain will create new opportunities for SMEs to differentiate themselves and serve their customers better. The key is to stay curious, stay agile, and never stop learning.

{/* Related Posts */}

{relatedPosts.map((post, index) => ( {post.category}

{post.title}

{post.readTime}

))}

) } [V0_FILE]typescriptreact:file="app/blog/erp-implementation-roi/page.tsx" isMerged="true" import Image from "next/image" import { ArrowLeft, Calendar, User, Clock, Share2, BookOpen } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import EnhancedHeader from "../../../components/enhanced-header" import EnhancedFooter from "../../../components/enhanced-footer" import Link from "next/link" export default function ERPROIBlogPost() { const relatedPosts = [ { title: "How Industry 4.0 is Transforming Garment Manufacturing", slug: "/blog/industry-4-0-transforming-garment-manufacturing", category: "Industry Insights", readTime: "8 min read", }, { title: "Digital Transformation Success Stories: Lessons from Indian SMEs", slug: "/blog/digital-transformation-success-stories", category: "Case Studies", readTime: "10 min read", }, { title: "HR Compliance: Navigating the Latest Regulatory Changes", slug: "/blog/hr-compliance-regulatory-changes", category: "HR & Compliance", readTime: "9 min read", }, ] return (

{/* Back Button */}

{/* Article Header */}

ERP

The ROI of ERP Implementation: Measuring Success Beyond Numbers

Rajesh Patel

May 1, 2024

7 min read

{/* Article Content */}

Measuring the return on investment (ROI) of ERP implementation goes far beyond simple financial calculations. While cost savings and revenue increases are important, the true value of ERP systems lies in their ability to transform business operations and create sustainable competitive advantages.

Understanding ERP ROI

Traditional ROI calculations focus on quantifiable benefits like cost reductions and efficiency gains. However, ERP systems deliver value across multiple dimensions that may not be immediately apparent in financial statements but are crucial for long-term business success.

ERP ROI Framework

• Tangible Benefits: Measurable cost savings and revenue increases
• Intangible Benefits: Improved decision-making and customer satisfaction
• Strategic Benefits: Enhanced competitive positioning and scalability
• Risk Mitigation: Reduced operational and compliance risks

Tangible Benefits: The Numbers That Matter

1. Operational Cost Reduction

ERP systems streamline processes and eliminate redundancies, leading to significant cost savings across various operational areas.

Labor Cost Reduction: 15-25% through process automation
Inventory Optimization: 20-30% reduction in carrying costs
Administrative Efficiency: 30-40% reduction in manual tasks
IT Infrastructure: 10-20% savings through system consolidation

2. Revenue Enhancement

Beyond cost savings, ERP systems can directly contribute to revenue growth through improved customer service and operational efficiency.

Revenue Impact Areas

• Faster order processing leading to increased sales volume
• Improved customer satisfaction resulting in higher retention
• Better inventory management reducing stockouts
• Enhanced product quality through better process control
• Faster time-to-market for new products

Intangible Benefits: The Hidden Value

1. Improved Decision Making

ERP systems provide real-time visibility into business operations, enabling managers to make informed decisions quickly and accurately.

2. Enhanced Customer Experience

Integrated systems enable better customer service through faster response times, accurate information, and consistent communication across all touchpoints.

3. Employee Productivity and Satisfaction

Modern ERP systems reduce manual work and provide employees with better tools, leading to increased productivity and job satisfaction.

ROI Calculation Methodology

Step 1: Establish Baseline Metrics

Before implementation, document current performance metrics across all areas that the ERP system will impact.

Order processing time
Inventory turnover rates
Customer satisfaction scores
Employee productivity metrics
Error rates and rework costs

Step 2: Track Implementation Costs

Comprehensive cost tracking should include all direct and indirect expenses associated with ERP implementation.

Total Cost of Ownership (TCO)

• Software licensing and subscription fees
• Implementation and customization costs
• Training and change management expenses
• Hardware and infrastructure upgrades
• Ongoing maintenance and support costs
• Internal resource allocation costs

Step 3: Measure Post-Implementation Benefits

After implementation, continuously monitor the same metrics established in the baseline to quantify improvements and calculate ROI.

ROI Calculation Formula

ROI = (Benefits - Costs) / Costs × 100

Where Benefits include both tangible and quantified intangible benefits

Industry Benchmarks and Expectations

Understanding industry benchmarks helps set realistic expectations for ERP ROI and provides context for measuring success.

Typical ERP ROI Ranges

• Manufacturing: 150-300% ROI within 2-3 years
• Retail/E-commerce: 200-400% ROI within 1-2 years
• Services: 100-250% ROI within 2-4 years
• Healthcare: 120-280% ROI within 3-5 years

Case Study: Manufacturing Company ROI

Company: Mid-size textile manufacturer
Implementation Cost: ₹50 lakhs
Timeline: 18 months

Year 1 Benefits

Inventory reduction: ₹15 lakhs savings
Labor efficiency: ₹12 lakhs savings
Reduced errors: ₹8 lakhs savings
Faster processing: ₹10 lakhs additional revenue
Total Year 1 Benefits: ₹45 lakhs

3-Year ROI Calculation

Total 3-year benefits: ₹1.5 crores
Total investment: ₹50 lakhs
ROI: 200% over 3 years

Maximizing ERP ROI

1. Proper Planning and Scope Definition

Clear project scope and realistic timelines are crucial for achieving expected ROI. Avoid scope creep and focus on core business processes first.

2. Change Management and Training

User adoption is critical for ROI realization. Invest in comprehensive training and change management to ensure employees embrace the new system.

3. Continuous Optimization

ERP ROI improves over time as users become more proficient and processes are refined. Regular system optimization ensures continued value delivery.

Common ROI Pitfalls to Avoid

• Underestimating implementation time and costs
• Focusing only on software costs, ignoring total TCO
• Inadequate change management and training
• Unrealistic benefit expectations
• Poor data quality affecting system effectiveness
• Lack of executive sponsorship and support

Nuvatech's Approach to ROI

At Nuvatech, we work closely with our clients to establish clear ROI expectations and measurement frameworks from day one. Our industry-specific solutions are designed to deliver quick wins while building a foundation for long-term value creation. We provide ongoing support to ensure you achieve and exceed your ROI targets.

Conclusion

ERP ROI measurement requires a comprehensive approach that considers both tangible and intangible benefits. While financial returns are important, the true value of ERP systems lies in their ability to transform business operations, improve decision-making, and create sustainable competitive advantages.

Success in ERP ROI comes from proper planning, realistic expectations, strong change management, and continuous optimization. Organizations that take a holistic approach to ROI measurement and focus on long-term value creation will realize the full potential of their ERP investment.

{/* Related Posts */}

{relatedPosts.map((post, index) => ( {post.category}

{post.title}

{post.readTime}

))}

) } [V0_FILE]typescriptreact:file="app/blog/future-of-ecommerce-trends-2024/page.tsx" isMerged="true" import Image from "next/image" import { ArrowLeft, Calendar, User, Clock, Share2, BookOpen } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import EnhancedHeader from "../../../components/enhanced-header" import EnhancedFooter from "../../../components/enhanced-footer" import Link from "next/link" export default function EcommerceTrendsBlogPost() { const relatedPosts = [ { title: "How Industry 4.0 is Transforming Garment Manufacturing", slug: "/blog/industry-4-0-transforming-garment-manufacturing", category: "Industry Insights", readTime: "8 min read", }, { title: "5 Ways to Optimize Your Laundry Business Operations", slug: "/blog/optimize-laundry-business-operations", category: "Business Tips", readTime: "6 min read", }, { title: "Digital Transformation Success Stories: Lessons from Indian SMEs", slug: "/blog/digital-transformation-success-stories", category: "Case Studies", readTime: "10 min read", }, ] return (

{/* Back Button */}

{/* Article Header */}

E-commerce

The Future of E-commerce: Trends to Watch in 2024

Amit Kumar

May 28, 2024

7 min read

{/* Article Content */}

The e-commerce landscape in India is evolving at an unprecedented pace. As we move through 2024, businesses must stay ahead of emerging trends to remain competitive and meet changing consumer expectations.

1. AI-Powered Personalization

Artificial Intelligence is revolutionizing how e-commerce platforms understand and serve their customers. From personalized product recommendations to dynamic pricing strategies, AI is enabling businesses to create unique shopping experiences for each customer.

Predictive analytics for inventory management
Chatbots for 24/7 customer support
Visual search capabilities
Personalized email marketing campaigns

2. Social Commerce Integration

Social media platforms are becoming powerful sales channels. Instagram Shopping, Facebook Marketplace, and WhatsApp Business are transforming how Indian consumers discover and purchase products.

Key Statistics

• 78% of Indian consumers have made purchases through social media
• Social commerce is expected to grow by 55% annually
• Video content drives 3x more engagement than static posts

3. Sustainable E-commerce Practices

Environmental consciousness is driving consumer behavior. E-commerce businesses are adopting sustainable practices to meet growing demand for eco-friendly options.

4. Voice Commerce and Smart Devices

With the increasing adoption of smart speakers and voice assistants, voice commerce is becoming a significant trend. Businesses need to optimize for voice search and enable voice-based purchasing.

5. Augmented Reality Shopping

AR technology is bridging the gap between online and offline shopping experiences. Customers can now virtually try products before purchasing, reducing return rates and increasing satisfaction.

Preparing for the Future

To stay competitive in this evolving landscape, e-commerce businesses should:

Invest in AI and machine learning capabilities
Develop a strong social media presence
Implement sustainable business practices
Optimize for voice search and mobile commerce
Explore AR/VR technologies for enhanced customer experience

How DigitAil Can Help

Our DigitAil platform is designed to help e-commerce businesses implement these trends effectively. With built-in AI capabilities, social commerce integration, and comprehensive analytics, we enable businesses to stay ahead of the curve.

Conclusion

The future of e-commerce in India is bright and full of opportunities. By embracing these trends and investing in the right technology, businesses can create exceptional customer experiences and drive sustainable growth.

{/* Related Posts */}

{relatedPosts.map((post, index) => ( {post.category}

{post.title}

{post.readTime}

))}

) } [V0_FILE]typescriptreact:file="app/blog/hr-compliance-regulatory-changes/page.tsx" isMerged="true" import Image from "next/image" import { ArrowLeft, Calendar, User, Clock, Share2, BookOpen } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import EnhancedHeader from "../../../components/enhanced-header" import EnhancedFooter from "../../../components/enhanced-footer" import Link from "next/link" export default function HRComplianceBlogPost() { const relatedPosts = [ { title: "How Industry 4.0 is Transforming Garment Manufacturing", slug: "/blog/industry-4-0-transforming-garment-manufacturing", category: "Industry Insights", readTime: "8 min read", }, { title: "The Future of E-commerce: Trends to Watch in 2024", slug: "/blog/future-of-ecommerce-trends-2024", category: "E-commerce", readTime: "7 min read", }, { title: "Digital Transformation Success Stories: Lessons from Indian SMEs", slug: "/blog/digital-transformation-success-stories", category: "Case Studies", readTime: "10 min read", }, ] return (

{/* Back Button */}

{/* Article Header */}

HR & Compliance

HR Compliance: Navigating the Latest Regulatory Changes

Lakshmi Narayanan

May 20, 2024

9 min read

{/* Article Content */}

Staying compliant with HR regulations in India is becoming increasingly complex. With frequent updates to labor laws and new compliance requirements, businesses need to stay informed and adapt quickly to avoid penalties and legal issues.

Recent Changes in Indian Labor Laws

The Indian government has introduced several significant changes to labor laws in recent years. These changes affect various aspects of employment, from wages and working hours to social security and industrial relations.

⚠️ Critical Updates

• New Code on Wages (2019) - Minimum wage standardization
• Industrial Relations Code (2020) - Strike and lockout regulations
• Social Security Code (2020) - Extended coverage for gig workers
• Occupational Safety Code (2020) - Enhanced workplace safety requirements

Key Compliance Areas

1. Wage and Hour Compliance

The new wage codes have standardized minimum wage calculations across states. Employers must ensure:

Proper calculation of overtime payments
Timely payment of wages (within 7 days for less than 1000 employees)
Maintenance of accurate wage records
Compliance with working hour limits (9 hours per day, 48 hours per week)

2. Social Security Compliance

The Social Security Code has expanded coverage to include gig workers and platform workers. Key requirements include:

EPF registration for all eligible employees
ESI coverage for establishments with 10+ employees
Gratuity provisions for establishments with 10+ employees
New social security schemes for gig and platform workers

3. Workplace Safety and Health

The Occupational Safety, Health and Working Conditions Code has introduced stricter safety requirements:

Safety Checklist

✓ Annual safety audits for factories
✓ Safety committees in establishments with 500+ workers
✓ Mandatory safety training programs
✓ Incident reporting within 24 hours
✓ Regular health check-ups for workers in hazardous industries

Technology Solutions for Compliance

Managing compliance manually is no longer feasible for growing businesses. Technology solutions can help automate compliance processes and reduce the risk of violations.

Automated Compliance Features

Real-time wage calculation with overtime tracking
Automated statutory deduction calculations
Compliance dashboard with alerts and notifications
Digital record keeping with audit trails
Automated report generation for government filings

How HR TECH Ensures Compliance

Our HR TECH platform is designed with compliance at its core. It automatically updates with the latest regulatory changes, ensures accurate calculations, and provides comprehensive reporting to keep your business compliant with all HR regulations.

Best Practices for HR Compliance

Stay Updated: Subscribe to regulatory updates and maintain a compliance calendar
Document Everything: Maintain detailed records of all HR processes and decisions
Regular Audits: Conduct internal compliance audits quarterly
Employee Training: Train managers on compliance requirements
Technology Investment: Use automated systems to reduce human error
Legal Consultation: Maintain relationships with employment law experts

Common Compliance Mistakes to Avoid

• Misclassifying employees as contractors
• Incorrect overtime calculations
• Delayed statutory payments
• Inadequate record keeping
• Ignoring state-specific regulations
• Failing to update policies with law changes

Conclusion

HR compliance is not just about avoiding penalties—it's about creating a fair and safe workplace for your employees. By staying informed about regulatory changes and investing in the right technology solutions, businesses can ensure compliance while focusing on growth and employee satisfaction.

{/* Related Posts */}

{relatedPosts.map((post, index) => ( {post.category}

{post.title}

{post.readTime}

))}

) } [V0_FILE]typescriptreact:file="app/blog/industry-4-0-transforming-garment-manufacturing/page.tsx" isMerged="true" import Image from "next/image" import { ArrowLeft, Calendar, User, Clock, Share2 } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import Link from "next/link" import EnhancedHeader from "../../../components/enhanced-header" import EnhancedFooter from "../../../components/enhanced-footer" export default function Industry40BlogPost() { const relatedPosts = [ { title: "5 Ways to Optimize Your Laundry Business Operations", excerpt: "Discover practical strategies to streamline your laundry business operations.", image: "/placeholder.svg?height=200&width=300&text=Laundry+Business", category: "Business Tips", readTime: "6 min read", slug: "/blog/optimize-laundry-business-operations", }, { title: "The Future of E-commerce: Trends to Watch in 2024", excerpt: "Stay ahead of the curve with these emerging e-commerce trends.", image: "/placeholder.svg?height=200&width=300&text=E-commerce+Trends", category: "E-commerce", readTime: "7 min read", slug: "/blog/future-of-ecommerce-trends-2024", }, ] return (

{/* Back Navigation */}

Back to Blog

{/* Article Header */}

Industry Insights

How Industry 4.0 is Transforming Garment Manufacturing

Rajesh Patel

June 10, 2024

8 min read

{/* Featured Image */}

{/* Article Content */}

The garment manufacturing industry is experiencing a revolutionary transformation through Industry 4.0 technologies. Smart factories, IoT devices, and data analytics are reshaping how clothing is designed, produced, and delivered to consumers.

The Digital Revolution in Garment Manufacturing

Industry 4.0 represents the fourth industrial revolution, characterized by the integration of digital technologies into manufacturing processes. In the garment industry, this transformation is particularly significant due to the sector's traditionally labor-intensive nature and complex supply chains.

Key Technologies Driving Change

Internet of Things (IoT): Connected machines and sensors provide real-time data on production efficiency
Artificial Intelligence: AI-powered quality control and predictive maintenance systems
Robotics: Automated cutting, sewing, and finishing processes
Big Data Analytics: Data-driven insights for demand forecasting and inventory optimization
Cloud Computing: Scalable infrastructure for managing complex supply chains

Benefits of Industry 4.0 Implementation

Increased Efficiency

Automated processes and real-time monitoring lead to 30-40% improvement in production efficiency.

Quality Enhancement

AI-powered quality control systems reduce defects by up to 50% through early detection.

Cost Reduction

Optimized resource utilization and reduced waste lead to significant cost savings.

Faster Time-to-Market

Streamlined processes enable faster product development and delivery cycles.

Implementation Challenges

While the benefits are substantial, implementing Industry 4.0 technologies comes with challenges:

High initial investment costs for technology infrastructure
Need for skilled workforce training and development
Integration complexity with existing legacy systems
Data security and privacy concerns
Change management and organizational culture adaptation

The Future Outlook

The future of garment manufacturing lies in fully integrated smart factories where every aspect of production is connected and optimized. Companies that embrace these technologies early will gain significant competitive advantages in terms of efficiency, quality, and customer satisfaction.

Key Takeaway

Industry 4.0 is not just about technology adoption; it's about transforming business models and creating new value propositions for customers. Companies that successfully navigate this transformation will be the leaders of tomorrow's garment industry.

{/* Author Bio */}

Rajesh Patel

Senior Industry Analyst

Rajesh has over 15 years of experience in manufacturing technology and digital transformation. He specializes in helping companies adopt Industry 4.0 solutions.

{/* Related Posts */}

{relatedPosts.map((post, index) => (

{post.category}

{post.title}

{post.excerpt}

{post.readTime}

))}

) } [V0_FILE]typescriptreact:file="app/blog/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/blog/optimize-laundry-business-operations/page.tsx" isMerged="true" import Image from "next/image" import { ArrowLeft, Calendar, User, Clock, Share2, CheckCircle } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import Link from "next/link" import EnhancedHeader from "../../../components/enhanced-header" import EnhancedFooter from "../../../components/enhanced-footer" export default function LaundryOptimizationBlogPost() { const relatedPosts = [ { title: "How Industry 4.0 is Transforming Garment Manufacturing", excerpt: "Explore how smart factories and IoT are revolutionizing manufacturing.", image: "/placeholder.svg?height=200&width=300&text=Industry+4.0", category: "Industry Insights", readTime: "8 min read", slug: "/blog/industry-4-0-transforming-garment-manufacturing", }, { title: "The Future of E-commerce: Trends to Watch in 2024", excerpt: "Stay ahead with emerging e-commerce trends shaping the future.", image: "/placeholder.svg?height=200&width=300&text=E-commerce+Trends", category: "E-commerce", readTime: "7 min read", slug: "/blog/future-of-ecommerce-trends-2024", }, ] const optimizationStrategies = [ { title: "Implement Route Optimization Software", description: "Use GPS and AI-powered routing to reduce fuel costs and delivery times by up to 30%.", }, { title: "Automate Billing and Invoicing", description: "Eliminate manual errors and speed up payment processing with automated billing systems.", }, { title: "Deploy Customer Management Systems", description: "Track customer preferences, service history, and special requirements for personalized service.", }, { title: "Optimize Inventory Management", description: "Maintain optimal stock levels of cleaning supplies and packaging materials to avoid shortages.", }, { title: "Implement Quality Control Processes", description: "Establish standardized quality checks to ensure consistent service delivery and customer satisfaction.", }, ] return (

{/* Back Navigation */}

Back to Blog

{/* Article Header */}

Business Tips

5 Ways to Optimize Your Laundry Business Operations

Priya Sharma

June 5, 2024

6 min read

{/* Featured Image */}

{/* Article Content */}

Running a successful laundry business requires more than just cleaning clothes. In today's competitive market, operational efficiency is key to profitability and customer satisfaction. Here are five proven strategies to optimize your laundry business operations.

The Challenge of Modern Laundry Operations

The laundry industry faces unique challenges including rising operational costs, increasing customer expectations, and the need for faster turnaround times. Traditional manual processes often lead to inefficiencies, errors, and customer dissatisfaction.

5 Optimization Strategies

{optimizationStrategies.map((strategy, index) => (

{index + 1}. {strategy.title}

{strategy.description}

))}

Implementation Best Practices

When implementing these optimization strategies, consider the following best practices:

Start with a thorough assessment of your current operations
Prioritize solutions based on potential ROI and implementation complexity
Train your staff thoroughly on new systems and processes
Monitor key performance indicators to measure success
Continuously gather customer feedback and adjust accordingly

Expected Results

Businesses that implement these optimization strategies typically see:

30%

Reduction in operational costs

40%

Improvement in delivery efficiency

25%

Increase in customer satisfaction

Pro Tip

Consider implementing a comprehensive laundry management system like WashIT that combines all these optimization strategies into a single, integrated solution. This approach ensures better coordination between different aspects of your business and maximizes the benefits of digital transformation.

{/* Author Bio */}

Priya Sharma

Business Operations Consultant

Priya specializes in helping laundry businesses optimize their operations through technology and process improvements. She has helped over 100 businesses increase their efficiency and profitability.

{/* Related Posts */}

{relatedPosts.map((post, index) => (

{post.category}

{post.title}

{post.excerpt}

{post.readTime}

))}

) } [V0_FILE]typescriptreact:file="app/blog/page.tsx" isMerged="true" "use client" import Image from "next/image" import { useState } from "react" import { ArrowRight, Calendar, User, Clock } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import EnhancedHeader from "../../components/enhanced-header" import EnhancedFooter from "../../components/enhanced-footer" import Link from "next/link" export default function BlogPage() { const featuredPost = { title: "How Industry 4.0 is Transforming Garment Manufacturing", excerpt: "Explore how smart factories, IoT, and data analytics are revolutionizing the garment manufacturing industry and how businesses can adapt to stay competitive.", image: "https://etimg.etb2bimg.com/photo/116962571.cms", date: "June 10, 2024", author: "Rajesh Patel", readTime: "8 min read", category: "Industry Insights", slug: "/blog/industry-4-0-transforming-garment-manufacturing", } const recentPosts = [ { title: "5 Ways to Optimize Your Laundry Business Operations", excerpt: "Discover practical strategies to streamline your laundry business operations, reduce costs, and improve customer satisfaction.", image: "/placeholder.svg?height=400&width=600&text=Laundry+Business", date: "June 5, 2024", author: "Priya Sharma", readTime: "6 min read", category: "Business Tips", slug: "/blog/optimize-laundry-business-operations", }, { title: "The Future of E-commerce: Trends to Watch in 2024", excerpt: "Stay ahead of the curve with these emerging e-commerce trends that are shaping the future of online retail in India and globally.", image: "/placeholder.svg?height=400&width=600&text=E-commerce+Trends", date: "May 28, 2024", author: "Amit Kumar", readTime: "7 min read", category: "E-commerce", slug: "/blog/future-of-ecommerce-trends-2024", }, { title: "HR Compliance: Navigating the Latest Regulatory Changes", excerpt: "A comprehensive guide to the latest HR compliance requirements in India and how technology can help businesses stay compliant.", image: "/placeholder.svg?height=400&width=600&text=HR+Compliance", date: "May 20, 2024", author: "Lakshmi Narayanan", readTime: "9 min read", category: "HR & Compliance", slug: "/blog/hr-compliance-regulatory-changes", }, { title: "Digital Transformation Success Stories: Lessons from Indian SMEs", excerpt: "Learn from the digital transformation journeys of successful Indian SMEs and the key factors that contributed to their success.", image: "/placeholder.svg?height=400&width=600&text=Digital+Transformation", date: "May 15, 2024", author: "Vikram Singh", readTime: "10 min read", category: "Case Studies", slug: "/blog/digital-transformation-success-stories", }, { title: "Sustainable Manufacturing: Balancing Profit and Planet", excerpt: "How garment manufacturers can implement sustainable practices without compromising on profitability and competitiveness.", image: "/placeholder.svg?height=400&width=600&text=Sustainable+Manufacturing", date: "May 8, 2024", author: "Neha Reddy", readTime: "8 min read", category: "Sustainability", slug: "/blog/sustainable-manufacturing-profit-planet", }, { title: "The ROI of ERP Implementation: Measuring Success Beyond Numbers", excerpt: "A comprehensive framework for measuring the return on investment of ERP implementation, including both tangible and intangible benefits.", image: "/placeholder.svg?height=400&width=600&text=ERP+ROI", date: "May 1, 2024", author: "Rajesh Patel", readTime: "7 min read", category: "ERP", slug: "/blog/erp-implementation-roi", }, ] const categories = [ "All", "Business Tips", "E-commerce", "HR & Compliance", "Case Studies", "Sustainability", "ERP", "Technology", ] const [selectedCategory, setSelectedCategory] = useState("All") const filteredPosts = selectedCategory === "All" ? recentPosts : recentPosts.filter((post) => post.category === selectedCategory) return (

{/* Enhanced Header */} {/* Hero Section */}

Our Blog

Insights for {" "} Business Growth

Expert perspectives, industry trends, and practical advice to help your business thrive in the digital age.

{/*

*/}

{/* Featured Post */}

Featured Article

{featuredPost.category}

{featuredPost.readTime}

{featuredPost.title}

{featuredPost.excerpt}

{featuredPost.author}

{featuredPost.date}

{/* Categories */}

{categories.map((category) => ( setSelectedCategory(category)} className={`px-4 py-2 text-sm cursor-pointer transition-all duration-200 ${ category === selectedCategory ? "bg-orange-600 text-white hover:bg-orange-700" : "bg-slate-100 text-slate-700 hover:bg-slate-200" }`} > {category} ))}

{/* Recent Posts */}

{selectedCategory === "All" ? "Recent Articles" : `${selectedCategory} Articles`}

{filteredPosts.map((post, index) => (

{post.category}

{post.date}

{post.readTime}

{post.title}

{post.excerpt}

{post.author}

))}

{/*

*/}

{/* CTA Section */}

Ready to Transform Your Business?

Join hundreds of businesses that have achieved remarkable results with our innovative solutions. Schedule a consultation to discuss your specific needs.

{/* Newsletter

Subscribe to Our Newsletter

Stay updated with the latest industry insights, trends, and tips delivered straight to your inbox.

We respect your privacy. Unsubscribe at any time.

*/} {/* Enhanced Footer */}

) } [V0_FILE]typescriptreact:file="app/blog/sustainable-manufacturing-profit-planet/page.tsx" isMerged="true" import Image from "next/image" import { ArrowLeft, Calendar, User, Clock, Share2, BookOpen } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import EnhancedHeader from "../../../components/enhanced-header" import EnhancedFooter from "../../../components/enhanced-footer" import Link from "next/link" export default function SustainableManufacturingBlogPost() { const relatedPosts = [ { title: "How Industry 4.0 is Transforming Garment Manufacturing", slug: "/blog/industry-4-0-transforming-garment-manufacturing", category: "Industry Insights", readTime: "8 min read", }, { title: "Digital Transformation Success Stories: Lessons from Indian SMEs", slug: "/blog/digital-transformation-success-stories", category: "Case Studies", readTime: "10 min read", }, { title: "The ROI of ERP Implementation: Measuring Success Beyond Numbers", slug: "/blog/erp-implementation-roi", category: "ERP", readTime: "7 min read", }, ] return (

{/* Back Button */}

{/* Article Header */}

Sustainability

Sustainable Manufacturing: Balancing Profit and Planet

Neha Reddy

May 8, 2024

8 min read

{/* Article Content */}

The manufacturing industry stands at a crossroads. With increasing environmental concerns and growing consumer awareness, manufacturers must find ways to operate sustainably while maintaining profitability and competitiveness.

The Business Case for Sustainability

Sustainable manufacturing is no longer just about corporate social responsibility—it's a business imperative. Companies that embrace sustainable practices often discover that environmental benefits go hand-in-hand with economic advantages.

Financial Benefits of Sustainability

• 20-30% reduction in energy costs through efficiency improvements
• 15-25% decrease in raw material waste
• 10-20% lower operational costs through process optimization
• Access to green financing and sustainability-linked loans
• Premium pricing for eco-friendly products

Key Areas of Sustainable Manufacturing

1. Energy Efficiency and Renewable Energy

Energy consumption is one of the largest operational costs for manufacturers. Implementing energy-efficient technologies and transitioning to renewable energy sources can significantly reduce both costs and carbon footprint.

LED lighting systems with smart controls
High-efficiency motors and variable frequency drives
Solar panel installations for on-site power generation
Energy management systems for real-time monitoring
Heat recovery systems to capture and reuse waste heat

2. Waste Reduction and Circular Economy

The circular economy model focuses on eliminating waste and maximizing resource utilization. This approach can significantly reduce material costs while minimizing environmental impact.

Circular Economy Strategies

• Design for disassembly and recyclability
• Implement closed-loop manufacturing processes
• Establish take-back programs for end-of-life products
• Partner with suppliers for sustainable material sourcing
• Convert waste streams into valuable by-products

3. Water Conservation and Management

Water is a critical resource in manufacturing, especially in industries like textiles and chemicals. Efficient water management can reduce costs and ensure long-term operational sustainability.

4. Sustainable Supply Chain Management

Sustainability extends beyond the factory floor to encompass the entire supply chain. Working with suppliers who share sustainability commitments can amplify positive environmental impact.

Technology Enablers for Sustainable Manufacturing

IoT and Smart Sensors

Internet of Things (IoT) devices and smart sensors provide real-time data on energy consumption, waste generation, and resource utilization, enabling manufacturers to optimize their operations for sustainability.

AI and Machine Learning

Artificial intelligence can analyze vast amounts of operational data to identify patterns and opportunities for improvement in energy efficiency, waste reduction, and resource optimization.

Digital Twin Technology

Digital twins allow manufacturers to simulate and optimize processes before implementation, reducing the risk of inefficient operations and minimizing resource waste.

Implementation Roadmap

Phase 1: Assessment and Planning (Months 1-3)

Conduct comprehensive sustainability audit
Identify key areas for improvement
Set measurable sustainability goals
Develop implementation timeline and budget

Phase 2: Quick Wins (Months 4-6)

Implement energy-efficient lighting
Optimize equipment maintenance schedules
Introduce waste segregation and recycling programs
Train employees on sustainability practices

Phase 3: Major Initiatives (Months 7-18)

Install renewable energy systems
Upgrade to high-efficiency equipment
Implement water recycling systems
Establish sustainable supplier partnerships

Measuring Success

Tracking progress is essential for sustainable manufacturing initiatives. Key performance indicators (KPIs) should include both environmental and financial metrics.

Essential Sustainability KPIs

• Energy consumption per unit of production
• Water usage efficiency
• Waste generation and recycling rates
• Carbon footprint reduction
• Cost savings from sustainability initiatives
• Supplier sustainability scores

Overcoming Common Challenges

Initial Investment Concerns

While sustainable technologies may require upfront investment, the long-term savings and benefits often justify the costs. Consider financing options like green loans and government incentives.

Employee Resistance to Change

Change management is crucial for successful implementation. Involve employees in the planning process, provide comprehensive training, and communicate the benefits clearly.

Complexity of Implementation

Start with simple, high-impact initiatives and gradually build complexity. Partner with experienced consultants and technology providers to navigate the implementation process.

How StitchIT Supports Sustainable Manufacturing

Our StitchIT platform includes sustainability tracking features that help manufacturers monitor their environmental impact, optimize resource usage, and report on sustainability metrics. With real-time dashboards and automated reporting, you can make data-driven decisions that benefit both your bottom line and the planet.

The Future of Sustainable Manufacturing

As technology continues to evolve and environmental regulations become stricter, sustainable manufacturing will become the standard rather than the exception. Companies that invest in sustainability today will be better positioned for future success.

The integration of emerging technologies like blockchain for supply chain transparency, advanced materials for improved efficiency, and carbon capture technologies will further enhance the sustainability potential of manufacturing operations.

Conclusion

Sustainable manufacturing is not just about doing good—it's about doing well. By implementing sustainable practices, manufacturers can reduce costs, improve efficiency, enhance brand reputation, and contribute to a better future for all. The key is to start with a clear strategy, focus on measurable outcomes, and continuously improve over time.

{/* Related Posts */}

{relatedPosts.map((post, index) => ( {post.category}

{post.title}

{post.readTime}

))}

) } [V0_FILE]typescriptreact:file="app/careers/page.tsx" isMerged="true" "use client" import { ArrowRight, MapPin, Clock, Users, Heart, Zap, Award, Coffee, GraduationCap } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import EnhancedHeader from "../../components/enhanced-header" import EnhancedFooter from "../../components/enhanced-footer" import { useState } from 'react'; export default function CareersPage() { const [submitting, setSubmitting] = useState(false); const [formData, setFormData] = useState({ firstName: "", lastName: "", email: "", phone: "", position: "", experience: "", currentLocation: "", skills: "", coverLetter: "", resume: null as File | null, portfolio: "", consent: false, updates: false, }); function handleChange(e: React.ChangeEvent) { const { name, value, type, checked, files } = e.target as HTMLInputElement; if (type === "checkbox") { setFormData((prev) => ({ ...prev, [name]: checked })); } else if (type === "file") { setFormData((prev) => ({ ...prev, [name]: files ? files[0] : null })); } else { setFormData((prev) => ({ ...prev, [name]: value })); } } async function handleSubmit(e: React.FormEvent) { e.preventDefault(); setSubmitting(true); try { const data = new FormData(); for (const key in formData) { if (formData[key] !== null) { if (typeof formData[key] === "boolean") { data.append(key, formData[key] ? "true" : "false"); } else { data.append(key, formData[key] as any); } } } const response = await fetch("https://mailtrap-api.codeofbytes.com/send-application", { method: "POST", body: data, }); if (!response.ok) throw new Error(`Server error: ${response.statusText}`); alert("Application submitted successfully!"); setFormData({ firstName: "", lastName: "", email: "", phone: "", position: "", experience: "", currentLocation: "", skills: "", coverLetter: "", resume: null, portfolio: "", consent: false, updates: false, }); const form = document.getElementById("application-form"); if (form) form.style.display = "none"; } catch (error: any) { alert("Failed to submit application: " + error.message); } finally { setSubmitting(false); } } const benefits = [ { icon: Heart, title: "Health & Wellness", description: "Comprehensive health insurance for you and your family, plus wellness programs.", }, { icon: GraduationCap, title: "Learning & Development", description: "Continuous learning opportunities, certifications, and conference attendance.", }, { icon: Coffee, title: "Work-Life Balance", description: "Flexible working hours, remote work options, and unlimited coffee.", }, { icon: Users, title: "Team Culture", description: "Collaborative environment with team outings, celebrations, and open communication.", }, { icon: Zap, title: "Growth Opportunities", description: "Clear career progression paths and opportunities to work on cutting-edge technologies.", }, { icon: Award, title: "Recognition & Rewards", description: "Performance-based bonuses, employee recognition programs, and achievement awards.", }, ] const values = [ { title: "Innovation", description: "We constantly push boundaries to create innovative solutions that transform businesses.", }, { title: "Excellence", description: "We strive for excellence in everything we do, from code quality to customer service.", }, { title: "Collaboration", description: "We believe in the power of teamwork and open communication to achieve great results.", }, { title: "Growth", description: "We invest in our people's growth and provide opportunities to learn and advance.", }, ] return (

{/* Enhanced Header */} {/* Hero Section */}

Join Our Team

Build the Future of {" "} Business Technology

Join our passionate team of innovators, developers, and problem-solvers who are transforming industries with cutting-edge ERP solutions. Be part of something bigger.

{/*

*/}

{/* Company Stats */}

{[ { label: "Team Members", value: "15+" }, { label: "Years in Business", value: "8+" }, { label: "Happy Clients", value: "250+" }, { label: "Products Built", value: "4" }, ].map((stat, index) => (

{stat.value}

{stat.label}

))}

{/* Our Values */}

Our Values

What Drives Us

Our core values shape everything we do and guide how we work together

{values.map((value, index) => (

{value.title[0]}

{value.title}

{value.description}

))}

{/* Benefits & Perks */}

Benefits & Perks

Why You'll Love Working Here

We believe in taking care of our team with comprehensive benefits and a great work environment

{benefits.map((benefit, index) => (

{benefit.title}

{benefit.description}

))}

{/* Open Positions

Open Positions

Current Opportunities

Find your next career opportunity and join our growing team

{openPositions.map((position, index) => (

{position.title}

{position.department}

{position.location}

{position.type}

{position.experience}

{position.description}

{position.skills.map((skill, skillIndex) => ( {skill} ))}

))}

Don't see a position that fits? We're always looking for talented individuals.

*/} {/* Job Application Form Section */}

Join Our Team

Ready to Apply?

Don't see the perfect position? Send us your details and we'll keep you in mind for future opportunities.

First Name *

Last Name *

Email Address *

Phone Number *

Position of Interest

Years of Experience

Current Location *

Key Skills

</div>

<div>
              <label htmlFor="coverLetter" className="block text-sm font-medium text-slate-700 mb-2">
                Cover Letter / Why do you want to join Nuvatech?
              </label>
              <textarea
                id="coverLetter"
                name="coverLetter"
                rows={4}
                placeholder="Tell us about yourself and why you're interested in joining our team..."
                className="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500"
                value={formData.coverLetter}
                onChange={handleChange}
              />
            </div>

<div>
              <label htmlFor="resume" className="block text-sm font-medium text-slate-700 mb-2">
                Resume / CV *
              </label>
              <input
                type="file"
                id="resume"
                name="resume"
                accept=".pdf,.doc,.docx"
                required
                className="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-orange-50 file:text-orange-700 hover:file:bg-orange-100"
                onChange={handleChange}
              />
              <p className="text-sm text-slate-500 mt-1">Accepted formats: PDF, DOC, DOCX (Max 5MB)</p>
            </div>

<div>
              <label htmlFor="portfolio" className="block text-sm font-medium text-slate-700 mb-2">
                Portfolio / LinkedIn Profile (Optional)
              </label>
              <input
                type="url"
                id="portfolio"
                name="portfolio"
                placeholder="https://linkedin.com/in/yourprofile or portfolio URL"
                className="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500"
                value={formData.portfolio}
                onChange={handleChange}
              />
            </div>

<div className="flex items-start space-x-3">
              <input
                type="checkbox"
                id="consent"
                name="consent"
                required
                className="mt-1 h-4 w-4 text-orange-600 focus:ring-orange-500 border-slate-300 rounded"
                checked={formData.consent}
                onChange={handleChange}
              />
              <label htmlFor="consent" className="text-sm text-slate-700">
                I consent to the processing of my personal data for recruitment purposes and agree to Nuvatech's privacy policy. *
              </label>
            </div>

<div className="flex items-start space-x-3">
              <input
                type="checkbox"
                id="updates"
                name="updates"
                className="mt-1 h-4 w-4 text-orange-600 focus:ring-orange-500 border-slate-300 rounded"
                checked={formData.updates}
                onChange={handleChange}
              />
              <label htmlFor="updates" className="text-sm text-slate-700">
                I would like to receive updates about future job opportunities at Nuvatech.
              </label>
            </div>

<div className="flex flex-col sm:flex-row gap-4">
              <Button
                type="submit"
                className="flex-1 bg-orange-600 hover:bg-orange-700"
                disabled={submitting}
              >
                {submitting ? "Submitting..." : "Submit Application"}
              </Button>
              <Button
                type="button"
                variant="outline"
                className="flex-1"
                onClick={() => {
                  const form = document.getElementById("application-form");
                  if (form) {
                    form.style.display = "none";
                  }
                }}
              >
                Cancel
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
        </div>
      </section>

{/* CTA Section 
      <section className="container mx-auto px-4 py-16 md:py-24">
        <div className="bg-gradient-to-r from-orange-600 to-orange-500 rounded-2xl p-8 md:p-12 text-white text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">Ready to Join Our Team?</h2>
          <p className="text-xl text-orange-100 mb-8 max-w-2xl mx-auto">
            Take the next step in your career and be part of a team that's transforming businesses with innovative
            technology solutions.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button size="lg" className="bg-white text-orange-600 hover:bg-orange-50">
              Browse All Positions
            </Button>
            <Button size="lg" variant="outline" className="border-white text-white hover:bg-white/10">
              Contact HR Team
            </Button>
          </div>
        </div>
      </section>
      */}
      {/* Enhanced Footer */}
      <EnhancedFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/case-studies/clean-pro-industries/page.tsx" isMerged="true"
import Image from "next/image"
import { ArrowLeft, Calendar, MapPin, Users, TrendingUp, CheckCircle, Quote } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import EnhancedHeader from "../../../components/enhanced-header"
import EnhancedFooter from "../../../components/enhanced-footer"
import Link from "next/link"

export default function CleanProCaseStudy() {
  const relatedCaseStudies = [
    {
      title: "Fashion Forward Inc. Increases Production Efficiency by 35%",
      slug: "/case-studies/fashion-forward-inc",
      industry: "Manufacturing",
      solution: "StitchIT",
    },
    {
      title: "Style Hub Achieves 65% Sales Growth with DigitAil",
      slug: "/case-studies/style-hub",
      industry: "E-commerce",
      solution: "DigitAil",
    },
    {
      title: "Textile Masters Achieves 99% Payroll Accuracy with HR TECH",
      slug: "/case-studies/textile-masters",
      industry: "HR & Payroll",
      solution: "HR TECH",
    },
  ]

return (
    <div className="min-h-screen bg-gradient-to-br from-white to-slate-50">
      <EnhancedHeader />

{/* Back Button */}
      <section className="container mx-auto px-4 py-8">
        <Link href="/case-studies">
          <Button variant="ghost" className="text-orange-600 hover:text-orange-700 hover:bg-orange-50">
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back to Case Studies
          </Button>
        </Link>
      </section>

{/* Hero Section */}
      <section className="container mx-auto px-4 py-8">
        <div className="max-w-6xl mx-auto">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <Badge className="mb-4 bg-blue-100 text-blue-700 hover:bg-blue-200">WashIT Success Story</Badge>
              <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-6">
                CleanPro Industries Achieves 40% Route Efficiency with WashIT
              </h1>

<div className="flex flex-wrap gap-6 text-slate-600 mb-8">
                <div className="flex items-center space-x-2">
                  <MapPin className="h-4 w-4" />
                  <span>Delhi, India</span>
                </div>
                <div className="flex items-center space-x-2">
                  <Users className="h-4 w-4" />
                  <span>Commercial Laundry</span>
                </div>
                <div className="flex items-center space-x-2">
                  <Calendar className="h-4 w-4" />
                  <span>Implementation: 6 months</span>
                </div>
              </div>

<p className="text-xl text-slate-600 leading-relaxed">
                Discover how CleanPro Industries transformed their commercial laundry operations, achieving remarkable
                improvements in route efficiency, billing accuracy, and customer satisfaction through WashIT
                implementation.
              </p>
            </div>

{/* Key Results */}
      <section className="container mx-auto px-4 py-16 bg-blue-50">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-3xl font-bold text-slate-900 mb-8 text-center">Key Results Achieved</h2>
          <div className="grid md:grid-cols-4 gap-6">
            <Card className="border-0 shadow-lg text-center">
              <CardContent className="p-6">
                <div className="text-4xl font-bold text-blue-600 mb-2">40%</div>
                <div className="text-slate-600">Route Efficiency Improvement</div>
              </CardContent>
            </Card>
            <Card className="border-0 shadow-lg text-center">
              <CardContent className="p-6">
                <div className="text-4xl font-bold text-blue-600 mb-2">98%</div>
                <div className="text-slate-600">Billing Accuracy</div>
              </CardContent>
            </Card>
            <Card className="border-0 shadow-lg text-center">
              <CardContent className="p-6">
                <div className="text-4xl font-bold text-blue-600 mb-2">60%</div>
                <div className="text-slate-600">Customer Satisfaction Increase</div>
              </CardContent>
            </Card>
            <Card className="border-0 shadow-lg text-center">
              <CardContent className="p-6">
                <div className="text-4xl font-bold text-blue-600 mb-2">30%</div>
                <div className="text-slate-600">Operational Cost Reduction</div>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Company Overview */}
      <section className="container mx-auto px-4 py-16">
        <div className="max-w-6xl mx-auto">
          <div className="grid lg:grid-cols-2 gap-12">
            <div>
              <h2 className="text-3xl font-bold text-slate-900 mb-6">About CleanPro Industries</h2>
              <p className="text-slate-700 mb-6">
                CleanPro Industries is a leading commercial laundry service provider based in Delhi, serving hotels,
                restaurants, hospitals, and corporate clients across the National Capital Region. With over 15 years of
                experience, they have built a reputation for quality service and reliability.
              </p>

<div className="space-y-4">
                <div className="flex items-center space-x-3">
                  <CheckCircle className="h-5 w-5 text-green-600" />
                  <span className="text-slate-700">150+ active clients</span>
                </div>
                <div className="flex items-center space-x-3">
                  <CheckCircle className="h-5 w-5 text-green-600" />
                  <span className="text-slate-700">25 delivery vehicles</span>
                </div>
                <div className="flex items-center space-x-3">
                  <CheckCircle className="h-5 w-5 text-green-600" />
                  <span className="text-slate-700">50+ employees</span>
                </div>
                <div className="flex items-center space-x-3">
                  <CheckCircle className="h-5 w-5 text-green-600" />
                  <span className="text-slate-700">Processing 10,000+ kg daily</span>
                </div>
              </div>
            </div>

<div className="bg-slate-50 p-8 rounded-xl">
              <h3 className="text-2xl font-semibold text-slate-900 mb-4">Company Highlights</h3>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <div className="text-2xl font-bold text-blue-600">15+</div>
                  <div className="text-sm text-slate-600">Years in Business</div>
                </div>
                <div>
                  <div className="text-2xl font-bold text-blue-600">₹5Cr</div>
                  <div className="text-sm text-slate-600">Annual Revenue</div>
                </div>
                <div>
                  <div className="text-2xl font-bold text-blue-600">NCR</div>
                  <div className="text-sm text-slate-600">Service Area</div>
                </div>
                <div>
                  <div className="text-2xl font-bold text-blue-600">B2B</div>
                  <div className="text-sm text-slate-600">Focus Market</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* The Challenge */}
      <section className="container mx-auto px-4 py-16 bg-slate-50">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-3xl font-bold text-slate-900 mb-8">The Challenge</h2>
          <div className="grid lg:grid-cols-2 gap-12">
            <div>
              <p className="text-slate-700 mb-6">
                CleanPro Industries was facing significant operational challenges that were impacting their growth and
                customer satisfaction. Their manual processes were becoming increasingly inefficient as they scaled
                their operations.
              </p>

<h3 className="text-xl font-semibold text-slate-900 mb-4">Key Pain Points:</h3>
              <ul className="space-y-3 text-slate-700">
                <li className="flex items-start space-x-3">
                  <div className="w-2 h-2 bg-red-500 rounded-full mt-2"></div>
                  <span>Inefficient route planning leading to high fuel costs and delayed deliveries</span>
                </li>
                <li className="flex items-start space-x-3">
                  <div className="w-2 h-2 bg-red-500 rounded-full mt-2"></div>
                  <span>Manual billing processes causing frequent errors and customer disputes</span>
                </li>
                <li className="flex items-start space-x-3">
                  <div className="w-2 h-2 bg-red-500 rounded-full mt-2"></div>
                  <span>Lack of real-time visibility into order status and delivery tracking</span>
                </li>
                <li className="flex items-start space-x-3">
                  <div className="w-2 h-2 bg-red-500 rounded-full mt-2"></div>
                  <span>Difficulty in managing customer relationships and service history</span>
                </li>
                <li className="flex items-start space-x-3">
                  <div className="w-2 h-2 bg-red-500 rounded-full mt-2"></div>
                  <span>Inventory management issues leading to stockouts and overstocking</span>
                </li>
              </ul>
            </div>

<div className="bg-red-50 p-8 rounded-xl">
              <h3 className="text-xl font-semibold text-red-800 mb-4">Impact on Business</h3>
              <div className="space-y-4">
                <div>
                  <div className="text-2xl font-bold text-red-600">25%</div>
                  <div className="text-sm text-red-700">Higher operational costs</div>
                </div>
                <div>
                  <div className="text-2xl font-bold text-red-600">40%</div>
                  <div className="text-sm text-red-700">Customer complaints</div>
                </div>
                <div>
                  <div className="text-2xl font-bold text-red-600">15%</div>
                  <div className="text-sm text-red-700">Customer churn rate</div>
                </div>
                <div>
                  <div className="text-2xl font-bold text-red-600">30%</div>
                  <div className="text-sm text-red-700">Time spent on manual tasks</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* The Solution */}
      <section className="container mx-auto px-4 py-16">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-3xl font-bold text-slate-900 mb-8">The Solution: WashIT Implementation</h2>

<div className="mb-12">
            <p className="text-xl text-slate-600 mb-6">
              We deployed WashIT, our comprehensive laundry management solution, with a focus on route optimization,
              automated billing, and customer management. The implementation was completed in phases to minimize
              business disruption.
            </p>
          </div>

<div className="grid lg:grid-cols-3 gap-8">
            <Card className="border-0 shadow-lg">
              <CardHeader>
                <CardTitle className="text-xl text-blue-600">Phase 1: Core System Setup</CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-slate-700">
                  <li>• Customer database migration</li>
                  <li>• Service catalog configuration</li>
                  <li>• Pricing structure setup</li>
                  <li>• User account creation</li>
                  <li>• Basic training sessions</li>
                </ul>
              </CardContent>
            </Card>

<Card className="border-0 shadow-lg">
              <CardHeader>
                <CardTitle className="text-xl text-blue-600">Phase 2: Route Optimization</CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-slate-700">
                  <li>• GPS integration for vehicles</li>
                  <li>• Route planning algorithms</li>
                  <li>• Mobile app for drivers</li>
                  <li>• Real-time tracking system</li>
                  <li>• Delivery optimization</li>
                </ul>
              </CardContent>
            </Card>

<Card className="border-0 shadow-lg">
              <CardHeader>
                <CardTitle className="text-xl text-blue-600">Phase 3: Advanced Features</CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-slate-700">
                  <li>• Automated billing system</li>
                  <li>• Customer portal launch</li>
                  <li>• Inventory management</li>
                  <li>• Analytics dashboard</li>
                  <li>• Integration with accounting</li>
                </ul>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Implementation Timeline */}
      <section className="container mx-auto px-4 py-16 bg-blue-50">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-3xl font-bold text-slate-900 mb-8">Implementation Timeline</h2>

<div className="space-y-8">
              <div className="flex items-start space-x-6">
                <div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold text-sm">
                  1
                </div>
                <div>
                  <h3 className="text-xl font-semibold text-slate-900">Month 1-2: Planning & Setup</h3>
                  <p className="text-slate-600">Requirements analysis, system configuration, and data migration</p>
                </div>
              </div>

<div className="flex items-start space-x-6">
                <div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold text-sm">
                  2
                </div>
                <div>
                  <h3 className="text-xl font-semibold text-slate-900">Month 3-4: Core Implementation</h3>
                  <p className="text-slate-600">Route optimization setup, mobile app deployment, and staff training</p>
                </div>
              </div>

<div className="flex items-start space-x-6">
                <div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold text-sm">
                  3
                </div>
                <div>
                  <h3 className="text-xl font-semibold text-slate-900">Month 5-6: Advanced Features</h3>
                  <p className="text-slate-600">Automated billing, customer portal, and analytics implementation</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Results & Benefits */}
      <section className="container mx-auto px-4 py-16">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-3xl font-bold text-slate-900 mb-8">Results & Benefits</h2>

<div className="grid lg:grid-cols-2 gap-12">
            <div>
              <h3 className="text-2xl font-semibold text-slate-900 mb-6">Operational Improvements</h3>

<div className="space-y-6">
                <div className="flex items-center justify-between p-4 bg-green-50 rounded-lg">
                  <span className="text-slate-700">Route Efficiency</span>
                  <div className="flex items-center space-x-2">
                    <TrendingUp className="h-4 w-4 text-green-600" />
                    <span className="text-green-600 font-semibold">+40%</span>
                  </div>
                </div>

<div className="flex items-center justify-between p-4 bg-green-50 rounded-lg">
                  <span className="text-slate-700">Billing Accuracy</span>
                  <div className="flex items-center space-x-2">
                    <TrendingUp className="h-4 w-4 text-green-600" />
                    <span className="text-green-600 font-semibold">98%</span>
                  </div>
                </div>

<div className="flex items-center justify-between p-4 bg-green-50 rounded-lg">
                  <span className="text-slate-700">Customer Satisfaction</span>
                  <div className="flex items-center space-x-2">
                    <TrendingUp className="h-4 w-4 text-green-600" />
                    <span className="text-green-600 font-semibold">+60%</span>
                  </div>
                </div>

<div className="flex items-center justify-between p-4 bg-green-50 rounded-lg">
                  <span className="text-slate-700">Operational Costs</span>
                  <div className="flex items-center space-x-2">
                    <TrendingUp className="h-4 w-4 text-green-600" />
                    <span className="text-green-600 font-semibold">-30%</span>
                  </div>
                </div>
              </div>
            </div>

<div>
              <h3 className="text-2xl font-semibold text-slate-900 mb-6">Business Impact</h3>

<div className="space-y-4">
                <div className="p-4 bg-blue-50 rounded-lg">
                  <h4 className="font-semibold text-slate-900 mb-2">Revenue Growth</h4>
                  <p className="text-slate-700">
                    40% increase in revenue due to improved efficiency and customer retention
                  </p>
                </div>

<div className="p-4 bg-blue-50 rounded-lg">
                  <h4 className="font-semibold text-slate-900 mb-2">Market Expansion</h4>
                  <p className="text-slate-700">Ability to serve 25% more customers with the same resources</p>
                </div>

<div className="p-4 bg-blue-50 rounded-lg">
                  <h4 className="font-semibold text-slate-900 mb-2">Competitive Advantage</h4>
                  <p className="text-slate-700">
                    Real-time tracking and automated billing set them apart from competitors
                  </p>
                </div>

<div className="p-4 bg-blue-50 rounded-lg">
                  <h4 className="font-semibold text-slate-900 mb-2">Scalability</h4>
                  <p className="text-slate-700">System can handle 3x current volume without additional staff</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Testimonial */}
      <section className="container mx-auto px-4 py-16 bg-slate-50">
        <div className="max-w-4xl mx-auto text-center">
          <Quote className="h-12 w-12 text-blue-300 mx-auto mb-6" />
          <blockquote className="text-2xl text-slate-700 italic mb-8">
            "WashIT has revolutionized our laundry operations. The automated billing and route optimization have
            significantly improved our efficiency and customer satisfaction. Our revenue has increased by 40% since
            implementation, and we're now able to serve more customers with better service quality."
          </blockquote>

<div className="flex items-center justify-center space-x-4">
            <Image
              src="/placeholder.svg?height=60&width=60&text=PP"
              alt="Priya Patel"
              width={60}
              height={60}
              className="rounded-full"
            />
            <div className="text-left">
              <div className="font-semibold text-slate-900">Priya Patel</div>
              <div className="text-slate-600">General Manager, CleanPro Industries</div>
            </div>
          </div>
        </div>
      </section>

{/* Related Case Studies */}
      <section className="container mx-auto px-4 py-16">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-3xl font-bold text-slate-900 mb-8">Related Case Studies</h2>
          <div className="grid md:grid-cols-3 gap-8">
            {relatedCaseStudies.map((study, index) => (
              <Card key={index} className="border-0 shadow-lg hover:shadow-xl transition-all duration-300">
                <CardContent className="p-6">
                  <Badge className="mb-3 bg-orange-100 text-orange-700">{study.solution}</Badge>
                  <h3 className="text-lg font-semibold text-slate-900 mb-3">{study.title}</h3>
                  <p className="text-slate-600 mb-4">{study.industry}</p>
                  <Link href={study.slug}>
                    <Button variant="ghost" className="text-orange-600 hover:text-orange-700 p-0">
                      Read Case Study →
                    </Button>
                  </Link>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

<EnhancedFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/case-studies/fashion-forward-inc/page.tsx" isMerged="true"
import Image from "next/image"
import { ArrowLeft, Calendar, MapPin, Building, Users, TrendingUp, CheckCircle, Quote } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import Link from "next/link"
import EnhancedHeader from "../../../components/enhanced-header"
import EnhancedFooter from "../../../components/enhanced-footer"

export default function FashionForwardCaseStudy() {
  const keyResults = [
    { metric: "35%", description: "Increase in production efficiency", icon: TrendingUp },
    { metric: "45%", description: "Reduction in lead time", icon: CheckCircle },
    { metric: "25%", description: "Reduction in material waste", icon: CheckCircle },
    { metric: "20%", description: "Improvement in quality score", icon: TrendingUp },
  ]

const implementationSteps = [
    {
      phase: "Assessment & Planning",
      duration: "2 weeks",
      description: "Comprehensive analysis of existing processes and identification of optimization opportunities.",
    },
    {
      phase: "System Design & Customization",
      duration: "4 weeks",
      description: "Tailoring StitchIT to match Fashion Forward's specific workflow and integration requirements.",
    },
    {
      phase: "Implementation & Training",
      duration: "3 weeks",
      description: "System deployment, data migration, and comprehensive staff training programs.",
    },
    {
      phase: "Go-Live & Support",
      duration: "1 week",
      description: "System launch with dedicated support team and performance monitoring.",
    },
  ]

const relatedCaseStudies = [
    {
      title: "CleanPro Industries Achieves 40% Route Efficiency with WashIT",
      company: "CleanPro Industries",
      industry: "Commercial Laundry",
      image: "/placeholder.svg?height=200&width=300&text=CleanPro+Case+Study",
      slug: "/case-studies/cleanpro-industries",
    },
    {
      title: "Style Hub Achieves 65% Sales Growth with DigitAil",
      company: "Style Hub",
      industry: "E-commerce Fashion",
      image: "/placeholder.svg?height=200&width=300&text=Style+Hub+Case+Study",
      slug: "/case-studies/style-hub",
    },
  ]

return (
    <div className="min-h-screen bg-gradient-to-br from-white to-slate-50">
      <EnhancedHeader />

{/* Back Navigation */}
      <div className="container mx-auto px-4 py-8">
        <Link
          href="/case-studies"
          className="inline-flex items-center text-orange-600 hover:text-orange-700 transition-colors"
        >
          <ArrowLeft className="h-4 w-4 mr-2" />
          Back to Case Studies
        </Link>
      </div>

{/* Case Study Header */}
      <section className="container mx-auto px-4 pb-16">
        <div className="max-w-6xl mx-auto">
          <div className="grid lg:grid-cols-2 gap-12 items-center mb-16">
            <div>
              <Badge className="mb-4 bg-orange-100 text-orange-700">Success Story</Badge>
              <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-6 leading-tight">
                Fashion Forward Inc. Increases Production Efficiency by 35%
              </h1>

<div className="space-y-4 mb-8">
                <div className="flex items-center text-slate-600">
                  <Building className="h-5 w-5 mr-3" />
                  <span className="font-medium">Fashion Forward Inc.</span>
                </div>
                <div className="flex items-center text-slate-600">
                  <Users className="h-5 w-5 mr-3" />
                  <span>Apparel Manufacturing</span>
                </div>
                <div className="flex items-center text-slate-600">
                  <MapPin className="h-5 w-5 mr-3" />
                  <span>Mumbai, India</span>
                </div>
                <div className="flex items-center text-slate-600">
                  <Calendar className="h-5 w-5 mr-3" />
                  <span>Implementation: Q2 2024</span>
                </div>
              </div>

<Badge className="bg-orange-600 text-white px-4 py-2">Powered by StitchIT</Badge>
            </div>

{/* Key Results */}
          <div className="grid md:grid-cols-4 gap-6 mb-16">
            {keyResults.map((result, index) => (
              <Card key={index} className="border-0 shadow-lg bg-orange-50">
                <CardContent className="p-6 text-center">
                  <result.icon className="h-8 w-8 text-orange-600 mx-auto mb-3" />
                  <div className="text-3xl font-bold text-orange-600 mb-2">{result.metric}</div>
                  <div className="text-sm text-slate-600">{result.description}</div>
                </CardContent>
              </Card>
            ))}
          </div>

{/* Challenge Section */}
          <div className="mb-16">
            <h2 className="text-3xl font-bold text-slate-900 mb-8">The Challenge</h2>
            <div className="grid lg:grid-cols-2 gap-12 items-center">
              <div>
                <p className="text-lg text-slate-700 mb-6 leading-relaxed">
                  Fashion Forward Inc., one of Mumbai's leading apparel manufacturers, was struggling with inefficient
                  production processes that were causing significant delays in delivery and customer dissatisfaction.
                </p>
                <p className="text-lg text-slate-700 mb-6 leading-relaxed">
                  The company's manual tracking of samples and inventory was causing errors and bottlenecks throughout
                  their production line, resulting in:
                </p>
                <ul className="space-y-3 text-slate-700">
                  <li className="flex items-start">
                    <div className="bg-red-100 rounded-full p-1 mr-3 mt-1">
                      <div className="w-2 h-2 bg-red-500 rounded-full"></div>
                    </div>
                    <span>Frequent production delays and missed deadlines</span>
                  </li>
                  <li className="flex items-start">
                    <div className="bg-red-100 rounded-full p-1 mr-3 mt-1">
                      <div className="w-2 h-2 bg-red-500 rounded-full"></div>
                    </div>
                    <span>High material wastage due to poor planning</span>
                  </li>
                  <li className="flex items-start">
                    <div className="bg-red-100 rounded-full p-1 mr-3 mt-1">
                      <div className="w-2 h-2 bg-red-500 rounded-full"></div>
                    </div>
                    <span>Quality control issues and customer complaints</span>
                  </li>
                  <li className="flex items-start">
                    <div className="bg-red-100 rounded-full p-1 mr-3 mt-1">
                      <div className="w-2 h-2 bg-red-500 rounded-full"></div>
                    </div>
                    <span>Lack of real-time visibility into production status</span>
                  </li>
                </ul>
              </div>
              <div>
                <Image
                  src="/placeholder.svg?height=400&width=600&text=Manufacturing+Challenges"
                  alt="Manufacturing Challenges"
                  width={600}
                  height={400}
                  className="rounded-lg shadow-lg"
                />
              </div>
            </div>
          </div>

{/* Solution Section */}
          <div className="mb-16">
            <h2 className="text-3xl font-bold text-slate-900 mb-8">Our Approach</h2>
            <div className="grid lg:grid-cols-2 gap-12 items-center">
              <div>
                <Image
                  src="/placeholder.svg?height=400&width=600&text=StitchIT+Solution"
                  alt="StitchIT Solution"
                  width={600}
                  height={400}
                  className="rounded-lg shadow-lg"
                />
              </div>
              <div>
                <p className="text-lg text-slate-700 mb-6 leading-relaxed">
                  We implemented StitchIT with a comprehensive focus on sample management, inventory tracking, and
                  production planning. The solution was carefully customized to match Fashion Forward's specific
                  workflow and seamlessly integrated with their existing systems.
                </p>
                <div className="space-y-4">
                  <div className="flex items-start">
                    <CheckCircle className="h-6 w-6 text-green-500 mr-3 mt-1 flex-shrink-0" />
                    <div>
                      <h4 className="font-semibold text-slate-900 mb-1">Automated Sample Management</h4>
                      <p className="text-slate-600">Streamlined sample tracking from design to production approval</p>
                    </div>
                  </div>
                  <div className="flex items-start">
                    <CheckCircle className="h-6 w-6 text-green-500 mr-3 mt-1 flex-shrink-0" />
                    <div>
                      <h4 className="font-semibold text-slate-900 mb-1">Real-time Inventory Control</h4>
                      <p className="text-slate-600">Live tracking of materials and finished goods inventory</p>
                    </div>
                  </div>
                  <div className="flex items-start">
                    <CheckCircle className="h-6 w-6 text-green-500 mr-3 mt-1 flex-shrink-0" />
                    <div>
                      <h4 className="font-semibold text-slate-900 mb-1">Production Planning & Scheduling</h4>
                      <p className="text-slate-600">Optimized production schedules based on capacity and demand</p>
                    </div>
                  </div>
                  <div className="flex items-start">
                    <CheckCircle className="h-6 w-6 text-green-500 mr-3 mt-1 flex-shrink-0" />
                    <div>
                      <h4 className="font-semibold text-slate-900 mb-1">Quality Control Integration</h4>
                      <p className="text-slate-600">Built-in quality checkpoints throughout the production process</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

{/* Implementation Timeline */}
          <div className="mb-16">
            <h2 className="text-3xl font-bold text-slate-900 mb-8">Implementation Timeline</h2>
            <div className="space-y-6">
              {implementationSteps.map((step, index) => (
                <Card key={index} className="border-0 shadow-lg">
                  <CardContent className="p-6">
                    <div className="flex items-center justify-between mb-4">
                      <div className="flex items-center">
                        <div className="bg-orange-100 rounded-full w-8 h-8 flex items-center justify-center mr-4">
                          <span className="text-orange-600 font-semibold">{index + 1}</span>
                        </div>
                        <h3 className="text-xl font-semibold text-slate-900">{step.phase}</h3>
                      </div>
                      <Badge variant="outline">{step.duration}</Badge>
                    </div>
                    <p className="text-slate-600 ml-12">{step.description}</p>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>

{/* Testimonial */}
          <div className="mb-16">
            <Card className="border-0 shadow-xl bg-slate-50">
              <CardContent className="p-8 relative">
                <Quote className="h-12 w-12 text-orange-300 absolute -top-2 -left-2" />
                <blockquote className="text-xl text-slate-700 italic mb-6 pl-8">
                  "StitchIT has completely transformed our manufacturing process. We've seen remarkable improvements in
                  efficiency and our customers are happier with faster delivery times. The ROI was evident within the
                  first quarter of implementation."
                </blockquote>
                <div className="flex items-center pl-8">
                  <div className="h-12 w-12 rounded-full bg-slate-200 flex items-center justify-center mr-4">
                    <Users className="h-6 w-6 text-slate-500" />
                  </div>
                  <div>
                    <p className="font-semibold text-slate-900">Rajesh Sharma</p>
                    <p className="text-slate-600">Operations Director, Fashion Forward Inc.</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

{/* Results & Impact */}
          <div className="mb-16">
            <h2 className="text-3xl font-bold text-slate-900 mb-8">Results & Impact</h2>
            <div className="grid md:grid-cols-2 gap-8">
              <Card className="border-0 shadow-lg">
                <CardHeader>
                  <CardTitle className="text-xl">Operational Improvements</CardTitle>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-3">
                    <li className="flex items-center">
                      <TrendingUp className="h-5 w-5 text-green-500 mr-3" />
                      <span>35% increase in production efficiency</span>
                    </li>
                    <li className="flex items-center">
                      <TrendingUp className="h-5 w-5 text-green-500 mr-3" />
                      <span>45% reduction in lead time</span>
                    </li>
                    <li className="flex items-center">
                      <TrendingUp className="h-5 w-5 text-green-500 mr-3" />
                      <span>25% reduction in material waste</span>
                    </li>
                    <li className="flex items-center">
                      <TrendingUp className="h-5 w-5 text-green-500 mr-3" />
                      <span>20% improvement in quality score</span>
                    </li>
                  </ul>
                </CardContent>
              </Card>

<Card className="border-0 shadow-lg">
                <CardHeader>
                  <CardTitle className="text-xl">Business Impact</CardTitle>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-3">
                    <li className="flex items-center">
                      <CheckCircle className="h-5 w-5 text-blue-500 mr-3" />
                      <span>Improved customer satisfaction scores</span>
                    </li>
                    <li className="flex items-center">
                      <CheckCircle className="h-5 w-5 text-blue-500 mr-3" />
                      <span>Reduced operational costs</span>
                    </li>
                    <li className="flex items-center">
                      <CheckCircle className="h-5 w-5 text-blue-500 mr-3" />
                      <span>Enhanced competitive positioning</span>
                    </li>
                    <li className="flex items-center">
                      <CheckCircle className="h-5 w-5 text-blue-500 mr-3" />
                      <span>Scalable foundation for future growth</span>
                    </li>
                  </ul>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>

{/* Related Case Studies */}
      <section className="container mx-auto px-4 py-16 bg-white">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-3xl font-bold text-slate-900 mb-8">Related Success Stories</h2>
          <div className="grid md:grid-cols-2 gap-8">
            {relatedCaseStudies.map((study, index) => (
              <Card key={index} className="border-0 shadow-lg hover:shadow-xl transition-all duration-300">
                <div className="aspect-video relative">
                  <Image
                    src={study.image || "/placeholder.svg"}
                    alt={study.title}
                    fill
                    className="object-cover rounded-t-lg"
                  />
                </div>
                <CardContent className="p-6">
                  <Badge className="mb-3 bg-slate-100 text-slate-700">{study.industry}</Badge>
                  <h3 className="font-semibold text-slate-900 mb-2">{study.title}</h3>
                  <p className="text-slate-600 text-sm mb-4">{study.company}</p>
                  <Link href={study.slug}>
                    <Button className="w-full bg-orange-600 hover:bg-orange-700">Read Case Study</Button>
                  </Link>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

{/* CTA Section */}
      <section className="container mx-auto px-4 py-16">
        <div className="max-w-4xl mx-auto text-center">
          <div className="bg-gradient-to-r from-orange-600 to-orange-500 rounded-2xl p-8 md:p-12 text-white">
            <h2 className="text-3xl md:text-4xl font-bold mb-4">Ready to Transform Your Manufacturing?</h2>
            <p className="text-xl text-orange-100 mb-8 max-w-2xl mx-auto">
              Join Fashion Forward Inc. and hundreds of other businesses that have achieved remarkable results with
              StitchIT.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button size="lg" className="bg-white text-orange-600 hover:bg-orange-50">
                Schedule Demo
              </Button>
              <Button size="lg" variant="outline" className="border-white text-white hover:bg-white/10">
                Download Case Study
              </Button>
            </div>
          </div>
        </div>
      </section>

<EnhancedFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/case-studies/page.tsx" isMerged="true"
import Image from "next/image"
import { ArrowRight, Star, Quote, BarChart2, Clock, Users } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import EnhancedHeader from "../../components/enhanced-header"
import EnhancedFooter from "../../components/enhanced-footer"
import Link from "next/link"
import { cn } from "@/lib/utils"

export default function CaseStudiesPage() {
  const caseStudies = [
    {
      id: "fashion-forward-inc",
      title: "Fashion Forward Inc. Increases Production Efficiency by 35%",
      company: "Fashion Forward Inc.",
      industry: "Apparel Manufacturing",
      location: "Mumbai, India",
      solution: "StitchIT",
      challenge:
        "Fashion Forward Inc. was struggling with inefficient production processes, leading to delays in delivery and customer dissatisfaction. Manual tracking of samples and inventory was causing errors and bottlenecks.",
      approach:
        "We implemented StitchIT with a focus on sample management, inventory tracking, and production planning. The solution was customized to match their specific workflow and integrated with their existing systems.",
      results: [
        "35% increase in production efficiency",
        "45% reduction in lead time",
        "25% reduction in material waste",
        "20% improvement in quality score",
      ],
      testimonial:
        "StitchIT has completely transformed our manufacturing process. We've seen remarkable improvements in efficiency and our customers are happier with faster delivery times. The ROI was evident within the first quarter.",
      author: "Rajesh Sharma",
      position: "Operations Director",
      avatar: "/placeholder.svg?height=60&width=60&text=RS",
      image: "/placeholder.svg?height=600&width=800&text=Fashion+Forward+Case+Study",
      color: "orange",
    },
    {
      id: "clean-pro-industries",
      title: "CleanPro Industries Achieves 40% Route Efficiency with WashIT",
      company: "CleanPro Industries",
      industry: "Commercial Laundry",
      location: "Delhi, India",
      solution: "WashIT",
      challenge:
        "CleanPro Industries was facing challenges with route planning, customer management, and billing accuracy. Manual processes were leading to errors and customer disputes.",
      approach:
        "We deployed WashIT with a focus on route optimization, automated billing, and customer management. The solution included mobile apps for drivers and a customer portal for real-time tracking.",
      results: [
        "40% improvement in route efficiency",
        "98% billing accuracy",
        "60% increase in customer satisfaction",
        "30% reduction in operational costs",
      ],
      testimonial:
        "WashIT has revolutionized our laundry operations. The automated billing and route optimization have significantly improved our efficiency and customer satisfaction. Our revenue has increased by 40% since implementation.",
      author: "Priya Patel",
      position: "General Manager",
      avatar: "/placeholder.svg?height=60&width=60&text=PP",
      image: "/placeholder.svg?height=600&width=800&text=CleanPro+Case+Study",
      color: "blue",
    },
    {
      id: "style-hub",
      title: "Style Hub Achieves 65% Sales Growth with DigitAil",
      company: "Style Hub",
      industry: "E-commerce Fashion",
      location: "Bangalore, India",
      solution: "DigitAil",
      challenge:
        "Style Hub was struggling to manage multiple e-commerce platforms, leading to inventory discrepancies, overselling, and customer dissatisfaction. They lacked a unified view of their business across channels.",
      approach:
        "We implemented DigitAil with a focus on multi-channel integration, inventory synchronization, and order management. The solution provided real-time visibility across all sales channels.",
      results: [
        "65% sales growth across channels",
        "50% improvement in order fulfillment",
        "95% inventory accuracy",
        "45% increase in customer retention",
      ],
      testimonial:
        "DigitAil has been a game-changer for our e-commerce business. The multi-channel integration and automated inventory management have helped us scale rapidly while maintaining excellent customer service.",
      author: "Amit Kumar",
      position: "Founder & CEO",
      avatar: "/placeholder.svg?height=60&width=60&text=AK",
      image: "/placeholder.svg?height=600&width=800&text=Style+Hub+Case+Study",
      color: "purple",
    },
    {
      id: "textile-masters",
      title: "Textile Masters Achieves 99% Payroll Accuracy with HR TECH",
      company: "Textile Masters Ltd.",
      industry: "Textile Manufacturing",
      location: "Chennai, India",
      solution: "HR TECH",
      challenge:
        "Textile Masters was struggling with complex payroll processes, attendance tracking inaccuracies, and compliance management. Manual processes were time-consuming and error-prone.",
      approach:
        "We deployed HR TECH with a focus on biometric attendance, automated salary calculation, and compliance management. The solution streamlined their entire HR process.",
      results: [
        "99% payroll accuracy",
        "80% reduction in processing time",
        "100% compliance score",
        "70% improvement in HR efficiency",
      ],
      testimonial:
        "HR TECH has simplified our complex payroll processes tremendously. The automated compliance features ensure we never miss any regulatory requirements, and our employees love the self-service portal.",
      author: "Lakshmi Narayanan",
      position: "HR Director",
      avatar: "/placeholder.svg?height=60&width=60&text=LN",
      image: "/placeholder.svg?height=600&width=800&text=Textile+Masters+Case+Study",
      color: "green",
    },
  ]

const industries = ["All", "Manufacturing", "Laundry", "E-commerce", "HR & Payroll"]

return (
    <div className="min-h-screen bg-gradient-to-br from-white to-slate-50">
      {/* Enhanced Header */}
      <EnhancedHeader />

{/* Case Study Filters */}
      <section className="container mx-auto px-4 py-8">
        <Tabs defaultValue="All" className="w-full">
          <div className="flex justify-center mb-8">
  <TabsList className="flex flex-wrap justify-center gap-3 w-full">
  {industries.map((industry) => (
    <TabsTrigger
      key={industry}
      value={industry}
      className={cn(
        "px-4 py-2 text-sm cursor-pointer transition-all duration-200 rounded-md border",
        "border-slate-300",
        "data-[state=active]:bg-orange-600 data-[state=active]:text-white",
        "data-[state=inactive]:bg-slate-100 data-[state=inactive]:text-slate-700 hover:bg-slate-200"
      )}
    >
      {industry}
    </TabsTrigger>
  ))}
</TabsList>

</div>

{industries.map((industry) => (
            <TabsContent key={industry} value={industry} className="mt-0">
              <div className="grid md:grid-cols-2 gap-8">
                {caseStudies
                  .filter(
                    (study) =>
                      industry === "All" ||
                      (industry === "Manufacturing" && study.solution === "StitchIT") ||
                      (industry === "Laundry" && study.solution === "WashIT") ||
                      (industry === "E-commerce" && study.solution === "DigitAil") ||
                      (industry === "HR & Payroll" && study.solution === "HR TECH"),
                  )
                  .map((study) => (
                    <Card
                      key={study.id}
                      className="border-0 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2 overflow-hidden"
                    >
                      <div className="aspect-video relative">
                        <Image
                          src={study.image || "/placeholder.svg"}
                          alt={study.title}
                          fill
                          className="object-cover"
                        />
                        <div
                          className={`absolute top-4 right-4 bg-${study.color}-600 text-white px-3 py-1 rounded-full text-sm font-medium`}
                        >
                          {study.solution}
                        </div>
                      </div>
                      <CardContent className="p-6 space-y-4">
                        <Badge className={`bg-${study.color}-100 text-${study.color}-700 hover:bg-${study.color}-200`}>
                          {study.industry}
                        </Badge>
                        <h3 className="text-xl font-bold text-slate-900">{study.title}</h3>
                        <p className="text-slate-600 line-clamp-3">{study.challenge}</p>
                        <div className="flex items-center space-x-2">
                          <div className="h-8 w-8 rounded-full overflow-hidden">
                            <Image src={study.avatar || "/placeholder.svg"} alt={study.author} width={32} height={32} />
                          </div>
                          <div>
                            <p className="text-sm font-medium text-slate-900">{study.author}</p>
                            <p className="text-xs text-slate-500">
                              {study.position}, {study.company}
                            </p>
                          </div>
                        </div>
                        <Link href={`/case-studies/${study.id}`}>
                          <Button
                            className={`w-full bg-${study.color}-600 hover:bg-${study.color}-700 text-white`}
                            variant="default"
                          >
                            Read Case Study
                            <ArrowRight className="ml-2 h-4 w-4" />
                          </Button>
                        </Link>
                      </CardContent>
                    </Card>
                  ))}
              </div>
            </TabsContent>
          ))}
        </Tabs>
      </section>

{/* Featured Case Study */}
      <section className="container mx-auto px-4 py-16 md:py-24 bg-white">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">Featured Case Study</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Fashion Forward Inc. Success Story</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            How StitchIT transformed the production process for one of India's leading apparel manufacturers.
          </p>
        </div>

<div className="space-y-8">
            <div>
              <h3 className="text-2xl font-bold text-slate-900 mb-3">The Challenge</h3>
              <p className="text-slate-600">
                Fashion Forward Inc. was struggling with inefficient production processes, leading to delays in delivery
                and customer dissatisfaction. Manual tracking of samples and inventory was causing errors and
                bottlenecks.
              </p>
            </div>

<div>
              <h3 className="text-2xl font-bold text-slate-900 mb-3">Our Approach</h3>
              <p className="text-slate-600">
                We implemented StitchIT with a focus on sample management, inventory tracking, and production planning.
                The solution was customized to match their specific workflow and integrated with their existing systems.
              </p>
            </div>

<div>
              <h3 className="text-2xl font-bold text-slate-900 mb-3">Key Results</h3>
              <div className="grid grid-cols-2 gap-4">
                <div className="bg-orange-50 p-4 rounded-lg">
                  <div className="text-3xl font-bold text-orange-600">35%</div>
                  <div className="text-sm text-slate-600">Production Efficiency</div>
                </div>
                <div className="bg-orange-50 p-4 rounded-lg">
                  <div className="text-3xl font-bold text-orange-600">-45%</div>
                  <div className="text-sm text-slate-600">Lead Time</div>
                </div>
                <div className="bg-orange-50 p-4 rounded-lg">
                  <div className="text-3xl font-bold text-orange-600">-25%</div>
                  <div className="text-sm text-slate-600">Material Waste</div>
                </div>
                <div className="bg-orange-50 p-4 rounded-lg">
                  <div className="text-3xl font-bold text-orange-600">+20%</div>
                  <div className="text-sm text-slate-600">Quality Score</div>
                </div>
              </div>
            </div>

<div className="bg-slate-50 p-6 rounded-lg relative">
              <Quote className="h-8 w-8 text-orange-300 absolute -top-2 -left-2" />
              <p className="text-slate-700 italic pl-6">
                "StitchIT has completely transformed our manufacturing process. We've seen remarkable improvements in
                efficiency and our customers are happier with faster delivery times. The ROI was evident within the
                first quarter."
              </p>
              <div className="flex items-center space-x-3 mt-4">
                <Image
                  src="/placeholder.svg?height=60&width=60&text=RS"
                  alt="Rajesh Sharma"
                  width={48}
                  height={48}
                  className="rounded-full"
                />
                <div>
                  <p className="font-medium text-slate-900">Rajesh Sharma</p>
                  <p className="text-sm text-slate-500">Operations Director, Fashion Forward Inc.</p>
                </div>
              </div>
            </div>

<Link href={`/case-studies/fashion-forward-inc`}>
              <Button className="bg-orange-600 hover:bg-orange-700">
                Read Full Case Study
                <ArrowRight className="ml-2 h-4 w-4" />
              </Button>
            </Link>
          </div>
        </div>
      </section>

{/* Results Overview */}
      <section className="container mx-auto px-4 py-16 md:py-24">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">Impact</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Measurable Results Across Industries</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            Our solutions deliver tangible business outcomes that drive growth and efficiency.
          </p>
        </div>

<div className="grid md:grid-cols-3 gap-8">
          <Card className="border-0 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2">
            <CardHeader>
              <CardTitle className="flex items-center text-xl">
                <BarChart2 className="h-5 w-5 text-orange-600 mr-2" />
                Efficiency Improvements
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <div className="flex justify-between items-center">
                  <span className="text-slate-600">StitchIT</span>
                  <span className="text-orange-600 font-medium">+35%</span>
                </div>
                <div className="h-2 bg-slate-100 rounded-full overflow-hidden">
                  <div className="h-full bg-orange-500 rounded-full" style={{ width: "35%" }}></div>
                </div>
              </div>

<div className="space-y-2">
                <div className="flex justify-between items-center">
                  <span className="text-slate-600">WashIT</span>
                  <span className="text-blue-600 font-medium">+40%</span>
                </div>
                <div className="h-2 bg-slate-100 rounded-full overflow-hidden">
                  <div className="h-full bg-blue-500 rounded-full" style={{ width: "40%" }}></div>
                </div>
              </div>

<div className="space-y-2">
                <div className="flex justify-between items-center">
                  <span className="text-slate-600">DigitAil</span>
                  <span className="text-purple-600 font-medium">+65%</span>
                </div>
                <div className="h-2 bg-slate-100 rounded-full overflow-hidden">
                  <div className="h-full bg-purple-500 rounded-full" style={{ width: "65%" }}></div>
                </div>
              </div>

<Card className="border-0 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2">
            <CardHeader>
              <CardTitle className="flex items-center text-xl">
                <Clock className="h-5 w-5 text-orange-600 mr-2" />
                Time Savings
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <div className="flex justify-between items-center">
                  <span className="text-slate-600">Production Lead Time</span>
                  <span className="text-orange-600 font-medium">-45%</span>
                </div>
                <div className="h-2 bg-slate-100 rounded-full overflow-hidden">
                  <div className="h-full bg-orange-500 rounded-full" style={{ width: "45%" }}></div>
                </div>
              </div>

<div className="space-y-2">
                <div className="flex justify-between items-center">
                  <span className="text-slate-600">Order Processing</span>
                  <span className="text-blue-600 font-medium">-50%</span>
                </div>
                <div className="h-2 bg-slate-100 rounded-full overflow-hidden">
                  <div className="h-full bg-blue-500 rounded-full" style={{ width: "50%" }}></div>
                </div>
              </div>

<div className="space-y-2">
                <div className="flex justify-between items-center">
                  <span className="text-slate-600">Inventory Management</span>
                  <span className="text-purple-600 font-medium">-60%</span>
                </div>
                <div className="h-2 bg-slate-100 rounded-full overflow-hidden">
                  <div className="h-full bg-purple-500 rounded-full" style={{ width: "60%" }}></div>
                </div>
              </div>

<div className="space-y-2">
                <div className="flex justify-between items-center">
                  <span className="text-slate-600">Payroll Processing</span>
                  <span className="text-green-600 font-medium">-80%</span>
                </div>
                <div className="h-2 bg-slate-100 rounded-full overflow-hidden">
                  <div className="h-full bg-green-500 rounded-full" style={{ width: "80%" }}></div>
                </div>
              </div>
            </CardContent>
          </Card>

<Card className="border-0 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2">
            <CardHeader>
              <CardTitle className="flex items-center text-xl">
                <Users className="h-5 w-5 text-orange-600 mr-2" />
                Customer Satisfaction
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <div className="flex justify-between items-center">
                  <span className="text-slate-600">StitchIT</span>
                  <div className="flex">
                    {[...Array(5)].map((_, i) => (
                      <Star key={i} className="h-4 w-4 text-yellow-400 fill-yellow-400" />
                    ))}
                  </div>
                </div>
              </div>

<div className="space-y-2">
                <div className="flex justify-between items-center">
                  <span className="text-slate-600">WashIT</span>
                  <div className="flex">
                    {[...Array(5)].map((_, i) => (
                      <Star key={i} className="h-4 w-4 text-yellow-400 fill-yellow-400" />
                    ))}
                  </div>
                </div>
              </div>

<div className="space-y-2">
                <div className="flex justify-between items-center">
                  <span className="text-slate-600">DigitAil</span>
                  <div className="flex">
                    {[...Array(5)].map((_, i) => (
                      <Star key={i} className="h-4 w-4 text-yellow-400 fill-yellow-400" />
                    ))}
                  </div>
                </div>
              </div>

<div className="space-y-2">
                <div className="flex justify-between items-center">
                  <span className="text-slate-600">HR TECH</span>
                  <div className="flex">
                    {[...Array(5)].map((_, i) => (
                      <Star
                        key={i}
                        className={`h-4 w-4 ${i < 4.9 ? "text-yellow-400 fill-yellow-400" : "text-yellow-400 fill-yellow-400"}`}
                      />
                    ))}
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

{/* CTA Section */}
      <section className="container mx-auto px-4 py-16 md:py-24">
        <div className="bg-gradient-to-r from-orange-600 to-orange-500 rounded-2xl p-8 md:p-12 text-white text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">Ready to Transform Your Business?</h2>
          <p className="text-xl text-orange-100 mb-8 max-w-2xl mx-auto">
            Join hundreds of businesses that have achieved remarkable results with our innovative solutions. Schedule a
            consultation to discuss your specific needs.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
          <Link href='/contact'>
            <Button size="lg" className="bg-white text-orange-600 hover:bg-orange-50">
              Schedule Consultation
            </Button>
          </Link>
          </div>
        </div>
      </section>

{/* Enhanced Footer */}
      <EnhancedFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/case-studies/style-hub/page.tsx" isMerged="true"
import Image from "next/image"
import { ArrowLeft, Calendar, MapPin, Users, TrendingUp, CheckCircle, Quote } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import EnhancedHeader from "../../../components/enhanced-header"
import EnhancedFooter from "../../../components/enhanced-footer"
import Link from "next/link"

export default function StyleHubCaseStudy() {
  const relatedCaseStudies = [
    {
      title: "Fashion Forward Inc. Increases Production Efficiency by 35%",
      slug: "/case-studies/fashion-forward-inc",
      industry: "Manufacturing",
      solution: "StitchIT",
    },
    {
      title: "CleanPro Industries Achieves 40% Route Efficiency with WashIT",
      slug: "/case-studies/clean-pro-industries",
      industry: "Laundry Services",
      solution: "WashIT",
    },
    {
      title: "Textile Masters Achieves 99% Payroll Accuracy with HR TECH",
      slug: "/case-studies/textile-masters",
      industry: "HR & Payroll",
      solution: "HR TECH",
    },
  ]

return (
    <div className="min-h-screen bg-gradient-to-br from-white to-slate-50">
      <EnhancedHeader />

{/* Hero Section */}
      <section className="container mx-auto px-4 py-8">
        <div className="max-w-6xl mx-auto">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <Badge className="mb-4 bg-purple-100 text-purple-700 hover:bg-purple-200">DigitAil Success Story</Badge>
              <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-6">
                Style Hub Achieves 65% Sales Growth with DigitAil
              </h1>

<div className="flex flex-wrap gap-6 text-slate-600 mb-8">
                <div className="flex items-center space-x-2">
                  <MapPin className="h-4 w-4" />
                  <span>Bangalore, India</span>
                </div>
                <div className="flex items-center space-x-2">
                  <Users className="h-4 w-4" />
                  <span>E-commerce Fashion</span>
                </div>
                <div className="flex items-center space-x-2">
                  <Calendar className="h-4 w-4" />
                  <span>Implementation: 4 months</span>
                </div>
              </div>

<p className="text-xl text-slate-600 leading-relaxed">
                Learn how Style Hub transformed their multi-channel e-commerce operations, achieving remarkable sales
                growth and operational efficiency through DigitAil's comprehensive platform.
              </p>
            </div>

{/* Key Results */}
      <section className="container mx-auto px-4 py-16 bg-purple-50">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-3xl font-bold text-slate-900 mb-8 text-center">Key Results Achieved</h2>
          <div className="grid md:grid-cols-4 gap-6">
            <Card className="border-0 shadow-lg text-center">
              <CardContent className="p-6">
                <div className="text-4xl font-bold text-purple-600 mb-2">65%</div>
                <div className="text-slate-600">Sales Growth</div>
              </CardContent>
            </Card>
            <Card className="border-0 shadow-lg text-center">
              <CardContent className="p-6">
                <div className="text-4xl font-bold text-purple-600 mb-2">50%</div>
                <div className="text-slate-600">Order Fulfillment Improvement</div>
              </CardContent>
            </Card>
            <Card className="border-0 shadow-lg text-center">
              <CardContent className="p-6">
                <div className="text-4xl font-bold text-purple-600 mb-2">95%</div>
                <div className="text-slate-600">Inventory Accuracy</div>
              </CardContent>
            </Card>
            <Card className="border-0 shadow-lg text-center">
              <CardContent className="p-6">
                <div className="text-4xl font-bold text-purple-600 mb-2">45%</div>
                <div className="text-slate-600">Customer Retention Increase</div>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Company Overview */}
      <section className="container mx-auto px-4 py-16">
        <div className="max-w-6xl mx-auto">
          <div className="grid lg:grid-cols-2 gap-12">
            <div>
              <h2 className="text-3xl font-bold text-slate-900 mb-6">About Style Hub</h2>
              <p className="text-slate-700 mb-6">
                Style Hub is a fast-growing e-commerce fashion retailer based in Bangalore, specializing in trendy
                apparel for young professionals. Founded in 2019, they quickly expanded to multiple online platforms
                including their own website, Amazon, Flipkart, and social media channels.
              </p>

<div className="space-y-4">
                <div className="flex items-center space-x-3">
                  <CheckCircle className="h-5 w-5 text-green-600" />
                  <span className="text-slate-700">5 sales channels</span>
                </div>
                <div className="flex items-center space-x-3">
                  <CheckCircle className="h-5 w-5 text-green-600" />
                  <span className="text-slate-700">2000+ SKUs</span>
                </div>
                <div className="flex items-center space-x-3">
                  <CheckCircle className="h-5 w-5 text-green-600" />
                  <span className="text-slate-700">50,000+ customers</span>
                </div>
                <div className="flex items-center space-x-3">
                  <CheckCircle className="h-5 w-5 text-green-600" />
                  <span className="text-slate-700">Pan-India delivery</span>
                </div>
              </div>
            </div>

<div className="bg-slate-50 p-8 rounded-xl">
              <h3 className="text-2xl font-semibold text-slate-900 mb-4">Company Highlights</h3>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <div className="text-2xl font-bold text-purple-600">2019</div>
                  <div className="text-sm text-slate-600">Founded</div>
                </div>
                <div>
                  <div className="text-2xl font-bold text-purple-600">₹10Cr</div>
                  <div className="text-sm text-slate-600">Annual Revenue</div>
                </div>
                <div>
                  <div className="text-2xl font-bold text-purple-600">25-35</div>
                  <div className="text-sm text-slate-600">Target Age Group</div>
                </div>
                <div>
                  <div className="text-2xl font-bold text-purple-600">Fashion</div>
                  <div className="text-sm text-slate-600">Industry Focus</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* The Challenge */}
      <section className="container mx-auto px-4 py-16 bg-slate-50">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-3xl font-bold text-slate-900 mb-8">The Challenge</h2>
          <div className="grid lg:grid-cols-2 gap-12">
            <div>
              <p className="text-slate-700 mb-6">
                Style Hub was experiencing rapid growth but struggling to manage inventory across multiple sales
                channels. Their manual processes were leading to overselling, stockouts, and customer dissatisfaction.
              </p>

<h3 className="text-xl font-semibold text-slate-900 mb-4">Key Pain Points:</h3>
              <ul className="space-y-3 text-slate-700">
                <li className="flex items-start space-x-3">
                  <div className="w-2 h-2 bg-red-500 rounded-full mt-2"></div>
                  <span>Inventory discrepancies across multiple platforms</span>
                </li>
                <li className="flex items-start space-x-3">
                  <div className="w-2 h-2 bg-red-500 rounded-full mt-2"></div>
                  <span>Overselling leading to order cancellations and customer complaints</span>
                </li>
                <li className="flex items-start space-x-3">
                  <div className="w-2 h-2 bg-red-500 rounded-full mt-2"></div>
                  <span>Manual order processing causing delays and errors</span>
                </li>
                <li className="flex items-start space-x-3">
                  <div className="w-2 h-2 bg-red-500 rounded-full mt-2"></div>
                  <span>Lack of unified view of business performance</span>
                </li>
                <li className="flex items-start space-x-3">
                  <div className="w-2 h-2 bg-red-500 rounded-full mt-2"></div>
                  <span>Difficulty in demand forecasting and inventory planning</span>
                </li>
              </ul>
            </div>

<div className="bg-red-50 p-8 rounded-xl">
              <h3 className="text-xl font-semibold text-red-800 mb-4">Impact on Business</h3>
              <div className="space-y-4">
                <div>
                  <div className="text-2xl font-bold text-red-600">20%</div>
                  <div className="text-sm text-red-700">Order cancellation rate</div>
                </div>
                <div>
                  <div className="text-2xl font-bold text-red-600">35%</div>
                  <div className="text-sm text-red-700">Inventory holding costs</div>
                </div>
                <div>
                  <div className="text-2xl font-bold text-red-600">15%</div>
                  <div className="text-sm text-red-700">Customer churn rate</div>
                </div>
                <div>
                  <div className="text-2xl font-bold text-red-600">40%</div>
                  <div className="text-sm text-red-700">Time spent on manual tasks</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

<div className="mb-12">
            <p className="text-xl text-slate-600 mb-6">
              We implemented DigitAil with a focus on multi-channel integration, inventory synchronization, and order
              management. The solution provide real-time visibility and automated processes across all sales channels.
            </p>
          </div>

<div className="grid lg:grid-cols-3 gap-8">
            <Card className="border-0 shadow-lg">
              <CardHeader>
                <CardTitle className="text-xl text-purple-600">Multi-Channel Integration</CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-slate-700">
                  <li>• Website integration</li>
                  <li>• Amazon & Flipkart APIs</li>
                  <li>• Social commerce platforms</li>
                  <li>• Unified product catalog</li>
                  <li>• Real-time sync</li>
                </ul>
              </CardContent>
            </Card>

<Card className="border-0 shadow-lg">
              <CardHeader>
                <CardTitle className="text-xl text-purple-600">Inventory Management</CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-slate-700">
                  <li>• Real-time stock tracking</li>
                  <li>• Automated reorder points</li>
                  <li>• Demand forecasting</li>
                  <li>• Warehouse optimization</li>
                  <li>• Stock alerts</li>
                </ul>
              </CardContent>
            </Card>

<Card className="border-0 shadow-lg">
              <CardHeader>
                <CardTitle className="text-xl text-purple-600">Order Processing</CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-slate-700">
                  <li>• Automated order routing</li>
                  <li>• Shipping integration</li>
                  <li>• Payment processing</li>
                  <li>• Customer notifications</li>
                  <li>• Returns management</li>
                </ul>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Results & Benefits */}
      <section className="container mx-auto px-4 py-16 bg-purple-50">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-3xl font-bold text-slate-900 mb-8">Results & Benefits</h2>

<div className="grid lg:grid-cols-2 gap-12">
            <div>
              <h3 className="text-2xl font-semibold text-slate-900 mb-6">Business Growth</h3>

<div className="space-y-6">
                <div className="flex items-center justify-between p-4 bg-green-50 rounded-lg">
                  <span className="text-slate-700">Sales Revenue</span>
                  <div className="flex items-center space-x-2">
                    <TrendingUp className="h-4 w-4 text-green-600" />
                    <span className="text-green-600 font-semibold">+65%</span>
                  </div>
                </div>

<div className="flex items-center justify-between p-4 bg-green-50 rounded-lg">
                  <span className="text-slate-700">Order Volume</span>
                  <div className="flex items-center space-x-2">
                    <TrendingUp className="h-4 w-4 text-green-600" />
                    <span className="text-green-600 font-semibold">+80%</span>
                  </div>
                </div>

<div className="flex items-center justify-between p-4 bg-green-50 rounded-lg">
                  <span className="text-slate-700">Customer Base</span>
                  <div className="flex items-center space-x-2">
                    <TrendingUp className="h-4 w-4 text-green-600" />
                    <span className="text-green-600 font-semibold">+120%</span>
                  </div>
                </div>

<div className="flex items-center justify-between p-4 bg-green-50 rounded-lg">
                  <span className="text-slate-700">Market Reach</span>
                  <div className="flex items-center space-x-2">
                    <TrendingUp className="h-4 w-4 text-green-600" />
                    <span className="text-green-600 font-semibold">+200%</span>
                  </div>
                </div>
              </div>
            </div>

<div>
              <h3 className="text-2xl font-semibold text-slate-900 mb-6">Operational Efficiency</h3>

<div className="space-y-4">
                <div className="p-4 bg-blue-50 rounded-lg">
                  <h4 className="font-semibold text-slate-900 mb-2">Inventory Accuracy</h4>
                  <p className="text-slate-700">
                    Achieved 95% inventory accuracy across all channels, eliminating overselling issues
                  </p>
                </div>

<div className="p-4 bg-blue-50 rounded-lg">
                  <h4 className="font-semibold text-slate-900 mb-2">Order Processing</h4>
                  <p className="text-slate-700">
                    50% faster order processing with automated workflows and integrations
                  </p>
                </div>

<div className="p-4 bg-blue-50 rounded-lg">
                  <h4 className="font-semibold text-slate-900 mb-2">Customer Satisfaction</h4>
                  <p className="text-slate-700">45% increase in customer retention through improved service quality</p>
                </div>

<div className="p-4 bg-blue-50 rounded-lg">
                  <h4 className="font-semibold text-slate-900 mb-2">Cost Reduction</h4>
                  <p className="text-slate-700">30% reduction in operational costs through process automation</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Testimonial */}
      <section className="container mx-auto px-4 py-16">
        <div className="max-w-4xl mx-auto text-center">
          <Quote className="h-12 w-12 text-purple-300 mx-auto mb-6" />
          <blockquote className="text-2xl text-slate-700 italic mb-8">
            "DigitAil has been a game-changer for our business. The multi-channel integration and real-time inventory
            management have allowed us to scale rapidly while maintaining excellent customer service. Our sales have
            grown by 65% since implementation, and we're now confident about expanding to new markets."
          </blockquote>

<div className="flex items-center justify-center space-x-4">
            <Image
              src="/placeholder.svg?height=60&width=60&text=AS"
              alt="Arjun Sharma"
              width={60}
              height={60}
              className="rounded-full"
            />
            <div className="text-left">
              <div className="font-semibold text-slate-900">Arjun Sharma</div>
              <div className="text-slate-600">Founder & CEO, Style Hub</div>
            </div>
          </div>
        </div>
      </section>

{/* Related Case Studies */}
      <section className="container mx-auto px-4 py-16 bg-slate-50">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-3xl font-bold text-slate-900 mb-8">Related Case Studies</h2>
          <div className="grid md:grid-cols-3 gap-8">
            {relatedCaseStudies.map((study, index) => (
              <Card key={index} className="border-0 shadow-lg hover:shadow-xl transition-all duration-300">
                <CardContent className="p-6">
                  <Badge className="mb-3 bg-orange-100 text-orange-700">{study.solution}</Badge>
                  <h3 className="text-lg font-semibold text-slate-900 mb-3">{study.title}</h3>
                  <p className="text-slate-600 mb-4">{study.industry}</p>
                  <Link href={study.slug}>
                    <Button variant="ghost" className="text-orange-600 hover:text-orange-700 p-0">
                      Read Case Study →
                    </Button>
                  </Link>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

<EnhancedFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/case-studies/textile-masters/page.tsx" isMerged="true"
import Image from "next/image"
import { ArrowLeft, Calendar, MapPin, Users, TrendingUp, CheckCircle, Quote } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import EnhancedHeader from "../../../components/enhanced-header"
import EnhancedFooter from "../../../components/enhanced-footer"
import Link from "next/link"

export default function TextileMastersCaseStudy() {
  const relatedCaseStudies = [
    {
      title: "Fashion Forward Inc. Increases Production Efficiency by 35%",
      slug: "/case-studies/fashion-forward-inc",
      industry: "Manufacturing",
      solution: "StitchIT",
    },
    {
      title: "CleanPro Industries Achieves 40% Route Efficiency with WashIT",
      slug: "/case-studies/clean-pro-industries",
      industry: "Laundry Services",
      solution: "WashIT",
    },
    {
      title: "Style Hub Achieves 65% Sales Growth with DigitAil",
      slug: "/case-studies/style-hub",
      industry: "E-commerce",
      solution: "DigitAil",
    },
  ]

return (
    <div className="min-h-screen bg-gradient-to-br from-white to-slate-50">
      <EnhancedHeader />

{/* Hero Section */}
      <section className="container mx-auto px-4 py-8">
        <div className="max-w-6xl mx-auto">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <Badge className="mb-4 bg-green-100 text-green-700 hover:bg-green-200">HR TECH Success Story</Badge>
              <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-6">
                Textile Masters Achieves 99% Payroll Accuracy with HR TECH
              </h1>

<div className="flex flex-wrap gap-6 text-slate-600 mb-8">
                <div className="flex items-center space-x-2">
                  <MapPin className="h-4 w-4" />
                  <span>Coimbatore, India</span>
                </div>
                <div className="flex items-center space-x-2">
                  <Users className="h-4 w-4" />
                  <span>Textile Manufacturing</span>
                </div>
                <div className="flex items-center space-x-2">
                  <Calendar className="h-4 w-4" />
                  <span>Implementation: 3 months</span>
                </div>
              </div>

<p className="text-xl text-slate-600 leading-relaxed">
                Discover how Textile Masters transformed their HR operations, achieving exceptional payroll accuracy and
                compliance while reducing administrative overhead through HR TECH implementation.
              </p>
            </div>

{/* Key Results */}
      <section className="container mx-auto px-4 py-16 bg-green-50">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-3xl font-bold text-slate-900 mb-8 text-center">Key Results Achieved</h2>
          <div className="grid md:grid-cols-4 gap-6">
            <Card className="border-0 shadow-lg text-center">
              <CardContent className="p-6">
                <div className="text-4xl font-bold text-green-600 mb-2">99%</div>
                <div className="text-slate-600">Payroll Accuracy</div>
              </CardContent>
            </Card>
            <Card className="border-0 shadow-lg text-center">
              <CardContent className="p-6">
                <div className="text-4xl font-bold text-green-600 mb-2">75%</div>
                <div className="text-slate-600">Time Savings in HR Tasks</div>
              </CardContent>
            </Card>
            <Card className="border-0 shadow-lg text-center">
              <CardContent className="p-6">
                <div className="text-4xl font-bold text-green-600 mb-2">100%</div>
                <div className="text-slate-600">Compliance Achievement</div>
              </CardContent>
            </Card>
            <Card className="border-0 shadow-lg text-center">
              <CardContent className="p-6">
                <div className="text-4xl font-bold text-green-600 mb-2">85%</div>
                <div className="text-slate-600">Employee Satisfaction Increase</div>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Company Overview */}
      <section className="container mx-auto px-4 py-16">
        <div className="max-w-6xl mx-auto">
          <div className="grid lg:grid-cols-2 gap-12">
            <div>
              <h2 className="text-3xl font-bold text-slate-900 mb-6">About Textile Masters</h2>
              <p className="text-slate-700 mb-6">
                Textile Masters is a leading textile manufacturing company based in Coimbatore, Tamil Nadu. With over 25
                years of experience in the industry, they specialize in producing high-quality fabrics for both domestic
                and international markets, employing over 800 workers across multiple shifts.
              </p>

<div className="space-y-4">
                <div className="flex items-center space-x-3">
                  <CheckCircle className="h-5 w-5 text-green-600" />
                  <span className="text-slate-700">800+ employees</span>
                </div>
                <div className="flex items-center space-x-3">
                  <CheckCircle className="h-5 w-5 text-green-600" />
                  <span className="text-slate-700">3 manufacturing units</span>
                </div>
                <div className="flex items-center space-x-3">
                  <CheckCircle className="h-5 w-5 text-green-600" />
                  <span className="text-slate-700">24/7 operations</span>
                </div>
                <div className="flex items-center space-x-3">
                  <CheckCircle className="h-5 w-5 text-green-600" />
                  <span className="text-slate-700">Export to 15+ countries</span>
                </div>
              </div>
            </div>

<div className="bg-slate-50 p-8 rounded-xl">
              <h3 className="text-2xl font-semibold text-slate-900 mb-4">Company Highlights</h3>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <div className="text-2xl font-bold text-green-600">25+</div>
                  <div className="text-sm text-slate-600">Years in Business</div>
                </div>
                <div>
                  <div className="text-2xl font-bold text-green-600">₹150Cr</div>
                  <div className="text-sm text-slate-600">Annual Revenue</div>
                </div>
                <div>
                  <div className="text-2xl font-bold text-green-600">15+</div>
                  <div className="text-sm text-slate-600">Export Countries</div>
                </div>
                <div>
                  <div className="text-2xl font-bold text-green-600">ISO</div>
                  <div className="text-sm text-slate-600">Certified</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* The Challenge */}
      <section className="container mx-auto px-4 py-16 bg-slate-50">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-3xl font-bold text-slate-900 mb-8">The Challenge</h2>
          <div className="grid lg:grid-cols-2 gap-12">
            <div>
              <p className="text-slate-700 mb-6">
                Textile Masters was struggling with complex payroll calculations due to multiple shifts, overtime rules,
                and varying wage structures. Their manual HR processes were error-prone and time-consuming, leading to
                employee dissatisfaction and compliance issues.
              </p>

<h3 className="text-xl font-semibold text-slate-900 mb-4">Key Pain Points:</h3>
              <ul className="space-y-3 text-slate-700">
                <li className="flex items-start space-x-3">
                  <div className="w-2 h-2 bg-red-500 rounded-full mt-2"></div>
                  <span>Complex payroll calculations with frequent errors</span>
                </li>
                <li className="flex items-start space-x-3">
                  <div className="w-2 h-2 bg-red-500 rounded-full mt-2"></div>
                  <span>Manual attendance tracking leading to disputes</span>
                </li>
                <li className="flex items-start space-x-3">
                  <div className="w-2 h-2 bg-red-500 rounded-full mt-2"></div>
                  <span>Compliance challenges with labor laws and regulations</span>
                </li>
                <li className="flex items-start space-x-3">
                  <div className="w-2 h-2 bg-red-500 rounded-full mt-2"></div>
                  <span>Time-consuming leave management processes</span>
                </li>
                <li className="flex items-start space-x-3">
                  <div className="w-2 h-2 bg-red-500 rounded-full mt-2"></div>
                  <span>Lack of employee self-service capabilities</span>
                </li>
              </ul>
            </div>

<div className="bg-red-50 p-8 rounded-xl">
              <h3 className="text-xl font-semibold text-red-800 mb-4">Impact on Business</h3>
              <div className="space-y-4">
                <div>
                  <div className="text-2xl font-bold text-red-600">15%</div>
                  <div className="text-sm text-red-700">Payroll error rate</div>
                </div>
                <div>
                  <div className="text-2xl font-bold text-red-600">40hrs</div>
                  <div className="text-sm text-red-700">Weekly HR admin time</div>
                </div>
                <div>
                  <div className="text-2xl font-bold text-red-600">25%</div>
                  <div className="text-sm text-red-700">Employee complaints</div>
                </div>
                <div>
                  <div className="text-2xl font-bold text-red-600">₹5L</div>
                  <div className="text-sm text-red-700">Monthly compliance costs</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

<div className="mb-12">
            <p className="text-xl text-slate-600 mb-6">
              We implemented HR TECH with a focus on automated payroll processing, biometric attendance integration, and
              comprehensive compliance management. The solution was customized to handle complex shift patterns and wage
              structures specific to the textile industry.
            </p>
          </div>

<div className="grid lg:grid-cols-3 gap-8">
            <Card className="border-0 shadow-lg">
              <CardHeader>
                <CardTitle className="text-xl text-green-600">Payroll Automation</CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-slate-700">
                  <li>• Multi-shift calculations</li>
                  <li>• Overtime management</li>
                  <li>• Statutory deductions</li>
                  <li>• Bonus calculations</li>
                  <li>• Bank integration</li>
                </ul>
              </CardContent>
            </Card>

<Card className="border-0 shadow-lg">
              <CardHeader>
                <CardTitle className="text-xl text-green-600">Attendance Management</CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-slate-700">
                  <li>• Biometric integration</li>
                  <li>• Shift scheduling</li>
                  <li>• Leave management</li>
                  <li>• Real-time tracking</li>
                  <li>• Mobile access</li>
                </ul>
              </CardContent>
            </Card>

<Card className="border-0 shadow-lg">
              <CardHeader>
                <CardTitle className="text-xl text-green-600">Compliance & Reporting</CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-slate-700">
                  <li>• Labor law compliance</li>
                  <li>• Statutory reports</li>
                  <li>• Audit trails</li>
                  <li>• Employee portal</li>
                  <li>• Analytics dashboard</li>
                </ul>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Implementation Timeline */}
      <section className="container mx-auto px-4 py-16 bg-green-50">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-3xl font-bold text-slate-900 mb-8">Implementation Timeline</h2>

<div className="space-y-8">
              <div className="flex items-start space-x-6">
                <div className="w-8 h-8 bg-green-600 rounded-full flex items-center justify-center text-white font-bold text-sm">
                  1
                </div>
                <div>
                  <h3 className="text-xl font-semibold text-slate-900">Month 1: System Setup & Data Migration</h3>
                  <p className="text-slate-600">
                    Employee data migration, system configuration, and biometric device installation
                  </p>
                </div>
              </div>

<div className="flex items-start space-x-6">
                <div className="w-8 h-8 bg-green-600 rounded-full flex items-center justify-center text-white font-bold text-sm">
                  2
                </div>
                <div>
                  <h3 className="text-xl font-semibold text-slate-900">Month 2: Payroll Configuration & Testing</h3>
                  <p className="text-slate-600">
                    Complex payroll rules setup, shift patterns configuration, and parallel testing
                  </p>
                </div>
              </div>

<div className="flex items-start space-x-6">
                <div className="w-8 h-8 bg-green-600 rounded-full flex items-center justify-center text-white font-bold text-sm">
                  3
                </div>
                <div>
                  <h3 className="text-xl font-semibold text-slate-900">Month 3: Go-Live & Training</h3>
                  <p className="text-slate-600">System go-live, employee training, and support stabilization</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

<div className="grid lg:grid-cols-2 gap-12">
            <div>
              <h3 className="text-2xl font-semibold text-slate-900 mb-6">Operational Improvements</h3>

<div className="space-y-6">
                <div className="flex items-center justify-between p-4 bg-green-50 rounded-lg">
                  <span className="text-slate-700">Payroll Accuracy</span>
                  <div className="flex items-center space-x-2">
                    <TrendingUp className="h-4 w-4 text-green-600" />
                    <span className="text-green-600 font-semibold">99%</span>
                  </div>
                </div>

<div className="flex items-center justify-between p-4 bg-green-50 rounded-lg">
                  <span className="text-slate-700">HR Task Efficiency</span>
                  <div className="flex items-center space-x-2">
                    <TrendingUp className="h-4 w-4 text-green-600" />
                    <span className="text-green-600 font-semibold">+75%</span>
                  </div>
                </div>

<div className="flex items-center justify-between p-4 bg-green-50 rounded-lg">
                  <span className="text-slate-700">Compliance Score</span>
                  <div className="flex items-center space-x-2">
                    <TrendingUp className="h-4 w-4 text-green-600" />
                    <span className="text-green-600 font-semibold">100%</span>
                  </div>
                </div>

<div className="flex items-center justify-between p-4 bg-green-50 rounded-lg">
                  <span className="text-slate-700">Employee Satisfaction</span>
                  <div className="flex items-center space-x-2">
                    <TrendingUp className="h-4 w-4 text-green-600" />
                    <span className="text-green-600 font-semibold">+85%</span>
                  </div>
                </div>
              </div>
            </div>

<div>
              <h3 className="text-2xl font-semibold text-slate-900 mb-6">Business Impact</h3>

<div className="space-y-4">
                <div className="p-4 bg-blue-50 rounded-lg">
                  <h4 className="font-semibold text-slate-900 mb-2">Cost Savings</h4>
                  <p className="text-slate-700">
                    ₹3 lakhs monthly savings in HR administrative costs and compliance penalties
                  </p>
                </div>

<div className="p-4 bg-blue-50 rounded-lg">
                  <h4 className="font-semibold text-slate-900 mb-2">Time Efficiency</h4>
                  <p className="text-slate-700">
                    75% reduction in time spent on payroll processing and HR administration
                  </p>
                </div>

<div className="p-4 bg-blue-50 rounded-lg">
                  <h4 className="font-semibold text-slate-900 mb-2">Employee Experience</h4>
                  <p className="text-slate-700">
                    Self-service portal reduced HR queries by 60% and improved satisfaction
                  </p>
                </div>

<div className="p-4 bg-blue-50 rounded-lg">
                  <h4 className="font-semibold text-slate-900 mb-2">Scalability</h4>
                  <p className="text-slate-700">System can handle 2x current workforce without additional HR staff</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Testimonial */}
      <section className="container mx-auto px-4 py-16 bg-slate-50">
        <div className="max-w-4xl mx-auto text-center">
          <Quote className="h-12 w-12 text-green-300 mx-auto mb-6" />
          <blockquote className="text-2xl text-slate-700 italic mb-8">
            "HR TECH has revolutionized our HR operations. The automated payroll system has eliminated errors and saved
            us countless hours every month. Our employees are happier with the self-service portal, and we're now fully
            compliant with all labor regulations. The ROI has been exceptional."
          </blockquote>

<div className="flex items-center justify-center space-x-4">
            <Image
              src="/placeholder.svg?height=60&width=60&text=RK"
              alt="Ravi Kumar"
              width={60}
              height={60}
              className="rounded-full"
            />
            <div className="text-left">
              <div className="font-semibold text-slate-900">Ravi Kumar</div>
              <div className="text-slate-600">HR Director, Textile Masters</div>
            </div>
          </div>
        </div>
      </section>

<EnhancedFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/contact/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { ArrowRight, Mail, Phone, MapPin, Clock, Send } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import EnhancedHeader from "../../components/enhanced-header"
import EnhancedFooter from "../../components/enhanced-footer"

export default function ContactPage() {
  const [submitting, setSubmitting] = useState(false);

const [formData, setFormData] = useState({
    name: "",
    email: "",
    phone: "",
    company: "",
    subject: "",
    message: "",
    interest: "",
    source: "",
  })

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handleSelectChange = (name: string, value: string) => {
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

{/*const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    console.log("Form submitted:", formData)
    // Here you would typically send the data to your backend
    alert("Thank you for your message. We'll get back to you soon!")
    setFormData({
      name: "",
      email: "",
      phone: "",
      company: "",
      subject: "",
      message: "",
      interest: "",
      source: "",
    })
  }
  */}

const handleSubmit = async (e) => {
  e.preventDefault();
  setSubmitting(true);
  try {
    const response = await fetch('https://mailtrap-api.codeofbytes.com/send-email', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(formData),
    });

if (response.ok) {
      alert('Message sent successfully!');
    } else {
      alert('Failed to send message.');
    }
  } catch (error) {
    console.error(error);
    alert('Error occurred.');
  } finally{
    setSubmitting(false);
    setFormData({
      name: "",
      email: "",
      phone: "",
      company: "",
      subject: "",
      message: "",
      interest: "",
      source: "",
    })
  }
};

return (
    <div className="min-h-screen bg-gradient-to-br from-white to-slate-50">
      {/* Enhanced Header */}
      <EnhancedHeader />

{/* Contact Information */}
      <section className="container mx-auto px-4 py-8">
        <div className="grid md:grid-cols-3 gap-8">
          <Card className="border-0 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2">
            <CardContent className="p-6 text-center">
              <div className="h-12 w-12 rounded-full bg-orange-100 flex items-center justify-center text-orange-600 mx-auto mb-4">
                <Phone className="h-6 w-6" />
              </div>
              <h3 className="text-lg font-semibold text-slate-900 mb-2">Call Us</h3>
              <p className="text-slate-600">+91 76007 67857</p>
              <div className="flex items-center justify-center mt-2 text-sm text-slate-500">
                <Clock className="h-3 w-3 mr-1" />
                <span>Monday - Saturday: 9:00 AM - 6:00 PM</span>
              </div>
            </CardContent>
          </Card>

<Card className="border-0 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2">
            <CardContent className="p-6 text-center">
              <div className="h-12 w-12 rounded-full bg-orange-100 flex items-center justify-center text-orange-600 mx-auto mb-4">
                <Mail className="h-6 w-6" />
              </div>
              <h3 className="text-lg font-semibold text-slate-900 mb-2">Email Us</h3>
              <p className="text-slate-600">info@nuvatetechnology.com</p>
              <p className="text-slate-600">support@nuvatetechnology.com</p>
              <div className="flex items-center justify-center mt-2 text-sm text-slate-500">
                <Clock className="h-3 w-3 mr-1" />
                <span>We'll respond within 24 hours</span>
              </div>
            </CardContent>
          </Card>

<Card className="border-0 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2">
            <CardContent className="p-6 text-center">
              <div className="h-12 w-12 rounded-full bg-orange-100 flex items-center justify-center text-orange-600 mx-auto mb-4">
                <MapPin className="h-6 w-6" />
              </div>
              <h3 className="text-lg font-semibold text-slate-900 mb-2">Visit Us</h3>
              <p className="text-slate-600">
                B-901, Empire Business Hub,
                <br />
                Science City Road, Sola,
                <br />
                Ahmedabad - 380060, Gujarat, India
              </p>
            </CardContent>
          </Card>
        </div>
      </section>

{/* Map and Contact Form */}
      <section className="container mx-auto px-4 py-16">
        <div className="grid lg:grid-cols-2 gap-12">
          {/* Map */}
          <div className="h-[500px] bg-slate-200 rounded-xl overflow-hidden shadow-lg">
            <iframe
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3671.6440728038465!2d72.5047877!3d23.0376694!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x395e9b2a26d2c2e1%3A0x9a1e5fb7a5a7b1b0!2sEmpire%20Business%20Hub%2C%20Science%20City%20Rd%2C%20Sola%2C%20Ahmedabad%2C%20Gujarat%20380060!5e0!3m2!1sen!2sin!4v1623825647000!5m2!1sen!2sin"
              width="100%"
              height="100%"
              style={{ border: 0 }}
              allowFullScreen
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
            ></iframe>
          </div>

{/* Contact Form */}
          <div>
            <h2 className="text-2xl font-bold text-slate-900 mb-6">Send Us a Message</h2>
            <form onSubmit={handleSubmit} className="space-y-6">
              <div className="grid md:grid-cols-2 gap-6">
                <div className="space-y-2">
                  <Label htmlFor="name">Full Name</Label>
                  <Input
                    id="name"
                    name="name"
                    placeholder="John Doe"
                    value={formData.name}
                    onChange={handleChange}
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="email">Email Address</Label>
                  <Input
                    id="email"
                    name="email"
                    type="email"
                    placeholder="john@example.com"
                    value={formData.email}
                    onChange={handleChange}
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="phone">Phone Number</Label>
                  <Input
                    id="phone"
                    name="phone"
                    placeholder="+91 98765 43210"
                    value={formData.phone}
                    onChange={handleChange}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="company">Company Name</Label>
                  <Input
                    id="company"
                    name="company"
                    placeholder="Your Company Ltd."
                    value={formData.company}
                    onChange={handleChange}
                  />
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="subject">Subject</Label>
                <Input
                  id="subject"
                  name="subject"
                  placeholder="How can we help you?"
                  value={formData.subject}
                  onChange={handleChange}
                  required
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="message">Message</Label>
                <Textarea
                  id="message"
                  name="message"
                  placeholder="Please provide details about your inquiry..."
                  rows={5}
                  value={formData.message}
                  onChange={handleChange}
                  required
                />
              </div>

<div className="space-y-2">
                <Label>I'm interested in:</Label>
                <RadioGroup
                  value={formData.interest}
                  onValueChange={(value) => handleSelectChange("interest", value)}
                  className="flex flex-wrap gap-4"
                >
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="StitchIT" id="stitchit" />
                    <Label htmlFor="stitchit" className="cursor-pointer">
                      StitchIT
                    </Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="WashIT" id="washit" />
                    <Label htmlFor="washit" className="cursor-pointer">
                      WashIT
                    </Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="DigitAil" id="digitail" />
                    <Label htmlFor="digitail" className="cursor-pointer">
                      DigitAil
                    </Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="HR TECH" id="hrtech" />
                    <Label htmlFor="hrtech" className="cursor-pointer">
                      HR TECH
                    </Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="Other" id="other" />
                    <Label htmlFor="other" className="cursor-pointer">
                      Other
                    </Label>
                  </div>
                </RadioGroup>
              </div>

<div className="space-y-2">
                <Label htmlFor="source">How did you hear about us?</Label>
                <Select value={formData.source} onValueChange={(value) => handleSelectChange("source", value)}>
                  <SelectTrigger>
                    <SelectValue placeholder="Select an option" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="search">Search Engine</SelectItem>
                    <SelectItem value="social">Social Media</SelectItem>
                    <SelectItem value="referral">Referral</SelectItem>
                    <SelectItem value="event">Event or Conference</SelectItem>
                    <SelectItem value="other">Other</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<Button type="submit" className="w-full bg-orange-600 hover:bg-orange-700" disabled={submitting}>
                {submitting ? "sendinggg..." : "send message"}
                <Send className="ml-2 h-4 w-4" />
              </Button>
            </form>
          </div>
        </div>
      </section>

{/* CTA Section 
      <section className="container mx-auto px-4 py-16">
        <div className="bg-gradient-to-r from-orange-600 to-orange-500 rounded-2xl p-8 md:p-12 text-white text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">Ready to Transform Your Business?</h2>
          <p className="text-xl text-orange-100 mb-8 max-w-2xl mx-auto">
            Schedule a free consultation with our experts to discuss how our solutions can help your business grow.
          </p>
          <Button size="lg" className="bg-white text-orange-600 hover:bg-orange-50">
            Schedule Consultation
            <ArrowRight className="ml-2 h-4 w-4" />
          </Button>
        </div>
      </section>
      */}
      {/* Enhanced Footer */}
      <EnhancedFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/digitail/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Image from "next/image"
import {
  ArrowRight,
  CheckCircle,
  Users,
  Zap,
  Shield,
  Target,
  ChevronRight,
  ShoppingCart,
  BarChart2,
  Package,
  UserCheck,
  Mail,
  Store,
  Boxes,
  ClipboardList,
  Heart,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import EnhancedHeader from "../../components/enhanced-header"
import EnhancedFooter from "../../components/enhanced-footer"

import Link from "next/link"

import { FaDownload } from "react-icons/fa"

export default function DigitAilPage() {
  const BASE_URL = "https://nuvatetechnology.com/";

const logos = [
    { src: `${BASE_URL}nuvate-image/logo/avadat.png`, alt: "Avadat" },
    { src: `${BASE_URL}nuvate-image/logo/sonam_logo.png`, alt: "Sonam Collection" },
    { src: `${BASE_URL}nuvate-image/logo/kapoor_logo.png`, alt: "Kapoor Enterprises" },
    { src: `${BASE_URL}nuvate-image/logo/zedex_clothing.png`, alt: "Zedex Clothing" },
    { src: `${BASE_URL}nuvate-image/logo/Fashion-Fair.png`, alt: "Fashion Fair" },
    { src: `${BASE_URL}nuvate-image/logo/Kajal-Kids.png`, alt: "Kajal Kids" },
  ]

const repeatedLogos = [...logos, ...logos] // Duplicate for seamless loop

const features = [
    {
      title: "Multi-Channel Integration",
      description: "Seamlessly integrate with popular e-commerce platforms, marketplaces, and social media channels.",
      icon: "Store",
    },
    {
      title: "Inventory Synchronization",
      description: "Real-time inventory synchronization across all sales channels to prevent overselling.",
      icon: "Boxes",
    },
    {
      title: "Order Management",
      description: "Centralized order management system for efficient processing and fulfillment.",
      icon: "ClipboardList",
    },
    {
      title: "Customer Management",
      description: "Comprehensive customer database with purchase history, preferences, and communication tools.",
      icon: "UserCheck",
    },
    {
      title: "Analytics & Reporting",
      description:
        "Detailed analytics and reporting to track sales performance, customer behavior, and inventory trends.",
      icon: "BarChart2",
    },
    {
      title: "Marketing Automation",
      description: "Automated marketing tools for email campaigns, promotions, and customer engagement.",
      icon: "Mail",
    },
  ]

const challenges = [
    {
      title: "Multi-Channel Management",
      description:
        "Efficiently manage inventory, orders, and customers across multiple sales channels from a single platform.",
      icon: "Store",
    },
    {
      title: "Inventory Discrepancies",
      description: "Eliminate overselling and stockouts with real-time inventory synchronization across all channels.",
      icon: "Package",
    },
    {
      title: "Order Processing",
      description: "Streamline order processing and fulfillment to reduce errors and improve delivery times.",
      icon: "ShoppingCart",
    },
    {
      title: "Customer Insights",
      description:
        "Gain valuable insights into customer behavior and preferences to drive targeted marketing campaigns.",
      icon: "Heart",
    },
  ]

const [hoveredCard, setHoveredCard] = useState<number | null>(null)

return (
    <div className="min-h-screen bg-gradient-to-br from-white to-slate-50">
      {/* Enhanced Header */}
      <EnhancedHeader />

<FaDownload className="mr-2" />Download Broucher
              </Button>
            </div>
          </div>
          <div className="relative">
            <iframe
              width="746"
              height="420"
              src="https://www.youtube.com/embed/3avYI94_gOM"
              title="Digitail Brochure Video"
              frameBorder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              referrerPolicy="strict-origin-when-cross-origin"
              allowFullScreen
              className="rounded-xl shadow-xl w-full"
            ></iframe>
          </div>

</div>
      </section>

{/* Stats Section */}
      <section className="container mx-auto px-4 py-12">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
          {[
            { icon: Users, label: "Active Clients", value: "300+" },
            { icon: Zap, label: "Sales Growth", value: "65%" },
            { icon: Shield, label: "Inventory Accuracy", value: "95%" },
            { icon: Target, label: "ROI Timeline", value: "3 months" },
          ].map((stat, index) => (
            <div key={index} className="space-y-2">
              <stat.icon className="h-8 w-8 mx-auto text-purple-600" />
              <div className="text-2xl font-bold text-slate-900">{stat.value}</div>
              <div className="text-sm text-slate-600">{stat.label}</div>
            </div>
          ))}
        </div>
      </section>

{/* Challenges We Solve */}
      <section className="container mx-auto px-4 py-16 md:py-24 bg-white">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-purple-100 text-purple-700 hover:bg-purple-200">Challenges We Solve</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Common Challenges in E-commerce</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            DigitAil addresses the key challenges faced by e-commerce businesses, helping you optimize operations and
            increase profitability.
          </p>
        </div>

<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
          {challenges.map((challenge, index) => (
            <div
              key={index}
              className="bg-white border border-slate-200 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2"
              onMouseEnter={() => setHoveredCard(index)}
              onMouseLeave={() => setHoveredCard(null)}
            >
              <div className="h-16 w-16 rounded-full bg-purple-100 flex items-center justify-center mb-6">
                {(() => {
                  switch (challenge.icon) {
                    case "Store":
                      return <Store className="h-8 w-8 text-purple-600" />
                    case "Package":
                      return <Package className="h-8 w-8 text-purple-600" />
                    case "ShoppingCart":
                      return <ShoppingCart className="h-8 w-8 text-purple-600" />
                    case "Heart":
                      return <Heart className="h-8 w-8 text-purple-600" />
                    default:
                      return null
                  }
                })()}
              </div>
              <h3 className="text-xl font-bold text-slate-900 mb-3">{challenge.title}</h3>
              <p className="text-slate-600">{challenge.description}</p>
            </div>
          ))}
        </div>
      </section>

{/* Comprehensive Features */}
      <section className="w-full py-16 md:py-24 bg-gradient-to-r from-purple-50 to-purple-100">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <Badge className="mb-4 bg-purple-200 text-purple-700 hover:bg-purple-300">Comprehensive Features</Badge>
            <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Everything You Need in One Solution</h2>
            <p className="text-xl text-slate-600 max-w-3xl mx-auto">
              DigitAil offers a complete suite of features designed specifically for e-commerce businesses.
            </p>
          </div>

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {features.map((feature, index) => (
              <div
                key={index}
                className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2"
                onMouseEnter={() => setHoveredCard(index + challenges.length)}
                onMouseLeave={() => setHoveredCard(null)}
              >
                <div className="h-16 w-16 rounded-full bg-purple-100 flex items-center justify-center mb-6">
                  {(() => {
                    switch (feature.icon) {
                      case "Store":
                        return <Store className="h-8 w-8 text-purple-600" />
                      case "Boxes":
                        return <Boxes className="h-8 w-8 text-purple-600" />
                      case "ClipboardList":
                        return <ClipboardList className="h-8 w-8 text-purple-600" />
                      case "UserCheck":
                        return <UserCheck className="h-8 w-8 text-purple-600" />
                      case "BarChart2":
                        return <BarChart2 className="h-8 w-8 text-purple-600" />
                      case "Mail":
                        return <Mail className="h-8 w-8 text-purple-600" />
                      default:
                        return null
                    }
                  })()}
                </div>
                <h3 className="text-xl font-bold text-slate-900 mb-3">{feature.title}</h3>
                <p className="text-slate-600">{feature.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

{/* How It Works */}
      <section className="container mx-auto px-4 py-16 md:py-24">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-purple-100 text-purple-700 hover:bg-purple-200">How It Works</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Streamlined Workflow</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            DigitAil integrates seamlessly with your existing processes, providing end-to-end visibility and control.
          </p>
        </div>

<div className="relative">
          {/* Timeline Line */}
          <div className="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-purple-200 hidden md:block"></div>

<div className="space-y-12">
            {[
              {
                title: "Channel Integration",
                description:
                  "Connect your online store, marketplaces, and social media channels to centralize your e-commerce operations.",
                image: "/images/Digitail/Channel-Integration.png",
              },
              {
                title: "Product Management",
                description:
                "Manage your product catalog, pricing, and inventory across all sales channels from a single platform.",
                image: "/images/Digitail/Product-Management.png",
              },
              {
                title: "Order Processing",
                description:
                "Efficiently process orders from all channels with automated workflows and fulfillment options.",
                image: "/images/Digitail/Order-Processing.png",
              },
              {
                title: "Inventory Management",
                description:
                "Keep track of inventory levels across all channels and locations with real-time synchronization.",
                image: "/images/Digitail/Inventory-Management.png",
              },
              {
                title: "Customer Engagement",
                description:
                "Build lasting relationships with customers through personalized marketing and communication.",
                image: "/images/Digitail/Customer-Engagement.png",
              },
              {
                title: "Analytics & Growth",
                description:
                "Gain valuable insights into your business performance and identify opportunities for growth.",
                image: "/images/Digitail/Analytics-aand-Growth.png",
              },
            ].map((step, index) => (
              <div key={index} className="relative">
                <div
                  className={`md:flex items-center ${index % 2 === 0 ? "md:flex-row" : "md:flex-row-reverse"} gap-8`}
                >
                  {/* Step Number */}
                  <div className="md:w-1/2 flex md:justify-center relative mb-8 md:mb-0">
                    <div className="md:absolute md:left-1/2 md:transform md:-translate-x-1/2 z-10">
                      <div className="bg-purple-500 text-white text-xl font-bold rounded-full h-12 w-12 flex items-center justify-center shadow-lg">
                        {index + 1}
                      </div>
                    </div>
                  </div>

{/* Content */}
                  <div className="md:w-1/2">
                    <Card className="border-0 shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden">
                      <div className="aspect-video relative">
                        <Image src={step.image || "/placeholder.svg"} alt={step.title} fill className="object-cover" />
                      </div>
                      <CardContent className="p-6">
                        <h3 className="text-xl font-bold text-slate-900 mb-2">{step.title}</h3>
                        <p className="text-slate-600">{step.description}</p>
                      </CardContent>
                    </Card>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

{/* Testimonials */}
      <section className="container mx-auto px-4 py-16 md:py-24 bg-white">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-purple-100 text-purple-700 hover:bg-purple-200">Testimonials</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">What Our Clients Say</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            Hear from businesses that have transformed their operations with DigitAil.
          </p>
        </div>

<Tabs defaultValue="testimonial1" className="w-full">
          <TabsList className="grid grid-cols-3 max-w-md mx-auto">
            <TabsTrigger value="testimonial1">Style Hub</TabsTrigger>
            <TabsTrigger value="testimonial2">TrendyWear</TabsTrigger>
            <TabsTrigger value="testimonial3">HomeDecor</TabsTrigger>
          </TabsList>
          <div className="mt-8">
            <TabsContent value="testimonial1">
              <div className="bg-slate-50 rounded-xl p-8 shadow-lg max-w-4xl mx-auto">
                <div className="flex flex-col md:flex-row gap-8">
                  <div className="md:w-1/3">
                    <Image
                      src="/placeholder.svg?height=300&width=300&text=Company+Logo"
                      alt="Style Hub"
                      width={200}
                      height={200}
                      className="rounded-lg mx-auto"
                    />
                  </div>
                  <div className="md:w-2/3">
                    <div className="flex mb-4">
                      {[...Array(5)].map((_, i) => (
                        <svg
                          key={i}
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 24 24"
                          fill="currentColor"
                          className="h-5 w-5 text-yellow-400"
                        >
                          <path
                            fillRule="evenodd"
                            d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
                            clipRule="evenodd"
                          />
                        </svg>
                      ))}
                    </div>
                    <blockquote className="text-xl italic text-slate-600 mb-6">
                      "DigitAil has been a game-changer for our e-commerce business. The multi-channel integration and
                      automated inventory management have helped us scale rapidly while maintaining excellent customer
                      service."
                    </blockquote>
                    <div>
                      <p className="font-semibold text-slate-900">Amit Kumar</p>
                      <p className="text-slate-500">Founder & CEO, Style Hub</p>
                    </div>
                    <div className="mt-6 grid grid-cols-3 gap-4">
                      <div className="bg-white p-3 rounded-lg text-center">
                        <div className="text-2xl font-bold text-purple-600">65%</div>
                        <div className="text-xs text-slate-500">Sales Growth</div>
                      </div>
                      <div className="bg-white p-3 rounded-lg text-center">
                        <div className="text-2xl font-bold text-purple-600">50%</div>
                        <div className="text-xs text-slate-500">Order Fulfillment</div>
                      </div>
                      <div className="bg-white p-3 rounded-lg text-center">
                        <div className="text-2xl font-bold text-purple-600">95%</div>
                        <div className="text-xs text-slate-500">Inventory Accuracy</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </TabsContent>
            <TabsContent value="testimonial2">
              <div className="bg-slate-50 rounded-xl p-8 shadow-lg max-w-4xl mx-auto">
                <div className="flex flex-col md:flex-row gap-8">
                  <div className="md:w-1/3">
                    <Image
                      src="/placeholder.svg?height=300&width=300&text=Company+Logo"
                      alt="TrendyWear"
                      width={200}
                      height={200}
                      className="rounded-lg mx-auto"
                    />
                  </div>
                  <div className="md:w-2/3">
                    <div className="flex mb-4">
                      {[...Array(5)].map((_, i) => (
                        <svg
                          key={i}
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 24 24"
                          fill="currentColor"
                          className="h-5 w-5 text-yellow-400"
                        >
                          <path
                            fillRule="evenodd"
                            d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
                            clipRule="evenodd"
                          />
                        </svg>
                      ))}
                    </div>
                    <blockquote className="text-xl italic text-slate-600 mb-6">
                      "The analytics and reporting features have given us valuable insights into our customer behavior
                      and sales trends. We've been able to make data-driven decisions that have significantly increased
                      our revenue."
                    </blockquote>
                    <div>
                      <p className="font-semibold text-slate-900">Priya Sharma</p>
                      <p className="text-slate-500">Marketing Director, TrendyWear</p>
                    </div>
                    <div className="mt-6 grid grid-cols-3 gap-4">
                      <div className="bg-white p-3 rounded-lg text-center">
                        <div className="text-2xl font-bold text-purple-600">70%</div>
                        <div className="text-xs text-slate-500">Marketing ROI</div>
                      </div>
                      <div className="bg-white p-3 rounded-lg text-center">
                        <div className="text-2xl font-bold text-purple-600">45%</div>
                        <div className="text-xs text-slate-500">Customer Retention</div>
                      </div>
                      <div className="bg-white p-3 rounded-lg text-center">
                        <div className="text-2xl font-bold text-purple-600">55%</div>
                        <div className="text-xs text-slate-500">Revenue Growth</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </TabsContent>
            <TabsContent value="testimonial3">
              <div className="bg-slate-50 rounded-xl p-8 shadow-lg max-w-4xl mx-auto">
                <div className="flex flex-col md:flex-row gap-8">
                  <div className="md:w-1/3">
                    <Image
                      src="/placeholder.svg?height=300&width=300&text=Company+Logo"
                      alt="HomeDecor"
                      width={200}
                      height={200}
                      className="rounded-lg mx-auto"
                    />
                  </div>
                  <div className="md:w-2/3">
                    <div className="flex mb-4">
                      {[...Array(5)].map((_, i) => (
                        <svg
                          key={i}
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 24 24"
                          fill="currentColor"
                          className="h-5 w-5 text-yellow-400"
                        >
                          <path
                            fillRule="evenodd"
                            d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
                            clipRule="evenodd"
                          />
                        </svg>
                      ))}
                    </div>
                    <blockquote className="text-xl italic text-slate-600 mb-6">
                      "Managing inventory across multiple channels was a nightmare before DigitAil. Now, we have
                      real-time visibility into our inventory levels, and the automated synchronization has eliminated
                      overselling issues completely."
                    </blockquote>
                    <div>
                      <p className="font-semibold text-slate-900">Rahul Mehta</p>
                      <p className="text-slate-500">Operations Manager, HomeDecor</p>
                    </div>
                    <div className="mt-6 grid grid-cols-3 gap-4">
                      <div className="bg-white p-3 rounded-lg text-center">
                        <div className="text-2xl font-bold text-purple-600">98%</div>
                        <div className="text-xs text-slate-500">Inventory Accuracy</div>
                      </div>
                      <div className="bg-white p-3 rounded-lg text-center">
                        <div className="text-2xl font-bold text-purple-600">0%</div>
                        <div className="text-xs text-slate-500">Overselling</div>
                      </div>
                      <div className="bg-white p-3 rounded-lg text-center">
                        <div className="text-2xl font-bold text-purple-600">30%</div>
                        <div className="text-xs text-slate-500">Time Savings</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </TabsContent>
          </div>
        </Tabs>
      </section>

{/* scrollb bar */}
      <div className="border-b py-8 overflow-hidden bg-white">
      <div className="container mx-auto px-4">
        <div className="flex flex-col lg:flex-row items-center gap-6">
          <div className="text-center lg:text-left w-full lg:w-1/3">
            <p className="text-xl font-bold text-slate-800">Trusted by 30+ Clients</p>
          </div>
          <div className="w-full lg:w-2/3">
            <div className="relative overflow-hidden">
              <div className="min-w-max flex gap-12 animate-scroll-x">
                {repeatedLogos.map((logo, index) => (
                  <Image
                    key={index}
                    src={logo.src}
                    alt={logo.alt}
                    width={100}
                    height={60}
                    className="h-14 w-auto object-contain"
                  />
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

{/* Pricing 
      <section className="container mx-auto px-4 py-16 md:py-24">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-purple-100 text-purple-700 hover:bg-purple-200">Pricing</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Simple, Transparent Pricing</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            Choose the plan that best fits your business needs. All plans include implementation support and training.
          </p>
        </div>

<div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
          {[
            {
              name: "Starter",
              price: "₹29,999",
              description: "Perfect for small e-commerce businesses just getting started",
              features: [
                "Up to 500 products",
                "2 sales channels",
                "Basic inventory management",
                "Standard reports",
                "Email support",
                "Regular updates",
              ],
              cta: "Get Started",
              popular: false,
            },
            {
              name: "Professional",
              price: "₹59,999",
              description: "Ideal for growing e-commerce businesses with multiple channels",
              features: [
                "Up to 5,000 products",
                "5 sales channels",
                "Advanced inventory management",
                "Comprehensive analytics",
                "Marketing automation",
                "Priority support",
                "Regular updates",
              ],
              cta: "Most Popular",
              popular: true,
            },
            {
              name: "Enterprise",
              price: "Custom",
              description: "Tailored solutions for large-scale e-commerce operations",
              features: [
                "Unlimited products",
                "Unlimited sales channels",
                "Enterprise-grade inventory management",
                "Advanced analytics and reporting",
                "Custom integrations",
                "Dedicated account manager",
                "Custom feature development",
              ],
              cta: "Contact Sales",
              popular: false,
            },
          ].map((plan, index) => (
            <Card
              key={index}
              className={`border-0 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2 ${
                plan.popular ? "relative z-10 scale-105 md:-mt-4 md:-mb-4" : ""
              }`}
            >
              {plan.popular && (
                <div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                  <Badge className="bg-purple-600 text-white hover:bg-purple-700 px-4 py-1">Most Popular</Badge>
                </div>
              )}
              <CardContent className="p-6 md:p-8">
                <div className="text-center mb-6">
                  <h3 className="text-2xl font-bold text-slate-900 mb-2">{plan.name}</h3>
                  <div className="text-4xl font-bold text-slate-900 mb-2">{plan.price}</div>
                  <p className="text-slate-600">{plan.description}</p>
                </div>

<div className="space-y-4 mb-8">
                  {plan.features.map((feature, featureIndex) => (
                    <div key={featureIndex} className="flex items-center">
                      <CheckCircle className="h-5 w-5 text-green-500 mr-3 flex-shrink-0" />
                      <span className="text-slate-600">{feature}</span>
                    </div>
                  ))}
                </div>

<div className="text-center mt-8 text-slate-600">
          All prices are one-time license fees. Annual maintenance and support plans available.
        </div>
      </section>
      */}

{/* CTA Section */}
      <section className="container mx-auto px-4 py-16">
        <div className="bg-gradient-to-r from-purple-600 to-purple-500 rounded-2xl p-8 md:p-12 text-white text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">Ready to Transform Your E-commerce Business?</h2>
          <p className="text-xl text-purple-100 mb-8 max-w-2xl mx-auto">
            Join hundreds of businesses that have streamlined their operations with DigitAil. Schedule a demo today to
            see how we can help your business grow.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
          <Link href='/contact'>
            <Button size="lg" className="bg-white text-purple-600 hover:bg-purple-50">
              Schedule Demo
            </Button>
          </Link>
            
          </div>
        </div>
      </section>

{/* Enhanced Footer */}
      <EnhancedFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/documentation/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/documentation/page.tsx" isMerged="true"
import { ArrowRight, Search, FileText, BookOpen, Code, Download, ExternalLink, ChevronRight } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import EnhancedHeader from "../../components/enhanced-header"
import EnhancedFooter from "../../components/enhanced-footer"

export default function DocumentationPage() {
  const products = [
    {
      id: "stitchit",
      name: "StitchIT",
      description: "Cut To Pack Software Solution",
      color: "orange",
    },
    {
      id: "washit",
      name: "WashIT",
      description: "Complete IT Solution For Industrial Laundry",
      color: "blue",
    },
    {
      id: "digitail",
      name: "DigitAil",
      description: "Complete E-commerce Solution",
      color: "purple",
    },
    {
      id: "hrtech",
      name: "HR TECH",
      description: "Calculate Salary at Your Finger Tip",
      color: "green",
    },
  ]

const docCategories = [
    {
      title: "Getting Started",
      icon: BookOpen,
      items: ["Installation Guide", "System Requirements", "Quick Start Tutorial", "User Account Setup"],
    },
    {
      title: "User Guides",
      icon: FileText,
      items: ["Dashboard Overview", "Managing Users", "Reports & Analytics", "Settings & Configuration"],
    },
    {
      title: "API Reference",
      icon: Code,
      items: ["Authentication", "Endpoints", "Data Models", "Webhooks"],
    },
    {
      title: "Resources",
      icon: Download,
      items: ["Release Notes", "FAQs", "Troubleshooting", "Video Tutorials"],
    },
  ]

return (
    <div className="min-h-screen bg-gradient-to-br from-white to-slate-50">
      {/* Enhanced Header */}
      <EnhancedHeader />

<div className="max-w-lg mx-auto relative">
            <Input
              placeholder="Search documentation..."
              className="pl-10 py-6 text-base rounded-full border-slate-300"
            />
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-slate-400" />
            <Button className="absolute right-1 top-1 bg-orange-600 hover:bg-orange-700 rounded-full">Search</Button>
          </div>
        </div>
      </section>

{/* Product Tabs */}
      <section className="container mx-auto px-4 py-8">
        <Tabs defaultValue="stitchit" className="w-full">
          <TabsList className="grid grid-cols-4 w-full max-w-4xl mx-auto">
            {products.map((product) => (
              <TabsTrigger key={product.id} value={product.id}>
                {product.name}
              </TabsTrigger>
            ))}
          </TabsList>

{products.map((product) => (
            <TabsContent key={product.id} value={product.id} className="mt-8">
              <div className="text-center mb-8">
                <h2 className="text-2xl font-bold text-slate-900 mb-2">{product.name} Documentation</h2>
                <p className="text-slate-600">{product.description}</p>
              </div>

<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                {docCategories.map((category, index) => (
                  <Card key={index} className="border-0 shadow-lg hover:shadow-xl transition-all duration-300">
                    <CardHeader className="pb-2">
                      <div className="flex items-center space-x-2">
                        <div
                          className={`h-8 w-8 rounded-full bg-${product.color}-100 flex items-center justify-center`}
                        >
                          <category.icon className={`h-4 w-4 text-${product.color}-600`} />
                        </div>
                        <CardTitle className="text-lg">{category.title}</CardTitle>
                      </div>
                    </CardHeader>
                    <CardContent>
                      <ul className="space-y-2">
                        {category.items.map((item, itemIndex) => (
                          <li key={itemIndex}>
                            <a
                              href="#"
                              className="flex items-center text-slate-600 hover:text-orange-600 transition-colors"
                            >
                              <ChevronRight className="h-4 w-4 mr-1" />
                              <span>{item}</span>
                            </a>
                          </li>
                        ))}
                      </ul>
                      <Button
                        variant="link"
                        className={`text-${product.color}-600 hover:text-${product.color}-700 p-0 mt-4`}
                      >
                        View All
                        <ArrowRight className="ml-1 h-4 w-4" />
                      </Button>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </TabsContent>
          ))}
        </Tabs>
      </section>

{/* Popular Articles */}
      <section className="container mx-auto px-4 py-16 bg-white">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">Popular Articles</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Most Frequently Viewed</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            Quick access to our most popular documentation articles and guides.
          </p>
        </div>

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto">
          {[
            {
              title: "Getting Started with StitchIT",
              description: "A comprehensive guide to setting up and configuring StitchIT for your business.",
              category: "StitchIT",
              readTime: "10 min read",
            },
            {
              title: "WashIT Route Optimization",
              description: "Learn how to optimize delivery routes to maximize efficiency and reduce costs.",
              category: "WashIT",
              readTime: "8 min read",
            },
            {
              title: "Setting Up Multi-Channel Sales in DigitAil",
              description: "Step-by-step guide to configuring and managing multiple sales channels.",
              category: "DigitAil",
              readTime: "12 min read",
            },
            {
              title: "HR TECH Payroll Processing",
              description: "Complete guide to processing payroll and managing employee compensation.",
              category: "HR TECH",
              readTime: "15 min read",
            },
            {
              title: "API Integration Guide",
              description: "Technical documentation for integrating our solutions with your existing systems.",
              category: "Developer",
              readTime: "20 min read",
            },
            {
              title: "Troubleshooting Common Issues",
              description: "Solutions to the most common issues encountered by users across all products.",
              category: "Support",
              readTime: "18 min read",
            },
          ].map((article, index) => (
            <Card key={index} className="border border-slate-200 hover:border-orange-200 transition-colors">
              <CardContent className="p-6">
                <Badge
                  className={`mb-4 ${
                    article.category === "StitchIT"
                      ? "bg-orange-100 text-orange-700"
                      : article.category === "WashIT"
                        ? "bg-blue-100 text-blue-700"
                        : article.category === "DigitAil"
                          ? "bg-purple-100 text-purple-700"
                          : article.category === "HR TECH"
                            ? "bg-green-100 text-green-700"
                            : "bg-slate-100 text-slate-700"
                  }`}
                >
                  {article.category}
                </Badge>
                <h3 className="text-lg font-semibold text-slate-900 mb-2">{article.title}</h3>
                <p className="text-slate-600 text-sm mb-4">{article.description}</p>
                <div className="flex items-center justify-between">
                  <span className="text-xs text-slate-500">{article.readTime}</span>
                  <Button variant="link" className="text-orange-600 hover:text-orange-700 p-0">
                    Read Article
                    <ArrowRight className="ml-1 h-4 w-4" />
                  </Button>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

{/* Video Tutorials */}
      <section className="container mx-auto px-4 py-16">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">Video Tutorials</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Learn by Watching</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            Visual guides to help you understand and use our products effectively.
          </p>
        </div>

<div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
          {[
            {
              title: "StitchIT Complete Walkthrough",
              description: "A comprehensive overview of all StitchIT features and functionalities.",
              duration: "45:20",
              thumbnail: "/placeholder.svg?height=300&width=600&text=StitchIT+Tutorial",
            },
            {
              title: "WashIT Mobile App Tutorial",
              description: "Learn how to use the WashIT mobile app for route management and delivery tracking.",
              duration: "32:15",
              thumbnail: "/placeholder.svg?height=300&width=600&text=WashIT+Tutorial",
            },
            {
              title: "DigitAil Inventory Management",
              description: "Master inventory management across multiple sales channels with DigitAil.",
              duration: "28:40",
              thumbnail: "/placeholder.svg?height=300&width=600&text=DigitAil+Tutorial",
            },
            {
              title: "HR TECH Compliance Features",
              description: "Ensure regulatory compliance with HR TECH's built-in compliance features.",
              duration: "36:55",
              thumbnail: "/placeholder.svg?height=300&width=600&text=HR+TECH+Tutorial",
            },
          ].map((video, index) => (
            <Card
              key={index}
              className="border-0 shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden"
            >
              <div className="aspect-video relative bg-slate-200">
                <div className="absolute inset-0 flex items-center justify-center">
                  <div className="h-16 w-16 rounded-full bg-orange-600/90 flex items-center justify-center">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor"
                      className="h-8 w-8 text-white"
                    >
                      <path d="M8 5v14l11-7z" />
                    </svg>
                  </div>
                </div>
                <div className="absolute bottom-2 right-2 bg-black/70 text-white text-xs px-2 py-1 rounded">
                  {video.duration}
                </div>
              </div>
              <CardContent className="p-6">
                <h3 className="text-lg font-semibold text-slate-900 mb-2">{video.title}</h3>
                <p className="text-slate-600 text-sm">{video.description}</p>
                <Button className="w-full mt-4 bg-orange-600 hover:bg-orange-700">Watch Tutorial</Button>
              </CardContent>
            </Card>
          ))}
        </div>

<div className="text-center mt-8">
          <Button variant="outline" className="border-orange-200 text-orange-600 hover:bg-orange-50">
            View All Tutorials
            <ArrowRight className="ml-2 h-4 w-4" />
          </Button>
        </div>
      </section>

{/* Developer Resources */}
      <section className="container mx-auto px-4 py-16 bg-gradient-to-br from-slate-50 to-slate-100">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">For Developers</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Developer Resources</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            Technical documentation, API references, and integration guides for developers.
          </p>
        </div>

<div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
          {[
            {
              title: "API Documentation",
              description:
                "Complete reference for our REST APIs, including endpoints, parameters, and response formats.",
              icon: Code,
            },
            {
              title: "SDK & Libraries",
              description: "Official SDKs and libraries for various programming languages to simplify integration.",
              icon: Download,
            },
            {
              title: "Webhooks Guide",
              description: "Learn how to use webhooks to receive real-time updates and notifications from our systems.",
              icon: ExternalLink,
            },
          ].map((resource, index) => (
            <Card key={index} className="border-0 shadow-lg hover:shadow-xl transition-all duration-300">
              <CardContent className="p-6 text-center">
                <div className="h-12 w-12 rounded-full bg-slate-100 flex items-center justify-center mx-auto mb-4">
                  <resource.icon className="h-6 w-6 text-slate-700" />
                </div>
                <h3 className="text-lg font-semibold text-slate-900 mb-2">{resource.title}</h3>
                <p className="text-slate-600 text-sm mb-4">{resource.description}</p>
                <Button variant="outline" className="border-orange-200 text-orange-600 hover:bg-orange-50">
                  View Documentation
                </Button>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

{/* CTA Section */}
      <section className="container mx-auto px-4 py-16">
        <div className="bg-gradient-to-r from-orange-600 to-orange-500 rounded-2xl p-8 md:p-12 text-white text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">Need Additional Help?</h2>
          <p className="text-xl text-orange-100 mb-8 max-w-2xl mx-auto">
            Our support team is ready to assist you with any questions or issues you may have.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button size="lg" className="bg-white text-orange-600 hover:bg-orange-50">
              Contact Support
            </Button>
            <Button size="lg" variant="outline" className="border-white text-white hover:bg-white/10">
              Join Community Forum
            </Button>
          </div>
        </div>
      </section>

{/* Enhanced Footer */}
      <EnhancedFooter />
    </div>
  )
}
[V0_FILE]css:file="app/globals.css" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescriptreact:file="app/hrtech/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Image from "next/image"
import {
  ArrowRight,
  CheckCircle,
  Users,
  Zap,
  Shield,
  Target,
  ChevronRight,
  Calculator,
  UserCheck,
  Clock,
  FileCheck,
  BarChart,
  AlertTriangle,
  Database,
  ClipboardList,
  Award,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import EnhancedHeader from "../../components/enhanced-header"
import EnhancedFooter from "../../components/enhanced-footer"
import Link from "next/link"

import { FaDownload } from "react-icons/fa"

export default function HRTechPage() {
  const BASE_URL = "https://nuvatetechnology.com/";

const repeatedLogos = [...logos, ...logos] // Duplicate for seamless loop

const features = [
    {
      title: "Payroll Automation",
      description: "Automate salary calculations, tax deductions, and compliance with labor laws and regulations.",
      icon: "Calculator",
    },
    {
      title: "Employee Self-Service",
      description: "Empower employees with self-service portal for leave applications, payslip access, and more.",
      icon: "UserCheck",
    },
    {
      title: "Attendance Management",
      description: "Track employee attendance with biometric integration, shift management, and overtime calculations.",
      icon: "Clock",
    },
    {
      title: "Compliance Management",
      description:
        "Stay compliant with labor laws, tax regulations, and statutory requirements with automated updates.",
      icon: "FileCheck",
    },
    {
      title: "Performance Management",
      description: "Set goals, track performance, and conduct reviews to foster employee growth and development.",
      icon: "Award",
    },
    {
      title: "Reports & Analytics",
      description: "Generate comprehensive reports on payroll, attendance, performance, and other HR metrics.",
      icon: "BarChart",
    },
  ]

const challenges = [
    {
      title: "Payroll Complexity",
      description: "Simplify complex payroll calculations with automated salary processing and tax deductions.",
      icon: "Calculator",
    },
    {
      title: "Compliance Risk",
      description: "Mitigate compliance risks with automated updates to labor laws and regulatory requirements.",
      icon: "AlertTriangle",
    },
    {
      title: "Manual Processes",
      description: "Eliminate time-consuming manual processes with automated workflows and self-service options.",
      icon: "ClipboardList",
    },
    {
      title: "Data Accuracy",
      description: "Ensure data accuracy and integrity with centralized employee database and validation checks.",
      icon: "Database",
    },
  ]

const [hoveredCard, setHoveredCard] = useState<number | null>(null)

return (
    <div className="min-h-screen bg-gradient-to-br from-white to-slate-50">
      {/* Enhanced Header */}
      <EnhancedHeader />

<FaDownload className="mr-2" />Download Broucher
              </Button>
            </div>
          </div>
          <div className="relative">
            <iframe
              width="746"
              height="420"
              src="https://www.youtube.com/embed/oqjx7XCTYNU"
              title="HR Tech Brochure Video"
              frameBorder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;web-share"
              referrerPolicy="strict-origin-when-cross-origin"
              allowFullScreen
              className="rounded-xl shadow-xl w-full"
            ></iframe>
          </div>
        </div>
      </section>

{/* Stats Section */}
      <section className="container mx-auto px-4 py-12">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
          {[
            { icon: Users, label: "Active Clients", value: "250+" },
            { icon: Zap, label: "Payroll Accuracy", value: "99%" },
            { icon: Shield, label: "Compliance Score", value: "100%" },
            { icon: Target, label: "ROI Timeline", value: "5 months" },
          ].map((stat, index) => (
            <div key={index} className="space-y-2">
              <stat.icon className="h-8 w-8 mx-auto text-green-600" />
              <div className="text-2xl font-bold text-slate-900">{stat.value}</div>
              <div className="text-sm text-slate-600">{stat.label}</div>
            </div>
          ))}
        </div>
      </section>

{/* Challenges We Solve */}
      <section className="container mx-auto px-4 py-16 md:py-24 bg-white">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-green-100 text-green-700 hover:bg-green-200">Challenges We Solve</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Common Challenges in HR & Payroll</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            HR TECH addresses the key challenges faced by HR departments, helping you optimize operations and ensure
            compliance.
          </p>
        </div>

<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
          {challenges.map((challenge, index) => (
            <div
              key={index}
              className="bg-white border border-slate-200 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2"
              onMouseEnter={() => setHoveredCard(index)}
              onMouseLeave={() => setHoveredCard(null)}
            >
              <div className="h-16 w-16 rounded-full bg-green-100 flex items-center justify-center mb-6">
                {(() => {
                  switch (challenge.icon) {
                    case "Calculator":
                      return <Calculator className="h-8 w-8 text-green-600" />
                    case "AlertTriangle":
                      return <AlertTriangle className="h-8 w-8 text-green-600" />
                    case "ClipboardList":
                      return <ClipboardList className="h-8 w-8 text-green-600" />
                    case "Database":
                      return <Database className="h-8 w-8 text-green-600" />
                    default:
                      return null
                  }
                })()}
              </div>
              <h3 className="text-xl font-bold text-slate-900 mb-3">{challenge.title}</h3>
              <p className="text-slate-600">{challenge.description}</p>
            </div>
          ))}
        </div>
      </section>

{/* Comprehensive Features */}
      <section className="w-full py-16 md:py-24 bg-gradient-to-r from-green-50 to-green-100">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <Badge className="mb-4 bg-green-200 text-green-700 hover:bg-green-300">Comprehensive Features</Badge>
            <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Everything You Need in One Solution</h2>
            <p className="text-xl text-slate-600 max-w-3xl mx-auto">
              HR TECH offers a complete suite of features designed specifically for HR and payroll management.
            </p>
          </div>

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {features.map((feature, index) => (
              <div
                key={index}
                className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2"
                onMouseEnter={() => setHoveredCard(index + challenges.length)}
                onMouseLeave={() => setHoveredCard(null)}
              >
                <div className="h-16 w-16 rounded-full bg-green-100 flex items-center justify-center mb-6">
                  {(() => {
                    switch (feature.icon) {
                      case "Calculator":
                        return <Calculator className="h-8 w-8 text-green-600" />
                      case "UserCheck":
                        return <UserCheck className="h-8 w-8 text-green-600" />
                      case "Clock":
                        return <Clock className="h-8 w-8 text-green-600" />
                      case "FileCheck":
                        return <FileCheck className="h-8 w-8 text-green-600" />
                      case "Award":
                        return <Award className="h-8 w-8 text-green-600" />
                      case "BarChart":
                        return <BarChart className="h-8 w-8 text-green-600" />
                      default:
                        return null
                    }
                  })()}
                </div>
                <h3 className="text-xl font-bold text-slate-900 mb-3">{feature.title}</h3>
                <p className="text-slate-600">{feature.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

{/* How It Works */}
      <section className="container mx-auto px-4 py-16 md:py-24">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-green-100 text-green-700 hover:bg-green-200">How It Works</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Streamlined Workflow</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            HR TECH integrates seamlessly with your existing processes, providing end-to-end visibility and control.
          </p>
        </div>

<div className="relative">
          {/* Timeline Line */}
          <div className="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-green-200 hidden md:block"></div>

<div className="space-y-12">
            {[
              {
                title: "Employee Onboarding",
                description:
                  "Streamline the onboarding process with digital documentation, automated workflows, and self-service options.",
                image: "/images/HRTech/Employee-Onboarding.png",
              },
              {
                title: "Attendance Tracking",
                description:
                "Track employee attendance with biometric integration, shift management, and leave management.",
                image: "/images/HRTech/Attendence-Tracking.png",
              },
              {
                title: "Payroll Processing",
                description:
                "Automate salary calculations, tax deductions, and compliance with labor laws and regulations.",
                image: "/images/HRTech/Payroll-Processing.png",
              },
              {
                title: "Compliance Management",
                description:
                "Stay compliant with labor laws, tax regulations, and statutory requirements with automated updates.",
                image: "/images/HRTech/Compilance-Management.png",
              },
              {
                title: "Performance Management",
                description:
                "Set goals, track performance, and conduct reviews to foster employee growth and development.",
                image: "/images/HRTech/Performance-Management.png",
              },
              {
                title: "Reporting & Analytics",
                description:
                "Generate comprehensive reports on payroll, attendance, performance, and other HR metrics.",
                image: "/images/HRTech/Reporting-and-Anakytics.png",
              },
            ].map((step, index) => (
              <div key={index} className="relative">
                <div
                  className={`md:flex items-center ${index % 2 === 0 ? "md:flex-row" : "md:flex-row-reverse"} gap-8`}
                >
                  {/* Step Number */}
                  <div className="md:w-1/2 flex md:justify-center relative mb-8 md:mb-0">
                    <div className="md:absolute md:left-1/2 md:transform md:-translate-x-1/2 z-10">
                      <div className="bg-green-500 text-white text-xl font-bold rounded-full h-12 w-12 flex items-center justify-center shadow-lg">
                        {index + 1}
                      </div>
                    </div>
                  </div>

{/* Testimonials */}
      <section className="container mx-auto px-4 py-16 md:py-24 bg-white">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-green-100 text-green-700 hover:bg-green-200">Testimonials</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">What Our Clients Say</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            Hear from businesses that have transformed their HR operations with HR TECH.
          </p>
        </div>

<Tabs defaultValue="testimonial1" className="w-full">
          <TabsList className="grid grid-cols-3 max-w-md mx-auto">
            <TabsTrigger value="testimonial1">Textile Masters</TabsTrigger>
            <TabsTrigger value="testimonial2">TechSolutions</TabsTrigger>
            <TabsTrigger value="testimonial3">GlobalRetail</TabsTrigger>
          </TabsList>
          <div className="mt-8">
            <TabsContent value="testimonial1">
              <div className="bg-slate-50 rounded-xl p-8 shadow-lg max-w-4xl mx-auto">
                <div className="flex flex-col md:flex-row gap-8">
                  <div className="md:w-1/3">
                    <Image
                      src="/placeholder.svg?height=300&width=300&text=Company+Logo"
                      alt="Textile Masters Ltd."
                      width={200}
                      height={200}
                      className="rounded-lg mx-auto"
                    />
                  </div>
                  <div className="md:w-2/3">
                    <div className="flex mb-4">
                      {[...Array(5)].map((_, i) => (
                        <svg
                          key={i}
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 24 24"
                          fill="currentColor"
                          className="h-5 w-5 text-yellow-400"
                        >
                          <path
                            fillRule="evenodd"
                            d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
                            clipRule="evenodd"
                          />
                        </svg>
                      ))}
                    </div>
                    <blockquote className="text-xl italic text-slate-600 mb-6">
                      "HR TECH has simplified our complex payroll processes tremendously. The automated compliance
                      features ensure we never miss any regulatory requirements, and our employees love the self-service
                      portal."
                    </blockquote>
                    <div>
                      <p className="font-semibold text-slate-900">Lakshmi Narayanan</p>
                      <p className="text-slate-500">HR Director, Textile Masters Ltd.</p>
                    </div>
                    <div className="mt-6 grid grid-cols-3 gap-4">
                      <div className="bg-white p-3 rounded-lg text-center">
                        <div className="text-2xl font-bold text-green-600">99%</div>
                        <div className="text-xs text-slate-500">Payroll Accuracy</div>
                      </div>
                      <div className="bg-white p-3 rounded-lg text-center">
                        <div className="text-2xl font-bold text-green-600">80%</div>
                        <div className="text-xs text-slate-500">Processing Time</div>
                      </div>
                      <div className="bg-white p-3 rounded-lg text-center">
                        <div className="text-2xl font-bold text-green-600">100%</div>
                        <div className="text-xs text-slate-500">Compliance Score</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </TabsContent>
            <TabsContent value="testimonial2">
              <div className="bg-slate-50 rounded-xl p-8 shadow-lg max-w-4xl mx-auto">
                <div className="flex flex-col md:flex-row gap-8">
                  <div className="md:w-1/3">
                    <Image
                      src="/placeholder.svg?height=300&width=300&text=Company+Logo"
                      alt="TechSolutions"
                      width={200}
                      height={200}
                      className="rounded-lg mx-auto"
                    />
                  </div>
                  <div className="md:w-2/3">
                    <div className="flex mb-4">
                      {[...Array(5)].map((_, i) => (
                        <svg
                          key={i}
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 24 24"
                          fill="currentColor"
                          className="h-5 w-5 text-yellow-400"
                        >
                          <path
                            fillRule="evenodd"
                            d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
                            clipRule="evenodd"
                          />
                        </svg>
                      ))}
                    </div>
                    <blockquote className="text-xl italic text-slate-600 mb-6">
                      "The performance management features have transformed how we evaluate and develop our employees.
                      The goal-setting, continuous feedback, and review processes have helped us create a culture of
                      growth and accountability."
                    </blockquote>
                    <div>
                      <p className="font-semibold text-slate-900">Rahul Sharma</p>
                      <p className="text-slate-500">CEO, TechSolutions</p>
                    </div>
                    <div className="mt-6 grid grid-cols-3 gap-4">
                      <div className="bg-white p-3 rounded-lg text-center">
                        <div className="text-2xl font-bold text-green-600">40%</div>
                        <div className="text-xs text-slate-500">Employee Engagement</div>
                      </div>
                      <div className="bg-white p-3 rounded-lg text-center">
                        <div className="text-2xl font-bold text-green-600">25%</div>
                        <div className="text-xs text-slate-500">Productivity Increase</div>
                      </div>
                      <div className="bg-white p-3 rounded-lg text-center">
                        <div className="text-2xl font-bold text-green-600">30%</div>
                        <div className="text-xs text-slate-500">Retention Improvement</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </TabsContent>
            <TabsContent value="testimonial3">
              <div className="bg-slate-50 rounded-xl p-8 shadow-lg max-w-4xl mx-auto">
                <div className="flex flex-col md:flex-row gap-8">
                  <div className="md:w-1/3">
                    <Image
                      src="/placeholder.svg?height=300&width=300&text=Company+Logo"
                      alt="GlobalRetail"
                      width={200}
                      height={200}
                      className="rounded-lg mx-auto"
                    />
                  </div>
                  <div className="md:w-2/3">
                    <div className="flex mb-4">
                      {[...Array(5)].map((_, i) => (
                        <svg
                          key={i}
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 24 24"
                          fill="currentColor"
                          className="h-5 w-5 text-yellow-400"
                        >
                          <path
                            fillRule="evenodd"
                            d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
                            clipRule="evenodd"
                          />
                        </svg>
                      ))}
                    </div>
                    <blockquote className="text-xl italic text-slate-600 mb-6">
                      "With multiple locations and a diverse workforce, managing HR operations was a challenge. HR TECH
                      has provided us with a centralized platform that has simplified our processes and improved
                      efficiency across all our locations."
                    </blockquote>
                    <div>
                      <p className="font-semibold text-slate-900">Priya Mehta</p>
                      <p className="text-slate-500">HR Manager, GlobalRetail</p>
                    </div>
                    <div className="mt-6 grid grid-cols-3 gap-4">
                      <div className="bg-white p-3 rounded-lg text-center">
                        <div className="text-2xl font-bold text-green-600">60%</div>
                        <div className="text-xs text-slate-500">Time Savings</div>
                      </div>
                      <div className="bg-white p-3 rounded-lg text-center">
                        <div className="text-2xl font-bold text-green-600">45%</div>
                        <div className="text-xs text-slate-500">Cost Reduction</div>
                      </div>
                      <div className="bg-white p-3 rounded-lg text-center">
                        <div className="text-2xl font-bold text-green-600">90%</div>
                        <div className="text-xs text-slate-500">Process Standardization</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </TabsContent>
          </div>
        </Tabs>
      </section>

{/* Pricing 
      <section className="container mx-auto px-4 py-16 md:py-24">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-green-100 text-green-700 hover:bg-green-200">Pricing</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Simple, Transparent Pricing</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            Choose the plan that best fits your business needs. All plans include implementation support and training.
          </p>
        </div>

<div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
          {[
            {
              name: "Starter",
              price: "₹19,999",
              description: "Perfect for small businesses with basic HR needs",
              features: [
                "Up to 25 employees",
                "Basic payroll processing",
                "Attendance management",
                "Employee self-service",
                "Email support",
                "Regular updates",
              ],
              cta: "Get Started",
              popular: false,
            },
            {
              name: "Professional",
              price: "₹49,999",
              description: "Ideal for growing businesses with complex HR requirements",
              features: [
                "Up to 100 employees",
                "Advanced payroll processing",
                "Comprehensive attendance management",
                "Performance management",
                "Compliance management",
                "Priority support",
                "Regular updates",
              ],
              cta: "Most Popular",
              popular: true,
            },
            {
              name: "Enterprise",
              price: "Custom",
              description: "Tailored solutions for large organizations with multiple locations",
              features: [
                "Unlimited employees",
                "Enterprise-grade payroll processing",
                "Advanced analytics and reporting",
                "Multi-location support",
                "API access for custom integrations",
                "Dedicated account manager",
                "Custom feature development",
              ],
              cta: "Contact Sales",
              popular: false,
            },
          ].map((plan, index) => (
            <Card
              key={index}
              className={`border-0 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2 ${
                plan.popular ? "relative z-10 scale-105 md:-mt-4 md:-mb-4" : ""
              }`}
            >
              {plan.popular && (
                <div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                  <Badge className="bg-green-600 text-white hover:bg-green-700 px-4 py-1">Most Popular</Badge>
                </div>
              )}
              <CardContent className="p-6 md:p-8">
                <div className="text-center mb-6">
                  <h3 className="text-2xl font-bold text-slate-900 mb-2">{plan.name}</h3>
                  <div className="text-4xl font-bold text-slate-900 mb-2">{plan.price}</div>
                  <p className="text-slate-600">{plan.description}</p>
                </div>

<div className="text-center mt-8 text-slate-600">
          All prices are one-time license fees. Annual maintenance and support plans available.
        </div>
      </section>

*/}

{/* CTA Section */}
      <section className="container mx-auto px-4 py-16">
        <div className="bg-gradient-to-r from-green-600 to-green-500 rounded-2xl p-8 md:p-12 text-white text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">Ready to Transform Your HR Operations?</h2>
          <p className="text-xl text-green-100 mb-8 max-w-2xl mx-auto">
            Join hundreds of businesses that have streamlined their HR processes with HR TECH. Schedule a demo today to
            see how we can help your business grow.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
          <Link href='/contact'>
            <Button size="lg" className="bg-white text-green-600 hover:bg-green-50">
              Schedule Demo
            </Button>
          </Link>
            
          </div>
        </div>
      </section>

{/* Enhanced Footer */}
      <EnhancedFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: {
    default: "Nuvate Technology - Leading ERP & Software Solutions Provider in India",
    template: "%s | Nuvate Technology",
  },
  description:
    "Transform your business with Nuvate's innovative ERP solutions. Specializing in StitchIT (garment manufacturing), WashIT (laundry management), DigitAil (e-commerce), and HR TECH. Trusted by 500+ businesses across India.",
  keywords: [
    "ERP software India",
    "garment manufacturing software",
    "laundry management system",
    "e-commerce solution",
    "HR management software",
    "StitchIT",
    "WashIT",
    "DigitAil",
    "HR TECH",
    "business automation",
    "inventory management",
    "production planning",
    "Ahmedabad software company",
    "textile ERP",
    "industrial laundry software",
  ],
  authors: [{ name: "Nuvate Technology Pvt Ltd" }],
  creator: "Nuvate Technology Pvt Ltd",
  publisher: "Nuvate Technology Pvt Ltd",
  formatDetection: {
    email: false,
    address: false,
    telephone: false,
  },
  metadataBase: new URL("https://nuvatetechnology.com"),
  alternates: {
    canonical: "/",
  },
  openGraph: {
    type: "website",
    locale: "en_IN",
    url: "https://nuvatetechnology.com",
    title: "Nuvate Technology - Leading ERP & Software Solutions Provider in India",
    description:
      "Transform your business with Nuvatech's innovative ERP solutions. Specializing in garment manufacturing, laundry management, e-commerce, and HR solutions.",
    siteName: "Nuvate Technology",
    images: [
      {
        url: "/og-image.jpg",
        width: 1200,
        height: 630,
        alt: "Nuvate Technology - ERP Solutions",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: "Nuvate Technology - Leading ERP & Software Solutions Provider",
    description:
      "Transform your business with innovative ERP solutions for garment manufacturing, laundry management, e-commerce, and HR.",
    images: ["/twitter-image.jpg"],
    creator: "@nuvate",
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      "max-video-preview": -1,
      "max-image-preview": "large",
      "max-snippet": -1,
    },
  },
  verification: {
    google: "your-google-verification-code",
    yandex: "your-yandex-verification-code",
  },
    generator: 'v0.dev'
}

const jsonLd = {
  "@context": "https://schema.org",
  "@type": "Organization",
  name: "Nuvate Technology Pvt Ltd",
  alternateName: "Nuvate",
  url: "https://nuvatetechnology.com",
  logo: "https://nuvatetechnology.com/logo.png",
  description:
    "Leading ERP and software solutions provider specializing in garment manufacturing, laundry management, e-commerce, and HR solutions.",
  address: {
    "@type": "PostalAddress",
    streetAddress: "B-901, Empire Business Hub, Science City Road",
    addressLocality: "Ahmedabad",
    addressRegion: "Gujarat",
    postalCode: "380060",
    addressCountry: "IN",
  },
  contactPoint: {
    "@type": "ContactPoint",
    telephone: "+91-76007-67857",
    contactType: "customer service",
    availableLanguage: ["English", "Hindi", "Gujarati"],
  },
  foundingDate: "2014",
  numberOfEmployees: "50-100",
  industry: "Software Development",
  sameAs: [
    "https://www.linkedin.com/company/nuvatech-technology",
    "https://twitter.com/nuvatech",
    "https://www.facebook.com/nuvatech",
  ],
  hasOfferCatalog: {
    "@type": "OfferCatalog",
    name: "ERP Software Solutions",
    itemListElement: [
      {
        "@type": "Offer",
        itemOffered: {
          "@type": "SoftwareApplication",
          name: "StitchIT",
          description: "Complete garment manufacturing ERP solution",
          applicationCategory: "BusinessApplication",
          operatingSystem: "Web-based",
        },
      },
      {
        "@type": "Offer",
        itemOffered: {
          "@type": "SoftwareApplication",
          name: "WashIT",
          description: "Industrial laundry management system",
          applicationCategory: "BusinessApplication",
          operatingSystem: "Web-based",
        },
      },
      {
        "@type": "Offer",
        itemOffered: {
          "@type": "SoftwareApplication",
          name: "DigitAil",
          description: "Complete e-commerce solution",
          applicationCategory: "BusinessApplication",
          operatingSystem: "Web-based",
        },
      },
      {
        "@type": "Offer",
        itemOffered: {
          "@type": "SoftwareApplication",
          name: "HR TECH",
          description: "Advanced HR management system",
          applicationCategory: "BusinessApplication",
          operatingSystem: "Web-based",
        },
      },
    ],
  },
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <head>
        <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
        <link rel="canonical" href="https://nuvatetechnology.com" />
        <meta name="geo.region" content="IN-GJ" />
        <meta name="geo.placename" content="Ahmedabad" />
        <meta name="geo.position" content="23.0225;72.5714" />
        <meta name="ICBM" content="23.0225, 72.5714" />
      </head>
      <body className={inter.className}>{children}</body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
import ImprovedHomepage from "../improved-homepage"
import SolutionTickers from "../components/solution-tickers"
import SEOOptimizedContent from "../components/seo-optimized-content"

export default function Page() {
  return (
    <div>
      <SEOOptimizedContent />
      <ImprovedHomepage />
      <SolutionTickers />
    </div>
  )
}
[V0_FILE]typescript:file="app/robots.ts" isMerged="true"
import type { MetadataRoute } from "next"

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: "*",
      allow: "/",
      disallow: ["/admin/", "/api/", "/private/"],
    },
    sitemap: "https://nuvatetechnology.com/sitemap.xml",
  }
}
[V0_FILE]typescript:file="app/sitemap.ts" isMerged="true"
import type { MetadataRoute } from "next"

export default function sitemap(): MetadataRoute.Sitemap {
  const baseUrl = "https://nuvatetechnology.com"

return [
    {
      url: baseUrl,
      lastModified: new Date(),
      changeFrequency: "weekly",
      priority: 1,
    },
    {
      url: `${baseUrl}/stitchit`,
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority: 0.9,
    },
    {
      url: `${baseUrl}/washit`,
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority: 0.9,
    },
    {
      url: `${baseUrl}/digitail`,
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority: 0.9,
    },
    {
      url: `${baseUrl}/hrtech`,
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority: 0.9,
    },
    {
      url: `${baseUrl}/about`,
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority: 0.8,
    },
    {
      url: `${baseUrl}/contact`,
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority: 0.8,
    },
    {
      url: `${baseUrl}/case-studies`,
      lastModified: new Date(),
      changeFrequency: "weekly",
      priority: 0.7,
    },
    {
      url: `${baseUrl}/blog`,
      lastModified: new Date(),
      changeFrequency: "daily",
      priority: 0.6,
    },
    {
      url: `${baseUrl}/support`,
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority: 0.5,
    },
  ]
}
[V0_FILE]typescriptreact:file="app/stitchit/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Image from "next/image"
import {
  ArrowRight,
  Users,
  Zap,
  Shield,
  Target,
  Scissors,
  Clock,
  Package,
  BarChart3,
  FileText,
  Layers,
  AlertTriangle,
  ClipboardCheck,
  BoxesIcon,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import EnhancedHeader from "../../components/enhanced-header"
import EnhancedFooter from "../../components/enhanced-footer"
import Link from "next/link"

import { FaDownload } from "react-icons/fa"

export default function StitchITPage() {
  const BASE_URL = "https://nuvatetechnology.com/";

const logos = [
  { src: `${BASE_URL}nuvate-image/logo/avadat.png`, alt: "Avadat" },
  { src: `${BASE_URL}nuvate-image/logo/sonam_logo.png`, alt: "Sonam Collection" },
  { src: `${BASE_URL}nuvate-image/logo/kapoor_logo.png`, alt: "Kapoor Enterprises" },
  { src: `${BASE_URL}nuvate-image/logo/zedex_clothing.png`, alt: "Zedex Clothing" },
  { src: `${BASE_URL}nuvate-image/logo/Fashion-Fair.png`, alt: "Fashion Fair" },
  { src: `${BASE_URL}nuvate-image/logo/Kajal-Kids.png`, alt: "Kajal Kids" },
]

const repeatedLogos = [...logos, ...logos] // Duplicate for seamless loop
  const features = [
    {
      title: "Cutting Plan Optimization",
      description: "Optimize fabric utilization with advanced algorithms that minimize waste and maximize efficiency.",
      icon: Scissors,
    },
    {
      title: "Production Tracking",
      description: "Real-time tracking of production status across all stages from cutting to packing.",
      icon: BarChart3,
    },
    {
      title: "Quality Control",
      description: "Integrated quality control processes to ensure consistent product quality and reduce defects.",
      icon: ClipboardCheck,
    },
    {
      title: "Inventory Management",
      description: "Comprehensive inventory management for raw materials, work-in-progress, and finished goods.",
      icon: BoxesIcon,
    },
    {
      title: "Cost Calculation",
      description: "Accurate cost calculation for each product based on materials, labor, and overhead costs.",
      icon: FileText,
    },
    {
      title: "Reports & Analytics",
      description: "Detailed reports and analytics to help you make data-driven decisions and optimize operations.",
      icon: Layers,
    },
  ]

const challenges = [
    {
      title: "Material Wastage",
      description: "Reduce fabric wastage with optimized cutting plans and efficient material utilization.",
      icon: Scissors,
    },
    {
      title: "Production Delays",
      description: "Eliminate bottlenecks and delays with real-time production tracking and proactive alerts.",
      icon: Clock,
    },
    {
      title: "Quality Issues",
      description: "Improve product quality with integrated quality control processes and defect tracking.",
      icon: AlertTriangle,
    },
    {
      title: "Inventory Management",
      description: "Optimize inventory levels and prevent stockouts with accurate inventory tracking.",
      icon: Package,
    },
  ]

const [hoveredCard, setHoveredCard] = useState<number | null>(null)

return (
    <div className="min-h-screen bg-gradient-to-br from-white to-slate-50">
      {/* Enhanced Header */}
      <EnhancedHeader />

{/* Hero Section */}
      <section className="container mx-auto px-4 py-16 md:py-24">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          <div>
            <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">StitchIT</Badge>
            <h1 className="text-4xl md:text-6xl font-bold text-slate-900 mb-6">
              Cut To Pack
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-orange-500">
                {" "}
                Software Solution
              </span>
            </h1>
            <p className="text-xl text-slate-600 mb-8 leading-relaxed">
              Streamline your garment manufacturing process with our comprehensive software solution designed for
              cutting, packing, an inventory management.
            </p>
            <div className="flex flex-col sm:flex-row gap-4">
              <Link href="/contact">
                <Button size="lg" className="bg-orange-600 hover:bg-orange-700">
                  Schedule Demo
                  <ArrowRight className="ml-2 h-4 w-4" />
                </Button>
              </Link>
              <Button
                size="lg"
                variant="outline"
                onClick={() => {
                  const link = document.createElement("a")
                  link.href = "/StitchIT.pdf" // Updated path
                  link.download = "StitchIT-Brochure.pdf" // name the file
                  document.body.appendChild(link)
                  link.click()
                  document.body.removeChild(link)
                }}
              >
                <FaDownload className="mr-2" />
                Download Broucher
              </Button>
            </div>
          </div>
          <div className="relative">
            <iframe
              width="746"
              height="420"
              src="https://www.youtube.com/embed/BbGNoItTbuI"
              title="StitchIT - Complete Cut to Pack Software Solution for Garment Unit."
              frameBorder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;          web-share"
              referrerPolicy="strict-origin-when-cross-origin"
              allowFullScreen
              className="rounded-xl shadow-xl w-full "
            ></iframe>
          </div>
        </div>
      </section>

{/* Stats Section */}
      <section className="container mx-auto px-4 py-12">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
          {[
            { icon: Users, label: "Active Clients", value: "30+" },
            { icon: Zap, label: "Efficiency Increase", value: "35%" },
            { icon: Shield, label: "Material Savings", value: "25%" },
            { icon: Target, label: "ROI Timeline", value: "4 months" },
          ].map((stat, index) => (
            <div key={index} className="space-y-2">
              <stat.icon className="h-8 w-8 mx-auto text-orange-600" />
              <div className="text-2xl font-bold text-slate-900">{stat.value}</div>
              <div className="text-sm text-slate-600">{stat.label}</div>
            </div>
          ))}
        </div>
      </section>

{/* Challenges We Solve */}
      <section className="container mx-auto px-4 py-16 md:py-24 bg-white">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">Challenges We Solve</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">
            Common Challenges in Garment Manufacturing
          </h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            StitchIT addresses the key challenges faced by garment manufacturers, helping you optimize operations and
            increase profitability.
          </p>
        </div>

<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
          {challenges.map((challenge, index) => (
            <div
              key={index}
              className="bg-white border border-slate-200 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2"
              onMouseEnter={() => setHoveredCard(index)}
              onMouseLeave={() => setHoveredCard(null)}
            >
              <div className="h-16 w-16 rounded-full bg-orange-100 flex items-center justify-center mb-6">
                {typeof challenge.icon === "string" ? (
                  <Image
                    src={challenge.icon || "/placeholder.svg"}
                    alt={challenge.title}
                    width={40}
                    height={40}
                    className="h-8 w-8"
                  />
                ) : (
                  <challenge.icon className="h-8 w-8 text-orange-600" />
                )}
              </div>
              <h3 className="text-xl font-bold text-slate-900 mb-3">{challenge.title}</h3>
              <p className="text-slate-600">{challenge.description}</p>
            </div>
          ))}
        </div>
      </section>

{/* Comprehensive Features */}
      <section className="w-full py-16 md:py-24 bg-gradient-to-r from-orange-50 to-orange-100">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <Badge className="mb-4 bg-orange-200 text-orange-700 hover:bg-orange-300">Comprehensive Features</Badge>
            <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Everything You Need in One Solution</h2>
            <p className="text-xl text-slate-600 max-w-3xl mx-auto">
              StitchIT offers a complete suite of features designed specifically for garment manufacturing businesses.
            </p>
          </div>

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {features.map((feature, index) => (
              <div
                key={index}
                className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2"
                onMouseEnter={() => setHoveredCard(index + challenges.length)}
                onMouseLeave={() => setHoveredCard(null)}
              >
                <div className="h-16 w-16 rounded-full bg-orange-100 flex items-center justify-center mb-6">
                  {typeof feature.icon === "string" ? (
                    <Image
                      src={feature.icon || "/placeholder.svg"}
                      alt={feature.title}
                      width={40}
                      height={40}
                      className="h-8 w-8"
                    />
                  ) : (
                    <feature.icon className="h-8 w-8 text-orange-600" />
                  )}
                </div>
                <h3 className="text-xl font-bold text-slate-900 mb-3">{feature.title}</h3>
                <p className="text-slate-600">{feature.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

{/* How It Works */}
      <section className="container mx-auto px-4 py-16 md:py-24">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">How It Works</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Streamlined Workflow</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            StitchIT integrates seamlessly with your existing processes, providing end-to-end visibility and control.
          </p>
        </div>

<div className="relative">
          {/* Timeline Line */}
          <div className="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-orange-200 hidden md:block"></div>

<div className="space-y-12">
            {[
              {
                title: "Order Management",
                description:
                  "Efficiently manage customer orders, from initial inquiry to final delivery, with comprehensive order tracking.",
                image: `/images/StitchIT/Order-Management.png`,
              },
              {
                title: "Production Planning",
                description:
                  "Create optimized production plans based on order requirements, resource availability, and delivery schedules.",
                image:
                  "/images/StitchIT/Production-Planning.png",
              },
              // {
              //   title: "Cutting Management",
              //   description:
              //     "Generate efficient cutting plans that minimize fabric wastage while meeting production requirements.",
              //   image: "https://deltatextilesolutions.com/wp-content/uploads/2019/04/cortando-tecido-enfestado-1.jpg",
              // },
              {
                title: "Production Tracking",
                description:
                  "Track production progress in real-time across all stages, identifying bottlenecks and optimizing workflow.",
                image:
                  "/images/StitchIT/Production-Tracking.png",
              },
              {
                title: "Quality Control",
                description:
                  "Implement comprehensive quality control processes to ensure consistent product quality and customer satisfaction.",
                image: "/images/StitchIT/Quality-Control.png",
              },
              {
                title: "Packing & Shipping",
                description:
                  "Streamline packing and shipping processes with automated documentation and tracking capabilities.",
                image: "/images/StitchIT/Packing-and-Shipping.png",
              },
            ].map((step, index) => (
              <div key={index} className="relative">
                <div
                  className={`md:flex items-center ${index % 2 === 0 ? "md:flex-row" : "md:flex-row-reverse"} gap-8`}
                >
                  {/* Step Number */}
                  <div className="md:w-1/2 flex md:justify-center relative mb-8 md:mb-0">
                    <div className="md:absolute md:left-1/2 md:transform md:-translate-x-1/2 z-10">
                      <div className="bg-orange-500 text-white text-xl font-bold rounded-full h-12 w-12 flex items-center justify-center shadow-lg">
                        {index + 1}
                      </div>
                    </div>
                  </div>

{/* Testimonials */}
      <section className="container mx-auto px-4 py-16 md:py-24 bg-white">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">Testimonials</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">What Our Clients Say</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            Hear from businesses that have transformed their operations with StitchIT.
          </p>
        </div>

<Tabs defaultValue="testimonial1" className="w-full">
          <TabsList className="grid grid-cols-3 max-w-md mx-auto">
            <TabsTrigger value="testimonial1">Fashion Forward</TabsTrigger>
            <TabsTrigger value="testimonial2">Style Hub</TabsTrigger>
            <TabsTrigger value="testimonial3">Textile Masters</TabsTrigger>
          </TabsList>
          <div className="mt-8">
            <TabsContent value="testimonial1">
              <div className="bg-slate-50 rounded-xl p-8 shadow-lg max-w-4xl mx-auto">
                <div className="flex flex-col md:flex-row gap-8">
                  <div className="md:w-1/3">
                    <Image
                      src="https://etimg.etb2bimg.com/photo/112029077.cms"
                      alt="Fashion Forward Inc."
                      width={350}
                      height={350}
                      className="rounded-lg mx-auto"
                    />
                  </div>
                  <div className="md:w-2/3">
                    <div className="flex mb-4">
                      {[...Array(5)].map((_, i) => (
                        <svg
                          key={i}
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 24 24"
                          fill="currentColor"
                          className="h-5 w-5 text-yellow-400"
                        >
                          <path
                            fillRule="evenodd"
                            d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
                            clipRule="evenodd"
                          />
                        </svg>
                      ))}
                    </div>
                    <blockquote className="text-xl italic text-slate-600 mb-6">
                      "StitchIT has completely transformed our manufacturing process. We've seen remarkable improvements
                      in efficiency and our customers are happier with faster delivery times. The ROI was evident within
                      the first quarter."
                    </blockquote>
                    <div>
                      <p className="font-semibold text-slate-900">Rajesh Sharma</p>
                      <p className="text-slate-500">Operations Director, Fashion Forward Inc.</p>
                    </div>
                    <div className="mt-6 grid grid-cols-3 gap-4">
                      <div className="bg-white p-3 rounded-lg text-center">
                        <div className="text-2xl font-bold text-orange-600">35%</div>
                        <div className="text-xs text-slate-500">Efficiency Increase</div>
                      </div>
                      <div className="bg-white p-3 rounded-lg text-center">
                        <div className="text-2xl font-bold text-orange-600">45%</div>
                        <div className="text-xs text-slate-500">Lead Time Reduction</div>
                      </div>
                      <div className="bg-white p-3 rounded-lg text-center">
                        <div className="text-2xl font-bold text-orange-600">25%</div>
                        <div className="text-xs text-slate-500">Material Waste Reduction</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </TabsContent>
            <TabsContent value="testimonial2">
              <div className="bg-slate-50 rounded-xl p-8 shadow-lg max-w-4xl mx-auto">
                <div className="flex flex-col md:flex-row gap-8">
                  <div className="md:w-1/3">
                    <Image
                      src="https://thygesenapparel.com/wp-content/uploads/2025/06/scaling-your-clothing-brand-successfully-depends-on-both-your-brand-and-your-manufacturing-partner.png"
                      alt="Style Hub"
                      width={350}
                      height={350}
                      className="rounded-lg mx-auto"
                    />
                  </div>
                  <div className="md:w-2/3">
                    <div className="flex mb-4">
                      {[...Array(5)].map((_, i) => (
                        <svg
                          key={i}
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 24 24"
                          fill="currentColor"
                          className="h-5 w-5 text-yellow-400"
                        >
                          <path
                            fillRule="evenodd"
                            d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
                            clipRule="evenodd"
                          />
                        </svg>
                      ))}
                    </div>
                    <blockquote className="text-xl italic text-slate-600 mb-6">
                      "As a growing fashion brand, we needed a solution that could scale with us. StitchIT provided the
                      perfect balance of functionality and ease of use. Our production efficiency has increased
                      dramatically."
                    </blockquote>
                    <div>
                      <p className="font-semibold text-slate-900">Priya Mehta</p>
                      <p className="text-slate-500">CEO, Style Hub</p>
                    </div>
                    <div className="mt-6 grid grid-cols-3 gap-4">
                      <div className="bg-white p-3 rounded-lg text-center">
                        <div className="text-2xl font-bold text-orange-600">40%</div>
                        <div className="text-xs text-slate-500">Production Capacity</div>
                      </div>
                      <div className="bg-white p-3 rounded-lg text-center">
                        <div className="text-2xl font-bold text-orange-600">30%</div>
                        <div className="text-xs text-slate-500">Cost Reduction</div>
                      </div>
                      <div className="bg-white p-3 rounded-lg text-center">
                        <div className="text-2xl font-bold text-orange-600">50%</div>
                        <div className="text-xs text-slate-500">Faster Delivery</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </TabsContent>
            <TabsContent value="testimonial3">
              <div className="bg-slate-50 rounded-xl p-8 shadow-lg max-w-4xl mx-auto">
                <div className="flex flex-col md:flex-row gap-8">
                  <div className="md:w-1/3">
                    <Image
                      src="https://audaces.com/wp-content/uploads/2024/08/fabric-cutting-systems-feature.webp"
                      alt="Textile Masters"
                      width={350}
                      height={350}
                      className="rounded-lg mx-auto"
                    />
                  </div>
                  <div className="md:w-2/3">
                    <div className="flex mb-4">
                      {[...Array(5)].map((_, i) => (
                        <svg
                          key={i}
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 24 24"
                          fill="currentColor"
                          className="h-5 w-5 text-yellow-400"
                        >
                          <path
                            fillRule="evenodd"
                            d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
                            clipRule="evenodd"
                          />
                        </svg>
                      ))}
                    </div>
                    <blockquote className="text-xl italic text-slate-600 mb-6">
                      "The cutting optimization feature alone saved us enough material to justify the investment. The
                      entire system has streamlined our operations and given us unprecedented visibility into our
                      production process."
                    </blockquote>
                    <div>
                      <p className="font-semibold text-slate-900">Amit Patel</p>
                      <p className="text-slate-500">Production Manager, Textile Masters Ltd.</p>
                    </div>
                    <div className="mt-6 grid grid-cols-3 gap-4">
                      <div className="bg-white p-3 rounded-lg text-center">
                        <div className="text-2xl font-bold text-orange-600">28%</div>
                        <div className="text-xs text-slate-500">Material Savings</div>
                      </div>
                      <div className="bg-white p-3 rounded-lg text-center">
                        <div className="text-2xl font-bold text-orange-600">60%</div>
                        <div className="text-xs text-slate-500">Planning Time</div>
                      </div>
                      <div className="bg-white p-3 rounded-lg text-center">
                        <div className="text-2xl font-bold text-orange-600">20%</div>
                        <div className="text-xs text-slate-500">Quality Improvement</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </TabsContent>
          </div>
        </Tabs>
      </section>

{/* Pricing 
      <section className="container mx-auto px-4 py-16 md:py-24">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">Pricing</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Simple, Transparent Pricing</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            Choose the plan that best fits your business needs. All plans include implementation support and training.
          </p>
        </div>

<div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
          {[
            {
              name: "Starter",
              price: "₹49,999",
              description: "Perfect for small businesses just getting started",
              features: [
                "Up to 5 users",
                "Basic cutting plan optimization",
                "Production tracking",
                "Basic inventory management",
                "Email support",
                "Regular updates",
              ],
              cta: "Get Started",
              popular: false,
            },
            {
              name: "Professional",
              price: "₹99,999",
              description: "Ideal for growing businesses with complex needs",
              features: [
                "Up to 20 users",
                "Advanced cutting plan optimization",
                "Real-time production tracking",
                "Comprehensive inventory management",
                "Quality control module",
                "Priority support",
                "Regular updates",
              ],
              cta: "Most Popular",
              popular: true,
            },
            {
              name: "Enterprise",
              price: "Custom",
              description: "Tailored solutions for large-scale operations",
              features: [
                "Unlimited users",
                "Enterprise-grade cutting optimization",
                "Advanced analytics and reporting",
                "Multi-location support",
                "API access for custom integrations",
                "Dedicated account manager",
                "Custom feature development",
              ],
              cta: "Contact Sales",
              popular: false,
            },
          ].map((plan, index) => (
            <Card
              key={index}
              className={`border-0 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2 ${
                plan.popular ? "relative z-10 scale-105 md:-mt-4 md:-mb-4" : ""
              }`}
            >
              {plan.popular && (
                <div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                  <Badge className="bg-orange-600 text-white hover:bg-orange-700 px-4 py-1">Most Popular</Badge>
                </div>
              )}
              <CardContent className="p-6 md:p-8">
                <div className="text-center mb-6">
                  <h3 className="text-2xl font-bold text-slate-900 mb-2">{plan.name}</h3>
                  <div className="text-4xl font-bold text-slate-900 mb-2">{plan.price}</div>
                  <p className="text-slate-600">{plan.description}</p>
                </div>

<div className="text-center mt-8 text-slate-600">
          All prices are one-time license fees. Annual maintenance and support plans available.
        </div>
      </section>
      */}

{/* CTA Section */}
      <section className="container mx-auto px-4 py-16">
        <div className="bg-gradient-to-r from-orange-600 to-orange-500 rounded-2xl p-8 md:p-12 text-white text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">Ready to Transform Your Manufacturing Process?</h2>
          <p className="text-xl text-orange-100 mb-8 max-w-2xl mx-auto">
            Join hundreds of businesses that have streamlined their operations with StitchIT. Schedule a demo today to
            see how we can help your business grow.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link href="/contact" passHref>
              <Button size="lg" className="bg-white text-orange-600 hover:bg-orange-50">
                Schedule Demo
              </Button>
            </Link>
          </div>
        </div>
      </section>

{/* Enhanced Footer */}
      <EnhancedFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/support/implementation/page.tsx" isMerged="true"
import Link from "next/link"
import {
  ArrowLeft,
  ArrowRight,
  CheckCircle,
  Clock,
  Users,
  Settings,
  Database,
  Shield,
  Zap,
  Target,
  BarChart3,
  Headphones,
  Calendar,
  FileText,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import EnhancedHeader from "../../../components/enhanced-header"
import EnhancedFooter from "../../../components/enhanced-footer"

export default function ImplementationPage() {
  const implementationPhases = [
    {
      phase: "Discovery & Planning",
      duration: "1-2 weeks",
      icon: Target,
      description: "Understanding your business requirements and creating a detailed implementation plan.",
      activities: [
        "Business process analysis",
        "Requirements gathering",
        "System architecture design",
        "Implementation timeline creation",
        "Resource allocation planning",
      ],
    },
    {
      phase: "System Setup & Configuration",
      duration: "2-3 weeks",
      icon: Settings,
      description: "Setting up and configuring the system according to your business needs.",
      activities: [
        "System installation and setup",
        "Custom configuration",
        "User roles and permissions setup",
        "Integration with existing systems",
        "Security configuration",
      ],
    },
    {
      phase: "Data Migration",
      duration: "1-2 weeks",
      icon: Database,
      description: "Safely migrating your existing data to the new system.",
      activities: [
        "Data extraction and cleaning",
        "Data mapping and transformation",
        "Migration testing",
        "Data validation and verification",
        "Backup and rollback procedures",
      ],
    },
    {
      phase: "Testing & Quality Assurance",
      duration: "1-2 weeks",
      icon: Shield,
      description: "Comprehensive testing to ensure everything works perfectly.",
      activities: [
        "System functionality testing",
        "Integration testing",
        "Performance testing",
        "User acceptance testing",
        "Security testing",
      ],
    },
    {
      phase: "Training & Go-Live",
      duration: "1 week",
      icon: Zap,
      description: "Training your team and launching the system for production use.",
      activities: [
        "User training sessions",
        "Documentation handover",
        "Go-live preparation",
        "System launch",
        "Post-launch monitoring",
      ],
    },
    {
      phase: "Support & Optimization",
      duration: "Ongoing",
      icon: Headphones,
      description: "Continuous support and system optimization for maximum efficiency.",
      activities: [
        "24/7 technical support",
        "Performance monitoring",
        "Regular system updates",
        "Optimization recommendations",
        "Additional training as needed",
      ],
    },
  ]

const implementationServices = [
    {
      title: "Standard Implementation",
      description: "Complete implementation with standard configurations",
      duration: "6-8 weeks",
      price: "₹2,50,000",
      features: [
        "System setup and configuration",
        "Basic data migration",
        "Standard integrations",
        "User training (up to 10 users)",
        "3 months post-launch support",
        "Documentation package",
      ],
      popular: false,
    },
    {
      title: "Premium Implementation",
      description: "Enhanced implementation with custom configurations",
      duration: "8-12 weeks",
      price: "₹4,50,000",
      features: [
        "Custom system configuration",
        "Advanced data migration",
        "Multiple system integrations",
        "Comprehensive user training",
        "6 months post-launch support",
        "Custom reporting setup",
        "Workflow optimization",
      ],
      popular: true,
    },
    {
      title: "Enterprise Implementation",
      description: "Full-scale implementation for large organizations",
      duration: "12-16 weeks",
      price: "Custom Quote",
      features: [
        "Multi-location setup",
        "Complex data migration",
        "Enterprise integrations",
        "Advanced customizations",
        "12 months premium support",
        "Dedicated project manager",
        "On-site implementation team",
        "Custom development work",
      ],
      popular: false,
    },
  ]

const successMetrics = [
    {
      metric: "98%",
      label: "Implementation Success Rate",
      description: "Projects completed successfully within timeline",
    },
    {
      metric: "6-8 weeks",
      label: "Average Implementation Time",
      description: "From project start to go-live",
    },
    {
      metric: "24/7",
      label: "Post-Launch Support",
      description: "Continuous support after implementation",
    },
    {
      metric: "500+",
      label: "Successful Implementations",
      description: "Businesses successfully onboarded",
    },
  ]

return (
    <div className="min-h-screen bg-gradient-to-br from-white to-slate-50">
      <EnhancedHeader />

{/* Hero Section */}
      <section className="container mx-auto px-4 py-16 md:py-24">
        <div className="flex items-center mb-8">
          <Button variant="ghost" asChild className="mr-4">
            <Link href="/support">
              <ArrowLeft className="h-4 w-4 mr-2" />
              Back to Support
            </Link>
          </Button>
        </div>

<div className="text-center max-w-4xl mx-auto">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">Implementation Services</Badge>
          <h1 className="text-4xl md:text-6xl font-bold text-slate-900 mb-6">
            Seamless
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-orange-500">
              {" "}
              Implementation
            </span>
          </h1>
          <p className="text-xl text-slate-600 mb-8 leading-relaxed">
            Our expert implementation team ensures a smooth transition to our solutions with minimal disruption to your
            business operations.
          </p>
        </div>
      </section>

{/* Success Metrics */}
      <section className="container mx-auto px-4 py-16">
        <div className="grid md:grid-cols-4 gap-8 mb-16">
          {successMetrics.map((item, index) => (
            <Card key={index} className="border-0 shadow-lg text-center">
              <CardContent className="p-6">
                <div className="text-3xl font-bold text-orange-600 mb-2">{item.metric}</div>
                <div className="text-lg font-semibold text-slate-900 mb-2">{item.label}</div>
                <div className="text-sm text-slate-600">{item.description}</div>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

{/* Implementation Process */}
      <section className="container mx-auto px-4 py-16 bg-white">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">Implementation Process</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Our Proven Implementation Methodology</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            We follow a structured approach to ensure successful implementation of our solutions.
          </p>
        </div>

<div className="space-y-8">
          {implementationPhases.map((phase, index) => (
            <Card key={index} className="border border-slate-200 hover:border-orange-200 transition-colors">
              <CardContent className="p-8">
                <div className="flex items-start space-x-6">
                  <div className="flex-shrink-0">
                    <div className="h-16 w-16 rounded-full bg-orange-100 flex items-center justify-center">
                      <phase.icon className="h-8 w-8 text-orange-600" />
                    </div>
                  </div>
                  <div className="flex-1">
                    <div className="flex items-center justify-between mb-4">
                      <div>
                        <h3 className="text-2xl font-bold text-slate-900 mb-2">
                          Phase {index + 1}: {phase.phase}
                        </h3>
                        <p className="text-slate-600">{phase.description}</p>
                      </div>
                      <div className="text-right">
                        <Badge variant="outline" className="border-orange-200 text-orange-700">
                          <Clock className="h-4 w-4 mr-1" />
                          {phase.duration}
                        </Badge>
                      </div>
                    </div>
                    <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-3">
                      {phase.activities.map((activity, activityIndex) => (
                        <div key={activityIndex} className="flex items-center space-x-2">
                          <CheckCircle className="h-4 w-4 text-green-500 flex-shrink-0" />
                          <span className="text-slate-600 text-sm">{activity}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

{/* Implementation Packages */}
      <section className="container mx-auto px-4 py-16">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">Implementation Packages</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Choose Your Implementation Package</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            Select the implementation package that best fits your business size and requirements.
          </p>
        </div>

<div className="grid lg:grid-cols-3 gap-8">
          {implementationServices.map((service, index) => (
            <Card
              key={index}
              className={`border-0 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2 relative ${
                service.popular ? "border-t-4 border-t-orange-600" : ""
              }`}
            >
              {service.popular && (
                <div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                  <Badge className="bg-orange-600 text-white hover:bg-orange-700 px-4 py-1">Most Popular</Badge>
                </div>
              )}
              <CardHeader className="text-center pb-4">
                <CardTitle className="text-2xl font-bold text-slate-900">{service.title}</CardTitle>
                <p className="text-slate-600">{service.description}</p>
                <div className="mt-4">
                  <span className="text-3xl font-bold text-slate-900">{service.price}</span>
                </div>
                <div className="flex items-center justify-center text-sm text-slate-600 mt-2">
                  <Clock className="h-4 w-4 mr-1" />
                  {service.duration}
                </div>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="space-y-3">
                  {service.features.map((feature, featureIndex) => (
                    <div key={featureIndex} className="flex items-center space-x-3">
                      <CheckCircle className="h-5 w-5 text-green-500 flex-shrink-0" />
                      <span className="text-slate-600">{feature}</span>
                    </div>
                  ))}
                </div>

<Button
                  className={`w-full ${
                    service.popular
                      ? "bg-orange-600 hover:bg-orange-700 text-white"
                      : "bg-slate-100 hover:bg-slate-200 text-slate-800"
                  }`}
                  variant={service.popular ? "default" : "outline"}
                >
                  Get Started
                  <ArrowRight className="ml-2 h-4 w-4" />
                </Button>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

{/* Why Choose Our Implementation */}
      <section className="container mx-auto px-4 py-16 bg-white">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">Why Choose Us</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Why Our Implementation Stands Out</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            Our implementation approach is designed to minimize risk and maximize success.
          </p>
        </div>

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {[
            {
              title: "Experienced Team",
              description: "Our implementation specialists have years of experience across various industries.",
              icon: Users,
              color: "text-blue-600",
              bgColor: "bg-blue-100",
            },
            {
              title: "Proven Methodology",
              description: "We follow a time-tested implementation process that ensures success.",
              icon: Target,
              color: "text-green-600",
              bgColor: "bg-green-100",
            },
            {
              title: "Minimal Disruption",
              description: "Our approach ensures minimal disruption to your ongoing business operations.",
              icon: Shield,
              color: "text-purple-600",
              bgColor: "bg-purple-100",
            },
            {
              title: "Comprehensive Training",
              description: "We provide thorough training to ensure your team can use the system effectively.",
              icon: FileText,
              color: "text-orange-600",
              bgColor: "bg-orange-100",
            },
            {
              title: "Ongoing Support",
              description: "Post-implementation support to ensure continued success and optimization.",
              icon: Headphones,
              color: "text-cyan-600",
              bgColor: "bg-cyan-100",
            },
            {
              title: "Performance Monitoring",
              description: "We monitor system performance and provide optimization recommendations.",
              icon: BarChart3,
              color: "text-red-600",
              bgColor: "bg-red-100",
            },
          ].map((item, index) => (
            <Card key={index} className="border border-slate-200 hover:border-orange-200 transition-colors">
              <CardContent className="p-6 text-center">
                <div className={`h-16 w-16 rounded-full ${item.bgColor} flex items-center justify-center mx-auto mb-4`}>
                  <item.icon className={`h-8 w-8 ${item.color}`} />
                </div>
                <h3 className="text-xl font-bold text-slate-900 mb-3">{item.title}</h3>
                <p className="text-slate-600">{item.description}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

{/* CTA Section */}
      <section className="container mx-auto px-4 py-16">
        <div className="bg-gradient-to-r from-orange-600 to-orange-500 rounded-2xl p-8 md:p-12 text-center text-white">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">Ready to Get Started?</h2>
          <p className="text-xl mb-8 opacity-90 max-w-2xl mx-auto">
            Let's discuss your implementation requirements and create a customized plan for your business.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button size="lg" variant="secondary" className="bg-white text-orange-600 hover:bg-slate-100">
              <Calendar className="h-5 w-5 mr-2" />
              Schedule Consultation
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="border-white text-white hover:bg-white hover:text-orange-600"
            >
              Request Quote
            </Button>
          </div>
        </div>
      </section>

<EnhancedFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/support/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/support/page.tsx" isMerged="true"
import { ArrowRight, Search, Phone, Mail } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import EnhancedHeader from "../../components/enhanced-header"
import EnhancedFooter from "../../components/enhanced-footer"
import Link from 'next/link'
export default function SupportPage() {
  const supportOptions = [
    {
      title: "Phone Support",
      description: "Call our dedicated support line for personalized assistance and immediate help.",
      icon: Phone,
      color: "text-orange-500",
      bgColor: "bg-orange-100",
      link: "tel:+917600767857",
    },
    {
      title: "Email Support",
      description: "Send us an email and we'll get back to you within 24 hours with detailed solutions.",
      icon: Mail,
      color: "text-blue-500",
      bgColor: "bg-blue-100",
      link: "mailto:support@nuvatetechnology.com",
    },
  ]

const faqs = [
    {
      question: "How do I get started with StitchIT?",
      answer:
        "Getting started with StitchIT is easy. After signing up, our team will guide you through the setup process, including data migration, user training, and system configuration. We offer a comprehensive onboarding program to ensure a smooth transition.",
    },
    {
      question: "What kind of support do you provide after implementation?",
      answer:
        "We provide ongoing support through multiple channels including phone and email. Our support team is available during business hours, and we also offer premium support packages with extended hours and dedicated support representatives.",
    },
    {
      question: "Can your solutions integrate with my existing business systems?",
      answer:
        "Yes, our solutions are designed to work seamlessly with a wide range of business systems including accounting software, e-commerce platforms, and other business applications. Our team handles all integration work as part of our service offering.",
    },
    {
      question: "How secure is my data with your solutions?",
      answer:
        "Data security is our top priority. We implement industry-standard security measures including encryption, regular security audits, and strict access controls. Our systems comply with relevant data protection regulations to ensure your data remains secure.",
    },
    {
      question: "Do you offer customization for specific business needs?",
      answer:
        "Yes, we understand that every business is unique. We offer customization services to tailor our solutions to your specific requirements. Our team will work closely with you to understand your needs and implement the necessary customizations.",
    },
    {
      question: "What is your pricing model?",
      answer:
        "We offer flexible pricing models including subscription-based and one-time license options. The exact pricing depends on the solution, number of users, and specific features required. Contact our sales team for a detailed quote based on your requirements.",
    },
    {
      question: "How long does implementation typically take?",
      answer:
        "Implementation time varies depending on the solution and the complexity of your requirements. Typically, basic implementations can be completed in 4-6 weeks, while more complex projects may take 2-3 months. We provide a detailed timeline during the initial consultation.",
    },
    {
      question: "Do you provide training for our team?",
      answer:
        "Yes, comprehensive training is included in our implementation process. We offer both in-person and virtual training sessions, as well as documentation and video tutorials. Additional training sessions can be arranged as needed.",
    },
  ]

return (
    <div className="min-h-screen bg-gradient-to-br from-white via-slate-50 to-orange-50">
      {/* Enhanced Header */}
      <EnhancedHeader />

{/* Hero Section */}
      <section className="container mx-auto px-4 py-10 md:py-16">
        <div className="text-center max-w-4xl mx-auto mb-1">
          <Badge className="mb-6 bg-gradient-to-r from-orange-100 to-orange-200 text-orange-800 hover:from-orange-200 hover:to-orange-300 px-4 py-2 text-sm font-medium">
            Support Center
          </Badge>
          <h1 className="text-4xl md:text-6xl font-bold text-slate-900 mb-6 leading-tight">
            We're Here to
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-orange-600 via-orange-500 to-orange-400">
              {" "}
              Help You Succeed
            </span>
          </h1>
          <p className="text-xl text-slate-600 leading-relaxed max-w-3xl mx-auto">
            Our dedicated support team is committed to providing you with the assistance you need to make the most of
            our solutions. Get help through video guides, FAQs, or direct support.
          </p>
          {/*
          <div className="max-w-lg mx-auto relative">
            <Input
              placeholder="Search for help articles..."
              className="pl-12 pr-24 py-6 text-base rounded-2xl border-slate-300 shadow-lg focus:shadow-xl transition-shadow"
            />
            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-slate-400" />
            <Button className="absolute right-2 top-2 bg-gradient-to-r from-orange-600 to-orange-500 hover:from-orange-700 hover:to-orange-600 rounded-xl px-6">
              Search
            </Button>
          </div>
          */}
        </div>
      </section>

{/* Video Guides Section */}
      <section className="container mx-auto px-4 py-20">
        <div className="text-center mb-16">
          <Badge className="mb-6 bg-gradient-to-r from-blue-100 to-blue-200 text-blue-800 hover:from-blue-200 hover:to-blue-300 px-4 py-2 text-sm font-medium">
            Video Guides
          </Badge>
          <h2 className="text-3xl md:text-5xl font-bold text-slate-900 mb-6">Learn Through Video Guides</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto leading-relaxed">
            Watch our comprehensive video guides to get the most out of our solutions and learn best practices.
          </p>
        </div>

<div className="grid lg:grid-cols-2 gap-8 max-w-7xl mx-auto">
          {/* StitchIT Video */}
          <Card className="border-0 shadow-2xl hover:shadow-3xl transition-all duration-500 overflow-hidden bg-gradient-to-br from-white to-slate-50">
            <CardContent className="p-0">
              <div className="aspect-video">
                <iframe
                  width="100%"
                  height="100%"
                  src="https://www.youtube.com/embed/BbGNoItTbuI"
                  title="StitchIT - Complete Cut to Pack Software Solution for Garment Unit."
                  frameBorder="0"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                  referrerPolicy="strict-origin-when-cross-origin"
                  allowFullScreen
                  className="rounded-t-xl"
                />
              </div>
              <div className="p-6">
                <h3 className="text-xl font-bold text-slate-900 mb-3">StitchIT - Complete Garment Solution</h3>
                <p className="text-slate-600 leading-relaxed">
                  Complete Cut to Pack Software Solution for Garment Manufacturing Units. Learn how StitchIT streamlines
                  your entire production process.
                </p>
              </div>
            </CardContent>
          </Card>

{/* HR TECH Video */}
          <Card className="border-0 shadow-2xl hover:shadow-3xl transition-all duration-500 overflow-hidden bg-gradient-to-br from-white to-slate-50">
            <CardContent className="p-0">
              <div className="aspect-video">
                <iframe
                  width="100%"
                  height="100%"
                  src="https://www.youtube.com/embed/oqjx7XCTYNU"
                  title="HR Tech Brochure Video"
                  frameBorder="0"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                  referrerPolicy="strict-origin-when-cross-origin"
                  allowFullScreen
                  className="rounded-t-xl"
                />
              </div>
              <div className="p-6">
                <h3 className="text-xl font-bold text-slate-900 mb-3">HR TECH - Complete HR Management</h3>
                <p className="text-slate-600 leading-relaxed">
                  Comprehensive HR management solution covering payroll, attendance, employee management, and compliance
                  requirements.
                </p>
              </div>
            </CardContent>
          </Card>

{/* DigitAil Video */}
          <Card className="border-0 shadow-2xl hover:shadow-3xl transition-all duration-500 overflow-hidden bg-gradient-to-br from-white to-slate-50">
            <CardContent className="p-0">
              <div className="aspect-video">
                <iframe
                  width="100%"
                  height="100%"
                  src="https://www.youtube.com/embed/3avYI94_gOM"
                  title="Digitail Brochure Video"
                  frameBorder="0"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                  referrerPolicy="strict-origin-when-cross-origin"
                  allowFullScreen
                  className="rounded-t-xl"
                />
              </div>
              <div className="p-6">
                <h3 className="text-xl font-bold text-slate-900 mb-3">DigitAil - E-commerce Platform</h3>
                <p className="text-slate-600 leading-relaxed">
                  Complete e-commerce solution for retail businesses. Manage your online store, inventory, and customer
                  relationships seamlessly.
                </p>
              </div>
            </CardContent>
          </Card>

{/* WashIT Video */}
          <Card className="border-0 shadow-2xl hover:shadow-3xl transition-all duration-500 overflow-hidden bg-gradient-to-br from-white to-slate-50">
            <CardContent className="p-0">
              <div className="aspect-video">
                <iframe
                  width="100%"
                  height="100%"
                  src="https://www.youtube.com/embed/SxB6dovVe9U"
                  title="INDUSTRIAL LAUNDRY ERP SYSTEM - WASHIT"
                  frameBorder="0"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                  referrerPolicy="strict-origin-when-cross-origin"
                  allowFullScreen
                  className="rounded-t-xl"
                />
              </div>
              <div className="p-6">
                <h3 className="text-xl font-bold text-slate-900 mb-3">WashIT - Industrial Laundry ERP</h3>
                <p className="text-slate-600 leading-relaxed">
                  Complete ERP system for industrial laundry operations. Streamline your laundry business with advanced
                  management features.
                </p>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

{/* FAQs Section */}
      <section className="container mx-auto px-4 py-20 bg-gradient-to-br from-white to-slate-100">
        <div className="text-center mb-16">
          <Badge className="mb-6 bg-gradient-to-r from-green-100 to-green-200 text-green-800 hover:from-green-200 hover:to-green-300 px-4 py-2 text-sm font-medium">
            Frequently Asked Questions
          </Badge>
          <h2 className="text-3xl md:text-5xl font-bold text-slate-900 mb-6">Got Questions? We Have Answers</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto leading-relaxed">
            Find answers to the most common questions about our solutions and services.
          </p>
        </div>

<div className="max-w-4xl mx-auto">
          <Card className="border-0 shadow-2xl bg-white/80 backdrop-blur-sm">
            <CardContent className="p-8">
              <Accordion type="single" collapsible className="w-full space-y-4">
                {faqs.map((faq, index) => (
                  <AccordionItem
                    key={index}
                    value={`item-${index}`}
                    className="border border-slate-200 rounded-xl px-6"
                  >
                    <AccordionTrigger className="text-left text-slate-900 hover:text-orange-600 py-6 text-lg font-semibold">
                      {faq.question}
                    </AccordionTrigger>
                    <AccordionContent className="text-slate-600 pb-6 text-base leading-relaxed">
                      {faq.answer}
                    </AccordionContent>
                  </AccordionItem>
                ))}
              </Accordion>
            </CardContent>
          </Card>
        </div>
      </section>

{/* Support Options 
      <section className="container mx-auto px-4 py-20">
        <div className="text-center mb-16">
          <Badge className="mb-6 bg-gradient-to-r from-purple-100 to-purple-200 text-purple-800 hover:from-purple-200 hover:to-purple-300 px-4 py-2 text-sm font-medium">
            Direct Support
          </Badge>
          <h2 className="text-3xl md:text-5xl font-bold text-slate-900 mb-6">Need Personal Assistance?</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto leading-relaxed">
            Our expert support team is ready to help you with personalized assistance through multiple channels.
          </p>
        </div>

<div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
          {supportOptions.map((option, index) => (
            <Card
              key={index}
              className="border-0 shadow-2xl hover:shadow-3xl transition-all duration-500 hover:-translate-y-2 bg-gradient-to-br from-white to-slate-50"
            >
              <CardContent className="p-8 text-center">
                <div
                  className={`h-20 w-20 rounded-2xl ${option.bgColor} flex items-center justify-center mx-auto mb-6 shadow-lg`}
                >
                  <option.icon className={`h-10 w-10 ${option.color}`} />
                </div>
                <h3 className="text-2xl font-bold text-slate-900 mb-4">{option.title}</h3>
                <p className="text-slate-600 mb-8 leading-relaxed text-lg">{option.description}</p>
                <Button
                  className="w-full bg-gradient-to-r from-orange-600 to-orange-500 hover:from-orange-700 hover:to-orange-600 text-white py-3 text-lg font-semibold rounded-xl shadow-lg hover:shadow-xl transition-all duration-300"
                  asChild
                >
                  <a href={option.link}>
                    Get Support Now
                    <ArrowRight className="ml-2 h-5 w-5" />
                  </a>
                </Button>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>
      */}

{/* Still Need Support Contact Section */}
      <section className="container mx-auto px-4 py-20 bg-gradient-to-br from-orange-50 via-slate-50 to-blue-50">
        <div className="text-center mb-16">
          <Badge className="mb-6 bg-gradient-to-r from-orange-100 to-red-200 text-orange-800 hover:from-orange-200 hover:to-red-300 px-4 py-2 text-sm font-medium">
            Contact Information
          </Badge>
          <h2 className="text-3xl md:text-5xl font-bold text-slate-900 mb-6">Still Need Help?</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto leading-relaxed">
            Our support team is standing by to assist you with any questions or technical issues you may encounter.
          </p>
        </div>

<div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto mb-12">
          <Card className="border-0 shadow-2xl hover:shadow-3xl transition-all duration-500 bg-gradient-to-br from-white to-orange-50">
            <CardContent className="p-8 text-center">
              <div className="h-16 w-16 rounded-2xl bg-gradient-to-br from-orange-100 to-orange-200 flex items-center justify-center text-orange-600 mx-auto mb-6 shadow-lg">
                <Phone className="h-8 w-8" />
              </div>
              <h3 className="text-2xl font-bold text-slate-900 mb-3">Call Our Support Team</h3>
              <p className="text-2xl font-bold text-orange-600 mb-2">+91 76007 67857</p>
              <p className="text-slate-500 text-lg">Monday - Saturday</p>
              <p className="text-slate-500 text-lg">9:00 AM - 6:00 PM IST</p>
            </CardContent>
          </Card>

<Card className="border-0 shadow-2xl hover:shadow-3xl transition-all duration-500 bg-gradient-to-br from-white to-blue-50">
            <CardContent className="p-8 text-center">
              <div className="h-16 w-16 rounded-2xl bg-gradient-to-br from-blue-100 to-blue-200 flex items-center justify-center text-blue-600 mx-auto mb-6 shadow-lg">
                <Mail className="h-8 w-8" />
              </div>
              <h3 className="text-2xl font-bold text-slate-900 mb-3">Email Support</h3>
              <p className="text-xl font-bold text-blue-600 mb-2">support@nuvatetechnology.com</p>
              <p className="text-slate-500 text-lg">Response within 24 hours</p>
              <p className="text-slate-500 text-lg">Detailed technical assistance</p>
            </CardContent>
          </Card>
        </div>

<div className="text-center mt-12">
        <Link href='/contact'>
          <Button size="lg" className="bg-orange-600 hover:bg-orange-700">
            Contact Us
            <ArrowRight className="ml-2 h-4 w-4" />
          </Button>
        </Link>
        </div>
      </section>

{/* Enhanced Footer */}
      <EnhancedFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/support/training/page.tsx" isMerged="true"
import Link from "next/link"
import { ArrowLeft, ArrowRight, Calendar, Clock, Users, CheckCircle, Monitor, MapPin, Phone, Mail } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import EnhancedHeader from "../../../components/enhanced-header"
import EnhancedFooter from "../../../components/enhanced-footer"

export default function TrainingPage() {
  const trainingPrograms = [
    {
      title: "StitchIT Mastery Program",
      duration: "3 Days",
      participants: "Up to 15",
      level: "Comprehensive",
      description: "Complete training program covering all aspects of StitchIT implementation and usage.",
      modules: [
        "System Overview & Navigation",
        "Production Planning & Scheduling",
        "Inventory Management",
        "Quality Control Processes",
        "Financial Reporting & Analytics",
        "User Management & Permissions",
      ],
      price: "₹45,000",
      popular: true,
    },
    {
      title: "WashIT Operations Training",
      duration: "2 Days",
      participants: "Up to 12",
      level: "Essential",
      description: "Focused training on WashIT operations, from order processing to delivery management.",
      modules: [
        "System Setup & Configuration",
        "Order Processing Workflow",
        "Customer Management",
        "Route Optimization",
        "Billing & Payment Processing",
        "Reporting & Analytics",
      ],
      price: "₹32,000",
      popular: false,
    },
    {
      title: "DigitAil E-commerce Bootcamp",
      duration: "2 Days",
      participants: "Up to 10",
      level: "Comprehensive",
      description: "Intensive training on maximizing your e-commerce potential with DigitAil.",
      modules: [
        "Store Setup & Configuration",
        "Product Catalog Management",
        "Order Fulfillment Process",
        "Marketing & Promotions",
        "Customer Service Tools",
        "Performance Analytics",
      ],
      price: "₹38,000",
      popular: false,
    },
    {
      title: "HR TECH Complete Course",
      duration: "2 Days",
      participants: "Up to 15",
      level: "Comprehensive",
      description: "Complete HR management training covering all HR TECH functionalities.",
      modules: [
        "Employee Onboarding Process",
        "Payroll Processing & Compliance",
        "Performance Management",
        "Leave & Attendance Tracking",
        "Statutory Compliance",
        "HR Analytics & Reporting",
      ],
      price: "₹35,000",
      popular: false,
    },
  ]

const trainingFormats = [
    {
      title: "On-Site Training",
      icon: MapPin,
      description: "Our trainers come to your location for personalized, hands-on training.",
      benefits: [
        "Customized to your specific workflows",
        "Train multiple team members simultaneously",
        "Use your actual data and scenarios",
        "Immediate implementation support",
      ],
      duration: "1-3 days",
      capacity: "Up to 20 participants",
    },
    {
      title: "Virtual Training",
      icon: Monitor,
      description: "Interactive online training sessions conducted via video conferencing.",
      benefits: [
        "Cost-effective solution",
        "Flexible scheduling options",
        "Screen sharing and live demonstrations",
        "Recorded sessions for future reference",
      ],
      duration: "2-4 hours per session",
      capacity: "Up to 15 participants",
    },
    {
      title: "Hybrid Training",
      icon: Users,
      description: "Combination of virtual and on-site training for optimal learning experience.",
      benefits: [
        "Best of both training formats",
        "Initial virtual overview sessions",
        "On-site implementation support",
        "Follow-up virtual Q&A sessions",
      ],
      duration: "Flexible schedule",
      capacity: "Customizable",
    },
  ]

const upcomingSchedule = [
    {
      program: "StitchIT Mastery Program",
      date: "March 15-17, 2024",
      location: "Mumbai",
      seats: "8 seats left",
      type: "On-Site",
    },
    {
      program: "WashIT Operations Training",
      date: "March 22-23, 2024",
      location: "Virtual",
      seats: "12 seats left",
      type: "Virtual",
    },
    {
      program: "DigitAil E-commerce Bootcamp",
      date: "March 29-30, 2024",
      location: "Bangalore",
      seats: "6 seats left",
      type: "On-Site",
    },
    {
      program: "HR TECH Complete Course",
      date: "April 5-6, 2024",
      location: "Virtual",
      seats: "15 seats left",
      type: "Virtual",
    },
  ]

return (
    <div className="min-h-screen bg-gradient-to-br from-white to-slate-50">
      <EnhancedHeader />

<div className="text-center max-w-4xl mx-auto">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">Training Programs</Badge>
          <h1 className="text-4xl md:text-6xl font-bold text-slate-900 mb-6">
            Expert Training for
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-orange-500">
              {" "}
              Maximum Success
            </span>
          </h1>
          <p className="text-xl text-slate-600 mb-8 leading-relaxed">
            Comprehensive training programs designed to help your team master our solutions and achieve optimal results.
          </p>
        </div>
      </section>

{/* Training Programs */}
      <section className="container mx-auto px-4 py-16">
        <div className="text-center mb-16">
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Training Programs</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            Choose from our comprehensive training programs tailored to each of our solutions.
          </p>
        </div>

<div className="grid lg:grid-cols-2 gap-8">
          {trainingPrograms.map((program, index) => (
            <Card
              key={index}
              className={`border-0 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2 relative ${
                program.popular ? "border-t-4 border-t-orange-600" : ""
              }`}
            >
              {program.popular && (
                <div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                  <Badge className="bg-orange-600 text-white hover:bg-orange-700 px-4 py-1">Most Popular</Badge>
                </div>
              )}
              <CardHeader className="pb-4">
                <div className="flex items-start justify-between mb-4">
                  <div>
                    <CardTitle className="text-2xl font-bold text-slate-900 mb-2">{program.title}</CardTitle>
                    <p className="text-slate-600">{program.description}</p>
                  </div>
                  <div className="text-right">
                    <div className="text-2xl font-bold text-orange-600">{program.price}</div>
                    <div className="text-sm text-slate-500">per session</div>
                  </div>
                </div>

<div className="flex flex-wrap gap-4 text-sm text-slate-600">
                  <div className="flex items-center">
                    <Clock className="h-4 w-4 mr-1" />
                    {program.duration}
                  </div>
                  <div className="flex items-center">
                    <Users className="h-4 w-4 mr-1" />
                    {program.participants}
                  </div>
                  <Badge variant="outline" className="border-orange-200 text-orange-700">
                    {program.level}
                  </Badge>
                </div>
              </CardHeader>

<CardContent className="space-y-6">
                <div>
                  <h4 className="font-semibold text-slate-900 mb-3">Training Modules:</h4>
                  <div className="space-y-2">
                    {program.modules.map((module, moduleIndex) => (
                      <div key={moduleIndex} className="flex items-center space-x-3">
                        <CheckCircle className="h-4 w-4 text-green-500 flex-shrink-0" />
                        <span className="text-slate-600 text-sm">{module}</span>
                      </div>
                    ))}
                  </div>
                </div>

<div className="flex gap-3">
                  <Button
                    className={`flex-1 ${
                      program.popular
                        ? "bg-orange-600 hover:bg-orange-700 text-white"
                        : "bg-slate-100 hover:bg-slate-200 text-slate-800"
                    }`}
                  >
                    Book Training
                  </Button>
                  <Button variant="outline" className="border-orange-200 text-orange-700 hover:bg-orange-50">
                    Learn More
                  </Button>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

{/* Training Formats */}
      <section className="container mx-auto px-4 py-16 bg-white">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">Training Formats</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Choose Your Preferred Format</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            We offer flexible training formats to suit your team's needs and preferences.
          </p>
        </div>

<div className="grid md:grid-cols-3 gap-8">
          {trainingFormats.map((format, index) => (
            <Card key={index} className="border border-slate-200 hover:border-orange-200 transition-colors">
              <CardHeader className="text-center pb-4">
                <div className="h-16 w-16 rounded-full bg-orange-100 flex items-center justify-center mx-auto mb-4">
                  <format.icon className="h-8 w-8 text-orange-600" />
                </div>
                <CardTitle className="text-xl font-bold text-slate-900">{format.title}</CardTitle>
                <p className="text-slate-600">{format.description}</p>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="space-y-3">
                  {format.benefits.map((benefit, benefitIndex) => (
                    <div key={benefitIndex} className="flex items-start space-x-3">
                      <CheckCircle className="h-4 w-4 text-green-500 flex-shrink-0 mt-0.5" />
                      <span className="text-slate-600 text-sm">{benefit}</span>
                    </div>
                  ))}
                </div>

<div className="border-t pt-4 space-y-2">
                  <div className="flex justify-between text-sm">
                    <span className="text-slate-500">Duration:</span>
                    <span className="text-slate-900 font-medium">{format.duration}</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-slate-500">Capacity:</span>
                    <span className="text-slate-900 font-medium">{format.capacity}</span>
                  </div>
                </div>

<Button className="w-full bg-orange-600 hover:bg-orange-700">
                  Select Format
                  <ArrowRight className="ml-2 h-4 w-4" />
                </Button>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

{/* Upcoming Schedule */}
      <section className="container mx-auto px-4 py-16">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">Upcoming Sessions</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Scheduled Training Sessions</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            Join our upcoming training sessions or request a custom schedule for your team.
          </p>
        </div>

<div className="grid md:grid-cols-2 gap-6 mb-12">
          {upcomingSchedule.map((session, index) => (
            <Card key={index} className="border border-slate-200 hover:border-orange-200 transition-colors">
              <CardContent className="p-6">
                <div className="flex items-start justify-between mb-4">
                  <div>
                    <h3 className="text-lg font-semibold text-slate-900 mb-2">{session.program}</h3>
                    <div className="space-y-1 text-sm text-slate-600">
                      <div className="flex items-center">
                        <Calendar className="h-4 w-4 mr-2" />
                        {session.date}
                      </div>
                      <div className="flex items-center">
                        <MapPin className="h-4 w-4 mr-2" />
                        {session.location}
                      </div>
                    </div>
                  </div>
                  <div className="text-right">
                    <Badge
                      variant="outline"
                      className={`mb-2 ${
                        session.type === "Virtual" ? "border-blue-200 text-blue-700" : "border-green-200 text-green-700"
                      }`}
                    >
                      {session.type}
                    </Badge>
                    <div className="text-sm text-slate-600">{session.seats}</div>
                  </div>
                </div>
                <Button className="w-full bg-orange-600 hover:bg-orange-700">
                  Register Now
                  <ArrowRight className="ml-2 h-4 w-4" />
                </Button>
              </CardContent>
            </Card>
          ))}
        </div>

<div className="text-center">
          <Button size="lg" variant="outline" className="border-orange-200 text-orange-700 hover:bg-orange-50">
            Request Custom Training Schedule
          </Button>
        </div>
      </section>

{/* Contact for Training */}
      <section className="container mx-auto px-4 py-16 bg-gradient-to-r from-orange-600 to-orange-500">
        <div className="text-center text-white">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">Ready to Get Started?</h2>
          <p className="text-xl mb-8 opacity-90 max-w-2xl mx-auto">
            Contact our training team to discuss your specific needs and schedule a customized training program.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
            <Button size="lg" variant="secondary" className="bg-white text-orange-600 hover:bg-slate-100">
              <Phone className="h-5 w-5 mr-2" />
              Call +91 76007 67857
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="border-white text-white hover:bg-white hover:text-orange-600"
            >
              <Mail className="h-5 w-5 mr-2" />
              Email Training Team
            </Button>
          </div>
          <p className="text-sm opacity-75">Training sessions available Monday - Saturday, 9:00 AM - 6:00 PM</p>
        </div>
      </section>

<EnhancedFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/support/user-guides/page.tsx" isMerged="true"
import Link from "next/link"
import {
  ArrowLeft,
  ArrowRight,
  Download,
  Play,
  FileText,
  Users,
  Settings,
  BarChart3,
  Package,
  Shirt,
  Droplets,
  ShoppingCart,
  UserCheck,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import EnhancedHeader from "../../../components/enhanced-header"
import EnhancedFooter from "../../../components/enhanced-footer"

export default function UserGuidesPage() {
  const productGuides = [
    {
      product: "StitchIT",
      icon: Shirt,
      color: "text-blue-600",
      bgColor: "bg-blue-100",
      description: "Complete ERP solution for garment manufacturing",
      guides: [
        {
          title: "Getting Started with StitchIT",
          description: "Initial setup and basic navigation",
          type: "PDF Guide",
          duration: "15 min read",
          level: "Beginner",
        },
        {
          title: "Production Planning & Scheduling",
          description: "Master production planning workflows",
          type: "Video Tutorial",
          duration: "25 min",
          level: "Intermediate",
        },
        {
          title: "Inventory Management",
          description: "Track raw materials and finished goods",
          type: "PDF Guide",
          duration: "20 min read",
          level: "Intermediate",
        },
        {
          title: "Quality Control Processes",
          description: "Implement quality checks and standards",
          type: "Video Tutorial",
          duration: "18 min",
          level: "Advanced",
        },
        {
          title: "Financial Reporting",
          description: "Generate comprehensive financial reports",
          type: "PDF Guide",
          duration: "12 min read",
          level: "Intermediate",
        },
      ],
    },
    {
      product: "WashIT",
      icon: Droplets,
      color: "text-cyan-600",
      bgColor: "bg-cyan-100",
      description: "Comprehensive laundry management system",
      guides: [
        {
          title: "WashIT Setup Guide",
          description: "Initial configuration and setup",
          type: "PDF Guide",
          duration: "10 min read",
          level: "Beginner",
        },
        {
          title: "Order Processing Workflow",
          description: "Handle customer orders efficiently",
          type: "Video Tutorial",
          duration: "20 min",
          level: "Beginner",
        },
        {
          title: "Route Optimization",
          description: "Optimize delivery and pickup routes",
          type: "PDF Guide",
          duration: "15 min read",
          level: "Intermediate",
        },
        {
          title: "Customer Management",
          description: "Manage customer profiles and preferences",
          type: "Video Tutorial",
          duration: "12 min",
          level: "Beginner",
        },
        {
          title: "Billing & Payments",
          description: "Process payments and generate invoices",
          type: "PDF Guide",
          duration: "8 min read",
          level: "Intermediate",
        },
      ],
    },
    {
      product: "DigitAil",
      icon: ShoppingCart,
      color: "text-purple-600",
      bgColor: "bg-purple-100",
      description: "E-commerce and retail management platform",
      guides: [
        {
          title: "DigitAil Quick Start",
          description: "Set up your online store quickly",
          type: "PDF Guide",
          duration: "12 min read",
          level: "Beginner",
        },
        {
          title: "Product Catalog Management",
          description: "Organize and manage your product listings",
          type: "Video Tutorial",
          duration: "22 min",
          level: "Beginner",
        },
        {
          title: "Order Fulfillment",
          description: "Process and fulfill customer orders",
          type: "PDF Guide",
          duration: "18 min read",
          level: "Intermediate",
        },
        {
          title: "Marketing & Promotions",
          description: "Create campaigns and promotional offers",
          type: "Video Tutorial",
          duration: "16 min",
          level: "Intermediate",
        },
        {
          title: "Analytics & Reporting",
          description: "Track performance and generate insights",
          type: "PDF Guide",
          duration: "14 min read",
          level: "Advanced",
        },
      ],
    },
    {
      product: "HR TECH",
      icon: UserCheck,
      color: "text-green-600",
      bgColor: "bg-green-100",
      description: "Human resource management system",
      guides: [
        {
          title: "HR TECH Fundamentals",
          description: "Basic HR management concepts and setup",
          type: "PDF Guide",
          duration: "15 min read",
          level: "Beginner",
        },
        {
          title: "Employee Onboarding",
          description: "Streamline new employee processes",
          type: "Video Tutorial",
          duration: "20 min",
          level: "Beginner",
        },
        {
          title: "Payroll Processing",
          description: "Manage payroll calculations and disbursements",
          type: "PDF Guide",
          duration: "25 min read",
          level: "Intermediate",
        },
        {
          title: "Performance Management",
          description: "Track and evaluate employee performance",
          type: "Video Tutorial",
          duration: "18 min",
          level: "Intermediate",
        },
        {
          title: "Compliance & Reporting",
          description: "Ensure HR compliance and generate reports",
          type: "PDF Guide",
          duration: "20 min read",
          level: "Advanced",
        },
      ],
    },
  ]

const generalGuides = [
    {
      title: "System Administration",
      description: "User management, permissions, and system settings",
      icon: Settings,
      guides: 8,
    },
    {
      title: "Data Import/Export",
      description: "Import existing data and export reports",
      icon: Package,
      guides: 5,
    },
    {
      title: "Training Materials",
      description: "Comprehensive training resources for your team",
      icon: Users,
      guides: 12,
    },
    {
      title: "Best Practices",
      description: "Industry best practices and optimization tips",
      icon: BarChart3,
      guides: 15,
    },
  ]

return (
    <div className="min-h-screen bg-gradient-to-br from-white to-slate-50">
      <EnhancedHeader />

<div className="text-center max-w-4xl mx-auto">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">User Guides</Badge>
          <h1 className="text-4xl md:text-6xl font-bold text-slate-900 mb-6">
            Master Our
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-orange-500">
              {" "}
              Solutions
            </span>
          </h1>
          <p className="text-xl text-slate-600 mb-8 leading-relaxed">
            Comprehensive guides and tutorials to help you get the most out of our products and services.
          </p>
        </div>
      </section>

{/* Product Guides */}
      <section className="container mx-auto px-4 py-16">
        <Tabs defaultValue="stitchit" className="w-full">
          <div className="text-center mb-8">
            <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Product-Specific Guides</h2>
            <p className="text-xl text-slate-600 max-w-3xl mx-auto mb-8">
              Choose your product to access tailored guides and tutorials.
            </p>
          </div>

<TabsList className="grid grid-cols-2 lg:grid-cols-4 mb-12 h-auto p-1">
            {productGuides.map((product) => (
              <TabsTrigger
                key={product.product.toLowerCase().replace(" ", "")}
                value={product.product.toLowerCase().replace(" ", "")}
                className="flex flex-col items-center p-4 h-auto"
              >
                <product.icon className={`h-6 w-6 ${product.color} mb-2`} />
                <span className="font-semibold">{product.product}</span>
              </TabsTrigger>
            ))}
          </TabsList>

{productGuides.map((product) => (
            <TabsContent
              key={product.product.toLowerCase().replace(" ", "")}
              value={product.product.toLowerCase().replace(" ", "")}
              className="mt-0"
            >
              <div className="mb-8">
                <div className="flex items-center mb-4">
                  <div className={`h-12 w-12 rounded-full ${product.bgColor} flex items-center justify-center mr-4`}>
                    <product.icon className={`h-6 w-6 ${product.color}`} />
                  </div>
                  <div>
                    <h3 className="text-2xl font-bold text-slate-900">{product.product}</h3>
                    <p className="text-slate-600">{product.description}</p>
                  </div>
                </div>
              </div>

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                {product.guides.map((guide, index) => (
                  <Card key={index} className="border border-slate-200 hover:border-orange-200 transition-colors">
                    <CardHeader className="pb-4">
                      <div className="flex items-start justify-between mb-2">
                        <Badge
                          variant="outline"
                          className={`${
                            guide.level === "Beginner"
                              ? "border-green-200 text-green-700"
                              : guide.level === "Intermediate"
                                ? "border-orange-200 text-orange-700"
                                : "border-red-200 text-red-700"
                          }`}
                        >
                          {guide.level}
                        </Badge>
                        <div className="flex items-center text-slate-500 text-sm">
                          {guide.type === "PDF Guide" ? (
                            <FileText className="h-4 w-4 mr-1" />
                          ) : (
                            <Play className="h-4 w-4 mr-1" />
                          )}
                          {guide.type}
                        </div>
                      </div>
                      <CardTitle className="text-lg">{guide.title}</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <p className="text-slate-600 mb-4">{guide.description}</p>
                      <div className="flex items-center justify-between">
                        <span className="text-sm text-slate-500">{guide.duration}</span>
                        <Button size="sm" className="bg-orange-600 hover:bg-orange-700">
                          {guide.type === "PDF Guide" ? (
                            <>
                              <Download className="h-4 w-4 mr-2" />
                              Download
                            </>
                          ) : (
                            <>
                              <Play className="h-4 w-4 mr-2" />
                              Watch
                            </>
                          )}
                        </Button>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </TabsContent>
          ))}
        </Tabs>
      </section>

{/* General Guides */}
      <section className="container mx-auto px-4 py-16 bg-white">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">General Resources</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Additional Resources</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            Cross-platform guides and resources to help you maximize your productivity.
          </p>
        </div>

<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
          {generalGuides.map((category, index) => (
            <Card
              key={index}
              className="border-0 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2"
            >
              <CardContent className="p-6 text-center">
                <div className="h-16 w-16 rounded-full bg-orange-100 flex items-center justify-center mx-auto mb-6">
                  <category.icon className="h-8 w-8 text-orange-600" />
                </div>
                <h3 className="text-xl font-bold text-slate-900 mb-3">{category.title}</h3>
                <p className="text-slate-600 mb-4">{category.description}</p>
                <div className="flex items-center justify-between mb-6">
                  <span className="text-sm text-slate-500">{category.guides} guides</span>
                  <Badge variant="outline" className="border-orange-200 text-orange-700">
                    Available
                  </Badge>
                </div>
                <Button className="w-full bg-orange-600 hover:bg-orange-700">
                  Browse Guides
                  <ArrowRight className="ml-2 h-4 w-4" />
                </Button>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

{/* Quick Access */}
      <section className="container mx-auto px-4 py-16">
        <div className="bg-gradient-to-r from-orange-600 to-orange-500 rounded-2xl p-8 md:p-12 text-center text-white">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">Need Personalized Training?</h2>
          <p className="text-xl mb-8 opacity-90 max-w-2xl mx-auto">
            Our team can provide customized training sessions tailored to your specific business needs and workflows.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button size="lg" variant="secondary" className="bg-white text-orange-600 hover:bg-slate-100">
              Schedule Training Session
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="border-white text-white hover:bg-white hover:text-orange-600"
            >
              Contact Support Team
            </Button>
          </div>
        </div>
      </section>

<EnhancedFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/team/page.tsx" isMerged="true"
import Image from "next/image"
import { Mail, Linkedin, Twitter, ArrowRight } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import EnhancedHeader from "../../components/enhanced-header"
import EnhancedFooter from "../../components/enhanced-footer"
import Link from "next/link"

export default function TeamPage() {
  const executiveTeam = [
    {
      name: "Karan Patel",
      position: "Founder & CEO",
      bio: "With over 15 years of experience in software development and business management, Rajesh founded Nuvatech with a vision to transform businesses through technology.",
      image: "https://nuvatetechnology.com/nuvate-image/logo/karanPatel.png",
      linkedin: "https://www.linkedin.com/in/karan-patel-0b8205144/",
      twitter: "#",
      email: "karanpatel@gmail.com",
    },
    {
      name: "Priya Sharma",
      position: "Chief Technology Officer",
      bio: "Priya leads our technology initiatives with her extensive background in enterprise software architecture and cloud infrastructure.",
      image: "/placeholder.svg?height=400&width=400&text=PS",
      linkedin: "#",
      twitter: "#",
      email: "priya@nuvatetechnology.com",
    },
    {
      name: "Amit Kumar",
      position: "Chief Operating Officer",
      bio: "Amit oversees all operational aspects of Nuvatech, ensuring efficient delivery of our solutions and exceptional customer service.",
      image: "/placeholder.svg?height=400&width=400&text=AK",
      linkedin: "#",
      twitter: "#",
      email: "amit@nuvatetechnology.com",
    },
  ]

const departmentHeads = [
    {
      name: "Neha Reddy",
      position: "Head of Product Development",
      bio: "Neha leads our product development team, focusing on creating innovative solutions that address our clients' unique challenges.",
      image: "/placeholder.svg?height=300&width=300&text=NR",
      linkedin: "#",
    },
    {
      name: "Vikram Singh",
      position: "Head of Customer Success",
      bio: "Vikram ensures our clients achieve their business objectives through effective implementation and support of our solutions.",
      image: "/placeholder.svg?height=300&width=300&text=VS",
      linkedin: "#",
    },
    {
      name: "Ananya Desai",
      position: "Head of Marketing",
      bio: "Ananya drives our marketing initiatives, showcasing how our solutions can transform businesses across different industries.",
      image: "/placeholder.svg?height=300&width=300&text=AD",
      linkedin: "#",
    },
    {
      name: "Rahul Mehta",
      position: "Head of Sales",
      bio: "Rahul leads our sales team, helping businesses identify the right solutions to address their specific challenges.",
      image: "/placeholder.svg?height=300&width=300&text=RM",
      linkedin: "#",
    },
  ]

const teamValues = [
    {
      title: "Collaboration",
      description: "We believe in the power of teamwork and collaboration to achieve exceptional results.",
    },
    {
      title: "Innovation",
      description: "We encourage creative thinking and innovative approaches to solving complex problems.",
    },
    {
      title: "Excellence",
      description: "We strive for excellence in everything we do, from code quality to customer service.",
    },
    {
      title: "Growth",
      description: "We invest in our team's professional development and personal growth.",
    },
  ]

return (
    <div className="min-h-screen bg-gradient-to-br from-white to-slate-50">
      {/* Enhanced Header */}
      <EnhancedHeader />

{/* Hero Section */}
      <section className="container mx-auto px-4 py-8 md:py-8 bg-white">
        <div className="text-center max-w-4xl mx-auto">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">Our Team</Badge>
          <h1 className="text-4xl md:text-6xl font-bold text-slate-900 mb-6">
            Meet the People
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-orange-500">
              {" "}
              Behind Nuvate
            </span>
          </h1>
          <p className="text-xl text-slate-600 mb-8 leading-relaxed">
            Our talented team of professionals is dedicated to creating innovative solutions that transform businesses
            and drive growth.
          </p>
        </div>
      </section>

{/* Executive Team */}
      <section className="container mx-auto px-4 py-8 md:py-8 bg-white">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">Leadership</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Executive Team</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            Meet the visionaries leading Nuvatech towards innovation and excellence.
          </p>
        </div>

<div className="grid md:grid-cols-3 gap-8">
          {executiveTeam.map((member, index) => (
            <Card
              key={index}
              className="border-0 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2 overflow-hidden"
            >
              <div className="aspect-square relative">
                <Image src={member.image || "/placeholder.svg"} alt={member.name} fill className="object-cover" />
              </div>
              <CardContent className="p-6 space-y-4">
                <div>
                  <h3 className="text-2xl font-bold text-slate-900">{member.name}</h3>
                  <p className="text-orange-600 font-medium">{member.position}</p>
                </div>
                <p className="text-slate-600">{member.bio}</p>
                <div className="flex space-x-3 pt-4">
                  <a
                    href={`mailto:${member.email}`}
                    className="h-10 w-10 rounded-full bg-slate-100 flex items-center justify-center text-slate-600 hover:bg-orange-100 hover:text-orange-600 transition-colors"
                  >
                    <Mail className="h-5 w-5" />
                  </a>
                  <a
                    href={member.linkedin}
                    className="h-10 w-10 rounded-full bg-slate-100 flex items-center justify-center text-slate-600 hover:bg-orange-100 hover:text-orange-600 transition-colors"
                  >
                    <Linkedin className="h-5 w-5" />
                  </a>
                  <a
                    href={member.twitter}
                    className="h-10 w-10 rounded-full bg-slate-100 flex items-center justify-center text-slate-600 hover:bg-orange-100 hover:text-orange-600 transition-colors"
                  >
                    <Twitter className="h-5 w-5" />
                  </a>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

{/* Department Heads 
      <section className="container mx-auto px-4 py-16 md:py-24">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">Department Leaders</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Department Heads</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            Our department leaders bring expertise and passion to drive excellence in their respective areas.
          </p>
        </div>

<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
          {departmentHeads.map((member, index) => (
            <Card
              key={index}
              className="border-0 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2 overflow-hidden"
            >
              <div className="aspect-square relative">
                <Image src={member.image || "/placeholder.svg"} alt={member.name} fill className="object-cover" />
              </div>
              <CardContent className="p-6 space-y-3">
                <div>
                  <h3 className="text-xl font-bold text-slate-900">{member.name}</h3>
                  <p className="text-orange-600 font-medium text-sm">{member.position}</p>
                </div>
                <p className="text-slate-600 text-sm">{member.bio}</p>
                <div className="pt-2">
                  <a
                    href={member.linkedin}
                    className="inline-flex items-center text-sm text-orange-600 hover:text-orange-700"
                  >
                    <Linkedin className="h-4 w-4 mr-1" /> LinkedIn Profile
                  </a>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>
      */}

{/* Team Culture */}
      <section className="container mx-auto px-4 py-16 md:py-24 bg-gradient-to-br from-slate-50 to-slate-100">
        <div className="grid md:grid-cols-2 gap-12 items-center">
          <div>
            <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">Our Culture</Badge>
            <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-6">What Makes Us Different</h2>
            <p className="text-lg text-slate-600 mb-8 leading-relaxed">
              At Nuvatech, we foster a culture of innovation, collaboration, and continuous learning. We believe that
              our team is our greatest asset, and we invest in their growth and well-being.
            </p>

<div className="grid grid-cols-2 gap-6">
              {teamValues.map((value, index) => (
                <div key={index} className="bg-white p-4 rounded-lg shadow-md">
                  <h3 className="text-lg font-semibold text-slate-900 mb-2">{value.title}</h3>
                  <p className="text-slate-600 text-sm">{value.description}</p>
                </div>
              ))}
            </div>
          </div>

{/* Join Our Team */}
      <section className="container mx-auto px-4 py-16 md:py-24">
  <div className="max-w-[70%] mx-auto bg-gradient-to-r from-orange-600 to-orange-500 rounded-2xl p-8 md:p-12 text-white text-center">
    <h2 className="text-3xl md:text-4xl font-bold mb-4">Join Our Team</h2>
    <p className="text-xl text-orange-100 mb-8 max-w-2xl mx-auto">
      We're always looking for talented individuals who are passionate about technology and innovation. Explore
      our current openings and become part of our journey.
    </p>
    <Link href='/careers'>
      <Button size="lg" className="bg-white text-orange-600 hover:bg-orange-50">
        View Career Opportunities at Nuvate
        <ArrowRight className="ml-2 h-4 w-4" />
      </Button>
    </Link>
  </div>
</section>

{/* Enhanced Footer */}
      <EnhancedFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/washit/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Image from "next/image"
import {
  ArrowRight,
  CheckCircle,
  Users,
  Zap,
  Shield,
  Target,
  ChevronRight,
  Route,
  Receipt,
  UserSearch,
  Boxes,
  BarChart,
  Calculator,
  Smartphone,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import EnhancedHeader from "../../components/enhanced-header"
import EnhancedFooter from "../../components/enhanced-footer"

import Link from "next/link"

import { FaDownload } from "react-icons/fa"

export default function WashITPage() {
  const BASE_URL = "https://nuvatetechnology.com/";

const repeatedLogos = [...logos, ...logos] // Duplicate for seamless loop

const features = [
    {
      title: "Customer Management",
      description: "Comprehensive customer database with detailed profiles, service history, and preferences.",
      icon: "users",
    },
    {
      title: "Route Optimization",
      description: "Intelligent route planning to minimize travel time and maximize delivery efficiency.",
      icon: "route",
    },
    {
      title: "Automated Billing",
      description: "Streamlined billing process with customizable pricing models and automated invoicing.",
      icon: "calculator",
    },
    {
      title: "Inventory Control",
      description: "Real-time tracking of inventory levels, usage patterns, and reorder notifications.",
      icon: "boxes",
    },
    {
      title: "Mobile App",
      description: "Dedicated mobile applications for drivers, customers, and administrators for on-the-go management.",
      icon: "smartphone",
    },
    {
      title: "Reports & Analytics",
      description: "Comprehensive reporting and analytics to track performance and identify growth opportunities.",
      icon: "barChart",
    },
  ]

const challenges = [
    {
      title: "Inefficient Routes",
      description: "Optimize delivery routes to reduce fuel costs and increase the number of deliveries per day.",
      icon: "route",
    },
    {
      title: "Billing Errors",
      description: "Eliminate manual billing errors with automated pricing calculations and invoice generation.",
      icon: "receipt",
    },
    {
      title: "Customer Tracking",
      description: "Keep track of customer preferences, service history, and special requirements with ease.",
      icon: "userSearch",
    },
    {
      title: "Inventory Management",
      description: "Maintain optimal inventory levels of cleaning supplies, packaging materials, and other essentials.",
      icon: "boxes",
    },
  ]

const [hoveredCard, setHoveredCard] = useState<number | null>(null)

return (
    <div className="min-h-screen bg-gradient-to-br from-white to-slate-50">
      {/* Enhanced Header */}
      <EnhancedHeader />

<FaDownload className="mr-2" />Download Broucher
              </Button>
            </div>
          </div>
          <div className="relative">
            <iframe
              width="746"
              height="420"
              src="https://www.youtube.com/embed/SxB6dovVe9U"
              title="INDUSTRIAL LAUNDRY ERP SYSTEM - WASHIT"
              frameBorder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;web-share"
              referrerPolicy="strict-origin-when-cross-origin"
              allowFullScreen
              className="rounded-xl shadow-xl w-full"
            ></iframe>
          </div>
        </div>
      </section>

{/* Stats Section */}
      <section className="container mx-auto px-4 py-12">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
          {[
            { icon: Users, label: "Reduce Resource Consumption", value: "20%" },
            { icon: Zap, label: "Route Efficiency", value: "40%" },
            { icon: Shield, label: "Billing Accuracy", value: "98%" },
            { icon: Target, label: "ROI Timeline", value: "4 months" },
          ].map((stat, index) => (
            <div key={index} className="space-y-2">
              <stat.icon className="h-8 w-8 mx-auto text-blue-600" />
              <div className="text-2xl font-bold text-slate-900">{stat.value}</div>
              <div className="text-sm text-slate-600">{stat.label}</div>
            </div>
          ))}
        </div>
      </section>

{/* Challenges We Solve */}
      <section className="container mx-auto px-4 py-16 md:py-24 bg-white">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-blue-100 text-blue-700 hover:bg-blue-200">Challenges We Solve</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">
            Common Challenges in Laundry Operations
          </h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            WashIT addresses the key challenges faced by industrial laundry businesses, helping you optimize operations
            and increase profitability.
          </p>
        </div>

<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
          {challenges.map((challenge, index) => (
            <div
              key={index}
              className="bg-white border border-slate-200 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2"
              onMouseEnter={() => setHoveredCard(index)}
              onMouseLeave={() => setHoveredCard(null)}
            >
              <div className="h-16 w-16 rounded-full bg-blue-100 flex items-center justify-center mb-6">
                {challenge.icon === "route" && <Route className="h-8 w-8 text-blue-600" />}
                {challenge.icon === "receipt" && <Receipt className="h-8 w-8 text-blue-600" />}
                {challenge.icon === "userSearch" && <UserSearch className="h-8 w-8 text-blue-600" />}
                {challenge.icon === "boxes" && <Boxes className="h-8 w-8 text-blue-600" />}
              </div>
              <h3 className="text-xl font-bold text-slate-900 mb-3">{challenge.title}</h3>
              <p className="text-slate-600">{challenge.description}</p>
            </div>
          ))}
        </div>
      </section>

{/* Comprehensive Features */}
      <section className="w-full py-16 md:py-24 bg-gradient-to-r from-blue-50 to-blue-100">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <Badge className="mb-4 bg-blue-200 text-blue-700 hover:bg-blue-300">Comprehensive Features</Badge>
            <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Everything You Need in One Solution</h2>
            <p className="text-xl text-slate-600 max-w-3xl mx-auto">
              WashIT offers a complete suite of features designed specifically for industrial laundry businesses.
            </p>
          </div>

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {features.map((feature, index) => (
              <div
                key={index}
                className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2"
                onMouseEnter={() => setHoveredCard(index + challenges.length)}
                onMouseLeave={() => setHoveredCard(null)}
              >
                <div className="h-16 w-16 rounded-full bg-blue-100 flex items-center justify-center mb-6">
                  {feature.icon === "users" && <Users className="h-8 w-8 text-blue-600" />}
                  {feature.icon === "route" && <Route className="h-8 w-8 text-blue-600" />}
                  {feature.icon === "calculator" && <Calculator className="h-8 w-8 text-blue-600" />}
                  {feature.icon === "boxes" && <Boxes className="h-8 w-8 text-blue-600" />}
                  {feature.icon === "smartphone" && <Smartphone className="h-8 w-8 text-blue-600" />}
                  {feature.icon === "barChart" && <BarChart className="h-8 w-8 text-blue-600" />}
                </div>
                <h3 className="text-xl font-bold text-slate-900 mb-3">{feature.title}</h3>
                <p className="text-slate-600">{feature.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

{/* How It Works */}
      <section className="container mx-auto px-4 py-16 md:py-24">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-blue-100 text-blue-700 hover:bg-blue-200">How It Works</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Streamlined Workflow</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            WashIT integrates seamlessly with your existing processes, providing end-to-end visibility and control.
          </p>
        </div>

<div className="relative">
          {/* Timeline Line */}
          <div className="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-blue-200 hidden md:block"></div>

<div className="space-y-12">
            {[
              {
                title: "Customer Registration",
                description:
                  "Easily register new customers with detailed profiles, service preferences, and pricing agreements.",
                image: "/images/WashIT/Customer-Registration.png",
              },
              {
                title: "Order Processing",
                description: "Efficiently process customer orders with automated scheduling and route planning.",
                image: "/images/WashIT/Order-Processing.png",
              },
              {
                title: "Pickup & Delivery",
                description: "Optimize pickup and delivery routes with real-time tracking and customer notifications.",
                image: "/images/WashIT/Pickup-and-Delivery.png",
              },
              // {
              //   title: "Processing & Quality Control",
              //   description:
              //   "Track laundry processing with detailed workflow management and quality control checkpoints.",
              // },
              {
                title: "Billing & Invoicing",
                description:
                "Generate accurate invoices automatically based on service provided and pricing agreements.",
                image: "/images/WashIT/Billing-and-Invoicing.png",
              },
              {
                title: "Reporting & Analytics",
                description:
                "Gain valuable insights into your business performance with comprehensive reporting and analytics.",
                image: "/images/WashIT/Reporting-and-Analytics.png",
              },
            ].map((step, index) => (
              <div key={index} className="relative">
                <div
                  className={`md:flex items-center ${index % 2 === 0 ? "md:flex-row" : "md:flex-row-reverse"} gap-8`}
                >
                  {/* Step Number */}
                  <div className="md:w-1/2 flex md:justify-center relative mb-8 md:mb-0">
                    <div className="md:absolute md:left-1/2 md:transform md:-translate-x-1/2 z-10">
                      <div className="bg-blue-500 text-white text-xl font-bold rounded-full h-12 w-12 flex items-center justify-center shadow-lg">
                        {index + 1}
                      </div>
                    </div>
                  </div>

{/* Content */}
                  <div className="md:w-1/2">
                    <Card className="border-0 shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden">
                      <div className="aspect-video relative">
                        <Image
                          src={step.image && step.image !== "" ? step.image : "/placeholder.svg?text=" + step.title}
                          alt={step.title}
                          fill
                          className="object-cover"
                        />
                      </div>
                      <CardContent className="p-6">
                        <h3 className="text-xl font-bold text-slate-900 mb-2">{step.title}</h3>
                        <p className="text-slate-600">{step.description}</p>
                      </CardContent>
                    </Card>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

{/* Testimonials */}
      <section className="container mx-auto px-4 py-16 md:py-24 bg-white">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-blue-100 text-blue-700 hover:bg-blue-200">Testimonials</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">What Our Clients Say</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            Hear from businesses that have transformed their operations with WashIT.
          </p>
        </div>

<Tabs defaultValue="testimonial1" className="w-full">
          <TabsList className="grid grid-cols-3 max-w-md mx-auto">
            <TabsTrigger value="testimonial1">CleanPro</TabsTrigger>
            <TabsTrigger value="testimonial2">LaundryKing</TabsTrigger>
            <TabsTrigger value="testimonial3">FreshLinens</TabsTrigger>
          </TabsList>
          <div className="mt-8">
            <TabsContent value="testimonial1">
              <div className="bg-slate-50 rounded-xl p-8 shadow-lg max-w-4xl mx-auto">
                <div className="flex flex-col md:flex-row gap-8">
                  <div className="md:w-1/3">
                    <Image
                      src="/placeholder.svg?height=300&width=300&text=Company+Logo"
                      alt="CleanPro Industries"
                      width={200}
                      height={200}
                      className="rounded-lg mx-auto"
                    />
                  </div>
                  <div className="md:w-2/3">
                    <div className="flex mb-4">
                      {[...Array(5)].map((_, i) => (
                        <svg
                          key={i}
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 24 24"
                          fill="currentColor"
                          className="h-5 w-5 text-yellow-400"
                        >
                          <path
                            fillRule="evenodd"
                            d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
                            clipRule="evenodd"
                          />
                        </svg>
                      ))}
                    </div>
                    <blockquote className="text-xl italic text-slate-600 mb-6">
                      "WashIT has revolutionized our laundry operations. The automated billing and route optimization
                      have significantly improved our efficiency and customer satisfaction. Our revenue has increased by
                      40% since implementation."
                    </blockquote>
                    <div>
                      <p className="font-semibold text-slate-900">Priya Patel</p>
                      <p className="text-slate-500">General Manager, CleanPro Industries</p>
                    </div>
                    <div className="mt-6 grid grid-cols-3 gap-4">
                      <div className="bg-white p-3 rounded-lg text-center">
                        <div className="text-2xl font-bold text-blue-600">40%</div>
                        <div className="text-xs text-slate-500">Route Efficiency</div>
                      </div>
                      <div className="bg-white p-3 rounded-lg text-center">
                        <div className="text-2xl font-bold text-blue-600">98%</div>
                        <div className="text-xs text-slate-500">Billing Accuracy</div>
                      </div>
                      <div className="bg-white p-3 rounded-lg text-center">
                        <div className="text-2xl font-bold text-blue-600">30%</div>
                        <div className="text-xs text-slate-500">Cost Reduction</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </TabsContent>
            <TabsContent value="testimonial2">
              <div className="bg-slate-50 rounded-xl p-8 shadow-lg max-w-4xl mx-auto">
                <div className="flex flex-col md:flex-row gap-8">
                  <div className="md:w-1/3">
                    <Image
                      src="/placeholder.svg?height=300&width=300&text=Company+Logo"
                      alt="LaundryKing"
                      width={200}
                      height={200}
                      className="rounded-lg mx-auto"
                    />
                  </div>
                  <div className="md:w-2/3">
                    <div className="flex mb-4">
                      {[...Array(5)].map((_, i) => (
                        <svg
                          key={i}
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 24 24"
                          fill="currentColor"
                          className="h-5 w-5 text-yellow-400"
                        >
                          <path
                            fillRule="evenodd"
                            d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
                            clipRule="evenodd"
                          />
                        </svg>
                      ))}
                    </div>
                    <blockquote className="text-xl italic text-slate-600 mb-6">
                      "The customer management and mobile app features have transformed how we interact with our
                      clients. Our customers love the real-time tracking and notifications, and we've seen a significant
                      increase in repeat business."
                    </blockquote>
                    <div>
                      <p className="font-semibold text-slate-900">Rahul Verma</p>
                      <p className="text-slate-500">CEO, LaundryKing</p>
                    </div>
                    <div className="mt-6 grid grid-cols-3 gap-4">
                      <div className="bg-white p-3 rounded-lg text-center">
                        <div className="text-2xl font-bold text-blue-600">35%</div>
                        <div className="text-xs text-slate-500">Customer Retention</div>
                      </div>
                      <div className="bg-white p-3 rounded-lg text-center">
                        <div className="text-2xl font-bold text-blue-600">45%</div>
                        <div className="text-xs text-slate-500">Customer Satisfaction</div>
                      </div>
                      <div className="bg-white p-3 rounded-lg text-center">
                        <div className="text-2xl font-bold text-blue-600">25%</div>
                        <div className="text-xs text-slate-500">Revenue Growth</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </TabsContent>
            <TabsContent value="testimonial3">
              <div className="bg-slate-50 rounded-xl p-8 shadow-lg max-w-4xl mx-auto">
                <div className="flex flex-col md:flex-row gap-8">
                  <div className="md:w-1/3">
                    <Image
                      src="/placeholder.svg?height=300&width=300&text=Company+Logo"
                      alt="FreshLinens"
                      width={200}
                      height={200}
                      className="rounded-lg mx-auto"
                    />
                  </div>
                  <div className="md:w-2/3">
                    <div className="flex mb-4">
                      {[...Array(5)].map((_, i) => (
                        <svg
                          key={i}
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 24 24"
                          fill="currentColor"
                          className="h-5 w-5 text-yellow-400"
                        >
                          <path
                            fillRule="evenodd"
                            d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
                            clipRule="evenodd"
                          />
                        </svg>
                      ))}
                    </div>
                    <blockquote className="text-xl italic text-slate-600 mb-6">
                      "The reporting and analytics features have given us unprecedented visibility into our business
                      performance. We've been able to identify inefficiencies and make data-driven decisions that have
                      significantly improved our bottom line."
                    </blockquote>
                    <div>
                      <p className="font-semibold text-slate-900">Ananya Desai</p>
                      <p className="text-slate-500">Operations Manager, FreshLinens</p>
                    </div>
                    <div className="mt-6 grid grid-cols-3 gap-4">
                      <div className="bg-white p-3 rounded-lg text-center">
                        <div className="text-2xl font-bold text-blue-600">20%</div>
                        <div className="text-xs text-slate-500">Profit Margin</div>
                      </div>
                      <div className="bg-white p-3 rounded-lg text-center">
                        <div className="text-2xl font-bold text-blue-600">30%</div>
                        <div className="text-xs text-slate-500">Operational Efficiency</div>
                      </div>
                      <div className="bg-white p-3 rounded-lg text-center">
                        <div className="text-2xl font-bold text-blue-600">15%</div>
                        <div className="text-xs text-slate-500">Resource Utilization</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </TabsContent>
          </div>
        </Tabs>
      </section>

{/* Pricing 
      <section className="container mx-auto px-4 py-16 md:py-24">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-blue-100 text-blue-700 hover:bg-blue-200">Pricing</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Simple, Transparent Pricing</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            Choose the plan that best fits your business needs. All plans include implementation support and training.
          </p>
        </div>

<div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
          {[
            {
              name: "Starter",
              price: "₹39,999",
              description: "Perfect for small laundry businesses just getting started",
              features: [
                "Up to 5 users",
                "Basic customer management",
                "Simple route planning",
                "Basic inventory tracking",
                "Email support",
                "Regular updates",
              ],
              cta: "Get Started",
              popular: false,
            },
            {
              name: "Professional",
              price: "₹79,999",
              description: "Ideal for growing laundry businesses with complex needs",
              features: [
                "Up to 20 users",
                "Advanced customer management",
                "Intelligent route optimization",
                "Comprehensive inventory control",
                "Mobile app for drivers",
                "Priority support",
                "Regular updates",
              ],
              cta: "Most Popular",
              popular: true,
            },
            {
              name: "Enterprise",
              price: "Custom",
              description: "Tailored solutions for large-scale laundry operations",
              features: [
                "Unlimited users",
                "Enterprise-grade customer management",
                "Advanced analytics and reporting",
                "Multi-location support",
                "API access for custom integrations",
                "Dedicated account manager",
                "Custom feature development",
              ],
              cta: "Contact Sales",
              popular: false,
            },
          ].map((plan, index) => (
            <Card
              key={index}
              className={`border-0 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2 ${
                plan.popular ? "relative z-10 scale-105 md:-mt-4 md:-mb-4" : ""
              }`}
            >
              {plan.popular && (
                <div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                  <Badge className="bg-blue-600 text-white hover:bg-blue-700 px-4 py-1">Most Popular</Badge>
                </div>
              )}
              <CardContent className="p-6 md:p-8">
                <div className="text-center mb-6">
                  <h3 className="text-2xl font-bold text-slate-900 mb-2">{plan.name}</h3>
                  <div className="text-4xl font-bold text-slate-900 mb-2">{plan.price}</div>
                  <p className="text-slate-600">{plan.description}</p>
                </div>

<div className="text-center mt-8 text-slate-600">
          All prices are one-time license fees. Annual maintenance and support plans available.
        </div>
      </section>
      */}

{/* CTA Section */}
      <section className="container mx-auto px-4 py-16">
        <div className="bg-gradient-to-r from-blue-600 to-blue-500 rounded-2xl p-8 md:p-12 text-white text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">Ready to Transform Your Laundry Business?</h2>
          <p className="text-xl text-blue-100 mb-8 max-w-2xl mx-auto">
            Join hundreds of businesses that have streamlined their operations with WashIT. Schedule a demo today to see
            how we can help your business grow.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
          <Link href='/contact'>
            <Button size="lg" className="bg-white text-blue-600 hover:bg-blue-50">
              Schedule Demo
            </Button>
          </Link>
            
          </div>
        </div>
      </section>

{/* Enhanced Footer */}
      <EnhancedFooter />
    </div>
  )
}
[V0_FILE]json:file="components.json" isMerged="true"
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}
[V0_FILE]typescriptreact:file="components/animated-counter.tsx" isMerged="true"
"use client"

import { useState, useEffect, useRef } from "react"

interface AnimatedCounterProps {
  value: string
  duration?: number
  className?: string
  prefix?: string
  suffix?: string
}

export default function AnimatedCounter({
  value,
  duration = 2000,
  className = "",
  prefix = "",
  suffix = "",
}: AnimatedCounterProps) {
  const [count, setCount] = useState(0)
  const countRef = useRef<HTMLDivElement>(null)
  const startedRef = useRef(false)

// Parse the value to get the numeric part
  const parseValue = () => {
    // Remove any non-numeric characters except for decimal points
    const numericValue = value.replace(/[^0-9.-]/g, "")
    return Number.parseFloat(numericValue) || 0
  }

const targetValue = parseValue()

useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting && !startedRef.current) {
          startedRef.current = true
          animateCounter()
        }
      },
      { threshold: 0.1 },
    )

if (countRef.current) {
      observer.observe(countRef.current)
    }

return () => {
      if (countRef.current) {
        observer.unobserve(countRef.current)
      }
    }
  }, [])

const animateCounter = () => {
    const start = 0
    const end = targetValue
    const stepTime = Math.abs(Math.floor(duration / end))

let current = start
    const timer = setInterval(() => {
      current += 1
      setCount(current)

if (current >= end) {
        clearInterval(timer)
        setCount(end)
      }
    }, stepTime)
  }

// Format the display value to match the original format
  const formatDisplayValue = () => {
    if (value.includes("%")) {
      return `${prefix}${count}${suffix}`
    } else if (value.includes("+")) {
      return `${prefix}${count}${suffix}`
    } else if (value.includes("-")) {
      return `${prefix}${count}${suffix}`
    } else {
      return `${prefix}${count}${suffix}`
    }
  }

return (
    <div ref={countRef} className={className}>
      {formatDisplayValue()}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/animated-stat.tsx" isMerged="true"
"use client"
import AnimatedCounter from "./animated-counter"

interface AnimatedStatProps {
  value: string
  label: string
  className?: string
  valueClassName?: string
  labelClassName?: string
}

export default function AnimatedStat({
  value,
  label,
  className = "",
  valueClassName = "",
  labelClassName = "",
}: AnimatedStatProps) {
  // Determine if the value has a prefix or suffix
  const getValueParts = () => {
    let prefix = ""
    let suffix = ""
    let numericValue = value

if (value.startsWith("+")) {
      prefix = "+"
      numericValue = value.substring(1)
    } else if (value.startsWith("-")) {
      prefix = "-"
      numericValue = value.substring(1)
    }

if (value.endsWith("%")) {
      suffix = "%"
      numericValue = numericValue.substring(0, numericValue.length - 1)
    }

return { prefix, suffix, numericValue }
  }

const { prefix, suffix, numericValue } = getValueParts()

return (
    <div className={className}>
      <AnimatedCounter value={numericValue} prefix={prefix} suffix={suffix} className={valueClassName} />
      <div className={labelClassName}>{label}</div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/case-studies.tsx" isMerged="true"
"use client"

interface CaseStudy {
  id: string
  company: string
  industry: string
  location: string
  employees: string
  solution: string
  challenge: string
  implementation: string
  results: {
    metric: string
    improvement: string
    icon: any
    color: string
  }[]
  testimonial: {
    quote: string
    author: string
    position: string
    avatar: string
  }
  keyFeatures: string[]
  timeline: string
  roi: string
}

const caseStudies: CaseStudy[] = [
  {
    id: "fashion-forward",
    company: "Fashion Forward Inc.",
    industry: "Apparel Manufacturing",
    location: "Mumbai, India",
    employees: "500+",
    solution: "StitchIT",
    challenge:
      "Fashion Forward Inc. was struggling with production delays, inventory mismanagement, and quality control issues across their 5 manufacturing units. Manual processes led to 30% production delays and 15% material waste.",
    implementation:
      "Implemented StitchIT across all manufacturing units with integrated inventory management, real-time production tracking, and automated quality control checkpoints. The rollout was completed in 6 weeks with comprehensive staff training.",
    results: [
      {
        metric: "Production Efficiency",
        improvement: "+35%",
        icon: TrendingUp,
        color: "text-green-600",
      },
      {
        metric: "Lead Time Reduction",
        improvement: "-45%",
        icon: Clock,
        color: "text-blue-600",
      },
      {
        metric: "Material Waste",
        improvement: "-25%",
        icon: DollarSign,
        color: "text-orange-600",
      },
      {
        metric: "Quality Score",
        improvement: "+20%",
        icon: BarChart3,
        color: "text-purple-600",
      },
    ],
    testimonial: {
      quote:
        "StitchIT has completely transformed our manufacturing process. We've seen remarkable improvements in efficiency and our customers are happier with faster delivery times. The ROI was evident within the first quarter.",
      author: "Rajesh Sharma",
      position: "Operations Director",
      avatar: "/placeholder.svg?height=60&width=60&text=RS",
    },
    keyFeatures: [
      "Real-time production tracking across 5 units",
      "Automated inventory management with reorder alerts",
      "Quality control checkpoints with defect tracking",
      "Integrated financial management and invoicing",
    ],
    timeline: "6 weeks",
    roi: "280%",
  },
  {
    id: "clean-pro",
    company: "CleanPro Industries",
    industry: "Commercial Laundry",
    location: "Delhi, India",
    employees: "200+",
    solution: "WashIT",
    challenge:
      "CleanPro was facing challenges with customer management, route optimization, and billing accuracy. Manual processes resulted in 20% billing errors and poor customer satisfaction due to delayed deliveries.",
    implementation:
      "Deployed WashIT with customer management system, automated billing, route optimization, and real-time tracking. Integration with existing POS systems and mobile apps for drivers and customers.",
    results: [
      {
        metric: "Billing Accuracy",
        improvement: "+98%",
        icon: CheckCircle,
        color: "text-green-600",
      },
      {
        metric: "Route Efficiency",
        improvement: "+40%",
        icon: TrendingUp,
        color: "text-blue-600",
      },
      {
        metric: "Customer Satisfaction",
        improvement: "+60%",
        icon: Users,
        color: "text-purple-600",
      },
      {
        metric: "Operational Costs",
        improvement: "-30%",
        icon: DollarSign,
        color: "text-orange-600",
      },
    ],
    testimonial: {
      quote:
        "WashIT has revolutionized our laundry operations. The automated billing and route optimization have significantly improved our efficiency and customer satisfaction. Our revenue has increased by 40% since implementation.",
      author: "Priya Patel",
      position: "General Manager",
      avatar: "/placeholder.svg?height=60&width=60&text=PP",
    },
    keyFeatures: [
      "Customer portal with real-time order tracking",
      "Automated billing with GST compliance",
      "Route optimization for pickup and delivery",
      "Inventory management for chemicals and supplies",
    ],
    timeline: "4 weeks",
    roi: "320%",
  },
  {
    id: "style-hub",
    company: "Style Hub",
    industry: "E-commerce Fashion",
    location: "Bangalore, India",
    employees: "150+",
    solution: "DigitAil",
    challenge:
      "Style Hub was managing multiple e-commerce channels manually, leading to inventory discrepancies, order fulfillment delays, and poor customer experience. They were losing 25% of potential sales due to stock-outs.",
    implementation:
      "Implemented DigitAil with multi-channel integration, automated inventory sync, order management, and customer analytics. Connected with Amazon, Flipkart, Myntra, and their own website.",
    results: [
      {
        metric: "Sales Growth",
        improvement: "+65%",
        icon: TrendingUp,
        color: "text-green-600",
      },
      {
        metric: "Order Fulfillment",
        improvement: "+50%",
        icon: Clock,
        color: "text-blue-600",
      },
      {
        metric: "Inventory Accuracy",
        improvement: "+95%",
        icon: BarChart3,
        color: "text-purple-600",
      },
      {
        metric: "Customer Retention",
        improvement: "+45%",
        icon: Users,
        color: "text-orange-600",
      },
    ],
    testimonial: {
      quote:
        "DigitAil has been a game-changer for our e-commerce business. The multi-channel integration and automated inventory management have helped us scale rapidly while maintaining excellent customer service.",
      author: "Amit Kumar",
      position: "Founder & CEO",
      avatar: "/placeholder.svg?height=60&width=60&text=AK",
    },
    keyFeatures: [
      "Multi-channel inventory synchronization",
      "Automated order processing and fulfillment",
      "Customer analytics and behavior tracking",
      "Integrated payment gateway and accounting",
    ],
    timeline: "5 weeks",
    roi: "450%",
  },
  {
    id: "textile-masters",
    company: "Textile Masters Ltd.",
    industry: "Textile Manufacturing",
    location: "Chennai, India",
    employees: "800+",
    solution: "HR TECH",
    challenge:
      "Managing payroll for 800+ employees with different pay structures (monthly, hourly, piece-rate) was complex and error-prone. Manual calculations led to 15% payroll errors and compliance issues.",
    implementation:
      "Deployed HR TECH with automated salary calculations, compliance management, and employee self-service portal. Integrated with biometric attendance systems and government compliance requirements.",
    results: [
      {
        metric: "Payroll Accuracy",
        improvement: "+99%",
        icon: CheckCircle,
        color: "text-green-600",
      },
      {
        metric: "Processing Time",
        improvement: "-80%",
        icon: Clock,
        color: "text-blue-600",
      },
      {
        metric: "Compliance Score",
        improvement: "+100%",
        icon: BarChart3,
        color: "text-purple-600",
      },
      {
        metric: "HR Efficiency",
        improvement: "+70%",
        icon: Users,
        color: "text-orange-600",
      },
    ],
    testimonial: {
      quote:
        "HR TECH has simplified our complex payroll processes tremendously. The automated compliance features ensure we never miss any regulatory requirements, and our employees love the self-service portal.",
      author: "Lakshmi Narayanan",
      position: "HR Director",
      avatar: "/placeholder.svg?height=60&width=60&text=LN",
    },
    keyFeatures: [
      "Multi-structure payroll automation",
      "Government compliance management",
      "Employee self-service portal",
      "Biometric integration and attendance tracking",
    ],
    timeline: "3 weeks",
    roi: "380%",
  },
]

export default function CaseStudies() {
  const [selectedCase, setSelectedCase] = useState(caseStudies[0])

return (
    <section className="py-16 md:py-24 bg-gradient-to-br from-slate-50 to-slate-100">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">Success Stories</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Real Results from Real Customers</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            Discover how leading businesses across different industries have transformed their operations with our
            innovative solutions.
          </p>
        </div>

<Tabs defaultValue="fashion-forward" className="w-full">
          <div className="flex justify-center mb-8">
            <TabsList className="grid grid-cols-2 md:grid-cols-4 gap-2 h-auto p-2">
              {caseStudies.map((study) => (
                <TabsTrigger
                  key={study.id}
                  value={study.id}
                  className="flex flex-col items-center p-4 data-[state=active]:bg-orange-100 data-[state=active]:text-orange-700"
                  onClick={() => setSelectedCase(study)}
                >
                  <div className="font-medium text-sm">{study.company}</div>
                  <div className="text-xs text-slate-500">{study.solution}</div>
                </TabsTrigger>
              ))}
            </TabsList>
          </div>

{caseStudies.map((study) => (
            <TabsContent key={study.id} value={study.id} className="mt-0">
              <div className="grid lg:grid-cols-3 gap-8">
                {/* Company Overview */}
                <Card className="lg:col-span-1">
                  <CardContent className="p-6 space-y-4">
                    <div className="flex items-center space-x-3">
                      <Building2 className="h-8 w-8 text-orange-600" />
                      <div>
                        <h3 className="text-xl font-bold text-slate-900">{study.company}</h3>
                        <p className="text-slate-600">{study.industry}</p>
                      </div>
                    </div>

<div className="space-y-3">
                      <div className="flex items-center space-x-2">
                        <MapPin className="h-4 w-4 text-slate-500" />
                        <span className="text-sm text-slate-600">{study.location}</span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Users className="h-4 w-4 text-slate-500" />
                        <span className="text-sm text-slate-600">{study.employees} employees</span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Badge variant="secondary">{study.solution}</Badge>
                      </div>
                    </div>

<div className="pt-4 border-t">
                      <h4 className="font-semibold text-slate-900 mb-2">Implementation Timeline</h4>
                      <p className="text-2xl font-bold text-orange-600">{study.timeline}</p>
                    </div>

<div className="pt-4 border-t">
                      <h4 className="font-semibold text-slate-900 mb-2">ROI Achieved</h4>
                      <p className="text-2xl font-bold text-green-600">{study.roi}</p>
                    </div>
                  </CardContent>
                </Card>

{/* Case Study Details */}
                <div className="lg:col-span-2 space-y-6">
                  {/* Challenge & Solution */}
                  <div className="grid md:grid-cols-2 gap-6">
                    <Card>
                      <CardContent className="p-6">
                        <h4 className="font-semibold text-slate-900 mb-3">The Challenge</h4>
                        <p className="text-slate-600 leading-relaxed">{study.challenge}</p>
                      </CardContent>
                    </Card>

<Card>
                      <CardContent className="p-6">
                        <h4 className="font-semibold text-slate-900 mb-3">Our Solution</h4>
                        <p className="text-slate-600 leading-relaxed">{study.implementation}</p>
                      </CardContent>
                    </Card>
                  </div>

{/* Results */}
                  <Card>
                    <CardContent className="p-6">
                      <h4 className="font-semibold text-slate-900 mb-4">Measurable Results</h4>
                      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                        {study.results.map((result, index) => (
                          <div key={index} className="text-center p-4 bg-slate-50 rounded-lg">
                            <result.icon className={`h-8 w-8 mx-auto mb-2 ${result.color}`} />
                            <div className={`text-2xl font-bold mb-1 ${result.color}`}>{result.improvement}</div>
                            <div className="text-sm text-slate-600">{result.metric}</div>
                          </div>
                        ))}
                      </div>
                    </CardContent>
                  </Card>

{/* Key Features */}
                  <Card>
                    <CardContent className="p-6">
                      <h4 className="font-semibold text-slate-900 mb-4">Key Features Implemented</h4>
                      <div className="grid md:grid-cols-2 gap-3">
                        {study.keyFeatures.map((feature, index) => (
                          <div key={index} className="flex items-start space-x-2">
                            <CheckCircle className="h-5 w-5 text-green-500 flex-shrink-0 mt-0.5" />
                            <span className="text-slate-600">{feature}</span>
                          </div>
                        ))}
                      </div>
                    </CardContent>
                  </Card>

{/* Testimonial */}
                  <Card className="bg-gradient-to-r from-orange-50 to-orange-100 border-orange-200">
                    <CardContent className="p-6">
                      <div className="flex items-start space-x-4">
                        <Quote className="h-8 w-8 text-orange-600 flex-shrink-0" />
                        <div>
                          <blockquote className="text-lg text-slate-700 italic mb-4">
                            "{study.testimonial.quote}"
                          </blockquote>
                          <div className="flex items-center space-x-3">
                            <Image
                              src={study.testimonial.avatar || "/placeholder.svg"}
                              alt={study.testimonial.author}
                              width={48}
                              height={48}
                              className="rounded-full"
                            />
                            <div>
                              <div className="font-semibold text-slate-900">{study.testimonial.author}</div>
                              <div className="text-sm text-slate-600">{study.testimonial.position}</div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </div>
              </div>
            </TabsContent>
          ))}
        </Tabs>

{/* CTA */}
        <div className="text-center mt-12">
          <Button size="lg" className="bg-orange-600 hover:bg-orange-700">
            Schedule Your Success Story
            <ArrowRight className="ml-2 h-4 w-4" />
          </Button>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/custom-erp-section.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Image from "next/image"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Checkbox } from "@/components/ui/checkbox"
import {
  Settings,
  Puzzle,
  Zap,
  Shield,
  Database,
  Cloud,
  ArrowRight,
  CheckCircle,
  Building2,
  Factory,
  ShoppingBag,
  Truck,
  GraduationCap,
  Heart,
} from "lucide-react"

interface Industry {
  id: string
  name: string
  icon: any
  description: string
  modules: string[]
  color: string
}

const industries: Industry[] = [
  {
    id: "manufacturing",
    name: "Manufacturing",
    icon: Factory,
    description: "Complete ERP solution for manufacturing operations",
    modules: ["Production Planning", "Inventory Management", "Quality Control", "Supply Chain", "Financial Management"],
    color: "text-blue-600",
  },
  {
    id: "retail",
    name: "Retail & E-commerce",
    icon: ShoppingBag,
    description: "Comprehensive retail management system",
    modules: ["POS System", "Inventory Tracking", "Customer Management", "Multi-channel Sales", "Analytics"],
    color: "text-purple-600",
  },
  {
    id: "logistics",
    name: "Logistics & Transportation",
    icon: Truck,
    description: "End-to-end logistics management solution",
    modules: ["Fleet Management", "Route Optimization", "Warehouse Management", "Tracking System", "Billing"],
    color: "text-green-600",
  },
  {
    id: "education",
    name: "Education",
    icon: GraduationCap,
    description: "Complete education management system",
    modules: ["Student Management", "Academic Planning", "Fee Management", "Library System", "Examination"],
    color: "text-indigo-600",
  },
  {
    id: "healthcare",
    name: "Healthcare",
    icon: Heart,
    description: "Integrated healthcare management solution",
    modules: ["Patient Management", "Appointment System", "Billing", "Inventory", "Reporting"],
    color: "text-red-600",
  },
  {
    id: "services",
    name: "Service Industry",
    icon: Building2,
    description: "Tailored solutions for service businesses",
    modules: ["Project Management", "Resource Planning", "Client Management", "Billing", "Time Tracking"],
    color: "text-orange-600",
  },
]

const features = [
  {
    icon: Puzzle,
    title: "Modular Architecture",
    description: "Pick and choose modules that fit your business needs. Add more as you grow.",
  },
  {
    icon: Settings,
    title: "Fully Customizable",
    description: "Tailor every aspect of the system to match your unique business processes.",
  },
  {
    icon: Zap,
    title: "Rapid Deployment",
    description: "Get up and running quickly with our proven implementation methodology.",
  },
  {
    icon: Shield,
    title: "Enterprise Security",
    description: "Bank-level security with role-based access control and data encryption.",
  },
  {
    icon: Cloud,
    title: "Cloud & On-Premise",
    description: "Choose between cloud hosting or on-premise deployment based on your needs.",
  },
  {
    icon: Database,
    title: "Seamless Integration",
    description: "Connect with your existing systems through our robust API framework.",
  },
]

export default function CustomERPSection() {
  const [selectedIndustry, setSelectedIndustry] = useState(industries[0])
  const [isConsultationOpen, setIsConsultationOpen] = useState(false)

return (
    <section className="py-16 md:py-24 bg-white">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">Custom Solutions</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">
            Customizable ERP Solutions for Every Industry
          </h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            When off-the-shelf solutions don't fit, we build custom ERP systems tailored to your specific business
            requirements and industry needs.
          </p>
        </div>

{/* Industry Selection */}
        <div className="mb-12">
          <h3 className="text-2xl font-bold text-slate-900 text-center mb-8">Choose Your Industry</h3>
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
            {industries.map((industry) => (
              <Card
                key={industry.id}
                className={`cursor-pointer transition-all duration-300 hover:shadow-lg ${
                  selectedIndustry.id === industry.id ? "ring-2 ring-orange-200 shadow-lg" : ""
                }`}
                onClick={() => setSelectedIndustry(industry)}
              >
                <CardContent className="p-4 text-center">
                  <div className="h-12 w-12 rounded-lg bg-slate-100 flex items-center justify-center mx-auto mb-3">
                    <industry.icon className={`h-6 w-6 ${industry.color}`} />
                  </div>
                  <h4 className="font-semibold text-slate-900 text-sm">{industry.name}</h4>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>

{/* Selected Industry Details */}
        <div className="grid lg:grid-cols-2 gap-12 items-center mb-16">
          <div className="space-y-6">
            <div className="flex items-center space-x-4">
              <div className="h-16 w-16 rounded-2xl bg-orange-100 flex items-center justify-center">
                <selectedIndustry.icon className={`h-8 w-8 ${selectedIndustry.color}`} />
              </div>
              <div>
                <h3 className="text-3xl font-bold text-slate-900">{selectedIndustry.name}</h3>
                <p className="text-lg text-slate-600">Custom ERP Solution</p>
              </div>
            </div>

<p className="text-slate-600 text-lg leading-relaxed">{selectedIndustry.description}</p>

<div>
              <h4 className="font-semibold text-slate-900 mb-4">Key Modules Available:</h4>
              <div className="grid grid-cols-1 gap-3">
                {selectedIndustry.modules.map((module, index) => (
                  <div key={index} className="flex items-center space-x-3">
                    <CheckCircle className="h-5 w-5 text-green-500 flex-shrink-0" />
                    <span className="text-slate-700">{module}</span>
                  </div>
                ))}
              </div>
            </div>

<div className="flex flex-wrap gap-4">
              <Dialog open={isConsultationOpen} onOpenChange={setIsConsultationOpen}>
                <DialogTrigger asChild>
                  <Button size="lg" className="bg-orange-600 hover:bg-orange-700">
                    Get Free Consultation
                    <ArrowRight className="ml-2 h-4 w-4" />
                  </Button>
                </DialogTrigger>
              </Dialog>
              <Button size="lg" variant="outline">
                View Case Studies
              </Button>
            </div>
          </div>

<div className="relative">
            <div className="rounded-xl overflow-hidden shadow-xl border border-slate-200">
              <Image
                src="/placeholder.svg?height=600&width=800&text=Custom+ERP+Dashboard"
                alt="Custom ERP Dashboard"
                width={800}
                height={600}
                className="w-full h-auto"
              />
            </div>
            <div className="absolute -bottom-6 -right-6 bg-orange-600 text-white p-4 rounded-lg shadow-xl">
              <div className="text-2xl font-bold">100%</div>
              <div className="text-sm">Customizable</div>
            </div>
          </div>
        </div>

{/* Features Grid */}
        <div className="mb-16">
          <h3 className="text-2xl font-bold text-slate-900 text-center mb-8">Why Choose Our Custom ERP?</h3>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {features.map((feature, index) => (
              <Card key={index} className="border-0 shadow-md hover:shadow-xl transition-shadow">
                <CardContent className="p-6 space-y-4">
                  <div className="h-12 w-12 rounded-lg bg-orange-100 flex items-center justify-center text-orange-600">
                    <feature.icon className="h-6 w-6" />
                  </div>
                  <h4 className="text-xl font-semibold text-slate-900">{feature.title}</h4>
                  <p className="text-slate-600">{feature.description}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>

{/* Process Timeline */}
        <div className="mb-16">
          <h3 className="text-2xl font-bold text-slate-900 text-center mb-8">Our Development Process</h3>
          <div className="grid md:grid-cols-4 gap-8">
            {[
              {
                step: "01",
                title: "Discovery & Analysis",
                description: "We analyze your business processes and requirements in detail.",
              },
              {
                step: "02",
                title: "Design & Planning",
                description: "Create detailed system architecture and user interface designs.",
              },
              {
                step: "03",
                title: "Development & Testing",
                description: "Build your custom ERP with rigorous testing at every stage.",
              },
              {
                step: "04",
                title: "Deployment & Support",
                description: "Deploy the system and provide ongoing support and maintenance.",
              },
            ].map((phase, index) => (
              <div key={index} className="text-center">
                <div className="h-16 w-16 rounded-full bg-orange-600 text-white flex items-center justify-center text-xl font-bold mx-auto mb-4">
                  {phase.step}
                </div>
                <h4 className="text-lg font-semibold text-slate-900 mb-2">{phase.title}</h4>
                <p className="text-slate-600 text-sm">{phase.description}</p>
              </div>
            ))}
          </div>
        </div>

{/* Success Metrics */}
        <div className="bg-gradient-to-r from-orange-600 to-orange-500 rounded-2xl p-8 md:p-12 text-white text-center">
          <h3 className="text-3xl font-bold mb-8">Proven Results Across Industries</h3>
          <div className="grid md:grid-cols-4 gap-8">
            {[
              { metric: "50+", label: "Custom ERP Projects" },
              { metric: "95%", label: "Client Satisfaction" },
              { metric: "6 weeks", label: "Average Implementation" },
              { metric: "300%", label: "Average ROI" },
            ].map((stat, index) => (
              <div key={index}>
                <div className="text-4xl font-bold mb-2">{stat.metric}</div>
                <div className="text-orange-100">{stat.label}</div>
              </div>
            ))}
          </div>
        </div>

{/* Consultation Dialog */}
        <Dialog open={isConsultationOpen} onOpenChange={setIsConsultationOpen}>
          <DialogContent className="max-w-2xl">
            <DialogHeader>
              <DialogTitle>Free ERP Consultation</DialogTitle>
            </DialogHeader>
            <div className="space-y-6">
              <div className="grid md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="company-name">Company Name</Label>
                  <Input id="company-name" placeholder="Your Company" />
                </div>
                <div>
                  <Label htmlFor="industry-select">Industry</Label>
                  <Input id="industry-select" value={selectedIndustry.name} readOnly />
                </div>
              </div>

<div className="grid md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="contact-email">Email</Label>
                  <Input id="contact-email" type="email" placeholder="you@company.com" />
                </div>
                <div>
                  <Label htmlFor="contact-phone">Phone</Label>
                  <Input id="contact-phone" placeholder="+91 98765 43210" />
                </div>
              </div>

<div>
                <Label htmlFor="company-size">Company Size</Label>
                <Input id="company-size" placeholder="Number of employees" />
              </div>

<div>
                <Label>Required Modules (Select all that apply)</Label>
                <div className="grid grid-cols-2 gap-3 mt-2">
                  {selectedIndustry.modules.map((module, index) => (
                    <div key={index} className="flex items-center space-x-2">
                      <Checkbox id={`module-${index}`} />
                      <Label htmlFor={`module-${index}`} className="text-sm">
                        {module}
                      </Label>
                    </div>
                  ))}
                </div>
              </div>

<div>
                <Label htmlFor="requirements-detail">Specific Requirements</Label>
                <Textarea
                  id="requirements-detail"
                  placeholder="Tell us about your specific business needs and challenges..."
                  rows={4}
                />
              </div>

<div className="flex items-center space-x-2">
                <Checkbox id="terms" />
                <Label htmlFor="terms" className="text-sm text-slate-600">
                  I agree to receive information about Nuvatech's custom ERP solutions
                </Label>
              </div>

<Button className="w-full bg-orange-600 hover:bg-orange-700">
                Schedule Free Consultation
                <ArrowRight className="ml-2 h-4 w-4" />
              </Button>
            </div>
          </DialogContent>
        </Dialog>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/enhanced-footer.tsx" isMerged="true"
"use client"

import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import {
  Phone,
  Mail,
  MapPin,
  Scissors,
  Droplets,
  ShoppingCart,
  Users,
  Facebook,
  Twitter,
  Linkedin,
  Instagram,
  Youtube,
  Send,
} from "lucide-react"

export default function EnhancedFooter() {
  const solutions = [
    {
      title: "StitchIT",
      description: "Garment Manufacturing ERP",
      href: "/stitchit",
      icon: Scissors,
      color: "text-orange-600",
    },
    {
      title: "WashIT",
      description: "Industrial Laundry Management",
      href: "/washit",
      icon: Droplets,
      color: "text-blue-600",
    },
    {
      title: "DigitAil",
      description: "E-commerce Solution",
      href: "/digitail",
      icon: ShoppingCart,
      color: "text-purple-600",
    },
    {
      title: "HR TECH",
      description: "HR Management System",
      href: "/hrtech",
      icon: Users,
      color: "text-green-600",
    },
  ]

const company = [
    { title: "About Us", href: "/about" },
    { title: "Our Team", href: "/team" },
    { title: "Careers", href: "/careers" },
    { title: "Contact Us", href: "/contact" },
    
  ]

const resources = [
    { title: "Case Studies", href: "/case-studies" },
    { title: "Blog", href: "/blog" },
    { title: "Support", href: "/support" },
  ]

return (
    <footer className="bg-slate-900 text-white">
      {/* Newsletter Section 
      <div className="border-b border-slate-800">
        <div className="container mx-auto px-4 py-12">
          <div className="grid md:grid-cols-2 gap-8 items-center">
            <div>
              <h3 className="text-2xl font-bold mb-2">Stay Updated</h3>
              <p className="text-slate-400">
                Get the latest updates on our products, industry insights, and exclusive offers.
              </p>
            </div>
            <div className="flex gap-4">
              <Input
                type="email"
                placeholder="Enter your email"
                className="bg-slate-800 border-slate-700 text-white placeholder:text-slate-400"
              />
              <Button className="bg-orange-600 hover:bg-orange-700">
                <Send className="h-4 w-4" />
              </Button>
            </div>
          </div>
        </div>
      </div>
      */}
      {/* Main Footer Content */}
      <div className="container mx-auto px-4 py-12">
        <div className="grid lg:grid-cols-5 gap-8">
          {/* Company Info */}
          <div className="lg:col-span-2 space-y-6">
            <div className="flex items-center space-x-3">
              <div className="w-10 h-10 bg-gradient-to-r from-orange-500 to-orange-600 rounded-lg flex items-center justify-center">
                <span className="text-white font-bold text-lg">N</span>
              </div>
              <div>
                <span className="text-xl font-bold">Nuvate</span>
                <Badge variant="secondary" className="ml-2 text-xs">
                  Technology Pvt Ltd
                </Badge>
              </div>
            </div>

<p className="text-slate-400 leading-relaxed">
              Leading technology solutions provider specializing in industry-specific ERP systems. Transforming
              businesses with innovative software solutions since 2014.
            </p>

<div className="space-y-3">
              <div className="flex items-center space-x-3">
                <Phone className="h-4 w-4 text-orange-500" />
                <span className="text-slate-300">+91 76007 67857</span>
              </div>
              <div className="flex items-center space-x-3">
                <Mail className="h-4 w-4 text-orange-500" />
                <span className="text-slate-300">info@nuvatetechnology.com</span>
              </div>
              <div className="flex items-start space-x-3">
                <MapPin className="h-4 w-4 text-orange-500 mt-1" />
                <span className="text-slate-300">
                  B-901, Empire Business Hub,
                  <br />
                  Science City Road, Ahmedabad,
                  <br />
                  Gujarat 380060, India
                </span>
              </div>
            </div>

{/* Social Media */}
            <div className="flex space-x-4">
              <Link
                href="https://www.facebook.com/nuvate"
                className="h-10 w-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-orange-600 transition-colors"
                target="_blank"
              >
                <Facebook className="h-4 w-4" />
              </Link>
              <Link
                href="https://twitter.com/nuvate"
                className="h-10 w-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-orange-600 transition-colors"
                target="_blank"
              >
                <Twitter className="h-4 w-4" />
              </Link>
              <Link
                href="https://www.linkedin.com/company/nuvate-it-solutions/"
                className="h-10 w-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-orange-600 transition-colors"
                target="_blank"
              >
                <Linkedin className="h-4 w-4" />
              </Link>
              <Link
                href="https://www.instagram.com/nuvate_technology"
                className="h-10 w-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-orange-600 transition-colors"
                target="_blank"
              >
                <Instagram className="h-4 w-4" />
              </Link>
              <Link
                href="https://www.youtube.com/channel/UCXmi3NChhHn9HV6rdWH5Hlw/videos"
                className="h-10 w-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-orange-600 transition-colors"
                target="_blank"
              >
                <Youtube className="h-4 w-4" />
              </Link>
            </div>
          </div>

{/* Solutions */}
          <div>
            <h3 className="font-semibold mb-6">Our Solutions</h3>
            <ul className="space-y-4">
              {solutions.map((solution) => (
                <li key={solution.title}>
                  <Link
                    href={solution.href}
                    className="group flex items-center space-x-3 hover:text-orange-400 transition-colors"
                  >
                    <solution.icon className={`h-4 w-4 ${solution.color} group-hover:text-orange-400`} />
                    <div>
                      <div className="font-medium">{solution.title}</div>
                      <div className="text-xs text-slate-500">{solution.description}</div>
                    </div>
                  </Link>
                </li>
              ))}
            </ul>
          </div>

{/* Resources */}
          <div>
            <h3 className="font-semibold mb-6">Resources</h3>
            <ul className="space-y-3">
              {resources.map((item) => (
                <li key={item.title}>
                  <Link href={item.href} className="text-slate-400 hover:text-orange-400 transition-colors">
                    {item.title}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
          {/* Company */}
          <div>
            <h3 className="font-semibold mb-6">Company</h3>
            <ul className="space-y-3">
              {company.map((item) => (
                <li key={item.title}>
                  <Link href={item.href} className="text-slate-400 hover:text-orange-400 transition-colors">
                    {item.title}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

</div>
      </div>

{/* Bottom Bar */}
      <div className="border-t border-slate-800">
        <div className="container mx-auto px-4 py-6">
          <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
            <div className="text-slate-400 text-sm">© 2024 Nuvate Technology Pvt Ltd. All rights reserved.</div>
            {/*
            <div className="flex space-x-6 text-sm">
              <Link href="/privacy" className="text-slate-400 hover:text-orange-400 transition-colors">
                Privacy Policy
              </Link>
              <Link href="/terms" className="text-slate-400 hover:text-orange-400 transition-colors">
                Terms of Service
              </Link>
              <Link href="/cookies" className="text-slate-400 hover:text-orange-400 transition-colors">
                Cookie Policy
              </Link>
            </div>
            */}
          </div>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]typescriptreact:file="components/enhanced-header.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu"
import {
  Menu,
  Phone,
  Mail,
  MapPin,
  Scissors,
  Droplets,
  ShoppingCart,
  Users,
  ArrowRight,
  Star,
  Award,
  Clock,
  ChevronDown,
} from "lucide-react"

const solutions = [
  {
    title: "StitchIT",
    description: "Complete garment manufacturing solution",
    href: "/stitchit",
    icon: Scissors,
    color: "text-orange-600",
    bgColor: "bg-orange-50",
    features: ["Production Planning", "Quality Control", "Inventory Management"],
  },
  {
    title: "WashIT",
    description: "Industrial laundry management system",
    href: "/washit",
    icon: Droplets,
    color: "text-blue-600",
    bgColor: "bg-blue-50",
    features: ["Customer Management", "Route Optimization", "Automated Billing"],
  },
  {
    title: "DigitAil",
    description: "Complete e-commerce solution",
    href: "/digitail",
    icon: ShoppingCart,
    color: "text-purple-600",
    bgColor: "bg-purple-50",
    features: ["Multi-channel Sales", "Inventory Sync", "Analytics"],
  },
  {
    title: "HR TECH",
    description: "Advanced HR management system",
    href: "/hrtech",
    icon: Users,
    color: "text-green-600",
    bgColor: "bg-green-50",
    features: ["Payroll Automation", "Compliance", "Employee Portal"],
  },
]

const company = [
  { title: "About Us", href: "/about", description: "Learn about our mission and values" },
  { title: "Our Team", href: "/team", description: "Meet the experts behind our solutions" },
  { title: "Careers", href: "/careers", description: "Join our growing team" },
  { title: "Contact", href: "/contact", description: "Get in touch with us" },
]

const resources = [
  { title: "Case Studies", href: "/case-studies", description: "Success stories from our clients" },
  { title: "Blog", href: "/blog", description: "Industry insights and updates" },
  { title: "Support", href: "/support", description: "Get help when you need it" },
]

export default function EnhancedHeader() {
  const [isScrolled, setIsScrolled] = useState(false)
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
  const [activeDropdown, setActiveDropdown] = useState<string | null>(null)

useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 10)
    }
    window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

const toggleDropdown = (dropdown: string) => {
    setActiveDropdown(activeDropdown === dropdown ? null : dropdown)
  }

return (
    <>
      {/* Top Bar */}
      <div className="bg-slate-900 text-white py-2 px-4 text-sm">
        <div className="container mx-auto flex flex-col sm:flex-row justify-between items-center space-y-2 sm:space-y-0">
          <div className="flex items-center space-x-6">
            <div className="flex items-center space-x-2">
              <Phone className="h-3 w-3" />
              <span>+91 76007 67857</span>
            </div>
            <div className="flex items-center space-x-2">
              <Mail className="h-3 w-3" />
              <span>info@nuvatetechnology.com</span>
            </div>
            <div className="hidden md:flex items-center space-x-2">
              <MapPin className="h-3 w-3" />
              <span>Ahmedabad, Gujarat, India</span>
            </div>
          </div>
          <div className="flex items-center space-x-4">
            <Badge variant="secondary" className="bg-orange-600 text-white hover:bg-orange-700">
              <Star className="h-3 w-3 mr-1" />
              Trusted by 200+ Businesses
            </Badge>
          </div>
        </div>
      </div>

{/* Main Header */}
      <header
        className={`sticky top-0 z-50 transition-all duration-300 ${
          isScrolled ? "bg-white/95 backdrop-blur-md shadow-lg" : "bg-white/80 backdrop-blur-sm"
        } border-b`}
      >
        <div className="container mx-auto px-4">
          <div className="flex items-center justify-between h-16">
            {/* Logo */}
            <Link href="/" className="flex items-center space-x-3">
              <div className="w-10 h-10 bg-gradient-to-r from-orange-500 to-orange-600 rounded-lg flex items-center justify-center">
                <span className="text-white font-bold text-lg">N</span>
              </div>
              <div>
                <span className="text-xl font-bold text-slate-800">Nuvate</span>
                <Badge variant="secondary" className="ml-2 text-xs">
                  Technology Pvt Ltd
                </Badge>
              </div>
            </Link>

{/* Desktop Navigation */}
            <NavigationMenu className="hidden lg:flex">
              <NavigationMenuList className="space-x-2">
                <NavigationMenuItem>
                  <Link href="/" className="px-4 py-2 text-slate-700 hover:text-orange-600 transition-colors">
                    Home
                  </Link>
                </NavigationMenuItem>

<NavigationMenuItem>
                  <NavigationMenuTrigger className="text-slate-700 hover:text-orange-600">
                    Solutions
                  </NavigationMenuTrigger>
                  <NavigationMenuContent>
                    <div className="grid w-[800px] grid-cols-2 gap-6 p-6">
                      <div className="space-y-4">
                        <h3 className="text-lg font-semibold text-slate-900">Our Products</h3>
                        {solutions.map((solution) => (
                          <Link
                            key={solution.title}
                            href={solution.href}
                            className="group block space-y-2 rounded-lg p-3 hover:bg-slate-50 transition-colors"
                          >
                            <div className="flex items-center space-x-3">
                              <div
                                className={`h-10 w-10 rounded-lg ${solution.bgColor} flex items-center justify-center`}
                              >
                                <solution.icon className={`h-5 w-5 ${solution.color}`} />
                              </div>
                              <div>
                                <h4 className="font-semibold text-slate-900 group-hover:text-orange-600">
                                  {solution.title}
                                </h4>
                                <p className="text-sm text-slate-600">{solution.description}</p>
                              </div>
                            </div>
                            <div className="ml-13 space-y-1">
                              {solution.features.map((feature, index) => (
                                <div key={index} className="text-xs text-slate-500">
                                  • {feature}
                                </div>
                              ))}
                            </div>
                          </Link>
                        ))}
                      </div>
                      <div className="space-y-4">
                        <h3 className="text-lg font-semibold text-slate-900">Why Choose Us?</h3>
                        <div className="space-y-3">
                          <div className="flex items-center space-x-3 p-3 bg-orange-50 rounded-lg">
                            <Award className="h-8 w-8 text-orange-600" />
                            <div>
                              <h4 className="font-semibold text-slate-900">Industry Expertise</h4>
                              <p className="text-sm text-slate-600">8+ years of domain knowledge</p>
                            </div>
                          </div>
                          <div className="flex items-center space-x-3 p-3 bg-blue-50 rounded-lg">
                            <Clock className="h-8 w-8 text-blue-600" />
                            <div>
                              <h4 className="font-semibold text-slate-900">Quick Implementation</h4>
                              <p className="text-sm text-slate-600">Go live in 4-6 weeks</p>
                            </div>
                          </div>
                        </div>
                        <Link href="/contact">
                          <Button className="w-full bg-orange-600 hover:bg-orange-700 mt-3">
                            Schedule Demo
                            <ArrowRight className="ml-2 h-4 w-4" />
                          </Button>
                        </Link>
                      </div>
                    </div>
                  </NavigationMenuContent>
                </NavigationMenuItem>

<NavigationMenuItem>
                  <NavigationMenuTrigger className="text-slate-700 hover:text-orange-600">
                    Company
                  </NavigationMenuTrigger>
                  <NavigationMenuContent>
                    <div className="grid w-[400px] gap-3 p-6">
                      {company.map((item) => (
                        <Link
                          key={item.title}
                          href={item.href}
                          className="block space-y-1 rounded-lg p-3 hover:bg-slate-50 transition-colors"
                        >
                          <h4 className="font-semibold text-slate-900 hover:text-orange-600">{item.title}</h4>
                          <p className="text-sm text-slate-600">{item.description}</p>
                        </Link>
                      ))}
                    </div>
                  </NavigationMenuContent>
                </NavigationMenuItem>

<NavigationMenuItem>
                  <NavigationMenuTrigger className="text-slate-700 hover:text-orange-600">
                    Resources
                  </NavigationMenuTrigger>
                  <NavigationMenuContent>
                    <div className="grid w-[400px] gap-3 p-6">
                      {resources.map((item) => (
                        <Link
                          key={item.title}
                          href={item.href}
                          className="block space-y-1 rounded-lg p-3 hover:bg-slate-50 transition-colors"
                        >
                          <h4 className="font-semibold text-slate-900 hover:text-orange-600">{item.title}</h4>
                          <p className="text-sm text-slate-600">{item.description}</p>
                        </Link>
                      ))}
                    </div>
                  </NavigationMenuContent>
                </NavigationMenuItem>
              </NavigationMenuList>
            </NavigationMenu>

{/* Desktop CTA */}
            <div className="hidden lg:flex items-center space-x-4">
              <Button variant="outline" size="sm" asChild>
                <Link href="/contact">Contact Us</Link>
              </Button>
            </div>

{/* Mobile Menu Button */}
            <Sheet open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>
              <SheetTrigger asChild>
                <Button variant="ghost" size="icon" className="lg:hidden" onClick={() => setIsMobileMenuOpen(true)}>
                  <Menu className="h-6 w-6" />
                  <span className="sr-only">Toggle menu</span>
                </Button>
              </SheetTrigger>
              <SheetContent side="right" className="w-[300px] sm:w-[400px] bg-white overflow-y-auto scrollbar-hide">
                <div className="flex flex-col h-full">
                  {/* Header */}
                  <div className="text-center py-8 border-b border-slate-200 bg-gradient-to-b from-white to-slate-50">
                    <div className="flex items-center justify-center mb-3">
                      <div className="w-10 h-10 bg-gradient-to-r from-orange-500 to-orange-600 rounded-xl flex items-center justify-center mr-3 shadow-lg">
                        <span className="text-white font-bold text-lg">N</span>
                      </div>
                      <span className="text-2xl font-bold text-slate-800">Nuvate</span>
                    </div>
                    <p className="text-sm text-slate-600 font-medium">Technology Solutions</p>
                  </div>

{/* Navigation */}
                  <nav className="flex-1 py-6 overflow-y-auto" style={{ scrollbarWidth: "none" }}>
                    {/* Home */}
                    <Link
                      href="/"
                      className="block text-center text-lg font-medium text-slate-900 hover:text-orange-600 py-4 px-4 mx-2 hover:bg-slate-50 rounded-lg transition-all duration-200 border-b border-slate-100"
                      onClick={() => setIsMobileMenuOpen(false)}
                    >
                      Home
                    </Link>

{/* Solutions Dropdown */}
                    <div className="border-b border-slate-100">
                      <button
                        onClick={() => toggleDropdown("solutions")}
                        className="w-full flex items-center justify-center py-4 px-4 text-lg font-medium text-slate-900 hover:text-orange-600 hover:bg-slate-50 transition-all duration-200 rounded-lg mx-2"
                      >
                        <span>Solutions</span>
                        <div
                          className={`ml-2 transition-transform duration-300 ${activeDropdown === "solutions" ? "rotate-180" : ""}`}
                        >
                          <ChevronDown className="h-5 w-5" />
                        </div>
                      </button>
                      {activeDropdown === "solutions" && (
                        <div className="py-2 px-4 bg-gradient-to-b from-slate-50 to-white animate-in slide-in-from-top-2 duration-300 ease-out">
                          {solutions.map((solution) => (
                            <Link
                              key={solution.title}
                              href={solution.href}
                              className="block text-center py-3 px-4 text-base font-medium text-slate-800 hover:text-orange-600 hover:bg-orange-50 rounded-lg transition-all duration-200 transform hover:scale-105"
                              onClick={() => setIsMobileMenuOpen(false)}
                            >
                              {solution.title}
                            </Link>
                          ))}
                        </div>
                      )}
                    </div>

{/* Company Dropdown */}
                    <div className="border-b border-slate-100">
                      <button
                        onClick={() => toggleDropdown("company")}
                        className="w-full flex items-center justify-center py-4 px-4 text-lg font-medium text-slate-900 hover:text-orange-600 hover:bg-slate-50 transition-all duration-200 rounded-lg mx-2"
                      >
                        <span>Company</span>
                        <div
                          className={`ml-2 transition-transform duration-300 ${activeDropdown === "company" ? "rotate-180" : ""}`}
                        >
                          <ChevronDown className="h-5 w-5" />
                        </div>
                      </button>
                      {activeDropdown === "company" && (
                        <div className="py-2 px-4 bg-gradient-to-b from-slate-50 to-white animate-in slide-in-from-top-2 duration-300 ease-out">
                          {company.map((item) => (
                            <Link
                              key={item.title}
                              href={item.href}
                              className="block text-center py-3 px-4 text-base font-medium text-slate-800 hover:text-orange-600 hover:bg-orange-50 rounded-lg transition-all duration-200 transform hover:scale-105"
                              onClick={() => setIsMobileMenuOpen(false)}
                            >
                              {item.title}
                            </Link>
                          ))}
                        </div>
                      )}
                    </div>

{/* Resources Dropdown */}
                    <div className="border-b border-slate-100">
                      <button
                        onClick={() => toggleDropdown("resources")}
                        className="w-full flex items-center justify-center py-4 px-4 text-lg font-medium text-slate-900 hover:text-orange-600 hover:bg-slate-50 transition-all duration-200 rounded-lg mx-2"
                      >
                        <span>Resources</span>
                        <div
                          className={`ml-2 transition-transform duration-300 ${activeDropdown === "resources" ? "rotate-180" : ""}`}
                        >
                          <ChevronDown className="h-5 w-5" />
                        </div>
                      </button>
                      {activeDropdown === "resources" && (
                        <div className="py-2 px-4 bg-gradient-to-b from-slate-50 to-white animate-in slide-in-from-top-2 duration-300 ease-out">
                          {resources.map((item) => (
                            <Link
                              key={item.title}
                              href={item.href}
                              className="block text-center py-3 px-4 text-base font-medium text-slate-800 hover:text-orange-600 hover:bg-orange-50 rounded-lg transition-all duration-200 transform hover:scale-105"
                              onClick={() => setIsMobileMenuOpen(false)}
                            >
                              {item.title}
                            </Link>
                          ))}
                        </div>
                      )}
                    </div>
                  </nav>

{/* Footer CTA */}
                  <div className="px-6 py-6 border-t border-slate-200 bg-gradient-to-t from-slate-50 to-white">
                    <Button
                      className="w-full bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white font-semibold py-3 rounded-xl shadow-lg transform hover:scale-105 transition-all duration-200"
                      asChild
                    >
                      <Link href="/contact" onClick={() => setIsMobileMenuOpen(false)}>
                        Contact Us
                      </Link>
                    </Button>
                    <p className="text-center text-xs text-slate-500 mt-3">Get started with our solutions today</p>
                  </div>
                </div>
              </SheetContent>
            </Sheet>
          </div>
        </div>
      </header>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/interactive-demo.tsx" isMerged="true"
"use client"

import { useState } from "react"
import {
  BarChart3,
  Package,
  Users,
  ClipboardCheck,
  Play,
  ChevronRight,
  ChevronLeft,
  X,
  TrendingUp,
  AlertCircle,
  CheckCircle,
  Clock,
  Settings,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"

interface DemoStep {
  id: string
  title: string
  description: string
  module: string
  icon: any
}

const demoSteps: DemoStep[] = [
  {
    id: "dashboard",
    title: "Production Dashboard",
    description: "Get a real-time overview of your entire manufacturing operation",
    module: "dashboard",
    icon: BarChart3,
  },
  {
    id: "orders",
    title: "Order Management",
    description: "Track orders from placement to delivery with detailed status updates",
    module: "production",
    icon: ClipboardCheck,
  },
  {
    id: "inventory",
    title: "Inventory Tracking",
    description: "Monitor raw materials, WIP, and finished goods across all locations",
    module: "inventory",
    icon: Package,
  },
  {
    id: "quality",
    title: "Quality Control",
    description: "Implement quality checkpoints and track defects in real-time",
    module: "quality",
    icon: CheckCircle,
  },
  {
    id: "workers",
    title: "Worker Management",
    description: "Monitor productivity and manage workforce allocation efficiently",
    module: "production",
    icon: Users,
  },
]

export default function InteractiveDemo() {
  const [isOpen, setIsOpen] = useState(false)
  const [currentStep, setCurrentStep] = useState(0)
  const [selectedOrder, setSelectedOrder] = useState<string | null>(null)

const nextStep = () => {
    if (currentStep < demoSteps.length - 1) {
      setCurrentStep(currentStep + 1)
    }
  }

const prevStep = () => {
    if (currentStep > 0) {
      setCurrentStep(currentStep - 1)
    }
  }

const goToStep = (step: number) => {
    setCurrentStep(step)
  }

return (
    <>
      {/* Demo Trigger Section */}
      <section className="container mx-auto px-4 py-16 md:py-24">
        <div className="text-center mb-12">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">Interactive Experience</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Experience StitchIT in Action</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto mb-8">
            Take a guided tour through StitchIT's powerful features with our interactive demo. See how leading garment
            manufacturers manage their operations with our comprehensive solution.
          </p>
          <Button
            size="lg"
            onClick={() => setIsOpen(true)}
            className="bg-orange-600 hover:bg-orange-700 text-lg px-8 py-4"
          >
            <Play className="mr-2 h-5 w-5" />
            Start Interactive Demo
          </Button>
        </div>

{/* Demo Preview Cards */}
        <div className="grid md:grid-cols-3 lg:grid-cols-5 gap-6 mt-12">
          {demoSteps.map((step, index) => (
            <Card
              key={step.id}
              className="cursor-pointer hover:shadow-lg transition-shadow border-2 hover:border-orange-200"
              onClick={() => {
                setCurrentStep(index)
                setIsOpen(true)
              }}
            >
              <CardContent className="p-6 text-center space-y-4">
                <div className="h-12 w-12 rounded-lg bg-orange-100 flex items-center justify-center text-orange-600 mx-auto">
                  <step.icon className="h-6 w-6" />
                </div>
                <h3 className="font-semibold text-slate-900">{step.title}</h3>
                <p className="text-sm text-slate-600">{step.description}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

{/* Interactive Demo Modal */}
      <Dialog open={isOpen} onOpenChange={setIsOpen}>
        <DialogContent className="max-w-7xl h-[90vh] p-0">
          <DialogHeader className="p-6 pb-0">
            <div className="flex items-center justify-between">
              <div>
                <DialogTitle className="text-2xl font-bold">StitchIT Interactive Demo</DialogTitle>
                <p className="text-slate-600 mt-1">
                  Step {currentStep + 1} of {demoSteps.length}: {demoSteps[currentStep].title}
                </p>
              </div>
              <Button variant="ghost" size="icon" onClick={() => setIsOpen(false)}>
                <X className="h-4 w-4" />
              </Button>
            </div>

{/* Progress Bar */}
            <div className="mt-4">
              <Progress value={((currentStep + 1) / demoSteps.length) * 100} className="h-2" />
            </div>
          </DialogHeader>

<div className="flex-1 flex overflow-hidden">
            {/* Demo Navigation Sidebar */}
            <div className="w-80 border-r bg-slate-50 p-6 overflow-y-auto">
              <h3 className="font-semibold text-slate-900 mb-4">Demo Steps</h3>
              <div className="space-y-2">
                {demoSteps.map((step, index) => (
                  <button
                    key={step.id}
                    onClick={() => goToStep(index)}
                    className={`w-full text-left p-3 rounded-lg transition-colors ${
                      index === currentStep
                        ? "bg-orange-100 text-orange-700 border border-orange-200"
                        : "hover:bg-white"
                    }`}
                  >
                    <div className="flex items-center space-x-3">
                      <div
                        className={`h-8 w-8 rounded-full flex items-center justify-center ${
                          index === currentStep ? "bg-orange-600 text-white" : "bg-slate-200 text-slate-600"
                        }`}
                      >
                        <step.icon className="h-4 w-4" />
                      </div>
                      <div>
                        <div className="font-medium text-sm">{step.title}</div>
                        <div className="text-xs text-slate-500">{step.description}</div>
                      </div>
                    </div>
                  </button>
                ))}
              </div>
            </div>

{/* Demo Content Area */}
            <div className="flex-1 overflow-y-auto">
              {currentStep === 0 && <DashboardDemo />}
              {currentStep === 1 && (
                <OrderManagementDemo selectedOrder={selectedOrder} setSelectedOrder={setSelectedOrder} />
              )}
              {currentStep === 2 && <InventoryDemo />}
              {currentStep === 3 && <QualityControlDemo />}
              {currentStep === 4 && <WorkerManagementDemo />}
            </div>
          </div>

{/* Demo Navigation Footer */}
          <div className="border-t p-6 flex items-center justify-between">
            <Button variant="outline" onClick={prevStep} disabled={currentStep === 0}>
              <ChevronLeft className="mr-2 h-4 w-4" />
              Previous
            </Button>

<div className="text-sm text-slate-600">{demoSteps[currentStep].description}</div>

<Button
              onClick={nextStep}
              disabled={currentStep === demoSteps.length - 1}
              className="bg-orange-600 hover:bg-orange-700"
            >
              Next
              <ChevronRight className="ml-2 h-4 w-4" />
            </Button>
          </div>
        </DialogContent>
      </Dialog>
    </>
  )
}

// Dashboard Demo Component
function DashboardDemo() {
  return (
    <div className="p-6 space-y-6">
      <div className="mb-6">
        <h2 className="text-2xl font-bold text-slate-900 mb-2">Production Dashboard</h2>
        <p className="text-slate-600">Real-time overview of your manufacturing operations</p>
      </div>

{/* Key Metrics */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-slate-600">Active Orders</p>
                <p className="text-2xl font-bold text-slate-900">24</p>
              </div>
              <div className="h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center">
                <ClipboardCheck className="h-5 w-5 text-blue-600" />
              </div>
            </div>
            <div className="mt-2 flex items-center text-sm">
              <TrendingUp className="h-4 w-4 text-green-500 mr-1" />
              <span className="text-green-500">+12%</span>
              <span className="text-slate-500 ml-1">from last week</span>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-slate-600">Production Lines</p>
                <p className="text-2xl font-bold text-slate-900">8/10</p>
              </div>
              <div className="h-10 w-10 bg-green-100 rounded-full flex items-center justify-center">
                <Settings className="h-5 w-5 text-green-600" />
              </div>
            </div>
            <div className="mt-2">
              <Progress value={80} className="h-2" />
              <p className="text-xs text-slate-500 mt-1">80% utilization</p>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-slate-600">Quality Score</p>
                <p className="text-2xl font-bold text-slate-900">98.5%</p>
              </div>
              <div className="h-10 w-10 bg-orange-100 rounded-full flex items-center justify-center">
                <CheckCircle className="h-5 w-5 text-orange-600" />
              </div>
            </div>
            <div className="mt-2 flex items-center text-sm">
              <span className="text-green-500">+0.3%</span>
              <span className="text-slate-500 ml-1">from last month</span>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-slate-600">On-Time Delivery</p>
                <p className="text-2xl font-bold text-slate-900">94%</p>
              </div>
              <div className="h-10 w-10 bg-purple-100 rounded-full flex items-center justify-center">
                <Clock className="h-5 w-5 text-purple-600" />
              </div>
            </div>
            <div className="mt-2 flex items-center text-sm">
              <TrendingUp className="h-4 w-4 text-green-500 mr-1" />
              <span className="text-green-500">+2%</span>
              <span className="text-slate-500 ml-1">from last month</span>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Production Overview */}
      <div className="grid md:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle>Today's Production Status</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {[
                { line: "Line A", product: "Summer Dress", progress: 85, status: "On Track" },
                { line: "Line B", product: "Casual Shirt", progress: 92, status: "Ahead" },
                { line: "Line C", product: "Denim Jeans", progress: 67, status: "Behind" },
                { line: "Line D", product: "T-Shirt", progress: 78, status: "On Track" },
              ].map((item, index) => (
                <div key={index} className="flex items-center justify-between">
                  <div>
                    <p className="font-medium text-slate-900">{item.line}</p>
                    <p className="text-sm text-slate-600">{item.product}</p>
                  </div>
                  <div className="text-right">
                    <p className="text-sm font-medium">{item.progress}%</p>
                    <Badge
                      variant={
                        item.status === "Ahead" ? "default" : item.status === "Behind" ? "destructive" : "secondary"
                      }
                      className="text-xs"
                    >
                      {item.status}
                    </Badge>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Recent Alerts</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {[
                { type: "warning", message: "Low inventory: Cotton fabric below reorder point", time: "2 min ago" },
                { type: "success", message: "Order #1234 completed and ready for shipping", time: "15 min ago" },
                { type: "info", message: "Quality inspection scheduled for Line C", time: "1 hour ago" },
                { type: "warning", message: "Machine maintenance due for Cutting Unit 2", time: "2 hours ago" },
              ].map((alert, index) => (
                <div key={index} className="flex items-start space-x-3">
                  <div
                    className={`h-2 w-2 rounded-full mt-2 ${
                      alert.type === "warning"
                        ? "bg-yellow-500"
                        : alert.type === "success"
                          ? "bg-green-500"
                          : "bg-blue-500"
                    }`}
                  />
                  <div className="flex-1">
                    <p className="text-sm text-slate-900">{alert.message}</p>
                    <p className="text-xs text-slate-500">{alert.time}</p>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}

// Order Management Demo Component
function OrderManagementDemo({
  selectedOrder,
  setSelectedOrder,
}: {
  selectedOrder: string | null
  setSelectedOrder: (id: string | null) => void
}) {
  const orders = [
    {
      id: "ORD-001",
      customer: "Fashion Forward Inc.",
      product: "Summer Collection",
      quantity: 500,
      status: "In Production",
      progress: 75,
      dueDate: "2024-01-15",
    },
    {
      id: "ORD-002",
      customer: "Urban Style Co.",
      product: "Casual Wear",
      quantity: 300,
      status: "Quality Check",
      progress: 90,
      dueDate: "2024-01-18",
    },
    {
      id: "ORD-003",
      customer: "Trendy Threads",
      product: "Formal Shirts",
      quantity: 200,
      status: "Cutting",
      progress: 45,
      dueDate: "2024-01-20",
    },
    {
      id: "ORD-004",
      customer: "Style Hub",
      product: "Denim Collection",
      quantity: 400,
      status: "Completed",
      progress: 100,
      dueDate: "2024-01-12",
    },
  ]

return (
    <div className="p-6 space-y-6">
      <div className="mb-6">
        <h2 className="text-2xl font-bold text-slate-900 mb-2">Order Management</h2>
        <p className="text-slate-600">Track and manage orders from placement to delivery</p>
      </div>

<div className="grid md:grid-cols-3 gap-6">
        {/* Orders List */}
        <div className="md:col-span-2">
          <Card>
            <CardHeader>
              <CardTitle>Active Orders</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                {orders.map((order) => (
                  <div
                    key={order.id}
                    className={`p-4 border rounded-lg cursor-pointer transition-colors ${
                      selectedOrder === order.id ? "border-orange-200 bg-orange-50" : "hover:bg-slate-50"
                    }`}
                    onClick={() => setSelectedOrder(order.id)}
                  >
                    <div className="flex items-center justify-between mb-2">
                      <div>
                        <p className="font-medium text-slate-900">{order.id}</p>
                        <p className="text-sm text-slate-600">{order.customer}</p>
                      </div>
                      <Badge variant={order.status === "Completed" ? "default" : "secondary"} className="text-xs">
                        {order.status}
                      </Badge>
                    </div>
                    <div className="space-y-2">
                      <div className="flex justify-between text-sm">
                        <span className="text-slate-600">Product:</span>
                        <span className="text-slate-900">{order.product}</span>
                      </div>
                      <div className="flex justify-between text-sm">
                        <span className="text-slate-600">Quantity:</span>
                        <span className="text-slate-900">{order.quantity} units</span>
                      </div>
                      <div className="flex justify-between text-sm">
                        <span className="text-slate-600">Due Date:</span>
                        <span className="text-slate-900">{order.dueDate}</span>
                      </div>
                      <div className="mt-2">
                        <div className="flex justify-between text-sm mb-1">
                          <span className="text-slate-600">Progress</span>
                          <span className="text-slate-900">{order.progress}%</span>
                        </div>
                        <Progress value={order.progress} className="h-2" />
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>

{/* Order Details */}
        <div>
          <Card>
            <CardHeader>
              <CardTitle>Order Details</CardTitle>
            </CardHeader>
            <CardContent>
              {selectedOrder ? (
                <div className="space-y-4">
                  {(() => {
                    const order = orders.find((o) => o.id === selectedOrder)!
                    return (
                      <>
                        <div>
                          <p className="text-sm text-slate-600">Order ID</p>
                          <p className="font-medium">{order.id}</p>
                        </div>
                        <div>
                          <p className="text-sm text-slate-600">Customer</p>
                          <p className="font-medium">{order.customer}</p>
                        </div>
                        <div>
                          <p className="text-sm text-slate-600">Product Line</p>
                          <p className="font-medium">{order.product}</p>
                        </div>
                        <div>
                          <p className="text-sm text-slate-600">Status</p>
                          <Badge className="mt-1">{order.status}</Badge>
                        </div>
                        <div>
                          <p className="text-sm text-slate-600">Production Timeline</p>
                          <div className="mt-2 space-y-2">
                            {[
                              { stage: "Order Received", completed: true },
                              { stage: "Material Sourcing", completed: true },
                              { stage: "Cutting", completed: order.progress >= 30 },
                              { stage: "Sewing", completed: order.progress >= 60 },
                              { stage: "Quality Check", completed: order.progress >= 90 },
                              { stage: "Packaging", completed: order.progress === 100 },
                            ].map((stage, index) => (
                              <div key={index} className="flex items-center space-x-2">
                                <div
                                  className={`h-2 w-2 rounded-full ${
                                    stage.completed ? "bg-green-500" : "bg-slate-300"
                                  }`}
                                />
                                <span className={`text-sm ${stage.completed ? "text-slate-900" : "text-slate-500"}`}>
                                  {stage.stage}
                                </span>
                              </div>
                            ))}
                          </div>
                        </div>
                      </>
                    )
                  })()}
                </div>
              ) : (
                <p className="text-slate-500 text-center py-8">Select an order to view details</p>
              )}
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}

// Inventory Demo Component
function InventoryDemo() {
  return (
    <div className="p-6 space-y-6">
      <div className="mb-6">
        <h2 className="text-2xl font-bold text-slate-900 mb-2">Inventory Management</h2>
        <p className="text-slate-600">Monitor and manage your raw materials and finished goods</p>
      </div>

<Tabs defaultValue="materials" className="w-full">
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="materials">Raw Materials</TabsTrigger>
          <TabsTrigger value="wip">Work in Progress</TabsTrigger>
          <TabsTrigger value="finished">Finished Goods</TabsTrigger>
        </TabsList>

<TabsContent value="materials" className="space-y-4">
          <div className="grid md:grid-cols-2 gap-6">
            <Card>
              <CardHeader>
                <CardTitle>Material Inventory</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {[
                    { material: "Cotton Fabric", current: 2500, reorder: 1000, unit: "yards", status: "Good" },
                    { material: "Polyester Thread", current: 450, reorder: 500, unit: "spools", status: "Low" },
                    { material: "Buttons (White)", current: 15000, reorder: 5000, unit: "pieces", status: "Good" },
                    { material: "Zippers", current: 800, reorder: 1200, unit: "pieces", status: "Critical" },
                  ].map((item, index) => (
                    <div key={index} className="flex items-center justify-between p-3 border rounded-lg">
                      <div>
                        <p className="font-medium text-slate-900">{item.material}</p>
                        <p className="text-sm text-slate-600">
                          {item.current} {item.unit} available
                        </p>
                      </div>
                      <div className="text-right">
                        <Badge
                          variant={
                            item.status === "Critical" ? "destructive" : item.status === "Low" ? "secondary" : "default"
                          }
                        >
                          {item.status}
                        </Badge>
                        {item.current < item.reorder && (
                          <p className="text-xs text-red-600 mt-1">Below reorder point</p>
                        )}
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Inventory Alerts</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  {[
                    { type: "critical", message: "Zippers inventory critically low", action: "Reorder Now" },
                    { type: "warning", message: "Polyester Thread below reorder point", action: "Review" },
                    { type: "info", message: "New shipment of Cotton Fabric arriving tomorrow", action: "Prepare" },
                  ].map((alert, index) => (
                    <div key={index} className="flex items-start justify-between p-3 border rounded-lg">
                      <div className="flex items-start space-x-2">
                        <AlertCircle
                          className={`h-4 w-4 mt-0.5 ${
                            alert.type === "critical"
                              ? "text-red-500"
                              : alert.type === "warning"
                                ? "text-yellow-500"
                                : "text-blue-500"
                          }`}
                        />
                        <p className="text-sm text-slate-900">{alert.message}</p>
                      </div>
                      <Button size="sm" variant="outline" className="text-xs">
                        {alert.action}
                      </Button>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

<TabsContent value="wip" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Work in Progress</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {[
                  { order: "ORD-001", stage: "Cutting", quantity: 500, completed: 375, line: "Line A" },
                  { order: "ORD-002", stage: "Sewing", quantity: 300, completed: 270, line: "Line B" },
                  { order: "ORD-003", stage: "Quality Check", quantity: 200, completed: 180, line: "Line C" },
                ].map((item, index) => (
                  <div key={index} className="p-4 border rounded-lg">
                    <div className="flex justify-between items-start mb-3">
                      <div>
                        <p className="font-medium text-slate-900">{item.order}</p>
                        <p className="text-sm text-slate-600">
                          {item.stage} - {item.line}
                        </p>
                      </div>
                      <Badge variant="secondary">{Math.round((item.completed / item.quantity) * 100)}%</Badge>
                    </div>
                    <div className="space-y-2">
                      <div className="flex justify-between text-sm">
                        <span>
                          Progress: {item.completed} / {item.quantity} units
                        </span>
                      </div>
                      <Progress value={(item.completed / item.quantity) * 100} className="h-2" />
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="finished" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Finished Goods</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {[
                  { product: "Summer Dress - Blue", quantity: 150, location: "Warehouse A", status: "Ready to Ship" },
                  {
                    product: "Casual Shirt - White",
                    quantity: 200,
                    location: "Warehouse B",
                    status: "Quality Approved",
                  },
                  {
                    product: "Denim Jeans - Dark Blue",
                    quantity: 100,
                    location: "Warehouse A",
                    status: "Awaiting Pickup",
                  },
                ].map((item, index) => (
                  <div key={index} className="flex items-center justify-between p-3 border rounded-lg">
                    <div>
                      <p className="font-medium text-slate-900">{item.product}</p>
                      <p className="text-sm text-slate-600">
                        {item.quantity} units - {item.location}
                      </p>
                    </div>
                    <Badge variant="default">{item.status}</Badge>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}

// Quality Control Demo Component
function QualityControlDemo() {
  return (
    <div className="p-6 space-y-6">
      <div className="mb-6">
        <h2 className="text-2xl font-bold text-slate-900 mb-2">Quality Control</h2>
        <p className="text-slate-600">Monitor quality metrics and manage inspection processes</p>
      </div>

<div className="grid md:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle>Quality Metrics</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="text-center">
                <div className="text-4xl font-bold text-green-600 mb-2">98.5%</div>
                <p className="text-slate-600">Overall Quality Score</p>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="text-center p-3 bg-slate-50 rounded-lg">
                  <div className="text-2xl font-bold text-slate-900">15</div>
                  <p className="text-sm text-slate-600">Inspections Today</p>
                </div>
                <div className="text-center p-3 bg-slate-50 rounded-lg">
                  <div className="text-2xl font-bold text-slate-900">2</div>
                  <p className="text-sm text-slate-600">Defects Found</p>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Recent Inspections</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {[
                { order: "ORD-001", inspector: "John Smith", result: "Passed", defects: 0, time: "10:30 AM" },
                { order: "ORD-002", inspector: "Sarah Johnson", result: "Passed", defects: 1, time: "11:15 AM" },
                { order: "ORD-003", inspector: "Mike Wilson", result: "Failed", defects: 5, time: "12:00 PM" },
              ].map((inspection, index) => (
                <div key={index} className="flex items-center justify-between p-3 border rounded-lg">
                  <div>
                    <p className="font-medium text-slate-900">{inspection.order}</p>
                    <p className="text-sm text-slate-600">
                      {inspection.inspector} - {inspection.time}
                    </p>
                  </div>
                  <div className="text-right">
                    <Badge variant={inspection.result === "Passed" ? "default" : "destructive"} className="mb-1">
                      {inspection.result}
                    </Badge>
                    <p className="text-xs text-slate-500">{inspection.defects} defects</p>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Defect Analysis</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid md:grid-cols-3 gap-4">
            {[
              { type: "Stitching Issues", count: 8, percentage: 40 },
              { type: "Color Variation", count: 5, percentage: 25 },
              { type: "Size Discrepancy", count: 4, percentage: 20 },
              { type: "Material Defects", count: 3, percentage: 15 },
            ].map((defect, index) => (
              <div key={index} className="p-4 border rounded-lg">
                <div className="flex justify-between items-center mb-2">
                  <p className="font-medium text-slate-900">{defect.type}</p>
                  <Badge variant="secondary">{defect.count}</Badge>
                </div>
                <Progress value={defect.percentage} className="h-2" />
                <p className="text-xs text-slate-500 mt-1">{defect.percentage}% of total defects</p>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}

// Worker Management Demo Component
function WorkerManagementDemo() {
  return (
    <div className="p-6 space-y-6">
      <div className="mb-6">
        <h2 className="text-2xl font-bold text-slate-900 mb-2">Worker Management</h2>
        <p className="text-slate-600">Monitor workforce productivity and manage shift allocations</p>
      </div>

<div className="grid md:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle>Workforce Overview</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-2 gap-4 mb-4">
              <div className="text-center p-3 bg-slate-50 rounded-lg">
                <div className="text-2xl font-bold text-slate-900">85</div>
                <p className="text-sm text-slate-600">Active Workers</p>
              </div>
              <div className="text-center p-3 bg-slate-50 rounded-lg">
                <div className="text-2xl font-bold text-slate-900">92%</div>
                <p className="text-sm text-slate-600">Attendance Rate</p>
              </div>
            </div>
            <div className="space-y-3">
              {[
                { shift: "Morning Shift", workers: 35, capacity: 40, efficiency: 95 },
                { shift: "Afternoon Shift", workers: 30, capacity: 35, efficiency: 88 },
                { shift: "Night Shift", workers: 20, capacity: 25, efficiency: 92 },
              ].map((shift, index) => (
                <div key={index} className="p-3 border rounded-lg">
                  <div className="flex justify-between items-center mb-2">
                    <p className="font-medium text-slate-900">{shift.shift}</p>
                    <Badge variant="secondary">{shift.efficiency}% efficiency</Badge>
                  </div>
                  <div className="flex justify-between text-sm text-slate-600 mb-1">
                    <span>
                      {shift.workers} / {shift.capacity} workers
                    </span>
                    <span>{Math.round((shift.workers / shift.capacity) * 100)}% capacity</span>
                  </div>
                  <Progress value={(shift.workers / shift.capacity) * 100} className="h-2" />
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Top Performers</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {[
                { name: "Maria Garcia", role: "Sewing Operator", efficiency: 118, units: 145 },
                { name: "James Chen", role: "Cutting Specialist", efficiency: 112, units: 134 },
                { name: "Anna Kowalski", role: "Quality Inspector", efficiency: 108, units: 98 },
                { name: "David Rodriguez", role: "Finishing Operator", efficiency: 105, units: 156 },
              ].map((worker, index) => (
                <div key={index} className="flex items-center justify-between p-3 border rounded-lg">
                  <div>
                    <p className="font-medium text-slate-900">{worker.name}</p>
                    <p className="text-sm text-slate-600">{worker.role}</p>
                  </div>
                  <div className="text-right">
                    <p className="text-sm font-medium text-green-600">{worker.efficiency}%</p>
                    <p className="text-xs text-slate-500">{worker.units} units today</p>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Production Line Status</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid md:grid-cols-2 gap-4">
            {[
              { line: "Line A", supervisor: "Tom Wilson", workers: 12, target: 200, completed: 185, efficiency: 92 },
              { line: "Line B", supervisor: "Lisa Brown", workers: 10, target: 150, completed: 165, efficiency: 110 },
              { line: "Line C", supervisor: "Mike Davis", workers: 8, target: 120, completed: 95, efficiency: 79 },
              { line: "Line D", supervisor: "Sarah Lee", workers: 15, target: 250, completed: 240, efficiency: 96 },
            ].map((line, index) => (
              <div key={index} className="p-4 border rounded-lg">
                <div className="flex justify-between items-center mb-3">
                  <div>
                    <p className="font-medium text-slate-900">{line.line}</p>
                    <p className="text-sm text-slate-600">
                      {line.supervisor} - {line.workers} workers
                    </p>
                  </div>
                  <Badge
                    variant={line.efficiency >= 100 ? "default" : line.efficiency >= 90 ? "secondary" : "destructive"}
                  >
                    {line.efficiency}%
                  </Badge>
                </div>
                <div className="space-y-2">
                  <div className="flex justify-between text-sm">
                    <span>
                      Progress: {line.completed} / {line.target} units
                    </span>
                  </div>
                  <Progress value={(line.completed / line.target) * 100} className="h-2" />
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/pricing-section.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { CheckCircle, ArrowRight, Star, Zap, Shield, HeadphonesIcon, Calculator, MessageSquare } from "lucide-react"

interface PricingTier {
  name: string
  price: string
  period: string
  description: string
  features: string[]
  popular?: boolean
  cta: string
}

interface PricingData {
  [key: string]: {
    tiers: PricingTier[]
    description: string
  }
}

const pricingData: PricingData = {
  stitchit: {
    description: "Flexible pricing plans for garment manufacturers of all sizes",
    tiers: [
      {
        name: "Starter",
        price: "₹15,000",
        period: "/month",
        description: "Perfect for small garment units with basic requirements",
        features: [
          "Up to 50 orders/month",
          "Basic inventory management",
          "Production tracking",
          "Email support",
          "2 user accounts",
          "Basic reporting",
        ],
        cta: "Start Free Trial",
      },
      {
        name: "Professional",
        price: "₹35,000",
        period: "/month",
        description: "Ideal for growing manufacturers with advanced needs",
        features: [
          "Up to 200 orders/month",
          "Advanced inventory management",
          "Quality control module",
          "Priority support",
          "10 user accounts",
          "Advanced analytics",
          "Mobile app access",
          "API integrations",
        ],
        popular: true,
        cta: "Get Started",
      },
      {
        name: "Enterprise",
        price: "Custom",
        period: "pricing",
        description: "Tailored solutions for large-scale operations",
        features: [
          "Unlimited orders",
          "Full feature access",
          "Custom integrations",
          "Dedicated support",
          "Unlimited users",
          "Custom reporting",
          "On-premise deployment",
          "Training & onboarding",
        ],
        cta: "Contact Sales",
      },
    ],
  },
  washit: {
    description: "Comprehensive pricing for laundry and dry cleaning businesses",
    tiers: [
      {
        name: "Basic",
        price: "₹12,000",
        period: "/month",
        description: "Essential features for small laundry operations",
        features: [
          "Up to 100 customers",
          "Basic billing system",
          "Customer management",
          "Email support",
          "2 user accounts",
          "Basic reports",
        ],
        cta: "Start Free Trial",
      },
      {
        name: "Standard",
        price: "₹25,000",
        period: "/month",
        description: "Complete solution for growing laundry businesses",
        features: [
          "Up to 500 customers",
          "Advanced billing & GST",
          "Route optimization",
          "Mobile app for drivers",
          "5 user accounts",
          "Advanced analytics",
          "SMS notifications",
          "Inventory management",
        ],
        popular: true,
        cta: "Get Started",
      },
      {
        name: "Premium",
        price: "Custom",
        period: "pricing",
        description: "Enterprise-grade solution for large operations",
        features: [
          "Unlimited customers",
          "Multi-location support",
          "Custom integrations",
          "Dedicated support",
          "Unlimited users",
          "White-label solution",
          "API access",
          "Custom features",
        ],
        cta: "Contact Sales",
      },
    ],
  },
  digitail: {
    description: "Scalable e-commerce solutions for online retailers",
    tiers: [
      {
        name: "Startup",
        price: "₹18,000",
        period: "/month",
        description: "Perfect for new e-commerce businesses",
        features: [
          "Up to 1,000 products",
          "2 sales channels",
          "Basic analytics",
          "Email support",
          "3 user accounts",
          "Standard integrations",
        ],
        cta: "Start Free Trial",
      },
      {
        name: "Growth",
        price: "₹40,000",
        period: "/month",
        description: "Advanced features for scaling businesses",
        features: [
          "Up to 10,000 products",
          "5 sales channels",
          "Advanced analytics",
          "Priority support",
          "10 user accounts",
          "Custom integrations",
          "Automated workflows",
          "Multi-warehouse support",
        ],
        popular: true,
        cta: "Get Started",
      },
      {
        name: "Enterprise",
        price: "Custom",
        period: "pricing",
        description: "Complete solution for large retailers",
        features: [
          "Unlimited products",
          "Unlimited channels",
          "Custom analytics",
          "Dedicated support",
          "Unlimited users",
          "White-label solution",
          "Custom development",
          "SLA guarantee",
        ],
        cta: "Contact Sales",
      },
    ],
  },
  hrtech: {
    description: "Affordable HR solutions for businesses of all sizes",
    tiers: [
      {
        name: "Essential",
        price: "₹8,000",
        period: "/month",
        description: "Basic HR management for small teams",
        features: [
          "Up to 50 employees",
          "Basic payroll",
          "Attendance tracking",
          "Email support",
          "2 user accounts",
          "Standard reports",
        ],
        cta: "Start Free Trial",
      },
      {
        name: "Professional",
        price: "₹20,000",
        period: "/month",
        description: "Complete HR solution for growing companies",
        features: [
          "Up to 200 employees",
          "Advanced payroll",
          "Performance management",
          "Priority support",
          "5 user accounts",
          "Advanced analytics",
          "Mobile app",
          "Compliance management",
        ],
        popular: true,
        cta: "Get Started",
      },
      {
        name: "Enterprise",
        price: "Custom",
        period: "pricing",
        description: "Comprehensive HR suite for large organizations",
        features: [
          "Unlimited employees",
          "Custom workflows",
          "Advanced compliance",
          "Dedicated support",
          "Unlimited users",
          "Custom integrations",
          "Multi-location support",
          "Training included",
        ],
        cta: "Contact Sales",
      },
    ],
  },
}

export default function PricingSection() {
  const [selectedProduct, setSelectedProduct] = useState("stitchit")
  const [isCalculatorOpen, setIsCalculatorOpen] = useState(false)
  const [isContactOpen, setIsContactOpen] = useState(false)

return (
    <section className="py-16 md:py-24 bg-gradient-to-br from-slate-50 to-slate-100">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">Transparent Pricing</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">
            Choose the Perfect Plan for Your Business
          </h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            Flexible pricing options designed to grow with your business. No hidden fees, no long-term contracts.
          </p>
        </div>

<Tabs value={selectedProduct} onValueChange={setSelectedProduct} className="w-full">
          <div className="flex justify-center mb-8">
            <TabsList className="grid grid-cols-2 md:grid-cols-4 gap-2 h-auto p-2">
              <TabsTrigger value="stitchit" className="flex flex-col items-center p-4">
                <div className="font-medium">StitchIT</div>
                <div className="text-xs text-slate-500">Garment Manufacturing</div>
              </TabsTrigger>
              <TabsTrigger value="washit" className="flex flex-col items-center p-4">
                <div className="font-medium">WashIT</div>
                <div className="text-xs text-slate-500">Laundry Management</div>
              </TabsTrigger>
              <TabsTrigger value="digitail" className="flex flex-col items-center p-4">
                <div className="font-medium">DigitAil</div>
                <div className="text-xs text-slate-500">E-commerce Solution</div>
              </TabsTrigger>
              <TabsTrigger value="hrtech" className="flex flex-col items-center p-4">
                <div className="font-medium">HR TECH</div>
                <div className="text-xs text-slate-500">HR Management</div>
              </TabsTrigger>
            </TabsList>
          </div>

{Object.entries(pricingData).map(([product, data]) => (
            <TabsContent key={product} value={product} className="mt-0">
              <div className="text-center mb-8">
                <p className="text-lg text-slate-600">{data.description}</p>
              </div>

<div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
                {data.tiers.map((tier, index) => (
                  <Card
                    key={index}
                    className={`relative ${
                      tier.popular ? "ring-2 ring-orange-200 shadow-xl scale-105" : "shadow-lg"
                    } transition-all duration-300 hover:shadow-xl`}
                  >
                    {tier.popular && (
                      <div className="absolute -top-4 left-1/2 -translate-x-1/2">
                        <Badge className="bg-orange-600 text-white px-4 py-1">
                          <Star className="h-3 w-3 mr-1" />
                          Most Popular
                        </Badge>
                      </div>
                    )}

<CardHeader className="text-center pb-4">
                      <CardTitle className="text-2xl font-bold text-slate-900">{tier.name}</CardTitle>
                      <div className="mt-4">
                        <span className="text-4xl font-bold text-slate-900">{tier.price}</span>
                        <span className="text-slate-600">{tier.period}</span>
                      </div>
                      <p className="text-slate-600 mt-2">{tier.description}</p>
                    </CardHeader>

<CardContent className="space-y-6">
                      <ul className="space-y-3">
                        {tier.features.map((feature, featureIndex) => (
                          <li key={featureIndex} className="flex items-start space-x-3">
                            <CheckCircle className="h-5 w-5 text-green-500 flex-shrink-0 mt-0.5" />
                            <span className="text-slate-600">{feature}</span>
                          </li>
                        ))}
                      </ul>

<Button
                        className={`w-full ${
                          tier.popular ? "bg-orange-600 hover:bg-orange-700" : "bg-slate-900 hover:bg-slate-800"
                        }`}
                        onClick={() => {
                          if (tier.cta === "Contact Sales") {
                            setIsContactOpen(true)
                          }
                        }}
                      >
                        {tier.cta}
                        <ArrowRight className="ml-2 h-4 w-4" />
                      </Button>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </TabsContent>
          ))}
        </Tabs>

{/* Additional Features */}
        <div className="mt-16 grid md:grid-cols-3 gap-8 max-w-4xl mx-auto">
          <div className="text-center space-y-4">
            <div className="h-16 w-16 rounded-full bg-orange-100 flex items-center justify-center mx-auto">
              <Shield className="h-8 w-8 text-orange-600" />
            </div>
            <h3 className="text-xl font-semibold text-slate-900">30-Day Money Back</h3>
            <p className="text-slate-600">Not satisfied? Get a full refund within 30 days, no questions asked.</p>
          </div>

<div className="text-center space-y-4">
            <div className="h-16 w-16 rounded-full bg-blue-100 flex items-center justify-center mx-auto">
              <HeadphonesIcon className="h-8 w-8 text-blue-600" />
            </div>
            <h3 className="text-xl font-semibold text-slate-900">24/7 Support</h3>
            <p className="text-slate-600">Get help whenever you need it with our dedicated support team.</p>
          </div>

<div className="text-center space-y-4">
            <div className="h-16 w-16 rounded-full bg-green-100 flex items-center justify-center mx-auto">
              <Zap className="h-8 w-8 text-green-600" />
            </div>
            <h3 className="text-xl font-semibold text-slate-900">Quick Setup</h3>
            <p className="text-slate-600">Get up and running in minutes with our easy setup process.</p>
          </div>
        </div>

{/* CTA Buttons */}
        <div className="text-center mt-12 space-y-4">
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Dialog open={isCalculatorOpen} onOpenChange={setIsCalculatorOpen}>
              <DialogTrigger asChild>
                <Button size="lg" variant="outline" className="gap-2">
                  <Calculator className="h-4 w-4" />
                  Calculate Your Savings
                </Button>
              </DialogTrigger>
              <DialogContent className="max-w-md">
                <DialogHeader>
                  <DialogTitle>ROI Calculator</DialogTitle>
                </DialogHeader>
                <div className="space-y-4">
                  <div>
                    <Label htmlFor="employees">Number of Employees</Label>
                    <Input id="employees" type="number" placeholder="50" />
                  </div>
                  <div>
                    <Label htmlFor="revenue">Monthly Revenue (₹)</Label>
                    <Input id="revenue" type="number" placeholder="1000000" />
                  </div>
                  <div>
                    <Label htmlFor="solution">Select Solution</Label>
                    <Select>
                      <SelectTrigger>
                        <SelectValue placeholder="Choose a solution" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="stitchit">StitchIT</SelectItem>
                        <SelectItem value="washit">WashIT</SelectItem>
                        <SelectItem value="digitail">DigitAil</SelectItem>
                        <SelectItem value="hrtech">HR TECH</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="bg-orange-50 p-4 rounded-lg">
                    <h4 className="font-semibold text-slate-900 mb-2">Estimated Savings</h4>
                    <div className="text-2xl font-bold text-orange-600">₹2,50,000/month</div>
                    <p className="text-sm text-slate-600">Based on 35% efficiency improvement</p>
                  </div>
                  <Button className="w-full bg-orange-600 hover:bg-orange-700">Get Detailed Report</Button>
                </div>
              </DialogContent>
            </Dialog>

<Dialog open={isContactOpen} onOpenChange={setIsContactOpen}>
              <DialogTrigger asChild>
                <Button size="lg" className="bg-orange-600 hover:bg-orange-700 gap-2">
                  <MessageSquare className="h-4 w-4" />
                  Get Custom Quote
                </Button>
              </DialogTrigger>
              <DialogContent className="max-w-md">
                <DialogHeader>
                  <DialogTitle>Get Custom Pricing</DialogTitle>
                </DialogHeader>
                <div className="space-y-4">
                  <div>
                    <Label htmlFor="company">Company Name</Label>
                    <Input id="company" placeholder="Your Company" />
                  </div>
                  <div>
                    <Label htmlFor="email">Email</Label>
                    <Input id="email" type="email" placeholder="you@company.com" />
                  </div>
                  <div>
                    <Label htmlFor="phone">Phone</Label>
                    <Input id="phone" placeholder="+91 98765 43210" />
                  </div>
                  <div>
                    <Label htmlFor="solution-interest">Solution Interest</Label>
                    <Select>
                      <SelectTrigger>
                        <SelectValue placeholder="Select solution" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="stitchit">StitchIT</SelectItem>
                        <SelectItem value="washit">WashIT</SelectItem>
                        <SelectItem value="digitail">DigitAil</SelectItem>
                        <SelectItem value="hrtech">HR TECH</SelectItem>
                        <SelectItem value="custom">Custom ERP</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div>
                    <Label htmlFor="requirements">Requirements</Label>
                    <Textarea id="requirements" placeholder="Tell us about your specific needs..." />
                  </div>
                  <Button className="w-full bg-orange-600 hover:bg-orange-700">Send Request</Button>
                </div>
              </DialogContent>
            </Dialog>
          </div>
          <p className="text-sm text-slate-500">
            Need help choosing? Our experts are here to help you find the perfect solution.
          </p>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/seo-optimized-content.tsx" isMerged="true"
export default function SEOOptimizedContent() {
  return (
    <>
      {/* Hidden SEO Content */}
      <div className="sr-only">
        <h2>Leading ERP Software Solutions in India</h2>
        <p>
          Nuvatech Technology is a premier software development company based in Ahmedabad, Gujarat, specializing in
          industry-specific ERP solutions. Our comprehensive software suite includes StitchIT for garment manufacturing,
          WashIT for laundry management, DigitAil for e-commerce, and HR TECH for human resource management.
        </p>

<h3>Our Core Products and Services</h3>
        <ul>
          <li>StitchIT - Complete garment manufacturing ERP with production planning and inventory management</li>
          <li>WashIT - Industrial laundry management system with customer management and billing automation</li>
          <li>DigitAil - E-commerce solution with multi-channel integration and analytics</li>
          <li>HR TECH - Advanced HR management system with payroll automation and compliance</li>
        </ul>

<h3>Industries We Serve</h3>
        <ul>
          <li>Textile and Garment Manufacturing</li>
          <li>Commercial Laundry and Dry Cleaning</li>
          <li>E-commerce and Retail</li>
          <li>Manufacturing and Production</li>
          <li>Service Industries</li>
        </ul>

<h3>Why Choose Nuvatech Technology</h3>
        <ul>
          <li>10+ years of industry experience</li>
          <li>500+ satisfied customers across India</li>
          <li>Proven ROI of 300%+ for our clients</li>
          <li>24/7 customer support and maintenance</li>
          <li>Quick implementation in 4-6 weeks</li>
          <li>Customizable solutions for specific business needs</li>
        </ul>

<h3>Service Areas</h3>
        <p>
          We serve clients across India including major cities like Mumbai, Delhi, Bangalore, Chennai, Kolkata, Pune,
          Hyderabad, Ahmedabad, Surat, and many more. Our solutions are designed to meet the specific needs of Indian
          businesses while ensuring compliance with local regulations.
        </p>
      </div>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/solution-tickers.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Scissors, Droplets, ShoppingCart, Users } from "lucide-react"

interface Solution {
  id: string
  title: string
  tagline: string
  description: string
  icon: any
  color: string
  bgGradient: string
  features: string[]
  stats: {
    label: string
    value: string
  }[]
}

const solutions: Solution[] = [
  {
    id: "stitchit",
    title: "StitchIT",
    tagline: "Cut to Pack Software Solution",
    description:
      "Complete garment manufacturing solution optimizing processes from sampling to production, procurement to invoicing.",
    icon: Scissors,
    color: "text-orange-600",
    bgGradient: "from-orange-100 to-red-100",
    features: ["Production Planning", "Inventory Management", "Quality Control", "Financial Integration"],
    stats: [
      { label: "Efficiency Increase", value: "35%" },
      { label: "Waste Reduction", value: "25%" },
      { label: "Faster Delivery", value: "40%" },
    ],
  },
  {
    id: "washit",
    title: "WashIT",
    tagline: "Complete IT Solution For Industrial Laundry",
    description:
      "Transform your laundry operations with end-to-end management covering customer relations, billing, and operational efficiency.",
    icon: Droplets,
    color: "text-blue-600",
    bgGradient: "from-blue-100 to-cyan-100",
    features: ["Customer Management", "Route Optimization", "Automated Billing", "Real-time Tracking"],
    stats: [
      { label: "Billing Accuracy", value: "98%" },
      { label: "Route Efficiency", value: "40%" },
      { label: "Cost Reduction", value: "30%" },
    ],
  },
  {
    id: "digitail",
    title: "DigitAil",
    tagline: "Complete E-commerce Solution",
    description:
      "Build and scale your online business with comprehensive e-commerce platform featuring advanced analytics and seamless integrations.",
    icon: ShoppingCart,
    color: "text-purple-600",
    bgGradient: "from-purple-100 to-pink-100",
    features: ["Multi-channel Sales", "Inventory Sync", "Payment Gateway", "Analytics Dashboard"],
    stats: [
      { label: "Sales Growth", value: "65%" },
      { label: "Order Accuracy", value: "95%" },
      { label: "Customer Retention", value: "45%" },
    ],
  },
  {
    id: "hrtech",
    title: "HR TECH",
    tagline: "Calculate Salary at Your Finger Tip",
    description:
      "Simplify HR operations with intuitive payroll and employee management system designed for modern businesses.",
    icon: Users,
    color: "text-green-600",
    bgGradient: "from-green-100 to-emerald-100",
    features: ["Payroll Automation", "Employee Self-Service", "Compliance Management", "Performance Tracking"],
    stats: [
      { label: "Payroll Accuracy", value: "99%" },
      { label: "Time Savings", value: "80%" },
      { label: "HR Efficiency", value: "70%" },
    ],
  },
]

export default function SolutionTickers() {
  const [currentIndex, setCurrentIndex] = useState(0)
  const [isPlaying, setIsPlaying] = useState(true)

useEffect(() => {
    if (!isPlaying) return

const interval = setInterval(() => {
      setCurrentIndex((prev) => (prev + 1) % solutions.length)
    }, 5000)

return () => clearInterval(interval)
  }, [isPlaying])

const nextSlide = () => {
    setCurrentIndex((prev) => (prev + 1) % solutions.length)
  }

const prevSlide = () => {
    setCurrentIndex((prev) => (prev - 1 + solutions.length) % solutions.length)
  }

const goToSlide = (index: number) => {
    setCurrentIndex(index)
  }

const currentSolution = solutions[currentIndex]

return null
}
[V0_FILE]typescriptreact:file="components/testimonial-carousel.tsx" isMerged="true"
"use client"

import { useState, useEffect, useRef } from "react"
import Image from "next/image"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { ChevronLeft, ChevronRight, Star, Quote, ArrowRight, Play, Pause, MapPin } from "lucide-react"
import AnimatedCounter from "./animated-counter"
import AnimatedStat from "./animated-stat"
import { useRouter } from "next/navigation"

interface Testimonial {
  id: string
  company: string
  industry: string
  location: string
  solution: string
  result: string
  resultLabel: string
  quote: string
  author: string
  position: string
  avatar: string
  metrics: {
    label: string
    value: string
  }[]
  bgGradient: string
  accentColor: string
}

const testimonials: Testimonial[] = [
  {
    id: "fashion-forward",
    company: "Fashion Forward Inc.",
    industry: "Apparel Manufacturing",
    location: "Mumbai, India",
    solution: "StitchIT",
    result: "+35%",
    resultLabel: "Production Efficiency",
    quote:
      "StitchIT has completely transformed our manufacturing process. We've seen remarkable improvements in efficiency and our customers are happier with faster delivery times. The ROI was evident within the first quarter.",
    author: "Rajesh Sharma",
    position: "Operations Director",
    avatar: "/placeholder.svg?height=60&width=60&text=RS",
    metrics: [
      { label: "Lead Time", value: "-45%" },
      { label: "Material Waste", value: "-25%" },
      { label: "Quality Score", value: "+20%" },
    ],
    bgGradient: "from-orange-500/10 to-red-500/10",
    accentColor: "text-orange-400",
  },
  {
    id: "clean-pro",
    company: "CleanPro Industries",
    industry: "Commercial Laundry",
    location: "Delhi, India",
    solution: "WashIT",
    result: "+40%",
    resultLabel: "Route Efficiency",
    quote:
      "WashIT has revolutionized our laundry operations. The automated billing and route optimization have significantly improved our efficiency and customer satisfaction. Our revenue has increased by 40% since implementation.",
    author: "Priya Patel",
    position: "General Manager",
    avatar: "/placeholder.svg?height=60&width=60&text=PP",
    metrics: [
      { label: "Billing Accuracy", value: "+98%" },
      { label: "Customer Satisfaction", value: "+60%" },
      { label: "Operational Costs", value: "-30%" },
    ],
    bgGradient: "from-blue-500/10 to-cyan-500/10",
    accentColor: "text-blue-400",
  },
  {
    id: "style-hub",
    company: "Style Hub",
    industry: "E-commerce Fashion",
    location: "Bangalore, India",
    solution: "DigitAil",
    result: "+65%",
    resultLabel: "Sales Growth",
    quote:
      "DigitAil has been a game-changer for our e-commerce business. The multi-channel integration and automated inventory management have helped us scale rapidly while maintaining excellent customer service.",
    author: "Amit Kumar",
    position: "Founder & CEO",
    avatar: "/placeholder.svg?height=60&width=60&text=AK",
    metrics: [
      { label: "Order Fulfillment", value: "+50%" },
      { label: "Inventory Accuracy", value: "+95%" },
      { label: "Customer Retention", value: "+45%" },
    ],
    bgGradient: "from-purple-500/10 to-pink-500/10",
    accentColor: "text-purple-400",
  },
  {
    id: "textile-masters",
    company: "Textile Masters Ltd.",
    industry: "Textile Manufacturing",
    location: "Chennai, India",
    solution: "HR TECH",
    result: "+99%",
    resultLabel: "Payroll Accuracy",
    quote:
      "HR TECH has simplified our complex payroll processes tremendously. The automated compliance features ensure we never miss any regulatory requirements, and our employees love the self-service portal.",
    author: "Lakshmi Narayanan",
    position: "HR Director",
    avatar: "/placeholder.svg?height=60&width=60&text=LN",
    metrics: [
      { label: "Processing Time", value: "-80%" },
      { label: "Compliance Score", value: "+100%" },
      { label: "HR Efficiency", value: "+70%" },
    ],
    bgGradient: "from-green-500/10 to-emerald-500/10",
    accentColor: "text-green-400",
  },
]

export default function TestimonialCarousel() {
  const [currentIndex, setCurrentIndex] = useState(0)
  const [isPlaying, setIsPlaying] = useState(true)
  const [isTransitioning, setIsTransitioning] = useState(false)
  const intervalRef = useRef<NodeJS.Timeout | null>(null)
  const router = useRouter()

const currentTestimonial = testimonials[currentIndex]

useEffect(() => {
    if (isPlaying) {
      intervalRef.current = setInterval(() => {
        nextSlide()
      }, 8000)
    }

return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current)
      }
    }
  }, [isPlaying, currentIndex])

const nextSlide = () => {
    if (isTransitioning) return

setIsTransitioning(true)
    setCurrentIndex((prevIndex) => (prevIndex + 1) % testimonials.length)

// Reset transition state after animation completes
    setTimeout(() => {
      setIsTransitioning(false)
    }, 500)
  }

const prevSlide = () => {
    if (isTransitioning) return

setIsTransitioning(true)
    setCurrentIndex((prevIndex) => (prevIndex - 1 + testimonials.length) % testimonials.length)

// Reset transition state after animation completes
    setTimeout(() => {
      setIsTransitioning(false)
    }, 500)
  }

const goToSlide = (index: number) => {
    if (isTransitioning || index === currentIndex) return

setIsTransitioning(true)
    setCurrentIndex(index)

// Reset transition state after animation completes
    setTimeout(() => {
      setIsTransitioning(false)
    }, 500)
  }

const togglePlayPause = () => {
    setIsPlaying(!isPlaying)
  }

return (
    <section id="testimonials" className="py-20 bg-gradient-to-b from-slate-50 to-white relative overflow-hidden">
      {/* Background Pattern */}
      <div className="absolute inset-0 opacity-20">
        <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-orange-500/30 to-transparent"></div>
        <div className="absolute bottom-0 right-0 w-96 h-96 bg-gradient-to-l from-orange-500/30 to-transparent rounded-full blur-3xl"></div>
      </div>

<div className="container mx-auto px-4 relative z-10">
        <div className="text-center mb-16">
          <Badge className="mb-6 bg-orange-600 text-white hover:bg-orange-700 px-4 py-2 font-medium">
            <Star className="h-4 w-4 mr-2" />
            Success Stories
          </Badge>
          <h2 className="text-4xl md:text-5xl font-bold text-slate-800 mb-6 font-display">
            Real Results from
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-orange-500 to-orange-600">
              {" "}
              Real Customers
            </span>
          </h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto leading-relaxed font-body">
            Discover how leading businesses across different industries have transformed their operations and achieved
            remarkable growth with our innovative solutions.
          </p>
        </div>

{/* Main Carousel */}
        <div className="relative max-w-5xl mx-auto">
          {/* Carousel Controls */}
          <div className="absolute -left-4 md:-left-8 top-1/2 -translate-y-1/2 z-10">
            <Button
              size="icon"
              variant="outline"
              className="h-10 w-10 md:h-12 md:w-12 rounded-full bg-slate-800/50 border-slate-700 text-white hover:bg-slate-700 hover:text-white"
              onClick={prevSlide}
              disabled={isTransitioning}
            >
              <ChevronLeft className="h-5 w-5" />
            </Button>
          </div>

{/* Play/Pause Button */}
          <div className="absolute top-4 right-4 z-10">
            <Button
              size="icon"
              variant="outline"
              className="h-8 w-8 rounded-full bg-slate-800/50 border-slate-700 text-white hover:bg-slate-700"
              onClick={togglePlayPause}
            >
              {isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
            </Button>
          </div>

{/* Testimonial Card */}
          <div className="overflow-hidden">
            <div
              className={`transition-all duration-500 ease-in-out transform ${
                isTransitioning ? "opacity-0 scale-95" : "opacity-100 scale-100"
              }`}
            >
              <Card
                className={`bg-white border border-slate-200 shadow-xl hover:shadow-2xl transition-all duration-300 rounded-xl overflow-hidden`}
              >
                <CardContent className="p-6 md:p-10">
                  <div className="grid md:grid-cols-2 gap-8">
                    {/* Left Column - Company Info & Quote */}
                    <div className="space-y-6">
                      {/* Company Info */}
                      <div className="space-y-4">
                        <div className="flex items-center justify-between">
                          <Badge className={`bg-orange-500 text-white border-none`}>
                            {currentTestimonial.solution}
                          </Badge>
                          <Badge variant="outline" className="border-slate-300 text-slate-600">
                            {currentTestimonial.industry}
                          </Badge>
                        </div>

<div>
                          <h3 className="text-2xl font-bold text-slate-800 mb-1">{currentTestimonial.company}</h3>
                          <div className="flex items-center text-slate-500 text-sm">
                            <MapPin className="h-3 w-3 mr-1" />
                            <span>{currentTestimonial.location}</span>
                          </div>
                        </div>
                      </div>

{/* Quote */}
                      <div className="relative mt-8">
                        <Quote className="h-10 w-10 text-orange-200 absolute -top-4 -left-2" />
                        <p className="text-slate-600 italic leading-relaxed pl-8 text-lg">
                          "{currentTestimonial.quote}"
                        </p>
                      </div>

{/* Author */}
                      <div className="flex items-center space-x-4 pt-4 border-t border-slate-200">
                        <Image
                          src={currentTestimonial.avatar || "/placeholder.svg"}
                          alt={currentTestimonial.author}
                          width={60}
                          height={60}
                          className="rounded-full border-2 border-orange-100"
                        />
                        <div>
                          <div className="font-semibold text-slate-800 text-lg">{currentTestimonial.author}</div>
                          <div className="text-slate-500">{currentTestimonial.position}</div>
                        </div>
                      </div>
                    </div>

{/* Right Column - Results & Metrics */}
                    <div className="space-y-8">
                      {/* Main Result */}
                      <div className="text-center py-8 bg-orange-50 rounded-xl border border-orange-100">
                        <AnimatedCounter
                          value={currentTestimonial.result}
                          className={`text-5xl font-bold text-orange-500 mb-2`}
                          prefix={
                            currentTestimonial.result.startsWith("+")
                              ? "+"
                              : currentTestimonial.result.startsWith("-")
                                ? "-"
                                : ""
                          }
                          suffix={currentTestimonial.result.endsWith("%") ? "%" : ""}
                          duration={2500}
                        />
                        <div className="text-slate-700 font-medium text-lg">{currentTestimonial.resultLabel}</div>
                      </div>

{/* Additional Metrics */}
                      <div className="grid grid-cols-3 gap-4">
                        {currentTestimonial.metrics.map((metric, metricIndex) => (
                          <div
                            key={metricIndex}
                            className="text-center p-4 bg-slate-50 rounded-lg border border-slate-100 hover:bg-slate-100 hover:shadow-md transition-all duration-300 transform hover:-translate-y-1"
                          >
                            <AnimatedStat
                              value={metric.value}
                              label={metric.label}
                              valueClassName={`text-xl font-bold text-orange-500`}
                              labelClassName="text-sm text-slate-600 mt-1"
                            />
                          </div>
                        ))}
                      </div>

{/* CTA */}
                      {/* <Button
                        className={`w-full bg-orange-500 hover:bg-orange-600 text-white border-none shadow-md hover:shadow-lg transition-all duration-300`}
                        onClick={() => router.push("/case-studies")}
                      >
                        Read Full Case Study
                        <ArrowRight className="ml-2 h-4 w-4" />
                      </Button> */}
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>

{/* Carousel Indicators */}
          <div className="flex justify-center mt-8 space-x-2">
            {testimonials.map((_, index) => (
              <button
                key={index}
                onClick={() => goToSlide(index)}
                className={`h-3 transition-all duration-300 rounded-full ${
                  index === currentIndex ? "w-10 bg-orange-500" : "w-3 bg-slate-300 hover:bg-slate-400"
                }`}
                aria-label={`Go to slide ${index + 1}`}
              />
            ))}
          </div>
        </div>

{/* Bottom Stats */}
        <div className="grid md:grid-cols-4 gap-8 mt-16">
          {[
            { label: "Average ROI", value: "300%", color: "text-green-600" },
            { label: "Client Satisfaction", value: "98%", color: "text-blue-600" },
            { label: "Implementation Time", value: "6", suffix: " weeks", color: "text-purple-600" },
            { label: "Happy Customers", value: "500+", color: "text-orange-600" },
          ].map((stat, index) => (
            <div
              key={index}
              className="text-center p-6 bg-white rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-all duration-300"
            >
              <AnimatedCounter
                value={stat.value}
                className={`text-3xl font-bold ${stat.color}`}
                suffix={stat.suffix || ""}
              />
              <div className="text-slate-600 mt-2 font-medium">{stat.label}</div>
            </div>
          ))}
        </div>

{/* CTA */}
        <div className="text-center mt-16">
          <Button
            size="lg"
            className="bg-gradient-to-r from-orange-600 to-orange-500 hover:from-orange-700 hover:to-orange-600 text-white px-8 py-6 text-lg font-medium shadow-lg hover:shadow-xl transition-all duration-300"
            onClick={() => router.push("/case-studies")}
          >
            View All Success Stories
            <ArrowRight className="ml-2 h-5 w-5" />
          </Button>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true"
'use client'

import * as React from 'react'
import {
  ThemeProvider as NextThemesProvider,
  type ThemeProviderProps,
} from 'next-themes'

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescriptreact:file="components/ui/accordion.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as AccordionPrimitive from "@radix-ui/react-accordion"
import { ChevronDown } from "lucide-react"

import { cn } from "@/lib/utils"

const Accordion = AccordionPrimitive.Root

const AccordionItem = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>(({ className, ...props }, ref) => (
  <AccordionPrimitive.Item
    ref={ref}
    className={cn("border-b", className)}
    {...props}
  />
))
AccordionItem.displayName = "AccordionItem"

const AccordionTrigger = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.Header className="flex">
    <AccordionPrimitive.Trigger
      ref={ref}
      className={cn(
        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
        className
      )}
      {...props}
    >
      {children}
      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
    </AccordionPrimitive.Trigger>
  </AccordionPrimitive.Header>
))
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName

const AccordionContent = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.Content
    ref={ref}
    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
    {...props}
  >
    <div className={cn("pb-4 pt-0", className)}>{children}</div>
  </AccordionPrimitive.Content>
))

AccordionContent.displayName = AccordionPrimitive.Content.displayName

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
[V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true"
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const badgeVariants = cva(
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default:
          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
        secondary:
          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive:
          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
        outline: "text-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

export interface BadgeProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
  return (
    <div className={cn(badgeVariants({ variant }), className)} {...props} />
  )
}

export { Badge, badgeVariants }
[V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true"
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive:
          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline:
          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        secondary:
          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = "Button"

export { Button, buttonVariants }
[V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="true"
import * as React from "react"

import { cn } from "@/lib/utils"

const Card = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "rounded-lg border bg-card text-card-foreground shadow-sm",
      className
    )}
    {...props}
  />
))
Card.displayName = "Card"

const CardHeader = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("flex flex-col space-y-1.5 p-6", className)}
    {...props}
  />
))
CardHeader.displayName = "CardHeader"

const CardTitle = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "text-2xl font-semibold leading-none tracking-tight",
      className
    )}
    {...props}
  />
))
CardTitle.displayName = "CardTitle"

const CardDescription = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
))
CardDescription.displayName = "CardDescription"

const CardContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
))
CardContent.displayName = "CardContent"

const CardFooter = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("flex items-center p-6 pt-0", className)}
    {...props}
  />
))
CardFooter.displayName = "CardFooter"

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
[V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true"
import * as React from "react"

import { cn } from "@/lib/utils"

const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
  ({ className, type, ...props }, ref) => {
    return (
      <input
        type={type}
        className={cn(
          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
          className
        )}
        ref={ref}
        {...props}
      />
    )
  }
)
Input.displayName = "Input"

export { Input }
[V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const labelVariants = cva(
  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
)

const Label = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
    VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
  <LabelPrimitive.Root
    ref={ref}
    className={cn(labelVariants(), className)}
    {...props}
  />
))
Label.displayName = LabelPrimitive.Root.displayName

export { Label }
[V0_FILE]typescriptreact:file="components/ui/navigation-menu.tsx" isMerged="true"
import * as React from "react"
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
import { cva } from "class-variance-authority"
import { ChevronDown } from "lucide-react"

import { cn } from "@/lib/utils"

const NavigationMenu = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <NavigationMenuPrimitive.Root
    ref={ref}
    className={cn(
      "relative z-10 flex max-w-max flex-1 items-center justify-center",
      className
    )}
    {...props}
  >
    {children}
    <NavigationMenuViewport />
  </NavigationMenuPrimitive.Root>
))
NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName

const NavigationMenuList = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.List
    ref={ref}
    className={cn(
      "group flex flex-1 list-none items-center justify-center space-x-1",
      className
    )}
    {...props}
  />
))
NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName

const NavigationMenuItem = NavigationMenuPrimitive.Item

const navigationMenuTriggerStyle = cva(
  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
)

const NavigationMenuTrigger = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <NavigationMenuPrimitive.Trigger
    ref={ref}
    className={cn(navigationMenuTriggerStyle(), "group", className)}
    {...props}
  >
    {children}{" "}
    <ChevronDown
      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
      aria-hidden="true"
    />
  </NavigationMenuPrimitive.Trigger>
))
NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName

const NavigationMenuContent = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.Content
    ref={ref}
    className={cn(
      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
      className
    )}
    {...props}
  />
))
NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName

const NavigationMenuLink = NavigationMenuPrimitive.Link

const NavigationMenuViewport = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
>(({ className, ...props }, ref) => (
  <div className={cn("absolute left-0 top-full flex justify-center")}>
    <NavigationMenuPrimitive.Viewport
      className={cn(
        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
        className
      )}
      ref={ref}
      {...props}
    />
  </div>
))
NavigationMenuViewport.displayName =
  NavigationMenuPrimitive.Viewport.displayName

const NavigationMenuIndicator = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.Indicator
    ref={ref}
    className={cn(
      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
      className
    )}
    {...props}
  >
    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
  </NavigationMenuPrimitive.Indicator>
))
NavigationMenuIndicator.displayName =
  NavigationMenuPrimitive.Indicator.displayName

export {
  navigationMenuTriggerStyle,
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuContent,
  NavigationMenuTrigger,
  NavigationMenuLink,
  NavigationMenuIndicator,
  NavigationMenuViewport,
}
[V0_FILE]typescriptreact:file="components/ui/radio-group.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
import { Circle } from "lucide-react"

import { cn } from "@/lib/utils"

const RadioGroup = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
>(({ className, ...props }, ref) => {
  return (
    <RadioGroupPrimitive.Root
      className={cn("grid gap-2", className)}
      {...props}
      ref={ref}
    />
  )
})
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName

const RadioGroupItem = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
>(({ className, ...props }, ref) => {
  return (
    <RadioGroupPrimitive.Item
      ref={ref}
      className={cn(
        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className
      )}
      {...props}
    >
      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
        <Circle className="h-2.5 w-2.5 fill-current text-current" />
      </RadioGroupPrimitive.Indicator>
    </RadioGroupPrimitive.Item>
  )
})
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName

export { RadioGroup, RadioGroupItem }
[V0_FILE]typescriptreact:file="components/ui/select.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
import { Check, ChevronDown, ChevronUp } from "lucide-react"

import { cn } from "@/lib/utils"

const Select = SelectPrimitive.Root

const SelectGroup = SelectPrimitive.Group

const SelectValue = SelectPrimitive.Value

const SelectTrigger = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Trigger
    ref={ref}
    className={cn(
      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
      className
    )}
    {...props}
  >
    {children}
    <SelectPrimitive.Icon asChild>
      <ChevronDown className="h-4 w-4 opacity-50" />
    </SelectPrimitive.Icon>
  </SelectPrimitive.Trigger>
))
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName

const SelectScrollUpButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollUpButton
    ref={ref}
    className={cn(
      "flex cursor-default items-center justify-center py-1",
      className
    )}
    {...props}
  >
    <ChevronUp className="h-4 w-4" />
  </SelectPrimitive.ScrollUpButton>
))
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName

const SelectScrollDownButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollDownButton
    ref={ref}
    className={cn(
      "flex cursor-default items-center justify-center py-1",
      className
    )}
    {...props}
  >
    <ChevronDown className="h-4 w-4" />
  </SelectPrimitive.ScrollDownButton>
))
SelectScrollDownButton.displayName =
  SelectPrimitive.ScrollDownButton.displayName

const SelectContent = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = "popper", ...props }, ref) => (
  <SelectPrimitive.Portal>
    <SelectPrimitive.Content
      ref={ref}
      className={cn(
        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        position === "popper" &&
          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
        className
      )}
      position={position}
      {...props}
    >
      <SelectScrollUpButton />
      <SelectPrimitive.Viewport
        className={cn(
          "p-1",
          position === "popper" &&
            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
        )}
      >
        {children}
      </SelectPrimitive.Viewport>
      <SelectScrollDownButton />
    </SelectPrimitive.Content>
  </SelectPrimitive.Portal>
))
SelectContent.displayName = SelectPrimitive.Content.displayName

const SelectLabel = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Label
    ref={ref}
    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
    {...props}
  />
))
SelectLabel.displayName = SelectPrimitive.Label.displayName

const SelectItem = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <SelectPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </SelectPrimitive.ItemIndicator>
    </span>

<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
  </SelectPrimitive.Item>
))
SelectItem.displayName = SelectPrimitive.Item.displayName

const SelectSeparator = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Separator
    ref={ref}
    className={cn("-mx-1 my-1 h-px bg-muted", className)}
    {...props}
  />
))
SelectSeparator.displayName = SelectPrimitive.Separator.displayName

export {
  Select,
  SelectGroup,
  SelectValue,
  SelectTrigger,
  SelectContent,
  SelectLabel,
  SelectItem,
  SelectSeparator,
  SelectScrollUpButton,
  SelectScrollDownButton,
}
[V0_FILE]typescriptreact:file="components/ui/sheet.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as SheetPrimitive from "@radix-ui/react-dialog"
import { cva, type VariantProps } from "class-variance-authority"
import { X } from "lucide-react"

import { cn } from "@/lib/utils"

const Sheet = SheetPrimitive.Root

const SheetTrigger = SheetPrimitive.Trigger

const SheetClose = SheetPrimitive.Close

const SheetPortal = SheetPrimitive.Portal

const SheetOverlay = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Overlay
    className={cn(
      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className
    )}
    {...props}
    ref={ref}
  />
))
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName

const sheetVariants = cva(
  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
  {
    variants: {
      side: {
        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
        bottom:
          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
        right:
          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
      },
    },
    defaultVariants: {
      side: "right",
    },
  }
)

interface SheetContentProps
  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
    VariantProps<typeof sheetVariants> {}

const SheetContent = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Content>,
  SheetContentProps
>(({ side = "right", className, children, ...props }, ref) => (
  <SheetPortal>
    <SheetOverlay />
    <SheetPrimitive.Content
      ref={ref}
      className={cn(sheetVariants({ side }), className)}
      {...props}
    >
      {children}
      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </SheetPrimitive.Close>
    </SheetPrimitive.Content>
  </SheetPortal>
))
SheetContent.displayName = SheetPrimitive.Content.displayName

const SheetHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col space-y-2 text-center sm:text-left",
      className
    )}
    {...props}
  />
)
SheetHeader.displayName = "SheetHeader"

const SheetFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
      className
    )}
    {...props}
  />
)
SheetFooter.displayName = "SheetFooter"

const SheetTitle = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Title
    ref={ref}
    className={cn("text-lg font-semibold text-foreground", className)}
    {...props}
  />
))
SheetTitle.displayName = SheetPrimitive.Title.displayName

const SheetDescription = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Description
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
))
SheetDescription.displayName = SheetPrimitive.Description.displayName

export {
  Sheet,
  SheetPortal,
  SheetOverlay,
  SheetTrigger,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
}
[V0_FILE]typescriptreact:file="components/ui/tabs.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as TabsPrimitive from "@radix-ui/react-tabs"

import { cn } from "@/lib/utils"

const Tabs = TabsPrimitive.Root

const TabsList = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.List
    ref={ref}
    className={cn(
      "flex flex-wrap gap-2 justify-center bg-muted p-2 rounded-md w-full text-muted-foreground",
      className,
    )}
    {...props}
  />
))
TabsList.displayName = TabsPrimitive.List.displayName

const TabsTrigger = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Trigger
    ref={ref}
    className={cn(
      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
      className,
    )}
    {...props}
  />
))
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName

const TabsContent = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Content
    ref={ref}
    className={cn(
      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
      className,
    )}
    {...props}
  />
))
TabsContent.displayName = TabsPrimitive.Content.displayName

export { Tabs, TabsList, TabsTrigger, TabsContent }
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true"
import * as React from "react"

import { cn } from "@/lib/utils"

const Textarea = React.forwardRef<
  HTMLTextAreaElement,
  React.ComponentProps<"textarea">
>(({ className, ...props }, ref) => {
  return (
    <textarea
      className={cn(
        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
        className
      )}
      ref={ref}
      {...props}
    />
  )
})
Textarea.displayName = "Textarea"

export { Textarea }
[V0_FILE]typescriptreact:file="improved-homepage.tsx" isMerged="true"
"use client"

import { ArrowRight, CheckCircle, Users, Zap, Shield, Target } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import EnhancedHeader from "./components/enhanced-header"
import EnhancedFooter from "./components/enhanced-footer"

import TestimonialCarousel from "./components/testimonial-carousel"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { useRouter } from "next/navigation"
import { useRef } from "react";
import Image from "next/image"

const services = [
  {
    id: "stitchit",
    title: "StitchIT",
    tagline: "Cut To Pack Software Solution",
    description:
      "Streamline your textile manufacturing process with our comprehensive software solution designed for single umbrella management.",
    features: ["MRP and PPC Allocation", "Inventory Tracking", "Quality Control", "Production Analytics"],
    color: "from-pink-100 to-orange-100",
    textColor: "text-orange-600",
    cta: "Explore StitchIT",
  },
  {
    id: "washit",
    title: "WashIT",
    tagline: "Complete IT Solution For Industrial Laundry",
    description:
      "Transform your laundry operations with our end-to-end management system covering customer management, billing, and operational efficiency.",
    features: ["Customer Management", "Automated Billing", "Recipe Management", "Real-time Tracking"],
    color: "from-blue-100 to-cyan-100",
    textColor: "text-blue-600",
    cta: "Discover WashIT",
  },
  {
    id: "digitail",
    title: "DigitAil",
    tagline: "Complete E-commerce Solution",
    description:
      "Build and scale your online business with our comprehensive e-commerce platform featuring advanced analytics and seamless integrations.",
    features: ["Multi-channel Sales", "Inventory Sync", "Payment Gateway", "Analytics Dashboard"],
    color: "from-purple-100 to-pink-100",
    textColor: "text-purple-600",
    cta: "Launch DigitAil",
  },
  {
    id: "hrtech",
    title: "HR TECH",
    tagline: "Calculate Salary at Your Finger Tip",
    description:
      "Simplify your HR operations with our intuitive payroll and employee management system designed for modern businesses.",
    features: ["Payroll Automation", "Employee Self-Service", "Compliance Management", "Performance Tracking"],
    color: "from-green-100 to-emerald-100",
    textColor: "text-green-600",
    cta: "Try HR TECH",
  },
]

export default function ImprovedHomepage() {
  const BASE_URL = "https://nuvatetechnology.com/";

{/* Hero Section */}
      <section className="container mx-auto px-4 py-16 text-center">
        <div className="max-w-4xl mx-auto">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">Trusted by 500+ Businesses</Badge>
          <h1 className="text-4xl md:text-6xl font-bold text-slate-900 mb-6">
            Innovative Technology Solutions for
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-orange-500">
              {" "}
              Modern Business
            </span>
          </h1>
          <p className="text-xl text-slate-600 mb-8 max-w-2xl mx-auto">
            Empower your business with our comprehensive suite of industry-specific software solutions designed to
            streamline operations and drive growth.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button size="lg" className="bg-orange-600 hover:bg-orange-700" onClick={scrollToContact}>
              Explore Our Solutions
              <ArrowRight className="ml-2 h-4 w-4" />
            </Button>
            <Button size="lg" variant="outline" onClick={() => router.push("/contact")} >
              Schedule Demo
            </Button>
          </div>
        </div>
      </section>

{/* Stats Section */}
      <section className="container mx-auto px-4 py-12">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
          {[
            { icon: Users, label: "Active Clients", value: "200+" },
            { icon: Zap, label: "Projects Delivered", value: "250+" },
            { icon: Shield, label: "Years Experience", value: "8+" },
            { icon: Target, label: "Success Rate", value: "98%" },
          ].map((stat, index) => (
            <div key={index} className="space-y-2">
              <stat.icon className="h-8 w-8 mx-auto text-orange-600" />
              <div className="text-2xl font-bold text-slate-900">{stat.value}</div>
              <div className="text-sm text-slate-600">{stat.label}</div>
            </div>
          ))}
        </div>
      </section>

{/* Services Section */}
      <section ref={contactRef} id="services" className="container mx-auto px-4 py-16">
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Our Technology Solutions</h2>
          <p className="text-lg text-slate-600 max-w-2xl mx-auto">
            Specialized software solutions tailored for different industries, built with cutting-edge technology and
            industry expertise.
          </p>
        </div>

<div className="grid md:grid-cols-2 gap-8">
          {services.map((service) => (
            <Card
              key={service.id}
              className="group hover:shadow-xl transition-all duration-300 border-0 overflow-hidden"
            >
              <div className={`h-2 bg-gradient-to-r ${service.color}`}></div>
              <CardHeader className="pb-4">
                <div className="flex items-center justify-between">
                  <CardTitle className="text-2xl font-bold text-slate-900">{service.title}</CardTitle>
                  <Badge variant="secondary" className={service.textColor}>
                    Industry Leader
                  </Badge>
                </div>
                <CardDescription className="text-lg font-medium text-slate-700">{service.tagline}</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <p className="text-slate-600 leading-relaxed">{service.description}</p>

<div className="space-y-2">
                  <h4 className="font-semibold text-slate-900">Key Features:</h4>
                  <div className="grid grid-cols-2 gap-2">
                    {service.features.map((feature, index) => (
                      <div key={index} className="flex items-center space-x-2">
                        <CheckCircle className="h-4 w-4 text-green-500 flex-shrink-0" />
                        <span className="text-sm text-slate-600">{feature}</span>
                      </div>
                    ))}
                  </div>
                </div>

<Button
                  className="w-full group-hover:bg-orange-600 group-hover:text-white transition-colors"
                  onClick={() => router.push(`/${service.id}`)}
                >
                  {service.cta}
                  <ArrowRight className="ml-2 h-4 w-4" />
                </Button>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

{/* Testimonial Carousel - Replacing Success Stories */}
      <TestimonialCarousel />
      {/* scrollb bar */}
      <div className="border-b py-8 overflow-hidden bg-white">
      <div className="container mx-auto px-4">
        <div className="flex flex-col lg:flex-row items-center gap-6">
          <div className="text-center lg:text-left w-full lg:w-1/3">
            <p className="text-xl font-bold text-slate-800">Trusted by 30+ Clients</p>
          </div>
          <div className="w-full lg:w-2/3">
            <div className="relative overflow-hidden">
              <div className="min-w-max flex gap-12 animate-scroll-x">
                {repeatedLogos.map((logo, index) => (
                  <Image
                    key={index}
                    src={logo.src}
                    alt={logo.alt}
                    width={100}
                    height={60}
                    className="h-14 w-auto object-contain"
                  />
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

{/* CTA Section */}
      <section className="bg-gradient-to-r from-orange-600 to-orange-500 py-16">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">Ready to Transform Your Business?</h2>
          <p className="text-xl text-orange-100 mb-8 max-w-2xl mx-auto">
            Join hundreds of businesses that have streamlined their operations with our innovative solutions.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button size="lg" variant="secondary" className="bg-white text-orange-600 hover:bg-orange-50" onClick={() => router.push("/contact")}>
              Get Free Consultation
            </Button>
            <Button size="lg" variant="outline" className="bg-white text-orange-600 hover:bg-orange-50" onClick={() => router.push("/case-studies")}>
              View Case Studies
            </Button>
          </div>
        </div>
      </section>
      <EnhancedFooter />

{/* Footer 
      <footer className="bg-slate-900 text-white py-12">
        <div className="container mx-auto px-4">
          <div className="grid md:grid-cols-4 gap-8">
            <div className="space-y-4">
              <div className="flex items-center space-x-2">
                <div className="w-6 h-6 bg-gradient-to-r from-orange-500 to-orange-600 rounded"></div>
                <span className="text-lg font-bold">Nuvate</span>
              </div>
              <p className="text-slate-400">Leading technology solutions provider for modern businesses.</p>
            </div>

<div>
              <h3 className="font-semibold mb-4">Solutions</h3>
              <ul className="space-y-2 text-slate-400">
                <li>
                  <a href="/stitchit" className="hover:text-white transition-colors">
                    StitchIT
                  </a>
                </li>
                <li>
                  <a href="/washit" className="hover:text-white transition-colors">
                    WashIT
                  </a>
                </li>
                <li>
                  <a href="/digitail" className="hover:text-white transition-colors">
                    DigitAil
                  </a>
                </li>
                <li>
                  <a href="/hrtech" className="hover:text-white transition-colors">
                    HR TECH
                  </a>
                </li>
              </ul>
            </div>

<div>
              <h3 className="font-semibold mb-4">Company</h3>
              <ul className="space-y-2 text-slate-400">
                <li>
                  <a href="/about" className="hover:text-white transition-colors">
                    About Us
                  </a>
                </li>
                <li>
                  <a href="/careers" className="hover:text-white transition-colors">
                    Careers
                  </a>
                </li>
                <li>
                  <a href="/blog" className="hover:text-white transition-colors">
                    Blog
                  </a>
                </li>
                <li>
                  <a href="/contact" className="hover:text-white transition-colors">
                    Contact
                  </a>
                </li>
              </ul>
            </div>

<div>
              <h3 className="font-semibold mb-4">Contact</h3>
              <div className="space-y-2 text-slate-400">
                <p>Email: info@nuvate.com</p>
                <p>Phone: +1 (555) 123-4567</p>
                <p>Address: Tech Park, Innovation Street</p>
              </div>
            </div>
          </div>

<div className="border-t border-slate-800 mt-8 pt-8 text-center text-slate-400">
            <p>© 2024 Nuvate Technology Pvt Ltd. All rights reserved.</p>
          </div>
        </div>
      </footer>
      */}
    </div>
  )
}
[V0_FILE]typescript:file="lib/utils.ts" isMerged="true"
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]javascript:file="next.config.mjs" isMerged="true"
/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
}

export default nextConfig
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "lint": "next lint",
    "start": "node server.js",
    "production": "npm run build && npm start",
    "install-force": "npm install --legacy-peer-deps",
    "check-ports": "node check-port.js",
    "kill-ports": "lsof -ti:3000,3001,3002,3003,3004,3005 | xargs kill -9 || true",
    "deploy": "chmod +x deploy.sh && ./deploy.sh",
    "start-fresh": "chmod +x start.sh && ./start.sh"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.1",
    "@radix-ui/react-accordion": "^1.1.2",
    "@radix-ui/react-alert-dialog": "^1.1.4",
    "@radix-ui/react-aspect-ratio": "^1.1.1",
    "@radix-ui/react-avatar": "^1.1.2",
    "@radix-ui/react-checkbox": "^1.1.3",
    "@radix-ui/react-collapsible": "^1.1.2",
    "@radix-ui/react-context-menu": "^2.2.4",
    "@radix-ui/react-dialog": "^1.1.4",
    "@radix-ui/react-dropdown-menu": "^2.1.4",
    "@radix-ui/react-hover-card": "^1.1.4",
    "@radix-ui/react-label": "^2.1.2",
    "@radix-ui/react-menubar": "^1.1.4",
    "@radix-ui/react-navigation-menu": "^1.2.2",
    "@radix-ui/react-popover": "^1.1.4",
    "@radix-ui/react-progress": "^1.1.1",
    "@radix-ui/react-radio-group": "^1.2.2",
    "@radix-ui/react-scroll-area": "^1.2.2",
    "@radix-ui/react-select": "^2.1.4",
    "@radix-ui/react-separator": "^1.1.1",
    "@radix-ui/react-slider": "^1.2.2",
    "@radix-ui/react-slot": "^1.1.0",
    "@radix-ui/react-switch": "^1.1.2",
    "@radix-ui/react-tabs": "^1.1.2",
    "@radix-ui/react-toast": "^1.2.4",
    "@radix-ui/react-toggle": "^1.1.1",
    "@radix-ui/react-toggle-group": "^1.1.1",
    "@radix-ui/react-tooltip": "^1.1.6",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "^1.0.4",
    "date-fns": "^3.6.0",
    "embla-carousel-react": "^8.5.1",
    "input-otp": "^1.4.1",
    "lucide-react": "^0.454.0",
    "next": "^15.2.4",
    "next-themes": "^0.4.4",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-hook-form": "^7.54.1",
    "react-icons": "^5.4.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "^2.15.0",
    "sonner": "^1.7.1",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.6",
    "zod": "^3.24.1"
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8.5",
    "tailwindcss": "^3.4.17",
    "typescript": "^5"
  },
  "engines": {
    "node": ">=18.0.0",
    "npm": ">=8.0.0"
  },
  "overrides": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}
[V0_FILE]javascript:file="postcss.config.mjs" isMerged="true"
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
  },
};

export default config;
[V0_FILE]css:file="styles/globals.css" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescript:file="tailwind.config.ts" isMerged="true"
import type { Config } from "tailwindcss";

const config: Config = {
    darkMode: ["class"],
    content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "*.{js,ts,jsx,tsx,mdx}"
  ],
  theme: {
  	extend: {
  		colors: {
  			background: 'hsl(var(--background))',
  			foreground: 'hsl(var(--foreground))',
  			card: {
  				DEFAULT: 'hsl(var(--card))',
  				foreground: 'hsl(var(--card-foreground))'
  			},
  			popover: {
  				DEFAULT: 'hsl(var(--popover))',
  				foreground: 'hsl(var(--popover-foreground))'
  			},
  			primary: {
  				DEFAULT: 'hsl(var(--primary))',
  				foreground: 'hsl(var(--primary-foreground))'
  			},
  			secondary: {
  				DEFAULT: 'hsl(var(--secondary))',
  				foreground: 'hsl(var(--secondary-foreground))'
  			},
  			muted: {
  				DEFAULT: 'hsl(var(--muted))',
  				foreground: 'hsl(var(--muted-foreground))'
  			},
  			accent: {
  				DEFAULT: 'hsl(var(--accent))',
  				foreground: 'hsl(var(--accent-foreground))'
  			},
  			destructive: {
  				DEFAULT: 'hsl(var(--destructive))',
  				foreground: 'hsl(var(--destructive-foreground))'
  			},
  			border: 'hsl(var(--border))',
  			input: 'hsl(var(--input))',
  			ring: 'hsl(var(--ring))',
  			chart: {
  				'1': 'hsl(var(--chart-1))',
  				'2': 'hsl(var(--chart-2))',
  				'3': 'hsl(var(--chart-3))',
  				'4': 'hsl(var(--chart-4))',
  				'5': 'hsl(var(--chart-5))'
  			},
  			sidebar: {
  				DEFAULT: 'hsl(var(--sidebar-background))',
  				foreground: 'hsl(var(--sidebar-foreground))',
  				primary: 'hsl(var(--sidebar-primary))',
  				'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
  				accent: 'hsl(var(--sidebar-accent))',
  				'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
  				border: 'hsl(var(--sidebar-border))',
  				ring: 'hsl(var(--sidebar-ring))'
  			}
  		},
  		borderRadius: {
  			lg: 'var(--radius)',
  			md: 'calc(var(--radius) - 2px)',
  			sm: 'calc(var(--radius) - 4px)'
  		},
  		keyframes: {
  			'accordion-down': {
  				from: {
  					height: '0'
  				},
  				to: {
  					height: 'var(--radix-accordion-content-height)'
  				}
  			},
  			'accordion-up': {
  				from: {
  					height: 'var(--radix-accordion-content-height)'
  				},
  				to: {
  					height: '0'
  				}
  			},
        'scroll-x': {
          '0%': { transform: 'translateX(0%)' },
          '100%': { transform: 'translateX(-50%)' }, // scroll halfway (because of duplication)
        },
  		},
  		animation: {
  			'accordion-down': 'accordion-down 0.2s ease-out',
  			'accordion-up': 'accordion-up 0.2s ease-out',
        'scroll-x': 'scroll-x 30s linear infinite',
  		}
  	}
  },
  plugins: [require("tailwindcss-animate")],
};
export default config;
[V0_FILE]json:file="tsconfig.json" isMerged="true"
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "target": "ES6",
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
[V0_FILE]plaintext:file="public/Digitail.pdf" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_xZFrdnn5P6xxDrgZkWuIiLT21IkP/_AYEQjQg3-_RpVNRtc02MT/public/Digitail.pdf" isMerged="true"
[V0_FILE]plaintext:file="public/HR-Tech.pdf" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_xZFrdnn5P6xxDrgZkWuIiLT21IkP/R04LntHpF3VR_v4N3S02P0/public/HR-Tech.pdf" isMerged="true"
[V0_FILE]plaintext:file="public/StitchIT.pdf" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_xZFrdnn5P6xxDrgZkWuIiLT21IkP/l8xFmhzD5dk4tAFqn1VmPr/public/StitchIT.pdf" isMerged="true"
[V0_FILE]plaintext:file="public/StitchITBrochure.pdf" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_xZFrdnn5P6xxDrgZkWuIiLT21IkP/qs_uaHyyKTLX7kqhV4seI4/public/StitchITBrochure.pdf" isMerged="true"
[V0_FILE]plaintext:file="public/WashIT.pdf" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_xZFrdnn5P6xxDrgZkWuIiLT21IkP/AS4H2VBcdG9RcCZ0BP77eZ/public/WashIT.pdf" isMerged="true"
[V0_FILE]png:file="public/images/Digitail/Analytics-aand-Growth.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_xZFrdnn5P6xxDrgZkWuIiLT21IkP/wkOWv0-ZFNuNzmM9qMPKPz/public/images/Digitail/Analytics-aand-Growth.png" isMerged="true"
[V0_FILE]png:file="public/images/Digitail/Channel-Integration.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_xZFrdnn5P6xxDrgZkWuIiLT21IkP/8QC9R-BMP6JDoOd-9T_Lu1/public/images/Digitail/Channel-Integration.png" isMerged="true"
[V0_FILE]png:file="public/images/Digitail/Customer-Engagement.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_xZFrdnn5P6xxDrgZkWuIiLT21IkP/MVBUS9nMXPTF691aBe4wOy/public/images/Digitail/Customer-Engagement.png" isMerged="true"
[V0_FILE]png:file="public/images/Digitail/Inventory-Management.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_xZFrdnn5P6xxDrgZkWuIiLT21IkP/TpKBCCsQIOOrBjPFp5myCB/public/images/Digitail/Inventory-Management.png" isMerged="true"
[V0_FILE]png:file="public/images/Digitail/Order-Processing.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_xZFrdnn5P6xxDrgZkWuIiLT21IkP/por3nLbay7Hm6wJw0RkAwz/public/images/Digitail/Order-Processing.png" isMerged="true"
[V0_FILE]png:file="public/images/Digitail/Product-Management.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_xZFrdnn5P6xxDrgZkWuIiLT21IkP/-r6lD1cBx6YfbvbZ_cWzMT/public/images/Digitail/Product-Management.png" isMerged="true"
[V0_FILE]png:file="public/images/HRTech/Attendence-Tracking.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_xZFrdnn5P6xxDrgZkWuIiLT21IkP/43_DSKXs8Pr2vjYVGVU-i5/public/images/HRTech/Attendence-Tracking.png" isMerged="true"
[V0_FILE]png:file="public/images/HRTech/Compilance-Management.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_xZFrdnn5P6xxDrgZkWuIiLT21IkP/UoxJVPKD-SLrq6wzFdjLIy/public/images/HRTech/Compilance-Management.png" isMerged="true"
[V0_FILE]png:file="public/images/HRTech/Employee-Onboarding.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_xZFrdnn5P6xxDrgZkWuIiLT21IkP/ZUOOJDczmMFjgG7Fw4Dpk0/public/images/HRTech/Employee-Onboarding.png" isMerged="true"
[V0_FILE]png:file="public/images/HRTech/Payroll-Processing.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_xZFrdnn5P6xxDrgZkWuIiLT21IkP/nV3TuqYIbV1XAqR0BdVtdI/public/images/HRTech/Payroll-Processing.png" isMerged="true"
[V0_FILE]png:file="public/images/HRTech/Performance-Management.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_xZFrdnn5P6xxDrgZkWuIiLT21IkP/YCZKdfTVE0I4bb1zC9h4Zl/public/images/HRTech/Performance-Management.png" isMerged="true"
[V0_FILE]png:file="public/images/HRTech/Reporting-and-Anakytics.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_xZFrdnn5P6xxDrgZkWuIiLT21IkP/2mfVHxwjfglodzmFuHAgiS/public/images/HRTech/Reporting-and-Anakytics.png" isMerged="true"
[V0_FILE]png:file="public/images/StitchIT/Order-Management.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_xZFrdnn5P6xxDrgZkWuIiLT21IkP/34lfR4_i--k3AOfN-pGr1Z/public/images/StitchIT/Order-Management.png" isMerged="true"
[V0_FILE]png:file="public/images/StitchIT/Packing-and-Shipping.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_xZFrdnn5P6xxDrgZkWuIiLT21IkP/Mm9IGBp_4e1WNxQVzuuk9p/public/images/StitchIT/Packing-and-Shipping.png" isMerged="true"
[V0_FILE]png:file="public/images/StitchIT/Production-Planning.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_xZFrdnn5P6xxDrgZkWuIiLT21IkP/WphFw7C7dn7th1dCP9ACuB/public/images/StitchIT/Production-Planning.png" isMerged="true"
[V0_FILE]png:file="public/images/StitchIT/Production-Tracking.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_xZFrdnn5P6xxDrgZkWuIiLT21IkP/YCMqg9N5ydhj9W82qHt1FK/public/images/StitchIT/Production-Tracking.png" isMerged="true"
[V0_FILE]png:file="public/images/StitchIT/Quality-Control.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_xZFrdnn5P6xxDrgZkWuIiLT21IkP/iX9oMWA_f-tYqtb-BaOSrF/public/images/StitchIT/Quality-Control.png" isMerged="true"
[V0_FILE]png:file="public/images/WashIT/Billing-and-Invoicing.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_xZFrdnn5P6xxDrgZkWuIiLT21IkP/s77XLSjtfbDsgcWQ9gP-06/public/images/WashIT/Billing-and-Invoicing.png" isMerged="true"
[V0_FILE]png:file="public/images/WashIT/Customer-Registration.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_xZFrdnn5P6xxDrgZkWuIiLT21IkP/Q7SwZ2mEpD87cSHtDYWCoG/public/images/WashIT/Customer-Registration.png" isMerged="true"
[V0_FILE]png:file="public/images/WashIT/Order-Processing.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_xZFrdnn5P6xxDrgZkWuIiLT21IkP/TiqIj00oLqiZaBApDOefAh/public/images/WashIT/Order-Processing.png" isMerged="true"
[V0_FILE]png:file="public/images/WashIT/Pickup-and-Delivery.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_xZFrdnn5P6xxDrgZkWuIiLT21IkP/IIm3HUJX6tnRFrpNjYA8cc/public/images/WashIT/Pickup-and-Delivery.png" isMerged="true"
[V0_FILE]png:file="public/images/WashIT/Reporting-and-Analytics.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_xZFrdnn5P6xxDrgZkWuIiLT21IkP/Y1RtOPYczzBVeU0ET2__-8/public/images/WashIT/Reporting-and-Analytics.png" isMerged="true"
[V0_FILE]png:file="public/nuvate-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_xZFrdnn5P6xxDrgZkWuIiLT21IkP/8y3Iic2ZkymuWbJ6nOciWV/public/nuvate-logo.png" isMerged="true"
[V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_xZFrdnn5P6xxDrgZkWuIiLT21IkP/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png" isMerged="true"
[V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_xZFrdnn5P6xxDrgZkWuIiLT21IkP/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg" isMerged="true"
[V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_xZFrdnn5P6xxDrgZkWuIiLT21IkP/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg" isMerged="true"
[V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_xZFrdnn5P6xxDrgZkWuIiLT21IkP/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg" isMerged="true"
[V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_xZFrdnn5P6xxDrgZkWuIiLT21IkP/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg" isMerged="true"
[V0_FILE]javascript:file="server.js"
const { createServer } = require("http")
const { parse } = require("url")
const next = require("next")

const dev = process.env.NODE_ENV !== "production"
const hostname = process.env.HOSTNAME || "localhost"

// Function to find an available port
async function findAvailablePort(startPort = 3000) {
  const net = require("net")
  return new Promise((resolve, reject) => {
    const server = net.createServer()

server.listen(startPort, (err) => {
      if (err) {
        server.close()
        if (err.code === "EADDRINUSE") {
          // Try next port
          findAvailablePort(startPort + 1)
            .then(resolve)
            .catch(reject)
        } else {
          reject(err)
        }
      } else {
        const port = server.address().port
        server.close(() => {
          resolve(port)
        })
      }
    })

server.on("error", (err) => {
      if (err.code === "EADDRINUSE") {
        server.close()
        findAvailablePort(startPort + 1)
          .then(resolve)
          .catch(reject)
      } else {
        reject(err)
      }
    })
  })
}

async function startServer() {
  try {
    // Get port from environment or find available port
    let port = process.env.PORT ? Number.parseInt(process.env.PORT, 10) : null
    if (!port) {
      port = await findAvailablePort(3000)
    }

console.log(`Starting server in ${dev ? "development" : "production"} mode...`)
    console.log(`Attempting to use port: ${port}`)

// Create Next.js app
    const app = next({ dev, hostname: dev ? "localhost" : hostname, port })
    const handle = app.getRequestHandler()

await app.prepare()

const server = createServer(async (req, res) => {
      try {
        // Parse the URL
        const parsedUrl = parse(req.url, true)
        const { pathname, query } = parsedUrl

// Health check endpoint
        if (pathname === "/api/health") {
          res.writeHead(200, { "Content-Type": "application/json" })
          res.end(
            JSON.stringify({
              status: "ok",
              timestamp: new Date().toISOString(),
              environment: process.env.NODE_ENV || "development",
              port: port,
              hostname: hostname,
            }),
          )
          return
        }

// Handle the request with Next.js
        await handle(req, res, parsedUrl)
      } catch (err) {
        console.error("Error occurred handling", req.url, err)
        res.statusCode = 500
        res.end("Internal server error")
      }
    })

// Handle server errors
    server.on("error", (err) => {
      if (err.code === "EADDRINUSE") {
        console.error(`Port ${port} is already in use. Trying to find another port...`)
        server.close()
        // Restart with a different port
        process.env.PORT = ""
        startServer()
      } else {
        console.error("Server error:", err)
        process.exit(1)
      }
    })

// Start listening
    server.listen(port, () => {
      console.log(`✅ Server ready on http://${hostname}:${port}`)
      console.log(`📊 Environment: ${process.env.NODE_ENV || "development"}`)
      console.log(`🔍 Health check: http://${hostname}:${port}/api/health`)
    })

// Graceful shutdown
    const gracefulShutdown = () => {
      console.log("🛑 Received shutdown signal, closing server gracefully...")
      server.close(() => {
        console.log("✅ Server closed successfully")
        process.exit(0)
      })
    }

process.on("SIGTERM", gracefulShutdown)
    process.on("SIGINT", gracefulShutdown)
  } catch (error) {
    console.error("Failed to start server:", error)
    process.exit(1)
  }
}

// Start the server
startServer()
[V0_FILE]plaintext:file=".npmrc"
legacy-peer-deps=true
fund=false
audit=false
[V0_FILE]javascript:file="ecosystem.config.js"
module.exports = {
  apps: [
    {
      name: "nuvatech-website",
      script: "server.js",
      instances: 1,
      autorestart: true,
      watch: false,
      max_memory_restart: "1G",
      env: {
        NODE_ENV: "production",
        PORT: 3000,
        HOSTNAME: "localhost",
      },
      env_production: {
        NODE_ENV: "production",
        PORT: process.env.PORT || 3000,
        HOSTNAME: process.env.HOSTNAME || "localhost",
      },
      error_file: "./logs/err.log",
      out_file: "./logs/out.log",
      log_file: "./logs/combined.log",
      time: true,
      log_date_format: "YYYY-MM-DD HH:mm:ss Z",
      merge_logs: true,
      kill_timeout: 5000,
      restart_delay: 1000,
    },
  ],
}
[V0_FILE]shellscript:file="start.sh"
#!/bin/bash

# Create logs directory if it doesn't exist
mkdir -p logs

# Kill any existing processes on common ports
echo "🔍 Checking for existing processes..."
lsof -ti:3000,3001,3002,3003,3004,3005 | xargs kill -9 2>/dev/null || true

# Wait a moment for processes to fully terminate
sleep 2

# Clear npm cache and reinstall if needed
if [ ! -d "node_modules" ]; then
    echo "📦 Installing dependencies..."
    npm cache clean --force
    npm install --legacy-peer-deps
fi

# Build the application
echo "🏗️  Building application..."
npm run build

# Start the server
echo "🚀 Starting server..."
npm start
[V0_FILE]shellscript:file="deploy.sh"
#!/bin/bash

echo "🚀 Starting deployment process..."

# Stop any running processes
echo "🛑 Stopping existing processes..."
pkill -f "node server.js" || true
pkill -f "next" || true

# Wait for processes to stop
sleep 3

# Create necessary directories
mkdir -p logs
mkdir -p .next

# Clear npm cache
echo "🧹 Clearing npm cache..."
npm cache clean --force

# Remove node_modules and package-lock.json for clean install
echo "🗑️  Removing old dependencies..."
rm -rf node_modules package-lock.json

# Install dependencies
echo "📦 Installing dependencies..."
npm install --legacy-peer-deps

# Build the application
echo "🏗️  Building application..."
npm run build

# Start the application
echo "🚀 Starting application..."
nohup npm start > logs/startup.log 2>&1 &

# Wait a moment and check if server started
sleep 5

# Check if server is running
if pgrep -f "node server.js" > /dev/null; then
    echo "✅ Server started successfully!"
    echo "📊 Check logs: tail -f logs/startup.log"
    echo "🔍 Health check: curl http://localhost:3000/api/health"
else
    echo "❌ Server failed to start. Check logs:"
    cat logs/startup.log
fi
[V0_FILE]javascript:file="check-port.js"
const net = require("net")

function checkPort(port) {
  return new Promise((resolve) => {
    const server = net.createServer()

server.listen(port, (err) => {
      if (err) {
        server.close()
        resolve(false) // Port is in use
      } else {
        server.close(() => {
          resolve(true) // Port is available
        })
      }
    })

server.on("error", () => {
      resolve(false) // Port is in use
    })
  })
}

async function findAvailablePorts() {
  console.log("🔍 Checking port availability...")
  const portsToCheck = [3000, 3001, 3002, 3003, 3004, 3005, 8000, 8080]

for (const port of portsToCheck) {
    const available = await checkPort(port)
    console.log(`Port ${port}: ${available ? "✅ Available" : "❌ In use"}`)
  }
}

// Check what's using the ports
const { exec } = require("child_process")
exec("lsof -i :3000-3005", (error, stdout, stderr) => {
  if (stdout) {
    console.log("\n🔍 Processes using ports 3000-3005:")
    console.log(stdout)
  }
})

findAvailablePorts()118:Tadc3a,[V0_FILE]plaintext:file=".gitignore" isMerged="true"
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules

# next.js
/.next/
/out/

# production
/build

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# env files
.env*

# vercel
.vercel

# typescript
*.tsbuildinfo
next-env.d.ts
[V0_FILE]markdown:file="README.md" isMerged="true"
# Nuvatech website review

*Automatically synced with your [v0.dev](https://v0.dev) deployments*

[![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/dhruv191004-4668s-projects/v0-nuvatech-website-review)
[![Built with v0](https://img.shields.io/badge/Built%20with-v0.dev-black?style=for-the-badge)](https://v0.dev/chat/projects/hboembkQxp0)

## Overview

This repository will stay in sync with your deployed chats on [v0.dev](https://v0.dev).
Any changes you make to your deployed app will be automatically pushed to this repository from [v0.dev](https://v0.dev).

## Deployment

Your project is live at:

**[https://vercel.com/dhruv191004-4668s-projects/v0-nuvatech-website-review](https://vercel.com/dhruv191004-4668s-projects/v0-nuvatech-website-review)**

## Build your app

Continue building your app on:

**[https://v0.dev/chat/projects/hboembkQxp0](https://v0.dev/chat/projects/hboembkQxp0)**

## How It Works

1. Create and modify your project using [v0.dev](https://v0.dev)
2. Deploy your chats from the v0 interface
3. Changes are automatically pushed to this repository
4. Vercel deploys the latest version from this repository
[V0_FILE]typescriptreact:file="app/about/page.tsx" isMerged="true"
import Image from "next/image"
import { ArrowRight, CheckCircle, Users, Zap, Shield, Target, MapPin, Phone, Mail } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import EnhancedHeader from "../../components/enhanced-header"
import EnhancedFooter from "../../components/enhanced-footer"
import Link from "next/link"

export default function AboutPage() {
  const milestones = [
    {
      year: "2014",
      title: "Company Founded",
      description:
        "Nuvatech Technology was established in Ahmedabad with a vision to transform businesses through innovative software solutions.",
    },
    {
      year: "2015",
      title: "First ERP Solution",
      description:
        "Launched our first industry-specific ERP solution for garment manufacturing, which later evolved into StitchIT.",
    },
    {
      year: "2017",
      title: "Expansion of Services",
      description:
        "Expanded our product portfolio with WashIT for laundry management and HR TECH for human resource management.",
    },
    {
      year: "2019",
      title: "Digital Transformation",
      description:
        "Launched DigitAil to help businesses navigate the e-commerce landscape with comprehensive multi-channel management.",
    },
    {
      year: "2021",
      title: "500+ Clients Milestone",
      description:
        "Reached the milestone of serving 500+ businesses across India with our innovative software solutions.",
    },
    {
      year: "2023",
      title: "Cloud Transformation",
      description:
        "Migrated all our solutions to cloud infrastructure, enabling better scalability and accessibility for our clients.",
    },
  ]

const values = [
    {
      title: "Innovation",
      description:
        "We constantly push the boundaries of what's possible in software development to deliver cutting-edge solutions.",
      icon: Zap,
    },
    {
      title: "Customer Focus",
      description:
        "Our clients' success is our success. We work closely with each client to understand their unique needs and challenges.",
      icon: Users,
    },
    {
      title: "Excellence",
      description: "We strive for excellence in everything we do, from code quality to customer service and support.",
      icon: Target,
    },
    {
      title: "Integrity",
      description: "We operate with transparency, honesty, and ethical business practices in all our dealings.",
      icon: Shield,
    },
  ]

return (
    <div className="min-h-screen bg-gradient-to-br from-white to-slate-50">
      {/* Enhanced Header */}
      <EnhancedHeader />

{/* Hero Section */}
      <section className="container mx-auto px-4 py-16 md:py-24">
        <div className="text-center max-w-4xl mx-auto">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">About Us</Badge>
          <h1 className="text-4xl md:text-6xl font-bold text-slate-900 mb-6">
            Transforming Businesses Through
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-orange-500">
              {" "}
              Innovative Technology
            </span>
          </h1>
          <p className="text-xl text-slate-600 mb-8 leading-relaxed">
            Since 2018, Nuvate Technology has been at the forefront of developing industry-specific software solutions
            that empower businesses to streamline operations, increase efficiency, and drive growth.
          </p>
        </div>
      </section>

{/* Vision & Mission */}
      <section className="container mx-auto px-4 py-16 md:py-24 bg-white">
        <div className="grid md:grid-cols-2 gap-12 items-center">
          <div>
            
            <iframe
              width="746"
              height="420"
              src="https://www.youtube.com/embed/-EuSxNX5e6o"
              title="Nuvate Technology Company Profile"
              frameBorder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;web-share"
              referrerPolicy="strict-origin-when-cross-origin"
              allowFullScreen
              className="rounded-xl shadow-xl w-full mb-4"
            ></iframe>

</div>
          <div className="space-y-8">
            <div>
              <h2 className="text-3xl font-bold text-slate-900 mb-4">Our Vision</h2>
              <p className="text-lg text-slate-600 leading-relaxed">
                To be the leading provider of innovative technology solutions that transform businesses and drive
                industry standards across India and beyond.
              </p>
            </div>

<div>
              <h2 className="text-3xl font-bold text-slate-900 mb-4">Our Mission</h2>
              <p className="text-lg text-slate-600 leading-relaxed">
                To empower businesses with tailored software solutions that address their unique challenges, streamline
                operations, and accelerate growth through digital transformation.
              </p>
            </div>

<div className="pt-4">
              <h3 className="text-xl font-semibold text-slate-900 mb-4">What Sets Us Apart</h3>
              <ul className="space-y-3">
                {[
                  "Industry-specific expertise across manufacturing, laundry, e-commerce, and HR sectors",
                  "Customizable solutions tailored to your unique business requirements",
                  "Dedicated support team ensuring smooth implementation and operation",
                  "Continuous innovation to keep your business ahead of the competition",
                ].map((item, index) => (
                  <li key={index} className="flex items-start space-x-3">
                    <CheckCircle className="h-6 w-6 text-orange-500 flex-shrink-0 mt-0.5" />
                    <span className="text-slate-600">{item}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

{/* Our Values */}
      <section className="container mx-auto px-4 py-16 md:py-24">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">Our Core Values</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">The Principles That Guide Us</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            Our values define who we are and how we work. They shape our culture and guide our decisions every day.
          </p>
        </div>

<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
          {values.map((value, index) => (
            <Card
              key={index}
              className="border-0 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2"
            >
              <CardContent className="p-8 text-center">
                <div className="h-16 w-16 rounded-full bg-orange-100 flex items-center justify-center text-orange-600 mx-auto mb-6">
                  <value.icon className="h-8 w-8" />
                </div>
                <h3 className="text-xl font-semibold text-slate-900 mb-3">{value.title}</h3>
                <p className="text-slate-600">{value.description}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

{/* Company Timeline */}
      <section className="container mx-auto px-4 py-16 md:py-24 bg-gradient-to-br from-slate-50 to-slate-100">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">Our Journey</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Milestones That Define Us</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            From our humble beginnings to becoming a leading technology provider, our journey has been defined by
            innovation and growth.
          </p>
        </div>

<div className="relative">
          {/* Timeline Line */}
          <div className="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-orange-200 hidden md:block"></div>

<div className="space-y-12">
            {milestones.map((milestone, index) => (
              <div key={index} className="relative">
                <div
                  className={`md:flex items-center ${index % 2 === 0 ? "md:flex-row" : "md:flex-row-reverse"} gap-8`}
                >
                  {/* Year Marker */}
                  <div className="md:w-1/2 flex md:justify-center relative mb-8 md:mb-0">
                    <div className="md:absolute md:left-1/2 md:transform md:-translate-x-1/2 z-10">
                      <div className="bg-orange-500 text-white text-xl font-bold rounded-full h-16 w-16 flex items-center justify-center shadow-lg">
                        {milestone.year}
                      </div>
                    </div>
                  </div>

{/* Content */}
                  <div className="md:w-1/2">
                    <Card className="border-0 shadow-lg hover:shadow-xl transition-all duration-300">
                      <CardContent className="p-6">
                        <h3 className="text-xl font-semibold text-slate-900 mb-2">{milestone.title}</h3>
                        <p className="text-slate-600">{milestone.description}</p>
                      </CardContent>
                    </Card>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

{/* Contact Information */}
      <section className="container mx-auto px-4 py-16 md:py-24">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">Get In Touch</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Connect With Our Team</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            Have questions about our company or solutions? We'd love to hear from you.
          </p>
        </div>

<div className="grid md:grid-cols-3 gap-8">
        <Link href='https://maps.app.goo.gl/opv9TedfCDreV7RX7'>
          <Card className="border-0 shadow-lg hover:shadow-xl transition-all duration-300">
            <CardContent className="p-6 text-center">
              <div className="h-12 w-12 rounded-full bg-orange-100 flex items-center justify-center text-orange-600 mx-auto mb-4">
                <MapPin className="h-6 w-6" />
              </div>
              <h3 className="text-lg font-semibold text-slate-900 mb-2">Visit Us</h3>
              <p className="text-slate-600">
                B-901, Empire Business Hub,
                <br />
                Science City Road, Sola,
                <br />
                Ahmedabad - 380060, Gujarat, India
              </p>
            </CardContent>
          </Card>
        </Link>

<Card className="border-0 shadow-lg hover:shadow-xl transition-all duration-300">
            <CardContent className="p-6 text-center">
              <div className="h-12 w-12 rounded-full bg-orange-100 flex items-center justify-center text-orange-600 mx-auto mb-4">
                <Phone className="h-6 w-6" />
              </div>
              <h3 className="text-lg font-semibold text-slate-900 mb-2">Call Us</h3>
              <p className="text-slate-600">+91 76007 67857</p>
              <p className="text-slate-500 text-sm mt-2">Monday - Saturday: 9:00 AM - 6:00 PM</p>
            </CardContent>
          </Card>

<Card className="border-0 shadow-lg hover:shadow-xl transition-all duration-300">
            <CardContent className="p-6 text-center">
              <div className="h-12 w-12 rounded-full bg-orange-100 flex items-center justify-center text-orange-600 mx-auto mb-4">
                <Mail className="h-6 w-6" />
              </div>
              <h3 className="text-lg font-semibold text-slate-900 mb-2">Email Us</h3>
              <p className="text-slate-600">info@nuvatetechnology.com</p>
              <p className="text-slate-500 text-sm mt-2">We'll respond within 24 hours</p>
            </CardContent>
          </Card>
        </div>

{/* Enhanced Footer */}
      <EnhancedFooter />
    </div>
  )
}
[V0_FILE]typescript:file="app/actions/send-application.ts" isMerged="true"
"use server"

export async function sendJobApplication(formData: FormData) {
  // Simulate processing time
  await new Promise((resolve) => setTimeout(resolve, 2000))

// Extract form data
  const applicationData = {
    firstName: formData.get("firstName") as string,
    lastName: formData.get("lastName") as string,
    email: formData.get("email") as string,
    phone: formData.get("phone") as string,
    position: formData.get("position") as string,
    experience: formData.get("experience") as string,
    currentLocation: formData.get("currentLocation") as string,
    skills: formData.get("skills") as string,
    coverLetter: formData.get("coverLetter") as string,
    portfolio: formData.get("portfolio") as string,
    consent: formData.get("consent") === "on",
    updates: formData.get("updates") === "on",
  }

// Validate required fields
  if (
    !applicationData.firstName ||
    !applicationData.lastName ||
    !applicationData.email ||
    !applicationData.phone ||
    !applicationData.currentLocation ||
    !applicationData.consent
  ) {
    return {
      success: false,
      message: "Please fill in all required fields and accept the consent.",
    }
  }

// Validate email format
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  if (!emailRegex.test(applicationData.email)) {
    return {
      success: false,
      message: "Please enter a valid email address.",
    }
  }

// In a real application, you would:
  // 1. Save to database
  // 2. Send email to HR team
  // 3. Send confirmation email to applicant
  // 4. Process resume file upload

// For demo purposes, we'll simulate success
  console.log("Job Application Received:", applicationData)

// Simulate email sending (in real app, use services like Resend, SendGrid, etc.)
  try {
    // Example: await sendEmailToHR(applicationData)
    // Example: await sendConfirmationEmail(applicationData.email)

return {
      success: true,
      message: `Thank you ${applicationData.firstName}! Your application has been submitted successfully. We'll review your application and get back to you within 2-3 business days.`,
    }
  } catch (error) {
    return {
      success: false,
      message: "There was an error submitting your application. Please try again or contact us directly.",
    }
  }
}
[V0_FILE]typescriptreact:file="app/blog/digital-transformation-success-stories/page.tsx" isMerged="true"
import Image from "next/image"
import { ArrowLeft, Calendar, User, Clock, Share2, BookOpen } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import EnhancedHeader from "../../../components/enhanced-header"
import EnhancedFooter from "../../../components/enhanced-footer"
import Link from "next/link"

export default function DigitalTransformationBlogPost() {
  const relatedPosts = [
    {
      title: "How Industry 4.0 is Transforming Garment Manufacturing",
      slug: "/blog/industry-4-0-transforming-garment-manufacturing",
      category: "Industry Insights",
      readTime: "8 min read",
    },
    {
      title: "The Future of E-commerce: Trends to Watch in 2024",
      slug: "/blog/future-of-ecommerce-trends-2024",
      category: "E-commerce",
      readTime: "7 min read",
    },
    {
      title: "5 Ways to Optimize Your Laundry Business Operations",
      slug: "/blog/optimize-laundry-business-operations",
      category: "Business Tips",
      readTime: "6 min read",
    },
  ]

return (
    <div className="min-h-screen bg-gradient-to-br from-white to-slate-50">
      <EnhancedHeader />

{/* Back Button */}
      <section className="container mx-auto px-4 py-8">
        <Link href="/blog">
          <Button variant="ghost" className="text-orange-600 hover:text-orange-700 hover:bg-orange-50">
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back to Blog
          </Button>
        </Link>
      </section>

{/* Article Header */}
      <section className="container mx-auto px-4 py-8">
        <div className="max-w-4xl mx-auto">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">Case Studies</Badge>
          <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-6">
            Digital Transformation Success Stories: Lessons from Indian SMEs
          </h1>

<div className="flex flex-wrap items-center gap-6 text-slate-600 mb-8">
            <div className="flex items-center space-x-2">
              <User className="h-4 w-4" />
              <span>Vikram Singh</span>
            </div>
            <div className="flex items-center space-x-2">
              <Calendar className="h-4 w-4" />
              <span>May 15, 2024</span>
            </div>
            <div className="flex items-center space-x-2">
              <Clock className="h-4 w-4" />
              <span>10 min read</span>
            </div>
            <Button variant="ghost" size="sm" className="text-orange-600 hover:text-orange-700">
              <Share2 className="h-4 w-4 mr-1" />
              Share
            </Button>
          </div>

{/* Article Content */}
      <section className="container mx-auto px-4 py-8">
        <div className="max-w-4xl mx-auto">
          <div className="prose prose-lg max-w-none">
            <p className="text-xl text-slate-600 mb-8 leading-relaxed">
              Digital transformation is no longer a luxury—it's a necessity for survival in today's competitive business
              landscape. Indian SMEs are leading the charge, demonstrating remarkable innovation and adaptability in
              their digital journeys.
            </p>

<h2 className="text-3xl font-bold text-slate-900 mb-4">The Digital Imperative for SMEs</h2>
            <p className="text-slate-700 mb-6">
              Small and Medium Enterprises (SMEs) form the backbone of the Indian economy, contributing over 30% to the
              GDP and employing millions of people. The COVID-19 pandemic accelerated the need for digital adoption,
              forcing businesses to rethink their operations and customer engagement strategies.
            </p>

<div className="bg-blue-50 p-6 rounded-lg mb-6">
              <h3 className="text-xl font-semibold text-blue-800 mb-2">Digital Transformation Statistics</h3>
              <ul className="text-blue-700">
                <li>• 73% of Indian SMEs accelerated digital initiatives post-pandemic</li>
                <li>• Digital-first SMEs saw 2.5x faster revenue growth</li>
                <li>• 68% reported improved operational efficiency</li>
                <li>• 45% expanded to new markets through digital channels</li>
              </ul>
            </div>

<h2 className="text-3xl font-bold text-slate-900 mb-4">
              Success Story 1: Mumbai-Based Textile Manufacturer
            </h2>
            <p className="text-slate-700 mb-4">
              <strong>Company:</strong> Shree Textiles Pvt. Ltd.
              <br />
              <strong>Industry:</strong> Textile Manufacturing
              <br />
              <strong>Challenge:</strong> Manual inventory management and production planning
            </p>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">The Challenge</h3>
            <p className="text-slate-700 mb-6">
              Shree Textiles was struggling with inventory discrepancies, production delays, and customer complaints.
              Their manual processes were causing bottlenecks and affecting their ability to scale operations.
            </p>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">The Solution</h3>
            <p className="text-slate-700 mb-6">
              They implemented our StitchIT platform, which provided real-time inventory tracking, automated production
              planning, and integrated quality control systems.
            </p>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">The Results</h3>
            <ul className="list-disc pl-6 mb-6 text-slate-700">
              <li>40% reduction in inventory holding costs</li>
              <li>35% improvement in production efficiency</li>
              <li>50% decrease in customer complaints</li>
              <li>25% increase in overall revenue</li>
            </ul>

<h2 className="text-3xl font-bold text-slate-900 mb-4">Success Story 2: Delhi-Based E-commerce Startup</h2>
            <p className="text-slate-700 mb-4">
              <strong>Company:</strong> FashionForward Online
              <br />
              <strong>Industry:</strong> E-commerce Fashion
              <br />
              <strong>Challenge:</strong> Multi-channel inventory management
            </p>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">The Transformation Journey</h3>
            <p className="text-slate-700 mb-6">
              FashionForward was selling across multiple platforms but struggled with inventory synchronization. They
              often faced stockouts on one platform while having excess inventory on another.
            </p>

<div className="bg-green-50 p-6 rounded-lg mb-6">
              <h4 className="text-lg font-semibold text-green-800 mb-2">Key Achievements</h4>
              <ul className="text-green-700">
                <li>✓ 99% inventory accuracy across all channels</li>
                <li>✓ 60% reduction in stockouts</li>
                <li>✓ 80% faster order processing</li>
                <li>✓ 150% increase in sales volume</li>
              </ul>
            </div>

<h2 className="text-3xl font-bold text-slate-900 mb-4">Success Story 3: Bangalore-Based Service Company</h2>
            <p className="text-slate-700 mb-4">
              <strong>Company:</strong> CleanTech Services
              <br />
              <strong>Industry:</strong> Commercial Cleaning
              <br />
              <strong>Challenge:</strong> Route optimization and customer management
            </p>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">Digital Innovation</h3>
            <p className="text-slate-700 mb-6">
              CleanTech implemented our WashIT platform to optimize their service routes, manage customer relationships,
              and automate billing processes.
            </p>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">Measurable Impact</h3>
            <ul className="list-disc pl-6 mb-6 text-slate-700">
              <li>45% reduction in fuel costs through route optimization</li>
              <li>90% improvement in on-time service delivery</li>
              <li>70% reduction in billing errors</li>
              <li>200% increase in customer retention rate</li>
            </ul>

<h2 className="text-3xl font-bold text-slate-900 mb-4">Common Success Factors</h2>
            <p className="text-slate-700 mb-6">
              Analyzing these success stories, we identified several common factors that contributed to successful
              digital transformation:
            </p>

<ol className="list-decimal pl-6 mb-6 text-slate-700">
              <li>
                <strong>Leadership Commitment:</strong> Strong support from top management
              </li>
              <li>
                <strong>Employee Training:</strong> Comprehensive training programs for staff
              </li>
              <li>
                <strong>Phased Implementation:</strong> Gradual rollout to minimize disruption
              </li>
              <li>
                <strong>Data-Driven Decisions:</strong> Using analytics to guide business decisions
              </li>
              <li>
                <strong>Customer Focus:</strong> Keeping customer experience at the center
              </li>
              <li>
                <strong>Continuous Improvement:</strong> Regular system updates and optimizations
              </li>
            </ol>

<h2 className="text-3xl font-bold text-slate-900 mb-4">Lessons Learned</h2>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">1. Start Small, Think Big</h3>
            <p className="text-slate-700 mb-6">
              Successful SMEs didn't try to transform everything at once. They started with one critical process and
              gradually expanded their digital footprint.
            </p>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">2. Invest in People</h3>
            <p className="text-slate-700 mb-6">
              Technology is only as good as the people using it. Successful companies invested heavily in training and
              change management.
            </p>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">3. Choose the Right Partner</h3>
            <p className="text-slate-700 mb-6">
              Working with experienced technology partners who understand the local market and business challenges is
              crucial for success.
            </p>

<div className="bg-slate-50 p-6 rounded-lg mb-6">
              <h3 className="text-xl font-semibold text-slate-800 mb-2">Ready to Start Your Digital Journey?</h3>
              <p className="text-slate-700">
                At Nuvatech, we've helped hundreds of SMEs successfully navigate their digital transformation journey.
                Our industry-specific solutions are designed to deliver quick wins while building a foundation for
                long-term growth.
              </p>
            </div>

<h2 className="text-3xl font-bold text-slate-900 mb-4">The Road Ahead</h2>
            <p className="text-slate-700 mb-6">
              Digital transformation is not a destination—it's an ongoing journey. The SMEs that will thrive in the
              future are those that embrace continuous innovation, stay close to their customers, and leverage
              technology to create competitive advantages.
            </p>

<p className="text-slate-700 mb-6">
              As we look ahead, emerging technologies like AI, IoT, and blockchain will create new opportunities for
              SMEs to differentiate themselves and serve their customers better. The key is to stay curious, stay agile,
              and never stop learning.
            </p>
          </div>
        </div>
      </section>

{/* Related Posts */}
      <section className="container mx-auto px-4 py-16 bg-slate-50">
        <div className="max-w-4xl mx-auto">
          <h2 className="text-3xl font-bold text-slate-900 mb-8">Related Articles</h2>
          <div className="grid md:grid-cols-3 gap-6">
            {relatedPosts.map((post, index) => (
              <Card key={index} className="border-0 shadow-lg hover:shadow-xl transition-all duration-300">
                <CardContent className="p-6">
                  <Badge className="mb-3 bg-orange-100 text-orange-700">{post.category}</Badge>
                  <h3 className="text-lg font-semibold text-slate-900 mb-3">{post.title}</h3>
                  <div className="flex items-center text-sm text-slate-500 mb-4">
                    <BookOpen className="h-3 w-3 mr-1" />
                    {post.readTime}
                  </div>
                  <Link href={post.slug}>
                    <Button variant="ghost" className="text-orange-600 hover:text-orange-700 p-0">
                      Read More →
                    </Button>
                  </Link>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

<EnhancedFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/blog/erp-implementation-roi/page.tsx" isMerged="true"
import Image from "next/image"
import { ArrowLeft, Calendar, User, Clock, Share2, BookOpen } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import EnhancedHeader from "../../../components/enhanced-header"
import EnhancedFooter from "../../../components/enhanced-footer"
import Link from "next/link"

export default function ERPROIBlogPost() {
  const relatedPosts = [
    {
      title: "How Industry 4.0 is Transforming Garment Manufacturing",
      slug: "/blog/industry-4-0-transforming-garment-manufacturing",
      category: "Industry Insights",
      readTime: "8 min read",
    },
    {
      title: "Digital Transformation Success Stories: Lessons from Indian SMEs",
      slug: "/blog/digital-transformation-success-stories",
      category: "Case Studies",
      readTime: "10 min read",
    },
    {
      title: "HR Compliance: Navigating the Latest Regulatory Changes",
      slug: "/blog/hr-compliance-regulatory-changes",
      category: "HR & Compliance",
      readTime: "9 min read",
    },
  ]

return (
    <div className="min-h-screen bg-gradient-to-br from-white to-slate-50">
      <EnhancedHeader />

{/* Article Header */}
      <section className="container mx-auto px-4 py-8">
        <div className="max-w-4xl mx-auto">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">ERP</Badge>
          <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-6">
            The ROI of ERP Implementation: Measuring Success Beyond Numbers
          </h1>

<div className="flex flex-wrap items-center gap-6 text-slate-600 mb-8">
            <div className="flex items-center space-x-2">
              <User className="h-4 w-4" />
              <span>Rajesh Patel</span>
            </div>
            <div className="flex items-center space-x-2">
              <Calendar className="h-4 w-4" />
              <span>May 1, 2024</span>
            </div>
            <div className="flex items-center space-x-2">
              <Clock className="h-4 w-4" />
              <span>7 min read</span>
            </div>
            <Button variant="ghost" size="sm" className="text-orange-600 hover:text-orange-700">
              <Share2 className="h-4 w-4 mr-1" />
              Share
            </Button>
          </div>

{/* Article Content */}
      <section className="container mx-auto px-4 py-8">
        <div className="max-w-4xl mx-auto">
          <div className="prose prose-lg max-w-none">
            <p className="text-xl text-slate-600 mb-8 leading-relaxed">
              Measuring the return on investment (ROI) of ERP implementation goes far beyond simple financial
              calculations. While cost savings and revenue increases are important, the true value of ERP systems lies
              in their ability to transform business operations and create sustainable competitive advantages.
            </p>

<h2 className="text-3xl font-bold text-slate-900 mb-4">Understanding ERP ROI</h2>
            <p className="text-slate-700 mb-6">
              Traditional ROI calculations focus on quantifiable benefits like cost reductions and efficiency gains.
              However, ERP systems deliver value across multiple dimensions that may not be immediately apparent in
              financial statements but are crucial for long-term business success.
            </p>

<div className="bg-blue-50 p-6 rounded-lg mb-6">
              <h3 className="text-xl font-semibold text-blue-800 mb-2">ERP ROI Framework</h3>
              <ul className="text-blue-700">
                <li>
                  • <strong>Tangible Benefits:</strong> Measurable cost savings and revenue increases
                </li>
                <li>
                  • <strong>Intangible Benefits:</strong> Improved decision-making and customer satisfaction
                </li>
                <li>
                  • <strong>Strategic Benefits:</strong> Enhanced competitive positioning and scalability
                </li>
                <li>
                  • <strong>Risk Mitigation:</strong> Reduced operational and compliance risks
                </li>
              </ul>
            </div>

<h2 className="text-3xl font-bold text-slate-900 mb-4">Tangible Benefits: The Numbers That Matter</h2>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">1. Operational Cost Reduction</h3>
            <p className="text-slate-700 mb-6">
              ERP systems streamline processes and eliminate redundancies, leading to significant cost savings across
              various operational areas.
            </p>

<ul className="list-disc pl-6 mb-6 text-slate-700">
              <li>
                <strong>Labor Cost Reduction:</strong> 15-25% through process automation
              </li>
              <li>
                <strong>Inventory Optimization:</strong> 20-30% reduction in carrying costs
              </li>
              <li>
                <strong>Administrative Efficiency:</strong> 30-40% reduction in manual tasks
              </li>
              <li>
                <strong>IT Infrastructure:</strong> 10-20% savings through system consolidation
              </li>
            </ul>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">2. Revenue Enhancement</h3>
            <p className="text-slate-700 mb-6">
              Beyond cost savings, ERP systems can directly contribute to revenue growth through improved customer
              service and operational efficiency.
            </p>

<div className="bg-green-50 p-6 rounded-lg mb-6">
              <h4 className="text-lg font-semibold text-green-800 mb-2">Revenue Impact Areas</h4>
              <ul className="text-green-700">
                <li>• Faster order processing leading to increased sales volume</li>
                <li>• Improved customer satisfaction resulting in higher retention</li>
                <li>• Better inventory management reducing stockouts</li>
                <li>• Enhanced product quality through better process control</li>
                <li>• Faster time-to-market for new products</li>
              </ul>
            </div>

<h2 className="text-3xl font-bold text-slate-900 mb-4">Intangible Benefits: The Hidden Value</h2>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">1. Improved Decision Making</h3>
            <p className="text-slate-700 mb-6">
              ERP systems provide real-time visibility into business operations, enabling managers to make informed
              decisions quickly and accurately.
            </p>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">2. Enhanced Customer Experience</h3>
            <p className="text-slate-700 mb-6">
              Integrated systems enable better customer service through faster response times, accurate information, and
              consistent communication across all touchpoints.
            </p>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">3. Employee Productivity and Satisfaction</h3>
            <p className="text-slate-700 mb-6">
              Modern ERP systems reduce manual work and provide employees with better tools, leading to increased
              productivity and job satisfaction.
            </p>

<h2 className="text-3xl font-bold text-slate-900 mb-4">ROI Calculation Methodology</h2>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">Step 1: Establish Baseline Metrics</h3>
            <p className="text-slate-700 mb-6">
              Before implementation, document current performance metrics across all areas that the ERP system will
              impact.
            </p>

<ul className="list-disc pl-6 mb-6 text-slate-700">
              <li>Order processing time</li>
              <li>Inventory turnover rates</li>
              <li>Customer satisfaction scores</li>
              <li>Employee productivity metrics</li>
              <li>Error rates and rework costs</li>
            </ul>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">Step 2: Track Implementation Costs</h3>
            <p className="text-slate-700 mb-6">
              Comprehensive cost tracking should include all direct and indirect expenses associated with ERP
              implementation.
            </p>

<div className="bg-yellow-50 p-6 rounded-lg mb-6">
              <h4 className="text-lg font-semibold text-yellow-800 mb-2">Total Cost of Ownership (TCO)</h4>
              <ul className="text-yellow-700">
                <li>• Software licensing and subscription fees</li>
                <li>• Implementation and customization costs</li>
                <li>• Training and change management expenses</li>
                <li>• Hardware and infrastructure upgrades</li>
                <li>• Ongoing maintenance and support costs</li>
                <li>• Internal resource allocation costs</li>
              </ul>
            </div>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">Step 3: Measure Post-Implementation Benefits</h3>
            <p className="text-slate-700 mb-6">
              After implementation, continuously monitor the same metrics established in the baseline to quantify
              improvements and calculate ROI.
            </p>

<h2 className="text-3xl font-bold text-slate-900 mb-4">ROI Calculation Formula</h2>
            <div className="bg-slate-100 p-6 rounded-lg mb-6 text-center">
              <p className="text-2xl font-bold text-slate-800 mb-2">ROI = (Benefits - Costs) / Costs × 100</p>
              <p className="text-slate-600">Where Benefits include both tangible and quantified intangible benefits</p>
            </div>

<h2 className="text-3xl font-bold text-slate-900 mb-4">Industry Benchmarks and Expectations</h2>
            <p className="text-slate-700 mb-6">
              Understanding industry benchmarks helps set realistic expectations for ERP ROI and provides context for
              measuring success.
            </p>

<div className="bg-orange-50 p-6 rounded-lg mb-6">
              <h3 className="text-xl font-semibold text-orange-800 mb-2">Typical ERP ROI Ranges</h3>
              <ul className="text-orange-700">
                <li>
                  • <strong>Manufacturing:</strong> 150-300% ROI within 2-3 years
                </li>
                <li>
                  • <strong>Retail/E-commerce:</strong> 200-400% ROI within 1-2 years
                </li>
                <li>
                  • <strong>Services:</strong> 100-250% ROI within 2-4 years
                </li>
                <li>
                  • <strong>Healthcare:</strong> 120-280% ROI within 3-5 years
                </li>
              </ul>
            </div>

<h2 className="text-3xl font-bold text-slate-900 mb-4">Case Study: Manufacturing Company ROI</h2>
            <p className="text-slate-700 mb-4">
              <strong>Company:</strong> Mid-size textile manufacturer
              <br />
              <strong>Implementation Cost:</strong> ₹50 lakhs
              <br />
              <strong>Timeline:</strong> 18 months
            </p>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">Year 1 Benefits</h3>
            <ul className="list-disc pl-6 mb-6 text-slate-700">
              <li>Inventory reduction: ₹15 lakhs savings</li>
              <li>Labor efficiency: ₹12 lakhs savings</li>
              <li>Reduced errors: ₹8 lakhs savings</li>
              <li>Faster processing: ₹10 lakhs additional revenue</li>
              <li>
                <strong>Total Year 1 Benefits: ₹45 lakhs</strong>
              </li>
            </ul>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">3-Year ROI Calculation</h3>
            <ul className="list-disc pl-6 mb-6 text-slate-700">
              <li>Total 3-year benefits: ₹1.5 crores</li>
              <li>Total investment: ₹50 lakhs</li>
              <li>
                <strong>ROI: 200% over 3 years</strong>
              </li>
            </ul>

<h2 className="text-3xl font-bold text-slate-900 mb-4">Maximizing ERP ROI</h2>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">1. Proper Planning and Scope Definition</h3>
            <p className="text-slate-700 mb-6">
              Clear project scope and realistic timelines are crucial for achieving expected ROI. Avoid scope creep and
              focus on core business processes first.
            </p>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">2. Change Management and Training</h3>
            <p className="text-slate-700 mb-6">
              User adoption is critical for ROI realization. Invest in comprehensive training and change management to
              ensure employees embrace the new system.
            </p>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">3. Continuous Optimization</h3>
            <p className="text-slate-700 mb-6">
              ERP ROI improves over time as users become more proficient and processes are refined. Regular system
              optimization ensures continued value delivery.
            </p>

<h2 className="text-3xl font-bold text-slate-900 mb-4">Common ROI Pitfalls to Avoid</h2>
            <div className="bg-red-50 p-6 rounded-lg mb-6">
              <ul className="text-red-700">
                <li>• Underestimating implementation time and costs</li>
                <li>• Focusing only on software costs, ignoring total TCO</li>
                <li>• Inadequate change management and training</li>
                <li>• Unrealistic benefit expectations</li>
                <li>• Poor data quality affecting system effectiveness</li>
                <li>• Lack of executive sponsorship and support</li>
              </ul>
            </div>

<div className="bg-slate-50 p-6 rounded-lg mb-6">
              <h3 className="text-xl font-semibold text-slate-800 mb-2">Nuvatech's Approach to ROI</h3>
              <p className="text-slate-700">
                At Nuvatech, we work closely with our clients to establish clear ROI expectations and measurement
                frameworks from day one. Our industry-specific solutions are designed to deliver quick wins while
                building a foundation for long-term value creation. We provide ongoing support to ensure you achieve and
                exceed your ROI targets.
              </p>
            </div>

<h2 className="text-3xl font-bold text-slate-900 mb-4">Conclusion</h2>
            <p className="text-slate-700 mb-6">
              ERP ROI measurement requires a comprehensive approach that considers both tangible and intangible
              benefits. While financial returns are important, the true value of ERP systems lies in their ability to
              transform business operations, improve decision-making, and create sustainable competitive advantages.
            </p>

<p className="text-slate-700 mb-6">
              Success in ERP ROI comes from proper planning, realistic expectations, strong change management, and
              continuous optimization. Organizations that take a holistic approach to ROI measurement and focus on
              long-term value creation will realize the full potential of their ERP investment.
            </p>
          </div>
        </div>
      </section>

<EnhancedFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/blog/future-of-ecommerce-trends-2024/page.tsx" isMerged="true"
import Image from "next/image"
import { ArrowLeft, Calendar, User, Clock, Share2, BookOpen } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import EnhancedHeader from "../../../components/enhanced-header"
import EnhancedFooter from "../../../components/enhanced-footer"
import Link from "next/link"

export default function EcommerceTrendsBlogPost() {
  const relatedPosts = [
    {
      title: "How Industry 4.0 is Transforming Garment Manufacturing",
      slug: "/blog/industry-4-0-transforming-garment-manufacturing",
      category: "Industry Insights",
      readTime: "8 min read",
    },
    {
      title: "5 Ways to Optimize Your Laundry Business Operations",
      slug: "/blog/optimize-laundry-business-operations",
      category: "Business Tips",
      readTime: "6 min read",
    },
    {
      title: "Digital Transformation Success Stories: Lessons from Indian SMEs",
      slug: "/blog/digital-transformation-success-stories",
      category: "Case Studies",
      readTime: "10 min read",
    },
  ]

return (
    <div className="min-h-screen bg-gradient-to-br from-white to-slate-50">
      <EnhancedHeader />

{/* Article Header */}
      <section className="container mx-auto px-4 py-8">
        <div className="max-w-4xl mx-auto">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">E-commerce</Badge>
          <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-6">
            The Future of E-commerce: Trends to Watch in 2024
          </h1>

<div className="flex flex-wrap items-center gap-6 text-slate-600 mb-8">
            <div className="flex items-center space-x-2">
              <User className="h-4 w-4" />
              <span>Amit Kumar</span>
            </div>
            <div className="flex items-center space-x-2">
              <Calendar className="h-4 w-4" />
              <span>May 28, 2024</span>
            </div>
            <div className="flex items-center space-x-2">
              <Clock className="h-4 w-4" />
              <span>7 min read</span>
            </div>
            <Button variant="ghost" size="sm" className="text-orange-600 hover:text-orange-700">
              <Share2 className="h-4 w-4 mr-1" />
              Share
            </Button>
          </div>

{/* Article Content */}
      <section className="container mx-auto px-4 py-8">
        <div className="max-w-4xl mx-auto">
          <div className="prose prose-lg max-w-none">
            <p className="text-xl text-slate-600 mb-8 leading-relaxed">
              The e-commerce landscape in India is evolving at an unprecedented pace. As we move through 2024,
              businesses must stay ahead of emerging trends to remain competitive and meet changing consumer
              expectations.
            </p>

<h2 className="text-3xl font-bold text-slate-900 mb-4">1. AI-Powered Personalization</h2>
            <p className="text-slate-700 mb-6">
              Artificial Intelligence is revolutionizing how e-commerce platforms understand and serve their customers.
              From personalized product recommendations to dynamic pricing strategies, AI is enabling businesses to
              create unique shopping experiences for each customer.
            </p>
            <ul className="list-disc pl-6 mb-6 text-slate-700">
              <li>Predictive analytics for inventory management</li>
              <li>Chatbots for 24/7 customer support</li>
              <li>Visual search capabilities</li>
              <li>Personalized email marketing campaigns</li>
            </ul>

<h2 className="text-3xl font-bold text-slate-900 mb-4">2. Social Commerce Integration</h2>
            <p className="text-slate-700 mb-6">
              Social media platforms are becoming powerful sales channels. Instagram Shopping, Facebook Marketplace, and
              WhatsApp Business are transforming how Indian consumers discover and purchase products.
            </p>

<div className="bg-orange-50 p-6 rounded-lg mb-6">
              <h3 className="text-xl font-semibold text-orange-800 mb-2">Key Statistics</h3>
              <ul className="text-orange-700">
                <li>• 78% of Indian consumers have made purchases through social media</li>
                <li>• Social commerce is expected to grow by 55% annually</li>
                <li>• Video content drives 3x more engagement than static posts</li>
              </ul>
            </div>

<h2 className="text-3xl font-bold text-slate-900 mb-4">3. Sustainable E-commerce Practices</h2>
            <p className="text-slate-700 mb-6">
              Environmental consciousness is driving consumer behavior. E-commerce businesses are adopting sustainable
              practices to meet growing demand for eco-friendly options.
            </p>

<h2 className="text-3xl font-bold text-slate-900 mb-4">4. Voice Commerce and Smart Devices</h2>
            <p className="text-slate-700 mb-6">
              With the increasing adoption of smart speakers and voice assistants, voice commerce is becoming a
              significant trend. Businesses need to optimize for voice search and enable voice-based purchasing.
            </p>

<h2 className="text-3xl font-bold text-slate-900 mb-4">5. Augmented Reality Shopping</h2>
            <p className="text-slate-700 mb-6">
              AR technology is bridging the gap between online and offline shopping experiences. Customers can now
              virtually try products before purchasing, reducing return rates and increasing satisfaction.
            </p>

<h2 className="text-3xl font-bold text-slate-900 mb-4">Preparing for the Future</h2>
            <p className="text-slate-700 mb-6">
              To stay competitive in this evolving landscape, e-commerce businesses should:
            </p>
            <ol className="list-decimal pl-6 mb-6 text-slate-700">
              <li>Invest in AI and machine learning capabilities</li>
              <li>Develop a strong social media presence</li>
              <li>Implement sustainable business practices</li>
              <li>Optimize for voice search and mobile commerce</li>
              <li>Explore AR/VR technologies for enhanced customer experience</li>
            </ol>

<div className="bg-slate-50 p-6 rounded-lg mb-6">
              <h3 className="text-xl font-semibold text-slate-800 mb-2">How DigitAil Can Help</h3>
              <p className="text-slate-700">
                Our DigitAil platform is designed to help e-commerce businesses implement these trends effectively. With
                built-in AI capabilities, social commerce integration, and comprehensive analytics, we enable businesses
                to stay ahead of the curve.
              </p>
            </div>

<h2 className="text-3xl font-bold text-slate-900 mb-4">Conclusion</h2>
            <p className="text-slate-700 mb-6">
              The future of e-commerce in India is bright and full of opportunities. By embracing these trends and
              investing in the right technology, businesses can create exceptional customer experiences and drive
              sustainable growth.
            </p>
          </div>
        </div>
      </section>

<EnhancedFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/blog/hr-compliance-regulatory-changes/page.tsx" isMerged="true"
import Image from "next/image"
import { ArrowLeft, Calendar, User, Clock, Share2, BookOpen } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import EnhancedHeader from "../../../components/enhanced-header"
import EnhancedFooter from "../../../components/enhanced-footer"
import Link from "next/link"

export default function HRComplianceBlogPost() {
  const relatedPosts = [
    {
      title: "How Industry 4.0 is Transforming Garment Manufacturing",
      slug: "/blog/industry-4-0-transforming-garment-manufacturing",
      category: "Industry Insights",
      readTime: "8 min read",
    },
    {
      title: "The Future of E-commerce: Trends to Watch in 2024",
      slug: "/blog/future-of-ecommerce-trends-2024",
      category: "E-commerce",
      readTime: "7 min read",
    },
    {
      title: "Digital Transformation Success Stories: Lessons from Indian SMEs",
      slug: "/blog/digital-transformation-success-stories",
      category: "Case Studies",
      readTime: "10 min read",
    },
  ]

return (
    <div className="min-h-screen bg-gradient-to-br from-white to-slate-50">
      <EnhancedHeader />

{/* Article Header */}
      <section className="container mx-auto px-4 py-8">
        <div className="max-w-4xl mx-auto">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">HR & Compliance</Badge>
          <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-6">
            HR Compliance: Navigating the Latest Regulatory Changes
          </h1>

<div className="flex flex-wrap items-center gap-6 text-slate-600 mb-8">
            <div className="flex items-center space-x-2">
              <User className="h-4 w-4" />
              <span>Lakshmi Narayanan</span>
            </div>
            <div className="flex items-center space-x-2">
              <Calendar className="h-4 w-4" />
              <span>May 20, 2024</span>
            </div>
            <div className="flex items-center space-x-2">
              <Clock className="h-4 w-4" />
              <span>9 min read</span>
            </div>
            <Button variant="ghost" size="sm" className="text-orange-600 hover:text-orange-700">
              <Share2 className="h-4 w-4 mr-1" />
              Share
            </Button>
          </div>

{/* Article Content */}
      <section className="container mx-auto px-4 py-8">
        <div className="max-w-4xl mx-auto">
          <div className="prose prose-lg max-w-none">
            <p className="text-xl text-slate-600 mb-8 leading-relaxed">
              Staying compliant with HR regulations in India is becoming increasingly complex. With frequent updates to
              labor laws and new compliance requirements, businesses need to stay informed and adapt quickly to avoid
              penalties and legal issues.
            </p>

<h2 className="text-3xl font-bold text-slate-900 mb-4">Recent Changes in Indian Labor Laws</h2>
            <p className="text-slate-700 mb-6">
              The Indian government has introduced several significant changes to labor laws in recent years. These
              changes affect various aspects of employment, from wages and working hours to social security and
              industrial relations.
            </p>

<div className="bg-red-50 p-6 rounded-lg mb-6">
              <h3 className="text-xl font-semibold text-red-800 mb-2">⚠️ Critical Updates</h3>
              <ul className="text-red-700">
                <li>• New Code on Wages (2019) - Minimum wage standardization</li>
                <li>• Industrial Relations Code (2020) - Strike and lockout regulations</li>
                <li>• Social Security Code (2020) - Extended coverage for gig workers</li>
                <li>• Occupational Safety Code (2020) - Enhanced workplace safety requirements</li>
              </ul>
            </div>

<h2 className="text-3xl font-bold text-slate-900 mb-4">Key Compliance Areas</h2>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">1. Wage and Hour Compliance</h3>
            <p className="text-slate-700 mb-4">
              The new wage codes have standardized minimum wage calculations across states. Employers must ensure:
            </p>
            <ul className="list-disc pl-6 mb-6 text-slate-700">
              <li>Proper calculation of overtime payments</li>
              <li>Timely payment of wages (within 7 days for less than 1000 employees)</li>
              <li>Maintenance of accurate wage records</li>
              <li>Compliance with working hour limits (9 hours per day, 48 hours per week)</li>
            </ul>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">2. Social Security Compliance</h3>
            <p className="text-slate-700 mb-6">
              The Social Security Code has expanded coverage to include gig workers and platform workers. Key
              requirements include:
            </p>
            <ul className="list-disc pl-6 mb-6 text-slate-700">
              <li>EPF registration for all eligible employees</li>
              <li>ESI coverage for establishments with 10+ employees</li>
              <li>Gratuity provisions for establishments with 10+ employees</li>
              <li>New social security schemes for gig and platform workers</li>
            </ul>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">3. Workplace Safety and Health</h3>
            <p className="text-slate-700 mb-6">
              The Occupational Safety, Health and Working Conditions Code has introduced stricter safety requirements:
            </p>

<div className="bg-green-50 p-6 rounded-lg mb-6">
              <h4 className="text-lg font-semibold text-green-800 mb-2">Safety Checklist</h4>
              <ul className="text-green-700">
                <li>✓ Annual safety audits for factories</li>
                <li>✓ Safety committees in establishments with 500+ workers</li>
                <li>✓ Mandatory safety training programs</li>
                <li>✓ Incident reporting within 24 hours</li>
                <li>✓ Regular health check-ups for workers in hazardous industries</li>
              </ul>
            </div>

<h2 className="text-3xl font-bold text-slate-900 mb-4">Technology Solutions for Compliance</h2>
            <p className="text-slate-700 mb-6">
              Managing compliance manually is no longer feasible for growing businesses. Technology solutions can help
              automate compliance processes and reduce the risk of violations.
            </p>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">Automated Compliance Features</h3>
            <ul className="list-disc pl-6 mb-6 text-slate-700">
              <li>Real-time wage calculation with overtime tracking</li>
              <li>Automated statutory deduction calculations</li>
              <li>Compliance dashboard with alerts and notifications</li>
              <li>Digital record keeping with audit trails</li>
              <li>Automated report generation for government filings</li>
            </ul>

<div className="bg-slate-50 p-6 rounded-lg mb-6">
              <h3 className="text-xl font-semibold text-slate-800 mb-2">How HR TECH Ensures Compliance</h3>
              <p className="text-slate-700">
                Our HR TECH platform is designed with compliance at its core. It automatically updates with the latest
                regulatory changes, ensures accurate calculations, and provides comprehensive reporting to keep your
                business compliant with all HR regulations.
              </p>
            </div>

<h2 className="text-3xl font-bold text-slate-900 mb-4">Best Practices for HR Compliance</h2>
            <ol className="list-decimal pl-6 mb-6 text-slate-700">
              <li>
                <strong>Stay Updated:</strong> Subscribe to regulatory updates and maintain a compliance calendar
              </li>
              <li>
                <strong>Document Everything:</strong> Maintain detailed records of all HR processes and decisions
              </li>
              <li>
                <strong>Regular Audits:</strong> Conduct internal compliance audits quarterly
              </li>
              <li>
                <strong>Employee Training:</strong> Train managers on compliance requirements
              </li>
              <li>
                <strong>Technology Investment:</strong> Use automated systems to reduce human error
              </li>
              <li>
                <strong>Legal Consultation:</strong> Maintain relationships with employment law experts
              </li>
            </ol>

<h2 className="text-3xl font-bold text-slate-900 mb-4">Common Compliance Mistakes to Avoid</h2>
            <div className="bg-yellow-50 p-6 rounded-lg mb-6">
              <ul className="text-yellow-800">
                <li>• Misclassifying employees as contractors</li>
                <li>• Incorrect overtime calculations</li>
                <li>• Delayed statutory payments</li>
                <li>• Inadequate record keeping</li>
                <li>• Ignoring state-specific regulations</li>
                <li>• Failing to update policies with law changes</li>
              </ul>
            </div>

<h2 className="text-3xl font-bold text-slate-900 mb-4">Conclusion</h2>
            <p className="text-slate-700 mb-6">
              HR compliance is not just about avoiding penalties—it's about creating a fair and safe workplace for your
              employees. By staying informed about regulatory changes and investing in the right technology solutions,
              businesses can ensure compliance while focusing on growth and employee satisfaction.
            </p>
          </div>
        </div>
      </section>

<EnhancedFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/blog/industry-4-0-transforming-garment-manufacturing/page.tsx" isMerged="true"
import Image from "next/image"
import { ArrowLeft, Calendar, User, Clock, Share2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import Link from "next/link"
import EnhancedHeader from "../../../components/enhanced-header"
import EnhancedFooter from "../../../components/enhanced-footer"

export default function Industry40BlogPost() {
  const relatedPosts = [
    {
      title: "5 Ways to Optimize Your Laundry Business Operations",
      excerpt: "Discover practical strategies to streamline your laundry business operations.",
      image: "/placeholder.svg?height=200&width=300&text=Laundry+Business",
      category: "Business Tips",
      readTime: "6 min read",
      slug: "/blog/optimize-laundry-business-operations",
    },
    {
      title: "The Future of E-commerce: Trends to Watch in 2024",
      excerpt: "Stay ahead of the curve with these emerging e-commerce trends.",
      image: "/placeholder.svg?height=200&width=300&text=E-commerce+Trends",
      category: "E-commerce",
      readTime: "7 min read",
      slug: "/blog/future-of-ecommerce-trends-2024",
    },
  ]

return (
    <div className="min-h-screen bg-gradient-to-br from-white to-slate-50">
      <EnhancedHeader />

{/* Back Navigation */}
      <div className="container mx-auto px-4 py-8">
        <Link href="/blog" className="inline-flex items-center text-orange-600 hover:text-orange-700 transition-colors">
          <ArrowLeft className="h-4 w-4 mr-2" />
          Back to Blog
        </Link>
      </div>

{/* Article Header */}
      <article className="container mx-auto px-4 pb-16">
        <div className="max-w-4xl mx-auto">
          <div className="mb-8">
            <Badge className="mb-4 bg-orange-100 text-orange-700">Industry Insights</Badge>
            <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-6 leading-tight">
              How Industry 4.0 is Transforming Garment Manufacturing
            </h1>

<div className="flex flex-wrap items-center gap-6 text-slate-600 mb-8">
              <div className="flex items-center">
                <User className="h-4 w-4 mr-2" />
                <span>Rajesh Patel</span>
              </div>
              <div className="flex items-center">
                <Calendar className="h-4 w-4 mr-2" />
                <span>June 10, 2024</span>
              </div>
              <div className="flex items-center">
                <Clock className="h-4 w-4 mr-2" />
                <span>8 min read</span>
              </div>
              <Button variant="outline" size="sm" className="ml-auto">
                <Share2 className="h-4 w-4 mr-2" />
                Share
              </Button>
            </div>
          </div>

{/* Featured Image */}
          <div className="aspect-video relative mb-12 rounded-xl overflow-hidden">
            <Image
              src="https://etimg.etb2bimg.com/photo/116962571.cms"
              alt="Industry 4.0 Manufacturing"
              fill
              className="object-cover"
            />
          </div>

{/* Article Content */}
          <div className="prose prose-lg max-w-none">
            <p className="text-xl text-slate-700 mb-8 leading-relaxed">
              The garment manufacturing industry is experiencing a revolutionary transformation through Industry 4.0
              technologies. Smart factories, IoT devices, and data analytics are reshaping how clothing is designed,
              produced, and delivered to consumers.
            </p>

<h2 className="text-2xl font-bold text-slate-900 mt-12 mb-6">
              The Digital Revolution in Garment Manufacturing
            </h2>
            <p className="text-slate-700 mb-6">
              Industry 4.0 represents the fourth industrial revolution, characterized by the integration of digital
              technologies into manufacturing processes. In the garment industry, this transformation is particularly
              significant due to the sector's traditionally labor-intensive nature and complex supply chains.
            </p>

<h3 className="text-xl font-semibold text-slate-900 mt-10 mb-4">Key Technologies Driving Change</h3>
            <ul className="list-disc pl-6 space-y-2 text-slate-700 mb-8">
              <li>
                <strong>Internet of Things (IoT):</strong> Connected machines and sensors provide real-time data on
                production efficiency
              </li>
              <li>
                <strong>Artificial Intelligence:</strong> AI-powered quality control and predictive maintenance systems
              </li>
              <li>
                <strong>Robotics:</strong> Automated cutting, sewing, and finishing processes
              </li>
              <li>
                <strong>Big Data Analytics:</strong> Data-driven insights for demand forecasting and inventory
                optimization
              </li>
              <li>
                <strong>Cloud Computing:</strong> Scalable infrastructure for managing complex supply chains
              </li>
            </ul>

<h2 className="text-2xl font-bold text-slate-900 mt-12 mb-6">Benefits of Industry 4.0 Implementation</h2>

<div className="grid md:grid-cols-2 gap-6 my-8">
              <Card className="border-0 shadow-lg">
                <CardContent className="p-6">
                  <h4 className="font-semibold text-slate-900 mb-3">Increased Efficiency</h4>
                  <p className="text-slate-600">
                    Automated processes and real-time monitoring lead to 30-40% improvement in production efficiency.
                  </p>
                </CardContent>
              </Card>
              <Card className="border-0 shadow-lg">
                <CardContent className="p-6">
                  <h4 className="font-semibold text-slate-900 mb-3">Quality Enhancement</h4>
                  <p className="text-slate-600">
                    AI-powered quality control systems reduce defects by up to 50% through early detection.
                  </p>
                </CardContent>
              </Card>
              <Card className="border-0 shadow-lg">
                <CardContent className="p-6">
                  <h4 className="font-semibold text-slate-900 mb-3">Cost Reduction</h4>
                  <p className="text-slate-600">
                    Optimized resource utilization and reduced waste lead to significant cost savings.
                  </p>
                </CardContent>
              </Card>
              <Card className="border-0 shadow-lg">
                <CardContent className="p-6">
                  <h4 className="font-semibold text-slate-900 mb-3">Faster Time-to-Market</h4>
                  <p className="text-slate-600">
                    Streamlined processes enable faster product development and delivery cycles.
                  </p>
                </CardContent>
              </Card>
            </div>

<h2 className="text-2xl font-bold text-slate-900 mt-12 mb-6">Implementation Challenges</h2>
            <p className="text-slate-700 mb-6">
              While the benefits are substantial, implementing Industry 4.0 technologies comes with challenges:
            </p>
            <ul className="list-disc pl-6 space-y-2 text-slate-700 mb-8">
              <li>High initial investment costs for technology infrastructure</li>
              <li>Need for skilled workforce training and development</li>
              <li>Integration complexity with existing legacy systems</li>
              <li>Data security and privacy concerns</li>
              <li>Change management and organizational culture adaptation</li>
            </ul>

<h2 className="text-2xl font-bold text-slate-900 mt-12 mb-6">The Future Outlook</h2>
            <p className="text-slate-700 mb-6">
              The future of garment manufacturing lies in fully integrated smart factories where every aspect of
              production is connected and optimized. Companies that embrace these technologies early will gain
              significant competitive advantages in terms of efficiency, quality, and customer satisfaction.
            </p>

<div className="bg-orange-50 p-6 rounded-lg my-8">
              <h3 className="text-lg font-semibold text-orange-900 mb-3">Key Takeaway</h3>
              <p className="text-orange-800">
                Industry 4.0 is not just about technology adoption; it's about transforming business models and creating
                new value propositions for customers. Companies that successfully navigate this transformation will be
                the leaders of tomorrow's garment industry.
              </p>
            </div>
          </div>

{/* Author Bio */}
          <div className="border-t border-slate-200 pt-8 mt-12">
            <div className="flex items-start space-x-4">
              <div className="h-16 w-16 rounded-full bg-slate-200 flex items-center justify-center">
                <User className="h-8 w-8 text-slate-500" />
              </div>
              <div>
                <h3 className="font-semibold text-slate-900">Rajesh Patel</h3>
                <p className="text-slate-600 mb-2">Senior Industry Analyst</p>
                <p className="text-sm text-slate-500">
                  Rajesh has over 15 years of experience in manufacturing technology and digital transformation. He
                  specializes in helping companies adopt Industry 4.0 solutions.
                </p>
              </div>
            </div>
          </div>
        </div>
      </article>

{/* Related Posts */}
      <section className="container mx-auto px-4 py-16 bg-white">
        <div className="max-w-4xl mx-auto">
          <h2 className="text-2xl font-bold text-slate-900 mb-8">Related Articles</h2>
          <div className="grid md:grid-cols-2 gap-8">
            {relatedPosts.map((post, index) => (
              <Card key={index} className="border-0 shadow-lg hover:shadow-xl transition-all duration-300">
                <div className="aspect-video relative">
                  <Image
                    src={post.image || "/placeholder.svg"}
                    alt={post.title}
                    fill
                    className="object-cover rounded-t-lg"
                  />
                  <div className="absolute top-4 left-4">
                    <Badge className="bg-orange-100 text-orange-700">{post.category}</Badge>
                  </div>
                </div>
                <CardContent className="p-6">
                  <h3 className="font-semibold text-slate-900 mb-2">{post.title}</h3>
                  <p className="text-slate-600 text-sm mb-4">{post.excerpt}</p>
                  <div className="flex items-center justify-between">
                    <span className="text-xs text-slate-500">{post.readTime}</span>
                    <Link href={post.slug}>
                      <Button variant="ghost" size="sm" className="text-orange-600 hover:text-orange-700">
                        Read More
                      </Button>
                    </Link>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

<EnhancedFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/blog/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/blog/optimize-laundry-business-operations/page.tsx" isMerged="true"
import Image from "next/image"
import { ArrowLeft, Calendar, User, Clock, Share2, CheckCircle } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import Link from "next/link"
import EnhancedHeader from "../../../components/enhanced-header"
import EnhancedFooter from "../../../components/enhanced-footer"

export default function LaundryOptimizationBlogPost() {
  const relatedPosts = [
    {
      title: "How Industry 4.0 is Transforming Garment Manufacturing",
      excerpt: "Explore how smart factories and IoT are revolutionizing manufacturing.",
      image: "/placeholder.svg?height=200&width=300&text=Industry+4.0",
      category: "Industry Insights",
      readTime: "8 min read",
      slug: "/blog/industry-4-0-transforming-garment-manufacturing",
    },
    {
      title: "The Future of E-commerce: Trends to Watch in 2024",
      excerpt: "Stay ahead with emerging e-commerce trends shaping the future.",
      image: "/placeholder.svg?height=200&width=300&text=E-commerce+Trends",
      category: "E-commerce",
      readTime: "7 min read",
      slug: "/blog/future-of-ecommerce-trends-2024",
    },
  ]

const optimizationStrategies = [
    {
      title: "Implement Route Optimization Software",
      description: "Use GPS and AI-powered routing to reduce fuel costs and delivery times by up to 30%.",
    },
    {
      title: "Automate Billing and Invoicing",
      description: "Eliminate manual errors and speed up payment processing with automated billing systems.",
    },
    {
      title: "Deploy Customer Management Systems",
      description: "Track customer preferences, service history, and special requirements for personalized service.",
    },
    {
      title: "Optimize Inventory Management",
      description: "Maintain optimal stock levels of cleaning supplies and packaging materials to avoid shortages.",
    },
    {
      title: "Implement Quality Control Processes",
      description:
        "Establish standardized quality checks to ensure consistent service delivery and customer satisfaction.",
    },
  ]

return (
    <div className="min-h-screen bg-gradient-to-br from-white to-slate-50">
      <EnhancedHeader />

{/* Article Header */}
      <article className="container mx-auto px-4 pb-16">
        <div className="max-w-4xl mx-auto">
          <div className="mb-8">
            <Badge className="mb-4 bg-blue-100 text-blue-700">Business Tips</Badge>
            <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-6 leading-tight">
              5 Ways to Optimize Your Laundry Business Operations
            </h1>

<div className="flex flex-wrap items-center gap-6 text-slate-600 mb-8">
              <div className="flex items-center">
                <User className="h-4 w-4 mr-2" />
                <span>Priya Sharma</span>
              </div>
              <div className="flex items-center">
                <Calendar className="h-4 w-4 mr-2" />
                <span>June 5, 2024</span>
              </div>
              <div className="flex items-center">
                <Clock className="h-4 w-4 mr-2" />
                <span>6 min read</span>
              </div>
              <Button variant="outline" size="sm" className="ml-auto">
                <Share2 className="h-4 w-4 mr-2" />
                Share
              </Button>
            </div>
          </div>

{/* Featured Image */}
          <div className="aspect-video relative mb-12 rounded-xl overflow-hidden">
            <Image
              src="/placeholder.svg?height=600&width=1200&text=Laundry+Business+Operations"
              alt="Laundry Business Operations"
              fill
              className="object-cover"
            />
          </div>

{/* Article Content */}
          <div className="prose prose-lg max-w-none">
            <p className="text-xl text-slate-700 mb-8 leading-relaxed">
              Running a successful laundry business requires more than just cleaning clothes. In today's competitive
              market, operational efficiency is key to profitability and customer satisfaction. Here are five proven
              strategies to optimize your laundry business operations.
            </p>

<h2 className="text-2xl font-bold text-slate-900 mt-12 mb-6">The Challenge of Modern Laundry Operations</h2>
            <p className="text-slate-700 mb-6">
              The laundry industry faces unique challenges including rising operational costs, increasing customer
              expectations, and the need for faster turnaround times. Traditional manual processes often lead to
              inefficiencies, errors, and customer dissatisfaction.
            </p>

<h2 className="text-2xl font-bold text-slate-900 mt-12 mb-6">5 Optimization Strategies</h2>

<div className="space-y-8 my-12">
              {optimizationStrategies.map((strategy, index) => (
                <Card key={index} className="border-0 shadow-lg">
                  <CardContent className="p-8">
                    <div className="flex items-start space-x-4">
                      <div className="bg-blue-100 rounded-full p-2 flex-shrink-0">
                        <CheckCircle className="h-6 w-6 text-blue-600" />
                      </div>
                      <div>
                        <h3 className="text-xl font-semibold text-slate-900 mb-3">
                          {index + 1}. {strategy.title}
                        </h3>
                        <p className="text-slate-700">{strategy.description}</p>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>

<h2 className="text-2xl font-bold text-slate-900 mt-12 mb-6">Implementation Best Practices</h2>
            <p className="text-slate-700 mb-6">
              When implementing these optimization strategies, consider the following best practices:
            </p>
            <ul className="list-disc pl-6 space-y-2 text-slate-700 mb-8">
              <li>Start with a thorough assessment of your current operations</li>
              <li>Prioritize solutions based on potential ROI and implementation complexity</li>
              <li>Train your staff thoroughly on new systems and processes</li>
              <li>Monitor key performance indicators to measure success</li>
              <li>Continuously gather customer feedback and adjust accordingly</li>
            </ul>

<h2 className="text-2xl font-bold text-slate-900 mt-12 mb-6">Expected Results</h2>
            <p className="text-slate-700 mb-6">
              Businesses that implement these optimization strategies typically see:
            </p>

<div className="grid md:grid-cols-3 gap-6 my-8">
              <Card className="border-0 shadow-lg bg-blue-50">
                <CardContent className="p-6 text-center">
                  <div className="text-3xl font-bold text-blue-600 mb-2">30%</div>
                  <div className="text-sm text-slate-600">Reduction in operational costs</div>
                </CardContent>
              </Card>
              <Card className="border-0 shadow-lg bg-green-50">
                <CardContent className="p-6 text-center">
                  <div className="text-3xl font-bold text-green-600 mb-2">40%</div>
                  <div className="text-sm text-slate-600">Improvement in delivery efficiency</div>
                </CardContent>
              </Card>
              <Card className="border-0 shadow-lg bg-purple-50">
                <CardContent className="p-6 text-center">
                  <div className="text-3xl font-bold text-purple-600 mb-2">25%</div>
                  <div className="text-sm text-slate-600">Increase in customer satisfaction</div>
                </CardContent>
              </Card>
            </div>

<div className="bg-blue-50 p-6 rounded-lg my-8">
              <h3 className="text-lg font-semibold text-blue-900 mb-3">Pro Tip</h3>
              <p className="text-blue-800">
                Consider implementing a comprehensive laundry management system like WashIT that combines all these
                optimization strategies into a single, integrated solution. This approach ensures better coordination
                between different aspects of your business and maximizes the benefits of digital transformation.
              </p>
            </div>
          </div>

{/* Author Bio */}
          <div className="border-t border-slate-200 pt-8 mt-12">
            <div className="flex items-start space-x-4">
              <div className="h-16 w-16 rounded-full bg-slate-200 flex items-center justify-center">
                <User className="h-8 w-8 text-slate-500" />
              </div>
              <div>
                <h3 className="font-semibold text-slate-900">Priya Sharma</h3>
                <p className="text-slate-600 mb-2">Business Operations Consultant</p>
                <p className="text-sm text-slate-500">
                  Priya specializes in helping laundry businesses optimize their operations through technology and
                  process improvements. She has helped over 100 businesses increase their efficiency and profitability.
                </p>
              </div>
            </div>
          </div>
        </div>
      </article>

<EnhancedFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/blog/page.tsx" isMerged="true"
"use client"

import Image from "next/image"
import { useState } from "react"
import { ArrowRight, Calendar, User, Clock } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import EnhancedHeader from "../../components/enhanced-header"
import EnhancedFooter from "../../components/enhanced-footer"
import Link from "next/link"

export default function BlogPage() {
  const featuredPost = {
    title: "How Industry 4.0 is Transforming Garment Manufacturing",
    excerpt:
      "Explore how smart factories, IoT, and data analytics are revolutionizing the garment manufacturing industry and how businesses can adapt to stay competitive.",
    image: "https://etimg.etb2bimg.com/photo/116962571.cms",
    date: "June 10, 2024",
    author: "Rajesh Patel",
    readTime: "8 min read",
    category: "Industry Insights",
    slug: "/blog/industry-4-0-transforming-garment-manufacturing",
  }

const recentPosts = [
    {
      title: "5 Ways to Optimize Your Laundry Business Operations",
      excerpt:
        "Discover practical strategies to streamline your laundry business operations, reduce costs, and improve customer satisfaction.",
      image: "/placeholder.svg?height=400&width=600&text=Laundry+Business",
      date: "June 5, 2024",
      author: "Priya Sharma",
      readTime: "6 min read",
      category: "Business Tips",
      slug: "/blog/optimize-laundry-business-operations",
    },
    {
      title: "The Future of E-commerce: Trends to Watch in 2024",
      excerpt:
        "Stay ahead of the curve with these emerging e-commerce trends that are shaping the future of online retail in India and globally.",
      image: "/placeholder.svg?height=400&width=600&text=E-commerce+Trends",
      date: "May 28, 2024",
      author: "Amit Kumar",
      readTime: "7 min read",
      category: "E-commerce",
      slug: "/blog/future-of-ecommerce-trends-2024",
    },
    {
      title: "HR Compliance: Navigating the Latest Regulatory Changes",
      excerpt:
        "A comprehensive guide to the latest HR compliance requirements in India and how technology can help businesses stay compliant.",
      image: "/placeholder.svg?height=400&width=600&text=HR+Compliance",
      date: "May 20, 2024",
      author: "Lakshmi Narayanan",
      readTime: "9 min read",
      category: "HR & Compliance",
      slug: "/blog/hr-compliance-regulatory-changes",
    },
    {
      title: "Digital Transformation Success Stories: Lessons from Indian SMEs",
      excerpt:
        "Learn from the digital transformation journeys of successful Indian SMEs and the key factors that contributed to their success.",
      image: "/placeholder.svg?height=400&width=600&text=Digital+Transformation",
      date: "May 15, 2024",
      author: "Vikram Singh",
      readTime: "10 min read",
      category: "Case Studies",
      slug: "/blog/digital-transformation-success-stories",
    },
    {
      title: "Sustainable Manufacturing: Balancing Profit and Planet",
      excerpt:
        "How garment manufacturers can implement sustainable practices without compromising on profitability and competitiveness.",
      image: "/placeholder.svg?height=400&width=600&text=Sustainable+Manufacturing",
      date: "May 8, 2024",
      author: "Neha Reddy",
      readTime: "8 min read",
      category: "Sustainability",
      slug: "/blog/sustainable-manufacturing-profit-planet",
    },
    {
      title: "The ROI of ERP Implementation: Measuring Success Beyond Numbers",
      excerpt:
        "A comprehensive framework for measuring the return on investment of ERP implementation, including both tangible and intangible benefits.",
      image: "/placeholder.svg?height=400&width=600&text=ERP+ROI",
      date: "May 1, 2024",
      author: "Rajesh Patel",
      readTime: "7 min read",
      category: "ERP",
      slug: "/blog/erp-implementation-roi",
    },
  ]

const categories = [
    "All",
    "Business Tips",
    "E-commerce",
    "HR & Compliance",
    "Case Studies",
    "Sustainability",
    "ERP",
    "Technology",
  ]

const [selectedCategory, setSelectedCategory] = useState("All")

const filteredPosts =
    selectedCategory === "All" ? recentPosts : recentPosts.filter((post) => post.category === selectedCategory)

return (
    <div className="min-h-screen bg-gradient-to-br from-white to-slate-50">
      {/* Enhanced Header */}
      <EnhancedHeader />

{/* Hero Section */}
      <section className="container mx-auto px-4 py-16 md:py-24">
        <div className="text-center max-w-4xl mx-auto">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">Our Blog</Badge>
          <h1 className="text-4xl md:text-6xl font-bold text-slate-900 mb-6">
            Insights for
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-orange-500">
              {" "}
              Business Growth
            </span>
          </h1>
          <p className="text-xl text-slate-600 mb-8 leading-relaxed">
            Expert perspectives, industry trends, and practical advice to help your business thrive in the digital age.
          </p>
          {/* 
          <div className="max-w-lg mx-auto relative">
            <Input placeholder="Search articles..." className="pl-10 py-6 text-base rounded-full border-slate-300" />
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-slate-400" />
          </div>
          */}
        </div>
      </section>

{/* Featured Post */}
      <section className="container mx-auto px-4 py-8">
        <h2 className="text-2xl font-bold text-slate-900 mb-6">Featured Article</h2>
        <Card className="border-0 shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden">
          <div className="grid md:grid-cols-2 gap-0">
            <div className="aspect-video md:aspect-auto relative">
              <Image
                src={featuredPost.image || "/placeholder.svg"}
                alt={featuredPost.title}
                fill
                className="object-cover"
              />
            </div>
            <CardContent className="p-8 flex flex-col justify-between">
              <div className="space-y-4">
                <div className="flex items-center space-x-2">
                  <Badge className="bg-orange-100 text-orange-700 hover:bg-orange-200">{featuredPost.category}</Badge>
                  <div className="text-sm text-slate-500 flex items-center">
                    <Clock className="h-3 w-3 mr-1" />
                    {featuredPost.readTime}
                  </div>
                </div>

<h3 className="text-2xl font-bold text-slate-900">{featuredPost.title}</h3>
                <p className="text-slate-600">{featuredPost.excerpt}</p>
              </div>

<div className="mt-6 space-y-4">
                <div className="flex items-center space-x-3">
                  <div className="h-10 w-10 rounded-full bg-slate-200 flex items-center justify-center">
                    <User className="h-5 w-5 text-slate-500" />
                  </div>
                  <div>
                    <p className="text-sm font-medium text-slate-900">{featuredPost.author}</p>
                    <p className="text-xs text-slate-500 flex items-center">
                      <Calendar className="h-3 w-3 mr-1" />
                      {featuredPost.date}
                    </p>
                  </div>
                </div>

<Link href={featuredPost.slug}>
                  <Button className="w-full bg-orange-600 hover:bg-orange-700">
                    Read Article
                    <ArrowRight className="ml-2 h-4 w-4" />
                  </Button>
                </Link>
              </div>
            </CardContent>
          </div>
        </Card>
      </section>

{/* Categories */}
      <section className="container mx-auto px-4 py-8">
        <div className="flex flex-wrap gap-2 justify-center">
          {categories.map((category) => (
            <Badge
              key={category}
              onClick={() => setSelectedCategory(category)}
              className={`px-4 py-2 text-sm cursor-pointer transition-all duration-200 ${
                category === selectedCategory
                  ? "bg-orange-600 text-white hover:bg-orange-700"
                  : "bg-slate-100 text-slate-700 hover:bg-slate-200"
              }`}
            >
              {category}
            </Badge>
          ))}
        </div>
      </section>

{/* Recent Posts */}
      <section className="container mx-auto px-4 py-8">
        <h2 className="text-2xl font-bold text-slate-900 mb-6">
          {selectedCategory === "All" ? "Recent Articles" : `${selectedCategory} Articles`}
        </h2>
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {filteredPosts.map((post, index) => (
            <Card
              key={index}
              className="border-0 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2 overflow-hidden"
            >
              <div className="aspect-video relative">
                <Image src={post.image || "/placeholder.svg"} alt={post.title} fill className="object-cover" />
                <div className="absolute top-4 left-4">
                  <Badge className="bg-orange-100 text-orange-700 hover:bg-orange-200">{post.category}</Badge>
                </div>
              </div>
              <CardContent className="p-6 space-y-4">
                <div className="flex items-center justify-between text-sm text-slate-500">
                  <div className="flex items-center">
                    <Calendar className="h-3 w-3 mr-1" />
                    {post.date}
                  </div>
                  <div className="flex items-center">
                    <Clock className="h-3 w-3 mr-1" />
                    {post.readTime}
                  </div>
                </div>

<h3 className="text-xl font-bold text-slate-900">{post.title}</h3>
                <p className="text-slate-600 line-clamp-3">{post.excerpt}</p>

<div className="flex items-center space-x-3 pt-2">
                  <div className="h-8 w-8 rounded-full bg-slate-200 flex items-center justify-center">
                    <User className="h-4 w-4 text-slate-500" />
                  </div>
                  <p className="text-sm font-medium text-slate-900">{post.author}</p>
                </div>

<Link href={post.slug}>
                  <Button variant="ghost" className="w-full text-orange-600 hover:text-orange-700 hover:bg-orange-50">
                    Read More
                    <ArrowRight className="ml-2 h-4 w-4" />
                  </Button>
                </Link>
              </CardContent>
            </Card>
          ))}
        </div>
        {/*
        <div className="text-center mt-12">
          <Button size="lg" className="bg-orange-600 hover:bg-orange-700">
            View All Articles
            <ArrowRight className="ml-2 h-4 w-4" />
          </Button>
        </div>
        */}
      </section>

{/* CTA Section */}
      <section className="container mx-auto px-4 py-16 md:py-24">
        <div className="bg-gradient-to-r from-orange-600 to-orange-500 rounded-2xl p-8 md:p-12 text-white text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">Ready to Transform Your Business?</h2>
          <p className="text-xl text-orange-100 mb-8 max-w-2xl mx-auto">
            Join hundreds of businesses that have achieved remarkable results with our innovative solutions. Schedule a
            consultation to discuss your specific needs.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link href="/contact">
              <Button size="lg" className="bg-white text-orange-600 hover:bg-orange-50">
                Schedule Consultation
              </Button>
            </Link>
          </div>
        </div>
      </section>

{/* Newsletter 
      <section className="container mx-auto px-4 py-16 md:py-24">
        <div className="bg-gradient-to-r from-orange-600 to-orange-500 rounded-2xl p-8 md:p-12 text-white text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">Subscribe to Our Newsletter</h2>
          <p className="text-xl text-orange-100 mb-8 max-w-2xl mx-auto">
            Stay updated with the latest industry insights, trends, and tips delivered straight to your inbox.
          </p>
          <div className="max-w-md mx-auto flex flex-col sm:flex-row gap-4">
            <Input
              placeholder="Enter your email"
              className="bg-white/10 border-white/20 text-white placeholder:text-white/60 py-6"
            />
            <Button size="lg" className="bg-white text-orange-600 hover:bg-orange-50 whitespace-nowrap">
              Subscribe
            </Button>
          </div>
          <p className="text-sm text-orange-100 mt-4">We respect your privacy. Unsubscribe at any time.</p>
        </div>
      </section>
      */}
      {/* Enhanced Footer */}
      <EnhancedFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/blog/sustainable-manufacturing-profit-planet/page.tsx" isMerged="true"
import Image from "next/image"
import { ArrowLeft, Calendar, User, Clock, Share2, BookOpen } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import EnhancedHeader from "../../../components/enhanced-header"
import EnhancedFooter from "../../../components/enhanced-footer"
import Link from "next/link"

export default function SustainableManufacturingBlogPost() {
  const relatedPosts = [
    {
      title: "How Industry 4.0 is Transforming Garment Manufacturing",
      slug: "/blog/industry-4-0-transforming-garment-manufacturing",
      category: "Industry Insights",
      readTime: "8 min read",
    },
    {
      title: "Digital Transformation Success Stories: Lessons from Indian SMEs",
      slug: "/blog/digital-transformation-success-stories",
      category: "Case Studies",
      readTime: "10 min read",
    },
    {
      title: "The ROI of ERP Implementation: Measuring Success Beyond Numbers",
      slug: "/blog/erp-implementation-roi",
      category: "ERP",
      readTime: "7 min read",
    },
  ]

return (
    <div className="min-h-screen bg-gradient-to-br from-white to-slate-50">
      <EnhancedHeader />

{/* Article Header */}
      <section className="container mx-auto px-4 py-8">
        <div className="max-w-4xl mx-auto">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">Sustainability</Badge>
          <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-6">
            Sustainable Manufacturing: Balancing Profit and Planet
          </h1>

<div className="flex flex-wrap items-center gap-6 text-slate-600 mb-8">
            <div className="flex items-center space-x-2">
              <User className="h-4 w-4" />
              <span>Neha Reddy</span>
            </div>
            <div className="flex items-center space-x-2">
              <Calendar className="h-4 w-4" />
              <span>May 8, 2024</span>
            </div>
            <div className="flex items-center space-x-2">
              <Clock className="h-4 w-4" />
              <span>8 min read</span>
            </div>
            <Button variant="ghost" size="sm" className="text-orange-600 hover:text-orange-700">
              <Share2 className="h-4 w-4 mr-1" />
              Share
            </Button>
          </div>

{/* Article Content */}
      <section className="container mx-auto px-4 py-8">
        <div className="max-w-4xl mx-auto">
          <div className="prose prose-lg max-w-none">
            <p className="text-xl text-slate-600 mb-8 leading-relaxed">
              The manufacturing industry stands at a crossroads. With increasing environmental concerns and growing
              consumer awareness, manufacturers must find ways to operate sustainably while maintaining profitability
              and competitiveness.
            </p>

<h2 className="text-3xl font-bold text-slate-900 mb-4">The Business Case for Sustainability</h2>
            <p className="text-slate-700 mb-6">
              Sustainable manufacturing is no longer just about corporate social responsibility—it's a business
              imperative. Companies that embrace sustainable practices often discover that environmental benefits go
              hand-in-hand with economic advantages.
            </p>

<div className="bg-green-50 p-6 rounded-lg mb-6">
              <h3 className="text-xl font-semibold text-green-800 mb-2">Financial Benefits of Sustainability</h3>
              <ul className="text-green-700">
                <li>• 20-30% reduction in energy costs through efficiency improvements</li>
                <li>• 15-25% decrease in raw material waste</li>
                <li>• 10-20% lower operational costs through process optimization</li>
                <li>• Access to green financing and sustainability-linked loans</li>
                <li>• Premium pricing for eco-friendly products</li>
              </ul>
            </div>

<h2 className="text-3xl font-bold text-slate-900 mb-4">Key Areas of Sustainable Manufacturing</h2>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">1. Energy Efficiency and Renewable Energy</h3>
            <p className="text-slate-700 mb-6">
              Energy consumption is one of the largest operational costs for manufacturers. Implementing
              energy-efficient technologies and transitioning to renewable energy sources can significantly reduce both
              costs and carbon footprint.
            </p>

<ul className="list-disc pl-6 mb-6 text-slate-700">
              <li>LED lighting systems with smart controls</li>
              <li>High-efficiency motors and variable frequency drives</li>
              <li>Solar panel installations for on-site power generation</li>
              <li>Energy management systems for real-time monitoring</li>
              <li>Heat recovery systems to capture and reuse waste heat</li>
            </ul>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">2. Waste Reduction and Circular Economy</h3>
            <p className="text-slate-700 mb-6">
              The circular economy model focuses on eliminating waste and maximizing resource utilization. This approach
              can significantly reduce material costs while minimizing environmental impact.
            </p>

<div className="bg-blue-50 p-6 rounded-lg mb-6">
              <h4 className="text-lg font-semibold text-blue-800 mb-2">Circular Economy Strategies</h4>
              <ul className="text-blue-700">
                <li>• Design for disassembly and recyclability</li>
                <li>• Implement closed-loop manufacturing processes</li>
                <li>• Establish take-back programs for end-of-life products</li>
                <li>• Partner with suppliers for sustainable material sourcing</li>
                <li>• Convert waste streams into valuable by-products</li>
              </ul>
            </div>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">3. Water Conservation and Management</h3>
            <p className="text-slate-700 mb-6">
              Water is a critical resource in manufacturing, especially in industries like textiles and chemicals.
              Efficient water management can reduce costs and ensure long-term operational sustainability.
            </p>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">4. Sustainable Supply Chain Management</h3>
            <p className="text-slate-700 mb-6">
              Sustainability extends beyond the factory floor to encompass the entire supply chain. Working with
              suppliers who share sustainability commitments can amplify positive environmental impact.
            </p>

<h2 className="text-3xl font-bold text-slate-900 mb-4">
              Technology Enablers for Sustainable Manufacturing
            </h2>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">IoT and Smart Sensors</h3>
            <p className="text-slate-700 mb-6">
              Internet of Things (IoT) devices and smart sensors provide real-time data on energy consumption, waste
              generation, and resource utilization, enabling manufacturers to optimize their operations for
              sustainability.
            </p>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">AI and Machine Learning</h3>
            <p className="text-slate-700 mb-6">
              Artificial intelligence can analyze vast amounts of operational data to identify patterns and
              opportunities for improvement in energy efficiency, waste reduction, and resource optimization.
            </p>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">Digital Twin Technology</h3>
            <p className="text-slate-700 mb-6">
              Digital twins allow manufacturers to simulate and optimize processes before implementation, reducing the
              risk of inefficient operations and minimizing resource waste.
            </p>

<h2 className="text-3xl font-bold text-slate-900 mb-4">Implementation Roadmap</h2>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">
              Phase 1: Assessment and Planning (Months 1-3)
            </h3>
            <ul className="list-disc pl-6 mb-6 text-slate-700">
              <li>Conduct comprehensive sustainability audit</li>
              <li>Identify key areas for improvement</li>
              <li>Set measurable sustainability goals</li>
              <li>Develop implementation timeline and budget</li>
            </ul>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">Phase 2: Quick Wins (Months 4-6)</h3>
            <ul className="list-disc pl-6 mb-6 text-slate-700">
              <li>Implement energy-efficient lighting</li>
              <li>Optimize equipment maintenance schedules</li>
              <li>Introduce waste segregation and recycling programs</li>
              <li>Train employees on sustainability practices</li>
            </ul>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">Phase 3: Major Initiatives (Months 7-18)</h3>
            <ul className="list-disc pl-6 mb-6 text-slate-700">
              <li>Install renewable energy systems</li>
              <li>Upgrade to high-efficiency equipment</li>
              <li>Implement water recycling systems</li>
              <li>Establish sustainable supplier partnerships</li>
            </ul>

<h2 className="text-3xl font-bold text-slate-900 mb-4">Measuring Success</h2>
            <p className="text-slate-700 mb-6">
              Tracking progress is essential for sustainable manufacturing initiatives. Key performance indicators
              (KPIs) should include both environmental and financial metrics.
            </p>

<div className="bg-yellow-50 p-6 rounded-lg mb-6">
              <h4 className="text-lg font-semibold text-yellow-800 mb-2">Essential Sustainability KPIs</h4>
              <ul className="text-yellow-700">
                <li>• Energy consumption per unit of production</li>
                <li>• Water usage efficiency</li>
                <li>• Waste generation and recycling rates</li>
                <li>• Carbon footprint reduction</li>
                <li>• Cost savings from sustainability initiatives</li>
                <li>• Supplier sustainability scores</li>
              </ul>
            </div>

<h2 className="text-3xl font-bold text-slate-900 mb-4">Overcoming Common Challenges</h2>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">Initial Investment Concerns</h3>
            <p className="text-slate-700 mb-6">
              While sustainable technologies may require upfront investment, the long-term savings and benefits often
              justify the costs. Consider financing options like green loans and government incentives.
            </p>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">Employee Resistance to Change</h3>
            <p className="text-slate-700 mb-6">
              Change management is crucial for successful implementation. Involve employees in the planning process,
              provide comprehensive training, and communicate the benefits clearly.
            </p>

<h3 className="text-2xl font-semibold text-slate-800 mb-3">Complexity of Implementation</h3>
            <p className="text-slate-700 mb-6">
              Start with simple, high-impact initiatives and gradually build complexity. Partner with experienced
              consultants and technology providers to navigate the implementation process.
            </p>

<div className="bg-slate-50 p-6 rounded-lg mb-6">
              <h3 className="text-xl font-semibold text-slate-800 mb-2">
                How StitchIT Supports Sustainable Manufacturing
              </h3>
              <p className="text-slate-700">
                Our StitchIT platform includes sustainability tracking features that help manufacturers monitor their
                environmental impact, optimize resource usage, and report on sustainability metrics. With real-time
                dashboards and automated reporting, you can make data-driven decisions that benefit both your bottom
                line and the planet.
              </p>
            </div>

<h2 className="text-3xl font-bold text-slate-900 mb-4">The Future of Sustainable Manufacturing</h2>
            <p className="text-slate-700 mb-6">
              As technology continues to evolve and environmental regulations become stricter, sustainable manufacturing
              will become the standard rather than the exception. Companies that invest in sustainability today will be
              better positioned for future success.
            </p>

<p className="text-slate-700 mb-6">
              The integration of emerging technologies like blockchain for supply chain transparency, advanced materials
              for improved efficiency, and carbon capture technologies will further enhance the sustainability potential
              of manufacturing operations.
            </p>

<h2 className="text-3xl font-bold text-slate-900 mb-4">Conclusion</h2>
            <p className="text-slate-700 mb-6">
              Sustainable manufacturing is not just about doing good—it's about doing well. By implementing sustainable
              practices, manufacturers can reduce costs, improve efficiency, enhance brand reputation, and contribute to
              a better future for all. The key is to start with a clear strategy, focus on measurable outcomes, and
              continuously improve over time.
            </p>
          </div>
        </div>
      </section>

<EnhancedFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/careers/page.tsx" isMerged="true"
"use client"

import { ArrowRight, MapPin, Clock, Users, Heart, Zap, Award, Coffee, GraduationCap } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import EnhancedHeader from "../../components/enhanced-header"
import EnhancedFooter from "../../components/enhanced-footer"
import { useState } from 'react';

export default function CareersPage() {
  const [submitting, setSubmitting] = useState(false);

const [formData, setFormData] = useState({
    firstName: "",
    lastName: "",
    email: "",
    phone: "",
    position: "",
    experience: "",
    currentLocation: "",
    skills: "",
    coverLetter: "",
    resume: null as File | null,
    portfolio: "",
    consent: false,
    updates: false,
  });

function handleChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) {
    const { name, value, type, checked, files } = e.target as HTMLInputElement;

if (type === "checkbox") {
      setFormData((prev) => ({ ...prev, [name]: checked }));
    } else if (type === "file") {
      setFormData((prev) => ({ ...prev, [name]: files ? files[0] : null }));
    } else {
      setFormData((prev) => ({ ...prev, [name]: value }));
    }
  }

async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setSubmitting(true);

try {
      const data = new FormData();

for (const key in formData) {
        if (formData[key] !== null) {
          if (typeof formData[key] === "boolean") {
            data.append(key, formData[key] ? "true" : "false");
          } else {
            data.append(key, formData[key] as any);
          }
        }
      }

const response = await fetch("https://mailtrap-api.codeofbytes.com/send-application", {
        method: "POST",
        body: data,
      });

if (!response.ok) throw new Error(`Server error: ${response.statusText}`);

alert("Application submitted successfully!");

setFormData({
        firstName: "",
        lastName: "",
        email: "",
        phone: "",
        position: "",
        experience: "",
        currentLocation: "",
        skills: "",
        coverLetter: "",
        resume: null,
        portfolio: "",
        consent: false,
        updates: false,
      });

const form = document.getElementById("application-form");
      if (form) form.style.display = "none";

} catch (error: any) {
      alert("Failed to submit application: " + error.message);
    } finally {
    setSubmitting(false);
    }
  }

const benefits = [
    {
      icon: Heart,
      title: "Health & Wellness",
      description: "Comprehensive health insurance for you and your family, plus wellness programs.",
    },
    {
      icon: GraduationCap,
      title: "Learning & Development",
      description: "Continuous learning opportunities, certifications, and conference attendance.",
    },
    {
      icon: Coffee,
      title: "Work-Life Balance",
      description: "Flexible working hours, remote work options, and unlimited coffee.",
    },
    {
      icon: Users,
      title: "Team Culture",
      description: "Collaborative environment with team outings, celebrations, and open communication.",
    },
    {
      icon: Zap,
      title: "Growth Opportunities",
      description: "Clear career progression paths and opportunities to work on cutting-edge technologies.",
    },
    {
      icon: Award,
      title: "Recognition & Rewards",
      description: "Performance-based bonuses, employee recognition programs, and achievement awards.",
    },
  ]

const values = [
    {
      title: "Innovation",
      description: "We constantly push boundaries to create innovative solutions that transform businesses.",
    },
    {
      title: "Excellence",
      description: "We strive for excellence in everything we do, from code quality to customer service.",
    },
    {
      title: "Collaboration",
      description: "We believe in the power of teamwork and open communication to achieve great results.",
    },
    {
      title: "Growth",
      description: "We invest in our people's growth and provide opportunities to learn and advance.",
    },
  ]

return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100">
      {/* Enhanced Header */}
      <EnhancedHeader />

{/* Hero Section */}
      <section className="container mx-auto px-4 py-16 md:py-24">
        <div className="text-center max-w-4xl mx-auto">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">Join Our Team</Badge>
          <h1 className="text-4xl md:text-6xl font-bold text-slate-900 mb-6">
            Build the Future of
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-orange-500">
              {" "}
              Business Technology
            </span>
          </h1>
          <p className="text-xl text-slate-600 mb-8 leading-relaxed">
            Join our passionate team of innovators, developers, and problem-solvers who are transforming industries with
            cutting-edge ERP solutions. Be part of something bigger.
          </p>
          {/*
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button size="lg" className="bg-orange-600 hover:bg-orange-700">
              View Open Positions
              <ArrowRight className="ml-2 h-4 w-4" />
            </Button>
            <Button size="lg" variant="outline">
              Learn About Our Culture
            </Button>
          </div>
          */}
        </div>
      </section>

{/* Company Stats */}
      <section className="container mx-auto px-4 py-12">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
          {[
            { label: "Team Members", value: "15+" },
            { label: "Years in Business", value: "8+" },
            { label: "Happy Clients", value: "250+" },
            { label: "Products Built", value: "4" },
          ].map((stat, index) => (
            <div key={index} className="space-y-2">
              <div className="text-3xl font-bold text-orange-600">{stat.value}</div>
              <div className="text-sm text-slate-600">{stat.label}</div>
            </div>
          ))}
        </div>
      </section>

{/* Our Values */}
      <section className="container mx-auto px-4 py-16 md:py-24 bg-white">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">Our Values</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">What Drives Us</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            Our core values shape everything we do and guide how we work together
          </p>
        </div>

<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
          {values.map((value, index) => (
            <Card key={index} className="border-0 shadow-md hover:shadow-xl transition-shadow text-center">
              <CardContent className="p-6 space-y-4">
                <div className="h-16 w-16 rounded-full bg-orange-100 flex items-center justify-center text-orange-600 mx-auto">
                  <span className="text-2xl font-bold">{value.title[0]}</span>
                </div>
                <h3 className="text-xl font-semibold text-slate-900">{value.title}</h3>
                <p className="text-slate-600">{value.description}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

{/* Benefits & Perks */}
      <section className="container mx-auto px-4 py-16 md:py-24">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">Benefits & Perks</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Why You'll Love Working Here</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            We believe in taking care of our team with comprehensive benefits and a great work environment
          </p>
        </div>

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {benefits.map((benefit, index) => (
            <Card key={index} className="border-0 shadow-md hover:shadow-xl transition-shadow">
              <CardContent className="p-6 space-y-4">
                <div className="h-12 w-12 rounded-lg bg-orange-100 flex items-center justify-center text-orange-600">
                  <benefit.icon className="h-6 w-6" />
                </div>
                <h3 className="text-xl font-semibold text-slate-900">{benefit.title}</h3>
                <p className="text-slate-600">{benefit.description}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

{/* Open Positions 
      <section className="container mx-auto px-4 py-16 md:py-24 bg-slate-50">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">Open Positions</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Current Opportunities</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            Find your next career opportunity and join our growing team
          </p>
        </div>

<div className="grid gap-6 max-w-4xl mx-auto">
          {openPositions.map((position, index) => (
            <Card key={index} className="border-0 shadow-md hover:shadow-xl transition-shadow">
              <CardContent className="p-6">
                <div className="flex flex-col md:flex-row md:items-center justify-between mb-4">
                  <div>
                    <h3 className="text-xl font-semibold text-slate-900 mb-2">{position.title}</h3>
                    <div className="flex flex-wrap gap-4 text-sm text-slate-600">
                      <div className="flex items-center space-x-1">
                        <Users className="h-4 w-4" />
                        <span>{position.department}</span>
                      </div>
                      <div className="flex items-center space-x-1">
                        <MapPin className="h-4 w-4" />
                        <span>{position.location}</span>
                      </div>
                      <div className="flex items-center space-x-1">
                        <Clock className="h-4 w-4" />
                        <span>{position.type}</span>
                      </div>
                    </div>
                  </div>
                  <Badge variant="secondary" className="mt-2 md:mt-0">
                    {position.experience}
                  </Badge>
                </div>

<p className="text-slate-600 mb-4">{position.description}</p>

<div className="flex flex-wrap gap-2 mb-4">
                  {position.skills.map((skill, skillIndex) => (
                    <Badge key={skillIndex} variant="outline" className="text-xs">
                      {skill}
                    </Badge>
                  ))}
                </div>

<Button className="bg-orange-600 hover:bg-orange-700">
                  Apply Now
                  <ArrowRight className="ml-2 h-4 w-4" />
                </Button>
              </CardContent>
            </Card>
          ))}
        </div>

<div className="text-center mt-12">
          <p className="text-slate-600 mb-4">
            Don't see a position that fits? We're always looking for talented individuals.
          </p>
          <Button variant="outline" size="lg">
            Send Us Your Resume
          </Button>
        </div>
      </section>
      */}

{/* Job Application Form Section */}
      <section className="container mx-auto px-4 py-16 md:py-24">
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-orange-100 text-orange-700 hover:bg-orange-200">Join Our Team</Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Ready to Apply?</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            Don't see the perfect position? Send us your details and we'll keep you in mind for future opportunities.
          </p>
        </div>

<div className="max-w-2xl mx-auto">
          <Button
            size="lg"
            className="w-full bg-orange-600 hover:bg-orange-700 mb-8"
            onClick={() => {
              const form = document.getElementById("application-form")
              if (form) {
                form.style.display = form.style.display === "none" ? "block" : "none"
              }
            }}
          >
            Join Us - Submit Your Application
          </Button>

<div id="application-form" style={{ display: "none" }}>
      <Card className="border-0 shadow-xl">
        <CardContent className="p-8">
          <form className="space-y-6" onSubmit={handleSubmit}>
            <div className="grid md:grid-cols-2 gap-6">
              <div>
                <label htmlFor="firstName" className="block text-sm font-medium text-slate-700 mb-2">
                  First Name *
                </label>
                <input
                  type="text"
                  id="firstName"
                  name="firstName"
                  required
                  className="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500"
                  value={formData.firstName}
                  onChange={handleChange}
                />
              </div>
              <div>
                <label htmlFor="lastName" className="block text-sm font-medium text-slate-700 mb-2">
                  Last Name *
                </label>
                <input
                  type="text"
                  id="lastName"
                  name="lastName"
                  required
                  className="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500"
                  value={formData.lastName}
                  onChange={handleChange}
                />
              </div>
            </div>

<div>
              <label htmlFor="email" className="block text-sm font-medium text-slate-700 mb-2">
                Email Address *
              </label>
              <input
                type="email"
                id="email"
                name="email"
                required
                className="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500"
                value={formData.email}
                onChange={handleChange}
              />
            </div>

<div>
              <label htmlFor="phone" className="block text-sm font-medium text-slate-700 mb-2">
                Phone Number *
              </label>
              <input
                type="tel"
                id="phone"
                name="phone"
                required
                className="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500"
                value={formData.phone}
                onChange={handleChange}
              />
            </div>

<div className="grid md:grid-cols-2 gap-6">
              <div>
                <label htmlFor="position" className="block text-sm font-medium text-slate-700 mb-2">
                  Position of Interest
                </label>
                <select
                  id="position"
                  name="position"
                  className="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500"
                  value={formData.position}
                  onChange={handleChange}
                >
                  <option value="">Select a position</option>
                  <option value="Senior Full Stack Developer">Senior Full Stack Developer</option>
                  <option value="UI/UX Designer">UI/UX Designer</option>
                  <option value="Business Analyst">Business Analyst</option>
                  <option value="DevOps Engineer">DevOps Engineer</option>
                  <option value="Sales Executive">Sales Executive</option>
                  <option value="Quality Assurance Engineer">Quality Assurance Engineer</option>
                  <option value="Other">Other</option>
                </select>
              </div>
              <div>
                <label htmlFor="experience" className="block text-sm font-medium text-slate-700 mb-2">
                  Years of Experience
                </label>
                <select
                  id="experience"
                  name="experience"
                  className="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500"
                  value={formData.experience}
                  onChange={handleChange}
                >
                  <option value="">Select experience</option>
                  <option value="0-1">0-1 years</option>
                  <option value="1-3">1-3 years</option>
                  <option value="3-5">3-5 years</option>
                  <option value="5-10">5-10 years</option>
                  <option value="10+">10+ years</option>
                </select>
              </div>
            </div>

<div>
              <label htmlFor="currentLocation" className="block text-sm font-medium text-slate-700 mb-2">
                Current Location *
              </label>
              <input
                type="text"
                id="currentLocation"
                name="currentLocation"
                required
                placeholder="City, State"
                className="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500"
                value={formData.currentLocation}
                onChange={handleChange}
              />
            </div>

<div>
              <label htmlFor="skills" className="block text-sm font-medium text-slate-700 mb-2">
                Key Skills
              </label>
              <textarea
                id="skills"
                name="skills"
                rows={3}
                placeholder="List your key technical skills, separated by commas"
                className="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500"
                value={formData.skills}
                onChange={handleChange}
              />
            </div>