Update src/app/services/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -15,6 +15,7 @@ import { Zap, Shield, Rocket, Target, Sparkles, Crown, Mail, Users, Layers, Code
 export default function SaasTemplatePage() {
     const navItems = [
         { name: "Features", id: "features" },
+        { name: "Services", id: "/services" },
         { name: "Pricing", id: "pricing" },
         { name: "About", id: "about" },
         { name: "Contact", id: "contact" },

src/app/services/page.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import FooterBase from "@/components/sections/footer/FooterBase";
+import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
+
+export default function ServicesPage() {
+    const navItems = [
+        { name: "Features", id: "/" },
+        { name: "Services", id: "/services" },
+        { name: "Pricing", id: "/pricing" },
+        { name: "About", id: "/about" },
+        { name: "Contact", id: "/contact" },
+    ];
+
+    const services = [
+        {
+            title: "Custom Software Development",            description: "Tailored solutions designed to solve your specific business challenges with scalable architecture.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/saas/image1.avif",            imageAlt: "Custom Software Development"
+        },
+        {
+            title: "Cloud Infrastructure",            description: "Expertise in managing and optimizing cloud resources for maximum uptime and security.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/saas/image2.avif",            imageAlt: "Cloud Infrastructure"
+        },
+        {
+            title: "AI/ML Integration",            description: "Incorporate cutting-edge machine learning models into your existing workflows for intelligent insights.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/saas/image3.avif",            imageAlt: "AI/ML Integration"
+        }
+    ];
+
+    return (
+        <ThemeProvider defaultButtonVariant="hover-bubble" defaultTextAnimation="entrance-slide" borderRadius="pill" contentWidth="medium" sizing="medium" background="none" cardStyle="gradient-bordered" primaryButtonStyle="primary-glow" secondaryButtonStyle="layered" headingFontWeight="medium">
+            <ReactLenis root>
+                <div id="nav" data-section="nav">
+                    <NavbarLayoutFloatingInline
+                        navItems={navItems}
+                        brandName="SaasApp"
+                        button={{ text: "Get Started", href: "/contact" }}
+                    />
+                </div>
+                <div className="pt-24">
+                    <FeatureCardEight
+                        features={services}
+                        tag="Our Expertise"
+                        title="Services we offer"
+                        description="Comprehensive solutions to help you scale effectively."
+                        textboxLayout="default"
+                        useInvertedBackground={false}
+                    />
+                </div>
+                <div id="footer" data-section="footer">
+                    <FooterBase
+                        logoText="SaaSify"
+                        columns={[]}
+                        copyrightText="2024 SaasApp. All rights reserved."
+                    />
+                </div>
+            </ReactLenis>
+        </ThemeProvider>
+    );
+}