[V0_FILE]typescriptreact:file="components/why-choose-us.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Check } from "lucide-react" const reasons = [ "Dedicated account management", "Proactive monitoring 24/7", "Industry-certified experts", "Rapid response times", "Transparent reporting", "Scalable solutions", ] export default function WhyChooseUs() { return (

{/* Left side - Content */} Why Choose TechVault

We're not just another IT service provider. We're your strategic technology partner, committed to your success and growth.

{reasons.map((reason, index) => ( {reason} ))}

{/* Right side - Visual */} {/* Animated cards */} {[1, 2, 3].map((card) => (

0{card}

{card === 1 ? "99.9% Uptime" : card === 2 ? "Instant Support" : "Full Security"}

{card === 1 ? "Guaranteed reliability" : card === 2 ? "15-minute response" : "Protected always"}

))}

) } [V0_FILE]typescriptreact:file="components/tech-stack.tsx" isMerged="true" "use client" import { motion } from "framer-motion" const technologies = [ { name: "AWS", color: "from-orange-400 to-orange-600" }, { name: "Azure", color: "from-blue-400 to-blue-600" }, { name: "Google Cloud", color: "from-yellow-400 to-red-600" }, { name: "Kubernetes", color: "from-blue-500 to-purple-600" }, { name: "Terraform", color: "from-purple-400 to-purple-600" }, { name: "Docker", color: "from-blue-400 to-cyan-600" }, { name: "Cisco", color: "from-red-400 to-red-600" }, { name: "Fortinet", color: "from-red-400 to-orange-600" }, ] export default function TechStack() { return (

{/* Background elements */}

Cutting-Edge Technology Stack

We work with industry-leading platforms and tools

{/* Tech grid with animation */} {technologies.map((tech, index) => ( {/* Shine effect */}

{tech.name}

))}

) } [V0_FILE]typescriptreact:file="components/testimonials.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Star } from "lucide-react" const testimonials = [ { name: "Sarah Johnson", role: "CTO, TechCorp", content: "TechVault transformed our IT operations. Their proactive support saved us from potential catastrophic failures.", rating: 5, }, { name: "Michael Chen", role: "Operations Manager, RetailHub", content: "Best investment we made. The team is professional, responsive, and truly understands our business needs.", rating: 5, }, { name: "Emma Davis", role: "Finance Director, FinanceFlow", content: "Exceptional service with transparent pricing. They delivered exactly what they promised, on time.", rating: 5, }, ] export default function Testimonials() { const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.2, }, }, } const itemVariants = { hidden: { opacity: 0, y: 30 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6 }, }, } return (

Trusted by Industry Leaders

See what our clients have to say about working with us

{testimonials.map((testimonial, index) => ( {/* Gradient background */}

{/* Stars */}

{[...Array(testimonial.rating)].map((_, i) => ( ))}

{/* Content */}

{`"${testimonial.content}"`}

{/* Author */}

{testimonial.name}

{testimonial.role}

))}

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.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.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@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.1", "@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", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.7", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "framer-motion": "12.23.25", "ai": "5.0.106" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/footer.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { Mail, Phone, Linkedin as LinkedIn, MessageCircle } from "lucide-react" export default function Footer() { const currentYear = new Date().getFullYear() const linkVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.5 }, }, } return ( ) } [V0_FILE]typescriptreact:file="components/cta-section.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { ArrowRight, MessageCircle } from "lucide-react" export default function CTA() { return (

{/* Animated background */}

Need IT Support Right Now?

Get professional remote IT support from Pasindu Lakshan. Quick response, expert solutions, and transparent pricing.

Book Me Now WhatsApp Chat {/* Stats */}

Years Experience

500+

Clients Helped

24/7

