bender/9fa7b7bc-7667-4c5b-9c64-466ba69a224d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add src/app/product/page.tsx

Browse Source
This commit is contained in:
bender
2026-03-20 14:31:48 +00:00
parent 5f75fa8687
commit e479984bef
1 changed files with 179 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
src/app/product/page.tsx Normal file
View File

@@ -0,0 +1,179 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
import TextAbout from '@/components/sections/about/TextAbout';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { BookOpen, Brain, CheckCircle, Zap } from 'lucide-react';
export default function ProductPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-bubble"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="mediumLarge"
sizing="mediumLargeSizeMediumTitles"
background="fluid"
cardStyle="soft-shadow"
primaryButtonStyle="flat"
secondaryButtonStyle="layered"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Cybrain QS"
navItems={[
{ name: "Home", id: "/" },
{ name: "How It Works", id: "features" },
{ name: "Use Cases", id: "use-cases" },
{ name: "Testimonials", id: "testimonials" },
{ name: "FAQ", id: "faq" }
]}
button={{ text: "Request Demo", href: "#contact" }}
animateOnLoad={true}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardTestimonial
title="Cybrain QS: Your Quality Knowledge System"
description="Transform fragmented quality documentation into intelligent, searchable knowledge. Cybrain QS links SOPs, deviations, CAPAs, and audit findings into a unified memory system that powers faster, evidence-based decisions in regulated environments."
tag="Product Overview"
tagIcon={Brain}
tagAnimation="slide-up"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqSlSSbph46zzjSFyehxPHYM4t/a-modern-quality-management-system-dashb-1773318833408-817f7c8a.png?_wi=1"
imageAlt="Cybrain QS Product Interface"
mediaAnimation="slide-up"
testimonials={[
{
name: "Sarah Mitchell", handle: "QA Manager, Pharma Corp", testimonial: "From hours of searching to minutes of insight. Cybrain QS shows us exactly what our decisions are based on.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqSlSSbph46zzjSFyehxPHYM4t/professional-portrait-of-a-woman-in-her--1773318833704-554e6935.png?_wi=1", imageAlt: "Sarah Mitchell"
},
{
name: "James Rodriguez", handle: "Quality Director, MedDevice Inc", testimonial: "Regulatory audits used to be stressful. Now we have complete traceability showing the logic behind every decision.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqSlSSbph46zzjSFyehxPHYM4t/professional-portrait-of-a-man-in-his-50-1773318832638-1cee9840.png?_wi=1", imageAlt: "James Rodriguez"
},
{
name: "Emily Chen", handle: "Compliance Officer, BioTech Solutions", testimonial: "Our quality memory no longer depends on who's in the room. Every decision is preserved and accessible.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqSlSSbph46zzjSFyehxPHYM4t/professional-portrait-of-a-woman-in-her--1773318832826-f81a0121.png?_wi=1", imageAlt: "Emily Chen"
}
]}
testimonialRotationInterval={5000}
buttons={[
{ text: "Explore Knowledge Levels", href: "#knowledge-levels" },
{ text: "Request live demo", href: "#contact" }
]}
buttonAnimation="slide-up"
background={{ variant: "plain" }}
useInvertedBackground={false}
/>
</div>
<div id="about" data-section="about">
<TextAbout
tag="What is Cybrain QS?"
title="Cybrain QS is the first Quality Knowledge System purpose-built for regulated industries. It doesn't replace your QMS—it enhances it by transforming SOPs, deviations, CAPAs, and audit findings into searchable, context-aware institutional memory. QA teams get instant access to relevant precedents, guidance, and evidence without manual searching through fragmented systems."
useInvertedBackground={false}
buttons={[
{ text: "Learn how it works", href: "#knowledge-levels" }
]}
/>
</div>
<div id="knowledge-levels" data-section="knowledge-levels">
<FeatureCardThree
title="Four Levels of Knowledge"
description="Cybrain QS organizes quality information into four interconnected knowledge levels, each building on the previous one to create institutional memory."
tag="Knowledge Architecture"
animationType="slide-up"
gridVariant="four-items-2x2-equal-grid"
features={[
{
id: "01", title: "SOP Knowledge", description: "The foundation of your quality system. Structured procedures, work instructions, and operational guidelines that define how things should be done. Searchable and version-controlled.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqSlSSbph46zzjSFyehxPHYM4t/a-close-up-interface-showing-a-context-a-1773318833229-99935359.png?_wi=1", imageAlt: "SOP Knowledge Layer"
},
{
id: "02", title: "Experiential Knowledge", description: "Real-world deviations and how they were resolved. Every deviation becomes a learning point, capturing what actually happened versus what was planned, including root causes and corrective actions.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqSlSSbph46zzjSFyehxPHYM4t/an-integration-diagram-showing-cybrain-q-1773318833295-fa298989.png?_wi=1", imageAlt: "Experiential Knowledge Layer"
},
{
id: "03", title: "Audit Knowledge", description: "Regulatory findings, corrective and preventive actions (CAPAs), and audit outcomes. Links regulatory expectations to how your organization addressed them, creating traceability that auditors need.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqSlSSbph46zzjSFyehxPHYM4t/a-pharmaceutical-manufacturing-facility--1773318833529-dc871bb3.png?_wi=1", imageAlt: "Audit Knowledge Layer"
},
{
id: "04", title: "Decision-Making Knowledge", description: "The highest level. Shows what decisions were based on. When a QA professional evaluates a new deviation, they see similar past cases, relevant SOPs, audit history, and CAPA outcomes—everything needed to make an evidence-based decision.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqSlSSbph46zzjSFyehxPHYM4t/a-modern-quality-management-system-dashb-1773318833408-817f7c8a.png?_wi=2", imageAlt: "Decision-Making Knowledge Layer"
}
]}
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="decision-quote" data-section="decision-quote">
<TextAbout
tag="Core Value Proposition"
title="Cybrain QS shows you what your decisions are based on. Every evaluation links to SOPs, past precedents, audit outcomes, and regulatory context. No more searching. No more guessing. Just evidence-based quality decisions."
useInvertedBackground={false}
buttons={[
{ text: "See it in action", href: "#testimonials" },
{ text: "Request demo", href: "#contact" }
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen
title="QA Leaders Trust Cybrain QS"
description="Quality managers and compliance officers across regulated industries rely on Cybrain QS to make faster, more confident decisions backed by complete evidence."
tag="Customer Stories"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "1", name: "Sarah Mitchell", role: "QA Manager", company: "Pharma Corp", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqSlSSbph46zzjSFyehxPHYM4t/professional-portrait-of-a-woman-in-her--1773318833704-554e6935.png?_wi=2", imageAlt: "Sarah Mitchell, QA Manager at Pharma Corp"
},
{
id: "2", name: "James Rodriguez", role: "Quality Director", company: "MedDevice Inc", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqSlSSbph46zzjSFyehxPHYM4t/professional-portrait-of-a-man-in-his-50-1773318832638-1cee9840.png?_wi=2", imageAlt: "James Rodriguez, Quality Director at MedDevice Inc"
},
{
id: "3", name: "Emily Chen", role: "Compliance Officer", company: "BioTech Solutions", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqSlSSbph46zzjSFyehxPHYM4t/professional-portrait-of-a-woman-in-her--1773318832826-f81a0121.png?_wi=2", imageAlt: "Emily Chen, Compliance Officer at BioTech Solutions"
},
{
id: "4", name: "Michael Torres", role: "Quality Systems Manager", company: "RegulatedCo", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqSlSSbph46zzjSFyehxPHYM4t/professional-portrait-of-a-man-in-his-40-1773318832846-8d2f1a00.png", imageAlt: "Michael Torres, Quality Systems Manager at RegulatedCo"
}
]}
kpiItems={[
{ value: "80%", label: "Faster decision time" },
{ value: "100%", label: "Decision traceability" },
{ value: "50%", label: "Knowledge retention" }
]}
/>
</div>
<div id="cta" data-section="cta">
<TextAbout
title="Ready to see how Cybrain QS transforms your quality decisions?"
useInvertedBackground={false}
buttons={[
{ text: "Request live demo", href: "#contact" },
{ text: "Learn more", href: "https://example.com" }
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Cybrain QS"
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "Terms of Service", href: "#" }}
/>
</div>
</ThemeProvider>
);
}