Add src/app/services/page.tsx

Merge version_2 into main

src/app/about/page.tsx

@@ -3,10 +3,7 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import Link from "next/link";
-import TextAbout from '@/components/sections/about/TextAbout';
+import MediaAbout from '@/components/sections/about/MediaAbout';
-import TeamCardFive from '@/components/sections/team/TeamCardFive';
-import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
-import { Rocket } from 'lucide-react';
 
 interface FooterProps {
   brandName?: string;
@@ -38,12 +35,12 @@ const Footer: React.FC<FooterProps> = ({ brandName = "Nexsoft Australia", navIte
 export default function AboutPage() {
   const navItems = [
     {name: "Home", id: "home", href: "/"},
-    {name: "About us", id: "about", href: "/about"},
+    {name: "About us", id: "about-us", 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"}
+    {name: "Contact us", id: "contact-us", href: "/contact"}
   ];
 
   const navbarProps = {
@@ -67,46 +64,21 @@ export default function AboutPage() {
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingOverlay {...navbarProps} />
       </div>
-      <div id="about-content" data-section="about-content">
+
-        <TextAbout
+      <main>
-          tag="Who We Are"
+        <div id="about-section" data-section="about-section">
-          tagIcon={Rocket}
+          <MediaAbout
-          title="Driving Innovation with Passion and Expertise"
+            title="Dedicated to Innovation and Excellence"
-          buttons={[
+            description="At Nexsoft Australia, we are a passionate team committed to transforming ideas into cutting-edge software solutions. With years of experience and a deep understanding of modern technology trends, we empower businesses to achieve their goals through robust, scalable, and user-friendly applications. Our focus is on delivering exceptional value and fostering long-term partnerships."
-            { text: "Our Services", href: "/services" }
+            imageSrc="https://picsum.photos/seed/aboutcompany/1920/1080?_wi=1"
-          ]}
+            imageAlt="Team collaborating"
-          useInvertedBackground={false}
+            useInvertedBackground={false}
-        />
+            ariaLabel="About Our Company Section"
-      </div>
+          />
-      <div id="team" data-section="team">
+        </div>
-        <TeamCardFive
+      </main>
-          title="Meet Our Expert Team"
+
-          description="Dedicated professionals passionate about your success."
-          team={[
-            { id: '1', name: 'John Doe', role: 'CEO & Founder', imageSrc: 'https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png', imageAlt: 'John Doe' },
-            { id: '2', name: 'Jane Smith', role: 'Lead Developer', imageSrc: 'https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png', imageAlt: 'Jane Smith' },
-            { id: '3', name: 'Emily White', role: 'Head of Marketing', imageSrc: 'https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png', imageAlt: 'Emily White' }
-          ]}
-          animationType={'slide-up'}
-          useInvertedBackground={true}
-          textboxLayout={'default'}
-        />
-      </div>
-      <div id="metrics" data-section="metrics">
-        <MetricCardSeven
-          title="Our Impact in Numbers"
-          description="Quantifying our commitment to excellence and client success."
-          metrics={[
-            { id: '1', value: '10+', title: 'Years of Experience', items: ['Industry leading solutions', 'Proven track record'] },
-            { id: '2', value: '100%', title: 'Client Satisfaction', items: ['Dedicated support', 'Tailored approach'] },
-            { id: '3', value: '250+', title: 'Successful Projects', items: ['On-time delivery', 'Exceeding expectations'] }
-          ]}
-          animationType={'blur-reveal'}
-          useInvertedBackground={false}
-          textboxLayout={'default'}
-        />
-      </div>
       <Footer brandName="Nexsoft Australia" navItems={navItems} />
     </ThemeProvider>
   );
-}
+}

src/app/contact/page.tsx

@@ -2,8 +2,9 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import Input from '@/components/form/Input';
 import Link from "next/link";
+import { useState } from 'react';
 
 interface FooterProps {
   brandName?: string;
@@ -32,9 +33,18 @@ const Footer: React.FC<FooterProps> = ({ brandName = "Nexsoft Australia", navIte
   );
 };
 
+
 export default function ContactPage() {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [message, setMessage] = useState('');
+
   const navItems = [
     {name: "Home", id: "home", href: "/"},
+    {name: "About us", id: "about", href: "/about"},
+    {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"}
   ];
 
@@ -43,9 +53,14 @@ export default function ContactPage() {
     button: {text: "Get a Quote", href: "/contact"}
   };
 
-  const handleFormSubmit = (data: Record<string, string>) => {
+  const handleSubmit = (e: React.FormEvent) => {
-    console.log("Form submitted:", data);
+    e.preventDefault();
-    alert("Thank you for your message! We will get back to you soon.");
+    // Handle form submission logic here
+    console.log({ name, email, message });
+    alert('Message sent successfully!');
+    setName('');
+    setEmail('');
+    setMessage('');
   };
 
   return (
@@ -64,25 +79,90 @@ export default function ContactPage() {
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingOverlay {...navbarProps} />
       </div>
-      <div id="contact-form" data-section="contact-form">
+      <main className="min-h-[calc(100vh-16rem)] flex flex-col items-center p-8 bg-background">
-        <ContactSplitForm
+        <h1 className="text-4xl md:text-6xl font-bold text-center mb-12 text-foreground">Contact Us</h1>
-          title="Get in Touch"
+
-          description="We'd love to hear from you! Fill out the form below or find us on the map."
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 w-full max-w-6xl">
-          inputs={[
+          <section className="bg-card p-8 rounded-lg shadow-lg flex flex-col border border-accent">
-            { name: "name", type: "text", placeholder: "Your Name", required: true },
+            <h2 className="text-3xl font-semibold mb-6 text-foreground">Send us a Message</h2>
-            { name: "email", type: "email", placeholder: "Your Email", required: true }
+            <form onSubmit={handleSubmit} className="space-y-6 flex-grow flex flex-col">
-          ]}
+              <div>
-          textarea={{ name: "message", placeholder: "Your Message", rows: 5, required: true }}
+                <label htmlFor="name" className="block text-sm font-medium text-foreground mb-2">
-          buttonText="Send Message"
+                  Name
-          imageSrc="https://picsum.photos/id/1083/800/600?grayscale&blur=2" 
+                </label>
-          imageAlt="Office location map"
+                <Input
-          mediaPosition="right"
+                  id="name"
-          useInvertedBackground={false}
+                  value={name}
-          onSubmit={handleFormSubmit}
+                  onChange={setName}
-          className="pt-24 md:pt-32 pb-16"
+                  placeholder="Your Name"
-        />
+                  required
-      </div>
+                  className="w-full p-3 rounded-md bg-background border border-accent text-foreground focus:ring-primary-cta focus:border-primary-cta"
+                />
+              </div>
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium text-foreground mb-2">
+                  Email
+                </label>
+                <Input
+                  id="email"
+                  type="email"
+                  value={email}
+                  onChange={setEmail}
+                  placeholder="your@example.com"
+                  required
+                  className="w-full p-3 rounded-md bg-background border border-accent text-foreground focus:ring-primary-cta focus:border-primary-cta"
+                />
+              </div>
+              <div className="flex-grow flex flex-col">
+                <label htmlFor="message" className="block text-sm font-medium text-foreground mb-2">
+                  Message
+                </label>
+                <textarea
+                  id="message"
+                  value={message}
+                  onChange={(e) => setMessage(e.target.value)}
+                  placeholder="Your message"
+                  rows={6}
+                  required
+                  className="w-full p-3 rounded-md bg-background border border-accent text-foreground focus:ring-primary-cta focus:border-primary-cta flex-grow resize-y"
+                ></textarea>
+              </div>
+              <button
+                type="submit"
+                className="w-full bg-primary-cta text-white font-bold py-3 px-6 rounded-md hover:opacity-90 transition-opacity"
+              >
+                Send Message
+              </button>
+            </form>
+          </section>
+
+          <section className="bg-card p-8 rounded-lg shadow-lg flex flex-col border border-accent">
+            <h2 className="text-3xl font-semibold mb-6 text-foreground">Find Us on the Map</h2>
+            <div className="relative h-96 w-full rounded-md overflow-hidden flex-grow">
+              <iframe
+                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.284728033604!2d144.96305731531634!3d-37.81627957975191!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642b58897811f%3A0xf63a7f8b9e6e8a0!2sFederation%20Square!5e0!3m2!1sen!2sau!4v1678901234567!5m2!1sen!2sau"
+                width="100%"
+                height="100%"
+                style={{ border: 0 }}
+                allowFullScreen={true}
+                loading="lazy"
+                referrerPolicy="no-referrer-when-downgrade"
+                title="Google Maps Location"
+                className="absolute inset-0"
+              ></iframe>
+            </div>
+            <div className="mt-6 text-foreground">
+                <p className="font-semibold">Our Address:</p>
+                <p>123 Business Street, Suite 400</p>
+                <p>Melbourne, VIC 3000</p>
+                <p>Australia</p>
+                <p className="mt-4 font-semibold">Phone: <Link href="tel:+61-3-1234-5678" className="text-primary-cta hover:underline">+61 3 1234 5678</Link></p>
+                <p className="font-semibold">Email: <Link href="mailto:info@nexsoft.com.au" className="text-primary-cta hover:underline">info@nexsoft.com.au</Link></p>
+            </div>
+          </section>
+        </div>
+      </main>
       <Footer brandName="Nexsoft Australia" navItems={navItems} />
     </ThemeProvider>
   );
-}
+}

src/app/page.tsx

@@ -34,6 +34,10 @@ const Footer: React.FC<FooterProps> = ({ brandName = "Nexsoft Australia", navIte
 export default function HomePage() {
   const navItems = [
     {name: "Home", id: "home", href: "/"},
+    {name: "About us", id: "about", href: "/about"},
+    {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"}
   ];
 

src/app/portfolio/page.tsx

@@ -3,7 +3,6 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import Link from "next/link";
-import ProductCardTwo, { ProductCardTwoProps } from '@/components/sections/product/ProductCardTwo'; // For portfolio display
 
 interface FooterProps {
   brandName?: string;
@@ -43,21 +42,10 @@ export default function PortfolioPage() {
   ];
 
   const navbarProps = {
-    brandName: "Nexsoft Australia",    navItems: navItems.map(item => ({ name: item.name, id: item.href })),
+    brandName: "Nexsoft Australia",    navItems: navItems,
     button: {text: "Get a Quote", href: "/contact"}
   };
 
-  const productCardTwoProps: ProductCardTwoProps = {
-    title: "Our Portfolio",    description: "Discover the projects we've brought to life.",    gridVariant: "bento-grid", // This is valid for ProductCardTwo
-    animationType: "slide-up",    textboxLayout: "default",    useInvertedBackground: false,
-    products: [
-        { id: "1", brand: "Client Project", name: "Project Alpha", price: "Case Study", rating: 5, reviewCount: "0", imageSrc: "https://r2.webild.io/p/4e2bb7a8-1a5c-4235-9008-012903330663_img_1.webp", imageAlt: "Project Alpha screenshot" },
-        { id: "2", brand: "Client Project", name: "Project Beta", price: "Case Study", rating: 5, reviewCount: "0", imageSrc: "https://r2.webild.io/p/4e2bb7a8-1a5c-4235-9008-012903330663_img_2.webp", imageAlt: "Project Beta screenshot" },
-        { id: "3", brand: "Client Project", name: "Project Gamma", price: "Case Study", rating: 5, reviewCount: "0", imageSrc: "https://r2.webild.io/p/4e2bb7a8-1a5c-4235-9008-012903330663_img_3.webp", imageAlt: "Project Gamma screenshot" },
-        { id: "4", brand: "Client Project", name: "Project Delta", price: "Case Study", rating: 5, reviewCount: "0", imageSrc: "https://r2.webild.io/p/4e2bb7a8-1a5c-4235-9008-012903330663_img_4.webp", imageAlt: "Project Delta screenshot" }
-    ]
-  };
-
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
@@ -74,18 +62,38 @@ export default function PortfolioPage() {
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingOverlay {...navbarProps} />
       </div>
-
+      <main className="min-h-[calc(100vh-16rem)] flex flex-col items-center justify-center p-8 bg-background">
-      <main>
+        <h1 className="text-4xl md:text-6xl font-bold text-center mb-8 text-foreground">Our Portfolio</h1>
-        <div id="portfolio-hero" data-section="portfolio-hero" className="py-20 md:py-32 text-center">
+        <p className="text-lg text-center max-w-3xl text-foreground/80">
-          <h1 className="text-4xl md:text-6xl font-bold text-foreground">Our Portfolio</h1>
+          Explore a selection of our recent projects and client success stories.
-          <p className="mt-4 text-xl text-foreground/80 max-w-2xl mx-auto">Explore our diverse range of successful projects and client collaborations.</p>
+        </p>
-        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-12 w-full max-w-6xl">
-
+          <div className="bg-card p-6 rounded-lg shadow-lg border border-accent">
-        <div id="product-card-two" data-section="product-card-two">
+            <h3 className="text-xl font-semibold mb-2 text-foreground">Project Alpha</h3>
-          <ProductCardTwo {...productCardTwoProps} />
+            <p className="text-foreground/80">A cutting-edge web application for data visualization.</p>
+          </div>
+          <div className="bg-card p-6 rounded-lg shadow-lg border border-accent">
+            <h3 className="text-xl font-semibold mb-2 text-foreground">Project Beta</h3>
+            <p className="text-foreground/80">Mobile app development for a leading e-commerce brand.</p>
+          </div>
+          <div className="bg-card p-6 rounded-lg shadow-lg border border-accent">
+            <h3 className="text-xl font-semibold mb-2 text-foreground">Project Gamma</h3>
+            <p className="text-foreground/80">Enterprise-level CRM system integration and customization.</p>
+          </div>
+          <div className="bg-card p-6 rounded-lg shadow-lg border border-accent">
+            <h3 className="text-xl font-semibold mb-2 text-foreground">Project Delta</h3>
+            <p className="text-foreground/80">Cloud infrastructure migration and optimization.</p>
+          </div>
+          <div className="bg-card p-6 rounded-lg shadow-lg border border-accent">
+            <h3 className="text-xl font-semibold mb-2 text-foreground">Project Epsilon</h3>
+            <p className="text-foreground/80">AI-powered analytics platform development.</p>
+          </div>
+          <div className="bg-card p-6 rounded-lg shadow-lg border border-accent">
+            <h3 className="text-xl font-semibold mb-2 text-foreground">Project Zeta</h3>
+            <p className="text-foreground/80">Custom blockchain solution for secure transactions.</p>
+          </div>
         </div>
       </main>
-
       <Footer brandName="Nexsoft Australia" navItems={navItems} />
     </ThemeProvider>
   );

src/app/services/page.tsx

@@ -3,10 +3,7 @@
 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 FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
-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;
@@ -38,12 +35,12 @@ const Footer: React.FC<FooterProps> = ({ brandName = "Nexsoft Australia", navIte
 export default function ServicesPage() {
   const navItems = [
     {name: "Home", id: "home", href: "/"},
-    {name: "About us", id: "about", href: "/about"},
+    {name: "About us", id: "about-us", 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"}
+    {name: "Contact us", id: "contact-us", href: "/contact"}
   ];
 
   const navbarProps = {
@@ -67,77 +64,39 @@ export default function ServicesPage() {
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingOverlay {...navbarProps} />
       </div>
-      <div id="services-features" data-section="services-features">
+
-        <FeatureCardSix
+      <main>
-          tag="What We Do"
+        <div id="services-section" data-section="services-section">
-          title="Comprehensive Digital Solutions"
+          <FeatureCardTwentyFour
-          description="From concept to deployment, we deliver tailored services designed to meet your unique business needs."
+            title="Our Comprehensive Services"
-          features={[
+            description="We offer a wide array of professional services tailored to meet your unique business requirements. From initial concept to deployment and ongoing support, we're with you every step of the way."
-            { 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' },
+            animationType="slide-up"
-            { 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' },
+            textboxLayout="default"
-            { 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' },
+            useInvertedBackground={false}
-            { 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' }
+            ariaLabel="Our Services Section"
-          ]}
+            features={[
-          useInvertedBackground={true}
+              {
-          textboxLayout={'default'}
+                id: "web-development",                title: "Web Development",                author: "Our Team",                description: "Modern, responsive websites and web applications tailored to your business needs.",                tags: ["Frontend", "Backend", "Full-Stack"],
-        />
+                imageSrc: "https://picsum.photos/seed/webdev/800/600?_wi=1",                imageAlt: "Web Development"
-      </div>
+              },
-      <div id="pricing" data-section="pricing">
+              {
-        <PricingCardFive
+                id: "mobile-app-development",                title: "Mobile App Development",                author: "Our Team",                description: "Custom iOS and Android applications designed for exceptional user experience and performance.",                tags: ["iOS", "Android", "Cross-Platform"],
-          title="Flexible Service Plans"
+                imageSrc: "https://picsum.photos/seed/mobileapp/800/600?_wi=1",                imageAlt: "Mobile App Development"
-          description="Choose a plan that scales with your business, or let's create a custom solution."
+              },
-          plans={[
+              {
-            {
+                id: "cloud-solutions",                title: "Cloud Solutions",                author: "Our Team",                description: "Scalable and secure cloud infrastructure, migration, and management services.",                tags: ["AWS", "Azure", "GCP"],
-              id: 'basic',
+                imageSrc: "https://picsum.photos/seed/cloud/800/600?_wi=1",                imageAlt: "Cloud Solutions"
-              tag: 'Starter',
+              },
-              price: '$999',
+              {
-              period: '/month',
+                id: "ai-ml",                title: "AI & Machine Learning",                author: "Our Team",                description: "Harnessing data for intelligent insights, automation, and predictive analytics.",                tags: ["Data Science", "Automation", "Predictive"],
-              description: 'Ideal for small businesses and startups.',
+                imageSrc: "https://picsum.photos/seed/ai/800/600?_wi=1",                imageAlt: "AI & Machine Learning"
-              button: { text: 'Get Started', href: '#' },
+              }
-              featuresTitle: 'Includes:',
+            ]}
-              features: ['Custom Dev (10 hrs)', 'Basic Cloud Setup', 'Email Support']
+          />
-            },
+        </div>
-            {
+      </main>
-              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}
-          textboxLayout={'default'}
-        />
-      </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>
   );
-}
+}