[V0_FILE]css:file="app/globals.css" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated color scheme inspired by modern tech websites */ --background: oklch(0.98 0.005 240); --foreground: oklch(0.15 0.02 240); --card: oklch(1 0 0); --card-foreground: oklch(0.15 0.02 240); --popover: oklch(1 0 0); --popover-foreground: oklch(0.15 0.02 240); --primary: oklch(0.35 0.15 260); --primary-foreground: oklch(0.98 0.005 240); --secondary: oklch(0.25 0.12 280); --secondary-foreground: oklch(0.98 0.005 240); --muted: oklch(0.96 0.01 240); --muted-foreground: oklch(0.55 0.02 240); --accent: oklch(0.45 0.18 270); --accent-foreground: oklch(0.98 0.005 240); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.98 0.005 240); --border: oklch(0.92 0.01 240); --input: oklch(0.96 0.01 240); --ring: oklch(0.45 0.18 270); --chart-1: oklch(0.35 0.15 260); --chart-2: oklch(0.45 0.18 270); --chart-3: oklch(0.25 0.12 280); --chart-4: oklch(0.6 0.2 250); --chart-5: oklch(0.7 0.15 240); --radius: 0.75rem; --sidebar: oklch(0.98 0.005 240); --sidebar-foreground: oklch(0.15 0.02 240); --sidebar-primary: oklch(0.35 0.15 260); --sidebar-primary-foreground: oklch(0.98 0.005 240); --sidebar-accent: oklch(0.96 0.01 240); --sidebar-accent-foreground: oklch(0.15 0.02 240); --sidebar-border: oklch(0.92 0.01 240); --sidebar-ring: oklch(0.45 0.18 270); } .dark { --background: oklch(0.08 0.02 240); --foreground: oklch(0.95 0.005 240); --card: oklch(0.12 0.02 240); --card-foreground: oklch(0.95 0.005 240); --popover: oklch(0.12 0.02 240); --popover-foreground: oklch(0.95 0.005 240); --primary: oklch(0.65 0.18 270); --primary-foreground: oklch(0.08 0.02 240); --secondary: oklch(0.2 0.02 240); --secondary-foreground: oklch(0.95 0.005 240); --muted: oklch(0.16 0.02 240); --muted-foreground: oklch(0.65 0.01 240); --accent: oklch(0.55 0.18 270); --accent-foreground: oklch(0.08 0.02 240); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.95 0.005 240); --border: oklch(0.2 0.02 240); --input: oklch(0.16 0.02 240); --ring: oklch(0.55 0.18 270); --chart-1: oklch(0.65 0.18 270); --chart-2: oklch(0.55 0.18 270); --chart-3: oklch(0.75 0.15 260); --chart-4: oklch(0.45 0.2 280); --chart-5: oklch(0.35 0.15 290); --sidebar: oklch(0.12 0.02 240); --sidebar-foreground: oklch(0.95 0.005 240); --sidebar-primary: oklch(0.65 0.18 270); --sidebar-primary-foreground: oklch(0.08 0.02 240); --sidebar-accent: oklch(0.16 0.02 240); --sidebar-accent-foreground: oklch(0.95 0.005 240); --sidebar-border: oklch(0.2 0.02 240); --sidebar-ring: oklch(0.55 0.18 270); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --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; } } /* Added custom animations and gradients */ @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } .animate-float { animation: float 6s ease-in-out infinite; } .gradient-mesh { background: radial-gradient(circle at 20% 50%, oklch(0.35 0.15 260 / 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 20%, oklch(0.45 0.18 270 / 0.1) 0%, transparent 50%), radial-gradient(circle at 40% 80%, oklch(0.25 0.12 280 / 0.1) 0%, transparent 50%); } [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" import type React from "react" import type { Metadata } from "next" import { Inter, JetBrains_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import { Suspense } from "react" import "./globals.css" const inter = Inter({ subsets: ["latin"], variable: "--font-inter", display: "swap", }) const jetbrainsMono = JetBrains_Mono({ subsets: ["latin"], variable: "--font-jetbrains-mono", display: "swap", }) export const metadata: Metadata = { title: "RTC Computer Education - Empowering Students with Technology Skills", description: "Leading computer education institute offering courses in Basic Computer, MS Office, Web Development, Graphic Design, and Python Programming.", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( Loading...}>{children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Textarea } from "@/components/ui/textarea" import { Badge } from "@/components/ui/badge" import { useToast } from "@/hooks/use-toast" import { Toaster } from "@/components/ui/toaster" import { GraduationCap, Code, Palette, FileText, Users, Award, ChevronRight, Mail, Phone, MapPin, Star, } from "lucide-react" export default function HomePage() { const { toast } = useToast() const [admissionForm, setAdmissionForm] = useState({ fullname: "", email: "", phone: "", course: "", }) const [contactForm, setContactForm] = useState({ name: "", email: "", message: "", }) const handleAdmissionSubmit = (e: React.FormEvent) => { e.preventDefault() console.log("Admission form submitted:", admissionForm) setAdmissionForm({ fullname: "", email: "", phone: "", course: "" }) toast({ title: "Application Submitted!", description: "We'll contact you soon to discuss your enrollment.", }) } const handleContactSubmit = (e: React.FormEvent) => { e.preventDefault() console.log("Contact form submitted:", contactForm) setContactForm({ name: "", email: "", message: "" }) toast({ title: "Message Sent!", description: "Thank you for contacting us. We'll get back to you shortly.", }) } const courses = [ { title: "Basic Computer", description: "Fundamental computer skills and digital literacy", icon: , duration: "3 months", level: "Beginner", }, { title: "MS Office", description: "Master Word, Excel, PowerPoint, and more", icon: , duration: "2 months", level: "Beginner", }, { title: "Web Development", description: "Build modern websites with HTML, CSS, and JavaScript", icon:

,
      duration: "6 months",
      level: "Intermediate",
    },
    {
      title: "Graphic Design",
      description: "Create stunning visuals with industry-standard tools",
      icon: ,
      duration: "4 months",
      level: "Beginner",
    },
    {
      title: "Python Programming",
      description: "Learn programming fundamentals with Python",
      icon: ,
      duration: "5 months",
      level: "Intermediate",
    },
  ]

  const stats = [
    { number: "500+", label: "Students Trained" },
    { number: "95%", label: "Job Placement Rate" },
    { number: "5+", label: "Years Experience" },
    { number: "15+", label: "Expert Instructors" },
  ]

  return (
    
      {/* Announcement Bar */}
      
        🎓 New Batch Starting Soon!
        
      

      {/* Header */}
      
        
          
            
              
                
              
              
                RTC Computer Education
                Empowering Students with Technology
              
            
            
              
                Home
              
              
                About
              
              
                Courses
              
              
                Admission
              
              
                Contact
              
              
            
          
        
      

      
        {/* Hero Section */}
        
          
            
              
                Leading Computer Education Institute
              
              
                Master Technology Skills for the Digital Future
              
              
                Join thousands of students who have transformed their careers with our comprehensive computer education
                programs. Learn from industry experts and get job-ready skills.
              
              
                
                
              
            
          
        

        {/* Stats Section */}
        
          
            
              {stats.map((stat, index) => (
                
                  {stat.number}
                  {stat.label}
                
              ))}
            
          
        

        {/* About Section */}
        
          
            
              About RTC Computer Education
              
                RTC Computer Education has been at the forefront of technology education for over 5 years. We provide
                high-quality computer education and training programs designed to help students succeed in the modern
                digital world. Our focus on practical skills, experienced instructors, and personalized attention
                ensures that learners of all levels achieve their career goals.
              
              
                
                  
                    
                    Expert Instructors
                  
                  
                    
                      Learn from industry professionals with years of real-world experience
                    
                  
                
                
                  
                    
                    Small Class Sizes
                  
                  
                    
                      Personalized attention with small batches for better learning outcomes
                    
                  
                
                
                  
                    
                    Job Placement
                  
                  
                    
                      95% job placement rate with our comprehensive career support program
                    
                  
                
              
            
          
        

        {/* Courses Section */}
        
          
            
              Our Popular Courses
              
                Choose from our comprehensive range of courses designed to meet industry demands and boost your career
                prospects.
              
            
            
              {courses.map((course, index) => (
                
                  
                    
                      {course.icon}
                      {course.level}
                    
                    {course.title}
                    {course.description}
                  
                  
                    
                      Duration: {course.duration}
                      
                    
                  
                
              ))}
            
          
        

        {/* Admission Form Section */}
        
          
            
              
                
                  Apply for Admission
                  
                    Take the first step towards your technology career. Fill out the form below and we'll get back to
                    you within 24 hours.
                  
                
                
                  
                    
                      Full Name
                       setAdmissionForm({ ...admissionForm, fullname: e.target.value })}
                        required
                      />
                    
                    
                      Email Address
                       setAdmissionForm({ ...admissionForm, email: e.target.value })}
                        required
                      />
                    
                    
                      Phone Number
                       setAdmissionForm({ ...admissionForm, phone: e.target.value })}
                        required
                      />
                    
                    
                      Select Course
                      
                    
                    
                  
                
              
            
          
        

        {/* Contact Section */}
        
          
            
              
                Get in Touch
                
                  Have questions about our courses? We're here to help you choose the right path.
                
              
              
                
                  
                    
                      Send us a Message
                      Fill out the form and we'll respond within 24 hours.
                    
                    
                      
                        
                          Your Name
                           setContactForm({ ...contactForm, name: e.target.value })}
                            required
                          />
                        
                        
                          Your Email
                           setContactForm({ ...contactForm, email: e.target.value })}
                            required
                          />
                        
                        
                          Message
                           setContactForm({ ...contactForm, message: e.target.value })}
                            required
                          />
                        </div>
                        <Button type="submit" className="w-full">
                          Send Message
                        </Button>
                      </form>
                    </CardContent>
                  </Card>
                </div>
                <div className="space-y-6">
                  <Card>
                    <CardContent className="p-6">
                      <div className="flex items-start space-x-4">
                        <div className="bg-primary/10 text-primary p-3 rounded-lg">
                          <MapPin className="h-6 w-6" />
                        </div>
                        <div>
                          <h3 className="font-semibold mb-2">Visit Our Campus</h3>
                          <p className="text-muted-foreground">
                            123 Education Street
                            <br />
                            Tech City, TC 12345
                            <br />
                            Near Central Mall
                          </p>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                  <Card>
                    <CardContent className="p-6">
                      <div className="flex items-start space-x-4">
                        <div className="bg-primary/10 text-primary p-3 rounded-lg">
                          <Phone className="h-6 w-6" />
                        </div>
                        <div>
                          <h3 className="font-semibold mb-2">Call Us</h3>
                          <p className="text-muted-foreground">
                            +1 (555) 123-4567
                            <br />
                            +1 (555) 987-6543
                            <br />
                            Mon-Sat: 9AM-6PM
                          </p>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                  <Card>
                    <CardContent className="p-6">
                      <div className="flex items-start space-x-4">
                        <div className="bg-primary/10 text-primary p-3 rounded-lg">
                          <Mail className="h-6 w-6" />
                        </div>
                        <div>
                          <h3 className="font-semibold mb-2">Email Us</h3>
                          <p className="text-muted-foreground">
                            info@rtceducation.com
                            <br />
                            admissions@rtceducation.com
                            <br />
                            support@rtceducation.com
                          </p>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>

      {/* Footer */}
      <footer className="bg-secondary text-secondary-foreground py-12">
        <div className="container mx-auto px-4">
          <div className="grid md:grid-cols-4 gap-8">
            <div>
              <div className="flex items-center space-x-3 mb-4">
                <div className="bg-primary text-primary-foreground p-2 rounded-lg">
                  <GraduationCap className="h-5 w-5" />
                </div>
                <span className="font-bold">RTC Computer Education</span>
              </div>
              <p className="text-sm text-muted-foreground">
                Empowering students with technology skills for a brighter future.
              </p>
            </div>
            <div>
              <h4 className="font-semibold mb-4">Quick Links</h4>
              <ul className="space-y-2 text-sm">
                <li>
                  <a href="#home" className="hover:text-primary transition-colors">
                    Home
                  </a>
                </li>
                <li>
                  <a href="#about" className="hover:text-primary transition-colors">
                    About
                  </a>
                </li>
                <li>
                  <a href="#courses" className="hover:text-primary transition-colors">
                    Courses
                  </a>
                </li>
                <li>
                  <a href="#admission" className="hover:text-primary transition-colors">
                    Admission
                  </a>
                </li>
              </ul>
            </div>
            <div>
              <h4 className="font-semibold mb-4">Courses</h4>
              <ul className="space-y-2 text-sm">
                <li>
                  <a href="#" className="hover:text-primary transition-colors">
                    Basic Computer
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-primary transition-colors">
                    MS Office
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-primary transition-colors">
                    Web Development
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-primary transition-colors">
                    Graphic Design
                  </a>
                </li>
              </ul>
            </div>
            <div>
              <h4 className="font-semibold mb-4">Contact Info</h4>
              <ul className="space-y-2 text-sm text-muted-foreground">
                <li>123 Education Street</li>
                <li>Tech City, TC 12345</li>
                <li>+1 (555) 123-4567</li>
                <li>info@rtceducation.com</li>
              </ul>
            </div>
          </div>
          <div className="border-t border-border mt-8 pt-8 text-center text-sm text-muted-foreground">
            <p>© {new Date().getFullYear()} RTC Computer Education. All rights reserved.</p>
          </div>
        </div>
      </footer>

      <Toaster />
    </div>
  )
}
[V0_FILE]json:file="package.json"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "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",
    "geist": "^1.3.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "14.2.25",
    "next-themes": "^0.4.6",
    "react": "^19",
    "react-day-picker": "9.8.0",
    "react-dom": "^19",
    "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": "^0.9.9",
    "zod": "3.25.67"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}</article></body></html>