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

mobile screen issue fixed

Browse Source
This commit is contained in:
Aravind
2026-06-29 17:51:25 +05:30
parent 114b49570b
commit a0d7809751
10 changed files with 39 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/brands/page.tsx
View File

@@ -180,7 +180,7 @@ export default function BrandsPage() {
Nearle connects FMCG brands, food companies, and local manufacturers with verified neighbourhood stores and their loyal customer communities.
</p>
<div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
<div className="hidden md:flex md:flex-row md:gap-3.5 mt-8">
<Link
href="/contact"
className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"

2
src/app/delivery-partners/page.tsx
View File

@@ -218,7 +218,7 @@ export default function DeliveryPartnersPage() {
Join the Nearle delivery network and earn by making short, local deliveries in your neighbourhood — on your own schedule, at your own pace.
</p>
<div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
<div className="hidden md:flex md:flex-row md:gap-3.5 mt-8">
<Link
href="/contact"
className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"

2
src/app/merchants/page.tsx
View File

@@ -191,7 +191,7 @@ export default function MerchantsPage() {
Your neighbourhood customers are already looking for you online. Get discovered, take orders, and grow your business — without leaving your store.
</p>
<div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
<div className="hidden md:flex md:flex-row md:gap-3.5 mt-8">
<Link
href="/contact"
className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"

12
src/components/businesses/BusinessFeaturesGrid.tsx
View File

@@ -507,24 +507,20 @@ export function BusinessFeaturesGrid() {
whileInView="visible"
viewport={viewport}
>
<div className="grid grid-cols-2" style={{ gap: 28 }}>
<div className="grid grid-cols-2 gap-3 sm:gap-[28px]">
{CARDS.map((card) => {
const { CardIllus } = card;
return (
<motion.div
key={card.title}
variants={scaleIn}
className={`relative flex flex-col overflow-hidden border border-[#6330D6]/10 shadow-[0_4px_28px_rgba(99,48,214,0.09)] ${card.bg}`}
style={{ borderRadius: 34, padding: 28, minHeight: 330 }}
className={`relative flex flex-col overflow-hidden border border-[#6330D6]/10 shadow-[0_4px_28px_rgba(99,48,214,0.09)] rounded-[34px] p-3.5 sm:p-[28px] min-h-[190px] sm:min-h-[330px] ${card.bg}`}
>
<div className={`w-9 h-9 rounded-full flex items-center justify-center shrink-0 ${card.iconBg}`}>
<MaterialIcon icon={card.iconName} size={18} />
</div>
<div
className="flex-1 flex items-center justify-center overflow-hidden"
style={{ margin: "8px 0" }}
>
<div className="w-full" style={{ height: 160 }}>
<div className="flex-1 flex items-center justify-center overflow-hidden my-1 sm:my-2">
<div className="w-full h-[90px] sm:h-[160px]">
<CardIllus />
</div>
</div>

2
src/components/heroes/AboutHero.tsx
View File

@@ -104,7 +104,7 @@ export function AboutHero() {
<motion.div
variants={ctaVariant}
className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto"
className="hidden md:flex md:flex-row md:gap-3.5 mt-8"
>
<a
href="#story-section"

2
src/components/heroes/BusinessHero.tsx
View File

@@ -77,7 +77,7 @@ export function BusinessHero() {
<motion.div
variants={ctaVariant}
className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto"
className="hidden md:flex md:flex-row md:gap-3.5 mt-8"
>
<Link
href="/contact"

2
src/components/heroes/PeopleHero.tsx
View File

@@ -71,7 +71,7 @@ export function PeopleHero() {
<motion.div
variants={ctaVariant}
className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto"
className="hidden md:flex md:flex-row md:gap-3.5 mt-8"
>
<a
href="#download-section"

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

@@ -114,10 +114,6 @@ export function Hero() {
</svg>
</div>
{/* 5. Three small X marks */}
<div className="absolute top-[8%] left-[48%] text-[#6D28D9]/25 font-bold text-xl pointer-events-none select-none z-0">✕</div>
<div className="hidden lg:block absolute top-[52%] left-[44%] text-[#6D28D9]/20 font-bold text-lg pointer-events-none select-none z-0">✕</div>
<div className="absolute bottom-[14%] right-[5%] text-[#6D28D9]/25 font-bold text-xl pointer-events-none select-none z-0">✕</div>
{/* 6. Large partial purple circle (bottom-right corner) */}
<motion.div
@@ -167,7 +163,7 @@ export function Hero() {
</motion.p>
{/* CTAs: primary scales in, secondary slides from left */}
<div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
<div className="hidden md:flex md:flex-row md:gap-3.5 mt-8">
<motion.div
variants={primaryCtaVariant}
whileHover={{ scale: 1.03, transition: { duration: 0.2, ease: EASE } }}
@@ -175,7 +171,7 @@ export function Hero() {
>
<Link
href="/people"
className="bg-[#6D28D9] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-colors duration-200 block"
className="bg-[#6D28D9] hover:bg-[#5225b8] text-white font-black px-5 sm:px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-colors duration-200 block"
>
Explore Stores
</Link>
@@ -187,7 +183,7 @@ export function Hero() {
>
<Link
href="/people#download-section"
className="border-2 border-[#6D28D9]/20 hover:border-[#6D28D9]/40 text-[#6D28D9] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-colors duration-200 hover:bg-[#6D28D9]/5 block"
className="border-2 border-[#6D28D9]/20 hover:border-[#6D28D9]/40 text-[#6D28D9] font-black px-5 sm:px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-colors duration-200 hover:bg-[#6D28D9]/5 block"
>
Get the App
</Link>

2
src/components/layout/HeroVisualCollage.tsx
View File

@@ -76,8 +76,6 @@ export function HeroVisualCollage({
</svg>
</div>
<div className="absolute top-12 left-6 text-[#6330D6]/15 font-display text-xl font-bold select-none pointer-events-none">✕</div>
<div className="absolute bottom-16 right-8 text-[#6330D6]/15 font-display text-xl font-bold select-none pointer-events-none">✕</div>
{/* LEFT IMAGE PANEL */}
{leftImage && (

35
src/components/ui/FeatureStatsRow.tsx
View File

@@ -18,32 +18,49 @@ type FeatureStatsRowProps = {
export function FeatureStatsRow({ items, className = "" }: FeatureStatsRowProps) {
return (
<motion.div
className={`w-full py-6 md:py-8 ${className}`}
className={`w-full py-5 md:py-8 ${className}`}
variants={staggerContainer}
initial="hidden"
whileInView="visible"
viewport={viewport}
>
<div className="grid grid-cols-2 lg:flex lg:flex-row items-center justify-between gap-y-6 gap-x-4 lg:gap-0">
<div className="grid grid-cols-2 lg:flex lg:flex-row lg:items-center lg:justify-between gap-3 lg:gap-0">
{items.map((item, index) => (
<motion.div
key={item.title}
variants={fadeUp}
className={`flex items-center gap-3.5 lg:flex-1 px-3 lg:px-8 text-left ${
index < items.length - 1
? "lg:border-r lg:border-[#6330D6]/10"
: ""
}`}
className={[
// ── Mobile card (< 640 px) ──────────────────────────────────
"flex flex-col gap-3",
"bg-white",
"border border-[#6330D6]/10",
"rounded-2xl",
"shadow-[0_2px_14px_rgba(99,48,214,0.07)]",
"p-4",
// ── Tablet strip (640 px – 1023 px) ────────────────────────
"sm:flex-row sm:items-center sm:gap-3.5",
"sm:bg-transparent",
"sm:border-0",
"sm:rounded-none",
"sm:shadow-none",
"sm:px-3 sm:py-2",
// ── Desktop strip (1024 px +) ───────────────────────────────
"lg:flex-1 lg:px-8 lg:py-0",
"text-left",
index < items.length - 1 ? "lg:border-r lg:border-[#6330D6]/10" : "",
]
.filter(Boolean)
.join(" ")}
>
<div className="w-9 h-9 rounded-full bg-[#6330D6]/10 text-[#6330D6] flex items-center justify-center shrink-0">
<MaterialIcon icon={item.icon} size={18} />
</div>
<div className="min-w-0">
<h4 className="text-sm md:text-base font-black text-[#16001D] leading-tight truncate">
<h4 className="text-sm md:text-base font-black text-[#16001D] leading-tight">
{item.title}
</h4>
{item.desc && (
<p className="text-[11px] md:text-xs text-[#5E5866] font-semibold mt-0.5 leading-tight truncate">
<p className="text-[11px] md:text-xs text-[#5E5866] font-semibold mt-0.5 leading-snug">
{item.desc}
</p>
)}