Spaces:
Running
Running
| <html lang="en" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>VritantaNextGen | Web Development, RPA & AI Solutions</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://unpkg.com/scrollreveal"></script> | |
| <style> | |
| /* Custom CSS for animations and effects */ | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-20px); } | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .card-hover-effect { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover-effect:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .service-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .service-card:hover .service-icon { | |
| transform: scale(1.2); | |
| } | |
| .timeline-item::before { | |
| content: ''; | |
| position: absolute; | |
| left: -40px; | |
| top: 0; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: #3b82f6; | |
| border: 4px solid white; | |
| } | |
| .custom-cursor { | |
| width: 30px; | |
| height: 30px; | |
| border-radius: 50%; | |
| background: rgba(59, 130, 246, 0.5); | |
| pointer-events: none; | |
| position: fixed; | |
| transform: translate(-50%, -50%); | |
| z-index: 9999; | |
| mix-blend-mode: difference; | |
| transition: transform 0.1s ease; | |
| } | |
| .cursor-hover { | |
| transform: translate(-50%, -50%) scale(1.5); | |
| background: rgba(59, 130, 246, 0.8); | |
| } | |
| .dark .dark\:bg-gray-900 { | |
| background-color: #111827; | |
| } | |
| .dark .dark\:text-white { | |
| color: #fff; | |
| } | |
| .dark .dark\:bg-gray-800 { | |
| background-color: #1f2937; | |
| } | |
| .project-modal { | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .project-modal.active { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .loading-screen { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: #3b82f6; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 9999; | |
| transition: opacity 0.5s ease; | |
| } | |
| .loading-screen.hidden { | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .loading-spinner { | |
| width: 50px; | |
| height: 50px; | |
| border: 5px solid rgba(255, 255, 255, 0.3); | |
| border-radius: 50%; | |
| border-top-color: white; | |
| animation: spin 1s ease-in-out infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background-color: #3b82f6; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .blog-card { | |
| transition: all 0.3s ease; | |
| } | |
| .blog-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-white transition-colors duration-300"> | |
| <!-- Loading Screen --> | |
| <div class="loading-screen fixed inset-0 bg-blue-500 z-50 flex items-center justify-center transition-opacity duration-500"> | |
| <div class="loading-spinner w-12 h-12 border-4 border-white border-t-transparent rounded-full animate-spin"></div> | |
| </div> | |
| <!-- Custom Cursor --> | |
| <div class="custom-cursor"></div> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full bg-white/80 dark:bg-gray-800/80 backdrop-blur-md z-50 shadow-sm transition-all duration-300"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex justify-between items-center"> | |
| <a href="#" class="text-2xl font-bold text-blue-500">Vritanta<span class="text-gray-800 dark:text-white">NextGen</span></a> | |
| <!-- Desktop Navigation --> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#home" class="nav-link">Home</a> | |
| <a href="#services" class="nav-link">Services</a> | |
| <a href="#portfolio" class="nav-link">Portfolio</a> | |
| <a href="#about" class="nav-link">About</a> | |
| <a href="#blog" class="nav-link">Blog</a> | |
| <a href="#contact" class="nav-link">Contact</a> | |
| </div> | |
| <!-- Dark Mode Toggle --> | |
| <button id="theme-toggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700"> | |
| <i class="fas fa-moon dark:hidden"></i> | |
| <i class="fas fa-sun hidden dark:block"></i> | |
| </button> | |
| <!-- Mobile Menu Button --> | |
| <button id="mobile-menu-button" class="md:hidden p-2 rounded-full bg-gray-200 dark:bg-gray-700"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white dark:bg-gray-800 px-6 py-4 shadow-lg"> | |
| <div class="flex flex-col space-y-4"> | |
| <a href="#home" class="nav-link">Home</a> | |
| <a href="#services" class="nav-link">Services</a> | |
| <a href="#portfolio" class="nav-link">Portfolio</a> | |
| <a href="#about" class="nav-link">About</a> | |
| <a href="#blog" class="nav-link">Blog</a> | |
| <a href="#contact" class="nav-link">Contact</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="min-h-screen flex items-center justify-center relative overflow-hidden pt-20"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-blue-500 to-purple-600 opacity-20 dark:opacity-10"></div> | |
| <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')] bg-cover bg-center opacity-10 dark:opacity-5"></div> | |
| <div class="container mx-auto px-6 z-10"> | |
| <div class="flex flex-col lg:flex-row items-center justify-between"> | |
| <div class="lg:w-1/2 mb-12 lg:mb-0 text-center lg:text-left"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6"> | |
| <span class="text-blue-500">Innovative</span> Digital Solutions | |
| </h1> | |
| <p class="text-xl md:text-2xl mb-8 text-gray-600 dark:text-gray-300"> | |
| We transform businesses with cutting-edge web development, RPA, and AI automation. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center lg:justify-start"> | |
| <a href="#contact" class="px-8 py-3 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-medium transition-colors duration-300 shadow-lg hover:shadow-xl"> | |
| Get Started | |
| </a> | |
| <a href="#portfolio" class="px-8 py-3 border-2 border-blue-500 text-blue-500 hover:bg-blue-50 dark:hover:bg-gray-800 rounded-lg font-medium transition-colors duration-300"> | |
| View Work | |
| </a> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2 flex justify-center"> | |
| <div class="relative w-full max-w-md"> | |
| <div class="absolute -top-10 -left-10 w-32 h-32 bg-purple-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div> | |
| <div class="absolute -bottom-10 -right-10 w-32 h-32 bg-blue-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div> | |
| <div class="absolute top-0 right-20 w-32 h-32 bg-pink-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div> | |
| <div class="relative bg-white dark:bg-gray-800 rounded-2xl shadow-2xl overflow-hidden card-hover-effect"> | |
| <div class="h-64 bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center"> | |
| <i class="fas fa-code text-white text-8xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Next-Gen Solutions</h3> | |
| <p class="text-gray-600 dark:text-gray-300">We combine web technologies with AI to create powerful business solutions.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce"> | |
| <a href="#services" class="text-gray-600 dark:text-gray-300 hover:text-blue-500"> | |
| <i class="fas fa-chevron-down text-2xl"></i> | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-gray-100 dark:bg-gray-800"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Our <span class="text-blue-500">Services</span></h2> | |
| <p class="max-w-2xl mx-auto text-gray-600 dark:text-gray-300"> | |
| We offer comprehensive digital solutions to help your business thrive in the modern landscape. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Web Development --> | |
| <div class="service-card bg-white dark:bg-gray-700 rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-xl"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mb-4 mx-auto service-icon"> | |
| <i class="fas fa-code text-blue-500 dark:text-blue-300 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2 text-center">Web Development</h3> | |
| <p class="text-gray-600 dark:text-gray-300 text-center mb-4"> | |
| Custom, responsive websites and web applications tailored to your needs. | |
| </p> | |
| <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-300"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-blue-500 mr-2"></i> | |
| Frontend & Backend Development | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-blue-500 mr-2"></i> | |
| E-commerce Solutions | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-blue-500 mr-2"></i> | |
| CMS Integration | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- RPA --> | |
| <div class="service-card bg-white dark:bg-gray-700 rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-xl"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mb-4 mx-auto service-icon"> | |
| <i class="fas fa-robot text-blue-500 dark:text-blue-300 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2 text-center">Intelligent RPA</h3> | |
| <p class="text-gray-600 dark:text-gray-300 text-center mb-4"> | |
| Automate repetitive tasks with intelligent Robotic Process Automation. | |
| </p> | |
| <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-300"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-blue-500 mr-2"></i> | |
| Process Automation | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-blue-500 mr-2"></i> | |
| AI-Powered Bots | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-blue-500 mr-2"></i> | |
| Workflow Optimization | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Data Analysis --> | |
| <div class="service-card bg-white dark:bg-gray-700 rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-xl"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mb-4 mx-auto service-icon"> | |
| <i class="fas fa-chart-bar text-blue-500 dark:text-blue-300 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2 text-center">Data Analysis</h3> | |
| <p class="text-gray-600 dark:text-gray-300 text-center mb-4"> | |
| Transform your data into actionable insights with powerful analytics. | |
| </p> | |
| <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-300"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-blue-500 mr-2"></i> | |
| Power BI Dashboards | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-blue-500 mr-2"></i> | |
| Data Visualization | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-blue-500 mr-2"></i> | |
| Business Intelligence | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- AI Automation --> | |
| <div class="service-card bg-white dark:bg-gray-700 rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-xl"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mb-4 mx-auto service-icon"> | |
| <i class="fas fa-brain text-blue-500 dark:text-blue-300 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2 text-center">AI Automation</h3> | |
| <p class="text-gray-600 dark:text-gray-300 text-center mb-4"> | |
| Leverage AI to automate complex processes and enhance decision-making. | |
| </p> | |
| <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-300"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-blue-500 mr-2"></i> | |
| Zapier Integration | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-blue-500 mr-2"></i> | |
| Machine Learning | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-blue-500 mr-2"></i> | |
| Smart Workflows | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Portfolio Section --> | |
| <section id="portfolio" class="py-20 bg-white dark:bg-gray-900"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Our <span class="text-blue-500">Portfolio</span></h2> | |
| <p class="max-w-2xl mx-auto text-gray-600 dark:text-gray-300"> | |
| Explore our recent projects and see how we've helped businesses transform digitally. | |
| </p> | |
| </div> | |
| <!-- Portfolio Filter --> | |
| <div class="flex flex-wrap justify-center mb-12 gap-2"> | |
| <button class="portfolio-filter px-4 py-2 rounded-full bg-blue-500 text-white" data-filter="all"> | |
| All | |
| </button> | |
| <button class="portfolio-filter px-4 py-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-blue-500 hover:text-white transition-colors duration-300" data-filter="web"> | |
| Web Development | |
| </button> | |
| <button class="portfolio-filter px-4 py-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-blue-500 hover:text-white transition-colors duration-300" data-filter="rpa"> | |
| RPA | |
| </button> | |
| <button class="portfolio-filter px-4 py-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-blue-500 hover:text-white transition-colors duration-300" data-filter="data"> | |
| Data Analysis | |
| </button> | |
| <button class="portfolio-filter px-4 py-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-blue-500 hover:text-white transition-colors duration-300" data-filter="ai"> | |
| AI Automation | |
| </button> | |
| </div> | |
| <!-- Portfolio Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Project 1 --> | |
| <div class="portfolio-item web card-hover-effect" data-category="web"> | |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden"> | |
| <div class="h-48 bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center relative"> | |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="E-commerce Platform" class="absolute inset-0 w-full h-full object-cover opacity-70"> | |
| <h3 class="text-xl font-bold text-white relative z-10">E-commerce Platform</h3> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4"> | |
| A custom e-commerce solution with advanced product filtering and payment integration. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">React</span> | |
| <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">Node.js</span> | |
| <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">MongoDB</span> | |
| </div> | |
| <button class="view-project-btn px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors duration-300" data-project="project1"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="portfolio-item rpa card-hover-effect" data-category="rpa"> | |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden"> | |
| <div class="h-48 bg-gradient-to-r from-green-400 to-blue-500 flex items-center justify-center relative"> | |
| <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=765&q=80" alt="Invoice Processing Automation" class="absolute inset-0 w-full h-full object-cover opacity-70"> | |
| <h3 class="text-xl font-bold text-white relative z-10">Invoice Processing Automation</h3> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4"> | |
| Automated invoice processing system that reduced manual work by 80% for our client. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">UiPath</span> | |
| <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">OCR</span> | |
| <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">AI</span> | |
| </div> | |
| <button class="view-project-btn px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors duration-300" data-project="project2"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="portfolio-item data card-hover-effect" data-category="data"> | |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden"> | |
| <div class="h-48 bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center relative"> | |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Sales Analytics Dashboard" class="absolute inset-0 w-full h-full object-cover opacity-70"> | |
| <h3 class="text-xl font-bold text-white relative z-10">Sales Analytics Dashboard</h3> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4"> | |
| Interactive Power BI dashboard providing real-time sales insights and forecasting. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">Power BI</span> | |
| <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">SQL</span> | |
| <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">Azure</span> | |
| </div> | |
| <button class="view-project-btn px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors duration-300" data-project="project3"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 4 --> | |
| <div class="portfolio-item ai card-hover-effect" data-category="ai"> | |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden"> | |
| <div class="h-48 bg-gradient-to-r from-yellow-400 to-red-500 flex items-center justify-center relative"> | |
| <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=765&q=80" alt="Customer Support Automation" class="absolute inset-0 w-full h-full object-cover opacity-70"> | |
| <h3 class="text-xl font-bold text-white relative z-10">Customer Support Automation</h3> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4"> | |
| AI-powered chatbot and ticketing system that handles 70% of customer inquiries. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">Zapier</span> | |
| <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">NLP</span> | |
| <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">Chatbot</span> | |
| </div> | |
| <button class="view-project-btn px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors duration-300" data-project="project4"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 5 --> | |
| <div class="portfolio-item web card-hover-effect" data-category="web"> | |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden"> | |
| <div class="h-48 bg-gradient-to-r from-indigo-500 to-blue-500 flex items-center justify-center relative"> | |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Corporate Website" class="absolute inset-0 w-full h-full object-cover opacity-70"> | |
| <h3 class="text-xl font-bold text-white relative z-10">Corporate Website</h3> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4"> | |
| Modern corporate website with CMS integration for easy content management. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">WordPress</span> | |
| <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">PHP</span> | |
| <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">MySQL</span> | |
| </div> | |
| <button class="view-project-btn px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors duration-300" data-project="project5"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 6 --> | |
| <div class="portfolio-item rpa ai card-hover-effect" data-category="rpa,ai"> | |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden"> | |
| <div class="h-48 bg-gradient-to-r from-red-500 to-orange-500 flex items-center justify-center relative"> | |
| <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=765&q=80" alt="HR Onboarding Automation" class="absolute inset-0 w-full h-full object-cover opacity-70"> | |
| <h3 class="text-xl font-bold text-white relative z-10">HR Onboarding Automation</h3> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4"> | |
| Automated employee onboarding system with document verification and training assignment. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">Automation Anywhere</span> | |
| <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">AI</span> | |
| <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">HRIS Integration</span> | |
| </div> | |
| <button class="view-project-btn px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors duration-300" data-project="project6"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Project Modals --> | |
| <div class="project-modal fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4 hidden"> | |
| <div class="bg-white dark:bg-gray-800 rounded-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto"> | |
| <div class="relative"> | |
| <button class="close-modal absolute top-4 right-4 bg-gray-200 dark:bg-gray-700 rounded-full w-10 h-10 flex items-center justify-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-300"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| <div id="project1-content" class="project-content hidden"> | |
| <div class="h-64 bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center relative"> | |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="E-commerce Platform" class="absolute inset-0 w-full h-full object-cover opacity-70"> | |
| <h3 class="text-3xl font-bold text-white relative z-10">E-commerce Platform</h3> | |
| </div> | |
| <div class="p-8"> | |
| <div class="flex flex-wrap gap-4 mb-6"> | |
| <span class="px-4 py-2 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full">React</span> | |
| <span class="px-4 py-2 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full">Node.js</span> | |
| <span class="px-4 py-2 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full">MongoDB</span> | |
| <span class="px-4 py-2 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full">Stripe</span> | |
| </div> | |
| <h4 class="text-xl font-bold mb-4">Project Overview</h4> | |
| <p class="text-gray-600 dark:text-gray-300 mb-6"> | |
| We developed a custom e-commerce platform for a fashion retailer that needed a scalable solution to handle their growing product catalog and customer base. The platform features advanced product filtering, personalized recommendations, and seamless checkout with multiple payment options. | |
| </p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8"> | |
| <div> | |
| <h4 class="text-xl font-bold mb-4">Challenges</h4> | |
| <ul class="space-y-3 text-gray-600 dark:text-gray-300"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> | |
| Handling large product catalog with complex attributes | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> | |
| Implementing real-time inventory management | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> | |
| Creating personalized shopping experience | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-xl font-bold mb-4">Results</h4> | |
| <ul class="space-y-3 text-gray-600 dark:text-gray-300"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-chart-line text-blue-500 mt-1 mr-2"></i> | |
| 45% increase in conversion rate | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-chart-line text-blue-500 mt-1 mr-2"></i> | |
| 30% reduction in cart abandonment | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-chart-line text-blue-500 mt-1 mr-2"></i> | |
| Ability to handle 10x more products than previous system | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="flex flex-wrap gap-4"> | |
| <a href="#" class="px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-medium transition-colors duration-300"> | |
| Visit Live Site | |
| </a> | |
| <a href="#" class="px-6 py-3 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg font-medium transition-colors duration-300"> | |
| View Case Study | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="project2-content" class="project-content hidden"> | |
| <div class="h-64 bg-gradient-to-r from-green-400 to-blue-500 flex items-center justify-center relative"> | |
| <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=765&q=80" alt="Invoice Processing Automation" class="absolute inset-0 w-full h-full object-cover opacity-70"> | |
| <h3 class="text-3xl font-bold text-white relative z-10">Invoice Processing Automation</h3> | |
| </div> | |
| <div class="p-8"> | |
| <div class="flex flex-wrap gap-4 mb-6"> | |
| <span class="px-4 py-2 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full">UiPath</span> | |
| <span class="px-4 py-2 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full">OCR</span> | |
| <span class="px-4 py-2 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full">AI</span> | |
| <span class="px-4 py-2 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full">SAP Integration</span> | |
| </div> | |
| <h4 class="text-xl font-bold mb-4">Project Overview</h4> | |
| <p class="text-gray-600 dark:text-gray-300 mb-6"> | |
| We implemented an intelligent invoice processing system for a manufacturing company that was struggling with manual data entry errors and slow processing times. The solution combines OCR technology with AI-powered validation to extract and process invoice data automatically. | |
| </p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8"> | |
| <div> | |
| <h4 class="text-xl font-bold mb-4">Challenges</h4> | |
| <ul class="space-y-3 text-gray-600 dark:text-gray-300"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> | |
| Handling various invoice formats from different vendors | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> | |
| Ensuring accurate data extraction from poor quality scans | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> | |
| Integrating with existing ERP system | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-xl font-bold mb-4">Results</h4> | |
| <ul class="space-y-3 text-gray-600 dark:text-gray-300"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-chart-line text-blue-500 mt-1 mr-2"></i> | |
| 80% reduction in manual processing time | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-chart-line text-blue-500 mt-1 mr-2"></i> | |
| 95% accuracy in data extraction | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-chart-line text-blue-500 mt-1 mr-2"></i> | |
| Process 500+ invoices daily with minimal human intervention | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="flex flex-wrap gap-4"> | |
| <a href="#" class="px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-medium transition-colors duration-300"> | |
| Request Demo | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Other project modals would follow the same pattern --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-gray-100 dark:bg-gray-800"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">About <span class="text-blue-500">Us</span></h2> | |
| <p class="max-w-2xl mx-auto text-gray-600 dark:text-gray-300"> | |
| We're a team of passionate technologists dedicated to solving business challenges with innovative digital solutions. | |
| </p> | |
| </div> | |
| <div class="flex flex-col lg:flex-row gap-12 mb-20"> | |
| <div class="lg:w-1/2"> | |
| <h3 class="text-2xl font-bold mb-6">Our Story</h3> | |
| <p class="text-gray-600 dark:text-gray-300 mb-6"> | |
| Founded in 2018, VritantaNextGen started as a small web development agency with a vision to bridge the gap between business needs and technological solutions. Over the years, we've expanded our expertise to include intelligent automation, data analytics, and AI solutions. | |
| </p> | |
| <p class="text-gray-600 dark:text-gray-300"> | |
| Today, we're proud to have served over 50 clients across various industries, helping them streamline operations, gain insights from data, and create impactful digital experiences. | |
| </p> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-white dark:bg-gray-700 rounded-xl shadow-md p-6"> | |
| <h3 class="text-2xl font-bold mb-6">Our Timeline</h3> | |
| <div class="relative pl-10"> | |
| <!-- Timeline Item 1 --> | |
| <div class="timeline-item relative pb-8"> | |
| <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm"> | |
| <h4 class="font-bold text-lg mb-2">Company Founded</h4> | |
| <p class="text-gray-600 dark:text-gray-300 text-sm">June 2018</p> | |
| <p class="text-gray-600 dark:text-gray-300 mt-2"> | |
| Started as a web development agency with 3 team members. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Timeline Item 2 --> | |
| <div class="timeline-item relative pb-8"> | |
| <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm"> | |
| <h4 class="font-bold text-lg mb-2">First RPA Project</h4> | |
| <p class="text-gray-600 dark:text-gray-300 text-sm">March 2019</p> | |
| <p class="text-gray-600 dark:text-gray-300 mt-2"> | |
| Implemented our first robotic process automation solution for a logistics client. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Timeline Item 3 --> | |
| <div class="timeline-item relative pb-8"> | |
| <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm"> | |
| <h4 class="font-bold text-lg mb-2">AI Division Launched</h4> | |
| <p class="text-gray-600 dark:text-gray-300 text-sm">January 2021</p> | |
| <p class="text-gray-600 dark:text-gray-300 mt-2"> | |
| Expanded our services to include AI-powered automation solutions. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Timeline Item 4 --> | |
| <div class="timeline-item relative"> | |
| <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm"> | |
| <h4 class="font-bold text-lg mb-2">50+ Clients Served</h4> | |
| <p class="text-gray-600 dark:text-gray-300 text-sm">Present</p> | |
| <p class="text-gray-600 dark:text-gray-300 mt-2"> | |
| Grown to a team of 15 experts serving clients across multiple industries. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Team Section --> | |
| <div class="text-center mb-12"> | |
| <h3 class="text-2xl md:text-3xl font-bold mb-4">Meet Our <span class="text-blue-500">Team</span></h3> | |
| <p class="max-w-2xl mx-auto text-gray-600 dark:text-gray-300"> | |
| Our talented team brings together diverse expertise to deliver exceptional results. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Team Member 1 --> | |
| <div class="bg-white dark:bg-gray-700 rounded-xl shadow-md overflow-hidden card-hover-effect"> | |
| <div class="h-64 bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center relative"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Team Member" class="w-32 h-32 rounded-full border-4 border-white dark:border-gray-700 object-cover"> | |
| </div> | |
| <div class="p-6 text-center"> | |
| <h4 class="text-xl font-bold mb-1">Rajesh Kumar</h4> | |
| <p class="text-blue-500 mb-4">CEO & Founder</p> | |
| <p class="text-gray-600 dark:text-gray-300 text-sm"> | |
| 15+ years of experience in software development and business strategy. | |
| </p> | |
| <div class="flex justify-center space-x-4 mt-4"> | |
| <a href="#" class="text-gray-500 hover:text-blue-500 transition-colors duration-300"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-blue-500 transition-colors duration-300"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Team Member 2 --> | |
| <div class="bg-white dark:bg-gray-700 rounded-xl shadow-md overflow-hidden card-hover-effect"> | |
| <div class="h-64 bg-gradient-to-r from-green-400 to-blue-500 flex items-center justify-center relative"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Team Member" class="w-32 h-32 rounded-full border-4 border-white dark:border-gray-700 object-cover"> | |
| </div> | |
| <div class="p-6 text-center"> | |
| <h4 class="text-xl font-bold mb-1">Priya Sharma</h4> | |
| <p class="text-blue-500 mb-4">CTO</p> | |
| <p class="text-gray-600 dark:text-gray-300 text-sm"> | |
| Expert in AI and automation technologies with a PhD in Computer Science. | |
| </p> | |
| <div class="flex justify-center space-x-4 mt-4"> | |
| <a href="#" class="text-gray-500 hover:text-blue-500 transition-colors duration-300"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-blue-500 transition-colors duration-300"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Team Member 3 --> | |
| <div class="bg-white dark:bg-gray-700 rounded-xl shadow-md overflow-hidden card-hover-effect"> | |
| <div class="h-64 bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center relative"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Team Member" class="w-32 h-32 rounded-full border-4 border-white dark:border-gray-700 object-cover"> | |
| </div> | |
| <div class="p-6 text-center"> | |
| <h4 class="text-xl font-bold mb-1">Amit Patel</h4> | |
| <p class="text-blue-500 mb-4">Head of RPA</p> | |
| <p class="text-gray-600 dark:text-gray-300 text-sm"> | |
| Automation specialist with certifications in UiPath and Automation Anywhere. | |
| </p> | |
| <div class="flex justify-center space-x-4 mt-4"> | |
| <a href="#" class="text-gray-500 hover:text-blue-500 transition-colors duration-300"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Team Member 4 --> | |
| <div class="bg-white dark:bg-gray-700 rounded-xl shadow-md overflow-hidden card-hover-effect"> | |
| <div class="h-64 bg-gradient-to-r from-yellow-400 to-red-500 flex items-center justify-center relative"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Team Member" class="w-32 h-32 rounded-full border-4 border-white dark:border-gray-700 object-cover"> | |
| </div> | |
| <div class="p-6 text-center"> | |
| <h4 class="text-xl font-bold mb-1">Neha Gupta</h4> | |
| <p class="text-blue-500 mb-4">Data Analytics Lead</p> | |
| <p class="text-gray-600 dark:text-gray-300 text-sm"> | |
| Power BI expert with background in business intelligence and data visualization. | |
| </p> | |
| <div class="flex justify-center space-x-4 mt-4"> | |
| <a href="#" class="text-gray-500 hover:text-blue-500 transition-colors duration-300"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-blue-500 transition-colors duration-300"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Blog Section --> | |
| <section id="blog" class="py-20 bg-white dark:bg-gray-900"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Our <span class="text-blue-500">Blog</span></h2> | |
| <p class="max-w-2xl mx-auto text-gray-600 dark:text-gray-300"> | |
| Insights, trends, and best practices in web development, automation, and AI. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12"> | |
| <!-- Blog Post 1 --> | |
| <div class="blog-card bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden"> | |
| <div class="h-48 bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center relative"> | |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Blog Post" class="absolute inset-0 w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-3"> | |
| <span>June 15, 2023</span> | |
| <span class="mx-2">•</span> | |
| <span>5 min read</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">The Future of Web Development in 2023</h3> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4"> | |
| Explore the emerging trends and technologies shaping the future of web development this year. | |
| </p> | |
| <a href="#" class="text-blue-500 font-medium hover:text-blue-600 transition-colors duration-300 inline-flex items-center"> | |
| Read More <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Blog Post 2 --> | |
| <div class="blog-card bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden"> | |
| <div class="h-48 bg-gradient-to-r from-green-400 to-blue-500 flex items-center justify-center relative"> | |
| <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=765&q=80" alt="Blog Post" class="absolute inset-0 w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-3"> | |
| <span>May 28, 2023</span> | |
| <span class="mx-2">•</span> | |
| <span>7 min read</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">How RPA is Transforming Business Operations</h3> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4"> | |
| Discover how robotic process automation is helping businesses achieve unprecedented efficiency. | |
| </p> | |
| <a href="#" class="text-blue-500 font-medium hover:text-blue-600 transition-colors duration-300 inline-flex items-center"> | |
| Read More <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Blog Post 3 --> | |
| <div class="blog-card bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden"> | |
| <div class="h-48 bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center relative"> | |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Blog Post" class="absolute inset-0 w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-3"> | |
| <span>April 12, 2023</span> | |
| <span class="mx-2">•</span> | |
| <span>4 min read</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Power BI vs Tableau: Which is Right for You?</h3> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4"> | |
| A comprehensive comparison of the two leading business intelligence tools to help you choose. | |
| </p> | |
| <a href="#" class="text-blue-500 font-medium hover:text-blue-600 transition-colors duration-300 inline-flex items-center"> | |
| Read More <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <a href="#" class="px-6 py-3 border border-blue-500 text-blue-500 hover:bg-blue-50 dark:hover:bg-gray-800 rounded-lg font-medium transition-colors duration-300 inline-flex items-center"> | |
| View All Posts <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-gray-100 dark:bg-gray-800"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Get In <span class="text-blue-500">Touch</span></h2> | |
| <p class="max-w-2xl mx-auto text-gray-600 dark:text-gray-300"> | |
| Have a project in mind or want to learn more about our services? We'd love to hear from you. | |
| </p> | |
| </div> | |
| <div class="flex flex-col lg:flex-row gap-12"> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-white dark:bg-gray-700 rounded-xl shadow-md p-8 h-full"> | |
| <h3 class="text-2xl font-bold mb-6">Contact Information</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 dark:bg-blue-900 rounded-full w-12 h-12 flex items-center justify-center mr-4"> | |
| <i class="fas fa-map-marker-alt text-blue-500 dark:text-blue-300"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Our Location</h4> | |
| <p class="text-gray-600 dark:text-gray-300">123 Tech Park, Bangalore, India - 560001</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 dark:bg-blue-900 rounded-full w-12 h-12 flex items-center justify-center mr-4"> | |
| <i class="fas fa-envelope text-blue-500 dark:text-blue-300"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Email Us</h4> | |
| <p class="text-gray-600 dark:text-gray-300">info@vritantanextgen.com</p> | |
| <p class="text-gray-600 dark:text-gray-300">support@vritantanextgen.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 dark:bg-blue-900 rounded-full w-12 h-12 flex items-center justify-center mr-4"> | |
| <i class="fas fa-phone-alt text-blue-500 dark:text-blue-300"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Call Us</h4> | |
| <p class="text-gray-600 dark:text-gray-300">+91 9876543210</p> | |
| <p class="text-gray-600 dark:text-gray-300">+91 1234567890</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="font-bold mb-4">Follow Us</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 bg-gray-200 dark:bg-gray-600 rounded-full flex items-center justify-center hover:bg-blue-500 hover:text-white transition-colors duration-300"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-200 dark:bg-gray-600 rounded-full flex items-center justify-center hover:bg-blue-500 hover:text-white transition-colors duration-300"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-200 dark:bg-gray-600 rounded-full flex items-center justify-center hover:bg-blue-500 hover:text-white transition-colors duration-300"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-200 dark:bg-gray-600 rounded-full flex items-center justify-center hover:bg-blue-500 hover:text-white transition-colors duration-300"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-white dark:bg-gray-700 rounded-xl shadow-md p-8 h-full"> | |
| <h3 class="text-2xl font-bold mb-6">Send Us a Message</h3> | |
| <form id="contact-form" class="space-y-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Your Name</label> | |
| <input type="text" id="name" name="name" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white" required> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Your Email</label> | |
| <input type="email" id="email" name="email" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white" required> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="subject" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Subject</label> | |
| <input type="text" id="subject" name="subject" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white" required> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Message</label> | |
| <textarea id="message" name="message" rows="5" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white" required></textarea> | |
| </div> | |
| <button type="submit" class="w-full px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-medium transition-colors duration-300"> | |
| Send Message | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">VritantaNextGen</h3> | |
| <p class="text-gray-400"> | |
| We transform businesses with cutting-edge web development, RPA, and AI automation solutions. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Quick Links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#home" class="text-gray-400 hover:text-white transition-colors duration-300">Home</a></li> | |
| <li><a href="#services" class="text-gray-400 hover:text-white transition-colors duration-300">Services</a></li> | |
| <li><a href="#portfolio" class="text-gray-400 hover:text-white transition-colors duration-300">Portfolio</a></li> | |
| <li><a href="#about" class="text-gray-400 hover:text-white transition-colors duration-300">About</a></li> | |
| <li><a href="#blog" class="text-gray-400 hover:text-white transition-colors duration-300">Blog</a></li> | |
| <li><a href="#contact" class="text-gray-400 hover:text-white transition-colors duration-300">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Services</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Web Development</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Intelligent RPA</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Data Analysis</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">AI Automation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Consulting</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Newsletter</h4> | |
| <p class="text-gray-400 mb-4"> | |
| Subscribe to our newsletter for the latest updates and insights. | |
| </p> | |
| <form class="flex"> | |
| <input type="email" placeholder="Your email" class="px-4 py-2 w-full rounded-l-lg focus:outline-none text-gray-900"> | |
| <button type="submit" class="bg-blue-500 hover:bg-blue-600 px-4 py-2 rounded-r-lg transition-colors duration-300"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0"> | |
| © 2023 VritantaNextGen. All rights reserved. | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Loading Screen | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const loadingScreen = document.querySelector('.loading-screen'); | |
| setTimeout(() => { | |
| loadingScreen.style.opacity = '0'; | |
| setTimeout(() => { | |
| loadingScreen.style.display = 'none'; | |
| }, 500); | |
| }, 1000); | |
| }); | |
| // Dark Mode Toggle | |
| const themeToggle = document.getElementById('theme-toggle'); | |
| const html = document.documentElement; | |
| if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { | |
| html.classList.add('dark'); | |
| } else { | |
| html.classList.remove('dark'); | |
| } | |
| themeToggle.addEventListener('click', function() { | |
| html.classList.toggle('dark'); | |
| localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light'); | |
| }); | |
| // Mobile Menu Toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', function() { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Smooth Scrolling for Anchor Links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| // Custom Cursor | |
| const cursor = document.querySelector('.custom-cursor'); | |
| document.addEventListener('mousemove', (e) => { | |
| cursor.style.left = e.clientX + 'px'; | |
| cursor.style.top = e.clientY + 'px'; | |
| }); | |
| // Add cursor hover effect on interactive elements | |
| const interactiveElements = document.querySelectorAll('a, button, input, .portfolio-item, .service-card, .blog-card, .nav-link'); | |
| interactiveElements.forEach(el => { | |
| el.addEventListener('mouseenter', () => { | |
| cursor.classList.add('cursor-hover'); | |
| }); | |
| el.addEventListener('mouseleave', () => { | |
| cursor.classList.remove('cursor-hover'); | |
| }); | |
| }); | |
| // Portfolio Filter | |
| const portfolioFilters = document.querySelectorAll('.portfolio-filter'); | |
| const portfolioItems = document.querySelectorAll('.portfolio-item'); | |
| portfolioFilters.forEach(filter => { | |
| filter.addEventListener('click', function() { | |
| // Remove active class from all filters | |
| portfolioFilters.forEach(f => f.classList.remove('bg-blue-500', 'text-white')); | |
| // Add active class to clicked filter | |
| this.classList.add('bg-blue-500', 'text-white'); | |
| const filterValue = this.getAttribute('data-filter'); | |
| portfolioItems.forEach(item => { | |
| if (filterValue === 'all' || item.getAttribute('data-category').includes(filterValue)) { | |
| item.style.display = 'block'; | |
| } else { | |
| item.style.display = 'none'; | |
| } | |
| }); | |
| }); | |
| }); | |
| // Project Modals | |
| const viewProjectBtns = document.querySelectorAll('.view-project-btn'); | |
| const projectModal = document.querySelector('.project-modal'); | |
| const closeModalBtn = document.querySelector('.close-modal'); | |
| const projectContents = document.querySelectorAll('.project-content'); | |
| viewProjectBtns.forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| const projectId = this.getAttribute('data-project'); | |
| // Hide all project contents | |
| projectContents.forEach(content => { | |
| content.classList.add('hidden'); | |
| }); | |
| // Show selected project content | |
| document.getElementById(`${projectId}-content`).classList.remove('hidden'); | |
| // Show modal | |
| projectModal.classList.add('active'); | |
| document.body.style.overflow = 'hidden'; | |
| }); | |
| }); | |
| closeModalBtn.addEventListener('click', function() { | |
| projectModal.classList.remove('active'); | |
| document.body.style.overflow = 'auto'; | |
| }); | |
| // Close modal when clicking outside content | |
| projectModal.addEventListener('click', function(e) { | |
| if (e.target === projectModal) { | |
| projectModal.classList.remove('active'); | |
| document.body.style.overflow = 'auto'; | |
| } | |
| }); | |
| // Contact Form Submission | |
| const contactForm = document.getElementById('contact-form'); | |
| contactForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Get form values | |
| const formData = new FormData(this); | |
| const data = Object.fromEntries(formData); | |
| // Here you would typically send the data to your server | |
| console.log('Form submitted:', data); | |
| // Show success message | |
| alert('Thank you for your message! We will get back to you soon.'); | |
| this.reset(); | |
| }); | |
| // Scroll Reveal Animation | |
| const scrollReveal = ScrollReveal({ | |
| origin: 'bottom', | |
| distance: '60px', | |
| duration: 1000, | |
| delay: 200, | |
| reset: true | |
| }); | |
| // Reveal elements | |
| scrollReveal.reveal('.service-card, .portfolio-item, .blog-card', { interval: 200 }); | |
| scrollReveal.reveal('.timeline-item', { interval: 200, origin: 'left' }); | |
| }); | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=SharmaAmit1818/s" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> | |