企业官网建设流程全解析

以下为本文档的中文说明

电影级落地页技能是一个使用 GSAP 驱动的企业级 B2B 营销着陆页构建工具，专为创建具有电影般视觉冲击力的品牌展示页面而设计。它的功能极其丰富：全屏视频滚动滑块英雄区域配合 clip-path 椭圆转场效果、使用 SplitText 逐字揭示动画的标题、瀑布流产品展示画廊、滚动触发的关于文字展示、合作伙伴跑马灯、Lottie 风格的功能卡片以及多办公室页脚。使用场景主要面向需要高端品牌展示的企业，特别是烘焙设备、食品服务、工程机械等 B2B 领域。当用户提到电影级着陆页、视频英雄页、GSAP 滚动网站或引用该模板时触发。核心特点在于参考实现优先的开发模式。该技能附带一个完整的 example.html 参考实现，开发者应该从这个种子文件开始，只调整文案、数据和媒体资源，而不重写 CSS 或创造新的视觉语言。设计原则强调锁定设计令牌，指定的颜色、字体、视频 URL 和断点都是固定的，确保输出质量的一致性。该技能的价值不仅体现在直接的功能实现上，还在于它与现有技术生态系统的良好兼容性和集成能力。无论是作为独立工具使用，还是嵌入到更大的工作流中，它都能发挥出应有的作用。通过遵循标准化的接口规范和协议，它减少了系统集成过程中的摩擦点，让用户能够专注

Cinematic Landing Page — Bakery Facilities

Produce a single-page, scroll-cinematic B2B landing site for“Bakery Facilities”, a premium bakery-solutions company. A complete, rendered reference implementation ships beside this skill atexample.html—start from it. Copyexample.html, then adjust copy/data and (if asked) port to the React stack; donotrewrite the CSS or invent a new visual language. The seed already encodes the exact tokens, fonts, layout, sections, and animations described below.

This is the authoritative build brief. Follow it exactly — named colors, fonts, video URLs, breakpoints, and animation params are locked.

Stack

• Default output: the single self-containedexample.htmlseed (vanilla HTML/CSS/JS). It includes everything inline; the only remote refs are the 3 CloudFront hero videos andpicsum.photosgallery stills (stable CDNs — keep them).
• If the user explicitly asks for the project form, port faithfully toReact 18 + Vite + TypeScript + Tailwind + GSAP (ScrollTrigger + SplitText) + Lottie. No Framer Motion — all motion is GSAP. Keep the design identical while porting. Map the vanilla ports back to their framework origin:
  • IntersectionObservertoggling.in→ GSAPScrollTriggerwithonce: true.
  • passivescrolllistener writing inlineclip-path/transform/ word opacity → GSAPuseScroll/ScrollTrigger scrub.
  • per-charsetTimeoutreveal → GSAPSplitTextchar stagger (30ms).

Fonts (Google Fonts)

Import:https://fonts.googleapis.com/css2?family=Luxurious+Script&family=Manrope:wght@500&family=Open+Sans:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap

• font-body: ‘Open Sans’ — body, nav, buttons.
• font-accent: ‘Instrument Serif’ — hero h1, section titles, about body (uppercase).
• font-manrope: ‘Manrope’ (500) — labels, card text.
• font-luxurious: ‘Luxurious Script’ — “for Professionals” subtitle + “About us” title.

Color System (CSS Variables) — locked

--background: 0 0% 9%; --foreground: 0 0% 100%; --primary: 0 0% 100%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 97%; --muted: 0 0% 20%; --muted-foreground: 0 0% 75%; --accent: 0 0% 15%; --border: 0 0% 20%; --radius: 2px; --hero-cta-bg: 0 0% 97.3%; --hero-cta-text: 0 0% 9%;

Gold accent#CB9D06— every hover state (nav links, buttons, footer links, FABs). Border radius base2px. Container padding5%. No purple/indigo. The gold is the only chromatic accent; everything else is black/white/grey.

Section 1 — Hero (scroll-driven video slider)

• Wrapperheight: calc(100vh + 300vh); innerposition: sticky; top: 0; height: 100vh; overflow: visible.
• 3 stacked<video>slides(autoplay loop muted playsinline,object-fit: cover), z-index 1/2/3. Locked URLs:
  • https://plugin-assets.open-design.ai/plugins/cinematic-landing-page/hf_20260515_113235_88e0d62e-8103-40c1-948e-f0a4f886ffd1-e00afb.mp4
  • https://plugin-assets.open-design.ai/plugins/cinematic-landing-page/hf_20260515_114315_ee3663e6-bd79-41b4-9e5b-0fae62827eb9-b97001.mp4
  • https://plugin-assets.open-design.ai/plugins/cinematic-landing-page/hf_20260515_114559_dca18b14-90f5-47c4-8a84-3cbae9bd8a0c-62cb47.mp4
