Merge pull request #3 from yusuf-intern/main

CSS erros
2026-01-05 14:02:52 +04:00
parent c0d0c00531 e449dd0ddd
commit e7d688f5ef
11 changed files with 188 additions and 242 deletions
--- a/index.html
+++ b/index.html
@@ -12,13 +12,13 @@
    <meta property="og:title" content="OpenXpert Solutions (OXS) - Leading IT Solutions Provider UAE" />
    <meta property="og:description" content="Transforming businesses through innovative technology. Expert ERP systems, custom e-commerce, RMM services, AMC support, and premium web development across Dubai & UAE." />
    <meta property="og:type" content="website" />
-    <meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
+    

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@OpenXpertSolutions" />
    <meta name="twitter:title" content="OpenXpert Solutions (OXS) - Enterprise IT Solutions UAE" />
    <meta name="twitter:description" content="Leading provider of enterprise digital solutions, ERP systems, and custom web development in Dubai & UAE." />
-    <meta name="twitter:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
+    
    
    <!-- Organization Schema -->
    <script type="application/ld+json">
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,9 +11,10 @@ import Portfolio from "./pages/Portfolio";
 import Contact from "./pages/Contact";
 import ErpSystems from "./pages/services/ErpSystems";
 import ECommerce from "./pages/services/ECommerce";
-import RmmServices from "./pages/services/RmmServices";
+import RmmServices from "./pages/services/CybersecurityServices";
 import AmcSupport from "./pages/services/AmcSupport";
 import NotFound from "./pages/NotFound";
+import CybersecurityServices from "./pages/services/CybersecurityServices";

 const queryClient = new QueryClient();

