Merge version_1 into main #2
318
src/app/page.tsx
318
src/app/page.tsx
@@ -26,240 +26,102 @@ export default function LandingPage() {
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Viewer",
|
||||
id: "anatomy-viewer",
|
||||
},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "faq",
|
||||
},
|
||||
]}
|
||||
brandName="Anatomy3D"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Viewer", id: "anatomy-viewer" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
]}
|
||||
brandName="Anatomy3D"
|
||||
button={{ text: "Get Started", href: "#product" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Interactive 3D Human Anatomy"
|
||||
description="Explore the complexity of the human form with our interactive, web-based 3D model. Toggle layers, isolate systems, and gain deeper insights through high-fidelity visualization."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Dr. Sarah Chen",
|
||||
handle: "@med_educator",
|
||||
testimonial: "The interactive layers make teaching complex systems effortless and highly engaging for my students.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-art-brain-motion-design_183364-118234.jpg?_wi=1",
|
||||
imageAlt: "dark medical technology background grid",
|
||||
},
|
||||
{
|
||||
name: "Marcus Thorne",
|
||||
handle: "@bio_student",
|
||||
testimonial: "This model helped me visualize the nervous system in ways textbooks simply couldn't. Incredible.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-art-brain-motion-design_183364-118234.jpg?_wi=2",
|
||||
imageAlt: "dark medical technology background grid",
|
||||
},
|
||||
{
|
||||
name: "Dr. Elena Rossi",
|
||||
handle: "@anatomy_expert",
|
||||
testimonial: "Unparalleled clarity in a browser. A massive leap forward for digital anatomy education.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-art-brain-motion-design_183364-118234.jpg?_wi=3",
|
||||
imageAlt: "dark medical technology background grid",
|
||||
},
|
||||
{
|
||||
name: "David Miller",
|
||||
handle: "@med_tech",
|
||||
testimonial: "Excellent interface and smooth performance. The layer toggle system is perfectly intuitive.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-art-brain-motion-design_183364-118234.jpg?_wi=4",
|
||||
imageAlt: "dark medical technology background grid",
|
||||
},
|
||||
{
|
||||
name: "Linda Wu",
|
||||
handle: "@biology_pro",
|
||||
testimonial: "Fast, accurate, and easy to use. The best web anatomy tool I've come across so far.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-art-brain-motion-design_183364-118234.jpg?_wi=5",
|
||||
imageAlt: "dark medical technology background grid",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Exploration",
|
||||
href: "#anatomy-viewer",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/3d-abstract-art-brain-motion-design_183364-118234.jpg?_wi=6"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/3d-abstract-art-brain-motion-design_183364-118234.jpg",
|
||||
alt: "User 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/3d-abstract-art-brain-motion-design_183364-118234.jpg",
|
||||
alt: "User 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/3d-abstract-art-brain-motion-design_183364-118234.jpg",
|
||||
alt: "User 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/3d-abstract-art-brain-motion-design_183364-118234.jpg",
|
||||
alt: "User 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/3d-abstract-art-brain-motion-design_183364-118234.jpg",
|
||||
alt: "User 5",
|
||||
},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Anatomically Precise",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Browser-Optimized",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Layer Isolation",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "High-Fidelity 3D",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Interactive Labs",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Interactive 3D Human Anatomy"
|
||||
description="Explore the complexity of the human form with our interactive, web-based 3D model. Toggle layers, isolate systems, and gain deeper insights through high-fidelity visualization."
|
||||
testimonials={[
|
||||
{ name: "Dr. Sarah Chen", handle: "@med_educator", testimonial: "The interactive layers make teaching complex systems effortless and highly engaging for my students.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-art-brain-motion-design_183364-118234.jpg", imageAlt: "dark medical technology background grid" },
|
||||
{ name: "Marcus Thorne", handle: "@bio_student", testimonial: "This model helped me visualize the nervous system in ways textbooks simply couldn't. Incredible.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-art-brain-motion-design_183364-118234.jpg", imageAlt: "dark medical technology background grid" },
|
||||
{ name: "Dr. Elena Rossi", handle: "@anatomy_expert", testimonial: "Unparalleled clarity in a browser. A massive leap forward for digital anatomy education.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-art-brain-motion-design_183364-118234.jpg", imageAlt: "dark medical technology background grid" },
|
||||
{ name: "David Miller", handle: "@med_tech", testimonial: "Excellent interface and smooth performance. The layer toggle system is perfectly intuitive.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-art-brain-motion-design_183364-118234.jpg", imageAlt: "dark medical technology background grid" },
|
||||
{ name: "Linda Wu", handle: "@biology_pro", testimonial: "Fast, accurate, and easy to use. The best web anatomy tool I've come across so far.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-art-brain-motion-design_183364-118234.jpg", imageAlt: "dark medical technology background grid" },
|
||||
]}
|
||||
buttons={[{ text: "Start Exploration", href: "#anatomy-viewer" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/3d-abstract-art-brain-motion-design_183364-118234.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[{ src: "http://img.b2bpic.net/free-photo/3d-abstract-art-brain-motion-design_183364-118234.jpg", alt: "User 1" }, { src: "http://img.b2bpic.net/free-photo/3d-abstract-art-brain-motion-design_183364-118234.jpg", alt: "User 2" }, { src: "http://img.b2bpic.net/free-photo/3d-abstract-art-brain-motion-design_183364-118234.jpg", alt: "User 3" }, { src: "http://img.b2bpic.net/free-photo/3d-abstract-art-brain-motion-design_183364-118234.jpg", alt: "User 4" }, { src: "http://img.b2bpic.net/free-photo/3d-abstract-art-brain-motion-design_183364-118234.jpg", alt: "User 5" }]}
|
||||
marqueeItems={[{ type: "text", text: "Anatomically Precise" }, { type: "text", text: "Browser-Optimized" }, { type: "text", text: "Layer Isolation" }, { type: "text", text: "High-Fidelity 3D" }, { type: "text", text: "Interactive Labs" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="anatomy-viewer" data-section="anatomy-viewer">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={true}
|
||||
tag="3D Interactive Lab"
|
||||
title="Anatomical System Explorer"
|
||||
description="The viewer enables real-time interaction with the human model. Rotate, zoom, and pan using standard mouse controls. Toggle visibility for Bones, Muscles, and Nerves to study the body as distinct, color-coded systems."
|
||||
subdescription="Click any model component to reveal clinical names and structural details in the real-time info panel."
|
||||
icon={Box}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/3d-abstract-art-brain-motion-design_183364-118234.jpg?_wi=7"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="anatomy-viewer" data-section="anatomy-viewer">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={true}
|
||||
tag="3D Interactive Lab"
|
||||
title="Anatomical System Explorer"
|
||||
description="The viewer enables real-time interaction with the human model. Rotate, zoom, and pan using standard mouse controls. Toggle visibility for Bones, Muscles, and Nerves to study the body as distinct, color-coded systems."
|
||||
subdescription="Click any model component to reveal clinical names and structural details in the real-time info panel."
|
||||
icon={Box}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/3d-abstract-art-brain-motion-design_183364-118234.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "How do I toggle model layers?",
|
||||
content: "Simply use the buttons located in the bottom control panel to show or hide the bones, muscles, and nerves.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Is the model anatomically accurate?",
|
||||
content: "The model represents standard human structure with high-level visual approximations optimized for interactive web performance.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Can I pan and zoom the view?",
|
||||
content: "Yes, standard OrbitControls are enabled. Click and drag to rotate, scroll to zoom, and right-click to pan.",
|
||||
},
|
||||
]}
|
||||
sideTitle="Questions About the Anatomy Viewer"
|
||||
sideDescription="Find answers to frequently asked technical and functional questions regarding our 3D anatomy visualization tools."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "1", title: "How do I toggle model layers?", content: "Simply use the buttons located in the bottom control panel to show or hide the bones, muscles, and nerves." },
|
||||
{ id: "2", title: "Is the model anatomically accurate?", content: "The model represents standard human structure with high-level visual approximations optimized for interactive web performance." },
|
||||
{ id: "3", title: "Can I pan and zoom the view?", content: "Yes, standard OrbitControls are enabled. Click and drag to rotate, scroll to zoom, and right-click to pan." },
|
||||
]}
|
||||
sideTitle="Questions About the Anatomy Viewer"
|
||||
sideDescription="Find answers to frequently asked technical and functional questions regarding our 3D anatomy visualization tools."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metric" data-section="metric">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Educational Impact"
|
||||
description="Tracking progress and engagement across our student base."
|
||||
tag="Performance"
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "95%",
|
||||
title: "Accuracy Rating",
|
||||
description: "Validated by medical professionals.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-art-brain-motion-design_183364-118234.jpg?_wi=8",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "10k+",
|
||||
title: "Active Users",
|
||||
description: "Medical students using our tool daily.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-art-brain-motion-design_183364-118234.jpg?_wi=9",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="metric" data-section="metric">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Educational Impact"
|
||||
description="Tracking progress and engagement across our student base."
|
||||
tag="Performance"
|
||||
metrics={[
|
||||
{ id: "m1", value: "95%", title: "Accuracy Rating", description: "Validated by medical professionals.", imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-art-brain-motion-design_183364-118234.jpg" },
|
||||
{ id: "m2", value: "10k+", title: "Active Users", description: "Medical students using our tool daily.", imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-art-brain-motion-design_183364-118234.jpg" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="product" data-section="product">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
<div id="product" data-section="product">
|
||||
<ProductCardThree
|
||||
title="Anatomy Tools Collection"
|
||||
description="Explore our range of professional-grade anatomy visualization software solutions."
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Resources",
|
||||
items: [
|
||||
{
|
||||
label: "Viewer Documentation",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Model API",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Anatomy3D"
|
||||
copyrightText="© 2025 Anatomy3D Education Tools"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{ title: "Resources", items: [{ label: "Viewer Documentation", href: "#" }, { label: "Model API", href: "#" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
|
||||
]}
|
||||
logoText="Anatomy3D"
|
||||
copyrightText="© 2025 Anatomy3D Education Tools"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user