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

update animation pages

Browse Source
This commit is contained in:
Aravind
2026-06-29 11:34:56 +05:30
parent a89cd2939a
commit 9449accea6
19 changed files with 468 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/components/home/HyperlocalFeatures.tsx
View File

@@ -1,6 +1,10 @@
"use client";
import Image from "next/image";
import Link from "next/link";
import { motion } from "framer-motion";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { fadeUp, slideInLeft, staggerContainer, viewport } from "@/lib/animations";
const FEATURES = [
{
@@ -33,11 +37,17 @@ export function HyperlocalFeatures() {
<div className="absolute right-[15%] top-1/2 translate-x-1/2 -translate-y-1/2 w-[55%] h-[55%] rounded-full bg-primary/[0.03] blur-[130px] pointer-events-none z-0" />
{/* Inner container */}
<div className="relative z-10 mx-auto w-full max-w-[2200px] px-2 md:px-4 lg:px-5 xl:px-6">
<div className="relative z-10 mx-auto w-full max-w-[2200px] px-2 md:px-4 lg:px-5 xl:px-6">
<div className="grid grid-cols-1 lg:grid-cols-[0.95fr_1.05fr] gap-8 lg:gap-10 items-center">
{/* Left Column: Visual Storytelling */}
<div className="w-full max-w-[880px] justify-self-center relative rounded-[2rem] border border-outline-variant/25 bg-[#F8F3FC] z-10 overflow-hidden aspect-[10/11] lg:h-[580px] shadow-[0_24px_80px_rgba(101,20,154,0.10)]">
<motion.div
className="w-full max-w-[880px] justify-self-center relative rounded-[2rem] border border-outline-variant/25 bg-[#F8F3FC] z-10 overflow-hidden aspect-[10/11] lg:h-[580px] shadow-[0_24px_80px_rgba(101,20,154,0.10)]"
variants={slideInLeft}
initial="hidden"
whileInView="visible"
viewport={viewport}
>
<div className="absolute inset-0 bg-[radial-gradient(circle_at_52%_42%,rgba(124,58,237,0.12),transparent_34%),linear-gradient(145deg,rgba(255,255,255,0.94),rgba(243,232,246,0.62))]" />
<div className="absolute inset-6 rounded-[1.5rem] overflow-hidden bg-white/55 ring-1 ring-white/80 shadow-[inset_0_1px_0_rgba(255,255,255,0.9)]">
<svg
@@ -135,32 +145,55 @@ export function HyperlocalFeatures() {
</div>
</div>
</div>
</motion.div>
{/* Right Column: Feature Panel directly on page background */}
<div className="w-full py-6 md:py-8 lg:py-10 pl-4 md:pl-8 lg:pl-12 xl:pl-44 relative z-10 text-[#16001D]">
<span className="text-xs text-primary uppercase tracking-widest font-black bg-primary/10 px-3.5 py-1.5 rounded-full border border-primary/20">
<motion.span
className="text-xs text-primary uppercase tracking-widest font-black bg-primary/10 px-3.5 py-1.5 rounded-full border border-primary/20"
variants={fadeUp}
initial="hidden"
whileInView="visible"
viewport={viewport}
>
Community & Trust
</span>
<h3 className="text-4xl md:text-5xl lg:text-[44px] font-display font-black text-brand-dark mt-4 mb-6 leading-tight tracking-tight">
</motion.span>
<motion.h3
className="text-4xl md:text-5xl lg:text-[44px] font-display font-black text-brand-dark mt-4 mb-6 leading-tight tracking-tight"
variants={fadeUp}
initial="hidden"
whileInView="visible"
viewport={viewport}
>
Built Around Your<br />
<span className="text-primary font-black">Neighbourhood</span>
</h3>
</motion.h3>
<p className="text-body-lg text-on-surface-variant mb-10 max-w-lg leading-relaxed">
<motion.p
className="text-body-lg text-on-surface-variant mb-10 max-w-lg leading-relaxed"
variants={fadeUp}
initial="hidden"
whileInView="visible"
viewport={viewport}
>
Nearle brings the convenience of an app to the stores you already know and trust, making it easy to support local shops.
</p>
</motion.p>
{/* Features List with vertical connector line */}
<div className="relative space-y-8">
<motion.div
className="relative space-y-8"
variants={staggerContainer}
initial="hidden"
whileInView="visible"
viewport={viewport}
>
{/* Vertical connector line */}
<div className="absolute left-6 top-6 bottom-6 w-0.5 bg-primary/20 -translate-x-1/2 z-0" />
{FEATURES.map((item) => (
<div key={item.title} className="flex gap-5 group relative z-10">
<motion.div key={item.title} variants={fadeUp} className="flex gap-5 group relative z-10">
{/* Icon circle */}
<div className="flex-shrink-0 w-12 h-12 rounded-full bg-primary text-white flex items-center justify-center shadow-md relative z-10 group-hover:scale-105 transition-transform duration-300">
<MaterialIcon
@@ -169,7 +202,7 @@ export function HyperlocalFeatures() {
size={22}
/>
</div>
<div>
<h4 className="text-lg md:text-xl font-black text-brand-dark group-hover:text-primary transition-colors">
{item.title}
@@ -178,15 +211,21 @@ export function HyperlocalFeatures() {
{item.desc}
</p>
</div>
</div>
</motion.div>
))}
</div>
</motion.div>
{/* Divider Line above CTA Area */}
<hr className="border-t border-[#EEE7F4] my-6 relative z-10" />
{/* Onboarding Call to Action */}
<div className="mt-2 flex flex-wrap gap-6 items-center relative z-10">
<motion.div
className="mt-2 flex flex-wrap gap-6 items-center relative z-10"
variants={fadeUp}
initial="hidden"
whileInView="visible"
viewport={viewport}
>
<Link
href="/#download"
className="bg-primary hover:bg-primary-container text-white font-black px-8 py-3.5 rounded-full text-sm md:text-base hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0 active:scale-95 transition-all duration-200"
@@ -204,7 +243,7 @@ export function HyperlocalFeatures() {
className="transition-transform group-hover:translate-x-1"
/>
</Link>
</div>
</motion.div>
</div>
</div>