[V0_FILE]typescriptreact:file="tailwind.config.js" isEdit="true" isQuickEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { "navy-blue": "#1e2b5e", border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { slide: { "0%": { transform: "translateX(0)" }, "100%": { transform: "translateX(-50%)" }, }, }, animation: { slide: "slide 30s linear infinite", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="components/tech-logo.tsx" isEdit="true" isMerged="true" import type React from "react" import { ReactLogo, NextjsLogo, TensorFlowLogo, PytorchLogo, MongoDBLogo, NodejsLogo, ExpressLogo, PandasLogo, TypeScriptLogo, PythonLogo, } from "./tech-logos" interface TechLogoProps { name: string color: string } export const TechLogo: React.FC = ({ name, color }) => { const getLogo = () => { switch (name) { case "React": return case "Next.js": return case "TensorFlow": return case "PyTorch": return case "MongoDB": return case "Node.js": return case "Express": return case "Pandas": return case "TypeScript": return case "Python": return default: return null } } return (

{getLogo()}

{name}

) } [V0_FILE]typescriptreact:file="components/tech-logos.tsx" isEdit="true" isMerged="true" import type React from "react" export const ReactLogo: React.FC = () => ( ) export const NextjsLogo: React.FC = () => ( ) export const TensorFlowLogo: React.FC = () => ( ) export const PytorchLogo: React.FC = () => ( ) export const MongoDBLogo: React.FC = () => ( ) export const NodejsLogo: React.FC = () => ( ) export const ExpressLogo: React.FC = () => ( ) export const PandasLogo: React.FC = () => ( ) export const TypeScriptLogo: React.FC = () => ( ) export const PythonLogo: React.FC = () => ( ) [V0_FILE]json:file="package.json" isEdit="true" isMerged="true" { "dependencies": { "framer-motion": "^10.16.4", "zod": "^3.22.2" } } [V0_FILE]typescriptreact:file="components/scroll-animation.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { useEffect, useState } from "react" interface ScrollAnimationProps { children: React.ReactNode className?: string } export function ScrollAnimation({ children, className }: ScrollAnimationProps) { const [shouldReduceMotion, setShouldReduceMotion] = useState(false) useEffect(() => { const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)") setShouldReduceMotion(mediaQuery.matches) const handleChange = (e: MediaQueryListEvent) => { setShouldReduceMotion(e.matches) } mediaQuery.addEventListener("change", handleChange) return () => mediaQuery.removeEventListener("change", handleChange) }, []) if (shouldReduceMotion) { return

{children}

} return ( {children} ) } [V0_FILE]typescript:file="app/actions.ts" isEdit="true" isMerged="true" "use server" import { z } from "zod" const FormSchema = z.object({ company: z.string().min(1, "Company is required"), name: z.string().min(1, "Name is required"), phone: z.string().min(1, "Phone number is required"), email: z.string().email("Invalid email address"), projectDetail: z.string().min(1, "Project detail is required"), privacyAccepted: z.boolean().refine((val) => val === true, "You must accept the privacy policy"), }) export async function submitContactForm(formData: FormData) { console.log("Received form data:", Object.fromEntries(formData)) try { const validatedFields = FormSchema.safeParse({ company: formData.get("company"), name: formData.get("name"), phone: formData.get("phone"), email: formData.get("email"), projectDetail: formData.get("projectDetail"), privacyAccepted: formData.get("privacyAccepted") === "on", }) if (!validatedFields.success) { console.error("Validation error:", validatedFields.error.flatten().fieldErrors) return { success: false, errors: validatedFields.error.flatten().fieldErrors } } const { company, name, phone, email, projectDetail, privacyAccepted } = validatedFields.data console.log("Validated data:", { company, name, phone, email, projectDetail, privacyAccepted }) // Simulate API call (replace with actual API call when backend is ready) const response = await new Promise<{ success: boolean; message: string }>((resolve) => { setTimeout(() => { resolve({ success: true, message: "Form submitted successfully!" }) }, 1000) }) console.log("API response:", response) if (response.success) { return { success: true, message: response.message } } else { return { success: false, message: response.message || "Failed to submit form. Please try again." } } } catch (error) { console.error("Unexpected error in submitContactForm:", error) return { success: false, message: error instanceof Error ? error.message : "An unexpected error occurred. Please try again later.", } } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import Image from "next/image" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Checkbox } from "@/components/ui/checkbox" import { MessageCircleQuestion, Settings, Handshake, Award, Code, Database, Paintbrush, TestTube, Star, } from "lucide-react" import { TechLogo } from "@/components/tech-logo" import { ScrollAnimation } from "@/components/scroll-animation" import { submitContactForm } from "./actions" import { useState } from "react" import { useToast } from "@/components/ui/use-toast" import { ToastAction } from "@/components/ui/toast" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog" const staggerChildren = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.2, }, }, } const fadeInUp = { hidden: { opacity: 0, y: 20 }, show: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut", }, }, } export default function Home() { const [isSubmitting, setIsSubmitting] = useState(false) const [dialogOpen, setDialogOpen] = useState(false) const [dialogMessage, setDialogMessage] = useState("") const { toast } = useToast() const handleSubmit = async (event: React.FormEvent) => { event.preventDefault() setIsSubmitting(true) try { const form = event.currentTarget const formData = new FormData(form) console.log("Form data before submission:", Object.fromEntries(formData)) const result = await submitContactForm(formData) console.log("Form submission result:", result) if (result.success) { setDialogMessage(result.message) setDialogOpen(true) form.reset() } else { toast({ title: "Error", description: result.message || "An error occurred. Please try again.", variant: "destructive", action: Try again, }) console.error("Form submission error:", result.errors || result.message) } } catch (error) { console.error("Error in handleSubmit:", error) if (error instanceof Error) { console.error("Error name:", error.name) console.error("Error message:", error.message) console.error("Error stack:", error.stack) } else { console.error("Unknown error type:", typeof error) } toast({ title: "Error", description: "An unexpected error occurred. Please try again later.", variant: "destructive", action: Try again, }) } finally { setIsSubmitting(false) } } return (

{/* Navigation */} {/* Hero Section */}

From Imagination to Innovation, We Craft It All.

Web Development

{/* Stats */} {[ { number: "30+", text: "project completed" }, { number: "98%", text: "Customer satisfaction" }, { number: "4+", text: "Year of experience" }, { number: "5+", text: "Team member" }, ].map((stat, index) => (

{stat.number}

{stat.text}

))}

{/* Process Section */}

How to Start

Easy Process

We specialize in helping you build a team of expert developers, testers, and leaders.

{[ { icon: , number: "01", text: "YOU ASK" }, { icon: , number: "02", text: "WE PROCEED" }, { icon: , number: "03", text: "Negotiate" }, { icon: , number: "04", text: "YOU GET" }, ].map((step, index) => (

{step.icon}

{step.number}

{step.text}

))}

OUR SERVICES

{[ { icon:

, text: "Frontend Engineers" },
              { icon: , text: "Fullstack Engineers" },
              { icon: , text: "UI/UX Engineers" },
              { icon: , text: "QA Engineers" },
            ].map((service, index) => (
              
                
                  {service.icon}
                
                {service.text}
              
            ))}



      {/* Technologies Section */}
      
        
          
            Specialized
            Technologies
          
          
            
              
              
              
              
              
              
              
              
              
              
              {/* Duplicate for infinite scroll */}
              
              
              
              
              
              
              
              
              
              
            
          
        
      

      {/* Specialized We Provide Section */}
      
        
          
            Specialized We Provide
          
          
            {[
              {
                icon: "🖥️",
                title: "Frontend Engineers",
              },
              {
                icon: "⚛️",
                title: "Angular Developers",
              },
              {
                icon: "🤖",
                title: "AI and ML Engineers Deep Lerning/Machine Vision/NLP",
              },
              {
                icon: "🔒",
                title: "Application Security Engineers",
              },
              {
                icon: "⚡",
                title: "Fullstack Engineers",
              },
              {
                icon: "🔄",
                title: "DevOps + DevSecOps Engineers",
              },
              {
                icon: "📊",
                title: "Data Scientist / Data Engineers",
              },
              {
                icon: "📱",
                title: "IOS and Android Developers",
              },
              {
                icon: "🎨",
                title: "UI/UX Engineers",
              },
              {
                icon: "🐘",
                title: "PHP Developers",
              },
              {
                icon: "📋",
                title: "Project Managers",
              },
              {
                icon: "🏗️",
                title: "Solution Architects",
              },
              {
                icon: "✅",
                title: "QA Engineers",
              },
              {
                icon: "📝",
                title: "Wordpress CMS Developers",
              },
              {
                icon: "📈",
                title: "Business Analyst",
              },
              {
                icon: "👥",
                title: "Tech Leads / Team Leads",
              },
              {
                icon: "🎯",
                title: "Product Designer",
              },
              {
                icon: "📱",
                title: "Mobile App Developers",
              },
              {
                icon: "🔐",
                title: "Information Scurity Engineers",
              },
              {
                icon: "🔵",
                title: "Golang Dev",
              },
              {
                icon: "💾",
                title: "Database admin",
              },
            ].map((item, index) => (
              
                {item.icon}
                {item.title}
              
            ))}
          
        
      

      {/* Testimonial Section */}
      
        
          
            What Our Clients Say
          
          
            {[
              {
                name: "John Doe",
                role: "CEO, Tech Innovators",
                content:
                  "KodRish delivered an outstanding web application that exceeded our expectations. Their team's expertise and professionalism were evident throughout the project.",
                rating: 5,
              },
              {
                name: "Jane Smith",
                role: "CTO, Data Insights Co.",
                content:
                  "We were impressed by KodRish's ability to handle complex data visualization requirements. They created a user-friendly dashboard that has significantly improved our decision-making process.",
                rating: 5,
              },
              {
                name: "Mike Johnson",
                role: "Founder, E-commerce Solutions",
                content:
                  "KodRish's e-commerce platform solution has been a game-changer for our business. Their attention to detail and commitment to our success was remarkable.",
                rating: 5,
              },
            ].map((testimonial, index) => (
              
                
                  
                    
                      {[...Array(testimonial.rating)].map((_, i) => (
                        
                      ))}
                    
                    {testimonial.content}
                    {testimonial.name}
                    {testimonial.role}
                  
                
              
            ))}
          
        
      

      {/* Pricing Section */}
      
        
          
            Transparent Pricing Options
          
          
            {[
              {
                title: "Web Development Services",
                price: "₹3,000",
                features: [
                  "Custom responsive websites",
                  "E-commerce integration",
                  "Free domain & hosting",
                  "2 months of free support",
                ],
              },
              {
                title: "Project Development for Students",
                price: "₹2,000",
                features: [
                  "Customized academic project",
                  "Guidance on implementation",
                  "Source code and documentation",
                  "One-on-one consultation",
                ],
              },
              {
                title: "Graphic Designing for Social Media",
                price: "₹1,000",
                features: [
                  "Logo and brand kit design",
                  "Social media banners and posts",
                  "Quick delivery (within 3-5 days)",
                  "Unlimited revisions for the first draft",
                ],
              },
              {
                title: "AI/ML Solutions",
                price: "₹7,000",
                features: [
                  "Data analysis and predictive modeling",
                  "Custom AI/ML application development",
                  "End-to-end deployment support",
                  "Post-deployment monitoring (1 month)",
                ],
              },
            ].map((plan, index) => (
              
                
                  
                    {plan.title}
                    Starting at {plan.price}
                    
                      {plan.features.map((feature, i) => (
                        
                          {feature}
                        
                      ))}
                    
                    
                  
                
              
            ))}
          
        
      

      {/* Contact Section */}
      
        
          
            
              
                
              
            
            
              
                Connect With Your Next Great Hire Today!
                
                  
                    
                    
                  
                  
                    
                    
                  
                                    <div className="flex items-center space-x-2">
                    <Checkbox id="privacy" name="privacyAccepted" required />
                    <label htmlFor="privacy" className="text-sm">
                      By sending this form I confirm that I have read and accept the Privacy Policy
                    </label>
                  </div>
                  <Button className="w-full" type="submit" disabled={isSubmitting}>
                    {isSubmitting ? "Submitting..." : "GET CONSULTATION"}
                  </Button>
                </form>
              </div>
            </ScrollAnimation>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t py-12">
        <div className="container mx-auto px-4">
          <div className="grid md:grid-cols-4 gap-8">
            <div>
              <Image
                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-01-28%20at%2010.57.36%E2%80%AFAM-EtzuPbFmxVqBMxlM7bJ6ZNq4JE2S89.png"
                alt="KodRish Logo"
                width={180}
                height={60}
                className="mb-4 h-12 w-auto"
              />
              <p className="text-sm text-gray-600">Innovation & Solutions</p>
            </div>
            <div>
              <h3 className="font-bold mb-4">Company</h3>
              <ul className="space-y-2">
                <li>
                  <a href="#" className="text-sm">
                    About Us
                  </a>
                </li>
                <li>
                  <a href="#" className="text-sm">
                    Success Stories
                  </a>
                </li>
                <li>
                  <a href="#" className="text-sm">
                    Privacy Policy
                  </a>
                </li>
                <li>
                  <a href="#" className="text-sm">
                    Terms & Conditions
                  </a>
                </li>
              </ul>
            </div>
            <div>
              <h3 className="font-bold mb-4">Services</h3>
              <ul className="space-y-2">
                <li>
                  <a href="#" className="text-sm">
                    Web Development
                  </a>
                </li>{" "}
                <li>
                  <a href="#" className="text-sm">
                    Project Development
                  </a>
                </li>
                <li>
                  <a href="#" className="text-sm">
                    Graphic Designing
                  </a>
                </li>
                <li>
                  <a href="#" className="text-sm">
                    AI/ML Solutions
                  </a>
                </li>
              </ul>
            </div>
            <div>
              <h3 className="font-bold mb-4">Contact Us</h3>
              <ul className="space-y-2">
                <li className="text-sm">+94 713249222</li>
                <li className="text-sm">hello@courtney.lk</li>
              </ul>
            </div>
          </div>
          <div className="mt-8 pt-8 border-t text-center text-sm text-gray-600">
            © 2025 Kodrish. All rights reserved.
          </div>
        </div>
      </footer>
      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Success!</DialogTitle>
            <DialogDescription>{dialogMessage}</DialogDescription>
          </DialogHeader>
        </DialogContent>
      </Dialog>
    </div>
  )
}
</article></body></html>