mirror of
https://github.com/SkyLinkHostingLLC/Website-V3.git
synced 2026-02-22 09:12:23 -05:00
316 lines
11 KiB
Text
316 lines
11 KiB
Text
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;
|