Add Astro landing site for 和光同坤 with logo, contact, and gitignore
Made-with: Cursor
This commit is contained in:
zaikun xu
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
# Dependencies
|
||||
node_modules/
|
||||
|
||||
# Astro
|
||||
dist/
|
||||
.astro/
|
||||
|
||||
# Environment
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
|
||||
# Logs & debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# OS
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# Editor (optional local)
|
||||
*.swp
|
||||
*.swo
|
||||
6
astro.config.mjs
Normal file
6
astro.config.mjs
Normal file
@@ -0,0 +1,6 @@
|
||||
import { defineConfig } from "astro/config";
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
site: "https://hga3d.com",
|
||||
});
|
||||
5075
package-lock.json
generated
Normal file
5075
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
16
package.json
Normal file
16
package.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "heguangtongkun-landing",
|
||||
"type": "module",
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"astro": "^4.16.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5.6.0"
|
||||
}
|
||||
}
|
||||
24
public/favicon.svg
Normal file
24
public/favicon.svg
Normal file
@@ -0,0 +1,24 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
|
||||
<defs>
|
||||
<radialGradient id="fh" cx="50%" cy="38%" r="70%">
|
||||
<stop offset="0%" stop-color="#fff0e0"/>
|
||||
<stop offset="50%" stop-color="#c9a06c"/>
|
||||
<stop offset="100%" stop-color="#0a0d12" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="fb" x1="50%" y1="0%" x2="50%" y2="100%">
|
||||
<stop offset="0%" stop-color="#d4a574"/>
|
||||
<stop offset="100%" stop-color="#38b8aa"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="fs" x1="50%" y1="0%" x2="50%" y2="100%">
|
||||
<stop offset="0%" stop-color="#ffd9b0" stop-opacity="0.9"/>
|
||||
<stop offset="100%" stop-color="#d4a574" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="32" height="32" rx="8" fill="#0a0d12"/>
|
||||
<path d="M9 8 Q16 3 23 8" stroke="url(#fs)" stroke-width="1.2" stroke-linecap="round" fill="none" opacity="0.8"/>
|
||||
<ellipse cx="16" cy="10" rx="4.5" ry="5.5" fill="url(#fh)"/>
|
||||
<ellipse cx="16" cy="9.5" rx="2" ry="2.5" fill="#fff6ea" opacity="0.45"/>
|
||||
<path d="M16 15.5v6" stroke="url(#fb)" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path d="M16 21.5l-5.5 7M16 21.5l5.5 7" stroke="url(#fb)" stroke-width="1.4" stroke-linecap="round"/>
|
||||
<path d="M5 29h8M19 29h8" stroke="url(#fb)" stroke-width="1.35" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
32
public/logo-mark.svg
Normal file
32
public/logo-mark.svg
Normal file
@@ -0,0 +1,32 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
|
||||
<defs>
|
||||
<radialGradient id="hg-light" cx="50%" cy="30%" r="58%" fx="50%" fy="30%">
|
||||
<stop offset="0%" stop-color="#fff6ec"/>
|
||||
<stop offset="32%" stop-color="#e0bc8c"/>
|
||||
<stop offset="62%" stop-color="#b8895c"/>
|
||||
<stop offset="100%" stop-color="#b8895c" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="hg-earth" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#5c4a3d"/>
|
||||
<stop offset="48%" stop-color="#d4a574"/>
|
||||
<stop offset="100%" stop-color="#38b8aa"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="hg-ray" x1="50%" y1="0%" x2="50%" y2="100%">
|
||||
<stop offset="0%" stop-color="#ffe8cc" stop-opacity="0.85"/>
|
||||
<stop offset="100%" stop-color="#d4a574" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle cx="32" cy="20" r="20" fill="url(#hg-light)"/>
|
||||
<circle cx="32" cy="20" r="5.5" fill="#fff9f0" opacity="0.55"/>
|
||||
<g opacity="0.42" stroke="url(#hg-ray)" stroke-width="1.3" stroke-linecap="round">
|
||||
<path d="M32 5v9M18 11l8 6M46 11l-8 6"/>
|
||||
</g>
|
||||
<g stroke="url(#hg-earth)" stroke-width="2.5" stroke-linecap="round" opacity="0.95">
|
||||
<path d="M7 36h16 M33 36h16"/>
|
||||
<path d="M7 43h16 M33 43h16"/>
|
||||
<path d="M7 50h16 M33 50h16"/>
|
||||
</g>
|
||||
<g stroke="rgba(212,165,116,0.4)" stroke-width="1.5" stroke-linecap="round">
|
||||
<path d="M10 56h12 M38 56h12"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
65
src/components/LogoMark.astro
Normal file
65
src/components/LogoMark.astro
Normal file
@@ -0,0 +1,65 @@
|
||||
---
|
||||
interface Props {
|
||||
class?: string;
|
||||
}
|
||||
|
||||
const { class: className = "" } = Astro.props;
|
||||
---
|
||||
|
||||
<svg
|
||||
class={className}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 64 64"
|
||||
fill="none"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
width="40"
|
||||
height="40"
|
||||
>
|
||||
<defs>
|
||||
<radialGradient id="hg-head" cx="50%" cy="38%" r="65%" fx="50%" fy="38%">
|
||||
<stop offset="0%" stop-color="#fff8f0"></stop>
|
||||
<stop offset="35%" stop-color="#e4c49a"></stop>
|
||||
<stop offset="70%" stop-color="#b8895c"></stop>
|
||||
<stop offset="100%" stop-color="#b8895c" stop-opacity="0"></stop>
|
||||
</radialGradient>
|
||||
<linearGradient id="hg-body" x1="50%" y1="0%" x2="50%" y2="100%">
|
||||
<stop offset="0%" stop-color="#d4a574"></stop>
|
||||
<stop offset="100%" stop-color="#38b8aa"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="hg-sky" x1="50%" y1="0%" x2="50%" y2="100%">
|
||||
<stop offset="0%" stop-color="#ffe8cc" stop-opacity="0.95"></stop>
|
||||
<stop offset="100%" stop-color="#d4a574" stop-opacity="0"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- 顶天：穹顶弧线 + 天光（非正圆，略向上） -->
|
||||
<path
|
||||
d="M18 14 Q32 4 46 14"
|
||||
stroke="url(#hg-sky)"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
fill="none"
|
||||
opacity="0.75"
|
||||
></path>
|
||||
<ellipse cx="32" cy="18" rx="9" ry="11" fill="url(#hg-head)"></ellipse>
|
||||
<ellipse cx="32" cy="17" rx="4.2" ry="5" fill="#fff9f0" opacity="0.5"></ellipse>
|
||||
|
||||
<!-- 躯干：连接天地 -->
|
||||
<path
|
||||
d="M32 29 L32 40"
|
||||
stroke="url(#hg-body)"
|
||||
stroke-width="2.8"
|
||||
stroke-linecap="round"
|
||||
></path>
|
||||
|
||||
<!-- 立地：双腿 + 两脚如「__」踏地 -->
|
||||
<g stroke="url(#hg-body)" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M32 40 L21 54"></path>
|
||||
<path d="M32 40 L43 54"></path>
|
||||
</g>
|
||||
<g stroke="url(#hg-body)" stroke-width="2.5" stroke-linecap="round" opacity="0.95">
|
||||
<path d="M12 56 h14"></path>
|
||||
<path d="M38 56 h14"></path>
|
||||
</g>
|
||||
</svg>
|
||||
2
src/env.d.ts
vendored
Normal file
2
src/env.d.ts
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
/// <reference path="../.astro/types.d.ts" />
|
||||
/// <reference types="astro/client" />
|
||||
33
src/layouts/BaseLayout.astro
Normal file
33
src/layouts/BaseLayout.astro
Normal file
@@ -0,0 +1,33 @@
|
||||
---
|
||||
import "../styles/global.css";
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
title,
|
||||
description = "上海和光同坤科技有限公司（和光同坤，语出和光同尘）— AI Native 企业，银发关怀、美妆原料自动化与三维设计一体化方案。",
|
||||
} = Astro.props;
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content={description} />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=ZCOOL+XiaoWei&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
572
src/pages/index.astro
Normal file
572
src/pages/index.astro
Normal file
@@ -0,0 +1,572 @@
|
||||
---
|
||||
import BaseLayout from "../layouts/BaseLayout.astro";
|
||||
import LogoMark from "../components/LogoMark.astro";
|
||||
---
|
||||
|
||||
<BaseLayout title="上海和光同坤科技有限公司 · AI Native">
|
||||
<header class="site-header">
|
||||
<div class="wrap header-inner">
|
||||
<a href="/" class="brand" aria-label="上海和光同坤科技有限公司 首页">
|
||||
<LogoMark class="brand-mark" />
|
||||
<span class="brand-text">和光同坤</span>
|
||||
</a>
|
||||
<nav class="nav" aria-label="主导航">
|
||||
<a href="#products">产品</a>
|
||||
<a href="#contact" class="nav-cta">联系我们</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="hero">
|
||||
<div class="wrap hero-inner">
|
||||
<p class="eyebrow">AI Native 企业</p>
|
||||
<h1 class="hero-title">
|
||||
以人工智能为底座，<br />
|
||||
<span class="hero-highlight">让技术更懂人、更懂行业</span>
|
||||
</h1>
|
||||
<p class="hero-lead">
|
||||
我们聚焦隐私可控的边缘智能、垂直行业的流程自动化，以及三维数字化闭环，为家庭关怀与企业降本提供可落地的 AI 方案。
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a href="#products" class="btn btn-primary">了解产品线</a>
|
||||
<a href="#contact" class="btn btn-ghost">商务合作</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="products" class="products">
|
||||
<div class="wrap">
|
||||
<header class="section-head">
|
||||
<h2>三大产品线</h2>
|
||||
<p>从陪伴到合规填报，再到三维设计与测量，覆盖「人—业—形」全链路场景。</p>
|
||||
</header>
|
||||
|
||||
<ul class="product-grid">
|
||||
<li class="product-card product-card--warm">
|
||||
<span class="product-index">01</span>
|
||||
<h3>银发 AI 伴侣与回忆录</h3>
|
||||
<p class="product-desc">
|
||||
面向长者的智能陪伴：通过自然对话采集人生故事与家庭记忆，自动生成结构化的<strong>回忆录</strong>文稿，让温情被记录、被传承。
|
||||
</p>
|
||||
<ul class="product-bullets">
|
||||
<li>移动端 App 与适老化交互</li>
|
||||
<li>可选<strong>边缘推理一体机</strong>，数据不出本地，满足隐私与合规诉求</li>
|
||||
<li>离线/弱网环境下的稳定体验</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="product-card product-card--teal">
|
||||
<span class="product-index">02</span>
|
||||
<h3>化妆品与原料 · AI 自动化填表</h3>
|
||||
<p class="product-desc">
|
||||
针对化妆品功效评价、原料档案与注册申报等场景，提供<strong>智能抽取、校验与表单自动填充</strong>，减少重复录入与人工差错。
|
||||
</p>
|
||||
<ul class="product-bullets">
|
||||
<li>评价报告、原料规格书等多源文档理解</li>
|
||||
<li>与企业现有流程、模板对齐，可审计可追溯</li>
|
||||
<li>助力研发与合规团队<strong>降本增效</strong></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="product-card product-card--violet">
|
||||
<span class="product-index">03</span>
|
||||
<h3>AI 三维扫描 · 测量 · 设计一体化</h3>
|
||||
<p class="product-desc">
|
||||
一体化软件打通<strong>扫描、精密测量与数字化设计</strong>，支撑从数据采集到方案输出的完整工作流。
|
||||
</p>
|
||||
<ul class="product-bullets">
|
||||
<li><strong>数字矫形</strong>：足部、矫形器等个性化定制</li>
|
||||
<li><strong>定制电商</strong>：量体、鞋服与配饰的 C2M 链路</li>
|
||||
<li><strong>医疗美容</strong>：术前规划与效果沟通的数字化基础</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="values">
|
||||
<div class="wrap values-inner">
|
||||
<div class="value-block">
|
||||
<h3>隐私优先</h3>
|
||||
<p>关键场景支持端侧与一体机部署，最小化数据外发风险。</p>
|
||||
</div>
|
||||
<div class="value-block">
|
||||
<h3>行业可落地</h3>
|
||||
<p>与真实业务流程对齐，而非泛化聊天；强调可集成、可运维。</p>
|
||||
</div>
|
||||
<div class="value-block">
|
||||
<h3>全链路智能</h3>
|
||||
<p>从感知、理解到生成与设计，形成可复用的 AI 能力栈。</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" class="contact">
|
||||
<div class="wrap contact-inner">
|
||||
<h2>开启合作</h2>
|
||||
<p>若您希望了解产品演示、私有化部署或行业方案，欢迎来访、来电或邮件联系，我们将尽快与您联系。</p>
|
||||
|
||||
<div class="contact-details">
|
||||
<div class="contact-block">
|
||||
<span class="contact-label">地址</span>
|
||||
<address class="contact-address">
|
||||
上海市闵行区永德路787号宝龙中心G3栋6楼上海交大科创中心
|
||||
</address>
|
||||
</div>
|
||||
<div class="contact-block">
|
||||
<span class="contact-label">电话</span>
|
||||
<a class="contact-phone" href="tel:+8619801050941">198 0105 0941</a>
|
||||
</div>
|
||||
<div class="contact-block">
|
||||
<span class="contact-label">邮箱</span>
|
||||
<p class="contact-email-line">
|
||||
<a href="mailto:admin@hga3d.com" class="contact-mail">admin@hga3d.com</a>
|
||||
<span class="contact-email-note">（主题请注明来意）</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="wrap footer-inner">
|
||||
<span>© {new Date().getFullYear()} 上海和光同坤科技有限公司</span>
|
||||
<span class="footer-note">产品与合作细节以实际沟通为准。</span>
|
||||
</div>
|
||||
</footer>
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.site-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
backdrop-filter: blur(12px);
|
||||
background: rgba(7, 9, 13, 0.75);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.header-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-block: 1rem 1.1rem;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.65rem;
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.brand-text {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.75rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.nav a:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.nav-cta {
|
||||
padding: 0.45rem 1rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text) !important;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.nav-cta:hover {
|
||||
border-color: rgba(61, 214, 198, 0.45);
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: clamp(3.5rem, 12vw, 7rem) 0 clamp(4rem, 10vw, 6rem);
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
display: inline-block;
|
||||
margin: 0 0 1rem;
|
||||
padding: 0.35rem 0.85rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent-teal);
|
||||
border: 1px solid rgba(61, 214, 198, 0.35);
|
||||
border-radius: 999px;
|
||||
background: rgba(61, 214, 198, 0.06);
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
margin: 0 0 1.25rem;
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(2rem, 5vw, 3.15rem);
|
||||
font-weight: 400;
|
||||
line-height: 1.2;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.hero-highlight {
|
||||
background: linear-gradient(105deg, var(--text) 0%, var(--accent-warm) 45%, var(--accent-teal) 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.hero-lead {
|
||||
max-width: 38rem;
|
||||
margin: 0 0 2rem;
|
||||
font-size: 1.05rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.75rem 1.5rem;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
border-radius: 999px;
|
||||
border: 1px solid transparent;
|
||||
transition:
|
||||
transform 0.2s var(--ease),
|
||||
box-shadow 0.2s var(--ease),
|
||||
background 0.2s var(--ease);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
color: #0a0d12;
|
||||
background: linear-gradient(135deg, var(--accent-teal), #2eb8aa);
|
||||
box-shadow: 0 8px 28px rgba(61, 214, 198, 0.25);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
box-shadow: 0 12px 36px rgba(61, 214, 198, 0.32);
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
color: var(--text);
|
||||
border-color: var(--border);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.btn-ghost:hover {
|
||||
border-color: rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
|
||||
.section-head {
|
||||
margin-bottom: 2.75rem;
|
||||
max-width: 36rem;
|
||||
}
|
||||
|
||||
.section-head h2 {
|
||||
margin: 0 0 0.65rem;
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(1.65rem, 3.5vw, 2.15rem);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.section-head p {
|
||||
margin: 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 1.02rem;
|
||||
}
|
||||
|
||||
.products {
|
||||
padding-bottom: clamp(3rem, 8vw, 5rem);
|
||||
}
|
||||
|
||||
.product-grid {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
.product-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
.product-card {
|
||||
position: relative;
|
||||
padding: 1.75rem 1.6rem 1.65rem;
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-card);
|
||||
backdrop-filter: blur(10px);
|
||||
transition:
|
||||
border-color 0.25s var(--ease),
|
||||
background 0.25s var(--ease),
|
||||
transform 0.25s var(--ease);
|
||||
}
|
||||
|
||||
.product-card:hover {
|
||||
background: var(--bg-card-hover);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.product-card--warm:hover {
|
||||
border-color: rgba(212, 165, 116, 0.35);
|
||||
box-shadow: 0 20px 50px rgba(212, 165, 116, 0.08);
|
||||
}
|
||||
|
||||
.product-card--teal:hover {
|
||||
border-color: rgba(61, 214, 198, 0.35);
|
||||
box-shadow: 0 20px 50px rgba(61, 214, 198, 0.08);
|
||||
}
|
||||
|
||||
.product-card--violet:hover {
|
||||
border-color: rgba(155, 140, 255, 0.35);
|
||||
box-shadow: 0 20px 50px rgba(155, 140, 255, 0.08);
|
||||
}
|
||||
|
||||
.product-index {
|
||||
display: block;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.2em;
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.product-card--warm .product-index {
|
||||
color: var(--accent-warm);
|
||||
}
|
||||
|
||||
.product-card--teal .product-index {
|
||||
color: var(--accent-teal);
|
||||
}
|
||||
|
||||
.product-card--violet .product-index {
|
||||
color: var(--accent-violet);
|
||||
}
|
||||
|
||||
.product-card h3 {
|
||||
margin: 0 0 0.85rem;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.product-desc {
|
||||
margin: 0 0 1.1rem;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.product-bullets {
|
||||
margin: 0;
|
||||
padding-left: 1.15rem;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.product-bullets li {
|
||||
margin-bottom: 0.45rem;
|
||||
}
|
||||
|
||||
.product-bullets li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.values {
|
||||
padding: clamp(2.5rem, 6vw, 4rem) 0;
|
||||
border-top: 1px solid var(--border);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.values-inner {
|
||||
display: grid;
|
||||
gap: 1.75rem;
|
||||
}
|
||||
|
||||
@media (min-width: 720px) {
|
||||
.values-inner {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.value-block h3 {
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--accent-teal);
|
||||
}
|
||||
|
||||
.value-block p {
|
||||
margin: 0;
|
||||
font-size: 0.92rem;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.contact {
|
||||
padding: clamp(3.5rem, 9vw, 6rem) 0;
|
||||
}
|
||||
|
||||
.contact-inner {
|
||||
text-align: center;
|
||||
max-width: 36rem;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.contact-inner h2 {
|
||||
margin: 0 0 0.75rem;
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.85rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.contact-inner > p {
|
||||
margin: 0 0 1.75rem;
|
||||
color: var(--text-muted);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.contact-details {
|
||||
text-align: left;
|
||||
margin-top: 0.25rem;
|
||||
padding: 1.35rem 1.5rem;
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-card);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.contact-block {
|
||||
display: grid;
|
||||
grid-template-columns: 3.25rem 1fr;
|
||||
gap: 0.65rem 1rem;
|
||||
align-items: start;
|
||||
padding-block: 0.85rem;
|
||||
}
|
||||
|
||||
.contact-block + .contact-block {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.contact-label {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--accent-teal);
|
||||
padding-top: 0.2rem;
|
||||
}
|
||||
|
||||
.contact-address {
|
||||
margin: 0;
|
||||
font-size: 0.95rem;
|
||||
font-style: normal;
|
||||
line-height: 1.65;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.contact-phone {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.contact-phone:hover {
|
||||
color: var(--accent-teal);
|
||||
}
|
||||
|
||||
.contact-email-line {
|
||||
margin: 0;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.contact-mail {
|
||||
font-weight: 600;
|
||||
color: var(--accent-teal);
|
||||
}
|
||||
|
||||
.contact-email-note {
|
||||
display: block;
|
||||
margin-top: 0.35rem;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 400;
|
||||
color: var(--text-muted);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.contact-block {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.contact-label {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
padding: 1.5rem 0 2rem;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.footer-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.82rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.footer-inner {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-note {
|
||||
opacity: 0.75;
|
||||
}
|
||||
</style>
|
||||
81
src/styles/global.css
Normal file
81
src/styles/global.css
Normal file
@@ -0,0 +1,81 @@
|
||||
:root {
|
||||
--bg-deep: #07090d;
|
||||
--bg-card: rgba(18, 22, 32, 0.72);
|
||||
--bg-card-hover: rgba(24, 30, 45, 0.88);
|
||||
--border: rgba(255, 255, 255, 0.08);
|
||||
--text: rgba(245, 243, 238, 0.94);
|
||||
--text-muted: rgba(200, 196, 186, 0.72);
|
||||
--accent-warm: #d4a574;
|
||||
--accent-teal: #3dd6c6;
|
||||
--accent-violet: #9b8cff;
|
||||
--glow-warm: rgba(212, 165, 116, 0.15);
|
||||
--glow-teal: rgba(61, 214, 198, 0.12);
|
||||
--font-display: "ZCOOL XiaoWei", "Noto Serif SC", serif;
|
||||
--font-body: "Noto Sans SC", system-ui, sans-serif;
|
||||
--radius: 16px;
|
||||
--ease: cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
font-family: var(--font-body);
|
||||
font-size: 1rem;
|
||||
line-height: 1.65;
|
||||
color: var(--text);
|
||||
background: var(--bg-deep);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background:
|
||||
radial-gradient(ellipse 80% 50% at 50% -20%, var(--glow-warm), transparent 55%),
|
||||
radial-gradient(ellipse 60% 40% at 100% 30%, var(--glow-teal), transparent 50%),
|
||||
linear-gradient(180deg, #0a0d12 0%, var(--bg-deep) 45%);
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
body::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0.35;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent-teal);
|
||||
text-decoration: none;
|
||||
transition: opacity 0.2s var(--ease);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
width: min(1120px, calc(100% - 3rem));
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.wrap {
|
||||
width: calc(100% - 1.75rem);
|
||||
}
|
||||
}
|
||||
3
tsconfig.json
Normal file
3
tsconfig.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"extends": "astro/tsconfigs/strict"
|
||||
}
|
||||
Reference in New Issue
Block a user