752 lines
38 KiB
TypeScript
752 lines
38 KiB
TypeScript
|
'use client';
|
|||
|
|
|
|||
|
|
import { useState, useEffect } from 'react';
|
|||
|
|
import SEOHead from '../../components/SEOHead';
|
|||
|
|
import { useTranslation } from '../../lib/i18n';
|
|||
|
|
|
|||
|
|
interface PageProps {
|
|||
|
|
params: { locale: string };
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function Page({ params }: PageProps) {
|
|||
|
|
const [currentSlide, setCurrentSlide] = useState(0);
|
|||
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|||
|
|
const { t, locale } = useTranslation('common');
|
|||
|
|
|
|||
|
|
// Translations - 这些可以移到locales文件中
|
|||
|
|
const translations = {
|
|||
|
|
'zh-CN': {
|
|||
|
|
nav: {
|
|||
|
|
home: '首页',
|
|||
|
|
products: '产品与服务',
|
|||
|
|
news: '新闻资讯',
|
|||
|
|
support: '客户支持',
|
|||
|
|
about: '关于我们',
|
|||
|
|
},
|
|||
|
|
hero: {
|
|||
|
|
title: '云端创新，塑造未来',
|
|||
|
|
subtitle: '专业的云服务解决方案，助力企业数字化转型',
|
|||
|
|
cta: '立即体验',
|
|||
|
|
learn: '了解更多',
|
|||
|
|
},
|
|||
|
|
banner: {
|
|||
|
|
slide1: {
|
|||
|
|
title: '智能云计算平台',
|
|||
|
|
desc: '高性能、高可用的云基础设施服务',
|
|||
|
|
},
|
|||
|
|
slide2: {
|
|||
|
|
title: '数据安全保障',
|
|||
|
|
desc: '企业级安全防护，保障您的数据安全',
|
|||
|
|
},
|
|||
|
|
slide3: {
|
|||
|
|
title: '全球化部署',
|
|||
|
|
desc: '覆盖全球的CDN网络，极速访问体验',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
'zh-TW': {
|
|||
|
|
nav: {
|
|||
|
|
home: '首頁',
|
|||
|
|
products: '產品與服務',
|
|||
|
|
news: '新聞資訊',
|
|||
|
|
support: '客戶支持',
|
|||
|
|
about: '關於我們',
|
|||
|
|
},
|
|||
|
|
hero: {
|
|||
|
|
title: '雲端創新，塑造未來',
|
|||
|
|
subtitle: '專業的雲服務解決方案，助力企業數位化轉型',
|
|||
|
|
cta: '立即體驗',
|
|||
|
|
learn: '了解更多',
|
|||
|
|
},
|
|||
|
|
banner: {
|
|||
|
|
slide1: {
|
|||
|
|
title: '智能雲計算平台',
|
|||
|
|
desc: '高性能、高可用的雲基礎設施服務',
|
|||
|
|
},
|
|||
|
|
slide2: {
|
|||
|
|
title: '數據安全保障',
|
|||
|
|
desc: '企業級安全防護，保障您的數據安全',
|
|||
|
|
},
|
|||
|
|
slide3: {
|
|||
|
|
title: '全球化部署',
|
|||
|
|
desc: '覆蓋全球的CDN網絡，極速訪問體驗',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
en: {
|
|||
|
|
nav: {
|
|||
|
|
home: 'Home',
|
|||
|
|
products: 'Products & Services',
|
|||
|
|
news: 'News',
|
|||
|
|
support: 'Support',
|
|||
|
|
about: 'About Us',
|
|||
|
|
},
|
|||
|
|
hero: {
|
|||
|
|
title: 'Cloud Innovation, Shaping the Future',
|
|||
|
|
subtitle:
|
|||
|
|
'Professional cloud service solutions for enterprise digital transformation',
|
|||
|
|
cta: 'Get Started',
|
|||
|
|
learn: 'Learn More',
|
|||
|
|
},
|
|||
|
|
banner: {
|
|||
|
|
slide1: {
|
|||
|
|
title: 'Intelligent Cloud Platform',
|
|||
|
|
desc: 'High-performance, highly available cloud infrastructure services',
|
|||
|
|
},
|
|||
|
|
slide2: {
|
|||
|
|
title: 'Data Security Assurance',
|
|||
|
|
desc: 'Enterprise-grade security protection for your data',
|
|||
|
|
},
|
|||
|
|
slide3: {
|
|||
|
|
title: 'Global Deployment',
|
|||
|
|
desc: 'Global CDN network coverage for ultra-fast access',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const pageTranslations = translations[locale] || translations['zh-CN'];
|
|||
|
|
|
|||
|
|
const bannerSlides = [
|
|||
|
|
{
|
|||
|
|
title: pageTranslations.banner.slide1.title,
|
|||
|
|
desc: pageTranslations.banner.slide1.desc,
|
|||
|
|
bg: 'from-blue-400 to-purple-500',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: pageTranslations.banner.slide2.title,
|
|||
|
|
desc: pageTranslations.banner.slide2.desc,
|
|||
|
|
bg: 'from-green-400 to-blue-500',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: pageTranslations.banner.slide3.title,
|
|||
|
|
desc: pageTranslations.banner.slide3.desc,
|
|||
|
|
bg: 'from-purple-400 to-pink-500',
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// Auto-rotate banner
|
|||
|
|
useEffect(() => {
|
|||
|
|
const timer = setInterval(() => {
|
|||
|
|
setCurrentSlide((prev) => (prev + 1) % bannerSlides.length);
|
|||
|
|
}, 5000);
|
|||
|
|
return () => clearInterval(timer);
|
|||
|
|
}, [bannerSlides.length]);
|
|||
|
|
|
|||
|
|
const CloudIcon = () => (
|
|||
|
|
<div
|
|||
|
|
className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center backdrop-blur-sm"
|
|||
|
|
data-oid="q_s_7vr"
|
|||
|
|
>
|
|||
|
|
<svg
|
|||
|
|
className="w-8 h-8 text-white"
|
|||
|
|
fill="currentColor"
|
|||
|
|
viewBox="0 0 20 20"
|
|||
|
|
data-oid="zpuz.th"
|
|||
|
|
>
|
|||
|
|
<path
|
|||
|
|
fillRule="evenodd"
|
|||
|
|
d="M5.5 17a4.5 4.5 0 01-1.44-8.765 4.5 4.5 0 018.302-3.046 3.5 3.5 0 014.504 4.272A4 4 0 0115 17H5.5zm3.75-2.75a.75.75 0 001.5 0V9.66l1.95 2.1a.75.75 0 101.1-1.02l-3.25-3.5a.75.75 0 00-1.1 0l-3.25 3.5a.75.75 0 101.1 1.02l1.95-2.1v4.59z"
|
|||
|
|
clipRule="evenodd"
|
|||
|
|
data-oid="w7g80le"
|
|||
|
|
/>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
<SEOHead
|
|||
|
|
page="home"
|
|||
|
|
locale={locale as 'zh-CN' | 'zh-TW' | 'en'}
|
|||
|
|
canonicalUrl="/"
|
|||
|
|
data-oid="2kb3iy4"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<div
|
|||
|
|
className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50"
|
|||
|
|
data-oid="754vlml"
|
|||
|
|
>
|
|||
|
|
{/* Navigation */}
|
|||
|
|
<nav
|
|||
|
|
className="bg-white/80 backdrop-blur-md border-b border-white/20 sticky top-0 z-50"
|
|||
|
|
data-oid="oo8f3v:"
|
|||
|
|
>
|
|||
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="2sy44f_">
|
|||
|
|
<div className="flex justify-between items-center h-16" data-oid=":x-lv6s">
|
|||
|
|
{/* Logo */}
|
|||
|
|
<div className="flex items-center space-x-2" data-oid="-lgiu0n">
|
|||
|
|
<div
|
|||
|
|
className="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center"
|
|||
|
|
data-oid="6pq7cx0"
|
|||
|
|
>
|
|||
|
|
<svg
|
|||
|
|
className="w-5 h-5 text-white"
|
|||
|
|
fill="currentColor"
|
|||
|
|
viewBox="0 0 20 20"
|
|||
|
|
data-oid="9p6jiq."
|
|||
|
|
>
|
|||
|
|
<path
|
|||
|
|
d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"
|
|||
|
|
data-oid="h7z1961"
|
|||
|
|
/>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
<span
|
|||
|
|
className="text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"
|
|||
|
|
data-oid="ul6s_7i"
|
|||
|
|
>
|
|||
|
|
CloudTech
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Desktop Navigation */}
|
|||
|
|
<div
|
|||
|
|
className="hidden md:flex items-center space-x-8"
|
|||
|
|
data-oid="644:yow"
|
|||
|
|
>
|
|||
|
|
<a
|
|||
|
|
href={`/${locale}`}
|
|||
|
|
className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
|
|||
|
|
data-oid="qiz28pa"
|
|||
|
|
>
|
|||
|
|
{pageTranslations.nav.home}
|
|||
|
|
</a>
|
|||
|
|
<a
|
|||
|
|
href={`/${locale}/products`}
|
|||
|
|
className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
|
|||
|
|
data-oid="5w-2mv7"
|
|||
|
|
>
|
|||
|
|
{pageTranslations.nav.products}
|
|||
|
|
</a>
|
|||
|
|
<a
|
|||
|
|
href={`/${locale}/news`}
|
|||
|
|
className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
|
|||
|
|
data-oid="71-9w94"
|
|||
|
|
>
|
|||
|
|
{pageTranslations.nav.news}
|
|||
|
|
</a>
|
|||
|
|
<a
|
|||
|
|
href={`/${locale}/support`}
|
|||
|
|
className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
|
|||
|
|
data-oid="nanlsmt"
|
|||
|
|
>
|
|||
|
|
{pageTranslations.nav.support}
|
|||
|
|
</a>
|
|||
|
|
<a
|
|||
|
|
href={`/${locale}/about`}
|
|||
|
|
className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
|
|||
|
|
data-oid="gtxz3:k"
|
|||
|
|
>
|
|||
|
|
{pageTranslations.nav.about}
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Language Switcher */}
|
|||
|
|
<div className="flex items-center space-x-4" data-oid="c_q16qn">
|
|||
|
|
<select
|
|||
|
|
value={locale}
|
|||
|
|
onChange={(e) => {
|
|||
|
|
const newLocale = e.target.value;
|
|||
|
|
const currentPath = window.location.pathname;
|
|||
|
|
const pathWithoutLocale = currentPath.replace(/^\/[^\/]+/, '');
|
|||
|
|
window.location.href = `/${newLocale}${pathWithoutLocale}`;
|
|||
|
|
}}
|
|||
|
|
className="bg-white/50 border border-white/30 rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|||
|
|
data-oid=".t1o5x4"
|
|||
|
|
>
|
|||
|
|
<option value="zh-CN" data-oid="9t_qlys">
|
|||
|
|
简体中文
|
|||
|
|
</option>
|
|||
|
|
<option value="zh-TW" data-oid="ebs_ihs">
|
|||
|
|
繁體中文
|
|||
|
|
</option>
|
|||
|
|
<option value="en" data-oid="ph939cg">
|
|||
|
|
English
|
|||
|
|
</option>
|
|||
|
|
</select>
|
|||
|
|
|
|||
|
|
{/* Mobile menu button */}
|
|||
|
|
<button
|
|||
|
|
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
|||
|
|
className="md:hidden p-2 rounded-lg bg-white/50 border border-white/30"
|
|||
|
|
data-oid="7rfoavj"
|
|||
|
|
>
|
|||
|
|
<svg
|
|||
|
|
className="w-5 h-5"
|
|||
|
|
fill="none"
|
|||
|
|
stroke="currentColor"
|
|||
|
|
viewBox="0 0 24 24"
|
|||
|
|
data-oid="hhotqt4"
|
|||
|
|
>
|
|||
|
|
<path
|
|||
|
|
strokeLinecap="round"
|
|||
|
|
strokeLinejoin="round"
|
|||
|
|
strokeWidth={2}
|
|||
|
|
d="M4 6h16M4 12h16M4 18h16"
|
|||
|
|
data-oid="biosho:"
|
|||
|
|
/>
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Mobile Navigation */}
|
|||
|
|
{isMenuOpen && (
|
|||
|
|
<div
|
|||
|
|
className="md:hidden py-4 border-t border-white/20"
|
|||
|
|
data-oid="7kw-6e1"
|
|||
|
|
>
|
|||
|
|
<div className="flex flex-col space-y-2" data-oid="am.ub85">
|
|||
|
|
<a
|
|||
|
|
href={`/${locale}`}
|
|||
|
|
className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
|
|||
|
|
data-oid="6h2fb9g"
|
|||
|
|
>
|
|||
|
|
{pageTranslations.nav.home}
|
|||
|
|
</a>
|
|||
|
|
<a
|
|||
|
|
href={`/${locale}/products`}
|
|||
|
|
className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
|
|||
|
|
data-oid="tryjb9d"
|
|||
|
|
>
|
|||
|
|
{pageTranslations.nav.products}
|
|||
|
|
</a>
|
|||
|
|
<a
|
|||
|
|
href={`/${locale}/news`}
|
|||
|
|
className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
|
|||
|
|
data-oid="sihppiz"
|
|||
|
|
>
|
|||
|
|
{pageTranslations.nav.news}
|
|||
|
|
</a>
|
|||
|
|
<a
|
|||
|
|
href={`/${locale}/support`}
|
|||
|
|
className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
|
|||
|
|
data-oid="kx7ptup"
|
|||
|
|
>
|
|||
|
|
{pageTranslations.nav.support}
|
|||
|
|
</a>
|
|||
|
|
<a
|
|||
|
|
href={`/${locale}/about`}
|
|||
|
|
className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
|
|||
|
|
data-oid="-s6.uoo"
|
|||
|
|
>
|
|||
|
|
{pageTranslations.nav.about}
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</nav>
|
|||
|
|
|
|||
|
|
{/* Banner Carousel */}
|
|||
|
|
<div className="relative h-96 overflow-hidden" data-oid="6v61xaz">
|
|||
|
|
{bannerSlides.map((slide, index) => (
|
|||
|
|
<div
|
|||
|
|
key={index}
|
|||
|
|
className={`absolute inset-0 bg-gradient-to-r ${slide.bg} transition-transform duration-500 ease-in-out ${
|
|||
|
|
index === currentSlide
|
|||
|
|
? 'translate-x-0'
|
|||
|
|
: index < currentSlide
|
|||
|
|
? '-translate-x-full'
|
|||
|
|
: 'translate-x-full'
|
|||
|
|
}`}
|
|||
|
|
data-oid="uwyqs7x"
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
className="relative h-full flex items-center justify-center"
|
|||
|
|
data-oid="kh9cmme"
|
|||
|
|
>
|
|||
|
|
{/* Clay-style floating elements */}
|
|||
|
|
<div
|
|||
|
|
className="absolute top-10 left-10 opacity-30"
|
|||
|
|
data-oid="xd7:tff"
|
|||
|
|
>
|
|||
|
|
<CloudIcon data-oid="oisg123" />
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
className="absolute bottom-10 right-10 opacity-30"
|
|||
|
|
data-oid="bfrcv0f"
|
|||
|
|
>
|
|||
|
|
<CloudIcon data-oid="4bidlj." />
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
className="absolute top-1/2 left-20 opacity-20 transform -translate-y-1/2"
|
|||
|
|
data-oid="6idc4h5"
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
className="w-12 h-12 bg-white/20 rounded-full backdrop-blur-sm"
|
|||
|
|
data-oid="11s.t2p"
|
|||
|
|
></div>
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
className="absolute top-1/4 right-1/4 opacity-20"
|
|||
|
|
data-oid="5cqi6sy"
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
className="w-20 h-20 bg-white/20 rounded-2xl backdrop-blur-sm transform rotate-12"
|
|||
|
|
data-oid="abamfn4"
|
|||
|
|
></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div
|
|||
|
|
className="text-center text-white z-10 max-w-4xl mx-auto px-4"
|
|||
|
|
data-oid="wp6cp__"
|
|||
|
|
>
|
|||
|
|
<h2
|
|||
|
|
className="text-4xl md:text-6xl font-bold mb-4 drop-shadow-lg"
|
|||
|
|
data-oid=":i2f::y"
|
|||
|
|
>
|
|||
|
|
{slide.title}
|
|||
|
|
</h2>
|
|||
|
|
<p
|
|||
|
|
className="text-xl md:text-2xl opacity-90 drop-shadow-md"
|
|||
|
|
data-oid=":0hgx37"
|
|||
|
|
>
|
|||
|
|
{slide.desc}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
|
|||
|
|
{/* Carousel indicators */}
|
|||
|
|
<div
|
|||
|
|
className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2"
|
|||
|
|
data-oid="rq7emww"
|
|||
|
|
>
|
|||
|
|
{bannerSlides.map((_, index) => (
|
|||
|
|
<button
|
|||
|
|
key={index}
|
|||
|
|
onClick={() => setCurrentSlide(index)}
|
|||
|
|
className={`w-3 h-3 rounded-full transition-colors ${
|
|||
|
|
index === currentSlide ? 'bg-white' : 'bg-white/50'
|
|||
|
|
}`}
|
|||
|
|
data-oid="jz5x803"
|
|||
|
|
/>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Hero Section */}
|
|||
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20" data-oid="r:m17g2">
|
|||
|
|
<div className="text-center" data-oid="u0_iru:">
|
|||
|
|
<h1
|
|||
|
|
className="text-4xl md:text-6xl font-bold text-gray-900 mb-6"
|
|||
|
|
data-oid="afk3o6t"
|
|||
|
|
>
|
|||
|
|
{pageTranslations.hero.title}
|
|||
|
|
</h1>
|
|||
|
|
<p
|
|||
|
|
className="text-xl text-gray-600 mb-8 max-w-3xl mx-auto"
|
|||
|
|
data-oid="rujj_vp"
|
|||
|
|
>
|
|||
|
|
{pageTranslations.hero.subtitle}
|
|||
|
|
</p>
|
|||
|
|
<div
|
|||
|
|
className="flex flex-col sm:flex-row gap-4 justify-center"
|
|||
|
|
data-oid="v0l:zq4"
|
|||
|
|
>
|
|||
|
|
<button
|
|||
|
|
className="px-8 py-4 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-2xl font-semibold hover:shadow-lg transform hover:scale-105 transition-all duration-200"
|
|||
|
|
data-oid="m4jyh1m"
|
|||
|
|
>
|
|||
|
|
{pageTranslations.hero.cta}
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
className="px-8 py-4 bg-white/80 text-gray-700 rounded-2xl font-semibold border border-gray-200 hover:bg-white hover:shadow-lg transition-all duration-200"
|
|||
|
|
data-oid="4a3ld73"
|
|||
|
|
>
|
|||
|
|
{pageTranslations.hero.learn}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Features Section with Clay Style */}
|
|||
|
|
<div className="bg-white/50 py-20" data-oid="74ailtt">
|
|||
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="19d4ov8">
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8" data-oid="5segwtn">
|
|||
|
|
{/* Feature 1 */}
|
|||
|
|
<div
|
|||
|
|
className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 shadow-lg hover:shadow-xl transition-shadow duration-300 border border-white/20"
|
|||
|
|
data-oid="jsmwuue"
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
className="w-16 h-16 bg-gradient-to-r from-blue-400 to-blue-600 rounded-2xl flex items-center justify-center mb-6 transform rotate-3"
|
|||
|
|
data-oid="y1qftfp"
|
|||
|
|
>
|
|||
|
|
<svg
|
|||
|
|
className="w-8 h-8 text-white"
|
|||
|
|
fill="currentColor"
|
|||
|
|
viewBox="0 0 20 20"
|
|||
|
|
data-oid="qtjk8td"
|
|||
|
|
>
|
|||
|
|
<path
|
|||
|
|
d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"
|
|||
|
|
data-oid="sed:b29"
|
|||
|
|
/>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
<h3
|
|||
|
|
className="text-xl font-bold text-gray-900 mb-4"
|
|||
|
|
data-oid="v60qck9"
|
|||
|
|
>
|
|||
|
|
云计算服务
|
|||
|
|
</h3>
|
|||
|
|
<p className="text-gray-600" data-oid="gc25lar">
|
|||
|
|
提供弹性、可扩展的云计算资源，满足不同规模企业的需求。
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Feature 2 */}
|
|||
|
|
<div
|
|||
|
|
className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 shadow-lg hover:shadow-xl transition-shadow duration-300 border border-white/20"
|
|||
|
|
data-oid="0pxu6ce"
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
className="w-16 h-16 bg-gradient-to-r from-green-400 to-green-600 rounded-2xl flex items-center justify-center mb-6 transform -rotate-3"
|
|||
|
|
data-oid="47vhkwm"
|
|||
|
|
>
|
|||
|
|
<svg
|
|||
|
|
className="w-8 h-8 text-white"
|
|||
|
|
fill="currentColor"
|
|||
|
|
viewBox="0 0 20 20"
|
|||
|
|
data-oid="wxl0a4n"
|
|||
|
|
>
|
|||
|
|
<path
|
|||
|
|
fillRule="evenodd"
|
|||
|
|
d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|||
|
|
clipRule="evenodd"
|
|||
|
|
data-oid="ti46.2b"
|
|||
|
|
/>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
<h3
|
|||
|
|
className="text-xl font-bold text-gray-900 mb-4"
|
|||
|
|
data-oid="ykvwts4"
|
|||
|
|
>
|
|||
|
|
安全防护
|
|||
|
|
</h3>
|
|||
|
|
<p className="text-gray-600" data-oid="w_v.brt">
|
|||
|
|
多层次安全防护体系，保障您的数据和应用安全无忧。
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Feature 3 */}
|
|||
|
|
<div
|
|||
|
|
className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 shadow-lg hover:shadow-xl transition-shadow duration-300 border border-white/20"
|
|||
|
|
data-oid="1zfrv2m"
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
className="w-16 h-16 bg-gradient-to-r from-purple-400 to-purple-600 rounded-2xl flex items-center justify-center mb-6 transform rotate-2"
|
|||
|
|
data-oid="t5e03vc"
|
|||
|
|
>
|
|||
|
|
<svg
|
|||
|
|
className="w-8 h-8 text-white"
|
|||
|
|
fill="currentColor"
|
|||
|
|
viewBox="0 0 20 20"
|
|||
|
|
data-oid="-:3or6p"
|
|||
|
|
>
|
|||
|
|
<path
|
|||
|
|
fillRule="evenodd"
|
|||
|
|
d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|||
|
|
clipRule="evenodd"
|
|||
|
|
data-oid="18wno8p"
|
|||
|
|
/>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
<h3
|
|||
|
|
className="text-xl font-bold text-gray-900 mb-4"
|
|||
|
|
data-oid="i-05hg2"
|
|||
|
|
>
|
|||
|
|
专业支持
|
|||
|
|
</h3>
|
|||
|
|
<p className="text-gray-600" data-oid="aqbla9i">
|
|||
|
|
7x24小时专业技术支持，确保您的业务持续稳定运行。
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Footer */}
|
|||
|
|
<footer className="bg-gray-900 text-white py-12" data-oid="x-idxc3">
|
|||
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="u8ltb.q">
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-8" data-oid="-4e.o4x">
|
|||
|
|
<div data-oid="htrqpwb">
|
|||
|
|
<div
|
|||
|
|
className="flex items-center space-x-2 mb-4"
|
|||
|
|
data-oid="1yq2tlg"
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
className="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center"
|
|||
|
|
data-oid="d3.311j"
|
|||
|
|
>
|
|||
|
|
<svg
|
|||
|
|
className="w-5 h-5 text-white"
|
|||
|
|
fill="currentColor"
|
|||
|
|
viewBox="0 0 20 20"
|
|||
|
|
data-oid="uip6ifu"
|
|||
|
|
>
|
|||
|
|
<path
|
|||
|
|
d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"
|
|||
|
|
data-oid="pd_ubpk"
|
|||
|
|
/>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
<span className="text-xl font-bold" data-oid="9l2ebx9">
|
|||
|
|
CloudTech
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<p className="text-gray-400" data-oid="y3cz9qe">
|
|||
|
|
专业的云服务提供商，致力于为企业提供最优质的云计算解决方案。
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div data-oid="v3kp8ja">
|
|||
|
|
<h4 className="font-semibold mb-4" data-oid="o:jhck0">
|
|||
|
|
产品服务
|
|||
|
|
</h4>
|
|||
|
|
<ul className="space-y-2 text-gray-400" data-oid="g2:c0zg">
|
|||
|
|
<li data-oid="6r:qc2x">
|
|||
|
|
<a
|
|||
|
|
href="#"
|
|||
|
|
className="hover:text-white transition-colors"
|
|||
|
|
data-oid="1nooig4"
|
|||
|
|
>
|
|||
|
|
云服务器
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<li data-oid="gyb72:i">
|
|||
|
|
<a
|
|||
|
|
href="#"
|
|||
|
|
className="hover:text-white transition-colors"
|
|||
|
|
data-oid="is3:93g"
|
|||
|
|
>
|
|||
|
|
云数据库
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<li data-oid="47yxnx1">
|
|||
|
|
<a
|
|||
|
|
href="#"
|
|||
|
|
className="hover:text-white transition-colors"
|
|||
|
|
data-oid="s3ih-zr"
|
|||
|
|
>
|
|||
|
|
云存储
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<li data-oid="2_njk7v">
|
|||
|
|
<a
|
|||
|
|
href="#"
|
|||
|
|
className="hover:text-white transition-colors"
|
|||
|
|
data-oid="acf66ja"
|
|||
|
|
>
|
|||
|
|
CDN加速
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div data-oid="2iquqyp">
|
|||
|
|
<h4 className="font-semibold mb-4" data-oid="3y525k-">
|
|||
|
|
支持中心
|
|||
|
|
</h4>
|
|||
|
|
<ul className="space-y-2 text-gray-400" data-oid="hbme51f">
|
|||
|
|
<li data-oid="3v6wd53">
|
|||
|
|
<a
|
|||
|
|
href="#"
|
|||
|
|
className="hover:text-white transition-colors"
|
|||
|
|
data-oid="krc.jfa"
|
|||
|
|
>
|
|||
|
|
帮助文档
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<li data-oid="q9adirk">
|
|||
|
|
<a
|
|||
|
|
href="#"
|
|||
|
|
className="hover:text-white transition-colors"
|
|||
|
|
data-oid="bnfhze:"
|
|||
|
|
>
|
|||
|
|
技术支持
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<li data-oid="5x8v8i0">
|
|||
|
|
<a
|
|||
|
|
href="#"
|
|||
|
|
className="hover:text-white transition-colors"
|
|||
|
|
data-oid="i16gjz6"
|
|||
|
|
>
|
|||
|
|
服务状态
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<li data-oid="_slfwng">
|
|||
|
|
<a
|
|||
|
|
href="#"
|
|||
|
|
className="hover:text-white transition-colors"
|
|||
|
|
data-oid="v6n83lw"
|
|||
|
|
>
|
|||
|
|
联系我们
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div data-oid="osbq1d-">
|
|||
|
|
<h4 className="font-semibold mb-4" data-oid="1tt8gr6">
|
|||
|
|
关于我们
|
|||
|
|
</h4>
|
|||
|
|
<ul className="space-y-2 text-gray-400" data-oid="8uffdg8">
|
|||
|
|
<li data-oid=".d._afb">
|
|||
|
|
<a
|
|||
|
|
href="#"
|
|||
|
|
className="hover:text-white transition-colors"
|
|||
|
|
data-oid="fjt1jwx"
|
|||
|
|
>
|
|||
|
|
公司介绍
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<li data-oid="f-e:obm">
|
|||
|
|
<a
|
|||
|
|
href="#"
|
|||
|
|
className="hover:text-white transition-colors"
|
|||
|
|
data-oid="nm6-fs8"
|
|||
|
|
>
|
|||
|
|
新闻动态
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<li data-oid="16:_mrp">
|
|||
|
|
<a
|
|||
|
|
href="#"
|
|||
|
|
className="hover:text-white transition-colors"
|
|||
|
|
data-oid="pomh_rv"
|
|||
|
|
>
|
|||
|
|
招聘信息
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<li data-oid="vk48fcx">
|
|||
|
|
<a
|
|||
|
|
href="#"
|
|||
|
|
className="hover:text-white transition-colors"
|
|||
|
|
data-oid="4wd0fmt"
|
|||
|
|
>
|
|||
|
|
合作伙伴
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div
|
|||
|
|
className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"
|
|||
|
|
data-oid="uv2rwqm"
|
|||
|
|
>
|
|||
|
|
<p data-oid="3smnh7g">© 2024 CloudTech. All rights reserved.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</footer>
|
|||
|
|
</div>
|
|||
|
|
</>
|
|||
|
|
);
|
|||
|
|
}
|