Skip to content

VAR 16: feat: enhance herosection with layered background effects and noise pattern utility #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
shadevkumar wants to merge 2 commits into
base: main
Choose a base branch
from
Open

VAR 16: feat: enhance herosection with layered background effects and noise pattern utility #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
31909fc
feat: enhance HeroSection with layered background effects and add noi…
shadevkumar Apr 12, 2025
e25ce38
refactor: clean up comments and formatting in HeroSection and Landing…
shadevkumar Apr 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,3 +98,9 @@ body {
transform: translateX(-100%);
}
}

@layer utilities {
.noise-pattern {
background-image: url(data:image/png;base64,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);
}
}
32 changes: 20 additions & 12 deletions components/marketing/HeroSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,25 @@ const DemoTerminal = () => {

export const HeroSection = () => {
return (
<section className="pt-32 pb-20 relative">
<section className="pt-32 pb-20 relative isolate">
{/* Background layers */}
<div className="absolute inset-0 -z-10">
{/* Base dark layer with red tint */}
<div className="absolute inset-0 bg-[#1a0808]" />

{/* Double noise layer for more density */}
<div className="absolute inset-0 noise-pattern opacity-[0.8]" />
<div className="absolute inset-0 noise-pattern-fine opacity-[0.3]" />

{/* Rich gradient overlay */}
<div className="absolute inset-0 bg-gradient-to-b from-red-950/30 via-neutral-950/20 to-neutral-950/40" />

{/* Ambient light effects */}
<div className="absolute -left-1/2 top-0 h-[500px] w-[500px] rounded-full bg-red-900/20 blur-[120px]" />
<div className="absolute -right-1/2 bottom-0 h-[500px] w-[500px] rounded-full bg-neutral-900/30 blur-[120px]" />
</div>

{/* Rest of your existing content */}
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid lg:grid-cols-[0.8fr,1.2fr] gap-12 items-start">
{/* Left Column - Content */}
Expand All @@ -200,7 +218,7 @@ export const HeroSection = () => {
Generate PR Descriptions
<br />
<motion.span
className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-white to-white"
className="text-white bg-clip-text"
>
Automatically
</motion.span>
Expand Down Expand Up @@ -273,16 +291,6 @@ export const HeroSection = () => {
</div>
</div>
</div>

{/* Gradient border */}
<motion.div
className="absolute bottom-0 left-0 right-0 h-px"
initial={{opacity: 0}}
animate={{opacity: 1}}
transition={{delay: 4.0, duration: 0.5}}
>
<div className="h-full bg-gradient-to-r from-transparent via-neutral-700/50 to-transparent" />
</motion.div>
</section>
)
}
18 changes: 9 additions & 9 deletions components/marketing/LandingPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@ const LandingPage = ({isAuthenticated}: LandingPageProps) => {
return (
<div className="min-h-screen bg-[#030014] text-white relative overflow-hidden">
{/* Enhanced Background Gradients */}
<div className="absolute inset-0 z-0">
{/* <div className="absolute inset-0 z-0">
{/* Main gradient orbs */}
<div
{/* <div
className="absolute top-[-6%] right-[11%] h-[600px] w-[600px] rounded-full
bg-gradient-to-r from-indigo-500 to-blue-600 blur-[120px] opacity-20"
/>
Expand All @@ -38,7 +38,7 @@ const LandingPage = ({isAuthenticated}: LandingPageProps) => {
/>

{/* Additional accent gradients */}
<div
{/* <div
className="absolute top-[20%] left-[15%] h-[400px] w-[400px] rounded-full
bg-gradient-to-r from-emerald-500 to-green-300 blur-[120px] opacity-10"
/>
Expand All @@ -48,17 +48,17 @@ const LandingPage = ({isAuthenticated}: LandingPageProps) => {
/>

{/* Radial gradient overlay for depth */}
<div
{/* <div
className="absolute inset-0 bg-gradient-radial from-transparent
via-[#030014] to-[#030014] opacity-80"
/>
/> */}

{/* Grain texture overlay */}
<div
{/* Grain texture overlay */}
{/* <div
className="absolute inset-0 bg-[url('/noise.png')] opacity-[0.03]
mix-blend-soft-light pointer-events-none"
/>
</div>
/> */}
{/* </div> */}

{/* Content wrapper with relative positioning */}
<div className="relative z-10">
Expand Down