258 lines
14 KiB
TypeScript
258 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
|
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
|
import { Accessibility, Zap, Heart, Eye, TrendingUp, Star } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="mediumSmall"
|
|
sizing="largeSmall"
|
|
background="circleGradient"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="bold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="AccessWeb"
|
|
navItems={[
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Settings", id: "settings" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Impact", id: "impact" },
|
|
{ name: "Get Started", id: "contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardScroll
|
|
title="Accessible Design for Every User"
|
|
description="Experience how inclusive design transforms digital accessibility. AccessWeb demonstrates human-centered interaction principles that make technology usable for everyone, regardless of ability."
|
|
tag="Inclusive Innovation"
|
|
tagIcon={Accessibility}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "canvas-reveal" }}
|
|
imageSrc="http://img.b2bpic.net/free-photo/handicapped-young-woman-office-looking-laptop_23-2148497274.jpg"
|
|
imageAlt="AccessWeb platform showcasing accessible interface design"
|
|
buttons={[
|
|
{ text: "Explore Features", href: "#features" },
|
|
{ text: "Try It Now", onClick: () => console.log('Starting AccessWeb demo') }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardSix
|
|
title="Core Accessibility Features"
|
|
description="Our MVP demonstrates essential accessibility features that integrate seamlessly into modern web systems, ensuring inclusive experiences for all users."
|
|
tag="MVP Features"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Color-Blind Friendly Mode", description: "Adjust color palettes to support users with color vision deficiencies. Increase contrast, reduce color-only indicators, and ensure visual accessibility for all.", imageSrc: "http://img.b2bpic.net/free-photo/loop-symbol-inspirational-view_23-2150022268.jpg", imageAlt: "Color-blind mode with enhanced contrast and accessible palette"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Adjustable Font Size", description: "Dynamically scale text across the entire application. Users can select from small, medium, large, or extra-large options to optimize readability and comfort.", imageSrc: "http://img.b2bpic.net/free-photo/shock-word-wooden-background_23-2148227736.jpg", imageAlt: "Font size adjustment settings showing multiple readable size options"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Voice Navigation", description: "Navigate using voice commands. Users can open menus, access settings, adjust text size, or perform major actions using simple voice directives.", imageSrc: "http://img.b2bpic.net/free-photo/surprised-young-woman-scrolling-newsfeed-via-social-media-account-having-shocked-look_343059-1944.jpg", imageAlt: "Voice command interface with accessibility controls"
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "Keyboard-Only Navigation", description: "Access all features without a mouse. Includes tab-based navigation, clear focus indicators, and keyboard shortcuts for seamless interaction.", imageSrc: "http://img.b2bpic.net/free-photo/person-office-analyzing-checking-finance-graphs_23-2150377135.jpg", imageAlt: "Keyboard navigation with visible focus indicators"
|
|
}
|
|
]}
|
|
buttons={[
|
|
{ text: "Learn More", href: "#about" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
title="Human-Centered Interaction Principles"
|
|
description="AccessWeb demonstrates how inclusive design and accessibility standards transform software development. By prioritizing diverse user needs and assistive interaction methods, we create technology that benefits everyone."
|
|
tag="HCI Focus"
|
|
tagIcon={Heart}
|
|
tagAnimation="slide-up"
|
|
metrics={[
|
|
{ value: "100%", title: "Inclusive Coverage" },
|
|
{ value: "WCAG", title: "Standards Compliant" }
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/friendship-togetherness-concept_273609-6190.jpg"
|
|
imageAlt="Diverse users benefiting from inclusive design"
|
|
useInvertedBackground={false}
|
|
mediaAnimation="slide-up"
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="showcase" data-section="showcase">
|
|
<ProductCardTwo
|
|
title="Accessibility in Action"
|
|
description="See how each feature enhances usability and demonstrates human-centered design principles. These components showcase the importance of accessible interfaces."
|
|
tag="Live Examples"
|
|
tagIcon={Eye}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
products={[
|
|
{
|
|
id: "1", brand: "Feature", name: "Screen Reader Compatibility", price: "Semantic HTML", rating: 5,
|
|
reviewCount: "Essential", imageSrc: "http://img.b2bpic.net/free-photo/close-up-female-ceo-reviewing-graphs-performance-reports-laptop-working-analysis_482257-136383.jpg", imageAlt: "Screen reader with semantic HTML implementation"
|
|
},
|
|
{
|
|
id: "2", brand: "Feature", name: "Assistive Technology Support", price: "Multiple Methods", rating: 5,
|
|
reviewCount: "Voice + Keyboard", imageSrc: "http://img.b2bpic.net/free-photo/surprised-young-woman-scrolling-newsfeed-via-social-media-account-having-shocked-look_343059-1944.jpg", imageAlt: "Multiple assistive technology options"
|
|
},
|
|
{
|
|
id: "3", brand: "Feature", name: "Universal Usability", price: "For Everyone", rating: 5,
|
|
reviewCount: "All Abilities", imageSrc: "http://img.b2bpic.net/free-photo/disabled-man-wheelchair-working-his-office-job_23-2149571102.jpg", imageAlt: "Diverse users accessing inclusive interface"
|
|
}
|
|
]}
|
|
buttons={[
|
|
{ text: "Explore All", href: "#impact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="impact" data-section="impact">
|
|
<MetricCardSeven
|
|
title="AccessWeb Impact"
|
|
description="Demonstrating how accessibility improvements benefit all users through increased usability, inclusivity, and ethical design."
|
|
tag="Results"
|
|
tagIcon={TrendingUp}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
carouselMode="buttons"
|
|
metrics={[
|
|
{
|
|
id: "1", value: "4+", title: "Core Features", items: ["Color-blind mode", "Font adjustment", "Voice navigation", "Keyboard navigation"]
|
|
},
|
|
{
|
|
id: "2", value: "∞", title: "Inclusive Users", items: ["Visual impairments", "Motor impairments", "Color vision deficiencies", "All ability levels"]
|
|
},
|
|
{
|
|
id: "3", value: "100%", title: "Accessibility", items: ["WCAG compliant", "Semantic HTML", "ARIA labels", "Screen reader ready"]
|
|
}
|
|
]}
|
|
buttons={[
|
|
{ text: "See Testimonials", href: "#testimonials" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
title="User Success Stories"
|
|
description="Hear from real users who benefit from AccessWeb's inclusive design and accessibility features."
|
|
tag="Testimonials"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
carouselMode="buttons"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Johnson", role: "Accessibility Advocate", company: "Inclusive Tech", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/business-concept-portrait-handsome-serious-business-man-suit-looking-work-laptop-white-background_1258-103931.jpg", imageAlt: "Sarah Johnson testimonial"
|
|
},
|
|
{
|
|
id: "2", name: "Marcus Chen", role: "Screen Reader User", company: "Digital Access", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-businessman-sitting-sofa-waiting-area_107420-95816.jpg", imageAlt: "Marcus Chen testimonial"
|
|
},
|
|
{
|
|
id: "3", name: "Elena Rodriguez", role: "UX Designer", company: "Accessible Systems", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-colleagues-working_23-2149313750.jpg", imageAlt: "Elena Rodriguez testimonial"
|
|
},
|
|
{
|
|
id: "4", name: "James Wilson", role: "Motor Impairment Advocate", company: "Access for All", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/confident-businesswoman-wheelchair-shaking-hands_23-2148497265.jpg", imageAlt: "James Wilson testimonial"
|
|
}
|
|
]}
|
|
buttons={[
|
|
{ text: "Join Our Community", href: "#contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Ready to experience inclusive design? Start exploring AccessWeb today and discover how human-centered interaction can transform accessibility. Let's build a more inclusive digital future together."
|
|
animationType="entrance-slide"
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "Begin Demo", href: "https://example.com/demo" },
|
|
{ text: "Learn More", href: "https://example.com/docs" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
logoText="AccessWeb"
|
|
copyrightText="© 2025 AccessWeb | Inclusive Design for All"
|
|
columns={[
|
|
{
|
|
title: "Features", items: [
|
|
{ label: "Color-Blind Mode", href: "#features" },
|
|
{ label: "Font Adjustment", href: "#features" },
|
|
{ label: "Voice Navigation", href: "#features" },
|
|
{ label: "Keyboard Navigation", href: "#features" }
|
|
]
|
|
},
|
|
{
|
|
title: "Resources", items: [
|
|
{ label: "Accessibility Standards", href: "https://www.w3.org/WAI/WCAG21/quickref/" },
|
|
{ label: "Screen Reader Guide", href: "https://www.w3.org/WAI/users/assistive_technologies/" },
|
|
{ label: "ARIA Documentation", href: "https://www.w3.org/WAI/ARIA/apg/" },
|
|
{ label: "Inclusive Design Principles", href: "https://inclusivedesignprinciples.org/" }
|
|
]
|
|
},
|
|
{
|
|
title: "About", items: [
|
|
{ label: "Our Mission", href: "#about" },
|
|
{ label: "Impact Metrics", href: "#impact" },
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Contact", href: "#contact" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |