Files
cc885b7a-08bd-427a-a51a-3bb…/src/app/page.tsx
2026-05-08 23:05:36 +00:00

257 lines
11 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import TextAbout from '@/components/sections/about/TextAbout';
import { Box, Globe, Settings, Shield } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="medium"
sizing="largeSmallSizeMediumTitles"
background="floatingGradient"
cardStyle="gradient-radial"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="glass"
headingFontWeight="semibold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{
name: "Platform", id: "#about"},
{
name: "Governance", id: "#governance"},
{
name: "Regulatory", id: "#regulatory"},
{
name: "Markets", id: "#markets"},
]}
brandName="Axiscure"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardTestimonial
useInvertedBackground={true}
background={{
variant: "radial-gradient"}}
title="Convert Precision Manufacturing Into Regulated Market Readiness"
description="Axiscure aligns governance, regulatory systems, ERP-backed operations, and international market activation into a seamless ecosystem."
testimonials={[
{
name: "Global Compliance Lead", handle: "@Axiscure", testimonial: "The gold standard for surgical manufacturing governance.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fpzh5o&_wi=1", imageAlt: "futuristic glass chamber medical"},
{
name: "Medical Device OEM", handle: "@Axiscure", testimonial: "Unparalleled speed to market for UAE and EU regions.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=udsvow", imageAlt: "futuristic glass chamber medical"},
{
name: "Regulatory Architect", handle: "@Axiscure", testimonial: "Systemized approach that removes operational bottlenecks.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=w3kvpe", imageAlt: "futuristic glass chamber medical"},
{
name: "Surgical Manufacturing Head", handle: "@Axiscure", testimonial: "Precise, reliable, and strictly compliant.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vioiz9", imageAlt: "futuristic glass chamber medical"},
{
name: "Market Expansion Partner", handle: "@Axiscure", testimonial: "The infrastructure we needed for global scale.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=5zby4k", imageAlt: "futuristic glass chamber medical"},
]}
buttons={[
{
text: "Get Access", href: "#contact"},
{
text: "See Compliance Features", href: "#about"},
]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fpzh5o&_wi=2"
imageAlt="Axiscure architectural compliance chamber"
avatars={[
{
src: "asset://hero-avatar-1", alt: "User 1"},
{
src: "asset://hero-avatar-2", alt: "User 2"},
{
src: "asset://hero-avatar-3", alt: "User 3"},
{
src: "asset://hero-avatar-4", alt: "User 4"},
{
src: "asset://hero-avatar-5", alt: "User 5"},
]}
avatarText="Trusted by 500+ leaders"
marqueeItems={[
{
type: "text", text: "ISO 13485"},
{
type: "text", text: "EU MDR"},
{
type: "text", text: "SFDA Certified"},
{
type: "text", text: "MOHAP Validated"},
{
type: "text", text: "FDA Quality"},
]}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardThree
animationType="depth-3d"
textboxLayout="split"
useInvertedBackground={false}
metrics={[
{
id: "1", icon: Shield,
title: "Governance Volumes", value: "5"},
{
id: "2", icon: Settings,
title: "Operational Stages", value: "18"},
{
id: "3", icon: Globe,
title: "Target Regions", value: "4"},
{
id: "4", icon: Box,
title: "Instrument Families", value: "12"},
]}
title="Institutional Metrics"
description="Our framework leverages these 18 specialized operational stages and 4 key regulatory regions to accelerate your speed-to-market and ensure long-term success."
/>
</div>
<div id="about" data-section="about">
<TextAbout
useInvertedBackground={true}
title="World of Regulated Medical Capability"
buttons={[
{
text: "View Architecture", href: "#governance"},
]}
/>
</div>
<div id="governance" data-section="governance">
<FeatureCardOne
animationType="depth-3d"
textboxLayout="split"
gridVariant="one-large-left-three-stacked-right"
useInvertedBackground={false}
features={[
{
title: "Board Governance", description: "High-level oversight and strategic decision matrix.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8hxprr", imageAlt: "Governance Architecture"},
{
title: "ERP System-of-Record", description: "Single point of truth for manufacturing and compliance.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rqo2im", imageAlt: "ERP Control"},
{
title: "Approval Matrix Logic", description: "Granular control over revision paths.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4htw12", imageAlt: "Matrix Logic"},
{
title: "Controlled Revisions", description: "Audit-ready document management.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qicg0s", imageAlt: "Revisions"},
]}
title="Authority Architecture"
description="Enterprise-grade document control and approval logic."
/>
</div>
<div id="regulatory" data-section="regulatory">
<FeatureCardOne
animationType="depth-3d"
textboxLayout="split"
gridVariant="bento-grid"
useInvertedBackground={true}
features={[
{
title: "EU MDR Protocols", description: "Certified market entry systems for Europe.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=n9krnl", imageAlt: "EU MDR"},
{
title: "SFDA/MOHAP Compliance", description: "Regulatory readiness for the Middle East.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=stv5fw", imageAlt: "MENA Regs"},
{
title: "Technical Documentation", description: "Standardized file assembly for fast-track approvals.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gv0121", imageAlt: "Documentation"},
]}
title="Technical Documentation and Compliance"
description="Seamless market access pathways via rigorous technical protocols."
/>
</div>
<div id="markets" data-section="markets">
<FeatureCardOne
animationType="depth-3d"
textboxLayout="split"
gridVariant="asymmetric-60-wide-40-narrow"
useInvertedBackground={false}
features={[
{
title: "Distributor Network", description: "Validated nodes for regional distribution.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=azmvkx", imageAlt: "Distributors"},
{
title: "Strategic Partners", description: "Institutional-level alliances for market expansion.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=17870q", imageAlt: "Partners"},
{
title: "Supply Chain Integrity", description: "Traceable pathways from OEM to hospital.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qs5fta", imageAlt: "Logistics"},
]}
title="Global Expansion Ecosystem"
description="Operational bridging for international medical supply chains."
/>
</div>
<div id="operational" data-section="operational">
<TextAbout
useInvertedBackground={true}
title="Control Over Operations and Market Execution"
buttons={[
{
text: "Explore Flow", href: "#contact"},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={false}
background={{
variant: "gradient-bars"}}
text="Let's Start Work"
buttons={[
{
text: "Contact Institutional Lead", href: "mailto:info@axiscure.com"},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="AXISCURE"
columns={[
{
title: "Platform", items: [
{
label: "About", href: "#about"},
{
label: "Governance", href: "#governance"},
],
},
{
title: "Regulatory", items: [
{
label: "Compliance", href: "#regulatory"},
{
label: "Markets", href: "#markets"},
],
},
{
title: "Company", items: [
{
label: "Operations", href: "#operational"},
{
label: "Contact", href: "#contact"},
],
},
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}