Files
1257630b-bd3f-4589-860f-69f…/src/app/resources/page.tsx

151 lines
7.1 KiB
TypeScript

"use client";
import Link from "next/link";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
import FooterCard from "@/components/sections/footer/FooterCard";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import {
ArrowRight,
BookOpen,
Video,
FileText,
Code,
Users,
Award,
Zap,
Twitter,
Linkedin,
Github,
} from "lucide-react";
export default function ResourcesPage() {
const navItems = [
{ name: "Features", id: "/services" },
{ name: "Pricing", id: "/pricing" },
{ name: "About", id: "/about" },
{ name: "Resources", id: "/resources" },
{ name: "Contact", id: "/contact" },
];
return (
<ThemeProvider
defaultButtonVariant="directional-hover"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="mediumLarge"
sizing="medium"
background="circleGradient"
cardStyle="layered-gradient"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="solid"
headingFontWeight="extrabold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="HsdfejudSync"
navItems={navItems}
button={{
text: "Get Started", href: "/pricing"}}
/>
</div>
<div id="resources" data-section="resources">
<FeatureCardTwentySix
title="Learning Resources"
description="Master HsdfejudSync with comprehensive guides, tutorials, and best practices"
tag="Knowledge Base"
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
title: "Getting Started Guide", description: "Learn the basics of HsdfejudSync in 10 minutes", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBMvIz3X0Osbgvb61KTzyrNiE/illustration-of-data-synchronization-acr-1772484361833-8ba061d5.png?_wi=2", imageAlt: "Getting started guide", buttonIcon: BookOpen,
buttonHref: "#"},
{
title: "Video Tutorials", description: "Step-by-step video guides for all features", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBMvIz3X0Osbgvb61KTzyrNiE/illustration-of-workflow-automation-and--1772484362726-ba10f98d.png?_wi=2", imageAlt: "Video tutorials", buttonIcon: Video,
buttonHref: "#"},
{
title: "API Documentation", description: "Complete API reference for developers", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBMvIz3X0Osbgvb61KTzyrNiE/illustration-of-api-integration-and-conn-1772484361758-d7ab5707.png?_wi=2", imageAlt: "API documentation", buttonIcon: Code,
buttonHref: "#"},
{
title: "Best Practices", description: "Expert tips for maximizing your workflow", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBMvIz3X0Osbgvb61KTzyrNiE/dashboard-analytics-visualization-with-m-1772484362759-1bcf8cea.png?_wi=2", imageAlt: "Best practices", buttonIcon: ArrowRight,
buttonHref: "#"},
{
title: "Case Studies", description: "Real-world examples of HsdfejudSync in action", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBMvIz3X0Osbgvb61KTzyrNiE/illustration-of-customer-support-and-ass-1772484362219-cbe7a847.png?_wi=2", imageAlt: "Case studies", buttonIcon: FileText,
buttonHref: "#"},
{
title: "Community Forum", description: "Connect with other HsdfejudSync users", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBMvIz3X0Osbgvb61KTzyrNiE/abstract-illustration-of-security-and-en-1772484363252-dbad034c.png?_wi=2", imageAlt: "Community forum", buttonIcon: Users,
buttonHref: "#"},
]}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardThree
title="Resource Highlights"
description="Comprehensive learning materials to accelerate your success"
textboxLayout="default"
useInvertedBackground={true}
animationType="slide-up"
metrics={[
{
id: "1", icon: Video,
title: "Video Tutorials", value: "150+"},
{
id: "2", icon: FileText,
title: "Articles", value: "300+"},
{
id: "3", icon: Award,
title: "Certifications", value: "5+"},
{
id: "4", icon: Users,
title: "Community Members", value: "10K+"},
]}
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
sideTitle="Resources FAQ"
sideDescription="Find answers to common questions about our learning resources"
textPosition="left"
useInvertedBackground={false}
animationType="smooth"
faqsAnimation="slide-up"
faqs={[
{
id: "1", title: "Are resources free?", content:
"Yes. All documentation, tutorials, and guides are available free to HsdfejudSync users. Premium certification programs have a one-time fee."},
{
id: "2", title: "How often are resources updated?", content:
"We update our knowledge base weekly with new tutorials, best practices, and case studies based on user feedback and platform updates."},
{
id: "3", title: "Can I request training for my team?", content:
"Absolutely. Enterprise customers can schedule custom training sessions with our expert team. Contact our sales team to learn more."},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="HsdfejudSync"
copyrightText="© 2025 HsdfejudSync. All rights reserved."
socialLinks={[
{
icon: Twitter,
href: "https://twitter.com/cloudsync", ariaLabel: "Twitter"},
{
icon: Linkedin,
href: "https://linkedin.com/company/cloudsync", ariaLabel: "LinkedIn"},
{
icon: Github,
href: "https://github.com/cloudsync", ariaLabel: "GitHub"},
]}
/>
</div>
</ThemeProvider>
);
}