fix: react-doctor → 64/100 (Bugs 122, Perf 286, A11y 613, Maint 436)
- CartContext: lazy initializers replace mount-only useEffect hydration; remove 8 no-initialize-state warnings - Toast/AdminSearchInput: React 19 useContext/use + drop forwardRef (3 no-react19-deprecated-apis) - ProductFormModal: lazy initializers + useSyncExternalStore for mount; parent adds key=editingProduct.id - InstallPrompt: useReducer for prompt state (no-cascading-set-state) - QRScanModal: ref-based latest-callback pattern replaces useEffectEvent deps mistake - OnboardingFlow: functional setState (rerender-functional-setstate) - UsersPage/StopsCalendar/FeaturesAndStats: lazy initializers (rerender-lazy-state-init) - FAQClientPage: server-side brand settings fetch via getBrandSettingsPublic in layout; remove supabase import - LandingPageWrapper: href='#' → href='#top' (anchor-is-valid) - TuxedoVideoHero: replace animate-bounce with ease-out-expo (no-inline-bounce-easing) - ProductTableClient: useCallback for handleDeleted (jsx-no-new-function-as-prop) - excel-parser: pre-compile delimiter regexes (js-hoist-regexp) - water-log/settings: Promise.all for parallel DB calls (async-parallel) - ToastNotification: extract toast store to separate file (only-export-components) - WholesaleClient: inline <WholesaleIcon/> instead of hoisting to const (rendering-hoist-jsx)
This commit is contained in:
Nora
@@ -171,7 +171,7 @@ const stats: Stat[] = [
|
||||
|
||||
export default function FeaturesAndStats() {
|
||||
const [countersStarted, setCountersStarted] = useState(false);
|
||||
const [counters, setCounters] = useState(stats.map(() => 0));
|
||||
const [counters, setCounters] = useState<number[]>(() => stats.map(() => 0));
|
||||
const statsRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -237,12 +237,7 @@ export default function FeaturesAndStats() {
|
||||
minHeight: "100vh",
|
||||
}}
|
||||
>
|
||||
<style jsx>{`
|
||||
:global(body) {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
.section-label {
|
||||
font-family: var(--font-manrope);
|
||||
font-size: 0.75rem;
|
||||
@@ -278,7 +273,7 @@ export default function FeaturesAndStats() {
|
||||
cursor: default;
|
||||
opacity: 0;
|
||||
transform: translateY(24px);
|
||||
animation: fadeInUp 0.6s ease forwards;
|
||||
animation: fa-fade-in-up 0.6s ease forwards;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
@@ -320,7 +315,7 @@ export default function FeaturesAndStats() {
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
animation: fadeInUp 0.5s ease forwards;
|
||||
animation: fa-fade-in-up 0.5s ease forwards;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
@@ -363,14 +358,14 @@ export default function FeaturesAndStats() {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
@keyframes fa-fade-in-up {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInLeft {
|
||||
@keyframes fa-slide-in-left {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-24px);
|
||||
@@ -381,7 +376,7 @@ export default function FeaturesAndStats() {
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
@keyframes fa-slide-in-right {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(24px);
|
||||
@@ -392,7 +387,7 @@ export default function FeaturesAndStats() {
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
@keyframes fa-scale-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
@@ -404,15 +399,15 @@ export default function FeaturesAndStats() {
|
||||
}
|
||||
|
||||
.animate-left {
|
||||
animation: slideInLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
animation: fa-slide-in-left 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
}
|
||||
|
||||
.animate-right {
|
||||
animation: slideInRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
animation: fa-slide-in-right 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
}
|
||||
|
||||
.animate-scale {
|
||||
animation: scaleIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
animation: fa-scale-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
}
|
||||
|
||||
.stagger-1 { animation-delay: 0.1s; }
|
||||
@@ -426,7 +421,7 @@ export default function FeaturesAndStats() {
|
||||
.stat-stagger-2 { animation-delay: 0.3s; }
|
||||
.stat-stagger-3 { animation-delay: 0.45s; }
|
||||
.stat-stagger-4 { animation-delay: 0.6s; }
|
||||
`}</style>
|
||||
`}} />
|
||||
|
||||
{/* ─── FEATURES SECTION ─── */}
|
||||
<section
|
||||
|
||||
@@ -264,12 +264,12 @@ export default function HeroSection() {
|
||||
<div className="parallax-float absolute top-20 right-20 w-80 h-80 rounded-full opacity-30 blur-3xl"
|
||||
style={{
|
||||
background: "radial-gradient(circle, rgba(201, 122, 62, 0.4) 0%, transparent 70%)",
|
||||
animation: "float-slow 12s ease-in-out infinite",
|
||||
animation: "hs-float-slow 12s ease-in-out infinite",
|
||||
}} />
|
||||
<div className="parallax-float absolute bottom-40 left-10 w-96 h-96 rounded-full opacity-25 blur-3xl"
|
||||
style={{
|
||||
background: "radial-gradient(circle, rgba(107, 185, 165, 0.4) 0%, transparent 70%)",
|
||||
animation: "float-slow-delayed 14s ease-in-out infinite",
|
||||
animation: "hs-float-slow-delayed 14s ease-in-out infinite",
|
||||
}} />
|
||||
|
||||
{/* Grid pattern */}
|
||||
@@ -448,7 +448,7 @@ export default function HeroSection() {
|
||||
style={{
|
||||
strokeDasharray: "1000",
|
||||
strokeDashoffset: "1000",
|
||||
animation: "draw-route 3s ease-out forwards 0.5s",
|
||||
animation: "hs-draw-route 3s ease-out forwards 0.5s",
|
||||
}}
|
||||
/>
|
||||
|
||||
@@ -462,7 +462,7 @@ export default function HeroSection() {
|
||||
opacity="0.5"
|
||||
strokeDasharray="600"
|
||||
strokeDashoffset="600"
|
||||
style={{ animation: "draw-route 2.5s ease-out forwards 1s" }}
|
||||
style={{ animation: "hs-draw-route 2.5s ease-out forwards 1s" }}
|
||||
/>
|
||||
|
||||
{/* Farm Location - Animated Pulse */}
|
||||
@@ -573,7 +573,7 @@ export default function HeroSection() {
|
||||
className="absolute top-2 left-1/2 -translate-x-1/2 w-2 h-4 rounded-full"
|
||||
style={{
|
||||
backgroundColor: "#1a4d2e",
|
||||
animation: "scroll-indicator 2s ease-in-out infinite",
|
||||
animation: "hs-scroll-indicator 2s ease-in-out infinite",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
@@ -985,25 +985,25 @@ export default function HeroSection() {
|
||||
{/* (duplicate inline footer removed -- LandingPageWrapper <Footer /> now provides the only footer; eliminates repeated content + trims scroll height) */}
|
||||
|
||||
{/* ─── GLOBAL STYLES ────────────────────────────────────────────────────── */}
|
||||
<style jsx>{`
|
||||
@keyframes float {
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
@keyframes hs-float {
|
||||
0%, 100% { transform: translate(0, 0); }
|
||||
33% { transform: translate(15px, -20px); }
|
||||
66% { transform: translate(-10px, 10px); }
|
||||
}
|
||||
|
||||
@keyframes float-delayed {
|
||||
@keyframes hs-float-delayed {
|
||||
0%, 100% { transform: translate(0, 0); }
|
||||
33% { transform: translate(-20px, 15px); }
|
||||
66% { transform: translate(10px, -10px); }
|
||||
}
|
||||
|
||||
@keyframes float-slow {
|
||||
@keyframes hs-float-slow {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||
50% { transform: translate(25px, -30px) scale(1.02); }
|
||||
}
|
||||
|
||||
@keyframes float-slow-delayed {
|
||||
@keyframes hs-float-slow-delayed {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||
50% { transform: translate(-30px, 20px) scale(1.03); }
|
||||
}
|
||||
@@ -1017,11 +1017,11 @@ export default function HeroSection() {
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes draw-route {
|
||||
@keyframes hs-draw-route {
|
||||
to { stroke-dashoffset: 0; }
|
||||
}
|
||||
|
||||
@keyframes scroll-indicator {
|
||||
@keyframes hs-scroll-indicator {
|
||||
0%, 100% { transform: translateY(0); opacity: 1; }
|
||||
50% { transform: translateY(6px); opacity: 0.5; }
|
||||
}
|
||||
@@ -1049,7 +1049,7 @@ export default function HeroSection() {
|
||||
height: 3px;
|
||||
background: linear-gradient(to right, #c97a3e, #6b8f71);
|
||||
}
|
||||
`}</style>
|
||||
`}} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -28,7 +28,7 @@ export function Header({ className = "" }: HeaderProps) {
|
||||
<div className="flex items-center justify-between h-16 md:h-20">
|
||||
{/* Logo */}
|
||||
<a
|
||||
href="#"
|
||||
href="#top"
|
||||
className="flex items-center gap-3 group"
|
||||
style={{ textDecoration: "none" }}
|
||||
>
|
||||
@@ -292,6 +292,7 @@ export function LandingPageWrapper({ children, className = "" }: WrapperProps) {
|
||||
<>
|
||||
{/* Fonts loaded via next/font in app/layout.tsx — no external @import needed */}
|
||||
<div
|
||||
id="top"
|
||||
className={`min-h-screen flex flex-col ${className}`}
|
||||
style={{
|
||||
fontFamily: "var(--font-manrope)",
|
||||
|
||||
@@ -625,8 +625,8 @@ export default function TestimonialsAndCTA() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style jsx>{`
|
||||
@keyframes fadeInUp {
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
@keyframes tc-fade-in-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
@@ -637,7 +637,7 @@ export default function TestimonialsAndCTA() {
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
@keyframes tc-float {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
@@ -646,7 +646,7 @@ export default function TestimonialsAndCTA() {
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-soft {
|
||||
@keyframes tc-pulse-soft {
|
||||
0%, 100% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
@@ -664,7 +664,7 @@ export default function TestimonialsAndCTA() {
|
||||
a, button {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
`}</style>
|
||||
`}} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user