tyler/route-commerce
1
0
Fork 1
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

fix: resolve ParallaxLayer/FadeOnScroll JSX issues, remove large black section

Browse Source
This commit is contained in:
default
2026-06-02 15:44:27 +00:00
parent 2db3375f87
commit 7a9d74504b
1 changed files with 42 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/landing/HeroSection.tsx
+42 -44
View File
@@ -561,16 +561,16 @@ export default function HeroSection() {
}} /> }} />
<div className="container mx-auto px-8 text-center relative z-10 max-w-4xl"> <div className="container mx-auto px-8 text-center relative z-10 max-w-4xl">
<reveal-scale className="mb-8"> <div className="mb-8 reveal-scale">
<span <span
className="inline-block text-xs font-bold tracking-[0.3em] uppercase" className="inline-block text-xs font-bold tracking-[0.3em] uppercase"
style={{ color: "#c97a3e", fontFamily: "'DM Sans', sans-serif" }} style={{ color: "#c97a3e", fontFamily: "'DM Sans', sans-serif" }}
> >
The Challenge The Challenge
</span> </span>
</FadeOnScroll> </div>
<reveal-scale delay={0.1}> <div className="reveal-scale" style={{ animationDelay: "0.1s" }}>
<h2 <h2
className="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-8" className="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-8"
style={{ style={{
@@ -582,9 +582,9 @@ export default function HeroSection() {
<br /> <br />
<span style={{ color: "#c97a3e" }}>sit in transit for days</span> <span style={{ color: "#c97a3e" }}>sit in transit for days</span>
</h2> </h2>
</FadeOnScroll> </div>
<reveal-scale delay={0.2}> <div className="reveal-scale" style={{ animationDelay: "0.2s" }}>
<p <p
className="text-xl max-w-2xl mx-auto" className="text-xl max-w-2xl mx-auto"
style={{ style={{
@@ -595,7 +595,7 @@ export default function HeroSection() {
> >
Traditional distribution means your harvest loses freshness, quality, and value before reaching customers. Traditional distribution means your harvest loses freshness, quality, and value before reaching customers.
</p> </p>
</FadeOnScroll> </div>
</div> </div>
</div> </div>
</div> </div>
@@ -793,14 +793,14 @@ export default function HeroSection() {
}} /> }} />
<div className="container mx-auto px-8 relative z-10"> <div className="container mx-auto px-8 relative z-10">
<reveal-scale className="text-center mb-16"> <div className="text-center mb-16 reveal-scale">
<span <span
className="inline-block text-xs font-bold tracking-[0.2em] uppercase" className="inline-block text-xs font-bold tracking-[0.2em] uppercase"
style={{ color: "#c97a3e", fontFamily: "'DM Sans', sans-serif" }} style={{ color: "#c97a3e", fontFamily: "'DM Sans', sans-serif" }}
> >
Our Impact Our Impact
</span> </span>
</FadeOnScroll> </div>
{/* Stats Grid */} {/* Stats Grid */}
<div className="grid grid-cols-2 lg:grid-cols-4 gap-12"> <div className="grid grid-cols-2 lg:grid-cols-4 gap-12">
@@ -857,9 +857,9 @@ export default function HeroSection() {
<div className="container mx-auto px-8 relative z-10"> <div className="container mx-auto px-8 relative z-10">
<div className="max-w-3xl mx-auto text-center"> <div className="max-w-3xl mx-auto text-center">
{/* Label */} {/* Label */}
<reveal-scale> <div className="reveal-scale mb-8">
<span <span
className="reveal-text inline-block text-xs font-bold tracking-[0.2em] uppercase px-5 py-2 rounded-full mb-8" className="reveal-text inline-block text-xs font-bold tracking-[0.2em] uppercase px-5 py-2 rounded-full"
style={{ style={{
color: "#c97a3e", color: "#c97a3e",
background: "rgba(201, 122, 62, 0.1)", background: "rgba(201, 122, 62, 0.1)",
@@ -868,10 +868,10 @@ export default function HeroSection() {
> >
Get Started Today Get Started Today
</span> </span>
</FadeOnScroll> </div>
{/* Headline */} {/* Headline */}
<reveal-scale delay={0.1}> <div className="reveal-scale" style={{ animationDelay: "0.1s" }}>
<h2 <h2
className="text-5xl sm:text-6xl lg:text-7xl font-bold leading-tight mb-8" className="text-5xl sm:text-6xl lg:text-7xl font-bold leading-tight mb-8"
style={{ style={{
@@ -882,10 +882,10 @@ export default function HeroSection() {
Ready to Transform<br /> Ready to Transform<br />
Your Distribution? Your Distribution?
</h2> </h2>
</FadeOnScroll> </div>
{/* Subtext */} {/* Subtext */}
<reveal-scale delay={0.2}> <div className="reveal-scale" style={{ animationDelay: "0.2s" }}>
<p <p
className="text-xl mb-12 max-w-xl mx-auto" className="text-xl mb-12 max-w-xl mx-auto"
style={{ style={{
@@ -895,38 +895,36 @@ export default function HeroSection() {
> >
Join hundreds of farms already using Route Commerce to deliver fresher produce faster. Join hundreds of farms already using Route Commerce to deliver fresher produce faster.
</p> </p>
</FadeOnScroll> </div>
{/* CTAs */} {/* CTAs */}
<reveal-scale delay={0.3}> <div className="reveal-scale flex flex-wrap items-center justify-center gap-5" style={{ animationDelay: "0.3s" }}>
<div className="flex flex-wrap items-center justify-center gap-5"> <Link
<Link href="/login"
href="/login" className="group relative inline-flex items-center gap-3 px-10 py-6 rounded-2xl font-semibold text-xl overflow-hidden"
className="group relative inline-flex items-center gap-3 px-10 py-6 rounded-2xl font-semibold text-xl overflow-hidden" style={{
style={{ background: "linear-gradient(135deg, #1a4d2e 0%, #166534 100%)",
background: "linear-gradient(135deg, #1a4d2e 0%, #166534 100%)", color: "white",
color: "white", boxShadow: "0 8px 32px rgba(26, 77, 46, 0.35)",
boxShadow: "0 8px 32px rgba(26, 77, 46, 0.35)", }}
}} >
> <span>Start Free Trial</span>
<span>Start Free Trial</span> <svg className="w-6 h-6 transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<svg className="w-6 h-6 transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}> <path strokeLinecap="round" strokeLinejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
<path strokeLinecap="round" strokeLinejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" /> </svg>
</svg> </Link>
</Link> <Link
<Link href="/contact"
href="/contact" className="group inline-flex items-center gap-3 px-10 py-6 rounded-2xl font-semibold text-xl border-2"
className="group inline-flex items-center gap-3 px-10 py-6 rounded-2xl font-semibold text-xl border-2" style={{
style={{ color: "#1a4d2e",
color: "#1a4d2e", borderColor: "#1a4d2e",
borderColor: "#1a4d2e", background: "rgba(26, 77, 46, 0.03)",
background: "rgba(26, 77, 46, 0.03)", }}
}} >
> <span>Contact Sales</span>
<span>Contact Sales</span> </Link>
</Link> </div>
</div>
</FadeOnScroll>
</div> </div>
</div> </div>
</section> </section>