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>
|
||
</>
|
||
);
|
||
}
|