-
-
-
- Get started by editing{" "}
-
- src/app/page.tsx -- . -
- - - Save and see your changes instantly. - -
+ {/* Title */}
+
+ );
+};
+
+export default BenefitsSection;
\ No newline at end of file
diff --git a/src/components/Home/BottomFeaturesSection.tsx b/src/components/Home/BottomFeaturesSection.tsx
new file mode 100644
index 0000000..99cf33c
--- /dev/null
+++ b/src/components/Home/BottomFeaturesSection.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+// Bottom Features Component (No Cards)
+const BottomFeaturesSection = () => {
+ return (
+
+
+
+ + Benefits +
+
+ {benefits.map((benefit, index) => (
+
+
+
+ ))}
+
+
+ + {benefit.title} +
++ {benefit.description} +
+
+
+
+
+
+
+
+ Free Trials
+30+ featured cloud products
+
+
+
+ Cloud Data Center
+Accelerate asset cloud adoption
+
+
+
+ 3engine Cloud
+Everything as a Service
+
+
+ Developer Center
+Creating a thriving ecosystem
+
+ {/* Background decorative elements */}
+
+ );
+};
+
+export default CTABanner;
\ No newline at end of file
diff --git a/src/components/Home/HeroSection.tsx b/src/components/Home/HeroSection.tsx
new file mode 100644
index 0000000..909bf55
--- /dev/null
+++ b/src/components/Home/HeroSection.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { ArrowRight, Cloud, Database, Code, Gift } from 'lucide-react';
+
+const HeroSection = () => {
+ return (
+ <>
+ {/* Hero Section */}
+
+
+
+
+
+
+ {/* Main content */}
+
+
+
+ {/* Additional decorative gradient overlay */}
+
+
+ {/* Main heading */}
+
+ + Ready to get started? +
+ + {/* Subheading */} ++ Create an account and launch your services in minutes +
+ + {/* Credit offer text */} ++ Get ₹18,000 in free credit to launch your first Public Cloud project +
+ + {/* CTA Button */} + +
+ {/* Overlay for better text readability */}
+
+
+
+
+
+
+ {/* Left-Aligned Content */}
+
+
+
+
+
+
+
+ + Try DeepSeek Today +
++ 3Engine Cloud Flexus X Instance makes AI easy +
+
+
+ );
+};
+
+export default PublicCloudInfoSection;
\ No newline at end of file
diff --git a/src/components/Home/ServicesSection.tsx b/src/components/Home/ServicesSection.tsx
new file mode 100644
index 0000000..b3353ce
--- /dev/null
+++ b/src/components/Home/ServicesSection.tsx
@@ -0,0 +1,360 @@
+"use client"
+import React, { useState } from 'react';
+import {
+ Cloud,
+ Database,
+ HardDrive,
+ Network,
+ Brain,
+ BarChart,
+ Shield,
+ Layers,
+ FolderOpen,
+ Zap,
+ Hexagon,
+ Server,
+ Monitor,
+ Cpu,
+ Globe,
+ Lock
+} from 'lucide-react';
+
+interface Service {
+ icon: React.ReactNode;
+ title: string;
+ description: string;
+ color: string;
+}
+
+interface ServiceCategory {
+ [key: string]: Service[];
+}
+
+const ServicesSection: React.FC = () => {
+ const [activeTab, setActiveTab] = useState('Featured');
+
+ const tabs = [
+ 'Featured',
+ 'Compute',
+ 'Storage',
+ 'Networking',
+ 'Databases'
+ ];
+
+ const services: ServiceCategory = {
+ Featured: [
+ {
+ icon:
+ {/* Main heading */}
+
+ + Why choose Public Cloud instances? +
+ + {/* Three column grid */} +
+ {/* Column 1 - Launch your project */}
+
+
+ {/* Second row of content */}
+
+
+
+ {/* Column 2 - IaaS, PaaS, SaaS */}
+ + Launch your project in no time +
++ Public cloud instances (virtual servers) offer both flexibility and speed. In under a minute, you get CPU, RAM and storage, without over-allocating resources, as well as root access. The 3engines Public Cloud offers hourly billing, along with a transparent pricing model. The ability to add resources without having to reinstall. With the OpenStack API, you can automate your infrastructure. +
+
+
+
+ {/* Column 3 - High availability */}
+ + IaaS, PaaS +
++ There are different types of cloud models available, depending on your needs. Here, we find: +
+-
+
- + → + Infrastructure as a Service (IaaS), which you can benefit from without needing hardware. + +
- + → + Platform as a Service (PaaS), which lets you focus on installing and running your applications. + + +
+ 3engines is focused on providing IaaS and PaaS solutions. +
+
+
+ + High availability, simplicity, flexibility, and reversibility +
++ Our Public Cloud is hosted in our datacentres, on servers assembled by our team. This empowers us to improve our performance and maintain control over our production chain, from manufacturing to launch. Public Cloud is easy to use, so feel free to manage it however you want. You can adapt it to your specific needs, thanks to its flexibility. What's more, because we use standard APIs, your data is reversible. Lastly, our cloud is also interoperable. +
+
+ {/* How does Public Cloud work? */}
+
+
+
+
+ {/* Who maintains the infrastructure? */}
+ + How does Public Cloud work? +
++ Public cloud is a model for deploying cloud computing services. Everything is shared—including resources, such as computing power or storage, as well as the physical infrastructure that supports them. Unlike the private cloud, where all physical resources are dedicated to each customer, they are shared between the provider's users in the public cloud. +
+
+
+
+ {/* Where is 3engines Public Cloud deployed? */}
+ + Who maintains the infrastructure? +
++ Like other types of cloud solutions, 3engines maintains the physical servers and network, and manages the virtualisation layer. This means we can manage resource allocation, and ensure that our customers' services are isolated. Automation is one of the cornerstones of Public Cloud. You can deploy instances (virtual machines) in a datacentre of your choice, via the 3engines Control Panel or API, with guaranteed resources in terms of storage capacity and computing power. +
+
+
+ + Where is 3engines Public Cloud deployed? +
++ You can find all of 3engines's infrastructure locations in India. +
+
+ {/* Title */}
+
+
+
+
+ {/* Tabs */}
+ Products and services
+
+
+
+ {/* Service Cards */}
+
+ {tabs.map((tab) => (
+
+ ))}
+
+
+
+ {services[activeTab]?.map((service, index) => (
+
+
+ {/* Show message if no services for selected tab */}
+ {(!services[activeTab] || services[activeTab].length === 0) && (
+
+
+ ))}
+
+
+
+ {service.icon}
+
+
+
+ + {service.title} +
++ {service.description} +
+
+
+ )}
+ No services available for this category.
+
+ {/* Title */}
+
+
+
+
+ {/* Tabs */}
+ + Solutions for Unleashing Digital and Powering Innovation +
+
+
+
+ {/* Carousel */}
+
+ {tabs.map((tab) => (
+
+ ))}
+
+
+ {currentSolutions.length > 0 && (
+
+
+ {/* Background Image */}
+
+ )}
+
+ {/* Empty State */}
+ {currentSolutions.length === 0 && (
+
+ {/* Overlay */}
+
+
+
+ {/* Content */}
+
+
+
+ {/* Navigation Arrows */}
+ {currentSolutions.length > 1 && (
+ <>
+
+
+
+ )}
+
+ {/* Dots Indicator */}
+ {currentSolutions.length > 1 && (
+
+
+ + {currentSolutions[currentSlide]?.title} +
++ {currentSolutions[currentSlide]?.description} +
+ +
+ {currentSolutions.map((_, index) => (
+
+ )}
+
+
+ )}
+ No solutions available for this category
+
+
+
+ {/* Mobile menu - you can expand this later */}
+
+ {/* Left side - Logo and main navigation */}
+
+
+ {/* Logo */}
+
+ 
+
+
+ {/* Main Navigation - Left side */}
+
+
+
+ {/* Right side navigation */}
+
+
+
+ {/* Main Navigation - Left side */}
+
+
+
+ Partners
+
+
+ Documentation
+
+
+
+ Console
+
+
+ SignUp
+
+
+
+ {/* Mobile menu button */}
+
+
+
+
+
+
+
+ Home
+
+
+ Products
+
+
+ Solution
+
+
+ Partners
+
+
+ Documentation
+
+
+ Console
+
+
+ SignUp
+
+
+