diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..bffb357 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b45fcb9 --- /dev/null +++ b/.gitignore @@ -0,0 +1,39 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js +.yarn/install-state.gz + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts + +# vscode +.vscode \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..36f0850 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,11 @@ +{ + "singleQuote": true, + "printWidth": 100, + "tabWidth": 4, + "useTabs": false, + "semi": true, + "jsxSingleQuote": false, + "bracketSpacing": true, + "arrowParens": "always", + "endOfLine": "lf" +} \ No newline at end of file diff --git a/README.md b/README.md index 6a3de38..11cc8de 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,93 @@ -# FutureCloud +# Onlook 启动模板 + +

+ +

+ +这是一个使用 [Next.js](https://nextjs.org/)、[TailwindCSS](https://tailwindcss.com/) 与 [shadcn/ui](https://ui.shadcn.com) 搭建的 [Onlook](https://onlook.com/) 项目模板。 + +## 快速开始 + +1. 安装依赖（PowerShell 示例，四选一）： + +```powershell +# npm +npm install + +# yarn +yarn install + +# pnpm +pnpm install + +# bun +bun install +``` + +2. 启动开发服务器（PowerShell）： + +```powershell +# npm +npm run dev + +# yarn +yarn dev + +# pnpm +pnpm dev + +# bun +bun dev +``` + +打开后在 Onlook 中查看： + +## 目录结构（节选） + +- `app/`：Next.js App Router 页面与布局 +- `components/`：通用组件 +- `hooks/`：自定义 Hooks +- `lib/`：工具与内容数据 +- `public/`：静态资源 +- `app/globals.css`：全局样式（TailwindCSS） + +## 常用脚本 + +```powershell +# 开发 +npm run dev + +# 构建 +npm run build + +# 预览（如有 start 脚本） +npm run start +``` + +使用 `yarn`/`pnpm`/`bun` 时，将 `npm run XXX` 替换为对应命令即可。 + +## 环境变量 + +在项目根目录创建 `.env.local`，示例： + +```dotenv +# 示例 +NEXT_PUBLIC_APP_NAME=Onlook Starter +``` + +Next.js 会在运行时自动加载 `.env.local`。请勿将敏感变量提交到版本库。 + +## 部署 + +- 推荐：Vercel（零配置支持 Next.js）。 +- 自托管： + +```powershell +npm run build +npm run start +``` + +## 许可证 + +本模板遵循其依赖库的各自许可证。根据你的项目需要添加 `LICENSE` 文件。 diff --git a/app/[lang]/about/page.tsx b/app/[lang]/about/page.tsx new file mode 100644 index 0000000..43dcb58 --- /dev/null +++ b/app/[lang]/about/page.tsx @@ -0,0 +1,199 @@ +'use client'; + +import Navigation from '../../../components/Navigation'; +import Footer from '../../../components/Footer'; +import { useLanguage } from '@/hooks/useLanguage'; + +interface AboutPageProps { + params: { + lang: string; + }; +} + +export default function AboutPage({ params }: AboutPageProps) { + const { currentLang, setCurrentLang, currentContent, createLocalizedPath } = useLanguage( + params.lang, + ); + + return ( +
+ + + {/* Hero Section */} +
+
+

+ {currentContent.about.title} +

+

+ {currentContent.about.subtitle} +

+
+
+ + {/* About Content */} +
+
+
+
+

我们的故事

+

+ {currentContent.about.description} +

+

+ 自成立以来，我们已经为数百家企业提供了专业的云计算服务，帮助他们实现数字化转型，提高业务效率，降低运营成本。 +

+
+
+
+
+
+ 500+ +
+
服务客户
+
+
+
+ 99.9% +
+
服务可用性
+
+
+
+ 24/7 +
+
技术支持
+
+
+
+ 5年+ +
+
行业经验
+
+
+
+
+ + {/* Mission, Vision, Values */} +
+
+
+ + + +
+

+ {currentContent.about.mission.title} +

+

+ {currentContent.about.mission.content} +

+
+
+
+ + + + + +
+

+ {currentContent.about.vision.title} +

+

+ {currentContent.about.vision.content} +

+
+
+
+ + + +
+

+ {currentContent.about.values.title} +

+
    + {currentContent.about.values.items.map((value, index) => ( +
  • + {value} +
    • + ))} +
+
+
+ + {/* Team Section */} +
+

+ {currentContent.about.team.title} +

+
+
+ {currentContent.about.team.members.map((member, index) => ( +
+
+ + {member.name.charAt(0)} + +
+

+ {member.name} +

+

{member.position}

+

+ {member.description} +

+
+ ))} +
+
+
+ +
+
+ ); +} diff --git a/app/[lang]/contact/page.tsx b/app/[lang]/contact/page.tsx new file mode 100644 index 0000000..41affaa --- /dev/null +++ b/app/[lang]/contact/page.tsx @@ -0,0 +1,289 @@ +'use client'; + +import { useState } from 'react'; +import Navigation from '../../../components/Navigation'; +import Footer from '../../../components/Footer'; +import { useLanguage } from '../../../hooks/useLanguage'; + +interface ContactPageProps { + params: { + lang: string; + }; +} + +export default function ContactPage({ params }: ContactPageProps) { + const { currentLang, setCurrentLang, currentContent, createLocalizedPath } = useLanguage( + params.lang, + ); + const [formData, setFormData] = useState({ + name: '', + email: '', + company: '', + phone: '', + message: '', + }); + + const handleInputChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setFormData((prev) => ({ + ...prev, + [name]: value, + })); + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + console.log('Form submitted:', formData); + alert('感谢您的留言，我们会尽快与您联系！'); + setFormData({ + name: '', + email: '', + company: '', + phone: '', + message: '', + }); + }; + + return ( +
+ + + {/* Hero Section */} +
+
+

+ {currentContent.contact.title} +

+

+ {currentContent.contact.subtitle} +

+
+
+ + {/* Contact Content */} +
+
+
+ {/* Contact Form */} +
+

发送消息

+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+ +