diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx index 5f72ca7..b8ec28c 100644 --- a/src/app/about/page.tsx +++ b/src/app/about/page.tsx @@ -6,6 +6,7 @@ import { PremiumPageShell } from "@/components/layout/PremiumPageShell"; import { AboutHero } from "@/components/heroes/AboutHero"; import { AnimatedSection } from "@/components/motion/AnimatedSection"; import { AnimatedGrid, AnimatedCard } from "@/components/motion/AnimatedGrid"; +import { FloatingDelivery } from "@/components/about/FloatingDelivery"; import type { Metadata } from "next"; export const metadata: Metadata = { @@ -156,8 +157,9 @@ export default function AboutPage() { {/* ─── Brand Building Banner ─── */} -
-
+
+ +
Don't miss the opportunity diff --git a/src/app/people/page.tsx b/src/app/people/page.tsx index 3ae0e49..95e9330 100644 --- a/src/app/people/page.tsx +++ b/src/app/people/page.tsx @@ -6,6 +6,7 @@ import { PremiumPageShell } from "@/components/layout/PremiumPageShell"; import { PeopleHero } from "@/components/heroes/PeopleHero"; import { AnimatedSection } from "@/components/motion/AnimatedSection"; import { AnimatedGrid, AnimatedCard } from "@/components/motion/AnimatedGrid"; +import { siteContent } from "@/config/site-content"; import type { Metadata } from "next"; export const metadata: Metadata = { @@ -138,6 +139,10 @@ const APP_BENEFITS = [ } ]; +// TODO: Replace fallback hrefs once the app is confirmed live on both stores. +const APP_STORE_URL = siteContent.app.iosUrl || "about:blank#todo-app-store-url"; +const GOOGLE_PLAY_URL = siteContent.app.androidUrl || "about:blank#todo-google-play-url"; + export default function PeoplePage() { return ( @@ -248,20 +253,32 @@ export default function PeoplePage() {
@@ -450,20 +467,32 @@ export default function PeoplePage() {
-
+
Available on
App Store
-
-
+ +
Available on
Google Play
-
+
diff --git a/src/components/about/FloatingDelivery.tsx b/src/components/about/FloatingDelivery.tsx new file mode 100644 index 0000000..f619f31 --- /dev/null +++ b/src/components/about/FloatingDelivery.tsx @@ -0,0 +1,25 @@ +"use client"; + +import Image from "next/image"; +import { motion, useReducedMotion } from "framer-motion"; + +export function FloatingDelivery() { + const shouldReduce = useReducedMotion(); + + return ( + + + + ); +} diff --git a/src/components/heroes/AboutHero.tsx b/src/components/heroes/AboutHero.tsx index 1d7cae1..057a6af 100644 --- a/src/components/heroes/AboutHero.tsx +++ b/src/components/heroes/AboutHero.tsx @@ -1,12 +1,11 @@ "use client"; import Image from "next/image"; +import Link from "next/link"; import { motion } from "framer-motion"; +import { MaterialIcon } from "@/components/ui/MaterialIcon"; import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow"; -import { - fadeInSlow, - staggerSlow, -} from "@/lib/animations"; +import { fadeUp, fadeUpStrong, staggerContainer } from "@/lib/animations"; const HERO_STATS = [ { title: "2km Coverage", icon: "explore", desc: "Hyperlocal radius" }, @@ -15,28 +14,31 @@ const HERO_STATS = [ { title: "Coimbatore & Beyond", icon: "location_city", desc: "Growing neighbourhood reach" }, ]; -const badgeVariant = fadeInSlow; -const titleVariant = { - hidden: { opacity: 0, x: -30 }, - visible: { - opacity: 1, - x: 0, - transition: { duration: 0.7, ease: [0.22, 1, 0.36, 1] as [number, number, number, number] }, - }, +const EASE = [0.22, 1, 0.36, 1] as [number, number, number, number]; + +const badgeVariant = { + hidden: { opacity: 0, y: 10, scale: 0.95 }, + visible: { opacity: 1, y: 0, scale: 1, transition: { duration: 0.38, ease: EASE } }, }; + +const titleVariant = { + hidden: { opacity: 0, y: 28 }, + visible: { opacity: 1, y: 0, transition: { duration: 0.65, ease: EASE } }, +}; + const descVariant = { - hidden: { opacity: 0, y: 20 }, - visible: { - opacity: 1, - y: 0, - transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] as [number, number, number, number] }, - }, + hidden: { opacity: 0, y: 18 }, + visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: EASE } }, }; export function AboutHero() { return (
+ + {/* ─── Hero Banner ─── */}
+ + {/* Background image — scooter anchored to the right */} + + {/* Gradient overlay — dark-purple toned to preserve the purple scene and protect white text */} +
+ + {/* Content */}
+ {/* Badge */} About Nearle + {/* Heading */} Built for Every
- Neighbourhood. + Neighbourhood. + {/* Description */} Nearle is India's first hyper-local managed “Neighbourhood living platform” which brings all the amenities and requirements of residents to their fingertips. + + {/* CTA Buttons */} + + + Partner with Nearle + + + + Explore Nearle + + +
+ {/* ─── Stats Row ─── */}
+
); } diff --git a/src/components/home/BusinessSection.tsx b/src/components/home/BusinessSection.tsx index 2a1db85..7b136e0 100644 --- a/src/components/home/BusinessSection.tsx +++ b/src/components/home/BusinessSection.tsx @@ -162,7 +162,8 @@ export function BusinessSection() {
@@ -244,7 +245,7 @@ export function BusinessSection() {
{b.title}
-
{b.desc}
+
{b.desc}
))} diff --git a/src/components/home/Hero.tsx b/src/components/home/Hero.tsx index 8611dfd..88ef33e 100644 --- a/src/components/home/Hero.tsx +++ b/src/components/home/Hero.tsx @@ -2,7 +2,7 @@ import { Fragment } from "react"; import Image from "next/image"; -import { motion } from "framer-motion"; +import { motion, useReducedMotion } from "framer-motion"; import { MaterialIcon } from "@/components/ui/MaterialIcon"; import { viewport } from "@/lib/animations"; @@ -53,18 +53,27 @@ const statItem = { }; export function Hero() { + const shouldReduce = useReducedMotion(); + return (
- + + +
diff --git a/src/components/home/HowItWorks.tsx b/src/components/home/HowItWorks.tsx index 8c2aafe..f148da7 100644 --- a/src/components/home/HowItWorks.tsx +++ b/src/components/home/HowItWorks.tsx @@ -328,7 +328,8 @@ export function HowItWorks() { {step.num} diff --git a/src/components/home/StoreQRSection.tsx b/src/components/home/StoreQRSection.tsx index 7d1777f..a02fd78 100644 --- a/src/components/home/StoreQRSection.tsx +++ b/src/components/home/StoreQRSection.tsx @@ -3,6 +3,7 @@ import Image from "next/image"; import { motion } from "framer-motion"; import { MaterialIcon } from "@/components/ui/MaterialIcon"; +import { siteContent } from "@/config/site-content"; import { fadeUp, scaleIn, slideInRight, staggerContainer, viewport } from "@/lib/animations"; const FLOW_STEPS = [ @@ -11,6 +12,10 @@ const FLOW_STEPS = [ { label: "Order Anytime", icon: "shopping_bag" }, ]; +// TODO: Replace fallback hrefs once the app is confirmed live on both stores. +const APP_STORE_URL = siteContent.app.iosUrl || "about:blank#todo-app-store-url"; +const GOOGLE_PLAY_URL = siteContent.app.androidUrl || "about:blank#todo-google-play-url"; + export function StoreQRSection() { return (
@@ -71,9 +76,14 @@ export function StoreQRSection() { ))}
- {/* TODO: Replace with real app store URLs once app is confirmed live (siteContent.app.iosUrl / androidUrl) */} -
+ -
-
+ @@ -238,9 +254,14 @@ export function StoreQRSection() { /> - {/* 5. App store buttons — TODO: replace with real URLs once app is live */}
-
+ @@ -252,9 +273,15 @@ export function StoreQRSection() { Available on
- + -
+ @@ -266,7 +293,7 @@ export function StoreQRSection() { Available on
- +