253 lines
12 KiB
TypeScript
253 lines
12 KiB
TypeScript
'use client';
|
|
|
|
interface MainContentProps {
|
|
t: {
|
|
hero: {
|
|
title: string;
|
|
subtitle: string;
|
|
description: string;
|
|
cta: string;
|
|
learn: string;
|
|
};
|
|
features: {
|
|
title: string;
|
|
performance: string;
|
|
performanceDesc: string;
|
|
security: string;
|
|
securityDesc: string;
|
|
support: string;
|
|
supportDesc: string;
|
|
};
|
|
};
|
|
isLoaded: boolean;
|
|
}
|
|
|
|
export default function MainContent({ t, isLoaded }: MainContentProps) {
|
|
return (
|
|
<main className="relative z-10 max-w-7xl mx-auto px-6 py-12" data-oid=".j--5ns">
|
|
<div
|
|
className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center min-h-[80vh]"
|
|
data-oid="41giswt"
|
|
>
|
|
{/* Left Content - Larger Column */}
|
|
<div
|
|
className={`lg:col-span-7 transition-all duration-1000 delay-300 ${
|
|
isLoaded ? 'translate-x-0 opacity-100' : '-translate-x-20 opacity-0'
|
|
}`}
|
|
data-oid="4tz35gu"
|
|
>
|
|
<div className="space-y-8" data-oid="y7em3yz">
|
|
<div
|
|
className="inline-block px-4 py-2 bg-gradient-to-r from-purple-900/50 to-pink-900/50 rounded-full border border-purple-500/30"
|
|
data-oid="q9yx9m4"
|
|
>
|
|
<span
|
|
className="text-purple-300 text-sm font-medium"
|
|
data-oid="9se36lr"
|
|
>
|
|
{t.hero.subtitle}
|
|
</span>
|
|
</div>
|
|
|
|
<h1
|
|
className="text-5xl lg:text-7xl font-bold leading-tight"
|
|
data-oid="1w7zf3-"
|
|
>
|
|
<span
|
|
className="bg-gradient-to-r from-white via-purple-200 to-pink-200 bg-clip-text text-transparent"
|
|
data-oid="4ngnjab"
|
|
>
|
|
{t.hero.title}
|
|
</span>
|
|
</h1>
|
|
|
|
<p
|
|
className="text-xl text-gray-300 max-w-2xl leading-relaxed"
|
|
data-oid="2gymhik"
|
|
>
|
|
{t.hero.description}
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-4" data-oid="gdu:yfk">
|
|
<button
|
|
className="px-8 py-4 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg font-semibold hover:from-purple-700 hover:to-pink-700 transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-purple-500/25"
|
|
data-oid="7l9.r_1"
|
|
>
|
|
{t.hero.cta}
|
|
</button>
|
|
<button
|
|
className="px-8 py-4 border border-gray-600 rounded-lg font-semibold hover:border-purple-500 hover:bg-purple-500/10 transition-all duration-300"
|
|
data-oid="6hf8obo"
|
|
>
|
|
{t.hero.learn}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Content - Smaller Column with Complex Visual Elements */}
|
|
<div
|
|
className={`lg:col-span-5 transition-all duration-1000 delay-500 ${
|
|
isLoaded ? 'translate-x-0 opacity-100' : 'translate-x-20 opacity-0'
|
|
}`}
|
|
data-oid="u:.ooqw"
|
|
>
|
|
<div className="relative" data-oid="9r6pkki">
|
|
{/* Complex Layered Cards */}
|
|
<div className="relative space-y-4" data-oid="xtwnf9w">
|
|
<div
|
|
className="bg-gradient-to-br from-gray-800 to-gray-900 p-6 rounded-2xl border border-gray-700 transform rotate-3 hover:rotate-0 transition-transform duration-300"
|
|
data-oid="c7fwd.f"
|
|
>
|
|
<div
|
|
className="flex items-center space-x-3 mb-4"
|
|
data-oid="y2oebwv"
|
|
>
|
|
<div
|
|
className="w-3 h-3 bg-green-500 rounded-full animate-pulse"
|
|
data-oid="c9yryff"
|
|
></div>
|
|
<span
|
|
className="text-green-400 font-semibold"
|
|
data-oid="5j7r0_9"
|
|
>
|
|
99.9% Uptime
|
|
</span>
|
|
</div>
|
|
<div className="text-2xl font-bold text-white" data-oid=".qsjisu">
|
|
24/7
|
|
</div>
|
|
<div className="text-gray-400" data-oid="1gjxrcx">
|
|
Monitoring
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className="bg-gradient-to-br from-purple-900/50 to-pink-900/50 p-6 rounded-2xl border border-purple-500/30 transform -rotate-2 hover:rotate-0 transition-transform duration-300 ml-8"
|
|
data-oid="z_1aduy"
|
|
>
|
|
<div
|
|
className="flex items-center space-x-3 mb-4"
|
|
data-oid="uuaby_k"
|
|
>
|
|
<div
|
|
className="w-3 h-3 bg-purple-500 rounded-full animate-pulse"
|
|
data-oid="x53_tv2"
|
|
></div>
|
|
<span
|
|
className="text-purple-400 font-semibold"
|
|
data-oid="ug1hkwo"
|
|
>
|
|
Global CDN
|
|
</span>
|
|
</div>
|
|
<div className="text-2xl font-bold text-white" data-oid="tw2ake:">
|
|
150+
|
|
</div>
|
|
<div className="text-gray-400" data-oid="ffb:gez">
|
|
Locations
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className="bg-gradient-to-br from-blue-900/50 to-cyan-900/50 p-6 rounded-2xl border border-blue-500/30 transform rotate-1 hover:rotate-0 transition-transform duration-300"
|
|
data-oid="tdp6iuk"
|
|
>
|
|
<div
|
|
className="flex items-center space-x-3 mb-4"
|
|
data-oid="ljtlt30"
|
|
>
|
|
<div
|
|
className="w-3 h-3 bg-blue-500 rounded-full animate-pulse"
|
|
data-oid="ruv4og3"
|
|
></div>
|
|
<span
|
|
className="text-blue-400 font-semibold"
|
|
data-oid="s9gsoyh"
|
|
>
|
|
Enterprise Grade
|
|
</span>
|
|
</div>
|
|
<div className="text-2xl font-bold text-white" data-oid="23tv.1d">
|
|
SSL
|
|
</div>
|
|
<div className="text-gray-400" data-oid="xf7d.62">
|
|
Security
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Features Section - Dense Information Layout */}
|
|
<div
|
|
className={`mt-32 transition-all duration-1000 delay-700 ${
|
|
isLoaded ? 'translate-y-0 opacity-100' : 'translate-y-20 opacity-0'
|
|
}`}
|
|
data-oid="oxcy9id"
|
|
>
|
|
<h2
|
|
className="text-4xl font-bold text-center mb-16 bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent"
|
|
data-oid="d8f19u3"
|
|
>
|
|
{t.features.title}
|
|
</h2>
|
|
|
|
<div
|
|
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
|
|
data-oid=".3y60w6"
|
|
>
|
|
{[
|
|
{
|
|
title: t.features.performance,
|
|
desc: t.features.performanceDesc,
|
|
color: 'from-red-500 to-orange-500',
|
|
},
|
|
{
|
|
title: t.features.security,
|
|
desc: t.features.securityDesc,
|
|
color: 'from-green-500 to-emerald-500',
|
|
},
|
|
{
|
|
title: t.features.support,
|
|
desc: t.features.supportDesc,
|
|
color: 'from-blue-500 to-purple-500',
|
|
},
|
|
].map((feature, index) => (
|
|
<div key={index} className="group relative" data-oid=":ltu:nr">
|
|
<div
|
|
className="bg-gray-800/50 backdrop-blur-sm p-8 rounded-2xl border border-gray-700 hover:border-gray-600 transition-all duration-300 hover:transform hover:scale-105"
|
|
data-oid="u88ho4d"
|
|
>
|
|
<div
|
|
className={`w-12 h-12 bg-gradient-to-r ${feature.color} rounded-lg mb-6 flex items-center justify-center`}
|
|
data-oid="xrerr6u"
|
|
>
|
|
<div
|
|
className="w-6 h-6 bg-white rounded opacity-80"
|
|
data-oid="7.unx4:"
|
|
></div>
|
|
</div>
|
|
<h3
|
|
className="text-xl font-bold mb-4 text-white"
|
|
data-oid="9ex9lv3"
|
|
>
|
|
{feature.title}
|
|
</h3>
|
|
<p className="text-gray-400 leading-relaxed" data-oid="_hgq_t4">
|
|
{feature.desc}
|
|
</p>
|
|
</div>
|
|
<div
|
|
className={`absolute inset-0 bg-gradient-to-r ${feature.color} opacity-0 group-hover:opacity-10 rounded-2xl transition-opacity duration-300`}
|
|
data-oid="2o6c62b"
|
|
></div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|