Availability

) } [V0_FILE]typescriptreact:file="components/it-support-animation.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Shield, Cloud, Zap, Lock, Server, Wifi } from "lucide-react" export default function ITSupportAnimation() { // Central server node const centerX = 200 const centerY = 200 // Surrounding nodes positioned in a circle const nodes = [ { icon: Cloud, label: "Cloud", angle: 0 }, { icon: Lock, label: "Security", angle: 60 }, { icon: Shield, label: "Protection", angle: 120 }, { icon: Server, label: "Server", angle: 180 }, { icon: Wifi, label: "Network", angle: 240 }, { icon: Zap, label: "Power", angle: 300 }, ] const getNodePosition = (angle: number, radius = 140) => { const radian = (angle * Math.PI) / 180 return { x: centerX + radius * Math.cos(radian), y: centerY + radius * Math.sin(radian), } } const lineVariants = { hidden: { pathLength: 0, opacity: 0 }, visible: (i: number) => ({ pathLength: 1, opacity: 0.3, transition: { pathLength: { delay: i * 0.1, duration: 1.5, ease: "easeInOut" }, opacity: { delay: i * 0.1, duration: 0.5 }, repeat: Number.POSITIVE_INFINITY, repeatType: "reverse" as const, repeatDelay: 2, }, }), } const nodeVariants = { hidden: { scale: 0, opacity: 0 }, visible: (i: number) => ({ scale: 1, opacity: 1, transition: { delay: i * 0.1 + 0.3, duration: 0.5, ease: "easeOut", }, }), } const pulseVariants = { pulse: { scale: [1, 1.2, 1], opacity: [0.5, 1, 0.5], transition: { duration: 2, repeat: Number.POSITIVE_INFINITY, ease: "easeInOut", }, }, } const floatingVariants = (delay: number) => ({ float: { y: [0, -8, 0], transition: { duration: 3 + delay * 0.2, repeat: Number.POSITIVE_INFINITY, ease: "easeInOut", }, }, }) return (

{/* Center icon */}

{/* Surrounding nodes */} {nodes.map((node, i) => { const pos = getNodePosition(node.angle) const Icon = node.icon return ( {node.label} ) })} {/* Floating particles */} {[...Array(8)].map((_, i) => ( ))}

) } [V0_FILE]typescriptreact:file="components/pricing-section.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Check, Clock, Calendar } from "lucide-react" const pricingPlans = [ { icon: Clock, duration: "1 Hour", price: "$5", description: "Quick troubleshooting and support", features: ["Remote support session", "Basic IT assistance", "Issue diagnosis", "Quick fixes"], }, { icon: Clock, duration: "2 Hours", price: "$7", description: "Extended support and setup", features: ["Remote support session", "Complex issue resolution", "System configuration", "Software installation"], highlighted: true, }, { icon: Calendar, duration: "Full Day (8 Hours)", price: "$30", description: "Comprehensive IT support", features: [ "Full day remote support", "Multiple issues resolution", "System optimization", "Network setup & config", ], }, ] const additionalRates = [ { label: "Additional Hour", price: "$2", description: "After initial session", }, ] export default function PricingSection() { const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.15, }, }, } const itemVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6 }, }, } return (

{/* Background decoration */}

{/* Section header */}

Remote IT Support Pricing

Flexible pricing for your IT support needs. Choose the plan that works best for you.

{/* Pricing Cards */} {pricingPlans.map((plan) => { const Icon = plan.icon return ( {/* Gradient background */}

{/* Border */}

{/* Content */}

{plan.highlighted && (

POPULAR

)}

{plan.duration}

{plan.price}

{plan.description}

window.open( `https://wa.me/94769835612?text=Hi%20Pasindu%2C%20I%20would%20like%20to%20book%20${encodeURIComponent(plan.duration)}%20of%20IT%20support.`, "_blank", ) } className={`w-full py-3 rounded-lg font-bold mb-6 transition-colors ${ plan.highlighted ? "bg-accent text-accent-foreground hover:bg-accent/90" : "bg-primary text-primary-foreground hover:bg-primary/90" }`} > Book Now via WhatsApp

{plan.features.map((feature) => ( {feature} ))}

) })} {/* Additional Rates */}

Additional Rates

