feat: initial commit — Webflow to Next.js conversion
QuantumLab template converted to Next.js 16 + React 19 + TypeScript: - 8 page routes (home, about, blog, contact, careers, team-members, coming-soon, 404) - Dynamic routes for blog posts, career positions, and team members - GSAP animations (marquee, counters, button hovers) - IntersectionObserver-based scroll reveal (blur-to-clear transitions) - Dark mode with next-themes - React Hook Form + Zod contact form - Framer Motion page transitions - Lottie animations via lottie-web Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,92 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/* Webflow base resets are in webflow.css */
|
||||
|
||||
/* Dark mode: override Webflow CSS variables */
|
||||
.dark {
|
||||
--core--colors--neutral--800: #f5f5f5;
|
||||
--core--colors--neutral--700: #e0e0e0;
|
||||
--core--colors--neutral--600: #a0a0a0;
|
||||
--core--colors--neutral--500: #707070;
|
||||
--core--colors--neutral--400: #2a2a2a;
|
||||
--core--colors--neutral--300: #1e1e1e;
|
||||
--core--colors--neutral--200: #161616;
|
||||
--core--colors--neutral--100: #0d0d0d;
|
||||
--font--colors--title: var(--core--colors--neutral--800);
|
||||
--font--colors--paragraph: var(--core--colors--neutral--600);
|
||||
}
|
||||
|
||||
.dark body,
|
||||
.dark .page-wrapper {
|
||||
background-color: #0d0d0d;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.dark .section-small,
|
||||
.dark .section,
|
||||
.dark .hero-v1-grid-wrapper,
|
||||
.dark .cta-section:not(.v4) {
|
||||
background-color: #0d0d0d;
|
||||
}
|
||||
|
||||
.dark .border-wrapper,
|
||||
.dark .corner-gradient-container:not(.row) {
|
||||
background-color: #141414;
|
||||
}
|
||||
|
||||
.dark .input:not(.dark-mode) {
|
||||
background-color: #1a1a1a;
|
||||
border-color: #2a2a2a;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.dark .input:not(.dark-mode)::placeholder {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.dark .header-wrapper,
|
||||
.dark .header-wrapper---absolute {
|
||||
background-color: rgba(13, 13, 13, 0.9);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.dark .link .link-text {
|
||||
color: #d0d0d0;
|
||||
}
|
||||
|
||||
.dark .footer-wrapper {
|
||||
background-color: #0a0a0a;
|
||||
}
|
||||
|
||||
/* Show/hide elements based on theme */
|
||||
.show-dark-mode {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dark .show-dark-mode {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dark .show-light-mode {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Theme toggle button */
|
||||
.theme-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--core--colors--neutral--400);
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
color: var(--core--colors--neutral--700);
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
background-color: var(--core--colors--neutral--300);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user