Nearle/nearle_web_nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

arrenge the home page order

Browse Source
This commit is contained in:
Aravind
2026-07-24 15:28:46 +05:30
parent a4328a791a
commit 4a0adea793
37 changed files with 2532 additions and 1564 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/components/home/Hero.tsx
View File

@@ -2,8 +2,10 @@
import { Fragment, useRef, type MouseEvent } from "react";
import Image from "next/image";
import Link from "next/link";
import { motion, useReducedMotion, useMotionValue, useSpring, useTransform } from "framer-motion";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { MagneticButton } from "@/components/ui/MagneticButton";
import { HeroLogo } from "@/components/heroes/HeroLogo";
import { viewport } from "@/lib/animations";
@@ -26,7 +28,7 @@ const badgeVariant = {
const lineStagger = {
hidden: {},
visible: { transition: { staggerChildren: 0.15, delayChildren: 1.05 } },
visible: { transition: { staggerChildren: 0.13, delayChildren: 1.0 } },
};
const lineReveal = {
@@ -36,7 +38,12 @@ const lineReveal = {
const descVariant = {
hidden: { opacity: 0, y: 30 },
visible: { opacity: 1, y: 0, transition: { duration: 0.6, delay: 1.25, ease: EASE } },
visible: { opacity: 1, y: 0, transition: { duration: 0.6, delay: 1.4, ease: EASE } },
};
const ctaVariant = {
hidden: { opacity: 0, y: 22 },
visible: { opacity: 1, y: 0, transition: { duration: 0.55, delay: 1.6, ease: EASE } },
};
const statStagger = {
@@ -106,49 +113,88 @@ export function Hero() {
transition={{ duration: 1.2, ease: "easeOut" }}
/>
<div className="page-container relative z-10 flex min-h-[560px] items-center justify-center px-6 pt-20 pb-10 sm:px-8 sm:pt-24 md:min-h-[85vh] md:py-16 lg:py-16">
<div className="page-container relative z-10 flex min-h-[560px] items-center justify-center px-6 pt-20 pb-10 sm:px-8 sm:pt-24 md:min-h-[85vh] md:py-6 lg:py-8">
<div className="relative z-20 flex w-full max-w-[860px] flex-col items-center text-center px-6 py-8 md:px-14 md:py-6 lg:py-8">
<HeroLogo />
{/* `compact` logo spacing: this hero now carries CTAs and the evolution
strip inside it, the same reason BrandsHero uses it. */}
<div className="relative z-20 flex w-full max-w-[860px] flex-col items-center text-center px-6 py-6 md:px-14 md:py-2 lg:py-3">
<HeroLogo spacing="compact" />
{/* Badge */}
<motion.span
variants={badgeVariant}
initial="hidden"
animate="visible"
className="inline-flex items-center gap-1.5 px-4 py-1.5 rounded-full text-xs font-bold tracking-widest bg-white text-[#6D28D9] shadow-md uppercase mb-6 w-fit"
className="inline-flex items-center gap-1.5 px-4 py-1.5 rounded-full text-xs font-bold tracking-widest bg-white text-[#6D28D9] shadow-md uppercase mb-5 w-fit"
>
Welcome to Nearle
</motion.span>
{/* H1: line-by-line reveal */}
{/* H1: line-by-line reveal. Two lines, with the closing word
highlighted in the Nearle purple. */}
<motion.h1
variants={lineStagger}
initial="hidden"
animate="visible"
className="font-display text-[34px] sm:text-5xl lg:text-[68px] xl:text-[76px] font-extrabold text-white tracking-[-0.05em] [text-shadow:0_4px_32px_rgba(0,0,0,0.5)]"
className="font-display font-extrabold text-white tracking-[-0.045em] [text-shadow:0_4px_32px_rgba(0,0,0,0.5)]"
>
<div className="overflow-hidden pb-1">
<motion.div variants={lineReveal} className="leading-[0.95]">
<span className="block overflow-hidden pb-1">
<motion.span
variants={lineReveal}
className="block text-[30px] leading-[1.06] text-balance sm:text-[40px] lg:text-[50px] xl:text-[56px]"
>
Everything Local.
</motion.div>
</div>
<div className="overflow-hidden pb-1">
<motion.div variants={lineReveal} className="leading-[0.95]">
</motion.span>
</span>
<span className="block overflow-hidden pb-1">
<motion.span
variants={lineReveal}
className="block text-[30px] leading-[1.06] text-balance sm:text-[40px] lg:text-[50px] xl:text-[56px]"
>
Everything <span className="text-[#A855F7]">Near.</span>
</motion.div>
</div>
</motion.span>
</span>
</motion.h1>
{/* Description */}
<motion.p
<motion.div
variants={descVariant}
initial="hidden"
animate="visible"
className="max-w-[520px] text-lg md:text-xl text-white/95 leading-[1.6] font-medium mt-6 [text-shadow:0_2px_16px_rgba(0,0,0,0.6)]"
className="mt-5 max-w-[700px] [text-shadow:0_2px_16px_rgba(0,0,0,0.6)]"
>
Discover verified local stores, exclusive offers, fast delivery, and a better way to shop within your neighbourhood.
</motion.p>
<p className="text-base md:text-lg text-white/90 leading-[1.6] font-medium">
Discover verified local stores, exclusive offers, fast delivery, and a
better way to shop within your neighbourhood.
</p>
</motion.div>
{/* CTAs */}
<motion.div
variants={ctaVariant}
initial="hidden"
animate="visible"
className="mt-7 flex flex-wrap items-center justify-center gap-3.5"
>
<MagneticButton>
<Link
href="#ai-commerce"
className="flex items-center gap-2 rounded-xl bg-[#6330D6] px-7 py-3.5 text-sm font-black text-white shadow-lg transition-all duration-200 hover:bg-[#5225b8] hover:shadow-xl active:scale-95 sm:px-8"
>
<MaterialIcon icon="auto_awesome" size={18} />
<span>Explore AI Commerce</span>
</Link>
</MagneticButton>
<MagneticButton>
<Link
href="#nearle-in-action"
className="flex items-center gap-2 rounded-xl border border-white/25 bg-white/10 px-7 py-3.5 text-sm font-black text-white backdrop-blur-md transition-all duration-200 hover:bg-white/20 active:scale-95 sm:px-8"
>
<MaterialIcon icon="play_circle" size={18} />
<span>See How Nearle Works</span>
</Link>
</MagneticButton>
</motion.div>
</div>
</div>