{additionalRates.map((rate) => (

{rate.label}

{rate.description}

{rate.price}

))}

) } [V0_FILE]typescriptreact:file="components/navigation-bar.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { useEffect, useState } from "react" export default function NavigationBar() { const [isScrolled, setIsScrolled] = useState(false) useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 50) } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) const menuItems = ["Services", "Pricing", "About", "Contact"] return (

{/* Logo */}

Pasindu {/* Menu Items */}

{menuItems.map((item, index) => ( {item} ))}

{/* CTA Button */} WhatsApp

) } [V0_FILE]typescriptreact:file="components/services-section.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { Headset, Shield, Cloud, Settings, Lock, Users } from "lucide-react" const services = [ { icon: Headset, title: "Remote IT Support", description: "24/7 remote assistance for system troubleshooting, software issues, and technical problems.", }, { icon: Shield, title: "Cybersecurity", description: "Advanced security configuration, threat prevention, and system hardening services.", }, { icon: Cloud, title: "Cloud Solutions", description: "Azure and cloud platform management, migration, and optimization.", }, { icon: Settings, title: "System Administration", description: "Linux and Windows system administration, Active Directory management.", }, { icon: Lock, title: "Network Infrastructure", description: "Network setup, configuration, firewall management, and optimization.", }, { icon: Users, title: "IT Staffing", description: "Professional IT support specialists available for your business needs.", }, ] export default function ServicesSection() { const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, }, }, } const itemVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6 }, }, } return (

{/* Background decoration */}

{/* Section header */} Professional IT Services

Comprehensive IT support and system administration services tailored to your business needs.

{/* Services grid */} {services.map((service, index) => { const Icon = service.icon return ( {/* Gradient background on hover */}

{service.title}

{service.description}

) })}

) } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Changed to white/light theme with blue accents */ --primary: oklch(0.35 0.18 255); --primary-foreground: oklch(1 0 0); --accent: oklch(0.5 0.22 260); --accent-foreground: oklch(1 0 0); --background: oklch(0.99 0.01 0); --foreground: oklch(0.2 0.02 255); --card: oklch(0.96 0.01 0); --card-foreground: oklch(0.2 0.02 255); --muted: oklch(0.7 0.02 0); --muted-foreground: oklch(0.45 0.05 255); --border: oklch(0.9 0.01 0); --input: oklch(0.94 0.01 0); --ring: oklch(0.5 0.22 260); --popover: oklch(0.99 0.01 0); --popover-foreground: oklch(0.2 0.02 255); --secondary: oklch(0.75 0.05 255); --secondary-foreground: oklch(0.2 0.02 255); --destructive: oklch(0.57 0.24 27); --destructive-foreground: oklch(0.98 0.01 0); --chart-1: oklch(0.5 0.22 260); --chart-2: oklch(0.6 0.2 200); --chart-3: oklch(0.7 0.15 150); --chart-4: oklch(0.4 0.2 300); --chart-5: oklch(0.45 0.25 280); --radius: 0.625rem; --sidebar: oklch(0.96 0.01 0); --sidebar-foreground: oklch(0.2 0.02 255); --sidebar-primary: oklch(0.35 0.18 255); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.5 0.22 260); --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.9 0.01 0); --sidebar-ring: oklch(0.5 0.22 260); } .dark { --primary: oklch(0.45 0.2 255); --primary-foreground: oklch(0.08 0.01 255); --accent: oklch(0.6 0.25 260); --accent-foreground: oklch(0.08 0.01 255); --background: oklch(0.08 0.01 255); --foreground: oklch(0.95 0.01 255); --card: oklch(0.12 0.01 255); --card-foreground: oklch(0.95 0.01 255); --muted: oklch(0.22 0.02 255); --muted-foreground: oklch(0.7 0.05 255); --border: oklch(0.2 0.02 255); --input: oklch(0.15 0.01 255); --ring: oklch(0.6 0.25 260); --popover: oklch(0.12 0.01 255); --popover-foreground: oklch(0.95 0.01 255); --secondary: oklch(0.25 0.05 255); --secondary-foreground: oklch(0.95 0.01 255); --destructive: oklch(0.5 0.22 27); --destructive-foreground: oklch(0.95 0.01 0); --chart-1: oklch(0.6 0.25 260); --chart-2: oklch(0.65 0.22 200); --chart-3: oklch(0.7 0.18 150); --chart-4: oklch(0.5 0.25 300); --chart-5: oklch(0.55 0.28 280); --sidebar: oklch(0.12 0.01 255); --sidebar-foreground: oklch(0.95 0.01 255); --sidebar-primary: oklch(0.45 0.2 255); --sidebar-primary-foreground: oklch(0.08 0.01 255); --sidebar-accent: oklch(0.6 0.25 260); --sidebar-accent-foreground: oklch(0.08 0.01 255); --sidebar-border: oklch(0.2 0.02 255); --sidebar-ring: oklch(0.6 0.25 260); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/animated-hardware-background.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Monitor, Server, HardDrive, Cpu, Cloud, Lock } from "lucide-react" export default function AnimatedHardwareBackground() { const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.2, delayChildren: 0.3, }, }, } const itemVariants = { hidden: { opacity: 0, scale: 0.8, y: 20 }, visible: { opacity: 1, scale: 1, y: 0, transition: { duration: 0.8, ease: "easeOut", }, }, } const floatingVariants = { animate: { y: [0, -20, 0], transition: { duration: 4, repeat: Number.POSITIVE_INFINITY, ease: "easeInOut", }, }, } const hardwareItems = [ { icon: Monitor, label: "Workstations", color: "text-blue-500" }, { icon: Server, label: "Servers", color: "text-indigo-500" }, { icon: HardDrive, label: "Storage", color: "text-blue-600" }, { icon: Cpu, label: "Systems", color: "text-blue-400" }, { icon: Cloud, label: "Cloud", color: "text-blue-300" }, { icon: Lock, label: "Security", color: "text-blue-700" }, ] return (

{/* Hardware Grid */} {hardwareItems.map((item, index) => { const Icon = item.icon const delay = (index % 3) * 1 const yOffset = index < 3 ? 0 : 2 return ( {/* Animated glow background */} {/* Label */} {item.label} {/* Connection line animation */} {index < 3 && ( )} ) })} {/* Central connection lines */}

) } [V0_FILE]typescript:file="app/api/chat/route.ts" isFixed="true" isQuickEdit="true" isMerged="true" "use server" import { generateText } from "ai" export async function POST(request: Request) { const body = await request.json() const messages = body.messages const systemPrompt = "You are a helpful AI assistant for pls (Private) Limited, an IT support company. You represent Pasindu Lakshan, an IT Support Specialist with 7+ years of experience. Help answer questions about IT support services, cloud solutions, cybersecurity, and system administration. Keep responses concise and professional." try { const { text } = await generateText({ model: "openai/gpt-4-mini", messages: messages, system: systemPrompt, }) return Response.json({ text }) } catch (error) { console.error("Error generating text:", error) return new Response(JSON.stringify({ error: "Failed to generate text" }), { status: 500, headers: { "Content-Type": "application/json" }, }) } } [V0_FILE]typescriptreact:file="components/ai-chatbot.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useRef, useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import { X, Send, MessageCircle, Loader } from "lucide-react" interface Message { role: "user" | "assistant" content: string } export default function AIChatbot() { const [isOpen, setIsOpen] = useState(false) const [messages, setMessages] = useState([ { role: "assistant", content: "Hi! I'm Pasindu's AI assistant. How can I help you with IT support today?", }, ]) const [inputValue, setInputValue] = useState("") const [isLoading, setIsLoading] = useState(false) const messagesEndRef = useRef(null) const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) } useEffect(() => { scrollToBottom() }, [messages]) const handleSendMessage = async () => { if (!inputValue.trim()) return const userMessageContent = inputValue setInputValue("") setMessages((prev) => [...prev, { role: "user", content: userMessageContent }]) setIsLoading(true) try { const response = await fetch("/api/chat", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ messages: [...messages, { role: "user", content: userMessageContent }] }), }) if (!response.ok) { throw new Error("Network response was not ok") } const data = await response.json() setMessages((prev) => [...prev, { role: "assistant", content: data.text }]) } catch (error) { console.error("Error sending message:", error) setMessages((prev) => [ ...prev, { role: "assistant", content: "Sorry, I encountered an error. Please try again." }, ]) } finally { setIsLoading(false) } } return ( <> {/* Chatbot Toggle Button */} setIsOpen(!isOpen)} whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.95 }} className="fixed bottom-6 right-6 z-40 w-14 h-14 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-full shadow-lg flex items-center justify-center hover:shadow-xl transition-shadow" > {/* Chatbot Window */} {isOpen && ( {/* Header */}

