Files
ac2f0aac-e834-48a5-bde6-0d9…/src/app/about/page.tsx
2026-03-11 12:22:58 +00:00

223 lines
6.7 KiB
TypeScript

"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import {
Users,
Heart,
Zap,
Target,
MessageSquare,
Award,
} from "lucide-react";
const navItems = [
{ name: "Home", id: "/" },
{ name: "About", id: "/about" },
{ name: "Features", id: "#features" },
{ name: "Community", id: "#community" },
{ name: "Contact", id: "#contact" },
];
export default function AboutPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="medium"
sizing="mediumLargeSizeLargeTitles"
background="grid"
cardStyle="solid"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="layered"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Family Square"
navItems={navItems}
button={{
text: "Get Started",
href: "/auth/login",
}}
/>
</div>
<div id="about-mission" data-section="about-mission">
<FeatureBento
title="Our Mission: Connecting Families Across the World"
description="Family Square was founded on a simple belief: that families are stronger when connected. We're committed to creating tools that bring loved ones closer, no matter the distance."
tag="About Us"
features={[
{
title: "Family-First Design",
description:
"Every feature is built with families in mind, prioritizing ease of use for all ages.",
bentoComponent: "reveal-icon",
icon: Heart,
},
{
title: "Trust & Security",
description:
"Your family's privacy is paramount. We use industry-leading security measures.",
bentoComponent: "reveal-icon",
icon: Award,
},
{
title: "Innovation",
description:
"We constantly evolve our platform to better serve family needs.",
bentoComponent: "reveal-icon",
icon: Zap,
},
{
title: "Community Impact",
description:
"Our community of families inspires us daily to build better connections.",
bentoComponent: "reveal-icon",
icon: Users,
},
]}
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
carouselMode="buttons"
/>
</div>
<div id="about-values" data-section="about-values">
<MetricCardThree
title="Our Core Values"
description="These principles guide everything we do at Family Square."
tag="Values"
metrics={[
{
id: "1",
icon: Heart,
title: "Connection",
value: "Central",
},
{
id: "2",
icon: Award,
title: "Trust",
value: "Essential",
},
{
id: "3",
icon: Users,
title: "Inclusivity",
value: "Core",
},
{
id: "4",
icon: Zap,
title: "Innovation",
value: "Ongoing",
},
]}
textboxLayout="default"
animationType="scale-rotate"
useInvertedBackground={false}
/>
</div>
<div id="about-cta" data-section="about-cta">
<ContactCenter
tag="Join Our Community"
title="Start Your Family's Journey Today"
description="Experience the difference that modern family connection can make. Sign up for Family Square and discover a new way to strengthen family bonds."
tagIcon={Heart}
tagAnimation="slide-up"
background={{
variant: "radial-gradient",
}}
useInvertedBackground={false}
inputPlaceholder="Enter your family email"
buttonText="Get Started Free"
termsText="By signing up, you agree to our Terms of Service and Privacy Policy."
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/family-with-cute-kids-autumn-park_1157-22355.jpg?_wi=2"
imageAlt="Happy families celebrating together"
logoText="Family Square"
copyrightText="© 2025 Family Square. Bringing families closer together."
columns={[
{
title: "Product",
items: [
{
label: "Features",
href: "#features",
},
{
label: "Pricing",
href: "/pricing",
},
{
label: "Security",
href: "#",
},
{
label: "Status",
href: "#",
},
],
},
{
title: "Company",
items: [
{
label: "About",
href: "/about",
},
{
label: "Blog",
href: "/blog",
},
{
label: "Careers",
href: "#",
},
{
label: "Contact",
href: "#contact",
},
],
},
{
title: "Legal",
items: [
{
label: "Privacy Policy",
href: "#",
},
{
label: "Terms of Service",
href: "#",
},
{
label: "Cookie Policy",
href: "#",
},
{
label: "GDPR",
href: "#",
},
],
},
]}
/>
</div>
</ThemeProvider>
);
}