Add src/app/services/page.tsx

2026-03-26 12:46:03 +00:00
parent af292d62dc
commit 2d347eb078
1 changed files with 142 additions and 0 deletions
--- a/src/app/services/page.tsx
+++ b/src/app/services/page.tsx
@@ -0,0 +1,142 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import Link from "next/link";
+import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
+import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
+import FaqSplitText from '@/components/sections/faq/FaqSplitText';
+import { HardDrive, Cloud, Users, ShieldCheck } from 'lucide-react';
+
+interface FooterProps {
+  brandName?: string;
+  navItems: Array<{ name: string; href: string; }>;
+}
+
+const Footer: React.FC<FooterProps> = ({ brandName = "Nexsoft Australia", navItems }) => {
+  return (
+    <footer className="w-full py-8 bg-card text-foreground border-t border-accent mt-16">
+      <div className="mx-auto px-4 md:px-6 max-w-7xl flex flex-col md:flex-row justify-between items-center gap-4">
+        <div className="text-lg font-bold">
+          {brandName}
+        </div>
+        <nav className="flex flex-wrap justify-center gap-6">
+          {navItems.map((item) => (
+            <Link key={item.href} href={item.href} className="text-foreground hover:text-primary-cta">
+              {item.name}
+            </Link>
+          ))}
+        </nav>
+        <div className="text-sm text-foreground/80">
+          © {new Date().getFullYear()} {brandName}. All rights reserved.
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default function ServicesPage() {
+  const navItems = [
+    {name: "Home", id: "home", href: "/"},
+    {name: "About us", id: "about", href: "/about"},
+    {name: "Services", id: "services", href: "/services"},
+    {name: "Products", id: "products", href: "/products"},
+    {name: "Achievements", id: "achievements", href: "/portfolio"},
+    {name: "News", id: "news", href: "/portfolio"},
+    {name: "Contact us", id: "contact", href: "/contact"}
+  ];
+
+  const navbarProps = {
+    brandName: "Nexsoft Australia",    navItems: navItems,
+    button: {text: "Get a Quote", href: "/contact"}
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="background-highlight"
+      borderRadius="soft"
+      contentWidth="medium"
+      sizing="largeSmall"
+      background="blurBottom"
+      cardStyle="gradient-radial"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay {...navbarProps} />
+      </div>
+      <div id="services-features" data-section="services-features">
+        <FeatureCardSix
+          tag="What We Do"
+          title="Comprehensive Digital Solutions"
+          description="From concept to deployment, we deliver tailored services designed to meet your unique business needs."
+          features={[
+            { id: 1, title: 'Custom Software Development', description: 'Building bespoke applications that drive efficiency.', imageSrc: 'https://cdn.pixabay.com/photo/2016/03/09/09/16/programmer-1246761_960_720.jpg', imageAlt: 'Software Development' },
+            { id: 2, title: 'Cloud Solutions & Migration', description: 'Leverage the power of the cloud for scalability and security.', imageSrc: 'https://cdn.pixabay.com/photo/2016/11/19/23/00/data-1840003_960_720.jpg', imageAlt: 'Cloud Solutions' },
+            { id: 3, title: 'IT Consulting & Strategy', description: 'Expert guidance to optimize your technology roadmap.', imageSrc: 'https://cdn.pixabay.com/photo/2015/07/02/10/44/laptop-828551_960_720.jpg', imageAlt: 'IT Consulting' },
+            { id: 4, title: 'Cybersecurity & Data Protection', description: 'Protect your valuable assets with robust security measures.', imageSrc: 'https://cdn.pixabay.com/photo/2017/01/17/14/45/cyber-security-1987570_960_720.jpg', imageAlt: 'Cybersecurity' }
+          ]}
+          useInvertedBackground={true}
+          textboxLayout={'default'}
+        />
+      </div>
+      <div id="pricing" data-section="pricing">
+        <PricingCardFive
+          title="Flexible Service Plans"
+          description="Choose a plan that scales with your business, or let's create a custom solution."
+          plans={[
+            {
+              id: 'basic',
+              tag: 'Starter',
+              price: '$999',
+              period: '/month',
+              description: 'Ideal for small businesses and startups.',
+              button: { text: 'Get Started', href: '#' },
+              featuresTitle: 'Includes:',
+              features: ['Custom Dev (10 hrs)', 'Basic Cloud Setup', 'Email Support']
+            },
+            {
+              id: 'pro',
+              tag: 'Professional',
+              price: '$2499',
+              period: '/month',
+              description: 'For growing businesses requiring more comprehensive support.',
+              button: { text: 'Learn More', href: '#' },
+              featuresTitle: 'Includes:',
+              features: ['Custom Dev (30 hrs)', 'Advanced Cloud Mgmt', 'Priority Support', 'Monthly Reports']
+            },
+            {
+              id: 'enterprise',
+              tag: 'Enterprise',
+              price: 'Custom',
+              period: '',
+              description: 'Tailored solutions for large organizations with complex needs.',
+              button: { text: 'Contact Us', href: '/contact' },
+              featuresTitle: 'Includes:',
+              features: ['Dedicated Team', 'Full Cloud Suite', '24/7 Support', 'Strategic Consulting']
+            }
+          ]}
+          animationType={'slide-up'}
+          useInvertedBackground={false}
+        />
+      </div>
+      <div id="faq" data-section="faq">
+        <FaqSplitText
+          sideTitle="Got Questions About Our Services?"
+          sideDescription="We're here to provide clarity and ensure you have all the information you need."
+          faqs={[
+            { id: '1', title: 'How does your custom software development process work?', content: 'Our process involves discovery, design, development, testing, and deployment, ensuring a tailored solution that meets your specific needs.' },
+            { id: '2', title: 'What cloud platforms do you support?', content: 'We specialize in AWS, Azure, and Google Cloud Platform, providing flexible and scalable cloud solutions.' },
+            { id: '3', title: 'Can you help with legacy system migration?', content: 'Yes, we have extensive experience in migrating legacy systems to modern cloud infrastructure with minimal disruption.' },
+            { id: '4', title: 'What is your approach to cybersecurity?', content: 'We implement multi-layered security strategies, including threat detection, data encryption, and regular security audits to protect your systems.' }
+          ]}
+          faqsAnimation={'slide-up'}
+          useInvertedBackground={true}
+        />
+      </div>
+      <Footer brandName="Nexsoft Australia" navItems={navItems} />
+    </ThemeProvider>
+  );
+}