refactor: split single-page landing into three separate pages
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
---
|
||||
---
|
||||
<section class="bg-slate-50 overflow-hidden">
|
||||
<div class="max-w-7xl mx-auto space-y-24">
|
||||
<div class="max-w-7xl mx-auto space-y-24 px-4 lg:px-0">
|
||||
<div class="relative">
|
||||
<div class="relative flex flex-col md:flex-row md:items-center mb-10 md:mb-14 px-3 md:px-0">
|
||||
<div class="absolute left-0 w-full h-16 md:h-14 bg-indigo-50/50 -z-10 rounded-r-full"></div>
|
||||
|
||||
@@ -3,10 +3,17 @@
|
||||
<section id="recruitment" class="py-16 md:py-24 bg-white">
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 lg:px-0">
|
||||
|
||||
<div class="text-center mb-16">
|
||||
<span class="text-blue-600 font-medium text-lg tracking-widest block mb-2">生态合作</span>
|
||||
<h2 class="text-[clamp(1.8rem,4vw,3rem)] font-extrabold text-gray-900 mt-2 mb-4">生态合作，共享蓝海</h2>
|
||||
<div class="mb-16 relative">
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-64 h-64 bg-blue-200/30 blur-3xl rounded-full -z-10"></div>
|
||||
<div class="text-center">
|
||||
<h3 class="text-3xl md:text-5xl font-black text-gray-900 tracking-tight">
|
||||
<span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600">生态合作</span>
|
||||
</h3>
|
||||
<div class="w-20 h-1.5 bg-blue-600 mx-auto mt-6 rounded-full"></div>
|
||||
<p class="text-gray-500 mt-6 max-w-2xl mx-auto text-lg leading-relaxed">
|
||||
生态合作，共享蓝海
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<section class="py-16 md:py-24 bg-slate-50 overflow-hidden">
|
||||
<div class="max-w-7xl mx-auto space-y-24">
|
||||
<div class="max-w-7xl mx-auto space-y-24 px-4 lg:px-0">
|
||||
|
||||
<style>
|
||||
@keyframes float {
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row items-stretch gap-6 md:gap-20 max-w-7xl mx-auto">
|
||||
<div class="flex flex-col md:flex-row items-stretch gap-6 md:gap-20 max-w-7xl mx-auto px-4 lg:px-0">
|
||||
|
||||
<div class="w-full md:w-5/12 order-1 relative">
|
||||
<div class="md:sticky md:top-20 h-fit">
|
||||
|
||||
@@ -1,5 +1,19 @@
|
||||
---
|
||||
const { title = "浙江贝凡网络科技" } = Astro.props;
|
||||
const { title = "浙江贝凡网络科技", activeNav = "home" } = Astro.props;
|
||||
|
||||
const navItems = [
|
||||
{ id: 'home', label: '公司介绍', href: '/', icon: 'fa-building' },
|
||||
{ id: 'core-business', label: '核心业务', href: '/core-business', icon: 'fa-cogs' },
|
||||
{ id: 'partnership', label: '生态合作', href: '/partnership', icon: 'fa-handshake-o' },
|
||||
];
|
||||
|
||||
function getNavLinkClass(itemId: string) {
|
||||
const baseClass = 'flex items-center gap-2 px-4 py-2.5 rounded-full font-medium transition-all duration-300';
|
||||
if (itemId === activeNav) {
|
||||
return `${baseClass} bg-primary text-white shadow-md`;
|
||||
}
|
||||
return `${baseClass} text-gray-600 hover:text-primary hover:bg-primary/10`;
|
||||
}
|
||||
---
|
||||
|
||||
<html lang="zh-CN">
|
||||
@@ -16,29 +30,46 @@ const { title = "浙江贝凡网络科技" } = Astro.props;
|
||||
<a href="/" class="flex items-center space-x-3">
|
||||
<img src="/img/logo.png" alt="浙江贝凡 Logo" class="h-10 w-auto">
|
||||
</a>
|
||||
<nav class="hidden lg:flex items-center space-x-6 lg:space-x-8">
|
||||
<a href="/#home" class="font-bold text-primary transition duration-300 relative hover:text-blue-600">首页</a>
|
||||
<a href="/#core-business" class="font-medium text-gray-700 hover:text-primary transition duration-300 relative">核心业务</a>
|
||||
<a href="/#ai-model" class="font-medium text-gray-700 hover:text-primary transition duration-300 relative">AI大模型</a>
|
||||
<a href="/#about-us" class="font-medium text-gray-700 hover:text-primary transition duration-300 relative">关于我们</a>
|
||||
<a href="/#recruitment" class="font-medium text-gray-700 hover:text-primary transition duration-300 relative">生态合作</a>
|
||||
<nav class="hidden lg:flex items-center gap-3">
|
||||
{
|
||||
navItems.map(item => (
|
||||
<a href={item.href} class={getNavLinkClass(item.id)}>
|
||||
<i class={`fa ${item.icon}`}></i>
|
||||
<span>{item.label}</span>
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</nav>
|
||||
<a href="/#contact-info" class="hidden lg:block bg-primary hover:bg-blue-600 text-white px-6 py-2 rounded-full font-bold transition-all duration-300 shadow-xl hover:shadow-2xl hover:-translate-y-0.5">
|
||||
立即咨询
|
||||
<a href="/#contact-info" class="hidden lg:flex items-center gap-2 bg-primary hover:bg-blue-600 text-white px-5 py-2.5 rounded-full font-bold transition-all duration-300 shadow-lg hover:shadow-xl">
|
||||
<i class="fa fa-phone"></i>
|
||||
<span>立即咨询</span>
|
||||
</a>
|
||||
<button id="menu-toggle" class="lg:hidden text-gray-800 focus:outline-none p-2 rounded-lg hover:bg-gray-100">
|
||||
<button id="menu-toggle" class="lg:hidden text-gray-800 focus:outline-none p-3 rounded-xl hover:bg-gray-100 border border-gray-200">
|
||||
<i class="fa fa-bars text-xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div id="mobile-menu" class="hidden lg:hidden bg-white border-t border-gray-200 shadow-xl">
|
||||
<div class="max-w-7xl mx-auto px-4 py-3 flex flex-col space-y-2">
|
||||
<a href="/#home" class="font-medium text-primary py-2 px-4 rounded-lg hover:bg-primary/10 transition">首页</a>
|
||||
<a href="/#core-business" class="font-medium text-gray-800 py-2 px-4 rounded-lg hover:bg-primary/10 transition">核心业务</a>
|
||||
<a href="/#ai-model" class="font-medium text-gray-800 py-2 px-4 rounded-lg hover:bg-primary/10 transition">AI大模型</a>
|
||||
<a href="/#about-us" class="font-medium text-gray-800 py-2 px-4 rounded-lg hover:bg-primary/10 transition">关于我们</a>
|
||||
<a href="/#recruitment" class="font-medium text-gray-800 py-2 px-4 rounded-lg hover:bg-primary/10 transition">生态合作</a>
|
||||
<a href="/#contact-info" class="bg-primary hover:bg-blue-600 text-white px-6 py-2.5 rounded-full font-bold text-center mt-3 transition shadow-lg">
|
||||
立即咨询
|
||||
|
||||
<div id="mobile-menu" class="hidden lg:hidden bg-white border-t border-gray-200 shadow-xl pb-4">
|
||||
<div class="max-w-7xl mx-auto px-4 pt-4 space-y-2">
|
||||
{
|
||||
navItems.map(item => (
|
||||
<a href={item.href} class={`flex items-center gap-4 p-4 rounded-xl transition-all ${item.id === activeNav ? 'bg-primary/10 border-2 border-primary' : 'hover:bg-gray-50 border-2 border-transparent'}`}>
|
||||
<div class={`w-12 h-12 rounded-xl flex items-center justify-center ${item.id === activeNav ? 'bg-primary' : 'bg-gray-100'}`}>
|
||||
<i class={`fa ${item.icon} text-xl ${item.id === activeNav ? 'text-white' : 'text-gray-600'}`}></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<span class={`text-base font-bold block ${item.id === activeNav ? 'text-primary' : 'text-gray-800'}`}>{item.label}</span>
|
||||
</div>
|
||||
{
|
||||
item.id === activeNav && <i class="fa fa-check-circle text-primary text-xl"></i>
|
||||
}
|
||||
</a>
|
||||
))
|
||||
}
|
||||
<a href="/#contact-info" class="flex items-center gap-4 p-4 rounded-xl bg-primary text-white mt-4">
|
||||
<i class="fa fa-phone text-xl"></i>
|
||||
<span class="text-base font-bold">立即咨询</span>
|
||||
<i class="fa fa-arrow-right ml-auto"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
16
src/pages/core-business/index.astro
Normal file
16
src/pages/core-business/index.astro
Normal file
@@ -0,0 +1,16 @@
|
||||
---
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
import Policy from '../../components/sections/Policy.astro';
|
||||
import AccidentCases from '../../components/sections/AccidentCases.astro';
|
||||
import Hardware from '../../components/sections/Hardware.astro';
|
||||
import AIModel from '../../components/sections/AIModel.astro';
|
||||
---
|
||||
|
||||
<Layout title="核心业务 - 浙江贝凡网络科技" activeNav="core-business">
|
||||
<main class="pt-20">
|
||||
<Policy />
|
||||
<AccidentCases />
|
||||
<Hardware />
|
||||
<AIModel />
|
||||
</main>
|
||||
</Layout>
|
||||
@@ -4,29 +4,19 @@ import Hero from '../components/sections/Hero.astro';
|
||||
import Timeline from '../components/sections/Timeline.astro';
|
||||
import SaaS from '../components/sections/SaaS.astro';
|
||||
import Customization from '../components/sections/Customization.astro';
|
||||
import Policy from '../components/sections/Policy.astro';
|
||||
import AccidentCases from '../components/sections/AccidentCases.astro';
|
||||
import Hardware from '../components/sections/Hardware.astro';
|
||||
import AIModel from '../components/sections/AIModel.astro';
|
||||
import Honors from '../components/sections/Honors.astro';
|
||||
import Contact from '../components/sections/Contact.astro';
|
||||
import Partnership from '../components/sections/Partnership.astro';
|
||||
import Footer from '../components/sections/Footer.astro';
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<Layout title="浙江贝凡网络科技 - 全场景 ‧ 产业数字化转型服务商" activeNav="home">
|
||||
<main>
|
||||
<Hero />
|
||||
<Timeline />
|
||||
<SaaS />
|
||||
<Customization />
|
||||
<Policy />
|
||||
<AccidentCases />
|
||||
<Hardware />
|
||||
<AIModel />
|
||||
<Honors />
|
||||
<Contact />
|
||||
<Partnership />
|
||||
</main>
|
||||
<Footer />
|
||||
</Layout>
|
||||
|
||||
10
src/pages/partnership/index.astro
Normal file
10
src/pages/partnership/index.astro
Normal file
@@ -0,0 +1,10 @@
|
||||
---
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
import Partnership from '../../components/sections/Partnership.astro';
|
||||
---
|
||||
|
||||
<Layout title="生态合作 - 浙江贝凡网络科技" activeNav="partnership">
|
||||
<main class="pt-20">
|
||||
<Partnership />
|
||||
</main>
|
||||
</Layout>
|
||||
Reference in New Issue
Block a user