• Transition:SCROLL_PER_SLIDE_VH = 150. Per slide computelocalProgressover its scroll window, ease with cubic in-outp<0.5 ? 4p³ : 1-((-2p+2)³)/2, thenclip-path: ellipse(${5+progress*150}% ${8+progress*150}% at 50% 50%).
• H1“THE SMART BAKERY SOLUTION”: desktopfont-accent,font-size: 9.7vw,line-height: 1,white-space: nowrap,letter-spacing: -0.04em,bottom: -26px. Mobile40px,line-height 1.1, wrap, centered,bottom: 48px,px-4. Animation: GSAP SplitText per char{opacity:0,y:40}→{opacity:1,y:0}, 0.8s, 30ms stagger,power3.out, autoStart on load.
• Subtitle“for Professionals” (Luxurious Script): desktop3vw, mobile12vw,absolute inset-x-0 top-0,padding-top: calc(80px + 60px). Same SplitText params; fires after h1 complet
  es (~600ms).

Section 1 Navbar (fixed; transparent → black on scroll)

• fixed top-0 left-0 right-0 z-20 flex items-center px-4 md:px-10.scrollY > 50→bg-black/90 backdrop-blur-[80px] shadow-md py-2; else transparentpy-4.
• Left: region dropdown (Globe + “Hong Kong / Macau”; options Mainland China / Hong Kong-Macau / Taiwan).
• Center: 4-leaf-clover logo SVG (viewBox 0 0 305 304, white, the 4 paths from the prompt),h-[32px] md:h-[48px]normal,h-[24px] md:h-[32px]scrolled, flanked by dropdowns.
  • Left menus:About Us(Our History / Food Service Experts / Creating unforgettable culinary experiences),Partnering With Us(Sourcing from trusted suppliers / Empowering Customer Operations / Our Experts).
  • Right menus:Our Products(Viennese Pastry / Bread / Dessert / Savory / Speciality Pastry / Culinary Aid / Ingredient),Let’s Connect!(Contact / LinkedIn / WhatsApp / Newsletter / Brochure / Join Us).