Pasindu's AI Assistant

IT Support Specialist

{/* Messages */}

{messages.map((msg, idx) => (

{msg.content}

))} {isLoading && (

Thinking...

)}

{/* Input */}

setInputValue(e.target.value)} onKeyPress={(e) => e.key === "Enter" && handleSendMessage()} placeholder="Ask me anything..." className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-600 text-sm" />

)} ) } [V0_FILE]typescriptreact:file="components/hero-section.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { ArrowRight, Zap } from "lucide-react" import AnimatedHardwareBackground from "./animated-hardware-background" import FireAnimation from "./fire-animation" export default function HeroSection() { const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.2, delayChildren: 0.3, }, }, } const itemVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" }, }, } return (

{/* Badge */} Fast • Reliable • Secure

Welcome to pls

Pasindu's
Enterprise IT Support
That Actually Works

{/* Animated Hardware Background */} {/* Subtitle */} Empower your business with 24/7 managed IT services, cloud solutions, and cybersecurity that keeps your systems running flawlessly. {/* CTA Buttons */} Book Me Schedule a Call {/* Trust badges */}

1000+

Companies Trusted

99.9%

Uptime Guarantee

24/7

Expert Support

{/* Scroll indicator */}

) } [V0_FILE]typescriptreact:file="components/about-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { Mail, Phone, MessageCircle, Award, BookOpen, Briefcase } from "lucide-react" import { useState } from "react" export default function AboutSection() { const [activeTab, setActiveTab] = useState("experience") const experience = [ { role: "Service Desk Analyst", company: "ORELIT", period: "Jan 2025 – Present", description: "End-to-end technical support, Active Directory management, Office 365 administration", }, { role: "Service Desk Analyst / IT Support Specialist", company: "Wijeya Graphics", period: "Nov 2020 – Feb 2022", description: "First and second-level IT support, network monitoring, hardware deployment", }, { role: "Senior IT Support Specialist", company: "Various Organizations", period: "2018 – 2020", description: "7+ years cumulative IT support experience across multiple sectors and organizations", }, ] const education = [ { title: "Microsoft Azure Administrator", institution: "NextGen Campus", period: "Aug 2024 – Jan 2025", }, { title: "Certification in System Networking & LAN/WAN Management", institution: "SLIIT", period: "Aug 2024 – Present", }, { title: "Diploma in Network Administration with Security (DNA)", institution: "Vocational Training Centre", period: "Aug 2023 – Feb 2024", }, ] const skills = [ "IT Support (Tier 1 & 2)", "Linux System Administration", "Active Directory Management", "Azure & Cloud Platforms", "Network Infrastructure", "VMware Administration", "Office 365 Administration", "Cybersecurity", ] const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, }, }, } const itemVariants = { hidden: { opacity: 0, x: -20 }, visible: { opacity: 1, x: 0, transition: { duration: 0.5 }, }, } return (

{/* Profile Info */}

Pasindu Lakshan

IT Support Specialist & System Administrator

Self-motivated IT Support Specialist with over 7+ years of hands-on experience in IT service desk operations, system administration and cloud platforms. Known for collaborating effectively with cross-functional teams and taking initiative in solving problems.

{/* Contact Info */}

tech@pls.online +94 769 835 612 WhatsApp Support

