mirror of
https://github.com/SkyLinkHostingLLC/Website-V3.git
synced 2026-02-21 22:42:23 -05:00
f you github
This commit is contained in:
Josh S.
GitHub
parent
879bd9d114
commit
c62b7dc5e5
51 changed files with 11683 additions and 1 deletions
72
README.md
72
README.md
|
|
@ -1 +1,71 @@
|
||||||
# Website-V3
|
# GameZone Hosting Template Setup Guide
|
||||||
|
|
||||||
|
## Prerequisites
|
||||||
|
Before starting, ensure you have installed:
|
||||||
|
- Visual Studio Code (VS Code)
|
||||||
|
- Node.js and npm (Node Package Manager) [https://docs.npmjs.com/downloading-and-installing-node-js-and-npm]
|
||||||
|
|
||||||
|
## Step-by-Step Setup Instructions
|
||||||
|
|
||||||
|
### 1. Open Project in VS Code
|
||||||
|
1. Open VS Code
|
||||||
|
2. Go to File > Open Folder
|
||||||
|
3. Navigate to and select your GameZone template folder
|
||||||
|
4. Click "Select Folder"
|
||||||
|
|
||||||
|
### 2. Install Dependencies
|
||||||
|
1. Open VS Code's integrated terminal:
|
||||||
|
- Press `Ctrl + ` (Windows/Linux) or `Cmd + ` (Mac), OR
|
||||||
|
- Go to View > Terminal
|
||||||
|
2. In the terminal, enter:
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
3. Wait for the installation to complete (this may take a few minutes)
|
||||||
|
|
||||||
|
### 3. Start the Development Server
|
||||||
|
1. In the same terminal, enter:
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
2. Your default web browser will automatically open with your website
|
||||||
|
3. The site will be running at `http://localhost:3000` by default if your using npm
|
||||||
|
|
||||||
|
## What to Expect
|
||||||
|
- After `npm install`: You'll see a progress bar and package installation messages
|
||||||
|
- After `npm run dev`:
|
||||||
|
- Terminal will show compilation progress
|
||||||
|
- Browser will open automatically
|
||||||
|
- Any code changes will trigger automatic page updates
|
||||||
|
|
||||||
|
## Building for Production
|
||||||
|
When you're ready to deploy your website:
|
||||||
|
|
||||||
|
1. In the terminal, run:
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
2. This will create a `dist` or `build` folder containing your production-ready website files
|
||||||
|
3. Upload the entire contents of this folder to your web hosting provider's root directory
|
||||||
|
|
||||||
|
### Important Build Tips:
|
||||||
|
- Always create a backup of your source code before building
|
||||||
|
- Keep a copy of each production build in case you need to revert changes
|
||||||
|
- Store builds in separate dated folders (e.g., `builds/2024-05-11/`)
|
||||||
|
- Test the built website thoroughly before deploying
|
||||||
|
- Consider using version control (like Git) to track changes
|
||||||
|
|
||||||
|
## Troubleshooting
|
||||||
|
If you encounter any issues:
|
||||||
|
1. Ensure you're in the correct folder in the terminal
|
||||||
|
2. Try closing VS Code and reopening it
|
||||||
|
3. Check if Node.js is properly installed by running `node --version`
|
||||||
|
4. If packages fail to install, try deleting the `node_modules` folder and running `npm install` again
|
||||||
|
|
||||||
|
## Notes
|
||||||
|
- If installing on a web server, you'll need to create an `.htaccess` file.
|
||||||
|
- If installing on a VPS, ensure your Nginx configuration for the site is set to direct requests to `index.html`.
|
||||||
|
|
||||||
|
## Need Additional Help?
|
||||||
|
Contact me at:
|
||||||
|
- Discord: @26BZ
|
||||||
|
|
|
||||||
38
eslint.config.js
Normal file
38
eslint.config.js
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
import js from '@eslint/js'
|
||||||
|
import globals from 'globals'
|
||||||
|
import react from 'eslint-plugin-react'
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks'
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||||
|
|
||||||
|
export default [
|
||||||
|
{ ignores: ['dist'] },
|
||||||
|
{
|
||||||
|
files: ['**/*.{js,jsx}'],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
globals: globals.browser,
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 'latest',
|
||||||
|
ecmaFeatures: { jsx: true },
|
||||||
|
sourceType: 'module',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
settings: { react: { version: '18.3' } },
|
||||||
|
plugins: {
|
||||||
|
react,
|
||||||
|
'react-hooks': reactHooks,
|
||||||
|
'react-refresh': reactRefresh,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
...js.configs.recommended.rules,
|
||||||
|
...react.configs.recommended.rules,
|
||||||
|
...react.configs['jsx-runtime'].rules,
|
||||||
|
...reactHooks.configs.recommended.rules,
|
||||||
|
'react/jsx-no-target-blank': 'off',
|
||||||
|
'react-refresh/only-export-components': [
|
||||||
|
'warn',
|
||||||
|
{ allowConstantExport: true },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
14
index.html
Normal file
14
index.html
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" alt="26bz"/>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Skylink Hosting LLC</title>
|
||||||
|
<link rel="stylesheet" href="./src/App.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
5849
package-lock.json
generated
Normal file
5849
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
35
package.json
Normal file
35
package.json
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
{
|
||||||
|
"name": "SkylinkWebsite-v3",
|
||||||
|
"private": true,
|
||||||
|
"version": "1.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"author": "skylinkhosting-com",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"autoprefixer": "^10.4.20",
|
||||||
|
"lucide-react": "^0.469.0",
|
||||||
|
"postcss": "^8.4.49",
|
||||||
|
"react": "^18.3.1",
|
||||||
|
"react-dom": "^18.3.1",
|
||||||
|
"react-helmet": "^6.1.0",
|
||||||
|
"react-router-dom": "^7.1.1",
|
||||||
|
"tailwindcss": "^3.4.17"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.17.0",
|
||||||
|
"@types/react": "^18.3.18",
|
||||||
|
"@types/react-dom": "^18.3.5",
|
||||||
|
"@vitejs/plugin-react": "^4.3.4",
|
||||||
|
"eslint": "^9.17.0",
|
||||||
|
"eslint-plugin-react": "^7.37.2",
|
||||||
|
"eslint-plugin-react-hooks": "^5.0.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.16",
|
||||||
|
"globals": "^15.14.0",
|
||||||
|
"vite": "^6.0.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
BIN
public/images/datacenter.jpg
Normal file
BIN
public/images/datacenter.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 MiB |
BIN
public/images/hardware.jpg
Normal file
BIN
public/images/hardware.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 MiB |
BIN
public/images/hero.jpg
Normal file
BIN
public/images/hero.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
public/images/high-performance.jpg
Normal file
BIN
public/images/high-performance.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 892 KiB |
BIN
public/images/location.jpg
Normal file
BIN
public/images/location.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 930 KiB |
BIN
public/images/minecraft.jpeg
Normal file
BIN
public/images/minecraft.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
public/images/pathnet.png
Normal file
BIN
public/images/pathnet.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
public/images/power-on.jpg
Normal file
BIN
public/images/power-on.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 654 KiB |
BIN
public/images/rust.avif
Normal file
BIN
public/images/rust.avif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
public/images/valheim.png
Normal file
BIN
public/images/valheim.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 192 KiB |
BIN
public/images/vps.jpg
Normal file
BIN
public/images/vps.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 474 KiB |
BIN
public/images/web-hosting.jpg
Normal file
BIN
public/images/web-hosting.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.4 MiB |
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
115
src/App.css
Normal file
115
src/App.css
Normal file
|
|
@ -0,0 +1,115 @@
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
background-color: rgb(17, 24, 39);
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#root {
|
||||||
|
background-color: rgb(17, 24, 39);
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
.primary-button {
|
||||||
|
background-color: #3b82f6;
|
||||||
|
color: white;
|
||||||
|
padding: 0.75rem 1.5rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
font-weight: 500;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 200ms ease-in-out;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-button:hover {
|
||||||
|
background-color: #2563eb;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
border-color: #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-button:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-button:disabled {
|
||||||
|
background-color: #93c5fd;
|
||||||
|
cursor: not-allowed;
|
||||||
|
transform: none;
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary-button {
|
||||||
|
background-color: #0f172a;
|
||||||
|
color: white;
|
||||||
|
padding: 0.75rem 1.5rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
font-weight: 500;
|
||||||
|
border: 1px solid #1e293b;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 200ms ease-in-out;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary-button:hover {
|
||||||
|
background-color: #0f172a;
|
||||||
|
border-color: #3b82f6;
|
||||||
|
color: #60a5fa;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary-button:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary-button:disabled {
|
||||||
|
background-color: #e2e8f0;
|
||||||
|
color: #94a3b8;
|
||||||
|
cursor: not-allowed;
|
||||||
|
transform: none;
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-button::before,
|
||||||
|
.secondary-button::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: -4px;
|
||||||
|
background-color: rgba(59, 130, 246, 0.1);
|
||||||
|
border-radius: 0.625rem;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 200ms ease-in-out;
|
||||||
|
filter: blur(8px);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-button:hover::before,
|
||||||
|
.secondary-button:hover::before {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-button:disabled.loading,
|
||||||
|
.secondary-button:disabled.loading {
|
||||||
|
position: relative;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-button:disabled.loading::after,
|
||||||
|
.secondary-button:disabled.loading::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||||
|
border-radius: 50%;
|
||||||
|
border-top-color: white;
|
||||||
|
animation: spin 1s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
to {
|
||||||
|
transform: translate(-50%, -50%) rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
51
src/App.jsx
Normal file
51
src/App.jsx
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
import React from "react";
|
||||||
|
import { Layout } from "./components/Layout";
|
||||||
|
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
||||||
|
import HomePage from "./pages/HomePage";
|
||||||
|
import { GamesPage } from "./pages/GamesPage";
|
||||||
|
import "./App.css";
|
||||||
|
// import MinecraftPage from "./pages/MinecraftPage";
|
||||||
|
import SupportPortal from "./pages/SupportPage";
|
||||||
|
// import AboutPage from "./pages/AboutPage";
|
||||||
|
import VPSPage from "./pages/VPSPage";
|
||||||
|
import SpecsPage from "./pages/SpecsPage";
|
||||||
|
// import PartnersPage from "./pages/PartnersPage";
|
||||||
|
// import WebHosting from "./pages/WebHosting";
|
||||||
|
// import TOSPage from "./pages/TOSPage";
|
||||||
|
// import PrivacyPolicy from "./pages/PrivacyPolicy";
|
||||||
|
import AUPPage from "./pages/AUPPage";
|
||||||
|
// import SitemapPage from "./pages/SiteMap";
|
||||||
|
// import CareersPage from "./pages/CareersPage";
|
||||||
|
import NotFoundPage from "./pages/NotFoundPage";
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Layout>
|
||||||
|
<main>
|
||||||
|
<BrowserRouter>
|
||||||
|
<Routes>
|
||||||
|
<Route path="/" element={<HomePage />} />
|
||||||
|
<Route path="/games" element={<GamesPage />} />
|
||||||
|
{/* <Route path="/minecraft" element={<MinecraftPage />} /> */}
|
||||||
|
<Route path="/support" element={<SupportPortal />} />
|
||||||
|
{/* <Route path="/about" element={<AboutPage />} /> */}
|
||||||
|
<Route path="/vps" element={<VPSPage />} />
|
||||||
|
<Route path="/specs" element={<SpecsPage />} />
|
||||||
|
{/* <Route path="/partners" element={<PartnersPage />} /> */}
|
||||||
|
{/* <Route path="/web-hosting" element={<WebHosting />} /> */}
|
||||||
|
{/* <Route path="/terms-of-service" element={<TOSPage />} />
|
||||||
|
<Route path="/privacy-policy" element={<PrivacyPolicy />} /> */}
|
||||||
|
<Route path="/aup" element={<AUPPage />} />
|
||||||
|
{/* <Route path="/sitemap" element={<SitemapPage />} /> */}
|
||||||
|
{/* <Route path="/careers" element={<CareersPage />} /> */}
|
||||||
|
<Route path="*" element={<NotFoundPage />} />
|
||||||
|
</Routes>
|
||||||
|
</BrowserRouter>
|
||||||
|
</main>
|
||||||
|
</Layout>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
1
src/assets/react.svg
Normal file
1
src/assets/react.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 4 KiB |
467
src/components/Layout.jsx
Normal file
467
src/components/Layout.jsx
Normal file
|
|
@ -0,0 +1,467 @@
|
||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import {
|
||||||
|
Menu,
|
||||||
|
X,
|
||||||
|
Mail,
|
||||||
|
Phone,
|
||||||
|
Globe,
|
||||||
|
Twitter,
|
||||||
|
Github,
|
||||||
|
ExternalLink,
|
||||||
|
HeadsetIcon,
|
||||||
|
ArrowRight,
|
||||||
|
ArrowUp,
|
||||||
|
BoxIcon,
|
||||||
|
Gamepad2,
|
||||||
|
WifiIcon,
|
||||||
|
Ticket,
|
||||||
|
} from "lucide-react";
|
||||||
|
import PromoPopup from "./PromoPopup";
|
||||||
|
// Navbar Contents
|
||||||
|
const fastLinks = [
|
||||||
|
{ title: "Game Panel", path: "https://example.com", icon: Gamepad2 },
|
||||||
|
{ title: "VPS Panel", path: "https://example.com", icon: BoxIcon },
|
||||||
|
{ title: "Status", path: "https://example.com", icon: WifiIcon },
|
||||||
|
{ title: "Create a Ticket", path: "https://example.com", icon: Ticket },
|
||||||
|
];
|
||||||
|
const navLinks = [
|
||||||
|
{ title: "Home", path: "/" },
|
||||||
|
{ title: "Games Servers", path: "/games" },
|
||||||
|
{ title: "VPS", path: "/vps" },
|
||||||
|
{ title: "Web Hosting", path: "/web-hosting" },
|
||||||
|
{ title: "Support", path: "/support" },
|
||||||
|
];
|
||||||
|
// Footer Contents
|
||||||
|
const socialLinks = [
|
||||||
|
// {
|
||||||
|
// icon: Twitter,
|
||||||
|
// href: "https://twitter.com/virtugraphics",
|
||||||
|
// label: "Twitter",
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
icon: HeadsetIcon,
|
||||||
|
href: "https://skylinkhosting.com/discord",
|
||||||
|
label: "Discord",
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// icon: Github,
|
||||||
|
// href: "https://github.com/virtugraphics",
|
||||||
|
// label: "GitHub",
|
||||||
|
// },
|
||||||
|
];
|
||||||
|
|
||||||
|
const companyLinks = [
|
||||||
|
{ label: "About Us", href: "/about" },
|
||||||
|
{ label: "Network Specs", href: "/specs" },
|
||||||
|
{ label: "Careers", href: "/careers" },
|
||||||
|
{ label: "Partners", href: "/partners" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const supportLinks = [
|
||||||
|
{ label: "Support Center", href: "/support" },
|
||||||
|
{ label: "Network Status", href: "https://status.skylinkhosting.com/" },
|
||||||
|
{ label: "Contact", href: "https://billing.skylinkhosting.com/contact.php" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const contactLinks = [
|
||||||
|
{
|
||||||
|
icon: Mail,
|
||||||
|
label: "support@skylinkhosting.com",
|
||||||
|
href: "mailto:support@skylinkhosting.com",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Phone,
|
||||||
|
label: "+1 814-673-1843",
|
||||||
|
href: "tel:1-814-673-1843",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Globe,
|
||||||
|
label: "Pennsylvania, US",
|
||||||
|
href: null,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const legalLinks = [
|
||||||
|
{ label: "Terms", href: "https://cdn.skylinkhosting.com/Static/Legal/ToS.pdf" },
|
||||||
|
{ label: "Privacy", href: "https://cdn.skylinkhosting.com/Static/Legal/Privacy.pdf" },
|
||||||
|
{ label: "SLA", href: "https://cdn.skylinkhosting.com/Static/Legal/SLA.pdf" },
|
||||||
|
// { label: "Sitemap", href: "/sitemap" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const FastLinks = () => {
|
||||||
|
return (
|
||||||
|
<div className="bg-slate-900 text-white py-2 border-b border-gray-900">
|
||||||
|
<div className="container mx-auto max-w-screen-xl px-4">
|
||||||
|
{/* Desktop Layout Only */}
|
||||||
|
<div className="hidden lg:flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-4 text-sm text-gray-400">
|
||||||
|
<a
|
||||||
|
href="mailto:support@skylinkhosting.com"
|
||||||
|
className="flex items-center gap-2 hover:text-blue-500 transition-colors duration-200"
|
||||||
|
>
|
||||||
|
<Mail className="w-4 h-4" />
|
||||||
|
support@gamezone.com
|
||||||
|
</a>
|
||||||
|
<span className="flex items-center gap-2">
|
||||||
|
<Phone className="w-4 h-4" />
|
||||||
|
+1 814-673-1843
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<ul className="flex items-center space-x-6">
|
||||||
|
{fastLinks.map((link) => (
|
||||||
|
<li key={link.path}>
|
||||||
|
<a
|
||||||
|
href={link.path}
|
||||||
|
className="flex items-center gap-2 text-gray-400 hover:text-blue-500 transition-colors duration-200"
|
||||||
|
>
|
||||||
|
<link.icon className="w-4 h-4" />
|
||||||
|
<span className="text-sm">{link.title}</span>
|
||||||
|
<ExternalLink className="w-3 h-3" />
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const NavBar = () => {
|
||||||
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||||
|
const [isScrolled, setIsScrolled] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleScroll = () => {
|
||||||
|
setIsScrolled(window.scrollY > 20);
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener("scroll", handleScroll);
|
||||||
|
return () => window.removeEventListener("scroll", handleScroll);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (isMobileMenuOpen) {
|
||||||
|
document.body.style.overflow = "hidden";
|
||||||
|
} else {
|
||||||
|
document.body.style.overflow = "unset";
|
||||||
|
}
|
||||||
|
return () => {
|
||||||
|
document.body.style.overflow = "unset";
|
||||||
|
};
|
||||||
|
}, [isMobileMenuOpen]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<nav
|
||||||
|
className={`sticky top-0 z-50 bg-slate-900 text-white py-4 border-b border-gray-900 transition-all duration-200 ${
|
||||||
|
isScrolled ? "shadow-xl" : ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="container max-w-screen-xl mx-auto px-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<a href="/" className="flex items-center gap-2">
|
||||||
|
<img
|
||||||
|
src="https://placehold.co/32x32"
|
||||||
|
alt="GameZone Logo"
|
||||||
|
className="w-8 h-8 rounded-md"
|
||||||
|
/>
|
||||||
|
<h1 className="text-xl md:text-2xl font-bold">
|
||||||
|
<span className="text-blue-500">Game</span>
|
||||||
|
<span className="text-white">Zone</span>
|
||||||
|
</h1>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
{/* Desktop Navigation */}
|
||||||
|
<ul className="hidden lg:flex items-center space-x-8">
|
||||||
|
{navLinks.map((link) => (
|
||||||
|
<li key={link.path}>
|
||||||
|
<a
|
||||||
|
href={link.path}
|
||||||
|
className="text-lg font-semibold text-gray-300 hover:text-blue-500 transition-colors duration-200"
|
||||||
|
>
|
||||||
|
{link.title}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div className="hidden lg:flex items-center ml-3">
|
||||||
|
<a
|
||||||
|
href="https://example.com"
|
||||||
|
className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md font-medium transition-all duration-200"
|
||||||
|
>
|
||||||
|
Client Area
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile Menu Button */}
|
||||||
|
<button
|
||||||
|
className="lg:hidden p-2 bg-slate-950 rounded-md border border-gray-900 hover:border-blue-500 transition-all duration-200"
|
||||||
|
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||||
|
aria-label="Toggle menu"
|
||||||
|
>
|
||||||
|
{isMobileMenuOpen ? (
|
||||||
|
<X className="w-6 h-6 text-gray-400" />
|
||||||
|
) : (
|
||||||
|
<Menu className="w-6 h-6 text-gray-400" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile Menu */}
|
||||||
|
<div
|
||||||
|
className={`lg:hidden fixed inset-0 bg-gray-900 transition-all duration-300 z-50 overflow-y-auto ${
|
||||||
|
isMobileMenuOpen ? "opacity-100 visible" : "opacity-0 invisible"
|
||||||
|
}`}
|
||||||
|
style={{ marginTop: "73px" }}
|
||||||
|
>
|
||||||
|
<div className="container mx-auto px-4 py-4">
|
||||||
|
{/* Main Navigation */}
|
||||||
|
<div className="mb-4">
|
||||||
|
<ul className="space-y-1">
|
||||||
|
{navLinks.map((link) => (
|
||||||
|
<li key={link.path}>
|
||||||
|
<a
|
||||||
|
href={link.path}
|
||||||
|
className="flex items-center justify-between p-3 bg-slate-950 rounded-lg border border-gray-900 hover:border-blue-500 transition-all duration-200"
|
||||||
|
onClick={() => setIsMobileMenuOpen(false)}
|
||||||
|
>
|
||||||
|
<span className="text-lg font-medium text-gray-300">
|
||||||
|
{link.title}
|
||||||
|
</span>
|
||||||
|
<ArrowRight className="w-5 h-5 text-gray-400" />
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quick Access */}
|
||||||
|
<div className="mb-4">
|
||||||
|
<h3 className="text-sm font-medium text-gray-400 mb-2 px-1">
|
||||||
|
Quick Access
|
||||||
|
</h3>
|
||||||
|
<div className="grid grid-cols-2 gap-2">
|
||||||
|
{fastLinks.map((link) => (
|
||||||
|
<a
|
||||||
|
key={link.title}
|
||||||
|
href={link.path}
|
||||||
|
className="flex items-center gap-2 p-3 bg-slate-950 rounded-lg border border-gray-900 hover:border-blue-500 transition-all duration-200"
|
||||||
|
onClick={() => setIsMobileMenuOpen(false)}
|
||||||
|
>
|
||||||
|
<link.icon className="w-5 h-5 text-blue-500" />
|
||||||
|
<span className="text-gray-300 font-medium">
|
||||||
|
{link.title}
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Contact Section */}
|
||||||
|
<div className="space-y-1 mb-4">
|
||||||
|
<h3 className="text-sm font-medium text-gray-400 mb-2 px-1">
|
||||||
|
Contact Us
|
||||||
|
</h3>
|
||||||
|
<a
|
||||||
|
href="mailto:support@skylinkhosting.com"
|
||||||
|
className="flex items-center gap-2 p-3 bg-slate-950 rounded-lg border border-gray-900 hover:border-blue-500 transition-all duration-200"
|
||||||
|
>
|
||||||
|
<Mail className="w-5 h-5 text-blue-500" />
|
||||||
|
<span className="text-gray-300">support@skylinkhosting.com</span>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="tel:1-814-673-1843"
|
||||||
|
className="flex items-center gap-2 p-3 bg-slate-950 rounded-lg border border-gray-900 hover:border-blue-500 transition-all duration-200"
|
||||||
|
>
|
||||||
|
<Phone className="w-5 h-5 text-blue-500" />
|
||||||
|
<span className="text-gray-300">+1 814-673-1843</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Client Area Button */}
|
||||||
|
<a
|
||||||
|
href="https://billing.skylinkhosting.com"
|
||||||
|
className="block w-full bg-blue-600 hover:bg-blue-700 text-white p-3 rounded-lg text-center font-medium transition-all duration-200 border border-transparent hover:border-blue-500"
|
||||||
|
onClick={() => setIsMobileMenuOpen(false)}
|
||||||
|
>
|
||||||
|
Client Area
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const Footer = () => {
|
||||||
|
const currentYear = new Date().getFullYear();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<footer className="bg-slate-900 text-white">
|
||||||
|
<div className="container mx-auto max-w-screen-xl px-4 py-24">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||||
|
{/* Company Info */}
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-2 mb-6">
|
||||||
|
{/* <img
|
||||||
|
src="https://placehold.co/32x32"
|
||||||
|
alt="GameZone Logo"
|
||||||
|
className="w-8 h-8 rounded-md"
|
||||||
|
/> */}
|
||||||
|
<span className="text-xl font-bold">
|
||||||
|
<span className="text-blue-500">Skylink </span>
|
||||||
|
<span className="text-white">Hosting</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-400 mb-4">
|
||||||
|
Premium game hosting solutions with enterprise-grade
|
||||||
|
infrastructure and 24/7 support.
|
||||||
|
</p>
|
||||||
|
<div className="flex gap-4">
|
||||||
|
{socialLinks.map((social, index) => (
|
||||||
|
<a
|
||||||
|
key={index}
|
||||||
|
href={social.href}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="bg-slate-950 p-2 rounded-md border border-gray-900"
|
||||||
|
aria-label={social.label}
|
||||||
|
>
|
||||||
|
<social.icon className="w-5 h-5 text-gray-400" />
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Company Links */}
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold text-white mb-4">Company</h3>
|
||||||
|
<ul className="space-y-2">
|
||||||
|
{companyLinks.map((link, index) => (
|
||||||
|
<li key={index}>
|
||||||
|
<a
|
||||||
|
href={link.href}
|
||||||
|
className="text-gray-400 hover:text-blue-500 transition-colors duration-200"
|
||||||
|
>
|
||||||
|
{link.label}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Support Links */}
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold text-white mb-4">Support</h3>
|
||||||
|
<ul className="space-y-2">
|
||||||
|
{supportLinks.map((link, index) => (
|
||||||
|
<li key={index}>
|
||||||
|
<a
|
||||||
|
href={link.href}
|
||||||
|
className="text-gray-400 hover:text-blue-500 transition-colors duration-200"
|
||||||
|
>
|
||||||
|
{link.label}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Contact Info */}
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold text-white mb-4">
|
||||||
|
Contact Us
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-3">
|
||||||
|
{contactLinks.map((contact, index) => {
|
||||||
|
const ContactWrapper = contact.href ? "a" : "div";
|
||||||
|
return (
|
||||||
|
<ContactWrapper
|
||||||
|
key={index}
|
||||||
|
href={contact.href}
|
||||||
|
className="flex items-center gap-2 text-gray-400 hover:text-blue-500 transition-colors duration-200"
|
||||||
|
>
|
||||||
|
<contact.icon className="w-4 h-4 text-blue-500" />
|
||||||
|
<span>{contact.label}</span>
|
||||||
|
</ContactWrapper>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bottom Bar */}
|
||||||
|
<div className="mt-12 pt-8 border-t border-gray-900">
|
||||||
|
<div className="flex flex-col md:flex-row justify-between items-center gap-4">
|
||||||
|
<div className="text-gray-400 text-sm">
|
||||||
|
© {currentYear} Skylink Hosting LLC. All rights reserved.
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-wrap justify-center gap-6">
|
||||||
|
{legalLinks.map((link, index) => (
|
||||||
|
<a
|
||||||
|
key={index}
|
||||||
|
href={link.href}
|
||||||
|
className="text-sm text-gray-400 hover:text-blue-500 transition-colors duration-200"
|
||||||
|
>
|
||||||
|
{link.label}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const ScrollToTop = () => {
|
||||||
|
const [isVisible, setIsVisible] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const toggleVisibility = () => {
|
||||||
|
if (window.pageYOffset > 300) {
|
||||||
|
setIsVisible(true);
|
||||||
|
} else {
|
||||||
|
setIsVisible(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener("scroll", toggleVisibility);
|
||||||
|
return () => window.removeEventListener("scroll", toggleVisibility);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const scrollToTop = () => {
|
||||||
|
window.scrollTo({
|
||||||
|
top: 0,
|
||||||
|
behavior: "smooth",
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return isVisible ? (
|
||||||
|
<button
|
||||||
|
onClick={scrollToTop}
|
||||||
|
className="fixed bottom-6 right-6 p-3 bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-all duration-200"
|
||||||
|
aria-label="Scroll to top"
|
||||||
|
>
|
||||||
|
<ArrowUp className="w-6 h-6" />
|
||||||
|
</button>
|
||||||
|
) : null;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Layout = ({ children }) => {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-900 flex flex-col">
|
||||||
|
<FastLinks />
|
||||||
|
<NavBar />
|
||||||
|
<main className="flex-grow">{children}</main>
|
||||||
|
<PromoPopup />
|
||||||
|
<ScrollToTop />
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Layout;
|
||||||
54
src/components/Panel.jsx
Normal file
54
src/components/Panel.jsx
Normal file
|
|
@ -0,0 +1,54 @@
|
||||||
|
import { Settings, Cpu, Users } from "lucide-react";
|
||||||
|
|
||||||
|
export const Panel = () => {
|
||||||
|
return (
|
||||||
|
<section className="py-24 bg-slate-900">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<div className="flex flex-col md:flex-row items-center gap-12">
|
||||||
|
<div className="flex-1">
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
src="https://cdn.pterodactyl.io/site-assets/mockup-macbook-grey-1.0.png"
|
||||||
|
alt="Control Panel"
|
||||||
|
className="rounded-md w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
|
||||||
|
Intuitive Control Panel
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-300 mb-8 leading-relaxed">
|
||||||
|
Take full control of your Minecraft server with our custom-built
|
||||||
|
panel. Manage plugins, monitor performance, and configure settings
|
||||||
|
with ease. Perfect for both beginners and experienced server
|
||||||
|
administrators.
|
||||||
|
</p>
|
||||||
|
<ul className="space-y-4 mb-8">
|
||||||
|
<li className="flex items-center text-gray-300">
|
||||||
|
<div className="bg-slate-950 p-2 rounded-md mr-3">
|
||||||
|
<Settings className="w-6 h-6 text-blue-500" />
|
||||||
|
</div>
|
||||||
|
One-click plugin installation and configuration
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center text-gray-300">
|
||||||
|
<div className="bg-slate-950 p-2 rounded-md mr-3">
|
||||||
|
<Cpu className="w-6 h-6 text-blue-500" />
|
||||||
|
</div>
|
||||||
|
Real-time performance monitoring and optimization
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center text-gray-300">
|
||||||
|
<div className="bg-slate-950 p-2 rounded-md mr-3">
|
||||||
|
<Users className="w-6 h-6 text-blue-500" />
|
||||||
|
</div>
|
||||||
|
Advanced user and permission management
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Panel;
|
||||||
108
src/components/PromoPopup.jsx
Normal file
108
src/components/PromoPopup.jsx
Normal file
|
|
@ -0,0 +1,108 @@
|
||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import { Gift, Copy, Check, X } from "lucide-react";
|
||||||
|
|
||||||
|
const PromoPopup = () => {
|
||||||
|
const [isVisible, setIsVisible] = useState(false);
|
||||||
|
const [hasCopied, setHasCopied] = useState(false);
|
||||||
|
const PROMO_CODE = "26BZ";
|
||||||
|
const STORAGE_KEY = "promoPopupExpiry";
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const checkPromoStatus = () => {
|
||||||
|
const expiryTime = window.localStorage.getItem(STORAGE_KEY);
|
||||||
|
const now = new Date().getTime();
|
||||||
|
|
||||||
|
if (!expiryTime || now > parseInt(expiryTime)) {
|
||||||
|
setIsVisible(true);
|
||||||
|
document.body.style.overflow = "hidden";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
checkPromoStatus();
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
document.body.style.overflow = "unset";
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const copyPromoCode = async () => {
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(PROMO_CODE);
|
||||||
|
setHasCopied(true);
|
||||||
|
setTimeout(() => setHasCopied(false), 2000);
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Failed to copy:", err);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClose = () => {
|
||||||
|
// expiry time to 24 hours from now
|
||||||
|
const expiryTime = new Date().getTime() + 24 * 60 * 60 * 1000;
|
||||||
|
window.localStorage.setItem(STORAGE_KEY, expiryTime.toString());
|
||||||
|
|
||||||
|
document.body.style.overflow = "unset";
|
||||||
|
setIsVisible(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!isVisible) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950 bg-opacity-90">
|
||||||
|
<div className="relative w-full max-w-md bg-slate-900 rounded-lg shadow-xl">
|
||||||
|
<button
|
||||||
|
onClick={handleClose}
|
||||||
|
className="absolute right-4 top-4 p-2 text-gray-400 hover:text-white"
|
||||||
|
>
|
||||||
|
<X className="w-5 h-5" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div className="p-6">
|
||||||
|
<div className="mx-auto w-16 h-16 bg-blue-500 bg-opacity-10 rounded-full flex items-center justify-center mb-6">
|
||||||
|
<Gift className="w-8 h-8 text-blue-500" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 className="text-2xl font-bold text-white text-center mb-2">
|
||||||
|
Special Offer!
|
||||||
|
</h2>
|
||||||
|
<p className="text-gray-400 text-center mb-6">
|
||||||
|
Get 25% off your first game server purchase
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="bg-slate-950 p-6 rounded-lg border border-gray-800 mb-6">
|
||||||
|
<div className="text-center mb-2 text-sm text-gray-400">
|
||||||
|
Your Promo Code:
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between bg-gray-800 p-3 rounded-md">
|
||||||
|
<span className="text-xl font-mono text-white">{PROMO_CODE}</span>
|
||||||
|
<button
|
||||||
|
onClick={copyPromoCode}
|
||||||
|
className="flex items-center gap-2 text-sm text-blue-500 hover:text-blue-400"
|
||||||
|
>
|
||||||
|
{hasCopied ? (
|
||||||
|
<>
|
||||||
|
<Check className="w-4 h-4" />
|
||||||
|
<span>Copied!</span>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Copy className="w-4 h-4" />
|
||||||
|
<span>Copy</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={handleClose}
|
||||||
|
className="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700"
|
||||||
|
>
|
||||||
|
Back to GameZone
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PromoPopup;
|
||||||
63
src/components/home/CTA.jsx
Normal file
63
src/components/home/CTA.jsx
Normal file
|
|
@ -0,0 +1,63 @@
|
||||||
|
import { MessageCircle, LifeBuoy } from "lucide-react";
|
||||||
|
|
||||||
|
export const CTA = () => {
|
||||||
|
return (
|
||||||
|
<section className="bg-slate-950 py-12 md:py-24">
|
||||||
|
<div className="container max-w-screen-xl mx-auto px-4">
|
||||||
|
<div className="bg-slate-900 rounded-md border border-gray-900">
|
||||||
|
<div className="p-5 md:p-8">
|
||||||
|
<div className="max-w-3xl mx-auto text-center space-y-6">
|
||||||
|
{/* Badge */}
|
||||||
|
<div className="inline-flex items-center px-4 py-2 bg-slate-950 rounded-md border border-gray-900">
|
||||||
|
<span className="text-blue-500 text-sm font-semibold">
|
||||||
|
24/7 Support Available
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Headings */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white">
|
||||||
|
Can't Find What You're Looking For?
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-300">
|
||||||
|
Our dedicated support team is here to help you with any
|
||||||
|
questions or concerns. Get in touch with us through Discord or
|
||||||
|
create a support ticket for immediate assistance.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Action Buttons */}
|
||||||
|
<div className="flex flex-col sm:flex-row gap-2 md:gap-4 justify-center pt-4">
|
||||||
|
<a
|
||||||
|
href="https://discord.gg/yourserver"
|
||||||
|
className="inline-flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md font-medium transition-all duration-200 border border-transparent"
|
||||||
|
>
|
||||||
|
<MessageCircle className="w-5 h-5" />
|
||||||
|
Join Our Discord
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="/support"
|
||||||
|
className="inline-flex items-center justify-center gap-2 bg-slate-950 text-white px-8 py-3 rounded-md font-medium transition-all duration-200 border border-gray-900"
|
||||||
|
>
|
||||||
|
<LifeBuoy className="w-5 h-5 text-blue-500" />
|
||||||
|
Visit Support Center
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Additional Info */}
|
||||||
|
<div className="pt-3 text-gray-400">
|
||||||
|
Average response time:
|
||||||
|
<br />
|
||||||
|
<span className="text-blue-500 font-semibold">
|
||||||
|
Under 1 Hour
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CTA;
|
||||||
205
src/components/home/FAQ.jsx
Normal file
205
src/components/home/FAQ.jsx
Normal file
|
|
@ -0,0 +1,205 @@
|
||||||
|
import React, { useState } from "react";
|
||||||
|
import {
|
||||||
|
ChevronDown,
|
||||||
|
Search,
|
||||||
|
X,
|
||||||
|
CreditCard,
|
||||||
|
Gamepad,
|
||||||
|
HelpCircle,
|
||||||
|
} from "lucide-react";
|
||||||
|
|
||||||
|
const faqData = {
|
||||||
|
general: [
|
||||||
|
{
|
||||||
|
question: "How do I get started?",
|
||||||
|
answer:
|
||||||
|
"Simply choose your game server, select a plan, and your server will be instantly deployed. Our control panel makes setup easy and intuitive.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "Do you offer 24/7 support?",
|
||||||
|
answer:
|
||||||
|
"Yes, our support team is available 24/7 through live chat, ticket system, and Discord. We typically respond within 5 minutes.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "What locations do you offer?",
|
||||||
|
answer:
|
||||||
|
"Currently live in Phoenix, AZ, with new nodes planned for NYC, Germany, and beyond. We’re building a global network focused on low-latency, high-uptime performance for gamers everywhere.",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
billing: [
|
||||||
|
{
|
||||||
|
question: "What payment methods do you accept?",
|
||||||
|
answer:
|
||||||
|
"We accept all major credit cards and PayPal. All payments are processed securely.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "Do you offer refunds?",
|
||||||
|
answer:
|
||||||
|
"Yes, we offer a 48-hour refund policy. Refunds are granted for valid reasons within this time frame. After 48 hours, refunds are no longer available. Please note that each client is eligible for one refund every six months.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "Can I upgrade my plan anytime?",
|
||||||
|
answer:
|
||||||
|
"Yes, you can upgrade or your plan at any time. Changes take effect immediately and billing is prorated.",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
gameServers: [
|
||||||
|
// {
|
||||||
|
// question: "How do I install mods?",
|
||||||
|
// answer:
|
||||||
|
// "Our control panel features one-click mod installation for popular modpacks. You can also manually upload mods through FTP.",
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
question: "What's the minimum RAM recommended?",
|
||||||
|
answer:
|
||||||
|
"For Minecraft, we suggest 2GB for every 10 players. Other games vary.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "Do you provide DDoS protection?",
|
||||||
|
answer:
|
||||||
|
"Yes, all servers include enterprise-grade DDoS protection up to 17Tbps at no extra cost.",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const tabs = [
|
||||||
|
{ id: "general", label: "General", icon: HelpCircle },
|
||||||
|
{ id: "billing", label: "Billing", icon: CreditCard },
|
||||||
|
{ id: "gameServers", label: "Game Servers", icon: Gamepad },
|
||||||
|
];
|
||||||
|
|
||||||
|
const FAQItem = ({ question, answer, isOpen, onToggle }) => {
|
||||||
|
return (
|
||||||
|
<div className="bg-slate-950 border border-gray-900 rounded-md">
|
||||||
|
<button
|
||||||
|
className="w-full py-5 px-5 flex items-center justify-between text-left focus:outline-none"
|
||||||
|
onClick={onToggle}
|
||||||
|
aria-expanded={isOpen}
|
||||||
|
>
|
||||||
|
<span className="text-lg font-medium text-white pr-8">{question}</span>
|
||||||
|
<ChevronDown
|
||||||
|
className={`w-5 h-5 text-gray-400 transition-transform duration-200 ${
|
||||||
|
isOpen ? "rotate-180" : ""
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
<div
|
||||||
|
className={`overflow-hidden transition-all duration-200 ${
|
||||||
|
isOpen ? "max-h-96" : "max-h-0"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="px-5 pb-5 text-gray-400">{answer}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const FAQ = () => {
|
||||||
|
const [activeTab, setActiveTab] = useState("general");
|
||||||
|
const [expandedQuestions, setExpandedQuestions] = useState([]);
|
||||||
|
const [searchQuery, setSearchQuery] = useState("");
|
||||||
|
|
||||||
|
const handleToggleQuestion = (id) => {
|
||||||
|
setExpandedQuestions((prev) =>
|
||||||
|
prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const filteredQuestions = searchQuery
|
||||||
|
? faqData[activeTab].filter(
|
||||||
|
(item) =>
|
||||||
|
item.question.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
|
item.answer.toLowerCase().includes(searchQuery.toLowerCase())
|
||||||
|
)
|
||||||
|
: faqData[activeTab];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="py-12 md:py-24 bg-slate-900">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<div className="text-center max-w-2xl mx-auto mb-6">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
|
||||||
|
Frequently Asked Questions
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-300">
|
||||||
|
Find answers to common questions about our services
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Search Bar */}
|
||||||
|
<div className="max-w-3xl mx-auto mb-6">
|
||||||
|
<div className="bg-slate-950 rounded-md border border-gray-900">
|
||||||
|
<div className="relative">
|
||||||
|
<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search questions..."
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
className="w-full bg-transparent text-white pl-12 pr-12 py-3 rounded-md focus:outline-none"
|
||||||
|
/>
|
||||||
|
{searchQuery && (
|
||||||
|
<button
|
||||||
|
onClick={() => setSearchQuery("")}
|
||||||
|
className="absolute right-4 top-1/2 -translate-y-1/2"
|
||||||
|
>
|
||||||
|
<X className="w-5 h-5 text-gray-400 hover:text-blue-500 transition-colors duration-200" />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tabs */}
|
||||||
|
<div className="max-w-5xl mx-auto">
|
||||||
|
<div className="flex justify-center mb-8">
|
||||||
|
<div className="inline-flex bg-slate-950 p-1 rounded-md border border-gray-900">
|
||||||
|
{tabs.map((tab) => {
|
||||||
|
const Icon = tab.icon;
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={tab.id}
|
||||||
|
onClick={() => setActiveTab(tab.id)}
|
||||||
|
className={`
|
||||||
|
flex items-center gap-2 px-6 py-2 rounded-md font-medium transition-all duration-200
|
||||||
|
${
|
||||||
|
activeTab === tab.id
|
||||||
|
? "bg-blue-600 text-white"
|
||||||
|
: "text-gray-400 hover:text-white"
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
<Icon className="w-5 h-5" />
|
||||||
|
{tab.label}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* FAQ Items */}
|
||||||
|
<div className="space-y-1 md:space-y-2">
|
||||||
|
{filteredQuestions.map((item, index) => (
|
||||||
|
<FAQItem
|
||||||
|
key={index}
|
||||||
|
question={item.question}
|
||||||
|
answer={item.answer}
|
||||||
|
isOpen={expandedQuestions.includes(`${activeTab}-${index}`)}
|
||||||
|
onToggle={() => handleToggleQuestion(`${activeTab}-${index}`)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{filteredQuestions.length === 0 && (
|
||||||
|
<div className="bg-slate-950 p-5 rounded-md border border-gray-900 text-center">
|
||||||
|
<p className="text-gray-400">
|
||||||
|
No questions found matching your search.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FAQ;
|
||||||
97
src/components/home/FeaturesSection.jsx
Normal file
97
src/components/home/FeaturesSection.jsx
Normal file
|
|
@ -0,0 +1,97 @@
|
||||||
|
import { Cpu, Shield, Zap, Globe, HardDrive, Network } from "lucide-react";
|
||||||
|
|
||||||
|
const featureCards = [
|
||||||
|
{
|
||||||
|
icon: Cpu,
|
||||||
|
title: "AMD Ryzen Processors",
|
||||||
|
description:
|
||||||
|
"Latest generation AMD Ryzen processors delivering exceptional performance for your gaming needs.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Shield,
|
||||||
|
title: "DDoS Protection",
|
||||||
|
description:
|
||||||
|
"Enterprise-grade protection against DDoS attacks, keeping your server safe 24/7.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Zap,
|
||||||
|
title: "Low Latency Network",
|
||||||
|
description:
|
||||||
|
"Optimized network infrastructure ensuring minimal latency for smooth gameplay.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: HardDrive,
|
||||||
|
title: "NVMe Storage",
|
||||||
|
description:
|
||||||
|
"Lightning-fast NVMe SSDs for rapid game loading and data access times.",
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// icon: Network,
|
||||||
|
// title: "Multi-Location",
|
||||||
|
// description:
|
||||||
|
// "Strategic server locations worldwide for optimal ping and performance",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// icon: Globe,
|
||||||
|
// title: "Global CDN",
|
||||||
|
// description:
|
||||||
|
// "Content delivery network ensuring fast downloads and updates worldwide",
|
||||||
|
// },
|
||||||
|
];
|
||||||
|
|
||||||
|
const FeatureCard = ({ icon: Icon, title, description }) => {
|
||||||
|
return (
|
||||||
|
<div className="bg-slate-900 p-6 rounded-md border border-gray-900">
|
||||||
|
<div className="relative">
|
||||||
|
<div className="relative flex flex-col items-center text-center">
|
||||||
|
<div className="bg-slate-950 p-4 rounded-md border border-gray-900 mb-4">
|
||||||
|
<Icon size={32} className="text-blue-400" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-semibold text-white mb-3">{title}</h3>
|
||||||
|
<p className="text-gray-400 leading-relaxed">{description}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const FeatureSection = () => {
|
||||||
|
return (
|
||||||
|
<section className="bg-slate-950 py-20 md:py-32">
|
||||||
|
<div className="container max-w-screen-xl mx-auto px-4">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
|
||||||
|
Powered by Premium Hardware
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-300 max-w-2xl mx-auto">
|
||||||
|
Experience top-tier performance with our enterprise-grade
|
||||||
|
infrastructure, designed specifically for gaming excellence.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Feature Cards Grid */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 md:gap-8">
|
||||||
|
{featureCards.map((card, index) => (
|
||||||
|
<FeatureCard
|
||||||
|
key={index}
|
||||||
|
icon={card.icon}
|
||||||
|
title={card.title}
|
||||||
|
description={card.description}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="text-center mt-16">
|
||||||
|
<a
|
||||||
|
href="/specs"
|
||||||
|
className="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md font-medium transition-all duration-300 border border-transparent group relative"
|
||||||
|
>
|
||||||
|
<span className="relative">View Full Specifications</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FeatureSection;
|
||||||
98
src/components/home/HeroSection.jsx
Normal file
98
src/components/home/HeroSection.jsx
Normal file
|
|
@ -0,0 +1,98 @@
|
||||||
|
import { FileQuestion, ChevronRight, Zap, Headphones } from "lucide-react";
|
||||||
|
|
||||||
|
export const HeroSection = () => {
|
||||||
|
const featureItems = [
|
||||||
|
{
|
||||||
|
title: "Instant Access",
|
||||||
|
icon: <Zap className="w-5 h-5 text-blue-500" />,
|
||||||
|
description: "Get started in minutes, not hours.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "No Overselling",
|
||||||
|
icon: <ChevronRight className="w-5 h-5 text-blue-500" />,
|
||||||
|
description: "Pure performance. No limits. No compromises.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "24/7 Support",
|
||||||
|
icon: <Headphones className="w-5 h-5 text-blue-500" />,
|
||||||
|
description: "We're here whenever you need us.",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="bg-slate-900 min-h-auto md:min-h-screen py-12 md:py-24">
|
||||||
|
<div className="container max-w-screen-xl mx-auto px-4">
|
||||||
|
<div className="flex flex-col md:flex-row items-center justify-between gap-12">
|
||||||
|
<div className="flex-1 text-white">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="inline-flex items-center px-4 py-2 rounded-md bg-slate-950 border border-gray-900 mb-6">
|
||||||
|
<FileQuestion className="w-5 h-5 text-blue-500 mr-2" />
|
||||||
|
<span className="text-sm font-semibold text-gray-300">
|
||||||
|
Tired of your server lagging?
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main Content */}
|
||||||
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
|
||||||
|
Skylink Hosting Has <br />
|
||||||
|
<span className="text-blue-500">Your Back</span>!
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-gray-300 mb-8 leading-relaxed">
|
||||||
|
Deploy your Game or VPS server in seconds and experience low latency, high performance, and 24/7 support—designed with you in mind.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Feature List */}
|
||||||
|
<ul className="space-y-4 mb-8">
|
||||||
|
{featureItems.map((feature, index) => (
|
||||||
|
<li key={index} className="group">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="w-12 h-12 bg-slate-950 rounded-md border border-gray-900 flex items-center justify-center">
|
||||||
|
{feature.icon}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-lg text-white">
|
||||||
|
{feature.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-400 text-sm">
|
||||||
|
{feature.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
{/* Buttons */}
|
||||||
|
<div className="flex flex-wrap gap-4">
|
||||||
|
<a
|
||||||
|
href="/games"
|
||||||
|
className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md font-medium transition-all duration-200 border border-transparent"
|
||||||
|
>
|
||||||
|
View Games
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="/vps"
|
||||||
|
className="bg-slate-950 text-white px-8 py-3 rounded-md font-medium transition-all duration-200"
|
||||||
|
>
|
||||||
|
Deploy a VPS
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Image */}
|
||||||
|
<div className="hidden md:block md:flex-1">
|
||||||
|
<div className="bg-slate-950 rounded-md">
|
||||||
|
<img
|
||||||
|
src="/images/hero.jpg"
|
||||||
|
alt="Gaming server infrastructure"
|
||||||
|
className="rounded-md w-full h-auto"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HeroSection;
|
||||||
114
src/components/home/Infrastructure.jsx
Normal file
114
src/components/home/Infrastructure.jsx
Normal file
|
|
@ -0,0 +1,114 @@
|
||||||
|
import { ServerCog, Shield, Cpu, Network, Workflow } from "lucide-react";
|
||||||
|
|
||||||
|
export const Infrastructure = () => {
|
||||||
|
const Features = [
|
||||||
|
{
|
||||||
|
icon: Network,
|
||||||
|
image: "/images/location.jpg",
|
||||||
|
title: "Premium Datacenter",
|
||||||
|
description:
|
||||||
|
"Enterprise-grade infrastructure hosted in tier-1 datacenters with redundant power and cooling",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Shield,
|
||||||
|
image: "/images/high-performance.jpg",
|
||||||
|
title: "DDoS Protection",
|
||||||
|
description:
|
||||||
|
"Advanced layer 7 protection against DDoS attacks with automatic mitigation systems",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Cpu,
|
||||||
|
image: "/images/hardware.jpg",
|
||||||
|
title: "High Performance",
|
||||||
|
description:
|
||||||
|
"Latest generation AMD Ryzen processors and NVMe storage for optimal gaming experience",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const FeatureCard = ({ icon: Icon, image, title, description }) => {
|
||||||
|
return (
|
||||||
|
<div className="bg-slate-900 rounded-md border border-gray-900">
|
||||||
|
<div className="relative h-48">
|
||||||
|
<img
|
||||||
|
src={image}
|
||||||
|
alt={title}
|
||||||
|
className="w-full h-full object-cover rounded-t-md"
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-gray-900 via-gray-900/50 to-transparent" />
|
||||||
|
<div className="absolute bottom-4 left-4 bg-slate-950 p-3 rounded-md border border-gray-900">
|
||||||
|
<Icon className="w-6 h-6 text-blue-500" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="p-5">
|
||||||
|
<h3 className="text-xl font-semibold text-white mb-2">{title}</h3>
|
||||||
|
<p className="text-gray-400">{description}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="bg-slate-950 py-24">
|
||||||
|
<div className="container max-w-screen-xl mx-auto px-4">
|
||||||
|
{/* Hero */}
|
||||||
|
<div className="flex flex-col md:flex-row items-center justify-between gap-12 mb-16">
|
||||||
|
<div className="flex-1 order-2 md:order-1">
|
||||||
|
<div className="bg-slate-950 rounded-md">
|
||||||
|
<img
|
||||||
|
src="/images/datacenter.jpg"
|
||||||
|
alt="Infrastructure Overview"
|
||||||
|
className="rounded-md w-full h-auto"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-1 text-white order-1 md:order-2">
|
||||||
|
{/* <div className="inline-flex items-center px-4 py-2 rounded-md bg-slate-900 border border-gray-900 mb-6">
|
||||||
|
<ServerCog className="w-5 h-5 text-blue-500 mr-2" />
|
||||||
|
<span className="text-sm font-semibold">Tier-1 Datacenter</span>
|
||||||
|
</div> */}
|
||||||
|
|
||||||
|
<h1 className="text-4xl md:text-5xl font-bold mb-6 leading-tight">
|
||||||
|
Enterprise-Grade{" "}
|
||||||
|
<span className="text-blue-500">Infrastructure</span>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p className="text-xl text-gray-300 mb-8 leading-relaxed">
|
||||||
|
Experience gaming without limits. Our infrastructure is built to
|
||||||
|
deliver exceptional performance, reliability, and security for
|
||||||
|
your gaming needs. Powered by the latest hardware and protected by
|
||||||
|
enterprise security solutions.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap gap-4">
|
||||||
|
<a
|
||||||
|
href="/specs"
|
||||||
|
className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md font-medium transition-all duration-200 border border-transparent"
|
||||||
|
>
|
||||||
|
<span className="flex items-center gap-2">
|
||||||
|
<Workflow className="w-5 h-5" />
|
||||||
|
View Our Specs
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Features Grid */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 md:gap-8">
|
||||||
|
{Features.map((card, index) => (
|
||||||
|
<FeatureCard
|
||||||
|
key={index}
|
||||||
|
icon={card.icon}
|
||||||
|
image={card.image}
|
||||||
|
title={card.title}
|
||||||
|
description={card.description}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Infrastructure;
|
||||||
48
src/components/home/PowerOn.jsx
Normal file
48
src/components/home/PowerOn.jsx
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
export const GlobalNetwork = () => {
|
||||||
|
return (
|
||||||
|
<section className="bg-slate-950 py-24">
|
||||||
|
<div className="container max-w-screen-xl mx-auto px-4">
|
||||||
|
<div className="flex flex-col md:flex-row items-center justify-between gap-12">
|
||||||
|
{/* Left Side */}
|
||||||
|
<div className="flex-1 text-white">
|
||||||
|
<h1 className="text-4xl md:text-5xl font-bold mb-6 leading-tight">
|
||||||
|
What are you waiting for?
|
||||||
|
<br />
|
||||||
|
<span className="text-blue-500">Start today!</span>
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-gray-300 mb-8 leading-relaxed">
|
||||||
|
Deploy your server on our global low-latency network, engineered for peak performance and uptime. With strategically placed locations worldwide, your players stay connected and your setup stays solid—built for gamers, optimized for tech enthusiasts.
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-wrap gap-4">
|
||||||
|
<a
|
||||||
|
href="/games"
|
||||||
|
className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md font-medium transition-all duration-200 border border-transparent"
|
||||||
|
>
|
||||||
|
Explore Our Games
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="/vps"
|
||||||
|
className="bg-gray-900 text-white px-8 py-3 rounded-md font-medium transition-all duration-200"
|
||||||
|
>
|
||||||
|
Deploy a VPS
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Side */}
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="bg-slate-950 rounded-md">
|
||||||
|
<img
|
||||||
|
src="/images/power-on.jpg"
|
||||||
|
alt="Global Network"
|
||||||
|
className="rounded-md w-full h-auto"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default GlobalNetwork;
|
||||||
77
src/components/home/Technologies.jsx
Normal file
77
src/components/home/Technologies.jsx
Normal file
|
|
@ -0,0 +1,77 @@
|
||||||
|
const Technologies = () => {
|
||||||
|
const partners = [
|
||||||
|
{
|
||||||
|
name: "Cloudflare",
|
||||||
|
description: "CDN & Transfer",
|
||||||
|
image:
|
||||||
|
"https://upload.wikimedia.org/wikipedia/commons/9/94/Cloudflare_Logo.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "AMD",
|
||||||
|
description: "Server Processors",
|
||||||
|
image:
|
||||||
|
"https://cdn.freebiesupply.com/logos/large/2x/amd-4-logo-png-transparent.png",
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// name: "Intel",
|
||||||
|
// description: "Network Infrastructure",
|
||||||
|
// image:
|
||||||
|
// "https://logos-world.net/wp-content/uploads/2021/09/Intel-Logo-2006-2020-700x394.png",
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
name: "Path.net",
|
||||||
|
description: "DDoS Protection",
|
||||||
|
image: "/images/pathnet.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Cisco",
|
||||||
|
description: "Network Hardware",
|
||||||
|
image:
|
||||||
|
"https://images.seeklogo.com/logo-png/3/2/cisco-logo-png_seeklogo-30674.png?v=1958567672452173352",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="bg-slate-900 py-24">
|
||||||
|
<div className="container mx-auto max-w-screen-xl px-4">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
|
||||||
|
Trusted Technologies
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-300 max-w-2xl mx-auto">
|
||||||
|
We work with industry leaders to deliver the best gaming experience
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-2 md:gap-8">
|
||||||
|
{partners.map((partner) => (
|
||||||
|
<div key={partner.name} className="w-full">
|
||||||
|
<div className="bg-slate-950 rounded-md p-5 border border-gray-900">
|
||||||
|
<div className="flex flex-col items-center">
|
||||||
|
<div className="w-24 h-24 flex items-center justify-center mb-4">
|
||||||
|
<img
|
||||||
|
src={partner.image}
|
||||||
|
alt={`${partner.name} logo`}
|
||||||
|
className="max-w-full h-auto"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<h3 className="text-white font-medium mb-1">
|
||||||
|
{partner.name}
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-400 text-sm">
|
||||||
|
{partner.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Technologies;
|
||||||
98
src/index.css
Normal file
98
src/index.css
Normal file
|
|
@ -0,0 +1,98 @@
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
/* Default scrollbar styles */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Track */
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: #1f2937; /* gray-800 */
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Handle */
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #374151; /* gray-700 */
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 2px solid #1f2937; /* gray-800 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Handle on hover */
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #4b5563; /* gray-600 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Handle on active */
|
||||||
|
::-webkit-scrollbar-thumb:active {
|
||||||
|
background: #6b7280; /* gray-500 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Firefox scrollbar styles */
|
||||||
|
* {
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: #374151 #1f2937; /* thumb track */
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollbar-hide {
|
||||||
|
-ms-overflow-style: none; /* IE and Edge */
|
||||||
|
scrollbar-width: none; /* Firefox */
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollbar-hide::-webkit-scrollbar {
|
||||||
|
display: none; /* Chrome, Safari and Opera */
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-scrollbar {
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: #3b82f6 #1f2937;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-scrollbar::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-track {
|
||||||
|
background: #1f2937;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||||
|
background: #3b82f6;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 2px solid #1f2937;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #2563eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* For dark theme */
|
||||||
|
.dark ::-webkit-scrollbar-track {
|
||||||
|
background: #111827;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark ::-webkit-scrollbar-thumb {
|
||||||
|
background: #1f2937;
|
||||||
|
border: 2px solid #111827;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark ::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #374151;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer utilities {
|
||||||
|
.scrollbar-thin {
|
||||||
|
scrollbar-width: thin;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollbar-none {
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
10
src/main.jsx
Normal file
10
src/main.jsx
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
import { StrictMode } from "react";
|
||||||
|
import { createRoot } from "react-dom/client";
|
||||||
|
import "./index.css";
|
||||||
|
import App from "./App.jsx";
|
||||||
|
|
||||||
|
createRoot(document.getElementById("root")).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>
|
||||||
|
);
|
||||||
267
src/pages/AUPPage.jsx
Normal file
267
src/pages/AUPPage.jsx
Normal file
|
|
@ -0,0 +1,267 @@
|
||||||
|
import React from "react";
|
||||||
|
import {
|
||||||
|
Calendar,
|
||||||
|
Ban,
|
||||||
|
XCircle,
|
||||||
|
CheckCircle,
|
||||||
|
HardDrive,
|
||||||
|
Network,
|
||||||
|
Cpu,
|
||||||
|
AlertTriangle,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { Helmet } from "react-helmet";
|
||||||
|
|
||||||
|
const AUPPage = () => {
|
||||||
|
const lastUpdated = "January 1, 2025";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-slate-900">
|
||||||
|
<Helmet>
|
||||||
|
<title>Acceptable Use Policy | GameZone</title>
|
||||||
|
</Helmet>
|
||||||
|
{/* Hero */}
|
||||||
|
<section className="py-12 md:py-24">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<div className="text-center max-w-3xl mx-auto">
|
||||||
|
<h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
|
||||||
|
Acceptable Use Policy
|
||||||
|
</h1>
|
||||||
|
<div className="flex items-center justify-center gap-2 text-gray-300">
|
||||||
|
<Calendar className="w-5 h-5" />
|
||||||
|
<span>Last Updated: {lastUpdated}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<section className="py-12 md:py-24 bg-slate-950">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
{/* Warning Box */}
|
||||||
|
<div className="bg-slate-900 border border-slate-900 rounded-md p-5 mb-16">
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="bg-slate-950 p-2 rounded-md">
|
||||||
|
<AlertTriangle className="w-6 h-6 text-blue-500" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 className="text-xl font-semibold text-white mb-2">
|
||||||
|
Important Notice
|
||||||
|
</h2>
|
||||||
|
<p className="text-gray-300">
|
||||||
|
Violation of this Acceptable Use Policy may result in
|
||||||
|
suspension or termination of your services without notice.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main Content */}
|
||||||
|
<div className="space-y-6">
|
||||||
|
<section>
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
|
||||||
|
1. Overview
|
||||||
|
</h2>
|
||||||
|
<div className="bg-slate-900 rounded-md p-5">
|
||||||
|
<p className="text-gray-300 mb-4">
|
||||||
|
This Acceptable Use Policy ("AUP") outlines the rules and
|
||||||
|
guidelines for using our hosting services. By using our
|
||||||
|
services, you agree to comply with this policy.
|
||||||
|
</p>
|
||||||
|
<p className="text-gray-300">
|
||||||
|
We reserve the right to modify this policy at any time.
|
||||||
|
Continued use of our services constitutes acceptance of any
|
||||||
|
modifications.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Resource Usage */}
|
||||||
|
<section>
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
|
||||||
|
2. Resource Usage
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-2 md:gap-8">
|
||||||
|
<div className="bg-slate-900 rounded-md p-5">
|
||||||
|
<div className="mb-4">
|
||||||
|
<Cpu className="w-8 h-8 text-blue-500" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-semibold text-white mb-4">
|
||||||
|
CPU Usage
|
||||||
|
</h3>
|
||||||
|
<ul className="space-y-2 text-gray-300">
|
||||||
|
<li>No excessive CPU usage affecting other users</li>
|
||||||
|
<li>Background processes must be properly optimized</li>
|
||||||
|
<li>CPU-intensive tasks require prior approval</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-slate-900 rounded-md p-5">
|
||||||
|
<div className="mb-4">
|
||||||
|
<HardDrive className="w-8 h-8 text-blue-500" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-semibold text-white mb-4">
|
||||||
|
Storage Usage
|
||||||
|
</h3>
|
||||||
|
<ul className="space-y-2 text-gray-300">
|
||||||
|
<li>Storage must be used for active content only</li>
|
||||||
|
<li>Backup storage limits must be respected</li>
|
||||||
|
<li>No storing of illegal or infringing content</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-slate-900 rounded-md p-5">
|
||||||
|
<div className="mb-4">
|
||||||
|
<Network className="w-8 h-8 text-blue-500" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-semibold text-white mb-4">
|
||||||
|
Network Usage
|
||||||
|
</h3>
|
||||||
|
<ul className="space-y-2 text-gray-300">
|
||||||
|
<li>No excessive bandwidth consumption</li>
|
||||||
|
<li>Network traffic must be legitimate</li>
|
||||||
|
<li>Content delivery must be optimized</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Prohibited Activities */}
|
||||||
|
<section>
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
|
||||||
|
3. Prohibited Activities
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-8">
|
||||||
|
<div className="bg-slate-900 rounded-md p-5">
|
||||||
|
<div className="mb-4">
|
||||||
|
<Ban className="w-8 h-8 text-blue-500" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-semibold text-white mb-4">
|
||||||
|
Security Violations
|
||||||
|
</h3>
|
||||||
|
<ul className="space-y-2 text-gray-300">
|
||||||
|
<li>Network scanning or probing</li>
|
||||||
|
<li>Unauthorized access attempts</li>
|
||||||
|
<li>DDoS attacks or botnets</li>
|
||||||
|
<li>Malware distribution</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div className="bg-slate-900 rounded-md p-5">
|
||||||
|
<div className="mb-4">
|
||||||
|
<XCircle className="w-8 h-8 text-blue-500" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-semibold text-white mb-4">
|
||||||
|
Content Restrictions
|
||||||
|
</h3>
|
||||||
|
<ul className="space-y-2 text-gray-300">
|
||||||
|
<li>Illegal content</li>
|
||||||
|
<li>Copyrighted material without permission</li>
|
||||||
|
<li>Spam or unsolicited email</li>
|
||||||
|
<li>Adult content without proper safeguards</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Required Actions */}
|
||||||
|
<section>
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
|
||||||
|
4. Required Actions
|
||||||
|
</h2>
|
||||||
|
<div className="bg-slate-900 rounded-md p-5">
|
||||||
|
<div className="space-y-8">
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="bg-slate-950 p-2 rounded-md">
|
||||||
|
<CheckCircle className="w-6 h-6 text-blue-500" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xl font-semibold text-white mb-2">
|
||||||
|
Security Updates
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-300">
|
||||||
|
Maintain up-to-date security patches and software
|
||||||
|
versions
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="bg-slate-950 p-2 rounded-md">
|
||||||
|
<CheckCircle className="w-6 h-6 text-blue-500" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xl font-semibold text-white mb-2">
|
||||||
|
Access Controls
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-300">
|
||||||
|
Implement strong passwords and secure access controls
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="bg-slate-950 p-2 rounded-md">
|
||||||
|
<CheckCircle className="w-6 h-6 text-blue-500" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xl font-semibold text-white mb-2">
|
||||||
|
Monitoring
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-300">
|
||||||
|
Monitor for and report any security incidents
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Enforcement */}
|
||||||
|
<section>
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
|
||||||
|
5. Enforcement
|
||||||
|
</h2>
|
||||||
|
<div className="bg-slate-900 rounded-md p-5">
|
||||||
|
<p className="text-gray-300 mb-4">We reserve the right to:</p>
|
||||||
|
<ul className="space-y-2 text-gray-300">
|
||||||
|
<li>Investigate violations of this AUP</li>
|
||||||
|
<li>
|
||||||
|
Take action against violations, including service suspension
|
||||||
|
</li>
|
||||||
|
<li>Remove or disable access to any content or resource</li>
|
||||||
|
<li>Cooperate with law enforcement when required</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Report Violations */}
|
||||||
|
<section className="bg-slate-900 rounded-md p-8 text-center">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
|
||||||
|
Report a Violation
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-300 mb-8">
|
||||||
|
If you discover a violation of our Acceptable Use Policy, please
|
||||||
|
report it immediately.
|
||||||
|
</p>
|
||||||
|
<div className="flex justify-center gap-2 md:gap-4">
|
||||||
|
<button className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md font-medium transition-all duration-200">
|
||||||
|
Report Abuse
|
||||||
|
</button>
|
||||||
|
<button className="bg-slate-950 text-white px-8 py-3 rounded-md font-medium transition-all duration-200 border border-slate-900">
|
||||||
|
Contact Support
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Footer Note */}
|
||||||
|
<div className="text-center text-gray-400">
|
||||||
|
<p>
|
||||||
|
This Acceptable Use Policy was last updated on {lastUpdated}.
|
||||||
|
</p>
|
||||||
|
<p>Copyright © 2025 Your Company Name. All rights reserved.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AUPPage;
|
||||||
316
src/pages/AboutPage.jsx
Normal file
316
src/pages/AboutPage.jsx
Normal file
|
|
@ -0,0 +1,316 @@
|
||||||
|
import React from "react";
|
||||||
|
import {
|
||||||
|
Users,
|
||||||
|
Heart,
|
||||||
|
Zap,
|
||||||
|
Globe,
|
||||||
|
Shield,
|
||||||
|
Cpu,
|
||||||
|
Cloud,
|
||||||
|
Rocket,
|
||||||
|
Code,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { Helmet } from "react-helmet";
|
||||||
|
|
||||||
|
const team = [
|
||||||
|
{
|
||||||
|
name: "26BZ",
|
||||||
|
role: "CEO",
|
||||||
|
image:
|
||||||
|
"https://cdn.discordapp.com/avatars/999168396904120412/585a62c39845040211f411d14acbbf17",
|
||||||
|
bio: "10+ years in game server infrastructure",
|
||||||
|
links: {
|
||||||
|
twitter: "https://twitter.com/example",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const milestones = [
|
||||||
|
{
|
||||||
|
year: "2024",
|
||||||
|
title: "Company Founded",
|
||||||
|
description: "Started with a vision to revolutionize game hosting",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
year: "2024",
|
||||||
|
title: "First Data Center",
|
||||||
|
description: "Launched our first data center in Los Angeles",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const roadmap = [
|
||||||
|
{
|
||||||
|
quarter: "Q2 2025",
|
||||||
|
title: "Next-Gen Infrastructure",
|
||||||
|
description: "Rolling out AMD Ryzen 9 processors across all locations",
|
||||||
|
icon: Cpu,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
quarter: "Q3 2025",
|
||||||
|
title: "AI-Powered Management",
|
||||||
|
description: "Introducing AI-driven scaling",
|
||||||
|
icon: Code,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
quarter: "Q4 2025",
|
||||||
|
title: "Global Edge Network",
|
||||||
|
description: "Launching edge locations for reduced latency",
|
||||||
|
icon: Globe,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
quarter: "Q1 2026",
|
||||||
|
title: "Enterprise Platform",
|
||||||
|
description: "New platform for Game Panel",
|
||||||
|
icon: Cloud,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const values = [
|
||||||
|
{
|
||||||
|
icon: Heart,
|
||||||
|
title: "Customer First",
|
||||||
|
description: "Every decision we make starts with our customers' needs",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Zap,
|
||||||
|
title: "Performance Obsessed",
|
||||||
|
description: "Constantly pushing the boundaries of server performance",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Shield,
|
||||||
|
title: "Security Focused",
|
||||||
|
description: "Enterprise-grade security at every level",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Users,
|
||||||
|
title: "Community Driven",
|
||||||
|
description: "Building and supporting gaming communities worldwide",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const AboutPage = () => {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-900">
|
||||||
|
<Helmet>
|
||||||
|
<title>About Us | GameZone</title>
|
||||||
|
</Helmet>
|
||||||
|
{/* Hero */}
|
||||||
|
<section className="py-12 md:py-24">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<div className="max-w-3xl">
|
||||||
|
<h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
|
||||||
|
Building the Future of
|
||||||
|
<br />
|
||||||
|
<span className="text-blue-500">Game Hosting</span>
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-gray-300 mb-8">
|
||||||
|
Since 2020, GameZone has been revolutionizing game hosting with
|
||||||
|
cutting-edge infrastructure and unparalleled support. We're on a
|
||||||
|
mission to make game hosting accessible, powerful, and reliable
|
||||||
|
for everyone.
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-wrap gap-4">
|
||||||
|
<a
|
||||||
|
href="/careers"
|
||||||
|
className="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md font-medium transition-all duration-200"
|
||||||
|
>
|
||||||
|
<Rocket className="w-5 h-5" />
|
||||||
|
Join Our Team
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="/contact"
|
||||||
|
className="inline-flex items-center gap-2 bg-slate-950 text-white px-8 py-3 rounded-md font-medium transition-all duration-200 border border-gray-900"
|
||||||
|
>
|
||||||
|
Contact Us
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Stats Section */}
|
||||||
|
<section className="py-12 md:py-24 bg-slate-950">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-8">
|
||||||
|
{[
|
||||||
|
{ value: "50K+", label: "Active Servers" },
|
||||||
|
{ value: "15+", label: "Global Locations" },
|
||||||
|
{ value: "99.99%", label: "Uptime" },
|
||||||
|
{ value: "24/7", label: "Support" },
|
||||||
|
].map((stat, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="bg-gray-900 p-5 rounded-md text-center"
|
||||||
|
>
|
||||||
|
<div className="text-3xl font-bold text-white mb-2">
|
||||||
|
{stat.value}
|
||||||
|
</div>
|
||||||
|
<div className="text-gray-400">{stat.label}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Values Section */}
|
||||||
|
<section className="py-12 md:py-24 bg-gray-900">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<div className="text-center max-w-2xl mx-auto mb-6">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
|
||||||
|
Our Values
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-300">
|
||||||
|
The core principles that drive everything we do
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 md:gap-8">
|
||||||
|
{values.map((value, index) => (
|
||||||
|
<div key={index} className="bg-slate-950 p-5 rounded-md">
|
||||||
|
<value.icon className="w-12 h-12 text-blue-500 mb-4" />
|
||||||
|
<h3 className="text-xl font-semibold text-white mb-2">
|
||||||
|
{value.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-400">{value.description}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Team Section */}
|
||||||
|
<section className="py-12 md:py-24 bg-slate-950">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<div className="text-center max-w-2xl mx-auto mb-16">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
|
||||||
|
Meet Our Team
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-300">
|
||||||
|
The passionate people behind GameZone
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 md:gap-8">
|
||||||
|
{team.map((member, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="bg-gray-900 rounded-md overflow-hidden border border-gray-900"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={member.image}
|
||||||
|
alt={member.name}
|
||||||
|
className="w-full aspect-square object-cover"
|
||||||
|
/>
|
||||||
|
<div className="p-5">
|
||||||
|
<h3 className="text-xl font-semibold text-white mb-1">
|
||||||
|
{member.name}
|
||||||
|
</h3>
|
||||||
|
<div className="text-blue-500 mb-2">{member.role}</div>
|
||||||
|
<p className="text-gray-400 text-sm mb-4">{member.bio}</p>
|
||||||
|
<div className="flex gap-4">
|
||||||
|
{Object.entries(member.links).map(([platform, url]) => (
|
||||||
|
<a
|
||||||
|
key={platform}
|
||||||
|
href={url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-gray-400 hover:text-blue-500 transition-colors duration-200"
|
||||||
|
>
|
||||||
|
{platform}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Milestones Section */}
|
||||||
|
<section className="py-12 md:py-24 bg-gray-900">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<div className="text-center max-w-2xl mx-auto mb-6">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
|
||||||
|
Our Journey
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-300">
|
||||||
|
Key milestones in our mission to revolutionize game hosting
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="max-w-4xl mx-auto">
|
||||||
|
{milestones.map((milestone, index) => (
|
||||||
|
<div key={index} className="relative pl-8 pb-12 last:pb-0">
|
||||||
|
<div className="absolute left-0 top-0 w-px h-full bg-gray-800"></div>
|
||||||
|
<div className="absolute left-[-4px] top-0 w-2 h-2 rounded-full bg-blue-500"></div>
|
||||||
|
<div className="text-blue-500 mb-2">{milestone.year}</div>
|
||||||
|
<h3 className="text-xl font-semibold text-white mb-2">
|
||||||
|
{milestone.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-400">{milestone.description}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Roadmap Section */}
|
||||||
|
<section className="py-12 md:py-24 bg-slate-950">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<div className="text-center max-w-2xl mx-auto mb-16">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
|
||||||
|
Product Roadmap
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-300">
|
||||||
|
Our vision for the future of GameZone
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 md:gap-8">
|
||||||
|
{roadmap.map((item, index) => (
|
||||||
|
<div key={index} className="bg-gray-900 p-5 rounded-md">
|
||||||
|
<div className="bg-slate-950 p-3 rounded-md w-fit mb-4">
|
||||||
|
<item.icon className="w-6 h-6 text-blue-500" />
|
||||||
|
</div>
|
||||||
|
<div className="text-blue-500 mb-2">{item.quarter}</div>
|
||||||
|
<h3 className="text-xl font-semibold text-white mb-2">
|
||||||
|
{item.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-400">{item.description}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* CTA Section */}
|
||||||
|
<section className="py-12 md:py-24 bg-gray-900">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl text-center">
|
||||||
|
<div className="max-w-2xl mx-auto">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
|
||||||
|
Join Our Journey
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-300 mb-8">
|
||||||
|
We're always looking for talented people to join our team and help
|
||||||
|
shape the future of game hosting
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-wrap justify-center gap-4">
|
||||||
|
<a
|
||||||
|
href="/careers"
|
||||||
|
className="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md font-medium transition-all duration-200"
|
||||||
|
>
|
||||||
|
<Users className="w-5 h-5" />
|
||||||
|
View Open Positions
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="/culture"
|
||||||
|
className="inline-flex items-center gap-2 bg-slate-950 text-white px-8 py-3 rounded-md font-medium transition-all duration-200 border border-gray-900"
|
||||||
|
>
|
||||||
|
Learn About Our Culture
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AboutPage;
|
||||||
448
src/pages/CareersPage.jsx
Normal file
448
src/pages/CareersPage.jsx
Normal file
|
|
@ -0,0 +1,448 @@
|
||||||
|
import React, { useState } from "react";
|
||||||
|
import {
|
||||||
|
Globe,
|
||||||
|
Laptop,
|
||||||
|
Award,
|
||||||
|
Shield,
|
||||||
|
ChevronRight,
|
||||||
|
Search,
|
||||||
|
Clock,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { Helmet } from "react-helmet";
|
||||||
|
|
||||||
|
const jobCategories = [
|
||||||
|
{ id: "all", label: "All Positions" },
|
||||||
|
{ id: "engineering", label: "Engineering" },
|
||||||
|
{ id: "gameOperations", label: "Game Operations" },
|
||||||
|
{ id: "marketing", label: "Marketing" },
|
||||||
|
{ id: "customerSupport", label: "Customer Support" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const cultureItems = [
|
||||||
|
{
|
||||||
|
icon: Globe,
|
||||||
|
title: "Global Team",
|
||||||
|
description: "Work with talented professionals from around the world.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Laptop,
|
||||||
|
title: "Flexible Work",
|
||||||
|
description: "Remote and hybrid work options with flexible schedules.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Award,
|
||||||
|
title: "Career Growth",
|
||||||
|
description:
|
||||||
|
"Continuous learning and professional development opportunities.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Shield,
|
||||||
|
title: "Inclusive Environment",
|
||||||
|
description: "Diverse, supportive workplace that values every team member.",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const jobListings = {
|
||||||
|
engineering: [
|
||||||
|
{
|
||||||
|
title: "Senior Software Engineer",
|
||||||
|
location: "Remote",
|
||||||
|
type: "Full-time",
|
||||||
|
department: "Platform Development",
|
||||||
|
description:
|
||||||
|
"Design and implement scalable infrastructure for game hosting platforms.",
|
||||||
|
requirements: [
|
||||||
|
"5+ years of backend software engineering experience",
|
||||||
|
"Expertise in cloud technologies and distributed systems",
|
||||||
|
"Strong knowledge of Python, Go, or Rust",
|
||||||
|
],
|
||||||
|
compensation: {
|
||||||
|
base: "$130,000 - $180,000",
|
||||||
|
equity: "0.1% - 0.5% RSU",
|
||||||
|
bonus: "15% annual performance bonus",
|
||||||
|
},
|
||||||
|
benefits: [
|
||||||
|
"Comprehensive health, dental, and vision insurance",
|
||||||
|
"401(k) with 5% company match",
|
||||||
|
"$5,000 annual professional development budget",
|
||||||
|
"Unlimited PTO",
|
||||||
|
"Home office setup stipend",
|
||||||
|
"Mental health and wellness programs",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "DevOps Engineer",
|
||||||
|
location: "Hybrid",
|
||||||
|
type: "Full-time",
|
||||||
|
department: "Infrastructure",
|
||||||
|
description:
|
||||||
|
"Optimize and maintain our global game server infrastructure.",
|
||||||
|
requirements: [
|
||||||
|
"Experience with Kubernetes and container orchestration",
|
||||||
|
"Proficient in cloud platforms (AWS, GCP, Azure)",
|
||||||
|
"Strong automation and scripting skills",
|
||||||
|
],
|
||||||
|
compensation: {
|
||||||
|
base: "$120,000 - $165,000",
|
||||||
|
equity: "0.05% - 0.3% RSU",
|
||||||
|
bonus: "12% annual performance bonus",
|
||||||
|
},
|
||||||
|
benefits: [
|
||||||
|
"Comprehensive health insurance",
|
||||||
|
"401(k) with 4% company match",
|
||||||
|
"$4,000 annual tech conference budget",
|
||||||
|
"Flexible hybrid work model",
|
||||||
|
"Free cloud certification training",
|
||||||
|
"Quarterly wellness stipend",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
gameOperations: [
|
||||||
|
{
|
||||||
|
title: "Game Server Technician",
|
||||||
|
location: "On-site",
|
||||||
|
type: "Full-time",
|
||||||
|
department: "Server Management",
|
||||||
|
description:
|
||||||
|
"Manage and optimize game server performance and reliability.",
|
||||||
|
requirements: [
|
||||||
|
"Deep understanding of multiplayer game infrastructure",
|
||||||
|
"Network and system administration skills",
|
||||||
|
"Passion for gaming and technical problem-solving",
|
||||||
|
],
|
||||||
|
compensation: {
|
||||||
|
base: "$85,000 - $110,000",
|
||||||
|
equity: "0.02% - 0.1% RSU",
|
||||||
|
bonus: "10% annual performance bonus",
|
||||||
|
},
|
||||||
|
benefits: [
|
||||||
|
"Health insurance",
|
||||||
|
"401(k) with 3% company match",
|
||||||
|
"Free game subscriptions",
|
||||||
|
"Gaming equipment discount",
|
||||||
|
"Casual work environment",
|
||||||
|
"Team gaming events",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
marketing: [
|
||||||
|
{
|
||||||
|
title: "Community Marketing Manager",
|
||||||
|
location: "Remote",
|
||||||
|
type: "Full-time",
|
||||||
|
department: "Community & Partnerships",
|
||||||
|
description:
|
||||||
|
"Build and engage our global gaming community across multiple platforms.",
|
||||||
|
requirements: [
|
||||||
|
"Experience in gaming or tech community management",
|
||||||
|
"Strong social media and content creation skills",
|
||||||
|
"Ability to create engaging multimedia content",
|
||||||
|
],
|
||||||
|
compensation: {
|
||||||
|
base: "$90,000 - $125,000",
|
||||||
|
equity: "0.03% - 0.2% RSU",
|
||||||
|
bonus: "12% annual performance bonus",
|
||||||
|
},
|
||||||
|
benefits: [
|
||||||
|
"Health and wellness insurance",
|
||||||
|
"401(k) with 4% company match",
|
||||||
|
"Content creation budget",
|
||||||
|
"Global community event access",
|
||||||
|
"Remote work flexibility",
|
||||||
|
"Professional development courses",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
customerSupport: [
|
||||||
|
{
|
||||||
|
title: "Senior Gaming Support Specialist",
|
||||||
|
location: "Remote",
|
||||||
|
type: "Full-time",
|
||||||
|
department: "Player Experience",
|
||||||
|
description:
|
||||||
|
"Provide world-class support for our global gaming community.",
|
||||||
|
requirements: [
|
||||||
|
"Excellent communication skills",
|
||||||
|
"Technical troubleshooting ability",
|
||||||
|
"Passion for gaming and customer satisfaction",
|
||||||
|
],
|
||||||
|
compensation: {
|
||||||
|
base: "$65,000 - $85,000",
|
||||||
|
equity: "0.01% - 0.05% RSU",
|
||||||
|
bonus: "8% annual performance bonus",
|
||||||
|
},
|
||||||
|
benefits: [
|
||||||
|
"Health insurance",
|
||||||
|
"401(k) with 3% company match",
|
||||||
|
"Free gaming subscriptions",
|
||||||
|
"Multilingual support incentives",
|
||||||
|
"Flexible scheduling",
|
||||||
|
"Career development programs",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const CultureCard = ({ icon: Icon, title, description }) => (
|
||||||
|
<div className="bg-slate-900 p-5 rounded-md">
|
||||||
|
<div className="flex flex-col items-center text-center">
|
||||||
|
<div className="bg-gray-950 p-4 rounded-md mb-4">
|
||||||
|
<Icon className="w-8 h-8 text-blue-600" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-semibold text-white mb-2">{title}</h3>
|
||||||
|
<p className="text-gray-400">{description}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const JobCard = ({ job }) => {
|
||||||
|
const [showDetails, setShowDetails] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-slate-950 rounded-md border border-gray-900 p-5">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex justify-between items-start">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xl font-semibold text-white">{job.title}</h3>
|
||||||
|
<div className="text-sm text-gray-400 mt-1">{job.department}</div>
|
||||||
|
</div>
|
||||||
|
<span className="bg-slate-950 text-blue-600 px-3 py-1 rounded-md text-sm">
|
||||||
|
{job.type}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-gray-400">{job.description}</p>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<h4 className="text-white font-medium">Requirements:</h4>
|
||||||
|
<ul className="space-y-1">
|
||||||
|
{job.requirements.map((req, index) => (
|
||||||
|
<li
|
||||||
|
key={index}
|
||||||
|
className="flex items-center text-gray-400 text-sm"
|
||||||
|
>
|
||||||
|
<ChevronRight className="w-4 h-4 text-blue-600 mr-2" />
|
||||||
|
{req}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center text-gray-400 text-sm">
|
||||||
|
<Clock className="w-4 h-4 mr-2 text-blue-600" />
|
||||||
|
{job.location}
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowDetails(!showDetails)}
|
||||||
|
className="text-sm text-blue-600 hover:text-blue-600 transition-colors duration-200"
|
||||||
|
>
|
||||||
|
{showDetails ? "Hide Details" : "Show Compensation"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{showDetails && (
|
||||||
|
<div className="space-y-4 border-t border-gray-900 pt-4 mt-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<h4 className="text-white font-medium">Compensation:</h4>
|
||||||
|
<div className="text-gray-400 space-y-1">
|
||||||
|
<p>
|
||||||
|
Base Salary:{" "}
|
||||||
|
<span className="font-semibold">{job.compensation.base}</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Equity:{" "}
|
||||||
|
<span className="font-semibold">
|
||||||
|
{job.compensation.equity}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Annual Bonus:{" "}
|
||||||
|
<span className="font-semibold">
|
||||||
|
{job.compensation.bonus}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<h4 className="text-white font-medium">Benefits:</h4>
|
||||||
|
<ul className="space-y-1">
|
||||||
|
{job.benefits.map((benefit, index) => (
|
||||||
|
<li
|
||||||
|
key={index}
|
||||||
|
className="flex items-center text-gray-400 text-sm"
|
||||||
|
>
|
||||||
|
<ChevronRight className="w-4 h-4 text-blue-600 mr-2" />
|
||||||
|
{benefit}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="https://example.com/"
|
||||||
|
className="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md font-medium transition-all duration-200"
|
||||||
|
>
|
||||||
|
Apply Now
|
||||||
|
<ChevronRight className="w-5 h-5" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const CareersPage = () => {
|
||||||
|
const [activeCategory, setActiveCategory] = useState("all");
|
||||||
|
const [searchTerm, setSearchTerm] = useState("");
|
||||||
|
|
||||||
|
const filteredJobs = Object.entries(jobListings).reduce(
|
||||||
|
(acc, [category, jobs]) => {
|
||||||
|
return [
|
||||||
|
...acc,
|
||||||
|
...jobs.filter(
|
||||||
|
(job) =>
|
||||||
|
(activeCategory === "all" || category === activeCategory) &&
|
||||||
|
(job.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||||
|
job.description.toLowerCase().includes(searchTerm.toLowerCase()))
|
||||||
|
),
|
||||||
|
];
|
||||||
|
},
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-900">
|
||||||
|
<Helmet>
|
||||||
|
<title>Careers | Skylink Hosting</title>
|
||||||
|
</Helmet>
|
||||||
|
{/* Hero */}
|
||||||
|
<section className="py-12 md:py-24">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<div className="text-center max-w-3xl mx-auto mb-16">
|
||||||
|
<h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
|
||||||
|
Join Our <span className="text-blue-600">Gaming Community</span>
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-gray-300">
|
||||||
|
We're building the future of gaming infrastructure. If you're
|
||||||
|
passionate about technology and gaming, we want to hear from you.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Culture Section */}
|
||||||
|
<section className="py-12 md:py-24 bg-slate-950">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
|
||||||
|
Our Culture
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-300 max-w-2xl mx-auto">
|
||||||
|
We're a global community of innovators passionate about
|
||||||
|
transforming the gaming landscape.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-2 md:gap-8">
|
||||||
|
{cultureItems.map((item, index) => (
|
||||||
|
<CultureCard key={index} {...item} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Jobs Section */}
|
||||||
|
<section className="py-12 md:py-24 bg-gray-900">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<div className="text-center mb-6">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
|
||||||
|
Open Positions
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-300 max-w-2xl mx-auto">
|
||||||
|
Find your place in our dynamic and innovative team.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filters */}
|
||||||
|
<div className="flex flex-col md:flex-row justify-between items-center gap-8 mb-6">
|
||||||
|
<div className="flex flex-wrap justify-center gap-2">
|
||||||
|
{jobCategories.map((category) => (
|
||||||
|
<button
|
||||||
|
key={category.id}
|
||||||
|
onClick={() => setActiveCategory(category.id)}
|
||||||
|
className={`
|
||||||
|
px-6 py-2 rounded-md text-sm font-medium transition-all duration-200
|
||||||
|
${
|
||||||
|
activeCategory === category.id
|
||||||
|
? "bg-blue-600 text-white"
|
||||||
|
: "bg-slate-950 text-gray-400 hover:text-white"
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
{category.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative w-full max-w-md">
|
||||||
|
<div className="bg-slate-950 rounded-md">
|
||||||
|
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search jobs..."
|
||||||
|
value={searchTerm}
|
||||||
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||||||
|
className="w-full pl-12 pr-4 py-3 rounded-md bg-transparent text-white placeholder-gray-400 focus:outline-none"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Job Listings */}
|
||||||
|
{filteredJobs.length > 0 ? (
|
||||||
|
<div className="grid md:grid-cols-2 gap-2 md:gap-8">
|
||||||
|
{filteredJobs.map((job, index) => (
|
||||||
|
<JobCard key={index} job={job} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="bg-slate-950 p-5 rounded-md text-center">
|
||||||
|
<p className="text-gray-400">
|
||||||
|
No jobs found matching your search criteria.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* CTA Section */}
|
||||||
|
<section className="py-12 md:py-24 bg-slate-950">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<div className="bg-gray-900 rounded-md border border-gray-900 p-8">
|
||||||
|
<div className="max-w-2xl mx-auto text-center">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
|
||||||
|
Don't See the Perfect Role?
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-300 mb-8">
|
||||||
|
We're always looking for talented individuals. Send us your
|
||||||
|
portfolio or resume, and we'll keep you in mind for future
|
||||||
|
opportunities.
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href="https://example.com/"
|
||||||
|
className="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md font-medium transition-all duration-200 "
|
||||||
|
>
|
||||||
|
Send Your Application
|
||||||
|
<ChevronRight className="w-5 h-5" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CareersPage;
|
||||||
202
src/pages/GamesPage.jsx
Normal file
202
src/pages/GamesPage.jsx
Normal file
|
|
@ -0,0 +1,202 @@
|
||||||
|
import React, { useState } from "react";
|
||||||
|
import { Search, Zap } from "lucide-react";
|
||||||
|
import { Helmet } from "react-helmet";
|
||||||
|
|
||||||
|
const gamePlans = [
|
||||||
|
{
|
||||||
|
game: "Minecraft",
|
||||||
|
trending: true,
|
||||||
|
price: "$8",
|
||||||
|
cover: "/images/minecraft.jpeg",
|
||||||
|
path: "/minecraft",
|
||||||
|
tags: ["sandbox", "popular"],
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// game: "Valheim",
|
||||||
|
// trending: false,
|
||||||
|
// price: "$12",
|
||||||
|
// cover: "/images/valheim.png",
|
||||||
|
// path: "/valheim",
|
||||||
|
// tags: ["survival", "viking"],
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
game: "Rust",
|
||||||
|
trending: true,
|
||||||
|
price: "$15",
|
||||||
|
cover: "/images/rust.avif",
|
||||||
|
path: "/rust",
|
||||||
|
tags: ["survival", "pvp"],
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// game: "26BZ",
|
||||||
|
// trending: true,
|
||||||
|
// price: "$1",
|
||||||
|
// cover: "https://placehold.co/100x200",
|
||||||
|
// path: "https://26bz.online/",
|
||||||
|
// tags: ["26BZ", "Custom"],
|
||||||
|
// },
|
||||||
|
];
|
||||||
|
|
||||||
|
const GameCard = ({ game, trending, price, cover, path, tags }) => {
|
||||||
|
return (
|
||||||
|
<div className="bg-slate-950 rounded-md border border-gray-900 transition-all duration-200">
|
||||||
|
<div className="relative">
|
||||||
|
<div className="relative">
|
||||||
|
<div className="relative aspect-[3/4] rounded-md overflow-hidden">
|
||||||
|
<img
|
||||||
|
src={cover}
|
||||||
|
alt={game}
|
||||||
|
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-200 ease-in"
|
||||||
|
/>
|
||||||
|
{trending && (
|
||||||
|
<div className="absolute top-4 left-4 bg-slate-900 text-white px-3 py-1.5 rounded-md flex items-center gap-1.5 shadow-lg">
|
||||||
|
<Zap className="w-4 h-4 text-blue-500" />
|
||||||
|
<span className="text-sm font-semibold">Trending</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-4">
|
||||||
|
<div className="flex justify-between items-start mb-3">
|
||||||
|
<h3 className="text-white text-xl font-bold tracking-tight">
|
||||||
|
{game}
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap gap-1.5 mb-4">
|
||||||
|
{tags.map((tag) => (
|
||||||
|
<span
|
||||||
|
key={tag}
|
||||||
|
className="text-xs bg-slate-900 text-gray-300 px-2.5 py-1 rounded-md font-medium"
|
||||||
|
>
|
||||||
|
{tag.charAt(0).toUpperCase() + tag.slice(1)}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<div>
|
||||||
|
<span className="text-gray-400 text-xs mb-0.5 block">
|
||||||
|
Starting at
|
||||||
|
</span>
|
||||||
|
<div className="text-blue-500 font-bold text-lg">
|
||||||
|
{price}/mo
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
href={path}
|
||||||
|
className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md font-medium transition-all duration-200 text-sm"
|
||||||
|
>
|
||||||
|
View Plans
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const GamesPage = () => {
|
||||||
|
const [searchQuery, setSearchQuery] = useState("");
|
||||||
|
const [selectedFilter, setSelectedFilter] = useState("all");
|
||||||
|
|
||||||
|
const filteredGames = gamePlans.filter((game) => {
|
||||||
|
const matchesSearch = game.game
|
||||||
|
.toLowerCase()
|
||||||
|
.includes(searchQuery.toLowerCase());
|
||||||
|
const matchesFilter =
|
||||||
|
selectedFilter === "all" ||
|
||||||
|
(selectedFilter === "trending" && game.trending) ||
|
||||||
|
game.tags.includes(selectedFilter);
|
||||||
|
return matchesSearch && matchesFilter;
|
||||||
|
});
|
||||||
|
|
||||||
|
const allTags = [...new Set(gamePlans.flatMap((game) => game.tags))];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="bg-slate-900 min-h-screen py-12 md:py-24">
|
||||||
|
<Helmet>
|
||||||
|
<title>Game Servers | Skylink Hosting</title>
|
||||||
|
</Helmet>
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
|
||||||
|
Game Servers
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-gray-300 mb-8">
|
||||||
|
Deploy your game server in minutes. Start playing with friends
|
||||||
|
today!
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Search and Filters */}
|
||||||
|
<div className="flex flex-col md:flex-row gap-4 justify-center mb-8">
|
||||||
|
<div className="relative">
|
||||||
|
<div className="bg-gray-800 border border-gray-900 rounded-md transition-all duration-300">
|
||||||
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search games..."
|
||||||
|
className="w-full md:w-64 bg-transparent text-white pl-10 pr-4 py-2 rounded-md focus:outline-none"
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap gap-2 justify-center">
|
||||||
|
<button
|
||||||
|
onClick={() => setSelectedFilter("all")}
|
||||||
|
className={`px-4 py-2 rounded-md transition-all duration-200 border ${
|
||||||
|
selectedFilter === "all"
|
||||||
|
? "bg-blue-600 text-white border-transparent"
|
||||||
|
: "bg-gray-800 text-gray-300 border-gray-900"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
All Games
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setSelectedFilter("trending")}
|
||||||
|
className={`px-4 py-2 rounded-md transition-all duration-200 border ${
|
||||||
|
selectedFilter === "trending"
|
||||||
|
? "bg-blue-600 text-white border-transparent"
|
||||||
|
: "bg-gray-800 text-gray-300 border-gray-900"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Trending
|
||||||
|
</button>
|
||||||
|
{allTags.map((tag) => (
|
||||||
|
<button
|
||||||
|
key={tag}
|
||||||
|
onClick={() => setSelectedFilter(tag)}
|
||||||
|
className={`px-4 py-2 rounded-md transition-all duration-200 border ${
|
||||||
|
selectedFilter === tag
|
||||||
|
? "bg-blue-600 text-white border-transparent"
|
||||||
|
: "bg-gray-800 text-gray-300 border-gray-900"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{tag.charAt(0).toUpperCase() + tag.slice(1)}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Games Grid */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-2">
|
||||||
|
{filteredGames.map((game, index) => (
|
||||||
|
<GameCard key={`${game.game}-${index}`} {...game} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{filteredGames.length === 0 && (
|
||||||
|
<div className="bg-slate-950 p-5 rounded-md border border-gray-900 text-center text-gray-400">
|
||||||
|
No games found matching your criteria.
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default GamesPage;
|
||||||
29
src/pages/HomePage.jsx
Normal file
29
src/pages/HomePage.jsx
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
import { CTA } from "../components/home/CTA";
|
||||||
|
import Technologies from "../components/home/Technologies";
|
||||||
|
import FAQ from "../components/home/FAQ";
|
||||||
|
import { FeatureSection } from "../components/home/FeaturesSection";
|
||||||
|
import { GlobalNetwork } from "../components/home/PowerOn";
|
||||||
|
import { HeroSection } from "../components/home/HeroSection";
|
||||||
|
import { Infrastructure } from "../components/home/Infrastructure";
|
||||||
|
import { Panel } from "../components/Panel";
|
||||||
|
import { Helmet } from "react-helmet";
|
||||||
|
|
||||||
|
const HomePage = () => {
|
||||||
|
return (
|
||||||
|
<main>
|
||||||
|
<Helmet>
|
||||||
|
<title>Home | Skylink Hosting</title>
|
||||||
|
</Helmet>
|
||||||
|
<HeroSection />
|
||||||
|
<FeatureSection />
|
||||||
|
<Technologies />
|
||||||
|
<Infrastructure />
|
||||||
|
{/* <Panel /> */}
|
||||||
|
<GlobalNetwork />
|
||||||
|
<FAQ />
|
||||||
|
<CTA />
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HomePage;
|
||||||
343
src/pages/MinecraftPage.jsx
Normal file
343
src/pages/MinecraftPage.jsx
Normal file
|
|
@ -0,0 +1,343 @@
|
||||||
|
import React from "react";
|
||||||
|
import {
|
||||||
|
Server,
|
||||||
|
Shield,
|
||||||
|
Zap,
|
||||||
|
Globe,
|
||||||
|
Users,
|
||||||
|
Clock,
|
||||||
|
Award,
|
||||||
|
Gauge,
|
||||||
|
Heart,
|
||||||
|
ExternalLink,
|
||||||
|
Settings,
|
||||||
|
Sparkles,
|
||||||
|
CogIcon,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { Panel } from "../components/Panel";
|
||||||
|
import CTA from "../components/home/CTA";
|
||||||
|
import { Helmet } from "react-helmet";
|
||||||
|
|
||||||
|
const plans = [
|
||||||
|
{
|
||||||
|
ram: "2GB",
|
||||||
|
price: "$8",
|
||||||
|
players: "1-20",
|
||||||
|
storage: "30GB NVMe",
|
||||||
|
backups: "1 Daily",
|
||||||
|
plugins: "15 Plugins",
|
||||||
|
link: "https://example.com/",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
ram: "4GB",
|
||||||
|
price: "$12",
|
||||||
|
players: "20-40",
|
||||||
|
storage: "50GB NVMe",
|
||||||
|
backups: "2 Daily",
|
||||||
|
plugins: "Unlimited",
|
||||||
|
link: "https://example.com/",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
ram: "6GB",
|
||||||
|
price: "$16",
|
||||||
|
players: "40-60",
|
||||||
|
storage: "75GB NVMe",
|
||||||
|
backups: "4 Daily",
|
||||||
|
plugins: "Unlimited",
|
||||||
|
link: "https://example.com/",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
ram: "8GB",
|
||||||
|
price: "$20",
|
||||||
|
players: "60-80",
|
||||||
|
storage: "100GB NVMe",
|
||||||
|
backups: "6 Daily",
|
||||||
|
plugins: "Unlimited",
|
||||||
|
link: "https://example.com/",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
ram: "12GB",
|
||||||
|
price: "$28",
|
||||||
|
players: "80-120",
|
||||||
|
storage: "150GB NVMe",
|
||||||
|
backups: "8 Daily",
|
||||||
|
plugins: "Unlimited",
|
||||||
|
link: "https://example.com/",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
ram: "16GB",
|
||||||
|
price: "$36",
|
||||||
|
players: "120-160",
|
||||||
|
storage: "200GB NVMe",
|
||||||
|
backups: "12 Daily",
|
||||||
|
plugins: "Unlimited",
|
||||||
|
link: "https://example.com/",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const features = [
|
||||||
|
{
|
||||||
|
icon: Sparkles,
|
||||||
|
title: "One-Click Modpack Install",
|
||||||
|
description:
|
||||||
|
"Install popular modpacks like RLCraft, SkyFactory, and FTB with just one click",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Shield,
|
||||||
|
title: "Enterprise DDoS Protection",
|
||||||
|
description:
|
||||||
|
"Layer 7 protection with automatic mitigation and 24/7 monitoring",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Gauge,
|
||||||
|
title: "NVMe SSD Storage",
|
||||||
|
description:
|
||||||
|
"Lightning-fast storage with 3500MB/s read/write speeds for instant chunk loading",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Settings,
|
||||||
|
title: "Custom Control Panel",
|
||||||
|
description:
|
||||||
|
"Easy-to-use custom panel for full server control and mod management",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const StatCard = ({ value, label, icon: Icon }) => (
|
||||||
|
<div className="bg-slate-950 p-5 rounded-md">
|
||||||
|
<div className="relative mb-1">
|
||||||
|
<Icon className="relative w-8 h-8 text-blue-500 mx-auto" />
|
||||||
|
</div>
|
||||||
|
<div className="text-2xl font-bold text-white text-center">{value}</div>
|
||||||
|
<div className="text-gray-400 text-sm text-center">{label}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const FeatureCard = ({ icon: Icon, title, description }) => (
|
||||||
|
<div className="bg-slate-900 p-5 rounded-md">
|
||||||
|
<div className="relative mb-2">
|
||||||
|
<Icon className="relative w-12 h-12 text-blue-500" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-semibold text-white mb-2">{title}</h3>
|
||||||
|
<p className="text-gray-400">{description}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const PlanCard = ({
|
||||||
|
ram,
|
||||||
|
price,
|
||||||
|
players,
|
||||||
|
storage,
|
||||||
|
link,
|
||||||
|
backups,
|
||||||
|
plugins,
|
||||||
|
recommended,
|
||||||
|
}) => (
|
||||||
|
<div className="bg-slate-900 p-5 rounded-md border border-slate-900 group cursor-pointer relative">
|
||||||
|
<div className="text-center mb-6">
|
||||||
|
<h3 className="text-2xl font-bold text-white mb-2">{ram} RAM</h3>
|
||||||
|
<div className="text-3xl font-bold text-blue-500 mb-2">
|
||||||
|
{price}
|
||||||
|
<span className="text-lg text-gray-400">/mo</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-400">Up to {players} Players</p>
|
||||||
|
</div>
|
||||||
|
<ul className="space-y-2 mb-3">
|
||||||
|
<li className="flex items-center text-gray-300">
|
||||||
|
<Server className="w-5 h-5 mr-2 text-blue-500" />
|
||||||
|
{storage}
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center text-gray-300">
|
||||||
|
<Clock className="w-5 h-5 mr-2 text-blue-500" />
|
||||||
|
{backups} Backups
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center text-gray-300">
|
||||||
|
<CogIcon className="w-5 h-5 mr-2 text-blue-500" />
|
||||||
|
{plugins}
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center text-gray-300">
|
||||||
|
<Shield className="w-5 h-5 mr-2 text-blue-500" />
|
||||||
|
DDoS Protection
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center text-gray-300">
|
||||||
|
<Globe className="w-5 h-5 mr-2 text-blue-500" />
|
||||||
|
Unlimited Bandwidth
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a
|
||||||
|
href={link}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className={`inline-flex items-center justify-center w-full py-3 px-4 rounded-md font-medium transition-all duration-200
|
||||||
|
${
|
||||||
|
recommended
|
||||||
|
? "bg-blue-600 hover:bg-blue-700 text-white"
|
||||||
|
: "bg-gray-700 hover:bg-gray-600 text-white"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<span>Deploy Server</span>
|
||||||
|
<ExternalLink className="w-4 h-4 ml-2" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const ServerTypeCard = ({ name, image }) => (
|
||||||
|
<div className="bg-slate-950 p-5 rounded-md border border-slate-900 transition-all duration-200">
|
||||||
|
<div className="relative mb-4 aspect-square">
|
||||||
|
<img
|
||||||
|
src={image}
|
||||||
|
alt={`${name} Server`}
|
||||||
|
className="rounded-md w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-semibold text-white text-center">{name}</h3>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const MinecraftPage = () => {
|
||||||
|
return (
|
||||||
|
<div className="bg-slate-900 min-h-screen">
|
||||||
|
<Helmet>
|
||||||
|
<title>Minecraft Hosting | Skylink Hosting</title>
|
||||||
|
</Helmet>
|
||||||
|
{/* Hero */}
|
||||||
|
<section className="min-h-44 md:min-h-screen py-12 md:py-24 relative overflow-hidden">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl relative">
|
||||||
|
<div className="flex flex-col md:flex-row items-center gap-12">
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="inline-flex items-center px-4 py-2 rounded-md bg-slate-950 border border-slate-900 transition-all duration-200 text-blue-500 mb-6">
|
||||||
|
<Award className="w-5 h-5 mr-2" />
|
||||||
|
<span className="text-sm font-semibold">
|
||||||
|
#1 Minecraft Host of 2025
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight">
|
||||||
|
Minecraft
|
||||||
|
<br />
|
||||||
|
<span className="text-blue-500">Server Hosting</span>
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-gray-300 mb-8 leading-relaxed">
|
||||||
|
Experience next-gen Minecraft hosting with instant setup,
|
||||||
|
one-click modpack installation, and 99.99% uptime guarantee.
|
||||||
|
</p>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-4 mb-8">
|
||||||
|
<StatCard value="45ms" label="Average Latency" icon={Zap} />
|
||||||
|
<StatCard value="99.9%" label="Uptime" icon={Heart} />
|
||||||
|
<StatCard value="60s" label="Deployment" icon={Clock} />
|
||||||
|
<StatCard value="24/7" label="Support" icon={Users} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 hidden md:block">
|
||||||
|
<div className="bg-slate-950 w-fit rounded-md">
|
||||||
|
<img
|
||||||
|
src="/images/minecraft.jpeg"
|
||||||
|
alt="Minecraft Server Interface"
|
||||||
|
className="rounded-md w-fit h-auto"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Features Section */}
|
||||||
|
<section className="py-12 md:py-24 bg-slate-950">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
|
||||||
|
Next-Gen Minecraft Hosting
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-300 max-w-2xl mx-auto">
|
||||||
|
Built for performance, optimized for gaming, and backed by
|
||||||
|
enterprise infrastructure
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 md:gap-8">
|
||||||
|
{features.map((feature, index) => (
|
||||||
|
<FeatureCard key={index} {...feature} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Server Types Section */}
|
||||||
|
<section className="py-12 md:py-24 bg-slate-900">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
|
||||||
|
All Server Types Supported
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-300 max-w-2xl mx-auto">
|
||||||
|
Deploy any Minecraft server version or modification with one click
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-2 md:gap-8">
|
||||||
|
{[
|
||||||
|
{
|
||||||
|
name: "Vanilla",
|
||||||
|
image:
|
||||||
|
"https://cdn.icon-icons.com/icons2/2699/PNG/512/minecraft_logo_icon_168974.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Paper",
|
||||||
|
image:
|
||||||
|
"https://docs.papermc.io/assets/images/papermc-logomark-512-f125384f3367cd4d9291ca983fcb7334.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Forge",
|
||||||
|
image:
|
||||||
|
"https://avatars.githubusercontent.com/u/1390178?s=200&v=4",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Bedrock",
|
||||||
|
image:
|
||||||
|
"https://preview.redd.it/1wo65al6iox71.png?width=640&crop=smart&auto=webp&s=e9aab23333f9556cbeaa37587002dc9d7181137f",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Fabric",
|
||||||
|
image:
|
||||||
|
"https://media.forgecdn.net/avatars/thumbnails/185/822/256/256/636829723898798601.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Spigot",
|
||||||
|
image:
|
||||||
|
"https://avatars.githubusercontent.com/u/4350249?s=280&v=4",
|
||||||
|
},
|
||||||
|
].map((type, index) => (
|
||||||
|
<ServerTypeCard key={index} {...type} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Panel Showcase Section */}
|
||||||
|
<Panel />
|
||||||
|
|
||||||
|
{/* Plans Section */}
|
||||||
|
<section className="py-12 md:py-24 bg-slate-950">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
|
||||||
|
Choose Your Plan
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-300 mb-8">
|
||||||
|
Scalable plans for every size of community
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 md:gap-8">
|
||||||
|
{plans.slice(0, 3).map((plan, index) => (
|
||||||
|
<PlanCard key={index} {...plan} recommended={index === 1} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 md:gap-8">
|
||||||
|
{plans.slice(3).map((plan, index) => (
|
||||||
|
<PlanCard key={index + 3} {...plan} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<CTA />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MinecraftPage;
|
||||||
53
src/pages/NotFoundPage.jsx
Normal file
53
src/pages/NotFoundPage.jsx
Normal file
|
|
@ -0,0 +1,53 @@
|
||||||
|
import React from "react";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import { Home, ArrowLeft } from "lucide-react";
|
||||||
|
import { Helmet } from "react-helmet";
|
||||||
|
const NotFoundPage = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-slate-950 min-h-screen flex items-center justify-center">
|
||||||
|
<Helmet>
|
||||||
|
<title>Oh No! | Skylink Hosting</title>
|
||||||
|
</Helmet>
|
||||||
|
<div className="container px-4 mx-auto">
|
||||||
|
<div className="max-w-2xl mx-auto text-center">
|
||||||
|
{/* 404 Section */}
|
||||||
|
<h1 className="text-8xl md:text-9xl font-bold text-blue-500 mb-8">
|
||||||
|
404
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
|
||||||
|
Page Not Found
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p className="text-xl text-gray-300 mb-12">
|
||||||
|
Sorry, we couldn't find the page you're looking for. The page might
|
||||||
|
have been moved, deleted, or never existed.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Buttons */}
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||||
|
<button
|
||||||
|
onClick={() => navigate("/")}
|
||||||
|
className="inline-flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md font-medium transition-all duration-200"
|
||||||
|
>
|
||||||
|
<Home className="w-5 h-5" />
|
||||||
|
Back to Home
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => navigate(-1)}
|
||||||
|
className="inline-flex items-center justify-center gap-2 bg-gray-900 text-white px-6 py-3 rounded-md font-medium transition-all duration-200"
|
||||||
|
>
|
||||||
|
<ArrowLeft className="w-5 h-5" />
|
||||||
|
Go Back
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default NotFoundPage;
|
||||||
209
src/pages/PartnersPage.jsx
Normal file
209
src/pages/PartnersPage.jsx
Normal file
|
|
@ -0,0 +1,209 @@
|
||||||
|
import React, { useState } from "react";
|
||||||
|
import {
|
||||||
|
Users,
|
||||||
|
Gamepad2,
|
||||||
|
Trophy,
|
||||||
|
Twitch,
|
||||||
|
Youtube,
|
||||||
|
ChevronRight,
|
||||||
|
Heart,
|
||||||
|
ExternalLink,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { Helmet } from "react-helmet";
|
||||||
|
|
||||||
|
const partners = {
|
||||||
|
streamers: [
|
||||||
|
{
|
||||||
|
name: "26BZ",
|
||||||
|
logo: "https://cdn.discordapp.com/avatars/999168396904120412/585a62c39845040211f411d14acbbf17",
|
||||||
|
description: "Creator",
|
||||||
|
type: "Creator",
|
||||||
|
benefits: ["Website Maintainence"],
|
||||||
|
website: "https://26bz.online/",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
competitiveTeams: [],
|
||||||
|
communityGroups: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
const PartnerCard = ({ partner }) => {
|
||||||
|
return (
|
||||||
|
<div className="bg-slate-950 rounded-md border border-gray-900 transition-all duration-200 p-5">
|
||||||
|
{/* Logo and Type */}
|
||||||
|
<div className="flex items-start justify-between mb-6">
|
||||||
|
<img
|
||||||
|
src={partner.logo}
|
||||||
|
alt={`${partner.name} logo`}
|
||||||
|
className="h-14 w-auto object-contain"
|
||||||
|
/>
|
||||||
|
<span className="text-sm text-blue-500 bg-slate-900 px-3 py-1 rounded-md">
|
||||||
|
{partner.type}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-xl font-semibold text-white">{partner.name}</h3>
|
||||||
|
<p className="text-gray-400">{partner.description}</p>
|
||||||
|
|
||||||
|
{/* Benefits */}
|
||||||
|
<ul className="space-y-2">
|
||||||
|
{partner.benefits.map((benefit, index) => (
|
||||||
|
<li key={index} className="flex items-center text-gray-300">
|
||||||
|
<ChevronRight className="w-4 h-4 text-blue-500 mr-2" />
|
||||||
|
{benefit}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
{/* Website Link */}
|
||||||
|
<a
|
||||||
|
href={partner.website}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md font-medium transition-all duration-200"
|
||||||
|
>
|
||||||
|
Visit Website
|
||||||
|
<ExternalLink className="w-4 h-4" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const PartnerStats = () => {
|
||||||
|
const stats = [
|
||||||
|
{ icon: Users, value: "500K+", label: "Community Members" },
|
||||||
|
{ icon: Gamepad2, value: "200+", label: "Gaming Communities" },
|
||||||
|
{ icon: Trophy, value: "50+", label: "Tournaments Hosted" },
|
||||||
|
{ icon: Heart, value: "10K+", label: "Charity Raised" },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-8">
|
||||||
|
{stats.map((stat, index) => {
|
||||||
|
const Icon = stat.icon;
|
||||||
|
return (
|
||||||
|
<div key={index} className="bg-slate-900 p-5 rounded-md">
|
||||||
|
<div className="flex flex-col items-center text-center">
|
||||||
|
<div className="bg-gray-900 p-3 rounded-md mb-4">
|
||||||
|
<Icon className="w-6 h-6 text-blue-500" />
|
||||||
|
</div>
|
||||||
|
<div className="text-2xl font-bold text-white">{stat.value}</div>
|
||||||
|
<div className="text-gray-400 text-sm">{stat.label}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const PartnersPage = () => {
|
||||||
|
const [activeTab, setActiveTab] = useState("all");
|
||||||
|
|
||||||
|
const tabs = [
|
||||||
|
{ id: "all", label: "All Partners" },
|
||||||
|
{ id: "streamers", label: "Streamers" },
|
||||||
|
{ id: "competitiveTeams", label: "Competitive Teams" },
|
||||||
|
{ id: "communityGroups", label: "Community Groups" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const filteredPartners =
|
||||||
|
activeTab === "all"
|
||||||
|
? [
|
||||||
|
...partners.streamers,
|
||||||
|
...partners.competitiveTeams,
|
||||||
|
...partners.communityGroups,
|
||||||
|
]
|
||||||
|
: partners[activeTab];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-slate-900">
|
||||||
|
<Helmet>
|
||||||
|
<title>Partners | GameZone</title>
|
||||||
|
</Helmet>
|
||||||
|
{/* Hero */}
|
||||||
|
<section className="py-12 md:py-24">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<div className="text-center max-w-3xl mx-auto mb-6">
|
||||||
|
<h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
|
||||||
|
Our Community <span className="text-blue-500">Partners</span>
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-gray-300">
|
||||||
|
We believe in the power of gaming communities. Our partnerships
|
||||||
|
support content creators, competitive teams, and inclusive gaming
|
||||||
|
initiatives that bring players together.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Stats Section */}
|
||||||
|
<section className="py-12 md:py-24 bg-slate-950">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<PartnerStats />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="py-12 md:py-24 bg-slate-900">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
{/* Tabs */}
|
||||||
|
<div className="flex justify-center mb-12">
|
||||||
|
<div className="flex flex-wrap justify-center gap-2 bg-slate-950 p-2 rounded-lg border border-gray-900 w-full max-w-3xl">
|
||||||
|
{tabs.map((tab) => (
|
||||||
|
<button
|
||||||
|
key={tab.id}
|
||||||
|
onClick={() => setActiveTab(tab.id)}
|
||||||
|
className={`
|
||||||
|
px-6 py-2.5 rounded-md font-medium transition-all duration-200 whitespace-nowrap text-sm md:text-base
|
||||||
|
${
|
||||||
|
activeTab === tab.id
|
||||||
|
? "bg-blue-600 text-white"
|
||||||
|
: "text-gray-400 hover:text-white hover:bg-slate-900"
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
{tab.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Partners Grid */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 md:gap-8">
|
||||||
|
{filteredPartners.map((partner, index) => (
|
||||||
|
<PartnerCard key={index} partner={partner} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{/* CTA Section */}
|
||||||
|
<section className="py-12 md:py-24 bg-slate-950">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<div className="bg-slate-900 rounded-md border border-gray-900 transition-all duration-200 p-8">
|
||||||
|
<div className="max-w-2xl mx-auto text-center">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
|
||||||
|
Want to Become a Partner?
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-300 mb-8">
|
||||||
|
Are you a content creator, team, or community leader passionate
|
||||||
|
about gaming? We'd love to hear from you and explore partnership
|
||||||
|
opportunities.
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href="/contact"
|
||||||
|
className="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md font-medium transition-all duration-200"
|
||||||
|
>
|
||||||
|
Connect With Us
|
||||||
|
<ChevronRight className="w-5 h-5" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PartnersPage;
|
||||||
294
src/pages/PrivacyPolicy.jsx
Normal file
294
src/pages/PrivacyPolicy.jsx
Normal file
|
|
@ -0,0 +1,294 @@
|
||||||
|
import React from "react";
|
||||||
|
import {
|
||||||
|
Shield,
|
||||||
|
Calendar,
|
||||||
|
Lock,
|
||||||
|
Eye,
|
||||||
|
Database,
|
||||||
|
Globe,
|
||||||
|
Mail,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { Helmet } from "react-helmet";
|
||||||
|
|
||||||
|
const PrivacyPolicy = () => {
|
||||||
|
const lastUpdated = "January 1, 2025";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-slate-900">
|
||||||
|
<Helmet>
|
||||||
|
<title>Privacy Policy | GameZone</title>
|
||||||
|
</Helmet>
|
||||||
|
{/* Hero */}
|
||||||
|
<section className="py-12 md:py-24">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<div className="text-center max-w-3xl mx-auto">
|
||||||
|
<h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
|
||||||
|
Privacy Policy
|
||||||
|
</h1>
|
||||||
|
<div className="flex items-center justify-center gap-2 text-gray-300">
|
||||||
|
<Calendar className="w-5 h-5" />
|
||||||
|
<span>Last Updated: {lastUpdated}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<section className="py-12 md:py-24 bg-slate-950">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
{/* Overview Box */}
|
||||||
|
<div className="bg-slate-900 rounded-md p-5 mb-16">
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="bg-slate-950 p-2 rounded-md">
|
||||||
|
<Lock className="w-6 h-6 text-blue-500" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 className="text-xl font-semibold text-white mb-2">
|
||||||
|
Your Privacy Matters
|
||||||
|
</h2>
|
||||||
|
<p className="text-gray-300">
|
||||||
|
This Privacy Policy explains how we collect, use, disclose,
|
||||||
|
and safeguard your information when you use our services.
|
||||||
|
Please read this privacy policy carefully.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Information Collection */}
|
||||||
|
<section>
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
|
||||||
|
1. Information We Collect
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-8">
|
||||||
|
<div className="bg-slate-900 rounded-md p-5">
|
||||||
|
<h3 className="text-xl font-semibold text-white mb-4">
|
||||||
|
Personal Information
|
||||||
|
</h3>
|
||||||
|
<ul className="space-y-2 text-gray-300">
|
||||||
|
<li>Name and contact information</li>
|
||||||
|
<li>Billing and payment details</li>
|
||||||
|
<li>Account credentials</li>
|
||||||
|
<li>Communication preferences</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-slate-900 rounded-md p-5">
|
||||||
|
<h3 className="text-xl font-semibold text-white mb-4">
|
||||||
|
Technical Data
|
||||||
|
</h3>
|
||||||
|
<ul className="space-y-2 text-gray-300">
|
||||||
|
<li>IP addresses and location data</li>
|
||||||
|
<li>Browser and device information</li>
|
||||||
|
<li>Usage statistics and analytics</li>
|
||||||
|
<li>Server logs and performance data</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Information Usage */}
|
||||||
|
<section>
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
|
||||||
|
2. How We Use Your Information
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-300 mb-8">
|
||||||
|
We use the collected information for various purposes,
|
||||||
|
including:
|
||||||
|
</p>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-8">
|
||||||
|
<div className="bg-slate-900 rounded-md p-5">
|
||||||
|
<div className="mb-4">
|
||||||
|
<Database className="w-8 h-8 text-blue-500" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-semibold text-white mb-4">
|
||||||
|
Service Provision
|
||||||
|
</h3>
|
||||||
|
<ul className="space-y-2 text-gray-300">
|
||||||
|
<li>Account management</li>
|
||||||
|
<li>Service optimization</li>
|
||||||
|
<li>Technical support</li>
|
||||||
|
<li>Security monitoring</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div className="bg-slate-900 rounded-md p-5">
|
||||||
|
<div className="mb-4">
|
||||||
|
<Mail className="w-8 h-8 text-blue-500" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-semibold text-white mb-4">
|
||||||
|
Communication
|
||||||
|
</h3>
|
||||||
|
<ul className="space-y-2 text-gray-300">
|
||||||
|
<li>Service updates</li>
|
||||||
|
<li>Security alerts</li>
|
||||||
|
<li>Marketing (with consent)</li>
|
||||||
|
<li>Support responses</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Data Protection */}
|
||||||
|
<section>
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
|
||||||
|
3. Data Protection
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-300 mb-8">
|
||||||
|
We implement robust security measures to protect your
|
||||||
|
information, including:
|
||||||
|
</p>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-8">
|
||||||
|
<div className="bg-slate-900 rounded-md p-5">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Shield className="w-6 h-6 text-blue-500" />
|
||||||
|
<span className="text-gray-300">
|
||||||
|
Encryption at rest and in transit
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Lock className="w-6 h-6 text-blue-500" />
|
||||||
|
<span className="text-gray-300">
|
||||||
|
Access controls and authentication
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-slate-900 rounded-md p-5">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Eye className="w-6 h-6 text-blue-500" />
|
||||||
|
<span className="text-gray-300">
|
||||||
|
Regular security audits
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Globe className="w-6 h-6 text-blue-500" />
|
||||||
|
<span className="text-gray-300">
|
||||||
|
Compliance with regulations
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Data Sharing */}
|
||||||
|
<section>
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
|
||||||
|
4. Data Sharing and Third Parties
|
||||||
|
</h2>
|
||||||
|
<div className="bg-slate-900 rounded-md p-5">
|
||||||
|
<p className="text-xl text-gray-300 mb-4">
|
||||||
|
We may share your information with third parties under
|
||||||
|
specific circumstances:
|
||||||
|
</p>
|
||||||
|
<ul className="space-y-2 text-gray-300">
|
||||||
|
<li>
|
||||||
|
Service providers and partners who assist in operating our
|
||||||
|
services
|
||||||
|
</li>
|
||||||
|
<li>Legal requirements and law enforcement requests</li>
|
||||||
|
<li>
|
||||||
|
Protection of our rights, privacy, safety, or property
|
||||||
|
</li>
|
||||||
|
<li>Business transfers or mergers</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Privacy Rights */}
|
||||||
|
<section>
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
|
||||||
|
5. Your Privacy Rights
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-8">
|
||||||
|
<div className="bg-slate-900 rounded-md p-5">
|
||||||
|
<h3 className="text-xl font-semibold text-white mb-4">
|
||||||
|
Access Rights
|
||||||
|
</h3>
|
||||||
|
<ul className="space-y-2 text-gray-300">
|
||||||
|
<li>Request data access</li>
|
||||||
|
<li>Review collected information</li>
|
||||||
|
<li>Data portability</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div className="bg-slate-900 rounded-md p-5">
|
||||||
|
<h3 className="text-xl font-semibold text-white mb-4">
|
||||||
|
Control Rights
|
||||||
|
</h3>
|
||||||
|
<ul className="space-y-2 text-gray-300">
|
||||||
|
<li>Update preferences</li>
|
||||||
|
<li>Request deletion</li>
|
||||||
|
<li>Opt-out options</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Cookies */}
|
||||||
|
<section>
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
|
||||||
|
6. Cookies and Tracking
|
||||||
|
</h2>
|
||||||
|
<div className="bg-slate-900 rounded-md p-5">
|
||||||
|
<p className="text-xl text-gray-300 mb-8">
|
||||||
|
We use cookies and similar tracking technologies to improve
|
||||||
|
your experience:
|
||||||
|
</p>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xl font-semibold text-white mb-4">
|
||||||
|
Essential & Functional
|
||||||
|
</h3>
|
||||||
|
<ul className="space-y-2 text-gray-300">
|
||||||
|
<li>Essential cookies</li>
|
||||||
|
<li>Functionality cookies</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xl font-semibold text-white mb-4">
|
||||||
|
Analytics & Marketing
|
||||||
|
</h3>
|
||||||
|
<ul className="space-y-2 text-gray-300">
|
||||||
|
<li>Analytics cookies</li>
|
||||||
|
<li>Marketing cookies (optional)</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Contact Section */}
|
||||||
|
<section className="bg-slate-900 rounded-md p-8 text-center">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
|
||||||
|
Privacy Questions?
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-300 mb-8">
|
||||||
|
If you have any questions about our privacy practices, please
|
||||||
|
contact our privacy team.
|
||||||
|
</p>
|
||||||
|
<div className="flex justify-center gap-4">
|
||||||
|
<button className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md font-medium transition-all duration-200">
|
||||||
|
Contact Privacy Team
|
||||||
|
</button>
|
||||||
|
<button className="bg-slate-950 text-white px-8 py-3 rounded-md font-medium transition-all duration-200">
|
||||||
|
Download Policy
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Footer Note */}
|
||||||
|
<div className="text-center text-gray-400">
|
||||||
|
<p>This privacy policy was last updated on {lastUpdated}.</p>
|
||||||
|
<p>Copyright © 2025 Your Company Name. All rights reserved.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PrivacyPolicy;
|
||||||
187
src/pages/SiteMap.jsx
Normal file
187
src/pages/SiteMap.jsx
Normal file
|
|
@ -0,0 +1,187 @@
|
||||||
|
import React from "react";
|
||||||
|
import { Helmet } from "react-helmet";
|
||||||
|
const sections = [
|
||||||
|
{
|
||||||
|
title: "Products & Services",
|
||||||
|
categories: [
|
||||||
|
{
|
||||||
|
title: "Web Hosting",
|
||||||
|
links: [
|
||||||
|
{ href: "/web-hosting", text: "Web Hosting" },
|
||||||
|
{ href: "/reseller-hosting", text: "Reseller Hosting" },
|
||||||
|
{ href: "/free-hosting", text: "Free Hosting" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "VPS Hosting",
|
||||||
|
links: [
|
||||||
|
{ href: "/managed-vps", text: "Managed VPS" },
|
||||||
|
{ href: "/unmanaged-vps", text: "Unmanaged VPS" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// title: "Additional Services",
|
||||||
|
// links: [
|
||||||
|
// { href: "/domain-names", text: "Domain Names" },
|
||||||
|
// { href: "/ssl-certificates", text: "SSL Certificates" },
|
||||||
|
// { href: "/website-builder", text: "Website Builder" },
|
||||||
|
// { href: "/email-hosting", text: "Email Hosting" },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Support & Resources",
|
||||||
|
categories: [
|
||||||
|
{
|
||||||
|
title: "Support",
|
||||||
|
links: [
|
||||||
|
{ href: "/contact-support", text: "Contact Support" },
|
||||||
|
{ href: "/submit-ticket", text: "Submit Ticket" },
|
||||||
|
{ href: "/live-chat", text: "Live Chat" },
|
||||||
|
{ href: "/phone-support", text: "Phone Support" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Documentation",
|
||||||
|
links: [
|
||||||
|
{ href: "/knowledge-base", text: "Knowledge Base" },
|
||||||
|
{ href: "/api-documentation", text: "API Documentation" },
|
||||||
|
{ href: "/developer-guides", text: "Developer Guides" },
|
||||||
|
{ href: "/tutorial-videos", text: "Tutorial Videos" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Resources",
|
||||||
|
links: [
|
||||||
|
{ href: "/blog", text: "Blog" },
|
||||||
|
{ href: "/community-forums", text: "Community Forums" },
|
||||||
|
{ href: "/status-page", text: "Status Page" },
|
||||||
|
{ href: "/system-updates", text: "System Updates" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Account & Billing",
|
||||||
|
categories: [
|
||||||
|
{
|
||||||
|
title: "Account Management",
|
||||||
|
links: [
|
||||||
|
{ href: "/account-dashboard", text: "Account Dashboard" },
|
||||||
|
{ href: "/profile-settings", text: "Profile Settings" },
|
||||||
|
{ href: "/security-settings", text: "Security Settings" },
|
||||||
|
{ href: "/api-keys", text: "API Keys" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Billing",
|
||||||
|
links: [
|
||||||
|
{ href: "/view-invoices", text: "View Invoices" },
|
||||||
|
{ href: "/payment-methods", text: "Payment Methods" },
|
||||||
|
{ href: "/billing-history", text: "Billing History" },
|
||||||
|
{ href: "/usage-reports", text: "Usage Reports" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Company",
|
||||||
|
categories: [
|
||||||
|
{
|
||||||
|
title: "About Us",
|
||||||
|
links: [
|
||||||
|
{ href: "/company-overview", text: "Company Overview" },
|
||||||
|
{ href: "/our-team", text: "Our Team" },
|
||||||
|
{ href: "/careers", text: "Careers" },
|
||||||
|
{ href: "/press-kit", text: "Press Kit" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Legal",
|
||||||
|
links: [
|
||||||
|
{ href: "/terms-of-service", text: "Terms of Service" },
|
||||||
|
{ href: "/privacy-policy", text: "Privacy Policy" },
|
||||||
|
{ href: "/acceptable-use-policy", text: "Acceptable Use Policy" },
|
||||||
|
{ href: "/gdpr-compliance", text: "GDPR Compliance" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Partnerships",
|
||||||
|
links: [
|
||||||
|
{ href: "/affiliate-program", text: "Affiliate Program" },
|
||||||
|
{ href: "/reseller-program", text: "Reseller Program" },
|
||||||
|
{ href: "/partner-portal", text: "Partner Portal" },
|
||||||
|
{ href: "/technology-partners", text: "Technology Partners" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const CategoryCard = ({ category }) => (
|
||||||
|
<div className="bg-slate-950 p-5 rounded-md">
|
||||||
|
<h3 className="text-lg font-semibold text-white mb-4">{category.title}</h3>
|
||||||
|
<div className="flex flex-col space-y-2">
|
||||||
|
{category.links.map((link, linkIndex) => (
|
||||||
|
<a
|
||||||
|
key={linkIndex}
|
||||||
|
href={link.href}
|
||||||
|
className="text-gray-400 hover:text-blue-500 transition-colors duration-200"
|
||||||
|
>
|
||||||
|
{link.text}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const SitemapSection = ({ section }) => (
|
||||||
|
<section className="py-12 md:py-24">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
|
||||||
|
{section.title}
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 md:gap-8">
|
||||||
|
{section.categories.map((category, index) => (
|
||||||
|
<CategoryCard key={index} category={category} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
|
||||||
|
const SitemapLinks = () => {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-slate-900">
|
||||||
|
<Helmet>
|
||||||
|
<title>Sitemap | GameZone</title>
|
||||||
|
</Helmet>
|
||||||
|
{/* Hero */}
|
||||||
|
<section className="py-12 md:py-24 bg-slate-900">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<div className="text-center max-w-3xl mx-auto">
|
||||||
|
<h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
|
||||||
|
Site Map
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-gray-300">
|
||||||
|
Find everything you need with our comprehensive site navigation
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Map Sections */}
|
||||||
|
{sections.map((section, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className={index % 2 === 0 ? "bg-slate-950" : "bg-slate-900"}
|
||||||
|
>
|
||||||
|
<SitemapSection section={section} />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SitemapLinks;
|
||||||
354
src/pages/SpecsPage.jsx
Normal file
354
src/pages/SpecsPage.jsx
Normal file
|
|
@ -0,0 +1,354 @@
|
||||||
|
import React from "react";
|
||||||
|
import {
|
||||||
|
Shield,
|
||||||
|
Globe,
|
||||||
|
Zap,
|
||||||
|
Network,
|
||||||
|
Lock,
|
||||||
|
Activity,
|
||||||
|
Wifi,
|
||||||
|
Building,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { Helmet } from "react-helmet";
|
||||||
|
|
||||||
|
const hardware = {
|
||||||
|
processor: {
|
||||||
|
name: "AMD Ryzen™ 7950X",
|
||||||
|
specs: [
|
||||||
|
"16 Cores / 32 Threads",
|
||||||
|
"Up to 5.0GHz Clock Speed",
|
||||||
|
"128MB L1 Cache",
|
||||||
|
"280W TDP",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
memory: {
|
||||||
|
name: "DDR5 ECC RAM",
|
||||||
|
specs: [
|
||||||
|
"4800MHz Base Clock",
|
||||||
|
"ECC Protection",
|
||||||
|
"Multi-Channel",
|
||||||
|
"Low Latency",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
storage: {
|
||||||
|
name: "Enterprise NVMe",
|
||||||
|
specs: [
|
||||||
|
"7000MB/s Read",
|
||||||
|
"6000MB/s Write",
|
||||||
|
"RAID Configuration",
|
||||||
|
"Hot-Swappable",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
network: {
|
||||||
|
name: "Network Infrastructure",
|
||||||
|
specs: [
|
||||||
|
"100Gbps Backbone",
|
||||||
|
"Redundant Links",
|
||||||
|
"BGP Optimization",
|
||||||
|
"Low Latency Routes",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const datacenters = [
|
||||||
|
{
|
||||||
|
city: "Los Angeles",
|
||||||
|
country: "United States",
|
||||||
|
features: [
|
||||||
|
"Tier IV Facility",
|
||||||
|
"N+2 Redundancy",
|
||||||
|
"24/7 Security",
|
||||||
|
"Direct Peering",
|
||||||
|
],
|
||||||
|
latency: {
|
||||||
|
"US West": "5ms",
|
||||||
|
"US East": "45ms",
|
||||||
|
Europe: "140ms",
|
||||||
|
Asia: "110ms",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
city: "Frankfurt",
|
||||||
|
country: "Germany",
|
||||||
|
features: [
|
||||||
|
"Tier IV Facility",
|
||||||
|
"Green Energy",
|
||||||
|
"CCTV Monitoring",
|
||||||
|
"ISO 27001",
|
||||||
|
],
|
||||||
|
latency: {
|
||||||
|
"US West": "140ms",
|
||||||
|
"US East": "90ms",
|
||||||
|
Europe: "5ms",
|
||||||
|
Asia: "80ms",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
city: "Singapore",
|
||||||
|
country: "Singapore",
|
||||||
|
features: [
|
||||||
|
"Tier III+ Facility",
|
||||||
|
"Biometric Access",
|
||||||
|
"Fire Suppression",
|
||||||
|
"Redundant Cooling",
|
||||||
|
],
|
||||||
|
latency: {
|
||||||
|
"US West": "110ms",
|
||||||
|
"US East": "180ms",
|
||||||
|
Europe: "80ms",
|
||||||
|
Asia: "5ms",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const security = [
|
||||||
|
{
|
||||||
|
icon: Shield,
|
||||||
|
title: "DDoS Protection",
|
||||||
|
description:
|
||||||
|
"Enterprise-grade protection up to 1Tbps with automatic mitigation",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Lock,
|
||||||
|
title: "SSL Security",
|
||||||
|
description:
|
||||||
|
"Free SSL certificates and end-to-end encryption for all services",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Activity,
|
||||||
|
title: "24/7 Monitoring",
|
||||||
|
description: "Real-time monitoring and automated threat detection systems",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Building,
|
||||||
|
title: "Physical Security",
|
||||||
|
description:
|
||||||
|
"Biometric access, CCTV surveillance, and on-site security personnel",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const SpecsPage = () => {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-900">
|
||||||
|
<Helmet>
|
||||||
|
<title>Our Specs | GameZone</title>
|
||||||
|
</Helmet>
|
||||||
|
{/* Hero */}
|
||||||
|
<section className="py-12 md:py-24">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<div className="text-center max-w-3xl mx-auto">
|
||||||
|
<h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
|
||||||
|
Enterprise-Grade
|
||||||
|
<br />
|
||||||
|
<span className="text-blue-500">Infrastructure</span>
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-gray-300">
|
||||||
|
Powered by the latest AMD Ryzen processors and enterprise NVMe
|
||||||
|
storage, our infrastructure is built for performance and
|
||||||
|
reliability.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Hardware Specs */}
|
||||||
|
<section className="py-12 md:py-24 bg-slate-950">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
|
||||||
|
Hardware Specifications
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 md:gap-8">
|
||||||
|
{Object.entries(hardware).map(([key, value]) => (
|
||||||
|
<div key={key} className="bg-gray-900 p-5 rounded-md">
|
||||||
|
<h3 className="text-xl font-semibold text-white mb-4">
|
||||||
|
{value.name}
|
||||||
|
</h3>
|
||||||
|
<ul className="space-y-3">
|
||||||
|
{value.specs.map((spec, index) => (
|
||||||
|
<li key={index} className="flex items-center text-gray-300">
|
||||||
|
<Zap className="w-4 h-4 text-blue-500 mr-2 flex-shrink-0" />
|
||||||
|
{spec}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Data Centers */}
|
||||||
|
<section className="py-12 md:py-24 bg-gray-900">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
|
||||||
|
Global Data Centers
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-2 md:gap-8">
|
||||||
|
{datacenters.map((dc, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="bg-slate-950 p-5 rounded-md border border-gray-900 transition-all duration-200"
|
||||||
|
>
|
||||||
|
<div className="flex items-start justify-between mb-6">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xl font-semibold text-white">
|
||||||
|
{dc.city}
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-400">{dc.country}</p>
|
||||||
|
</div>
|
||||||
|
<Globe className="w-6 h-6 text-blue-500" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Features */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-sm font-semibold text-gray-400 uppercase mb-3">
|
||||||
|
Features
|
||||||
|
</h4>
|
||||||
|
<ul className="space-y-2">
|
||||||
|
{dc.features.map((feature, fIndex) => (
|
||||||
|
<li
|
||||||
|
key={fIndex}
|
||||||
|
className="flex items-center text-gray-300"
|
||||||
|
>
|
||||||
|
<Shield className="w-4 h-4 text-blue-500 mr-2 flex-shrink-0" />
|
||||||
|
{feature}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Latency */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-sm font-semibold text-gray-400 uppercase mb-3">
|
||||||
|
Average Latency
|
||||||
|
</h4>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
{Object.entries(dc.latency).map(([region, latency]) => (
|
||||||
|
<div key={region} className="text-gray-300">
|
||||||
|
<span className="text-gray-400">{region}:</span>{" "}
|
||||||
|
{latency}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Network Infrastructure */}
|
||||||
|
<section className="py-12 md:py-24 bg-slate-950">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
|
||||||
|
Network Infrastructure
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-2 md:gap-8">
|
||||||
|
<div className="bg-gray-900 p-5 rounded-md">
|
||||||
|
<h3 className="text-xl font-semibold text-white mb-4">
|
||||||
|
Network Features
|
||||||
|
</h3>
|
||||||
|
<ul className="space-y-4">
|
||||||
|
<li className="flex items-start gap-4">
|
||||||
|
<Network className="w-6 h-6 text-blue-500 flex-shrink-0 mt-1" />
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white font-medium">
|
||||||
|
Multi-Homed Network
|
||||||
|
</h4>
|
||||||
|
<p className="text-gray-400">
|
||||||
|
Redundant Tier-1 carriers ensure optimal routing and
|
||||||
|
uptime
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li className="flex items-start gap-4">
|
||||||
|
<Wifi className="w-6 h-6 text-blue-500 flex-shrink-0 mt-1" />
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white font-medium">
|
||||||
|
Low Latency Routes
|
||||||
|
</h4>
|
||||||
|
<p className="text-gray-400">
|
||||||
|
Optimized BGP routing for minimal latency
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li className="flex items-start gap-4">
|
||||||
|
<Activity className="w-6 h-6 text-blue-500 flex-shrink-0 mt-1" />
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white font-medium">DDoS Protected</h4>
|
||||||
|
<p className="text-gray-400">
|
||||||
|
Enterprise-grade protection at every location
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Security */}
|
||||||
|
<section className="py-12 md:py-24 bg-gray-900">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
|
||||||
|
Security Measures
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-8">
|
||||||
|
{security.map((item, index) => (
|
||||||
|
<div key={index} className="bg-slate-950 p-5 rounded-md">
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="bg-gray-900 p-3 rounded-md">
|
||||||
|
<item.icon className="w-6 h-6 text-blue-500" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xl font-semibold text-white mb-2">
|
||||||
|
{item.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-400">{item.description}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* CTA */}
|
||||||
|
<section className="py-12 md:py-24 bg-slate-950">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl text-center">
|
||||||
|
<div className="bg-gray-900 p-8 rounded-md border border-gray-900 transition-all duration-200">
|
||||||
|
<div className="max-w-2xl mx-auto">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
|
||||||
|
Ready to Experience
|
||||||
|
<br />
|
||||||
|
<span className="text-blue-500">Enterprise Performance</span>?
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-300 mb-8">
|
||||||
|
Deploy your server in minutes with our high-performance
|
||||||
|
infrastructure
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-wrap justify-center gap-4">
|
||||||
|
<a
|
||||||
|
href="/games"
|
||||||
|
className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md font-medium transition-all duration-200"
|
||||||
|
>
|
||||||
|
View Games
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="/support"
|
||||||
|
className="bg-slate-950 text-white px-8 py-3 rounded-md font-medium transition-all duration-200"
|
||||||
|
>
|
||||||
|
Contact Sales
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SpecsPage;
|
||||||
232
src/pages/SupportPage.jsx
Normal file
232
src/pages/SupportPage.jsx
Normal file
|
|
@ -0,0 +1,232 @@
|
||||||
|
import React from "react";
|
||||||
|
import {
|
||||||
|
FileText,
|
||||||
|
MessageSquare,
|
||||||
|
ChevronRight,
|
||||||
|
Users,
|
||||||
|
Server,
|
||||||
|
Book,
|
||||||
|
Settings,
|
||||||
|
Clock,
|
||||||
|
AlertCircle,
|
||||||
|
Coffee,
|
||||||
|
Shield,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { Helmet } from "react-helmet";
|
||||||
|
|
||||||
|
const popularArticles = [
|
||||||
|
// {
|
||||||
|
// title: "How to Install Minecraft Mods",
|
||||||
|
// category: "Gaming",
|
||||||
|
// views: "2.4k",
|
||||||
|
// path: "https://example.com",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: "Setting Up DDoS Protection",
|
||||||
|
// category: "Security",
|
||||||
|
// views: "1.8k",
|
||||||
|
// path: "https://example.com",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: "Server Performance Optimization",
|
||||||
|
// category: "Technical",
|
||||||
|
// views: "1.5k",
|
||||||
|
// path: "https://example.com",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: "Billing & Payment FAQs",
|
||||||
|
// category: "Billing",
|
||||||
|
// views: "1.2k",
|
||||||
|
// path: "https://example.com",
|
||||||
|
// },
|
||||||
|
];
|
||||||
|
|
||||||
|
const categories = [
|
||||||
|
// {
|
||||||
|
// icon: Server,
|
||||||
|
// title: "Game Servers",
|
||||||
|
// description: "Setup and configuration guides for game servers",
|
||||||
|
// articles: 145,
|
||||||
|
// path: "https://example.com",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// icon: Shield,
|
||||||
|
// title: "Security",
|
||||||
|
// description: "Security best practices and protection guides",
|
||||||
|
// articles: 89,
|
||||||
|
// path: "https://example.com",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// icon: Settings,
|
||||||
|
// title: "Technical",
|
||||||
|
// description: "Technical documentation and troubleshooting",
|
||||||
|
// articles: 234,
|
||||||
|
// path: "https://example.com",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// icon: Users,
|
||||||
|
// title: "Account",
|
||||||
|
// description: "Account management and billing support",
|
||||||
|
// articles: 67,
|
||||||
|
// path: "https://example.com",
|
||||||
|
// },
|
||||||
|
];
|
||||||
|
|
||||||
|
const quickActions = [
|
||||||
|
{
|
||||||
|
title: "Create Ticket",
|
||||||
|
description: "Get help from our support team",
|
||||||
|
icon: MessageSquare,
|
||||||
|
href: "https://example.com",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Knowledge Base",
|
||||||
|
description: "Browse help articles",
|
||||||
|
icon: Book,
|
||||||
|
href: "https://example.com",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "System Status",
|
||||||
|
description: "Check service status",
|
||||||
|
icon: AlertCircle,
|
||||||
|
href: "https://example.com",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const stats = [
|
||||||
|
{ icon: Clock, value: "2 minutes", label: "Average Response Time" },
|
||||||
|
{ icon: Users, value: "24/7", label: "Support Coverage" },
|
||||||
|
{ icon: FileText, value: "500+", label: "Knowledge Base Articles" },
|
||||||
|
{ icon: Coffee, value: "99%", label: "Customer Satisfaction" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const QuickActionCard = ({ title, description, icon: Icon, href }) => (
|
||||||
|
<a
|
||||||
|
href={href}
|
||||||
|
className="bg-slate-900 border border-gray-900 p-5 rounded-md transition-all duration-200 group cursor-pointer"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="bg-slate-950 p-3 rounded-md border border-gray-900 transition-all duration-200">
|
||||||
|
<Icon className="w-6 h-6 text-blue-500" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold text-white mb-1">{title}</h3>
|
||||||
|
<p className="text-gray-400">{description}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
|
||||||
|
const PopularArticleCard = ({ title, category, views, path }) => (
|
||||||
|
<a href={path} className="bg-slate-950 border border-gray-900 p-5 rounded-md">
|
||||||
|
<div className="flex justify-between items-start">
|
||||||
|
<div>
|
||||||
|
<span className="text-sm text-blue-500 mb-2 block">{category}</span>
|
||||||
|
<h3 className="text-lg font-semibold text-white mb-1">{title}</h3>
|
||||||
|
<span className="text-sm text-gray-400">{views}+ views</span>
|
||||||
|
</div>
|
||||||
|
<ChevronRight className="w-5 h-5 text-gray-400 group-hover:text-blue-500 transition-colors duration-200" />
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
|
||||||
|
const CategoryCard = ({ icon: Icon, title, description, articles, path }) => (
|
||||||
|
<a
|
||||||
|
href={path}
|
||||||
|
className="bg-slate-900 border border-gray-900 p-5 rounded-md transition-all duration-200 group"
|
||||||
|
>
|
||||||
|
<div className="bg-slate-950 p-3 rounded-md border border-gray-900 transition-all duration-200 w-fit mb-4">
|
||||||
|
<Icon className="w-6 h-6 text-blue-500" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-semibold text-white mb-2">{title}</h3>
|
||||||
|
<p className="text-gray-400 text-sm mb-4">{description}</p>
|
||||||
|
<span className="text-sm text-blue-500">{articles}+ articles</span>
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
|
||||||
|
const StatCard = ({ icon: Icon, value, label }) => (
|
||||||
|
<div className="bg-slate-950 p-5 rounded-md">
|
||||||
|
<div className="relative mb-1">
|
||||||
|
<Icon className="relative w-8 h-8 text-blue-500 mx-auto" />
|
||||||
|
</div>
|
||||||
|
<div className="text-2xl font-bold text-white text-center mb-1">
|
||||||
|
{value}
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-400 text-sm text-center">{label}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const SupportPortal = () => {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-slate-900">
|
||||||
|
{/* Hero */}
|
||||||
|
<Helmet>
|
||||||
|
<title>Support | GameZone</title>
|
||||||
|
</Helmet>
|
||||||
|
<section className="py-12 md:py-24 relative overflow-hidden">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl relative">
|
||||||
|
<div className="text-center max-w-2xl mx-auto">
|
||||||
|
<h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
|
||||||
|
How can we help you?
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-gray-300">
|
||||||
|
Explore our knowledge base or create a support ticket
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Quick Actions */}
|
||||||
|
<section className="py-12 md:py-24 bg-slate-950">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-2 md:gap-8">
|
||||||
|
{quickActions.map((action, index) => (
|
||||||
|
<QuickActionCard key={index} {...action} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Popular Articles */}
|
||||||
|
<section className="py-12 md:py-24 bg-slate-900">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
|
||||||
|
Popular Articles
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-8">
|
||||||
|
{popularArticles.map((article, index) => (
|
||||||
|
<PopularArticleCard key={index} {...article} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Categories */}
|
||||||
|
<section className="py-12 md:py-24 bg-slate-950">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
|
||||||
|
Browse by Category
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 md:gap-8">
|
||||||
|
{categories.map((category, index) => (
|
||||||
|
<CategoryCard key={index} {...category} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Support Stats */}
|
||||||
|
<section className="py-12 md:py-24 bg-slate-900">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-2 md:gap-8">
|
||||||
|
{stats.map((stat, index) => (
|
||||||
|
<StatCard key={index} {...stat} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SupportPortal;
|
||||||
239
src/pages/TOSPage.jsx
Normal file
239
src/pages/TOSPage.jsx
Normal file
|
|
@ -0,0 +1,239 @@
|
||||||
|
import React from "react";
|
||||||
|
import { Calendar, AlertCircle } from "lucide-react";
|
||||||
|
import { Helmet } from "react-helmet";
|
||||||
|
|
||||||
|
const TOSPage = () => {
|
||||||
|
const lastUpdated = "January 1, 2025";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-slate-900">
|
||||||
|
<Helmet>
|
||||||
|
<title>Terms of Service | GameZone</title>
|
||||||
|
</Helmet>
|
||||||
|
{/* Hero */}
|
||||||
|
<section className="py-12 md:py-24">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<div className="text-center max-w-3xl mx-auto">
|
||||||
|
<h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
|
||||||
|
Terms of Service
|
||||||
|
</h1>
|
||||||
|
<div className="flex items-center justify-center gap-2 text-gray-300">
|
||||||
|
<Calendar className="w-5 h-5" />
|
||||||
|
<span>Last Updated: {lastUpdated}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="py-12 md:py-24 bg-slate-950">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
{/* Important Notice */}
|
||||||
|
<div className="bg-slate-900 rounded-md p-5 mb-6">
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="bg-slate-950 p-2 rounded-md">
|
||||||
|
<AlertCircle className="w-6 h-6 text-blue-500" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 className="text-xl font-semibold text-white mb-2">
|
||||||
|
Important Notice
|
||||||
|
</h2>
|
||||||
|
<p className="text-gray-300">
|
||||||
|
Please read these Terms of Service carefully before using our
|
||||||
|
services. By accessing or using our services, you agree to be
|
||||||
|
bound by these terms.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Terms Content */}
|
||||||
|
<div className="space-y-6">
|
||||||
|
<section>
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
|
||||||
|
1. Acceptance of Terms
|
||||||
|
</h2>
|
||||||
|
<div className="bg-slate-900 rounded-md p-5">
|
||||||
|
<p className="text-gray-300 mb-4">
|
||||||
|
By accessing and using our services, you acknowledge that you
|
||||||
|
have read, understood, and agree to be bound by these Terms of
|
||||||
|
Service, along with our Privacy Policy and Acceptable Use
|
||||||
|
Policy.
|
||||||
|
</p>
|
||||||
|
<p className="text-gray-300">
|
||||||
|
We reserve the right to modify these terms at any time. Your
|
||||||
|
continued use of our services after any changes constitutes
|
||||||
|
acceptance of those changes.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Service Description */}
|
||||||
|
<section>
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
|
||||||
|
2. Service Description
|
||||||
|
</h2>
|
||||||
|
<div className="space-y-8">
|
||||||
|
<p className="text-xl text-gray-300">
|
||||||
|
We provide web hosting, VPS hosting, and related services.
|
||||||
|
While we strive to ensure high availability and performance,
|
||||||
|
we cannot guarantee that our services will be uninterrupted or
|
||||||
|
error-free.
|
||||||
|
</p>
|
||||||
|
<div className="bg-slate-900 rounded-md p-5">
|
||||||
|
<h3 className="text-xl font-semibold text-white mb-4">
|
||||||
|
Our Commitment
|
||||||
|
</h3>
|
||||||
|
<ul className="space-y-2 text-gray-300">
|
||||||
|
<li>99.9% uptime guarantee for all hosting services</li>
|
||||||
|
<li>24/7 technical support</li>
|
||||||
|
<li>Regular security updates and maintenance</li>
|
||||||
|
<li>Data backup services as specified in your plan</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* User Responsibilities */}
|
||||||
|
<section>
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
|
||||||
|
3. User Responsibilities
|
||||||
|
</h2>
|
||||||
|
<div className="space-y-8">
|
||||||
|
<p className="text-xl text-gray-300">
|
||||||
|
You are responsible for maintaining the security of your
|
||||||
|
account, including but not limited to protecting your password
|
||||||
|
and other login credentials.
|
||||||
|
</p>
|
||||||
|
<div className="bg-slate-900 rounded-md p-5">
|
||||||
|
<h3 className="text-xl font-semibold text-white mb-4">
|
||||||
|
Prohibited Activities
|
||||||
|
</h3>
|
||||||
|
<ul className="space-y-2 text-gray-300">
|
||||||
|
<li>Uploading or distributing malicious code</li>
|
||||||
|
<li>
|
||||||
|
Engaging in unauthorized scanning or penetration testing
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Hosting content that violates intellectual property rights
|
||||||
|
</li>
|
||||||
|
<li>Using our services for any illegal activities</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Payment Terms */}
|
||||||
|
<section>
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
|
||||||
|
4. Payment Terms
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-300 mb-8">
|
||||||
|
Services are billed according to the plan you select. You agree
|
||||||
|
to pay all fees associated with your account.
|
||||||
|
</p>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-8">
|
||||||
|
<div className="bg-slate-900 rounded-md p-5">
|
||||||
|
<h3 className="text-xl font-semibold text-white mb-4">
|
||||||
|
Billing Cycle
|
||||||
|
</h3>
|
||||||
|
<ul className="space-y-2 text-gray-300">
|
||||||
|
<li>Monthly or annual billing options</li>
|
||||||
|
<li>Automatic renewal unless cancelled</li>
|
||||||
|
<li>Pro-rated refunds for cancellations</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div className="bg-slate-900 rounded-md p-5">
|
||||||
|
<h3 className="text-xl font-semibold text-white mb-4">
|
||||||
|
Payment Methods
|
||||||
|
</h3>
|
||||||
|
<ul className="space-y-2 text-gray-300">
|
||||||
|
<li>Major credit cards accepted</li>
|
||||||
|
<li>PayPal and bank transfers</li>
|
||||||
|
<li>Cryptocurrency options available</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Termination */}
|
||||||
|
<section>
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
|
||||||
|
5. Termination
|
||||||
|
</h2>
|
||||||
|
<div className="space-y-8">
|
||||||
|
<p className="text-xl text-gray-300">
|
||||||
|
We reserve the right to suspend or terminate your access to
|
||||||
|
our services for violations of these terms or for any other
|
||||||
|
reason we deem appropriate.
|
||||||
|
</p>
|
||||||
|
<div className="bg-slate-900 rounded-md p-5">
|
||||||
|
<h3 className="text-xl font-semibold text-white mb-4">
|
||||||
|
Effect of Termination
|
||||||
|
</h3>
|
||||||
|
<ul className="space-y-2 text-gray-300">
|
||||||
|
<li>All access to services will be discontinued</li>
|
||||||
|
<li>Data may be permanently deleted after 30 days</li>
|
||||||
|
<li>You remain liable for any outstanding payments</li>
|
||||||
|
<li>Certain terms survive termination</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Liability */}
|
||||||
|
<section>
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
|
||||||
|
6. Limitation of Liability
|
||||||
|
</h2>
|
||||||
|
<div className="space-y-8">
|
||||||
|
<p className="text-xl text-gray-300">
|
||||||
|
We shall not be liable for any indirect, incidental, special,
|
||||||
|
consequential, or punitive damages resulting from your use of
|
||||||
|
our services.
|
||||||
|
</p>
|
||||||
|
<div className="bg-slate-900 rounded-md p-5">
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="bg-slate-950 p-2 rounded-md">
|
||||||
|
<AlertCircle className="w-6 h-6 text-blue-500" />
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-300">
|
||||||
|
Our liability is limited to the amount you paid for the
|
||||||
|
services in the 12 months preceding the claim.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Contact Section */}
|
||||||
|
<section className="bg-slate-900 rounded-md p-8 text-center">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
|
||||||
|
Questions About Our Terms?
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-300 mb-8">
|
||||||
|
If you have any questions about these terms, please contact our
|
||||||
|
legal team.
|
||||||
|
</p>
|
||||||
|
<div className="flex justify-center gap-4">
|
||||||
|
<button className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md font-medium transition-all duration-200">
|
||||||
|
Contact Legal
|
||||||
|
</button>
|
||||||
|
<button className="bg-slate-950 text-white px-8 py-3 rounded-md font-medium transition-all duration-200 ">
|
||||||
|
Download PDF
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Footer Note */}
|
||||||
|
<div className="text-center text-gray-400">
|
||||||
|
<p>These terms were last updated on {lastUpdated}.</p>
|
||||||
|
<p>Copyright © 2025 Your Company Name. All rights reserved.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TOSPage;
|
||||||
389
src/pages/VPSPage.jsx
Normal file
389
src/pages/VPSPage.jsx
Normal file
|
|
@ -0,0 +1,389 @@
|
||||||
|
import React from "react";
|
||||||
|
import {
|
||||||
|
Cpu,
|
||||||
|
Shield,
|
||||||
|
Server,
|
||||||
|
Zap,
|
||||||
|
Check,
|
||||||
|
Globe,
|
||||||
|
HardDrive,
|
||||||
|
Network,
|
||||||
|
ExternalLink,
|
||||||
|
Clock,
|
||||||
|
Award,
|
||||||
|
Settings,
|
||||||
|
Heart,
|
||||||
|
Users,
|
||||||
|
} from "lucide-react";
|
||||||
|
import CTA from "../components/home/CTA";
|
||||||
|
import { Helmet } from "react-helmet";
|
||||||
|
|
||||||
|
const plans = [
|
||||||
|
{
|
||||||
|
name: "2GB",
|
||||||
|
price: "8.25",
|
||||||
|
link: "https://billing.skylinkhosting.com/index.php?rp=/store/premium-vps-hosting/2gb",
|
||||||
|
specs: {
|
||||||
|
cpu: "1 vCPU",
|
||||||
|
ram: "2 GB RAM",
|
||||||
|
storage: "25 GB NVMe",
|
||||||
|
bandwidth: "1 TB",
|
||||||
|
},
|
||||||
|
features: [
|
||||||
|
"DDoS Protection",
|
||||||
|
"Full Root Access",
|
||||||
|
"10 Gbps Network",
|
||||||
|
"24/7 Priority Support",
|
||||||
|
"Daily Backups",
|
||||||
|
"99.95% Uptime SLA",
|
||||||
|
"Dedicated IP",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "4GB",
|
||||||
|
price: "11.25",
|
||||||
|
link: "https://billing.skylinkhosting.com/index.php?rp=/store/premium-vps-hosting/4gb",
|
||||||
|
specs: {
|
||||||
|
cpu: "1 vCPU",
|
||||||
|
ram: "4 GB RAM",
|
||||||
|
storage: "50 GB NVMe",
|
||||||
|
bandwidth: "1 TB",
|
||||||
|
},
|
||||||
|
features: [
|
||||||
|
"DDoS Protection",
|
||||||
|
"Full Root Access",
|
||||||
|
"10 Gbps Network",
|
||||||
|
"24/7 Priority Support",
|
||||||
|
"Daily Backups",
|
||||||
|
"99.95% Uptime SLA",
|
||||||
|
"Dedicated IP",
|
||||||
|
],
|
||||||
|
recommended: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "8GB",
|
||||||
|
price: "11.25",
|
||||||
|
link: "https://billing.skylinkhosting.com/index.php?rp=/store/premium-vps-hosting/8gb",
|
||||||
|
specs: {
|
||||||
|
cpu: "2 vCPU",
|
||||||
|
ram: "8 GB RAM",
|
||||||
|
storage: "100 GB NVMe",
|
||||||
|
bandwidth: "2 TB",
|
||||||
|
},
|
||||||
|
features: [
|
||||||
|
"DDoS Protection",
|
||||||
|
"Full Root Access",
|
||||||
|
"10 Gbps Network",
|
||||||
|
"24/7 Priority Support",
|
||||||
|
"Daily Backups",
|
||||||
|
"99.95% Uptime SLA",
|
||||||
|
"Dedicated IP",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const features = [
|
||||||
|
{
|
||||||
|
icon: Cpu,
|
||||||
|
title: "AMD Processors",
|
||||||
|
description: "Latest generation AMD CPUs for maximum performance",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Shield,
|
||||||
|
title: "DDoS Protection",
|
||||||
|
description: "Enterprise-grade protection against attacks up to 17Tbps",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Globe,
|
||||||
|
title: "Global Network",
|
||||||
|
description: "1 location worldwide with ultra-low latency connections",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Clock,
|
||||||
|
title: "Instant Deployment",
|
||||||
|
description: "Get your VPS up and running in under 60 seconds",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const StatCard = ({ value, label, icon: Icon }) => (
|
||||||
|
<div className="bg-slate-950 p-5 rounded-md">
|
||||||
|
<div className="relative mb-1">
|
||||||
|
<Icon className="relative w-8 h-8 text-blue-500 mx-auto" />
|
||||||
|
</div>
|
||||||
|
<div className="text-2xl font-bold text-white text-center">{value}</div>
|
||||||
|
<div className="text-gray-400 text-sm text-center">{label}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const FeatureCard = ({ icon: Icon, title, description }) => (
|
||||||
|
<div className="bg-slate-900 p-5 rounded-md">
|
||||||
|
<div className="relative mb-2">
|
||||||
|
<Icon className="relative w-12 h-12 text-blue-500" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-semibold text-white mb-2">{title}</h3>
|
||||||
|
<p className="text-gray-400">{description}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const PlanCard = ({ name, price, specs, features, recommended, link }) => (
|
||||||
|
<div className="bg-gray-900 p-6 rounded-lg border border-gray-900 group cursor-pointer relative transition-all duration-200">
|
||||||
|
{/* Main container */}
|
||||||
|
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
|
||||||
|
{/* Plan name and price section */}
|
||||||
|
<div className="flex-shrink-0 lg:w-64">
|
||||||
|
{recommended && (
|
||||||
|
<div className="text-blue-400 text-sm font-medium mb-2">
|
||||||
|
RECOMMENDED
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<h3 className="text-2xl font-bold text-white mb-2">{name}</h3>
|
||||||
|
<div className="text-3xl font-bold text-blue-400">
|
||||||
|
${price}
|
||||||
|
<span className="text-lg text-gray-400">/mo</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Specs section */}
|
||||||
|
<div className="flex-shrink-0 lg:w-72">
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<div className="flex items-center text-gray-300">
|
||||||
|
<Cpu className="w-5 h-5 mr-2 text-blue-400" />
|
||||||
|
{specs.cpu}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center text-gray-300">
|
||||||
|
<Server className="w-5 h-5 mr-2 text-blue-400" />
|
||||||
|
{specs.ram}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center text-gray-300">
|
||||||
|
<HardDrive className="w-5 h-5 mr-2 text-blue-400" />
|
||||||
|
{specs.storage}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center text-gray-300">
|
||||||
|
<Network className="w-5 h-5 mr-2 text-blue-400" />
|
||||||
|
{specs.bandwidth}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Features section */}
|
||||||
|
<div className="flex-grow">
|
||||||
|
<div className="grid grid-cols-2 gap-2">
|
||||||
|
{features.map((feature, index) => (
|
||||||
|
<div key={index} className="flex items-center text-gray-300">
|
||||||
|
<Check className="w-4 h-4 text-blue-400 mr-2 flex-shrink-0" />
|
||||||
|
{feature}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Action button */}
|
||||||
|
<div className="flex-shrink-0 lg:w-40">
|
||||||
|
<a
|
||||||
|
href={link}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className={`inline-flex items-center justify-center w-full py-3 px-4 rounded-md font-medium transition-all duration-200
|
||||||
|
${
|
||||||
|
recommended
|
||||||
|
? "bg-blue-600 hover:bg-blue-700 text-white"
|
||||||
|
: "bg-gray-700 hover:bg-gray-600 text-white"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<span>Deploy Now</span>
|
||||||
|
<ExternalLink className="w-4 h-4 ml-2" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
const ServerTypeCard = ({ name, image }) => (
|
||||||
|
<div className="bg-slate-950 p-5 rounded-md border border-gray-900 transition-all duration-200">
|
||||||
|
<div className="relative mb-4 aspect-square">
|
||||||
|
<img
|
||||||
|
src={image}
|
||||||
|
alt={`${name} Server`}
|
||||||
|
className="rounded-md w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-semibold text-white text-center">{name}</h3>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
export const VPSPage = () => {
|
||||||
|
return (
|
||||||
|
<div className="bg-slate-900 min-h-screen">
|
||||||
|
<Helmet>
|
||||||
|
<title>VPS | Skylink Hosting</title>
|
||||||
|
</Helmet>
|
||||||
|
{/* Hero Section */}
|
||||||
|
<section className="md:min-h-screen min-h-44 py-12 md:py-24 relative overflow-hidden">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl relative">
|
||||||
|
<div className="flex flex-col md:flex-row items-center gap-12">
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="inline-flex items-center px-4 py-2 rounded-md bg-slate-950 border border-gray-900 text-blue-400 mb-6">
|
||||||
|
<Award className="w-5 h-5 mr-2" />
|
||||||
|
<span className="text-sm font-semibold">#1 VPS Provider</span>
|
||||||
|
</div>
|
||||||
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight">
|
||||||
|
High-Performance
|
||||||
|
<br />
|
||||||
|
<span className="text-blue-500">Virtual Servers</span>
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-gray-300 mb-8 leading-relaxed">
|
||||||
|
Powered by AMD processors and NVMe storage, our VPS
|
||||||
|
solutions deliver exceptional performance for your applications.
|
||||||
|
</p>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-2 mb-8">
|
||||||
|
<StatCard value="25ms" label="Average Latency" icon={Zap} />
|
||||||
|
<StatCard value="99.95%" label="Uptime" icon={Heart} />
|
||||||
|
<StatCard value="60s" label="Deployment" icon={Clock} />
|
||||||
|
<StatCard value="24/7" label="Support" icon={Users} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* <div className="flex-1 hidden md:block">
|
||||||
|
<div className="bg-slate-950 rounded-xl">
|
||||||
|
<img
|
||||||
|
src="https://placehold.co/800x600"
|
||||||
|
alt="VPS Dashboard"
|
||||||
|
className="rounded-lg w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div> */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Features Section */}
|
||||||
|
<section className="py-12 md:py-24 bg-slate-950">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
|
||||||
|
Enterprise-Grade Infrastructure
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-300 max-w-2xl mx-auto">
|
||||||
|
Built for performance, reliability, and security
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 md:gap-8">
|
||||||
|
{features.map((feature, index) => (
|
||||||
|
<FeatureCard key={index} {...feature} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Server Types Section */}
|
||||||
|
<section className="py-12 md:py-24 bg-slate-900">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
|
||||||
|
Choose From Popular Distributions
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-300 max-w-2xl mx-auto">
|
||||||
|
Select an OS, Deploy in Seconds!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-2 md:gap-8">
|
||||||
|
{[
|
||||||
|
{
|
||||||
|
name: "Ubuntu",
|
||||||
|
image:
|
||||||
|
"https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/UbuntuCoF.svg/1024px-UbuntuCoF.svg.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Fedora",
|
||||||
|
image:
|
||||||
|
"https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Fedora_icon_%282021%29.svg/2089px-Fedora_icon_%282021%29.svg.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Debian",
|
||||||
|
image:
|
||||||
|
"https://www.shareicon.net/data/512x512/2015/09/16/101872_debian_512x512.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "CentOS",
|
||||||
|
image:
|
||||||
|
"https://static-00.iconduck.com/assets.00/centos-icon-2048x2048-39pfdqnc.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "OpenSUSE",
|
||||||
|
image:
|
||||||
|
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSZ-uWShZ8-N9qAw6Hso8_NxX5KrkwmDRyTXA&s",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Windows",
|
||||||
|
image:
|
||||||
|
"https://imgs.search.brave.com/5CpHkL_QsUFbg2gefzq01sBYrytDbfq0RNJrUDnHYSM/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly9jZG4u/d2luZG93c3JlcG9y/dC5jb20vd3AtY29u/dGVudC91cGxvYWRz/LzIwMjMvMDIvY2hh/bmdlLWJvb3QtbG9n/by13aW5kb3dzLTEw/LTg4Nng1OTAucG5n",
|
||||||
|
},
|
||||||
|
].map((type, index) => (
|
||||||
|
<ServerTypeCard key={index} {...type} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section className="py-12 md:py-24 bg-gray-900">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<div className="flex flex-col md:flex-row items-center gap-12">
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="relative">
|
||||||
|
<div className="absolute -inset-4"></div>
|
||||||
|
<img
|
||||||
|
src="https://virtfusion.com/wp-content/uploads/2023/03/screen-2023-dark-1.png"
|
||||||
|
alt="Control Panel Interface"
|
||||||
|
className="relative"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-3">
|
||||||
|
Intuitive Control Panel
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-300 mb-6 leading-relaxed">
|
||||||
|
Take full control of your Minecraft server with our custom-built
|
||||||
|
panel. Manage plugins, monitor performance, and configure
|
||||||
|
settings with ease. Perfect for both beginners and experienced
|
||||||
|
server administrators.
|
||||||
|
</p>
|
||||||
|
<ul className="space-y-3 mb-6">
|
||||||
|
<li className="flex items-center text-gray-300">
|
||||||
|
<Settings className="w-6 h-6 mr-3 text-blue-500" />
|
||||||
|
One-click plugin installation and configuration
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center text-gray-300">
|
||||||
|
<Cpu className="w-6 h-6 mr-3 text-blue-500" />
|
||||||
|
Real-time performance monitoring and optimization
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center text-gray-300">
|
||||||
|
<Users className="w-6 h-6 mr-3 text-blue-500" />
|
||||||
|
Advanced user and permission management
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{/* Plans Section */}
|
||||||
|
<section className="py-12 md:py-24 bg-slate-950">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<div className="text-center mb-6">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
|
||||||
|
Choose Your Plan
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-300 mb-8">
|
||||||
|
Flexible plans for every workload
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 gap-2 md:gap-4">
|
||||||
|
{plans.map((plan, index) => (
|
||||||
|
<PlanCard key={index} {...plan} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<CTA />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default VPSPage;
|
||||||
483
src/pages/WebHosting.jsx
Normal file
483
src/pages/WebHosting.jsx
Normal file
|
|
@ -0,0 +1,483 @@
|
||||||
|
import React from "react";
|
||||||
|
import {
|
||||||
|
Shield,
|
||||||
|
Rocket,
|
||||||
|
Server,
|
||||||
|
Clock,
|
||||||
|
Zap,
|
||||||
|
HardDrive,
|
||||||
|
Award,
|
||||||
|
Users,
|
||||||
|
ExternalLink,
|
||||||
|
Heart,
|
||||||
|
Settings,
|
||||||
|
Cpu,
|
||||||
|
Database,
|
||||||
|
Network,
|
||||||
|
} from "lucide-react";
|
||||||
|
import FAQ from "../components/home/FAQ";
|
||||||
|
import CTA from "../components/home/CTA";
|
||||||
|
import { Helmet } from "react-helmet";
|
||||||
|
|
||||||
|
const features = [
|
||||||
|
{
|
||||||
|
icon: Rocket,
|
||||||
|
title: "Lightning Fast Servers",
|
||||||
|
description:
|
||||||
|
"High-performance servers with NVMe SSDs for blazing fast website load times",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Shield,
|
||||||
|
title: "Advanced Security",
|
||||||
|
description:
|
||||||
|
"Enterprise-grade DDoS protection and free SSL certificates included",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Database,
|
||||||
|
title: "Daily Backups",
|
||||||
|
description: "Automated daily backups with one-click restore functionality",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Network,
|
||||||
|
title: "Global CDN",
|
||||||
|
description: "Content delivery network with 200+ global edge locations",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const plans = [
|
||||||
|
{
|
||||||
|
name: "Starter",
|
||||||
|
price: "$4.99",
|
||||||
|
storage: "10GB SSD",
|
||||||
|
bandwidth: "Unmetered",
|
||||||
|
websites: "1 Website",
|
||||||
|
backups: "Daily",
|
||||||
|
ssl: "Free SSL",
|
||||||
|
support: "24/7 Support",
|
||||||
|
link: "https://example.com/",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Professional",
|
||||||
|
price: "$9.99",
|
||||||
|
storage: "50GB SSD",
|
||||||
|
bandwidth: "Unmetered",
|
||||||
|
websites: "Unlimited",
|
||||||
|
backups: "Daily",
|
||||||
|
ssl: "Free SSL",
|
||||||
|
support: "Priority Support",
|
||||||
|
link: "https://example.com/",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Business",
|
||||||
|
price: "$24.99",
|
||||||
|
storage: "200GB SSD",
|
||||||
|
bandwidth: "Unmetered",
|
||||||
|
websites: "Unlimited",
|
||||||
|
backups: "Daily",
|
||||||
|
ssl: "Wildcard SSL",
|
||||||
|
support: "Premium Support",
|
||||||
|
link: "https://example.com/",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const StatCard = ({ value, label, icon: Icon }) => (
|
||||||
|
<div className="bg-slate-950 p-5 rounded-md">
|
||||||
|
<div className="relative mb-1">
|
||||||
|
<Icon className="relative w-8 h-8 text-blue-600 mx-auto" />
|
||||||
|
</div>
|
||||||
|
<div className="text-2xl font-bold text-white text-center">{value}</div>
|
||||||
|
<div className="text-gray-400 text-sm text-center">{label}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const FeatureCard = ({ icon: Icon, title, description }) => (
|
||||||
|
<div className="bg-slate-900 p-5 rounded-md">
|
||||||
|
<div className="relative mb-2">
|
||||||
|
<Icon className="relative w-12 h-12 text-blue-600" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-semibold text-white mb-2">{title}</h3>
|
||||||
|
<p className="text-gray-400">{description}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const PlanCard = ({
|
||||||
|
name,
|
||||||
|
price,
|
||||||
|
storage,
|
||||||
|
bandwidth,
|
||||||
|
websites,
|
||||||
|
backups,
|
||||||
|
ssl,
|
||||||
|
link,
|
||||||
|
support,
|
||||||
|
recommended,
|
||||||
|
}) => (
|
||||||
|
<div className="bg-gray-900 p-5 rounded-md border border-gray-900 group cursor-pointer relative">
|
||||||
|
<div className="relative">
|
||||||
|
<div className="relative">
|
||||||
|
<div className="text-center mb-6">
|
||||||
|
<h3 className="text-2xl font-bold text-white mb-2">{name}</h3>
|
||||||
|
<div className="text-3xl font-bold text-blue-600 mb-2">
|
||||||
|
{price}
|
||||||
|
<span className="text-lg text-gray-400">/mo</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-400">{websites}</p>
|
||||||
|
</div>
|
||||||
|
<ul className="space-y-2 mb-3">
|
||||||
|
<li className="flex items-center text-gray-300">
|
||||||
|
<HardDrive className="w-5 h-5 mr-2 text-blue-600" />
|
||||||
|
{storage}
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center text-gray-300">
|
||||||
|
<Network className="w-5 h-5 mr-2 text-blue-600" />
|
||||||
|
{bandwidth}
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center text-gray-300">
|
||||||
|
<Clock className="w-5 h-5 mr-2 text-blue-600" />
|
||||||
|
{backups}
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center text-gray-300">
|
||||||
|
<Shield className="w-5 h-5 mr-2 text-blue-600" />
|
||||||
|
{ssl}
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center text-gray-300">
|
||||||
|
<Users className="w-5 h-5 mr-2 text-blue-600" />
|
||||||
|
{support}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a
|
||||||
|
href={link}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className={`inline-flex items-center justify-center w-full py-3 px-4 rounded-md font-medium transition-all duration-200
|
||||||
|
${
|
||||||
|
recommended
|
||||||
|
? "bg-blue-600 hover:bg-blue-700 text-white"
|
||||||
|
: "bg-gray-700 hover:bg-gray-600 text-white"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<span>Deploy Now</span>
|
||||||
|
<ExternalLink className="w-4 h-4 ml-2" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
const ServerTypeCard = ({ name, image }) => (
|
||||||
|
<div className="bg-slate-950 p-5 rounded-md border border-gray-900 transition-all duration-200">
|
||||||
|
<div className="relative mb-4 aspect-square">
|
||||||
|
<img
|
||||||
|
src={image}
|
||||||
|
alt={`${name} Server`}
|
||||||
|
className="rounded-md w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-semibold text-white text-center">{name}</h3>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
export const WebHosting = () => {
|
||||||
|
return (
|
||||||
|
<div className="bg-slate-900 min-h-screen">
|
||||||
|
<Helmet>
|
||||||
|
<title>Web Hosting | GameZone</title>
|
||||||
|
</Helmet>
|
||||||
|
{/* Hero */}
|
||||||
|
<section className="min-h-44 md:min-h-screen py-12 md:py-24 relative overflow-hidden">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl relative">
|
||||||
|
<div className="flex flex-col md:flex-row items-center gap-12">
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="inline-flex items-center px-4 py-2 rounded-md bg-slate-950 border border-gray-900 text-blue-600 mb-6">
|
||||||
|
<div className="relative">
|
||||||
|
<Award className="w-5 h-5 mr-2" />
|
||||||
|
</div>
|
||||||
|
<span className="text-sm font-semibold">
|
||||||
|
#1 Web Hosting Provider
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight">
|
||||||
|
Professional
|
||||||
|
<br />
|
||||||
|
<span className="text-blue-600">Web Hosting</span>
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-gray-300 mb-8 leading-relaxed">
|
||||||
|
Lightning-fast hosting powered by NVMe SSDs, featuring automatic
|
||||||
|
backups, free SSL, and 24/7 expert support.
|
||||||
|
</p>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-4 mb-8">
|
||||||
|
<StatCard value="99.9%" label="Uptime" icon={Heart} />
|
||||||
|
<StatCard value="0.1s" label="Response" icon={Zap} />
|
||||||
|
<StatCard value="24/7" label="Support" icon={Users} />
|
||||||
|
<StatCard value="45+" label="Data Centers" icon={Server} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 hidden md:block">
|
||||||
|
<div className="bg-slate-950 rounded-xl">
|
||||||
|
<div className="relative">
|
||||||
|
<img
|
||||||
|
src="/images/web-hosting.jpg"
|
||||||
|
alt="Web Hosting Dashboard"
|
||||||
|
className="relative rounded-lg w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Features Section */}
|
||||||
|
<section className="py-12 md:py-24 bg-slate-950">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
|
||||||
|
Enterprise-Grade Hosting
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-300 max-w-2xl mx-auto">
|
||||||
|
Built for performance, secured for peace of mind, and backed by
|
||||||
|
24/7 expert support
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 md:gap-8">
|
||||||
|
{features.map((feature, index) => (
|
||||||
|
<FeatureCard key={index} {...feature} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Server Types Section */}
|
||||||
|
<section className="py-12 md:py-24 bg-slate-900">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
|
||||||
|
Choose a Popular Application
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-300 max-w-2xl mx-auto">
|
||||||
|
Worry free of relying on just cPanel, we provide other
|
||||||
|
applications!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-2 md:gap-8">
|
||||||
|
{[
|
||||||
|
{
|
||||||
|
name: "Wordpress",
|
||||||
|
image: "https://cdn-icons-png.flaticon.com/512/174/174881.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Laravel",
|
||||||
|
image:
|
||||||
|
"https://static-00.iconduck.com/assets.00/laravel-icon-1990x2048-xawylrh0.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "NamelessMC",
|
||||||
|
image:
|
||||||
|
"https://namelessmc.com/uploads/avatars/defaults/15a1d8fbaef6dd_olqikfemgjnhp.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "cPanel",
|
||||||
|
image:
|
||||||
|
"https://innovahosting.net/app/public/upload/cms/pages/47/z2Uikmn6KNy3MhR2u9hfED85hNyubTEFJU1m4ZEQ.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "DirectAdmin",
|
||||||
|
image: "https://www.svgrepo.com/show/331367/directadmin.svg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "WHMCS",
|
||||||
|
image:
|
||||||
|
"https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/376_Whmcs_logo-512.png",
|
||||||
|
},
|
||||||
|
].map((type, index) => (
|
||||||
|
<ServerTypeCard key={index} {...type} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section className="py-12 md:py-24 bg-gray-900">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<div className="flex flex-col md:flex-row items-center gap-12">
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="relative">
|
||||||
|
<div className="absolute -inset-4"></div>
|
||||||
|
<img
|
||||||
|
src="https://www.cloudhostworld.com/img/chw-image/makes-unique/CHW-C2.png"
|
||||||
|
alt="Control Panel Interface"
|
||||||
|
className="relative"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-3">
|
||||||
|
Intuitive Control Panel
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-300 mb-6 leading-relaxed">
|
||||||
|
Take full control of your Minecraft server with our custom-built
|
||||||
|
panel. Manage plugins, monitor performance, and configure
|
||||||
|
settings with ease. Perfect for both beginners and experienced
|
||||||
|
server administrators.
|
||||||
|
</p>
|
||||||
|
<ul className="space-y-3 mb-6">
|
||||||
|
<li className="flex items-center text-gray-300">
|
||||||
|
<Settings className="w-6 h-6 mr-3 text-blue-600" />
|
||||||
|
One-click plugin installation and configuration
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center text-gray-300">
|
||||||
|
<Cpu className="w-6 h-6 mr-3 text-blue-600" />
|
||||||
|
Real-time performance monitoring and optimization
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center text-gray-300">
|
||||||
|
<Users className="w-6 h-6 mr-3 text-blue-600" />
|
||||||
|
Advanced user and permission management
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Plans Section */}
|
||||||
|
<section className="py-12 md:py-24 bg-slate-950">
|
||||||
|
<div className="container mx-auto px-4 max-w-screen-xl">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
|
||||||
|
Choose Your Plan
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-300 mb-8">
|
||||||
|
Flexible plans that grow with your business
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-2 md:gap-8 mb-8">
|
||||||
|
{plans.map((plan, index) => (
|
||||||
|
<PlanCard key={index} {...plan} recommended={index === 1} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Feature Comparison Table */}
|
||||||
|
<div className="bg-gray-900 rounded-md border border-slate-950 overflow-hidden">
|
||||||
|
<div className="p-6 border-b border-slate-950">
|
||||||
|
<h3 className="text-2xl font-bold text-white">Plan Comparison</h3>
|
||||||
|
</div>
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="w-full">
|
||||||
|
<thead>
|
||||||
|
<tr className="bg-gray-900">
|
||||||
|
<th className="text-left p-4 text-white font-extrabold">
|
||||||
|
Features
|
||||||
|
</th>
|
||||||
|
<th className="text-center p-4 text-white font-extrabold">
|
||||||
|
Starter
|
||||||
|
</th>
|
||||||
|
<th className="text-center p-4 text-white font-extrabold">
|
||||||
|
Professional
|
||||||
|
</th>
|
||||||
|
<th className="text-center p-4 text-white font-extrabold">
|
||||||
|
Business
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr className="border-t border-gray-900">
|
||||||
|
<td className="p-4 text-gray-300">Websites</td>
|
||||||
|
<td className="p-4 text-center text-gray-300">1 Website</td>
|
||||||
|
<td className="p-4 text-center text-gray-300">Unlimited</td>
|
||||||
|
<td className="p-4 text-center text-gray-300">Unlimited</td>
|
||||||
|
</tr>
|
||||||
|
<tr className="border-t border-gray-900">
|
||||||
|
<td className="p-4 text-gray-300">Storage Space</td>
|
||||||
|
<td className="p-4 text-center text-gray-300">10GB SSD</td>
|
||||||
|
<td className="p-4 text-center text-gray-300">50GB SSD</td>
|
||||||
|
<td className="p-4 text-center text-gray-300">200GB SSD</td>
|
||||||
|
</tr>
|
||||||
|
<tr className="border-t border-gray-900">
|
||||||
|
<td className="p-4 text-gray-300">Bandwidth</td>
|
||||||
|
<td className="p-4 text-center text-gray-300">Unmetered</td>
|
||||||
|
<td className="p-4 text-center text-gray-300">Unmetered</td>
|
||||||
|
<td className="p-4 text-center text-gray-300">Unmetered</td>
|
||||||
|
</tr>
|
||||||
|
<tr className="border-t border-gray-900">
|
||||||
|
<td className="p-4 text-gray-300">Free Domain</td>
|
||||||
|
<td className="p-4 text-center text-gray-300">-</td>
|
||||||
|
<td className="p-4 text-center text-gray-300">1 Domain</td>
|
||||||
|
<td className="p-4 text-center text-gray-300">3 Domains</td>
|
||||||
|
</tr>
|
||||||
|
<tr className="border-t border-gray-900">
|
||||||
|
<td className="p-4 text-gray-300">SSL Certificate</td>
|
||||||
|
<td className="p-4 text-center text-gray-300">Free SSL</td>
|
||||||
|
<td className="p-4 text-center text-gray-300">Free SSL</td>
|
||||||
|
<td className="p-4 text-center text-gray-300">
|
||||||
|
Wildcard SSL
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr className="border-t border-gray-900">
|
||||||
|
<td className="p-4 text-gray-300">Email Accounts</td>
|
||||||
|
<td className="p-4 text-center text-gray-300">5</td>
|
||||||
|
<td className="p-4 text-center text-gray-300">Unlimited</td>
|
||||||
|
<td className="p-4 text-center text-gray-300">Unlimited</td>
|
||||||
|
</tr>
|
||||||
|
<tr className="border-t border-gray-900">
|
||||||
|
<td className="p-4 text-gray-300">Backup Frequency</td>
|
||||||
|
<td className="p-4 text-center text-gray-300">Daily</td>
|
||||||
|
<td className="p-4 text-center text-gray-300">Daily</td>
|
||||||
|
<td className="p-4 text-center text-gray-300">Daily</td>
|
||||||
|
</tr>
|
||||||
|
<tr className="border-t border-gray-900">
|
||||||
|
<td className="p-4 text-gray-300">Backup Retention</td>
|
||||||
|
<td className="p-4 text-center text-gray-300">7 Days</td>
|
||||||
|
<td className="p-4 text-center text-gray-300">14 Days</td>
|
||||||
|
<td className="p-4 text-center text-gray-300">30 Days</td>
|
||||||
|
</tr>
|
||||||
|
<tr className="border-t border-gray-900">
|
||||||
|
<td className="p-4 text-gray-300">CDN Access</td>
|
||||||
|
<td className="p-4 text-center text-gray-300">Basic</td>
|
||||||
|
<td className="p-4 text-center text-gray-300">Premium</td>
|
||||||
|
<td className="p-4 text-center text-gray-300">
|
||||||
|
Enterprise
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr className="border-t border-gray-900">
|
||||||
|
<td className="p-4 text-gray-300">DDoS Protection</td>
|
||||||
|
<td className="p-4 text-center text-gray-300">Basic</td>
|
||||||
|
<td className="p-4 text-center text-gray-300">Advanced</td>
|
||||||
|
<td className="p-4 text-center text-gray-300">
|
||||||
|
Enterprise
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr className="border-t border-gray-900">
|
||||||
|
<td className="p-4 text-gray-300">Support</td>
|
||||||
|
<td className="p-4 text-center text-gray-300">
|
||||||
|
24/7 Support
|
||||||
|
</td>
|
||||||
|
<td className="p-4 text-center text-gray-300">
|
||||||
|
Priority Support
|
||||||
|
</td>
|
||||||
|
<td className="p-4 text-center text-gray-300">
|
||||||
|
Premium Support
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr className="border-t border-gray-900">
|
||||||
|
<td className="p-4 text-gray-300">
|
||||||
|
Server Location Options
|
||||||
|
</td>
|
||||||
|
<td className="p-4 text-center text-gray-300">
|
||||||
|
3 Locations
|
||||||
|
</td>
|
||||||
|
<td className="p-4 text-center text-gray-300">
|
||||||
|
10 Locations
|
||||||
|
</td>
|
||||||
|
<td className="p-4 text-center text-gray-300">
|
||||||
|
All Locations
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<FAQ />
|
||||||
|
<CTA />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default WebHosting;
|
||||||
11
tailwind.config.js
Normal file
11
tailwind.config.js
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
content: [
|
||||||
|
"./index.html",
|
||||||
|
"./src/**/*.{js,ts,jsx,tsx}",
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
7
vite.config.js
Normal file
7
vite.config.js
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
})
|
||||||
Loading…
Add table
Reference in a new issue