• Right: language switch EN / 繁, active =bg-[#CB9D06] text-white.
• Dropdown:bg-white shadow-lg py-2, itemspx-4 py-2.5 text-[13px], hoverbg-[#CB9D06] text-white.
• Mobile: hamburger → full-screen overlaybg-black/95 backdrop-blur-md, accordion menus.

Floating nav (right side, desktop only)

fixed right-4 md:right-6 top-1/2 -translate-y-1/2 z-50 hidden md:flex flex-col gap-4. 3 pill buttons (48px,rounded-full,bg-black, expand on hover): Download icon + “Download Brochure”; LinkedIn SVG (paths from prompt) + “LinkedIn”; MessageCircle + “Chat With Us”. Hoverbg-[#CB9D06], label slides in via max-width 300ms.

Section 2 — Product gallery (masonry)

• bg-white py-8 md:py-16 flex justify-center; innerw-[90%] md:w-[65%].
• Grid: desktop ≥1000px = 4 cols (row 1: 4 equal; row 2: 3 cards, middle spans 2). Mobile = 2 cols. Aspect ratio 3:4, row gap 40px, item padding 4px.
• 7 items: Viennese Pastry, Bread, Dessert, Savory, Sweet Treats, Culinary Aid, Ingredient (Culinary Aid is the span-2 middle card). Backgroundshttps://picsum.photos/seed/bakery-<seed>/600/800.
• Entry: ScrollTriggerstart "top 85%",once;{opacity:0, y:+120, filter: blur(10px)} → {opacity:1, y:0, blur(0)}, 0.8s,power3.out, 0.05s stagger.
• Hover: CSStransform: scale(1.2)on the bg image,transition: transform 6s cubic-bezier(0.22,0.61,0.36,1).
• Labels:text-left text-black text-sm mt-2 font-manrope font-medium.

Section 3 — About (scroll-reveal text)

• bg-white py-16 md:py-32 flex flex-col items-center justify-center px-6 md:px-[18%].
• Title “About us”:font-luxurious text-[32px] text-center text-black mb-[20px].
• Body: uppercasefont-accent text-[24px] leading-[36px] md:text-[40px] md:leading-[56px] text-center text-black(1976 Louis Le Duff founding story copy — swap freely, keep tone/length).
• Scroll reveal (GSAP scrub): container rotation3deg → 0; per-word opacity0.1 → 1(stagger 0.05); per-word blur4px → 0. Triggers tied to section top→bottom crossing the viewport.
• Button “Read more”:px-8 py-3 bg-black text-white font-manrope text-sm tracking-wide hover:bg-[#CB9D06] transition-colors duration-300.
• Partner marquee (below,mt-16 md:mt-[140px]): infinite left scroll,@keyframes marqueetranslateX(0)→translateX(-50%) 60s linear, pause on hover, white gradient fade edges 80px. 12 partners asfont-body text-[14px] tracking-[0.2em] uppercase text-black/40: Bridor de France, Traiteur de Paris, Panidor, Boncolac, Mademoiselle Desserts, Mountry, Pfalzgraf, Dolceria Alba, St Michel, Poppies Bakeries, Alysse Food, Les Delices du Chef.

Section 4 — Partnering With Us

• Full-width dark background image with overlay. Title “Partnering With Us”:font-accent uppercase text-[28px] md:text-[40px] leading-[1.4] text-primary, SplitText chars (same hero params, on view).
• 4 cardsgrid-cols-2 md:grid-cols-4 gap-2 md:gap-[8px], containerw-[90%] md:w-[64%]. Eachbg-black px-4 md:px-6 py-6 md:py-8 flex flex-col items-center text-center gap-3 md:gap-4: a Lottie loop icon (w-10 h-10 md:w-12 md:h-12, gold), labelte xt-primary font-body text-[12px] md:text-[14px] tracking-wide capitalize. Cards: Trusted Sourcing, Food Safety Standards, Operational Efficiency, Expert Support. Entry: GSAPy:80→0, 0.7s,power3.out, staggeri*0.15, ScrollTriggerstart "top 90%", once. (Seed substitutes Lottie with a small SVG that has a subtle scale-pulse keyframe; in the React port use reallottie-react.)

Section 5 — Footer

• bg-white. Top (px-6 md:px-10 lg:px-16 pt-12 md:pt-20 pb-10 md:pb-16): left phone+852 2407 8840(text-[13px] text-black/40 uppercase tracking-wider) + emailorders@bakeryfacilities.com(text-[14px] font-bold, hover gold); right “Navigate” column (About Us / Partnering With Us / Our Products / Let’s Connect!) + “Social” column (WhatsApp / LinkedIn / Newsletter). Linkstext-[15px] text-black font-medium hover:text-[#CB9D06].
• Offices row (4 across desktop, stacked mobile): Head Office (Hong Kong), Mainland China (Shanghai), Taiwan (New Taipei City), Macau. Each: region title (12px uppercase tracking-wider black/40), company name (13px semibold), address (12px black/60), phone + email.
• Bottom barbg-black px-6 md:px-10 lg:px-16 py-4: left copyrighttext-[12px] text-white/40, right Privacy Policy + Terms of Servicetext-[12px] text-white/40 hover:text-white.

SplitText / global CSS

SplitText configtype: chars, smartWrap: true, charsClass: "split-char font-accent", char stagger 30ms. Global:

.split-char { padding-top: 0 !important; padding-bottom: 0 !important; line-height: 1 !important; }

Tailwind specifics

Border radius 2px base; container padding 5%; custom keyframemarquee(translateX(0) → translateX(-50%), 60s linear infinite);tailwindcss-animateplugin.

Responsive breakpoints

Mobile-first.md:= 768px,lg:= 1024px. Gallery columns: 1 (<400px), 2 (400–1000px), 4 (≥1000px). Hero h1 switches to the 40px mobile treatment, subtitle to 12vw, floating nav hides, navbar collapses to hamburger at ≤767px.

Hard rules

• All motion isGSAP(ScrollTrigger + SplitText) +Lottie— never Framer Motion.
• Gold#CB9D06is the only accent; no purple/indigo/teal/green substitutes.
• Keep the 3 CloudFront hero video URLs and thepicsum.photosgallery stills exactly; do not swap to other hosts.
• Do not use remote avatar hosts (i.pravatar.cc, dicebear, etc.) — they 403 in the sandbox. Any generated decoration is an inline SVG data URI.
• Start fromexample.html; only swap copy/data and (if requested) port to React. Do not redesign.