@@ -32,7 +33,7 @@ const App = () => (
            <Route path="/contact" element={<Contact />} />
            <Route path="/services/erp" element={<ErpSystems />} />
            <Route path="/services/ecommerce" element={<ECommerce />} />
-            <Route path="/services/rmm" element={<RmmServices />} />
+            <Route path="/services/cybersecurity" element={<CybersecurityServices />} />
            <Route path="/services/amc" element={<AmcSupport />} />
            {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
            <Route path="*" element={<NotFound />} />
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -19,26 +19,7 @@ const Footer = () => {
            <p className="text-sm text-muted-foreground leading-relaxed mb-6">
              Empowering businesses with secure, future-ready technology solutions.
            </p>
-            <div className="flex gap-3">
-              <a
-                href="#"
-                className="w-10 h-10 rounded-full glass-card flex items-center justify-center hover:glow-effect transition-all"
-              >
-                <Linkedin className="w-4 h-4 text-primary" />
-              </a>
-              <a
-                href="#"
-                className="w-10 h-10 rounded-full glass-card flex items-center justify-center hover:glow-effect transition-all"
-              >
-                <Twitter className="w-4 h-4 text-primary" />
-              </a>
-              <a
-                href="#"
-                className="w-10 h-10 rounded-full glass-card flex items-center justify-center hover:glow-effect transition-all"
-              >
-                <Github className="w-4 h-4 text-primary" />
-              </a>
-            </div>
+            
          </div>

          {/* Services Column */}
@@ -61,14 +42,6 @@ const Footer = () => {
                  E-Commerce Solutions
                </Link>
              </li>
-              <li>
-                <Link
-                  to="/services/rmm"
-                  className="text-sm text-muted-foreground hover:text-primary transition-colors"
-                >
-                  RMM Services
-                </Link>
-              </li>
              <li>
                <Link
                  to="/services/amc"
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -13,10 +13,9 @@ const Navigation = () => {
  const services = [
    { name: "ERP Systems", path: "/services/erp" },
    { name: "Custom E-Commerce", path: "/services/ecommerce" },
-    { name: "RMM Services", path: "/services/rmm" },
+    
    { name: "AMC Support", path: "/services/amc" },
-    { name: "Community Projects", path: "/services/community" },
-    { name: "Web Development", path: "/services/web" },
+
  ];

  const isActive = (path: string) => location.pathname === path;
@@ -97,10 +96,15 @@ const Navigation = () => {

          {/* Right Side Actions */}
          <div className="flex items-center gap-4">
-            <ThemeToggle />
-            <Button className="hidden lg:inline-flex glass-card hover:glow-effect">
-              Book a Consultation
-            </Button>
+  <ThemeToggle />
+  <a 
+    href="mailto:info@openxperts.me?subject=Consultation%20Request&body=Hi%20OpenXperts%20Team,%0D%0A%0D%0AI%20would%20like%20to%20book%20a%20consultation%20to%20discuss%20my%20business%20needs.%0D%0A%0D%0AName:%20%0D%0ACompany:%20%0D%0APhone:%20%0D%0AArea%20of%20Interest:%20%0D%0A%0D%0AThank%20you!"
+    className="hidden lg:inline-flex"
+  >
+    <Button className="glass-card hover:glow-effect">
+      Book a Consultation
+    </Button>
+  </a>

            {/* Mobile Menu Toggle */}
            <button
@@ -113,69 +117,74 @@ const Navigation = () => {
        </div>

        {/* Mobile Menu */}
-        {isMenuOpen && (
-          <div className="lg:hidden mt-6 glass-card rounded-2xl p-6 animate-slide-in-up">
-            <div className="flex flex-col gap-4">
+{isMenuOpen && (
+  <div className="lg:hidden mt-6 glass-card rounded-2xl p-6 animate-slide-in-up">
+    <div className="flex flex-col gap-4">
+      <Link
+        to="/"
+        className="nav-link text-muted-foreground"
+        onClick={() => setIsMenuOpen(false)}
+      >
+        Home
+      </Link>
+      <Link
+        to="/about"
+        className="nav-link text-muted-foreground"
+        onClick={() => setIsMenuOpen(false)}
+      >
+        About Us
+      </Link>
+      
+      <div>
+        <button
+          className="nav-link text-muted-foreground flex items-center gap-1 w-full justify-between"
+          onClick={() => setIsServicesOpen(!isServicesOpen)}
+        >
+          Services
+          <ChevronDown className={`w-4 h-4 transition-transform ${isServicesOpen ? "rotate-180" : ""}`} />
+        </button>
+        {isServicesOpen && (
+          <div className="ml-4 mt-2 flex flex-col gap-2">
+            {services.map((service) => (
              <Link
-                to="/"
-                className="nav-link text-muted-foreground"
+                key={service.path}
+                to={service.path}
+                className="text-sm text-muted-foreground hover:text-primary"
                onClick={() => setIsMenuOpen(false)}
              >
-                Home
+                {service.name}
              </Link>
-              <Link
-                to="/about"
-                className="nav-link text-muted-foreground"
-                onClick={() => setIsMenuOpen(false)}
-              >
-                About Us
-              </Link>
-              
-              <div>
-                <button
-                  className="nav-link text-muted-foreground flex items-center gap-1 w-full justify-between"
-                  onClick={() => setIsServicesOpen(!isServicesOpen)}
-                >
-                  Services
-                  <ChevronDown className={`w-4 h-4 transition-transform ${isServicesOpen ? "rotate-180" : ""}`} />
-                </button>
-                {isServicesOpen && (
-                  <div className="ml-4 mt-2 flex flex-col gap-2">
-                    {services.map((service) => (
-                      <Link
-                        key={service.path}
-                        to={service.path}
-                        className="text-sm text-muted-foreground hover:text-primary"
-                        onClick={() => setIsMenuOpen(false)}
-                      >
-                        {service.name}
-                      </Link>
-                    ))}
-                  </div>
-                )}
-              </div>
-
-              <Link
-                to="/portfolio"
-                className="nav-link text-muted-foreground"
-                onClick={() => setIsMenuOpen(false)}
-              >
-                Portfolio
-              </Link>
-              <Link
-                to="/contact"
-                className="nav-link text-muted-foreground"
-                onClick={() => setIsMenuOpen(false)}
-              >
-                Contact
-              </Link>
-              <Button className="glass-card hover:glow-effect w-full mt-4">
-                Book a Consultation
-              </Button>
-            </div>
+            ))}
          </div>
        )}
      </div>
+
+      <Link
+        to="/portfolio"
+        className="nav-link text-muted-foreground"
+        onClick={() => setIsMenuOpen(false)}
+      >
+        Portfolio
+      </Link>
+      <Link
+        to="/contact"
+        className="nav-link text-muted-foreground"
+        onClick={() => setIsMenuOpen(false)}
+      >
+        Contact
+      </Link>
+
+      <a 
+        href="mailto:info@openxperts.me?subject=Consultation%20Request&body=Hi%20OpenXperts%20Team,%0D%0A%0D%0AI%20would%20like%20to%20book%20a%20consultation%20to%20discuss%20my%20business%20needs.%0D%0A%0D%0AName:%20%0D%0ACompany:%20%0D%0APhone:%20%0D%0AArea%20of%20Interest:%20%0D%0A%0D%0AThank%20you!"
+        className="inline-block"
+      >
+        <Button className="glass-card hover:glow-effect w-full mt-4">
+          Book a Consultation
+        </Button>
+      </a>
+    </div>
+  </div>)}
+      </div>
    </nav>
  );
 };
--- a/src/pages/Contact.tsx
+++ b/src/pages/Contact.tsx
@@ -3,9 +3,25 @@ import Footer from "@/components/Footer";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
-import { Mail, Phone, MapPin, Send } from "lucide-react";
+import { Mail, MapPin, Send } from "lucide-react";

 const Contact = () => {
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    
+    const formData = new FormData(e.currentTarget);
+    const firstName = formData.get('firstName') as string;
+    const lastName = formData.get('lastName') as string;
+    const email = formData.get('email') as string;
+    const message = formData.get('message') as string;
+    
+    const body = encodeURIComponent(
+      `Name: ${firstName} ${lastName}\nEmail: ${email}\n\nMessage:\n${message}`
+    );
+    
+    window.location.href = `mailto:info@openxperts.me?subject=Contact Form Message&body=${body}`;
+  };
+
  return (
    <div className="min-h-screen gradient-bg">
      <Navigation />
@@ -29,19 +45,19 @@ const Contact = () => {
            {/* Contact Form */}
            <div className="glass-card rounded-3xl p-8 animate-slide-in-up">
              <h2 className="text-2xl font-semibold text-foreground mb-6">Send Us a Message</h2>
-              <form className="space-y-6">
+              <form className="space-y-6" onSubmit={handleSubmit}>
                <div className="grid md:grid-cols-2 gap-4">
                  <div>
                    <label className="text-sm font-medium text-foreground mb-2 block">
                      First Name
                    </label>
-                    <Input placeholder="John" className="glass-card" />
+                    <Input name="firstName" placeholder="John" className="glass-card" required />
                  </div>
                  <div>
                    <label className="text-sm font-medium text-foreground mb-2 block">
                      Last Name
                    </label>
-                    <Input placeholder="Doe" className="glass-card" />
+                    <Input name="lastName" placeholder="Doe" className="glass-card" required />
                  </div>
                </div>

@@ -49,29 +65,24 @@ const Contact = () => {
                  <label className="text-sm font-medium text-foreground mb-2 block">
                    Email
                  </label>
-                  <Input type="email" placeholder="john@example.com" className="glass-card" />
+                  <Input name="email" type="email" placeholder="john@example.com" className="glass-card" required />
                </div>

-                {/* <div>
-                  <label className="text-sm font-medium text-foreground mb-2 block">
-                    Phone
-                  </label>
-                  <Input type="tel" placeholder="+971 XXX XXXX" className="glass-card" />
-                </div> */}
-
                <div>
                  <label className="text-sm font-medium text-foreground mb-2 block">
                    Message
                  </label>
                  <Textarea
+                    name="message"
                    placeholder="Tell us about your project..."
                    className="glass-card min-h-32"
+                    required
                  />
                </div>

-                <Button className="w-full glass-card hover:glow-effect">
+                <Button type="submit" className="w-full glass-card hover:glow-effect">
                  <Send className="w-4 h-4 mr-2" />
-                  Send Message
+                  Send Mail
                </Button>
              </form>
            </div>
@@ -87,22 +98,10 @@ const Contact = () => {
                    </div>
                    <div>
                      <h3 className="font-semibold text-foreground mb-1">Email</h3>
-                      <p className="text-muted-foreground">info@openxpert.com</p>
-                      <p className="text-muted-foreground">support@openxpert.com</p>
+                      <p className="text-muted-foreground">info@openxperts.me</p>
                    </div>
                  </div>

-                  {/* <div className="flex items-start gap-4">
-                    <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-primary/10 to-accent/20 flex items-center justify-center flex-shrink-0">
-                      <Phone className="w-5 h-5 text-primary" />
-                    </div>
-                    <div>
-                      <h3 className="font-semibold text-foreground mb-1">Phone</h3>
-                      <p className="text-muted-foreground">+971 XXX XXXX</p>
-                      <p className="text-muted-foreground">+971 XXX XXXX</p>
-                    </div>
-                  </div> */}
-
                  <div className="flex items-start gap-4">
                    <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-primary/10 to-accent/20 flex items-center justify-center flex-shrink-0">
                      <MapPin className="w-5 h-5 text-primary" />
@@ -144,4 +143,4 @@ const Contact = () => {
  );
 };

-export default Contact;
+export default Contact;
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -19,9 +19,9 @@ const Index = () => {
    link: "/services/ecommerce"
  }, {
    icon: Shield,
-    title: "RMM Services",
+    title: "Cybersecurity Services",
    description: "Remote Monitoring and Management services ensuring your IT infrastructure operates at peak performance.",
-    link: "/services/rmm"
+    link: "/services/cybersecurity"
  }, {
    icon: Wrench,
    title: "AMC Support",
@@ -110,9 +110,9 @@ const Index = () => {

        {/* Services grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
-          {services.map((service, index) => <Link key={service.title} to={service.link}>
+          {services.map((service, index) => 
              <ServiceCard icon={service.icon} title={service.title} description={service.description} delay={index * 100} />
-            </Link>)}
+            )}
        </div>

        {/* Trust Badges */}
--- a/src/pages/services/AmcSupport.tsx
+++ b/src/pages/services/AmcSupport.tsx
@@ -208,7 +208,7 @@ const AmcSupport = () => {
          {features.map((feature, index) => (
            <Card
              key={index}
-              className="group glass-card p-8 rounded-3xl transition-all duration-500 hover:scale-105 hover:glow-effect cursor-pointer"
+              className="group glass-card p-8 rounded-3xl transition-all duration-500 hover:scale-105 hover:glow-effect "
              style={{ animationDelay: `${index * 50}ms` }}
            >
              <div className="mb-6">
@@ -367,42 +367,30 @@ const AmcSupport = () => {
        </div>
      </section> */}

-      {/* CTA Section */}
-      <section className="container mx-auto px-6 py-20">
-        <div className="glass-strong rounded-3xl p-12 max-w-4xl mx-auto text-center">
-          <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
-            Ready to Get Protected?
-          </h2>
-          <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
-            Start your AMC contract today and enjoy peace of mind
-          </p>
-
-          {!showSuccess ? (
-            <Button
-              size="lg"
-              className="glass-card hover:glow-effect px-8 py-6 text-lg group"
-              onClick={() => setShowSuccess(true)}
-            >
-              <Wrench className="mr-2 w-5 h-5" />
-              Get Your Quote
-              <ArrowRight className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" />
-            </Button>
-          ) : (
-            <div className="glass-card p-8 rounded-2xl animate-scale-in">
-              <Check className="w-16 h-16 text-primary mx-auto mb-4 animate-glow-pulse" />
-              <h3 className="text-xl font-semibold text-foreground mb-2">Request Received!</h3>
-              <p className="text-muted-foreground mb-6">
-                Our support team will contact you within 24 hours with a customized quote.
-              </p>
-              <Link to="/contact">
-                <Button variant="outline" className="glass-card">
-                  Contact Us Directly
-                </Button>
-              </Link>
-            </div>
-          )}
-        </div>
-      </section>
+  {/* CTA Section */}
+<section className="container mx-auto px-6 py-20">
+  <div className="glass-strong rounded-3xl p-12 max-w-4xl mx-auto text-center">
+    <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
+      Ready to Get Protected?
+    </h2>
+    <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
+      Start your AMC contract today and enjoy peace of mind
+    </p>
+    <a 
+      href="mailto:info@openxperts.com?subject=AMC%20Support%20Quote%20Request&body=Hi%20OpenXperts%20Team,%0D%0A%0D%0AI%20would%20like%20to%20request%20a%20quote%20for%20AMC%20support.%0D%0A%0D%0AName:%20%0D%0ACompany:%20%0D%0APhone:%20%0D%0ACurrent%20Systems:%20%0D%0ASupport%20Requirements:%20%0D%0A%0D%0AThank%20you!"
+      className="inline-block"
+    >
+      <Button
+        size="lg"
+        className="glass-card hover:glow-effect px-8 py-6 text-lg group"
+      >
+        <Wrench className="mr-2 w-5 h-5" />
+        Get Your Quote
+        <ArrowRight className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" />
+      </Button>
+    </a>
+  </div>
+</section>

      <Footer />
    </div>
--- a/src/pages/services/CybersecurityServices.tsx
+++ b/src/pages/services/CybersecurityServices.tsx
@@ -6,7 +6,7 @@ import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { Link } from "react-router-dom";

-const RmmServices = () => {
+const CybersecurityServices = () => {
  const [showDemo, setShowDemo] = useState(false);
  const [simulationActive, setSimulationActive] = useState(false);

@@ -129,7 +129,7 @@ const RmmServices = () => {
      {/* <section className="relative container mx-auto px-6 pt-32 pb-20">
        <div className="text-center mb-16 animate-slide-in-up">
          <h1 className="text-5xl md:text-6xl font-bold text-foreground mb-6">
-            RMM Services
+            Cybersecurity Services
          </h1>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto mb-4">
            Never worry about IT infrastructure again.
@@ -183,7 +183,7 @@ const RmmServices = () => {
          {features.map((feature, index) => (
            <Card
              key={index}
-              className="group glass-card p-8 rounded-3xl transition-all duration-500 hover:scale-105 hover:glow-effect cursor-pointer"
+              className="group glass-card p-8 rounded-3xl transition-all duration-500 hover:scale-105 hover:glow-effect "
              style={{ animationDelay: `${index * 50}ms` }}
            >
              <div className="mb-6">
@@ -335,7 +335,7 @@ const RmmServices = () => {
              <Check className="w-16 h-16 text-primary mx-auto mb-4 animate-glow-pulse" />
              <h3 className="text-xl font-semibold text-foreground mb-2">Request Received!</h3>
              <p className="text-muted-foreground mb-6">
-                Our RMM specialists will set up your trial within 24 hours.
+                Our Cybersecurity specialists will set up your trial within 24 hours.
              </p>
              <Link to="/contact">
                <Button variant="outline" className="glass-card">
@@ -352,4 +352,4 @@ const RmmServices = () => {
  );
 };

-export default RmmServices;
+export default CybersecurityServices;
--- a/src/pages/services/ECommerce.tsx
+++ b/src/pages/services/ECommerce.tsx
@@ -163,7 +163,7 @@ const ECommerce = () => {
          {features.map((feature, index) => (
            <Card
              key={index}
-              className="group glass-card p-8 rounded-3xl transition-all duration-500 hover:scale-105 hover:glow-effect cursor-pointer"
+              className="group glass-card p-8 rounded-3xl transition-all duration-500 hover:scale-105 hover:glow-effect "
              style={{ animationDelay: `${index * 50}ms` }}
            >
              <div className="mb-6">
@@ -282,41 +282,29 @@ const ECommerce = () => {
      </section> */}

      {/* CTA Section */}
-      <section className="container mx-auto px-6 py-20">
-        <div className="glass-strong rounded-3xl p-12 max-w-4xl mx-auto text-center">
-          <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
-            Ready to Launch Your Store?
-          </h2>
-          <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
-            Let's build an e-commerce experience that your customers will love
-          </p>
-
-          {!showSuccess ? (
-            <Button
-              size="lg"
-              className="glass-card hover:glow-effect px-8 py-6 text-lg group"
-              onClick={() => setShowSuccess(true)}
-            >
-              <ShoppingCart className="mr-2 w-5 h-5" />
-              Start Your Project
-              <ArrowRight className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" />
-            </Button>
-          ) : (
-            <div className="glass-card p-8 rounded-2xl animate-scale-in">
-              <Check className="w-16 h-16 text-primary mx-auto mb-4 animate-glow-pulse" />
-              <h3 className="text-xl font-semibold text-foreground mb-2">Request Received!</h3>
-              <p className="text-muted-foreground mb-6">
-                Our e-commerce specialists will contact you within 24 hours.
-              </p>
-              <Link to="/contact">
-                <Button variant="outline" className="glass-card">
-                  Contact Us Directly
-                </Button>
-              </Link>
-            </div>
-          )}
-        </div>
-      </section>
+<section className="container mx-auto px-6 py-20">
+  <div className="glass-strong rounded-3xl p-12 max-w-4xl mx-auto text-center">
+    <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
+      Ready to Launch Your Store?
+    </h2>
+    <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
+      Let's build an e-commerce experience that your customers will love
+    </p>
+    <a 
+      href="mailto:info@openxperts.com?subject=E-Commerce%20Project%20Inquiry&body=Hi%20OpenXperts%20Team,%0D%0A%0D%0AI%20would%20like%20to%20start%20an%20e-commerce%20project.%0D%0A%0D%0AName:%20%0D%0ACompany:%20%0D%0APhone:%20%0D%0AProject%20Details:%20%0D%0A%0D%0AThank%20you!"
+      className="inline-block"
+    >
+      <Button
+        size="lg"
+        className="glass-card hover:glow-effect px-8 py-6 text-lg group"
+      >
+        <ShoppingCart className="mr-2 w-5 h-5" />
+        Start Your Project
+        <ArrowRight className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" />
+      </Button>
+    </a>
+  </div>
+</section>

      <Footer />
    </div>
--- a/src/pages/services/ErpSystems.tsx
+++ b/src/pages/services/ErpSystems.tsx
@@ -138,7 +138,7 @@ const ErpSystems = () => {
          {modules.map((module, index) => (
            <Card
              key={index}
-              className="group glass-card p-6 rounded-3xl transition-all duration-500 hover:scale-105 hover:glow-effect cursor-pointer"
+              className="group glass-card p-6 rounded-3xl transition-all duration-500 hover:scale-105 hover:glow-effect"
              style={{ animationDelay: `${index * 50}ms` }}
            >
              <div className="mb-4">
@@ -267,42 +267,30 @@ const ErpSystems = () => {
      </section>

      {/* Demo CTA */}
-      <section className="container mx-auto px-6 py-20">
-        <div className="glass-strong rounded-3xl p-12 max-w-4xl mx-auto text-center">
-          <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
-            Ready to Transform Your Business?
-          </h2>
-          <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
-            Schedule a personalized demo and see how our ERP system can revolutionize your operations.
-          </p>
-
-          {!showCalendar ? (
-            <Button
-              size="lg"
-              className="glass-card hover:glow-effect px-8 py-6 text-lg group"
-              onClick={() => setShowCalendar(true)}
-            >
-              <Calendar className="mr-2 w-5 h-5" />
-              Schedule ERP Demo
-              <ArrowRight className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" />
-            </Button>
-          ) : (
-            <div className="glass-card p-8 rounded-2xl animate-scale-in">
-              <Check className="w-16 h-16 text-primary mx-auto mb-4 animate-glow-pulse" />
-              <h3 className="text-xl font-semibold text-foreground mb-2">Request Received!</h3>
-              <p className="text-muted-foreground mb-6">
-                Our team will contact you within 24 hours to schedule your personalized demo.
-              </p>
-              <Link to="/contact">
-                <Button variant="outline" className="glass-card">
-                  Contact Us Directly
-                </Button>
-              </Link>
-            </div>
-          )}
-        </div>
-      </section>
-
+<section className="container mx-auto px-6 py-20">
+  <div className="glass-strong rounded-3xl p-12 max-w-4xl mx-auto text-center">
+    <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
+      Ready to Transform Your Business?
+    </h2>
+    <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
+      Schedule a personalized demo and see how our ERP system can revolutionize your operations.
+    </p>
+<a 
+  href="mailto:info@openxperts.me?subject=ERP%20System%20Demo%20Consultation&body=Hi%20OpenXperts%20Team,%0D%0A%0D%0AI%20would%20like%20to%20schedule%20a%20demo%20of%20your%20ERP%20system.%0D%0A%0D%0AName:%20%0D%0ACompany:%20%0D%0APhone:%20%0D%0APreferred%20Date/Time:%20%0D%0A%0D%0AThank%20you!"
+  className="inline-block"
+  target="_blank"
+>
+      <Button
+        size="lg"
+        className="glass-card hover:glow-effect px-8 py-6 text-lg group"
+      >
+        <Calendar className="mr-2 w-5 h-5" />
+        Schedule ERP Demo
+        <ArrowRight className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" />
+      </Button>
+    </a>
+  </div>
+</section>
      <Footer />
    </div>
  );