first commit
This commit is contained in:
mukesh13
23
Dockerfile
Normal file
23
Dockerfile
Normal file
@ -0,0 +1,23 @@
|
||||
# Use the official Node.js 20 image as the base
|
||||
FROM node:20-alpine
|
||||
|
||||
# Set working directory
|
||||
WORKDIR /app
|
||||
|
||||
# Copy package.json and package.lock.json
|
||||
COPY package*.json ./
|
||||
|
||||
# Install dependencies
|
||||
RUN npm install
|
||||
|
||||
# Copy the rest of the application code
|
||||
COPY . .
|
||||
|
||||
# Build the Next.js application
|
||||
RUN npm run build
|
||||
|
||||
# Expose port 3000
|
||||
EXPOSE 3000
|
||||
|
||||
# Start the application
|
||||
CMD ["npm", "start"]
|
||||
15
docker-compose.yml
Normal file
15
docker-compose.yml
Normal file
@ -0,0 +1,15 @@
|
||||
version: '3.8'
|
||||
|
||||
services:
|
||||
web:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: Dockerfile
|
||||
ports:
|
||||
- "8086:3000"
|
||||
environment:
|
||||
- NODE_ENV=production
|
||||
volumes:
|
||||
- .:/app
|
||||
- /app/node_modules
|
||||
restart: unless-stopped
|
||||
10
package-lock.json
generated
10
package-lock.json
generated
@ -8,6 +8,7 @@
|
||||
"name": "3engines",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"lucide-react": "^0.523.0",
|
||||
"next": "15.3.4",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0"
|
||||
@ -4513,6 +4514,15 @@
|
||||
"loose-envify": "cli.js"
|
||||
}
|
||||
},
|
||||
"node_modules/lucide-react": {
|
||||
"version": "0.523.0",
|
||||
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.523.0.tgz",
|
||||
"integrity": "sha512-rUjQoy7egZT9XYVXBK1je9ckBnNp7qzRZOhLQx5RcEp2dCGlXo+mv6vf7Am4LimEcFBJIIZzSGfgTqc9QCrPSw==",
|
||||
"license": "ISC",
|
||||
"peerDependencies": {
|
||||
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/magic-string": {
|
||||
"version": "0.30.17",
|
||||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
|
||||
|
||||
13
package.json
13
package.json
@ -9,19 +9,20 @@
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"lucide-react": "^0.523.0",
|
||||
"next": "15.3.4",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"next": "15.3.4"
|
||||
"react-dom": "^19.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5",
|
||||
"@eslint/eslintrc": "^3",
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"tailwindcss": "^4",
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "15.3.4",
|
||||
"@eslint/eslintrc": "^3"
|
||||
"tailwindcss": "^4",
|
||||
"typescript": "^5"
|
||||
}
|
||||
}
|
||||
|
||||
BIN
public/images/ecommerce-bg.jpg
Normal file
BIN
public/images/ecommerce-bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 MiB |
BIN
public/images/hero.jpg
Normal file
BIN
public/images/hero.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 215 KiB |
25
public/images/logo-splash.svg
Normal file
25
public/images/logo-splash.svg
Normal file
@ -0,0 +1,25 @@
|
||||
<svg viewBox="0 0 586.65576 283.09213" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Cloud shapes scaled up -->
|
||||
<path d="M70 140 Q90 100 130 100 Q170 100 190 125 Q210 100 250 100 Q290 100 310 140 Q330 180 290 210 Q250 240 190 210 Q130 240 90 210 Q50 180 70 140"
|
||||
fill="#C8E6FF" opacity="0.3"/>
|
||||
|
||||
<!-- OpenStack-style hexagons -->
|
||||
<g transform="translate(480,140) scale(0.8)">
|
||||
<path d="M0,-60 L52,-30 L52,30 L0,60 L-52,30 L-52,-30 Z" fill="#ED1944" opacity="0.8">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="10s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
|
||||
<!-- Main text centered and scaled -->
|
||||
<text x="293" y="160" font-family="Arial Black, sans-serif" font-size="80" text-anchor="middle">
|
||||
<tspan fill="#ED1944">3</tspan>
|
||||
<tspan fill="#2A4E68">engines</tspan>
|
||||
</text>
|
||||
|
||||
<!-- Underline with gradient -->
|
||||
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#ED1944"/>
|
||||
<stop offset="100%" style="stop-color:#2A4E68"/>
|
||||
</linearGradient>
|
||||
<path d="M150 180 Q293 190 436 180" stroke="url(#gradient)" stroke-width="5" fill="none"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
30
public/images/logo-white.svg
Normal file
30
public/images/logo-white.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 48 KiB |
121
src/app/page.tsx
121
src/app/page.tsx
@ -1,103 +1,36 @@
|
||||
import Image from "next/image";
|
||||
import type { Metadata } from 'next'
|
||||
import Header from "@/components/Layout/Header";
|
||||
import Footer from "@/components/Layout/Footer";
|
||||
import HeroSection from "@/components/Home/HeroSection";
|
||||
import ServicesSection from "@/components/Home/ServicesSection";
|
||||
import SolutionsCarousel from "@/components/Home/SolutionsCarousel";
|
||||
import BenefitsSection from "@/components/Home/BenefitsSection";
|
||||
import CTABanner from "@/components/Home/CTABanner";
|
||||
import PublicCloudInfoSection from "@/components/Home/PublicCloudInfoSection";
|
||||
import BottomFeaturesSection from "@/components/Home/BottomFeaturesSection";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: '3engines',
|
||||
description: 'Cloud services and solutions',
|
||||
}
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
|
||||
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={180}
|
||||
height={38}
|
||||
priority
|
||||
/>
|
||||
<ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
|
||||
<li className="mb-2 tracking-[-.01em]">
|
||||
Get started by editing{" "}
|
||||
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
|
||||
src/app/page.tsx
|
||||
</code>
|
||||
.
|
||||
</li>
|
||||
<li className="tracking-[-.01em]">
|
||||
Save and see your changes instantly.
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<div className="flex gap-4 items-center flex-col sm:flex-row">
|
||||
<a
|
||||
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
Deploy now
|
||||
</a>
|
||||
<a
|
||||
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Read our docs
|
||||
</a>
|
||||
<div className="min-h-screen bg-white">
|
||||
<div className="fixed top-0 left-0 right-0 z-50">
|
||||
<Header />
|
||||
</div>
|
||||
<main className="pt-[60px] sm:pt-[65px] md:pt-[60px]">
|
||||
<HeroSection/>
|
||||
<BottomFeaturesSection/>
|
||||
<ServicesSection/>
|
||||
<SolutionsCarousel/>
|
||||
<BenefitsSection/>
|
||||
<CTABanner/>
|
||||
<PublicCloudInfoSection/>
|
||||
</main>
|
||||
<footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/file.svg"
|
||||
alt="File icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Learn
|
||||
</a>
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/window.svg"
|
||||
alt="Window icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Examples
|
||||
</a>
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/globe.svg"
|
||||
alt="Globe icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Go to nextjs.org →
|
||||
</a>
|
||||
</footer>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
61
src/components/Home/BenefitsSection.tsx
Normal file
61
src/components/Home/BenefitsSection.tsx
Normal file
@ -0,0 +1,61 @@
|
||||
import React from 'react';
|
||||
|
||||
const BenefitsSection = () => {
|
||||
const benefits = [
|
||||
{
|
||||
title: "Flexibility and scalability",
|
||||
description: "Automated and infrastructure and our managed container and orchestration services, you can add and delete resources directly via the 3engines Control Panel, or via API."
|
||||
},
|
||||
{
|
||||
title: "Predictable costs and transparent billing",
|
||||
description: "Only pay for what you use. API callback network traffic are included. If you're opting for a long-term subscription, then there is a great way to save money."
|
||||
},
|
||||
{
|
||||
title: "Interoperability and standardisation",
|
||||
description: "Feel free to mix and match various cloud technologies to suit your needs. Based on open-source standards such as OpenStack, Kubernetes or Docker, our cloud is interoperable and helps you avoid vendor lock."
|
||||
},
|
||||
{
|
||||
title: "Resilience for your critical applications",
|
||||
description: "We're always working to provide you with cloud solutions designed to a 24/7 SLA, opening that means the highest standards of availability and reliability, with the best price-performance ratio."
|
||||
},
|
||||
{
|
||||
title: "Data residency",
|
||||
description: "Get your data as close to your users as possible by deploying in our Local Zones."
|
||||
},
|
||||
{
|
||||
title: "Sovereignty and security of your data",
|
||||
description: "Regardless of where you choose to deploy it, your data stays your data. Most of our Cloud services are already certified with the highest standards of security and compliance."
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 py-12">
|
||||
{/* Title */}
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-4xl font-bold text-gray-700 max-w-4xl mx-auto leading-tight">
|
||||
Benefits
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{benefits.map((benefit, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-white rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 p-6 border border-gray-100"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold text-blue-900 leading-tight">
|
||||
{benefit.title}
|
||||
</h3>
|
||||
<p className="text-gray-600 text-sm leading-relaxed">
|
||||
{benefit.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BenefitsSection;
|
||||
34
src/components/Home/BottomFeaturesSection.tsx
Normal file
34
src/components/Home/BottomFeaturesSection.tsx
Normal file
@ -0,0 +1,34 @@
|
||||
import React from 'react';
|
||||
|
||||
// Bottom Features Component (No Cards)
|
||||
const BottomFeaturesSection = () => {
|
||||
return (
|
||||
<section className="py-16 bg-gray-50">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<div className="text-center space-y-2">
|
||||
<h3 className="text-lg font-semibold text-gray-700">Free Trials</h3>
|
||||
<p className="text-sm text-gray-600">30+ featured cloud products</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center space-y-2">
|
||||
<h3 className="text-lg font-semibold text-gray-700">Cloud Data Center</h3>
|
||||
<p className="text-sm text-gray-600">Accelerate asset cloud adoption</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center space-y-2">
|
||||
<h3 className="text-lg font-semibold text-gray-700">3engine Cloud</h3>
|
||||
<p className="text-sm text-gray-600">Everything as a Service</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center space-y-2">
|
||||
<h3 className="text-lg font-semibold text-gray-700">Developer Center</h3>
|
||||
<p className="text-sm text-gray-600">Creating a thriving ecosystem</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default BottomFeaturesSection;
|
||||
44
src/components/Home/CTABanner.tsx
Normal file
44
src/components/Home/CTABanner.tsx
Normal file
@ -0,0 +1,44 @@
|
||||
import React from 'react';
|
||||
|
||||
const CTABanner = () => {
|
||||
return (
|
||||
<div className="relative max-w-7xl mx-auto rounded-2xl bg-gradient-to-r from-blue-600 via-blue-500 to-cyan-400 overflow-hidden">
|
||||
{/* Background decorative elements */}
|
||||
<div className="absolute inset-0">
|
||||
<div className="absolute top-0 left-0 w-64 h-64 bg-blue-400 rounded-full opacity-20 -translate-x-32 -translate-y-32"></div>
|
||||
<div className="absolute bottom-0 right-0 w-96 h-96 bg-cyan-300 rounded-full opacity-20 translate-x-48 translate-y-48"></div>
|
||||
<div className="absolute top-1/2 right-1/4 w-32 h-32 bg-blue-300 rounded-full opacity-30"></div>
|
||||
</div>
|
||||
|
||||
{/* Main content */}
|
||||
<div className="relative z-10 px-6 py-16 text-center">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* Main heading */}
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-white mb-4">
|
||||
Ready to get started?
|
||||
</h1>
|
||||
|
||||
{/* Subheading */}
|
||||
<p className="text-xl md:text-2xl text-white mb-3 font-medium">
|
||||
Create an account and launch your services in minutes
|
||||
</p>
|
||||
|
||||
{/* Credit offer text */}
|
||||
<p className="text-lg text-white/90 mb-8">
|
||||
Get ₹18,000 in free credit to launch your first Public Cloud project
|
||||
</p>
|
||||
|
||||
{/* CTA Button */}
|
||||
<button className="bg-white text-blue-600 px-8 py-3 rounded-md font-semibold text-lg hover:bg-gray-50 transition-colors duration-200 shadow-lg hover:shadow-xl transform hover:scale-105 transition-transform">
|
||||
Get started now
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Additional decorative gradient overlay */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-blue-600/20 via-transparent to-cyan-400/20 pointer-events-none"></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CTABanner;
|
||||
47
src/components/Home/HeroSection.tsx
Normal file
47
src/components/Home/HeroSection.tsx
Normal file
@ -0,0 +1,47 @@
|
||||
import React from 'react';
|
||||
import { ArrowRight, Cloud, Database, Code, Gift } from 'lucide-react';
|
||||
|
||||
const HeroSection = () => {
|
||||
return (
|
||||
<>
|
||||
{/* Hero Section */}
|
||||
<section className="relative min-h-screen overflow-hidden">
|
||||
{/* Background Image */}
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
||||
style={{
|
||||
backgroundImage: "url('/images/hero.jpg')" // Replace with your image path
|
||||
}}
|
||||
>
|
||||
{/* Overlay for better text readability */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-white/90 via-blue-50/80 to-purple-100/70"></div>
|
||||
</div>
|
||||
|
||||
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-20 lg:pt-32">
|
||||
<div className="flex items-center min-h-[70vh]">
|
||||
{/* Left-Aligned Content */}
|
||||
<div className="space-y-8 max-w-4xl">
|
||||
<div className="space-y-4">
|
||||
<h1 className="text-6xl lg:text-7xl font-bold text-gray-700 leading-tight">
|
||||
Try <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600">DeepSeek</span> Today
|
||||
</h1>
|
||||
<p className="text-2xl text-gray-600 max-w-2xl">
|
||||
3Engine Cloud Flexus X Instance makes AI easy
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button className="group inline-flex items-center space-x-2 bg-white hover:bg-gray-50 text-gray-800 px-10 py-5 rounded-full border border-gray-300 shadow-sm hover:shadow-md transition-all duration-300 text-lg font-medium">
|
||||
<span>Learn More</span>
|
||||
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeroSection;
|
||||
96
src/components/Home/PublicCloudInfoSection.tsx
Normal file
96
src/components/Home/PublicCloudInfoSection.tsx
Normal file
@ -0,0 +1,96 @@
|
||||
import React from 'react';
|
||||
|
||||
const PublicCloudInfoSection = () => {
|
||||
return (
|
||||
<div className="bg-gray-50 py-16 px-6">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* Main heading */}
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-gray-700 mb-12 text-center">
|
||||
Why choose Public Cloud instances?
|
||||
</h2>
|
||||
|
||||
{/* Three column grid */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16">
|
||||
{/* Column 1 - Launch your project */}
|
||||
<div className="bg-white p-8 rounded-lg shadow-sm">
|
||||
<h3 className="text-xl font-semibold text-gray-700 mb-4">
|
||||
Launch your project in no time
|
||||
</h3>
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Column 2 - IaaS, PaaS, SaaS */}
|
||||
<div className="bg-white p-8 rounded-lg shadow-sm">
|
||||
<h3 className="text-xl font-semibold text-gray-700 mb-4">
|
||||
IaaS, PaaS
|
||||
</h3>
|
||||
<p className="text-gray-700 leading-relaxed mb-4">
|
||||
There are different types of cloud models available, depending on your needs. Here, we find:
|
||||
</p>
|
||||
<ul className="space-y-3 text-gray-700">
|
||||
<li className="flex items-start">
|
||||
<span className="text-blue-600 mr-2">→</span>
|
||||
<span><strong className="text-blue-600">Infrastructure as a Service (IaaS)</strong>, which you can benefit from without needing hardware.</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="text-blue-600 mr-2">→</span>
|
||||
<span><strong className="text-blue-600">Platform as a Service (PaaS)</strong>, which lets you focus on installing and running your applications.</span>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<p className="text-gray-700 mt-4 text-sm">
|
||||
3engines is focused on providing IaaS and PaaS solutions.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Column 3 - High availability */}
|
||||
<div className="bg-white p-8 rounded-lg shadow-sm">
|
||||
<h3 className="text-xl font-semibold text-gray-700 mb-4">
|
||||
High availability, simplicity, flexibility, and reversibility
|
||||
</h3>
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
Our <strong className="text-blue-600">Public Cloud is hosted in our datacentres</strong>, 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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Second row of content */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* How does Public Cloud work? */}
|
||||
<div className="bg-white p-8 rounded-lg shadow-sm">
|
||||
<h3 className="text-xl font-semibold text-gray-700 mb-4">
|
||||
How does Public Cloud work?
|
||||
</h3>
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
Public cloud is a model for deploying <strong className="text-blue-600">cloud computing services</strong>. 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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Who maintains the infrastructure? */}
|
||||
<div className="bg-white p-8 rounded-lg shadow-sm">
|
||||
<h3 className="text-xl font-semibold text-gray-700 mb-4">
|
||||
Who maintains the infrastructure?
|
||||
</h3>
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Where is 3engines Public Cloud deployed? */}
|
||||
<div className="bg-white p-8 rounded-lg shadow-sm">
|
||||
<h3 className="text-xl font-semibold text-gray-700 mb-4">
|
||||
Where is 3engines Public Cloud deployed?
|
||||
</h3>
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
You can find all of 3engines's infrastructure locations in India.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PublicCloudInfoSection;
|
||||
360
src/components/Home/ServicesSection.tsx
Normal file
360
src/components/Home/ServicesSection.tsx
Normal file
@ -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: <Server className="w-8 h-8 text-white" />,
|
||||
title: 'Elastic Cloud Server (ECS)',
|
||||
description: 'Get your own secure, scalable virtual servers in the cloud',
|
||||
color: 'bg-blue-500'
|
||||
},
|
||||
{
|
||||
icon: <Cloud className="w-8 h-8 text-white" />,
|
||||
title: 'Object Storage Service (OBS)',
|
||||
description: 'Take advantage of infinitely scalable, durable, and secure object storage',
|
||||
color: 'bg-green-500'
|
||||
},
|
||||
{
|
||||
icon: <Network className="w-8 h-8 text-white" />,
|
||||
title: 'Virtual Private Cloud (VPC)',
|
||||
description: 'Guard your system with isolated, private networks',
|
||||
color: 'bg-purple-500'
|
||||
},
|
||||
{
|
||||
icon: <Database className="w-8 h-8 text-white" />,
|
||||
title: 'RDS for MySQL',
|
||||
description: 'Power your LAMP stack with this popular, open-source database',
|
||||
color: 'bg-orange-500'
|
||||
},
|
||||
{
|
||||
icon: <Monitor className="w-8 h-8 text-white" />,
|
||||
title: 'Bare Metal Server (BMS)',
|
||||
description: 'Run services on dedicated, powerful physical servers',
|
||||
color: 'bg-red-500'
|
||||
},
|
||||
{
|
||||
icon: <HardDrive className="w-8 h-8 text-white" />,
|
||||
title: 'Elastic Volume Service (EVS)',
|
||||
description: 'Give your servers persistent block storage',
|
||||
color: 'bg-indigo-500'
|
||||
},
|
||||
{
|
||||
icon: <Shield className="w-8 h-8 text-white" />,
|
||||
title: 'Virtual Private Network (VPN)',
|
||||
description: 'Connect your local data center to the cloud through secure and reliable IPsec connections',
|
||||
color: 'bg-teal-500'
|
||||
},
|
||||
{
|
||||
icon: <Database className="w-8 h-8 text-white" />,
|
||||
title: 'TaurusDB',
|
||||
description: 'A MySQL-compatible enterprise-grade database',
|
||||
color: 'bg-pink-500'
|
||||
}
|
||||
],
|
||||
Compute: [
|
||||
{
|
||||
icon: <Server className="w-8 h-8 text-white" />,
|
||||
title: 'Elastic Cloud Server (ECS)',
|
||||
description: 'Get your own secure, scalable virtual servers in the cloud',
|
||||
color: 'bg-blue-500'
|
||||
},
|
||||
{
|
||||
icon: <Monitor className="w-8 h-8 text-white" />,
|
||||
title: 'Bare Metal Server (BMS)',
|
||||
description: 'Run services on dedicated, powerful physical servers',
|
||||
color: 'bg-red-500'
|
||||
},
|
||||
{
|
||||
icon: <Zap className="w-8 h-8 text-white" />,
|
||||
title: '3engines Cloud Flexus',
|
||||
description: 'Next-generation products with transcendent performance and experience',
|
||||
color: 'bg-yellow-500'
|
||||
},
|
||||
{
|
||||
icon: <BarChart className="w-8 h-8 text-white" />,
|
||||
title: 'Auto Scaling',
|
||||
description: 'Adapt compute resources to changing demand',
|
||||
color: 'bg-green-500'
|
||||
},
|
||||
{
|
||||
icon: <Layers className="w-8 h-8 text-white" />,
|
||||
title: 'Image Management Service (IMS)',
|
||||
description: 'Create and deploy servers faster with images',
|
||||
color: 'bg-purple-500'
|
||||
},
|
||||
{
|
||||
icon: <Brain className="w-8 h-8 text-white" />,
|
||||
title: 'FunctionGraph',
|
||||
description: 'Run your code without provisioning or managing servers',
|
||||
color: 'bg-orange-500'
|
||||
},
|
||||
{
|
||||
icon: <Hexagon className="w-8 h-8 text-white" />,
|
||||
title: 'Dedicated Computing Cluster (DCC)',
|
||||
description: 'Physically isolate compute resource pools for your workloads',
|
||||
color: 'bg-indigo-500'
|
||||
},
|
||||
{
|
||||
icon: <Cpu className="w-8 h-8 text-white" />,
|
||||
title: 'GPU Accelerated Cloud Server (GACS)',
|
||||
description: 'Get servers with excellent floating-point performance',
|
||||
color: 'bg-teal-500'
|
||||
}
|
||||
],
|
||||
Storage: [
|
||||
{
|
||||
icon: <Cloud className="w-8 h-8 text-white" />,
|
||||
title: 'Object Storage Service (OBS)',
|
||||
description: 'Take advantage of infinitely scalable, durable, and secure object storage',
|
||||
color: 'bg-green-500'
|
||||
},
|
||||
{
|
||||
icon: <Shield className="w-8 h-8 text-white" />,
|
||||
title: 'Storage Disaster Recovery Service (SDRS)',
|
||||
description: 'Enjoy cross-AZ, zero-RPO data protection for your ECSs',
|
||||
color: 'bg-blue-500'
|
||||
},
|
||||
{
|
||||
icon: <HardDrive className="w-8 h-8 text-white" />,
|
||||
title: 'Elastic Volume Service (EVS)',
|
||||
description: 'Give your servers persistent block storage',
|
||||
color: 'bg-orange-500'
|
||||
},
|
||||
{
|
||||
icon: <Database className="w-8 h-8 text-white" />,
|
||||
title: 'Cloud Backup and Recovery (CBR)',
|
||||
description: 'Centrally manage backups of your cloud and on-premises resources',
|
||||
color: 'bg-purple-500'
|
||||
},
|
||||
{
|
||||
icon: <FolderOpen className="w-8 h-8 text-white" />,
|
||||
title: 'Scalable File Service (SFS)',
|
||||
description: 'Enjoy fully hosted NAS file systems',
|
||||
color: 'bg-yellow-500'
|
||||
},
|
||||
{
|
||||
icon: <Zap className="w-8 h-8 text-white" />,
|
||||
title: 'Data Express Service (DES)',
|
||||
description: 'Transmit massive volumes of data safely and quickly to 3engines Cloud',
|
||||
color: 'bg-red-500'
|
||||
},
|
||||
{
|
||||
icon: <Hexagon className="w-8 h-8 text-white" />,
|
||||
title: 'Dedicated Distributed Storage Service (DSS)',
|
||||
description: 'Get dedicated, physical block storage',
|
||||
color: 'bg-indigo-500'
|
||||
},
|
||||
{
|
||||
icon: <Server className="w-8 h-8 text-white" />,
|
||||
title: 'Cloud Server Backup Service (CSBS)',
|
||||
description: 'Consistently back up disks on your cloud servers',
|
||||
color: 'bg-teal-500'
|
||||
}
|
||||
],
|
||||
Networking: [
|
||||
{
|
||||
icon: <Network className="w-8 h-8 text-white" />,
|
||||
title: 'Virtual Private Cloud (VPC)',
|
||||
description: 'Guard your system with isolated, private networks',
|
||||
color: 'bg-blue-500'
|
||||
},
|
||||
{
|
||||
icon: <Shield className="w-8 h-8 text-white" />,
|
||||
title: 'Virtual Private Network (VPN)',
|
||||
description: 'Connect your local data center to the cloud through secure and reliable IPsec connections',
|
||||
color: 'bg-green-500'
|
||||
},
|
||||
{
|
||||
icon: <Globe className="w-8 h-8 text-white" />,
|
||||
title: 'Cloud Connect',
|
||||
description: 'Connect VPCs across regions',
|
||||
color: 'bg-purple-500'
|
||||
},
|
||||
{
|
||||
icon: <Network className="w-8 h-8 text-white" />,
|
||||
title: 'Elastic IP (EIP)',
|
||||
description: 'Create highly available systems with static public IP addresses',
|
||||
color: 'bg-orange-500'
|
||||
},
|
||||
{
|
||||
icon: <BarChart className="w-8 h-8 text-white" />,
|
||||
title: 'Elastic Load Balance (ELB)',
|
||||
description: 'Distribute incoming traffic across multiple backend servers',
|
||||
color: 'bg-red-500'
|
||||
},
|
||||
{
|
||||
icon: <Network className="w-8 h-8 text-white" />,
|
||||
title: 'NAT Gateway',
|
||||
description: 'Enable network address translation for cloud and on-premises servers',
|
||||
color: 'bg-yellow-500'
|
||||
},
|
||||
{
|
||||
icon: <Zap className="w-8 h-8 text-white" />,
|
||||
title: 'Direct Connect',
|
||||
description: 'Establish dedicated network connections to 3engines Cloud',
|
||||
color: 'bg-indigo-500'
|
||||
},
|
||||
{
|
||||
icon: <Layers className="w-8 h-8 text-white" />,
|
||||
title: 'Enterprise Switch (ESW)',
|
||||
description: 'Connect cloud and on-premises networks at Layer 2',
|
||||
color: 'bg-teal-500'
|
||||
}
|
||||
],
|
||||
Databases: [
|
||||
{
|
||||
icon: <Database className="w-8 h-8 text-white" />,
|
||||
title: 'RDS for MySQL',
|
||||
description: 'Power your LAMP stack with this popular, open-source database',
|
||||
color: 'bg-blue-500'
|
||||
},
|
||||
{
|
||||
icon: <Database className="w-8 h-8 text-white" />,
|
||||
title: 'TaurusDB',
|
||||
description: 'A MySQL-compatible enterprise-grade database',
|
||||
color: 'bg-green-500'
|
||||
},
|
||||
{
|
||||
icon: <Database className="w-8 h-8 text-white" />,
|
||||
title: 'GaussDB',
|
||||
description: 'An enterprise-grade, distributed relational database',
|
||||
color: 'bg-purple-500'
|
||||
},
|
||||
{
|
||||
icon: <Database className="w-8 h-8 text-white" />,
|
||||
title: 'Document Database Service (DDS)',
|
||||
description: 'A MongoDB-compatible document database deployed in a cluster, replica set, or single node',
|
||||
color: 'bg-orange-500'
|
||||
},
|
||||
{
|
||||
icon: <Database className="w-8 h-8 text-white" />,
|
||||
title: 'RDS for PostgreSQL',
|
||||
description: 'An open-source database that ensures data reliability and integrity',
|
||||
color: 'bg-red-500'
|
||||
},
|
||||
{
|
||||
icon: <Database className="w-8 h-8 text-white" />,
|
||||
title: 'GeminiDB',
|
||||
description: 'A multi-model NoSQL database compatible with Redis, Mongo, and more',
|
||||
color: 'bg-yellow-500'
|
||||
},
|
||||
{
|
||||
icon: <Zap className="w-8 h-8 text-white" />,
|
||||
title: 'Data Replication Service (DRS)',
|
||||
description: 'Migrate your databases with minimal downtime',
|
||||
color: 'bg-indigo-500'
|
||||
},
|
||||
{
|
||||
icon: <Layers className="w-8 h-8 text-white" />,
|
||||
title: 'Distributed Database Middleware (DDM)',
|
||||
description: 'Scale out resources to handle massive volumes of concurrent requests',
|
||||
color: 'bg-teal-500'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="py-16 bg-gray-50">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Title */}
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl font-bold text-gray-700">Products and services</h2>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="mb-12">
|
||||
<div className="flex flex-wrap justify-center gap-2 md:gap-4">
|
||||
{tabs.map((tab) => (
|
||||
<button
|
||||
key={tab}
|
||||
onClick={() => setActiveTab(tab)}
|
||||
className={`px-4 py-2 text-sm font-medium rounded-t-lg transition-colors ${
|
||||
activeTab === tab
|
||||
? 'text-blue-600 border-b-2 border-blue-600 bg-white'
|
||||
: 'text-gray-600 hover:text-gray-700 bg-transparent'
|
||||
}`}
|
||||
>
|
||||
{tab}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="border-b border-gray-200 mt-0"></div>
|
||||
</div>
|
||||
|
||||
{/* Service Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{services[activeTab]?.map((service, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow p-6 border border-gray-200"
|
||||
>
|
||||
<div className="flex flex-col items-center text-center space-y-4">
|
||||
<div className={`w-16 h-16 ${service.color} rounded-xl flex items-center justify-center`}>
|
||||
{service.icon}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-lg font-semibold text-gray-700 leading-tight">
|
||||
{service.title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 leading-relaxed">
|
||||
{service.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Show message if no services for selected tab */}
|
||||
{(!services[activeTab] || services[activeTab].length === 0) && (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-gray-500">No services available for this category.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ServicesSection;
|
||||
208
src/components/Home/SolutionsCarousel.tsx
Normal file
208
src/components/Home/SolutionsCarousel.tsx
Normal file
@ -0,0 +1,208 @@
|
||||
"use client"
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
|
||||
interface Solution {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
backgroundImage: string;
|
||||
category: string;
|
||||
}
|
||||
|
||||
const SolutionsCarousel: React.FC = () => {
|
||||
const [activeTab, setActiveTab] = useState('E-Commerce');
|
||||
const [currentSlide, setCurrentSlide] = useState(0);
|
||||
|
||||
const tabs = [
|
||||
'E-Commerce',
|
||||
'Automotive',
|
||||
'Insurance',
|
||||
'Media & Entertainment',
|
||||
'Gaming',
|
||||
'Industries'
|
||||
];
|
||||
|
||||
const solutions: { [key: string]: Solution[] } = {
|
||||
'E-Commerce': [
|
||||
{
|
||||
id: 'ecommerce-1',
|
||||
title: 'E-Commerce',
|
||||
description: 'Build scalable online retail platforms with secure payment processing, inventory management, and customer analytics to drive digital commerce growth.',
|
||||
backgroundImage: '/images/ecommerce-bg.jpg',
|
||||
category: 'E-Commerce'
|
||||
}
|
||||
],
|
||||
'Automotive': [
|
||||
{
|
||||
id: 'automotive-1',
|
||||
title: 'Automotive',
|
||||
description: 'Transform the automotive industry with connected vehicle solutions, autonomous driving technologies, and smart manufacturing processes.',
|
||||
backgroundImage: '/images/ecommerce-bg.jpg',
|
||||
category: 'Automotive'
|
||||
}
|
||||
],
|
||||
'Insurance': [
|
||||
{
|
||||
id: 'insurance-1',
|
||||
title: 'Insurance',
|
||||
description: 'Rapidly establish comprehensive insurance service systems to ease digital transformation with compliant, secure, and reliable infrastructure such as FinTech Cloud and Dedicated Cloud.',
|
||||
backgroundImage: '/images/ecommerce-bg.jpg',
|
||||
category: 'Insurance'
|
||||
}
|
||||
],
|
||||
'Media & Entertainment': [
|
||||
{
|
||||
id: 'media-1',
|
||||
title: 'Media & Entertainment',
|
||||
description: 'Deliver high-quality streaming experiences with content delivery networks, media processing, and audience engagement platforms.',
|
||||
backgroundImage: '/images/ecommerce-bg.jpg',
|
||||
category: 'Media & Entertainment'
|
||||
}
|
||||
],
|
||||
'Gaming': [
|
||||
{
|
||||
id: 'gaming-1',
|
||||
title: 'Gaming',
|
||||
description: 'Power immersive gaming experiences with low-latency infrastructure, real-time multiplayer capabilities, and scalable game backend services.',
|
||||
backgroundImage: '/images/ecommerce-bg.jpg',
|
||||
category: 'Gaming'
|
||||
}
|
||||
],
|
||||
'Smart City': [
|
||||
{
|
||||
id: 'smartcity-1',
|
||||
title: 'Industries',
|
||||
description: 'Build intelligent urban infrastructure with IoT sensors, data analytics, and AI-powered solutions for sustainable city management.',
|
||||
backgroundImage: '/images/ecommerce-bg.jpg',
|
||||
category: 'Industries'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const currentSolutions = solutions[activeTab] || [];
|
||||
|
||||
const nextSlide = () => {
|
||||
setCurrentSlide((prev) =>
|
||||
prev === currentSolutions.length - 1 ? 0 : prev + 1
|
||||
);
|
||||
};
|
||||
|
||||
const prevSlide = () => {
|
||||
setCurrentSlide((prev) =>
|
||||
prev === 0 ? currentSolutions.length - 1 : prev - 1
|
||||
);
|
||||
};
|
||||
|
||||
// Reset current slide when tab changes
|
||||
useEffect(() => {
|
||||
setCurrentSlide(0);
|
||||
}, [activeTab]);
|
||||
|
||||
return (
|
||||
<section className="py-16 bg-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Title */}
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-4xl font-bold text-gray-700 max-w-4xl mx-auto leading-tight">
|
||||
Solutions for Unleashing Digital and Powering Innovation
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="mb-8">
|
||||
<div className="flex flex-wrap justify-center gap-8 md:gap-12 lg:gap-16">
|
||||
{tabs.map((tab) => (
|
||||
<button
|
||||
key={tab}
|
||||
onClick={() => setActiveTab(tab)}
|
||||
className={`px-2 py-3 text-sm md:text-base font-medium transition-colors whitespace-nowrap ${
|
||||
activeTab === tab
|
||||
? 'text-gray-700 border-b-2 border-gray-900'
|
||||
: 'text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
>
|
||||
{tab}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Carousel */}
|
||||
<div className="relative">
|
||||
{currentSolutions.length > 0 && (
|
||||
<div className="relative h-96 md:h-[500px] rounded-2xl overflow-hidden">
|
||||
{/* Background Image */}
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
||||
style={{
|
||||
backgroundImage: `url('${currentSolutions[currentSlide]?.backgroundImage}')`,
|
||||
}}
|
||||
>
|
||||
{/* Overlay */}
|
||||
<div className="absolute inset-0 bg-black/40"></div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="relative h-full flex items-center">
|
||||
<div className="max-w-2xl px-8 md:px-16">
|
||||
<h3 className="text-4xl md:text-5xl font-bold text-white mb-6">
|
||||
{currentSolutions[currentSlide]?.title}
|
||||
</h3>
|
||||
<p className="text-lg md:text-xl text-white/90 mb-8 leading-relaxed">
|
||||
{currentSolutions[currentSlide]?.description}
|
||||
</p>
|
||||
<button className="inline-flex items-center px-8 py-3 bg-transparent border-2 border-white text-white font-medium rounded-full hover:bg-white hover:text-gray-700 transition-colors">
|
||||
Learn more
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation Arrows */}
|
||||
{currentSolutions.length > 1 && (
|
||||
<>
|
||||
<button
|
||||
onClick={prevSlide}
|
||||
className="absolute left-4 top-1/2 transform -translate-y-1/2 w-12 h-12 bg-white/20 hover:bg-white/30 rounded-full flex items-center justify-center transition-colors backdrop-blur-sm"
|
||||
>
|
||||
<ChevronLeft className="w-6 h-6 text-white" />
|
||||
</button>
|
||||
<button
|
||||
onClick={nextSlide}
|
||||
className="absolute right-4 top-1/2 transform -translate-y-1/2 w-12 h-12 bg-white/20 hover:bg-white/30 rounded-full flex items-center justify-center transition-colors backdrop-blur-sm"
|
||||
>
|
||||
<ChevronRight className="w-6 h-6 text-white" />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Dots Indicator */}
|
||||
{currentSolutions.length > 1 && (
|
||||
<div className="absolute bottom-6 left-1/2 transform -translate-x-1/2 flex space-x-2">
|
||||
{currentSolutions.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => setCurrentSlide(index)}
|
||||
className={`w-3 h-3 rounded-full transition-colors ${
|
||||
index === currentSlide ? 'bg-white' : 'bg-white/50'
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Empty State */}
|
||||
{currentSolutions.length === 0 && (
|
||||
<div className="h-96 md:h-[500px] bg-gray-100 rounded-2xl flex items-center justify-center">
|
||||
<p className="text-gray-500 text-lg">No solutions available for this category</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default SolutionsCarousel;
|
||||
115
src/components/Layout/Footer.tsx
Normal file
115
src/components/Layout/Footer.tsx
Normal file
@ -0,0 +1,115 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<footer className="bg-blue-900 text-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
{/* Logo Section */}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center mb-4">
|
||||
<img
|
||||
src="/images/logo-white.svg"
|
||||
alt="3engine Logo"
|
||||
className="h-12 w-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer Content Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{/* Tools Section */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4">Tools</h3>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li><Link href="/account" className="hover:text-blue-300">My customer account</Link></li>
|
||||
<li><Link href="/api" className="hover:text-blue-300">API</Link></li>
|
||||
<li><Link href="/status" className="hover:text-blue-300">Status</Link></li>
|
||||
</ul>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="font-semibold mb-2">Intellectual property</h4>
|
||||
<Link href="/trademarks" className="text-sm hover:text-blue-300">Trademarks</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Support Section */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4">Support</h3>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li><Link href="/help" className="hover:text-blue-300">Help centre</Link></li>
|
||||
<li><Link href="/guides" className="hover:text-blue-300">Guides</Link></li>
|
||||
<li><Link href="/glossary" className="hover:text-blue-300">Documentations</Link></li>
|
||||
</ul>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="font-semibold mb-2">Contact us</h4>
|
||||
<p className="text-sm mb-1">3Engine India Customer Service</p>
|
||||
{/* <p className="text-sm mb-1">Toll-Free: <strong>000 800 040 4567</strong></p> */}
|
||||
<p className="text-sm">Monday to Friday, 9AM to 5PM (GMT +5:30)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* News Section */}
|
||||
|
||||
<div>
|
||||
<h4 className="font-semibold mb-3">Social networks</h4>
|
||||
<div className="flex space-x-3">
|
||||
{/* Social Media Icons */}
|
||||
<a href="#" className="hover:text-blue-300">
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" className="hover:text-blue-300">
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a href="#" className="hover:text-blue-300">
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Keep in touch Section */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4">Keep in touch</h3>
|
||||
<p className="text-sm mb-4">Stay tuned by receiving our latest cloud news</p>
|
||||
|
||||
<div className="mb-4">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Your email address"
|
||||
className="w-full px-3 py-2 bg-white text-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-300"
|
||||
/>
|
||||
<button className="w-full mt-2 bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded font-medium transition-colors">
|
||||
Subscribe
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer Bottom */}
|
||||
<div className="mt-8 pt-8 border-t border-blue-800">
|
||||
<div className="flex flex-wrap items-center justify-center text-sm">
|
||||
<div className="flex flex-wrap items-center space-x-4">
|
||||
<p>
|
||||
Copyright © 2024 Rootxwire All Rights Reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="mt-2 flex flex-wrap items-center space-x-4 text-sm">
|
||||
<Link href="/" className="hover:text-blue-300">About 3Engine</Link>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
110
src/components/Layout/Header.tsx
Normal file
110
src/components/Layout/Header.tsx
Normal file
@ -0,0 +1,110 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
|
||||
const Header = () => {
|
||||
return (
|
||||
<header className="bg-white shadow-sm">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center h-16">
|
||||
{/* Left side - Logo and main navigation */}
|
||||
<div className="flex items-center space-x-8">
|
||||
{/* Logo */}
|
||||
<Link href="/" className="flex items-center">
|
||||
<img
|
||||
src="/images/logo-splash.svg"
|
||||
alt="3engine Logo"
|
||||
className="h-12 w-auto"
|
||||
/>
|
||||
</Link>
|
||||
|
||||
{/* Main Navigation - Left side */}
|
||||
<nav className="hidden md:flex space-x-8">
|
||||
<Link href="/" className="text-gray-700 hover:text-gray-700 px-3 py-2 text-sm font-medium">
|
||||
Home
|
||||
</Link>
|
||||
<Link href="/" className="text-gray-700 hover:text-gray-700 px-3 py-2 text-sm font-medium">
|
||||
Products
|
||||
</Link>
|
||||
<Link href="/" className="text-gray-700 hover:text-gray-700 px-3 py-2 text-sm font-medium">
|
||||
Solution
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Right side navigation */}
|
||||
<div className="hidden md:flex items-center space-x-6">
|
||||
<Link href="/" className="text-gray-700 hover:text-gray-700 px-3 py-2 text-sm font-medium">
|
||||
Partners
|
||||
</Link>
|
||||
<a
|
||||
href="https://docs.rootxwire.com/index.html"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-gray-700 hover:text-gray-700 px-3 py-2 text-sm font-medium"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://3engine.rootxwire.com/auth/login/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-gray-700 hover:text-gray-700 px-3 py-2 text-sm font-medium"
|
||||
>
|
||||
Console
|
||||
</a>
|
||||
<Link
|
||||
href="/"
|
||||
className="bg-blue-600 text-white hover:bg-blue-700 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200"
|
||||
>
|
||||
SignUp
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Mobile menu button */}
|
||||
<div className="md:hidden">
|
||||
<button
|
||||
type="button"
|
||||
className="bg-white inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<span className="sr-only">Open main menu</span>
|
||||
<svg className="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile menu - you can expand this later */}
|
||||
<div className="md:hidden hidden">
|
||||
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white border-t">
|
||||
<Link href="/" className="text-gray-700 hover:text-gray-700 block px-3 py-2 text-sm font-medium">
|
||||
Home
|
||||
</Link>
|
||||
<Link href="/" className="text-gray-700 hover:text-gray-700 block px-3 py-2 text-sm font-medium">
|
||||
Products
|
||||
</Link>
|
||||
<Link href="/" className="text-gray-700 hover:text-gray-700 block px-3 py-2 text-sm font-medium">
|
||||
Solution
|
||||
</Link>
|
||||
<Link href="/" className="text-gray-700 hover:text-gray-700 block px-3 py-2 text-sm font-medium">
|
||||
Partners
|
||||
</Link>
|
||||
<Link href="/" className="text-gray-700 hover:text-gray-700 block px-3 py-2 text-sm font-medium">
|
||||
Documentation
|
||||
</Link>
|
||||
<Link href="/" className="text-gray-700 hover:text-gray-700 block px-3 py-2 text-sm font-medium">
|
||||
Console
|
||||
</Link>
|
||||
<Link href="/" className="bg-blue-600 text-white hover:bg-blue-700 block px-3 py-2 rounded-md text-sm font-medium mx-3 mt-2">
|
||||
SignUp
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
Reference in New Issue
Block a user