update about section

This commit is contained in:
2026-06-30 18:19:05 +05:30
parent 61ab517a21
commit f3f74cf47c
8 changed files with 182 additions and 55 deletions

View File

@@ -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 ─── */}
<AnimatedSection>
<section className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 xl:px-20 2xl:px-24 text-center bg-[#FAF7FD] mb-2 md:mb-3 xl:mb-4">
<div className="max-w-4xl mx-auto">
<section className="relative overflow-hidden py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 xl:px-20 2xl:px-24 text-center bg-[#FAF7FD] mb-2 md:mb-3 xl:mb-4">
<FloatingDelivery />
<div className="max-w-4xl mx-auto relative z-10">
<span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1 rounded-full">
Don&apos;t miss the opportunity
</span>

View File

@@ -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 (
<PremiumPageShell>
@@ -248,20 +253,32 @@ export default function PeoplePage() {
<div className="flex flex-col gap-2 mt-8">
<div className="flex flex-wrap gap-4">
<div className="group h-14 w-44 rounded-xl border border-white/10 px-4 py-2 flex items-center gap-3 bg-white/[0.06] backdrop-blur-md text-white hover:bg-white/[0.12] transition-all duration-300 shadow-md">
<a
href={APP_STORE_URL}
target="_blank"
rel="noopener noreferrer"
aria-label="Download Nearle on the App Store"
className="group h-14 w-44 rounded-xl border border-white/10 px-4 py-2 flex items-center gap-3 bg-white/[0.06] backdrop-blur-md text-white hover:bg-white/[0.12] transition-all duration-300 shadow-md cursor-pointer active:scale-[0.98]"
>
<MaterialIcon icon="phone_iphone" size={24} className="text-brand-accent group-hover:scale-110 transition-transform" />
<div className="text-left leading-tight">
<div className="text-[9px] uppercase font-black text-brand-accent/70">Available on</div>
<div className="text-sm font-black text-white">App Store</div>
</div>
</div>
<div className="group h-14 w-44 rounded-xl border border-white/10 px-4 py-2 flex items-center gap-3 bg-white/[0.06] backdrop-blur-md text-white hover:bg-white/[0.12] transition-all duration-300 shadow-md">
</a>
<a
href={GOOGLE_PLAY_URL}
target="_blank"
rel="noopener noreferrer"
aria-label="Download Nearle on Google Play"
className="group h-14 w-44 rounded-xl border border-white/10 px-4 py-2 flex items-center gap-3 bg-white/[0.06] backdrop-blur-md text-white hover:bg-white/[0.12] transition-all duration-300 shadow-md cursor-pointer active:scale-[0.98]"
>
<MaterialIcon icon="play_arrow" size={24} className="text-brand-accent group-hover:scale-110 transition-transform" />
<div className="text-left leading-tight">
<div className="text-[9px] uppercase font-black text-brand-accent/70">Available on</div>
<div className="text-sm font-black text-white">Google Play</div>
</div>
</div>
</a>
</div>
</div>
</div>
@@ -450,20 +467,32 @@ export default function PeoplePage() {
</div>
<div className="flex flex-col sm:flex-row gap-3 mt-8 w-full max-w-[320px] justify-center">
<div className="h-12 w-full rounded-xl border border-white/10 px-4 py-2 flex items-center justify-center gap-3 bg-white/[0.06] text-white">
<a
href={APP_STORE_URL}
target="_blank"
rel="noopener noreferrer"
aria-label="Download Nearle on the App Store"
className="h-12 w-full rounded-xl border border-white/10 px-4 py-2 flex items-center justify-center gap-3 bg-white/[0.06] text-white hover:bg-white/[0.12] transition-all duration-300 cursor-pointer active:scale-[0.98]"
>
<MaterialIcon icon="phone_iphone" size={18} className="text-brand-accent" />
<div className="text-left leading-none">
<div className="text-[7.5px] uppercase font-black text-brand-accent/70">Available on</div>
<div className="text-xs font-black text-white">App Store</div>
</div>
</div>
<div className="h-12 w-full rounded-xl border border-white/10 px-4 py-2 flex items-center justify-center gap-3 bg-white/[0.06] text-white">
</a>
<a
href={GOOGLE_PLAY_URL}
target="_blank"
rel="noopener noreferrer"
aria-label="Download Nearle on Google Play"
className="h-12 w-full rounded-xl border border-white/10 px-4 py-2 flex items-center justify-center gap-3 bg-white/[0.06] text-white hover:bg-white/[0.12] transition-all duration-300 cursor-pointer active:scale-[0.98]"
>
<MaterialIcon icon="play_arrow" size={18} className="text-brand-accent" />
<div className="text-left leading-none">
<div className="text-[7.5px] uppercase font-black text-brand-accent/70">Available on</div>
<div className="text-xs font-black text-white">Google Play</div>
</div>
</div>
</a>
</div>
</div>
</section>