mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-04 05:02:17 +00:00
121ceda66d
## Summary Implement the website layout system and homepage with all sections, reusable components, scroll-driven animations, and routing. ## Changes - **What**: - Reorganize components into `common/`, `home/`, `company/`, `product/` directories - Add `BaseLayout` with shared `SiteNav` and `SiteFooter` - Implement homepage sections: Hero, SocialProofBar, ProductShowcase, UseCase, GetStarted, ProductCards, CaseStudySpotlight, BuildWhat - Add reusable components: BrandButton, NodeBadge, ProductCard, FooterLinkColumn, NavDesktopLink, MobileMenu - Add PPFormula font family, client logos, and icon assets - Add hero/footer logo frame sequences for scroll-driven animations - Add `useFrameScrub` composable and `smoothScroll` (Lenis + GSAP ScrollTrigger) - Add route config, nav config, and placeholder pages for all routes - Add Playwright e2e tests for homepage and navigation - **Dependencies**: gsap, lenis, @astrojs/check desktop  mobile  ## Review Focus - Component structure and naming conventions under `apps/website/` - Scroll-driven animation approach (GSAP ScrollTrigger + Lenis smooth scroll) - Mobile responsive behavior (MobileMenu, ScrollTrigger matchMedia) --------- Co-authored-by: GitHub Action <action@github.com> Co-authored-by: DrJKL <DrJKL0424@gmail.com> Co-authored-by: Amp <amp@ampcode.com> Co-authored-by: Alexander Brown <drjkl@comfy.org>
116 lines
2.4 KiB
CSS
116 lines
2.4 KiB
CSS
@import 'tailwindcss';
|
|
@import '@comfyorg/design-system/css/base.css';
|
|
|
|
@font-face {
|
|
font-family: 'PP Formula';
|
|
src: url('/fonts/PPFormula-Light.woff2') format('woff2');
|
|
font-weight: 300;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'PP Formula';
|
|
src: url('/fonts/PPFormula-Regular.woff2') format('woff2');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'PP Formula';
|
|
src: url('/fonts/PPFormula-Medium.woff2') format('woff2');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'PP Formula';
|
|
src: url('/fonts/PPFormula-Semibold.woff2') format('woff2');
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'PP Formula';
|
|
src: url('/fonts/PPFormula-Bold.woff2') format('woff2');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'PP Formula Condensed';
|
|
src: url('/fonts/PPFormula-CondensedSemibold.woff2') format('woff2');
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@theme {
|
|
--color-site-dropdown: #332b38;
|
|
--color-primary-comfy-yellow: #f2ff59;
|
|
--color-primary-comfy-ink: #211927;
|
|
--color-primary-comfy-canvas: #c2bfb9;
|
|
--color-primary-warm-white: #f0efed;
|
|
--color-primary-warm-gray: #7e7c78;
|
|
--color-secondary-mauve: #4d3762;
|
|
--color-primary-comfy-plum: #49378b;
|
|
--color-illustration-forest: #20464c;
|
|
--color-transparency-white-t4: rgb(255 255 255 / 0.04);
|
|
--font-formula: 'PP Formula', sans-serif;
|
|
--font-formula-condensed: 'PP Formula Condensed', sans-serif;
|
|
--text-6\.5xl: 4.125rem;
|
|
--radius-4xl: 2rem;
|
|
--radius-5xl: 2.5rem;
|
|
}
|
|
|
|
@keyframes border-spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@utility animate-border-spin {
|
|
animation: border-spin 2s linear infinite;
|
|
}
|
|
|
|
@keyframes marquee {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
100% {
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
@keyframes marquee-reverse {
|
|
0% {
|
|
transform: translateX(-50%);
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@utility animate-marquee {
|
|
animation: marquee 30s linear infinite;
|
|
}
|
|
|
|
@utility animate-marquee-reverse {
|
|
animation: marquee-reverse 30s linear infinite;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|