resposive navbar
This commit is contained in:
Adspillar
parent
9c27a8619b
commit
457d5227a5
3 changed files with 139 additions and 70 deletions
BIN
public/heroImg.png
Normal file
BIN
public/heroImg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 384 KiB |
|
|
@ -1,66 +1,69 @@
|
|||
import { motion } from "framer-motion"
|
||||
import HeroImage from "../../../public/heroImg.png"
|
||||
|
||||
export function HeroSection() {
|
||||
return (
|
||||
<section className="relative flex min-h-screen items-center justify-center overflow-hidden px-10 md:px-20 py-24 text-white">
|
||||
<section className="relative flex min-h-screen items-center justify-center overflow-hidden px-4 sm:px-6 lg:px-20 py-16 md:py-24 text-white">
|
||||
{/* Overlay */}
|
||||
<div className="absolute inset-0 bg-black/30 backdrop-blur-[1px]" />
|
||||
|
||||
<div className="relative z-10 mx-auto flex w-full max-w-7xl flex-col items-center justify-between gap-16 md:flex-row">
|
||||
{/* Left Text Content */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -40 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8, ease: "easeOut" }}
|
||||
className="max-w-xl text-center md:text-left"
|
||||
>
|
||||
{/* Badge */}
|
||||
<div className="relative z-10 mx-auto w-full max-w-7xl">
|
||||
<div className="flex flex-col lg:flex-row items-center justify-between gap-8 lg:gap-12">
|
||||
{/* Left Text Content - 40% */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ delay: 0.2, duration: 0.6 }}
|
||||
className="mb-6 inline-flex items-center justify-center md:justify-start"
|
||||
initial={{ opacity: 0, x: -40 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8, ease: "easeOut" }}
|
||||
className="w-full lg:w-2/5 text-center lg:text-left"
|
||||
>
|
||||
<span className="rounded-full border border-white/20 bg-white/10 px-5 py-1.5 text-xs font-medium uppercase tracking-wider backdrop-blur-sm">
|
||||
Affiliate Program
|
||||
</span>
|
||||
{/* Badge */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ delay: 0.2, duration: 0.6 }}
|
||||
className="mb-4 md:mb-6 inline-flex items-center justify-center lg:justify-start"
|
||||
>
|
||||
<span className="rounded-full border border-white/20 bg-white/10 px-4 py-1 text-xs font-medium uppercase tracking-wider backdrop-blur-sm">
|
||||
Affiliate Program
|
||||
</span>
|
||||
</motion.div>
|
||||
|
||||
{/* Headline - Smaller font sizes */}
|
||||
<h1 className="mb-4 md:mb-6 text-3xl sm:text-4xl md:text-5xl font-extrabold leading-tight tracking-tight">
|
||||
Earn <span className="text-white/90">50% Commissions</span> for Every Referral
|
||||
</h1>
|
||||
|
||||
{/* Description - Smaller text */}
|
||||
<p className="mb-6 md:mb-8 text-base md:text-lg leading-relaxed text-white/80">
|
||||
Turn your influence into income. Join Planpost AI's affiliate program and earn recurring rewards — every month,
|
||||
automatically.
|
||||
</p>
|
||||
|
||||
{/* CTA Button */}
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.97 }}
|
||||
className="rounded-lg bg-white px-8 py-3 text-sm md:text-base font-semibold text-[#5543af] shadow-lg transition-all hover:shadow-xl"
|
||||
>
|
||||
Start Earning
|
||||
</motion.button>
|
||||
</motion.div>
|
||||
|
||||
{/* Headline */}
|
||||
<h1 className="mb-6 text-5xl font-extrabold leading-tight tracking-tight md:text-6xl lg:text-7xl">
|
||||
Earn <span className="text-white/90">50% Commissions</span> for Every Referral
|
||||
</h1>
|
||||
|
||||
{/* Description */}
|
||||
<p className="mb-10 text-lg leading-relaxed text-white/80 md:text-xl">
|
||||
Turn your influence into income. Join Planpost AI’s affiliate program and earn recurring rewards — every month,
|
||||
automatically.
|
||||
</p>
|
||||
|
||||
{/* Single CTA Button */}
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.97 }}
|
||||
className="rounded-lg bg-white px-10 py-4 text-base font-semibold text-[#5543af] shadow-lg transition-all hover:shadow-xl"
|
||||
{/* Right Side Image - 60% */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 40 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8, ease: 'easeOut', delay: 0.3 }}
|
||||
className="w-full lg:w-3/5 flex justify-center items-center"
|
||||
>
|
||||
Start Earning
|
||||
</motion.button>
|
||||
</motion.div>
|
||||
|
||||
{/* Right Side Image */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 40 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8, ease: 'easeOut', delay: 0.3 }}
|
||||
className="max-w-xl w-full flex justify-center"
|
||||
>
|
||||
<img
|
||||
src="https://media.istockphoto.com/id/948339996/photo/trading-business-the-affiliate-offers-a-profit-model-to-adapt-the-current-competitive-strategy.jpg?s=1024x1024&w=is&k=20&c=zv1JlvtgyiYhEjdLCHB0zsvx435q_VmnG-yYqMXNe50="
|
||||
alt="Affiliate Program Illustration"
|
||||
className="w-full rounded-2xl shadow-2xl object-cover"
|
||||
/>
|
||||
</motion.div>
|
||||
<img
|
||||
src={HeroImage}
|
||||
alt="Hero"
|
||||
className="w-full h-auto max-w-2xl object-cover shadow-2xl rounded-lg"
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,51 +1,117 @@
|
|||
import { useEffect, useState } from "react"
|
||||
import { useState, useEffect, useRef } from "react"
|
||||
import { Link } from "react-router-dom"
|
||||
|
||||
import { Menu, X } from "lucide-react"
|
||||
import BrandLogo from "../../../public/planpost.png"
|
||||
export function Navigation() {
|
||||
const [scrolled, setScrolled] = useState(false)
|
||||
const [menuOpen, setMenuOpen] = useState(false)
|
||||
const menuRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
if (window.scrollY > 30) {
|
||||
setScrolled(true)
|
||||
} else {
|
||||
setScrolled(false)
|
||||
}
|
||||
}
|
||||
const handleScroll = () => setScrolled(window.scrollY > 30)
|
||||
window.addEventListener("scroll", handleScroll)
|
||||
return () => window.removeEventListener("scroll", handleScroll)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
|
||||
setMenuOpen(false)
|
||||
}
|
||||
}
|
||||
if (menuOpen) document.addEventListener("mousedown", handleClickOutside)
|
||||
else document.removeEventListener("mousedown", handleClickOutside)
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside)
|
||||
}, [menuOpen])
|
||||
|
||||
return (
|
||||
<nav
|
||||
className={`fixed top-3 left-1/2 z-50 -translate-x-1/2 transition-all duration-500 ease-in-out rounded-2xl border border-white/10 backdrop-blur-md shadow-lg ${
|
||||
scrolled
|
||||
? "bg-[#5543af]/90 w-[50%] max-w-4xl py-2"
|
||||
: "bg-[#5543af]/80 w-[90%] max-w-7xl py-3"
|
||||
? "bg-[#5543af]/90 w-[90%] sm:w-[70%] md:w-[50%] py-2"
|
||||
: "bg-[#5543af]/80 w-[90%] sm:w-[90%] md:w-[90%] py-3"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between px-8 transition-all duration-300">
|
||||
<div className="flex items-center justify-between px-6 sm:px-8">
|
||||
{/* Logo */}
|
||||
<Link to="/" className="flex items-center gap-2">
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br from-[#8529e0] to-[#9d2ec8]">
|
||||
<span className="text-sm font-bold text-white">P</span>
|
||||
<img src={BrandLogo} alt="" />
|
||||
</div>
|
||||
<span className="text-lg font-semibold text-white">Planpost Affiliate</span>
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-8">
|
||||
{/* Desktop Links */}
|
||||
<div className="hidden md:flex items-center gap-4">
|
||||
<Link
|
||||
to="/login"
|
||||
className="rounded-lg border border-white/40 px-4 py-2 text-sm font-medium text-white hover:bg-white/20 transition-all"
|
||||
style={{color:"white"}}
|
||||
style={{
|
||||
borderRadius: "0.5rem",
|
||||
border: "1px solid rgba(255,255,255,0.4)",
|
||||
padding: "0.5rem 1rem",
|
||||
fontSize: "0.875rem",
|
||||
fontWeight: 500,
|
||||
color: "#ffffff",
|
||||
}}
|
||||
>
|
||||
Login
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/signup"
|
||||
className="rounded-lg bg-white px-4 py-2 text-sm font-semibold hover:opacity-90 transition-opacity"
|
||||
style={{color:"#5d4ab2"}}
|
||||
style={{
|
||||
borderRadius: "0.5rem",
|
||||
padding: "0.5rem 1rem",
|
||||
fontSize: "0.875rem",
|
||||
fontWeight: 600,
|
||||
backgroundColor: "#ffffff",
|
||||
color: "#5d4ab2",
|
||||
}}
|
||||
>
|
||||
Try Free
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Mobile Hamburger */}
|
||||
<div className="md:hidden flex items-center z-50">
|
||||
<button onClick={() => setMenuOpen(!menuOpen)}>
|
||||
{menuOpen ? <X className="w-6 h-6 bg-[#3c2f7b] text-white " /> : <Menu className="w-6 h-6 bg-[#3c2f7b] text-white border border-yellow-400" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
<div
|
||||
ref={menuRef}
|
||||
className={`md:hidden transition-max-height duration-300 overflow-hidden ${
|
||||
menuOpen ? "max-h-40 mt-2" : "max-h-0"
|
||||
}`}
|
||||
>
|
||||
<div className="flex flex-col gap-2 px-6 pb-4 bg-[#5543af]/95 rounded-b-2xl">
|
||||
<Link
|
||||
to="/login"
|
||||
style={{
|
||||
borderRadius: "0.5rem",
|
||||
border: "1px solid rgba(255,255,255,0.4)",
|
||||
padding: "0.5rem 1rem",
|
||||
fontSize: "0.875rem",
|
||||
fontWeight: 500,
|
||||
color: "#ffffff",
|
||||
}}
|
||||
onClick={() => setMenuOpen(false)}
|
||||
>
|
||||
Login
|
||||
</Link>
|
||||
<Link
|
||||
to="/signup"
|
||||
style={{
|
||||
borderRadius: "0.5rem",
|
||||
padding: "0.5rem 1rem",
|
||||
fontSize: "0.875rem",
|
||||
fontWeight: 600,
|
||||
backgroundColor: "#ffffff",
|
||||
color: "#5d4ab2",
|
||||
}}
|
||||
onClick={() => setMenuOpen(false)}
|
||||
>
|
||||
Try Free
|
||||
</Link>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue