Merge pull request #3 from yusuf-intern/main

CSS erros

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">

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 />} />

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"

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;
@@ -98,9 +97,14 @@ const Navigation = () => {
           {/* Right Side Actions */}
           <div className="flex items-center gap-4">
   <ThemeToggle />
-            <Button className="hidden lg:inline-flex glass-card hover:glow-effect">
+  <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,7 +117,7 @@ const Navigation = () => {
         </div>
 
         {/* Mobile Menu */}
-        {isMenuOpen && (
+{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
@@ -169,12 +173,17 @@ const Navigation = () => {
       >
         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>)}
-        )}
       </div>
     </nav>
   );

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">info@openxperts.me</p>
-                      <p className="text-muted-foreground">support@openxpert.com</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" />

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 */}

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">
@@ -368,7 +368,7 @@ const AmcSupport = () => {
       </section> */}
 
   {/* CTA Section */}
-      <section className="container mx-auto px-6 py-20">
+<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?
@@ -376,33 +376,21 @@ const AmcSupport = () => {
     <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 
-          {!showSuccess ? (
+      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"
-              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>
-          ) : (
+    </a>
-            <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>
-          )}
+</section>
-        </div>
-      </section>
 
       <Footer />
     </div>

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;

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,7 +282,7 @@ const ECommerce = () => {
       </section> */}
 
       {/* CTA Section */}
-      <section className="container mx-auto px-6 py-20">
+<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?
@@ -290,33 +290,21 @@ const ECommerce = () => {
     <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 
-          {!showSuccess ? (
+      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"
-              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>
-          ) : (
+    </a>
-            <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>
-          )}
+</section>
-        </div>
-      </section>
 
       <Footer />
     </div>

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,7 +267,7 @@ const ErpSystems = () => {
       </section>
 
       {/* Demo CTA */}
-      <section className="container mx-auto px-6 py-20">
+<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?
@@ -275,34 +275,22 @@ const ErpSystems = () => {
     <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 
-          {!showCalendar ? (
+  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"
-              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>
-          ) : (
+    </a>
-            <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>
-          )}
+</section>
-        </div>
-      </section>
-
       <Footer />
     </div>
   );