{/* Quick Stats */}

Years Experience

500+

Clients Supported

24/7

Available Support

{/* Skills Grid */}

Core Skills

{skills.map((skill, index) => (

{skill}

))}

{/* Tabs */}

{["experience", "education"].map((tab) => ( setActiveTab(tab)} className={`px-6 py-3 rounded-lg font-semibold transition-all ${ activeTab === tab ? "bg-accent text-accent-foreground" : "bg-card border border-accent/20 text-foreground hover:border-accent/40" }`} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} > {tab === "experience" ? ( Experience ) : ( Education )} ))}

{/* Experience Tab */} {activeTab === "experience" && (

{experience.map((exp, index) => (

{exp.role}

{exp.company}

{exp.period}

{exp.description}

))}

)} {/* Education Tab */} {activeTab === "education" && (

{education.map((edu, index) => (

{edu.title}

{edu.institution}

{edu.period}

))}

)}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" // Updated metadata for IT support organization import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "pls - Pasindu's Enterprise IT Support Services", description: "Professional IT support services by Pasindu Lakshan. 24/7 managed IT services, cloud solutions, and cybersecurity with 7+ years of experience.", generator: "v0.app", icons: { icon: "/pls-favicon.svg", apple: "/pls-apple-icon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import NavigationBar from "@/components/navigation-bar" import HeroSection from "@/components/hero-section" import ServicesSection from "@/components/services-section" import PricingSection from "@/components/pricing-section" import AboutSection from "@/components/about-section" import WhyChooseUs from "@/components/why-choose-us" import TechStack from "@/components/tech-stack" import Testimonials from "@/components/testimonials" import CTA from "@/components/cta-section" import Footer from "@/components/footer" import AIChatbot from "@/components/ai-chatbot" export default function Home() { const [isLoaded, setIsLoaded] = useState(false) useEffect(() => { setIsLoaded(true) }, []) return (

{isLoaded && ( <>

) } [V0_FILE]xml:file="public/pls-favicon.svg" isMerged="true" [V0_FILE]typescriptreact:file="components/fire-animation.tsx" isEdit="true" "use client" import { useEffect, useRef } from "react" export default function FireAnimation() { const canvasRef = useRef(null) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return canvas.width = canvas.offsetWidth canvas.height = canvas.offsetHeight const particles: any[] = [] class Particle { x: number y: number size: number speedY: number speedX: number opacity: number color: string constructor(x: number, y: number) { this.x = x this.y = y this.size = Math.random() * 30 + 10 this.speedY = Math.random() * 3 + 2 this.speedX = (Math.random() - 0.5) * 2 this.opacity = 1 const colors = ["#ff6b00", "#ff8c00", "#ffa500", "#ffb84d", "#ffcc00"] this.color = colors[Math.floor(Math.random() * colors.length)] } update() { this.y -= this.speedY this.x += this.speedX this.size -= 0.5 this.opacity -= 0.02 } draw(ctx: CanvasRenderingContext2D) { if (this.size <= 0) return ctx.save() ctx.globalAlpha = this.opacity ctx.fillStyle = this.color ctx.beginPath() ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2) ctx.fill() ctx.restore() } } const animate = () => { ctx.clearRect(0, 0, canvas.width, canvas.height) if (Math.random() < 0.5) { particles.push(new Particle(canvas.width / 2, canvas.height)) } for (let i = particles.length - 1; i >= 0; i--) { particles[i].update() particles[i].draw(ctx) if (particles[i].opacity <= 0) { particles.splice(i, 1) } } requestAnimationFrame(animate) } animate() }, []) return

Cutting-Edge Technology Stack

Trusted by Industry Leaders

Need IT Support Right Now?

Remote IT Support Pricing

{plan.duration}

Additional Rates

{service.title}

Pasindu's AI Assistant

Welcome to pls

Pasindu's Enterprise IT Support That Actually Works

Pasindu Lakshan

Core Skills

{exp.role}

{edu.title}

Pasindu's
Enterprise IT Support
That Actually Works

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This