From 527131de00754b05921350a732341e2b68727247 Mon Sep 17 00:00:00 2001
From: yusuf-intern <yusuf.sabuwala@openxpert.cloud>
Date: Wed, 10 Dec 2025 15:54:54 +0000
Subject: [PATCH] Clean up UI components, remove unnecessary libs, improve
 navigation & portfolio

Fix navigation dropdown, scroll behavior, and particle colors, removed ai slop

removed phone numbers and removed link icon from portfolio

added appropriate comments

removed unnecessary libs
---
 src/App.tsx                        |  2 ++
 src/components/Footer.tsx          |  4 ++--
 src/components/Navigation.tsx      |  2 +-
 src/components/ParticleField.tsx   |  6 +++++-
 src/components/ScrollToTop.tsx     | 12 ++++++++++++
 src/components/ui/button.tsx       |  2 +-
 src/index.css                      |  4 ++++
 src/pages/Contact.tsx              |  8 ++++----
 src/pages/Index.tsx                |  8 ++++----
 src/pages/Portfolio.tsx            |  4 ++--
 src/pages/services/AmcSupport.tsx  | 12 ++++++------
 src/pages/services/ECommerce.tsx   | 12 ++++++------
 src/pages/services/ErpSystems.tsx  |  8 ++++----
 src/pages/services/RmmServices.tsx | 14 +++++++-------
 14 files changed, 60 insertions(+), 38 deletions(-)
 create mode 100644 src/components/ScrollToTop.tsx

diff --git a/src/App.tsx b/src/App.tsx
index f474327..9daad96 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,5 @@
 import { Toaster } from "@/components/ui/toaster";
+import ScrollToTop from './components/ScrollToTop';
 import { Toaster as Sonner } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
@@ -23,6 +24,7 @@ const App = () => (
         <Toaster />
         <Sonner />
         <BrowserRouter>
+          <ScrollToTop />  {/* component added to scroll to top of page  */}
           <Routes>
             <Route path="/" element={<Index />} />
             <Route path="/about" element={<About />} />
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index efa4877..b3b4bd0 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -121,12 +121,12 @@ const Footer = () => {
                   info@openxpert.com
                 </span>
               </li>
-              <li className="flex items-start gap-2">
+              {/* <li className="flex items-start gap-2">
                 <Phone className="w-4 h-4 text-primary mt-0.5" />
                 <span className="text-sm text-muted-foreground">
                   +971 XXX XXXX
                 </span>
-              </li>
+              </li> */}
               <li className="flex items-start gap-2">
                 <MapPin className="w-4 h-4 text-primary mt-0.5" />
                 <span className="text-sm text-muted-foreground">
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index ec5ddf3..b860c6e 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -67,7 +67,7 @@ const Navigation = () => {
               </button>
 
               {isServicesOpen && (
-                <div className="absolute top-full left-0 mt-2 w-64 glass-strong rounded-2xl overflow-hidden shadow-lg animate-slide-in-up">
+                <div className="absolute top-full left-0 mt-0 w-64 glass-strong rounded-2xl overflow-hidden shadow-lg animate-slide-in-up"> {/*changed mt-2 to mt-0 to remove gap triggering leave*/}
                   {services.map((service) => (
                     <Link
                       key={service.path}
diff --git a/src/components/ParticleField.tsx b/src/components/ParticleField.tsx
index 215fc3d..d98ea54 100644
--- a/src/components/ParticleField.tsx
+++ b/src/components/ParticleField.tsx
@@ -46,10 +46,14 @@ export const ParticleField = () => {
     const drawParticles = () => {
       ctx.clearRect(0, 0, canvas.width, canvas.height);
 
+      const particleColor = getComputedStyle(document.documentElement) //added particle colour
+      .getPropertyValue('--particle')
+      .trim();
+
       particles.forEach((particle) => {
         ctx.beginPath();
         ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
-        ctx.fillStyle = `hsla(205, 100%, 88%, ${particle.opacity})`;
+        ctx.fillStyle = `hsl(${particleColor} / ${particle.opacity})`;
         ctx.fill();
 
         // Update position
diff --git a/src/components/ScrollToTop.tsx b/src/components/ScrollToTop.tsx
new file mode 100644
index 0000000..35a2e82
--- /dev/null
+++ b/src/components/ScrollToTop.tsx
@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+//component added to scroll to top of page 
+export default function ScrollToTop() {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+}
\ No newline at end of file
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index cdedd4f..86433c7 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -9,7 +9,7 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default: "bg-primary text-foreground hover:bg-primary/90", //changed text-primary-foreground to text-foreground
         destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
diff --git a/src/index.css b/src/index.css
index 2e7c4bd..baa54a9 100644
--- a/src/index.css
+++ b/src/index.css
@@ -64,6 +64,8 @@ All colors MUST be HSL.
     --sidebar-accent-foreground: 240 5.9% 10%;
     --sidebar-border: 220 13% 91%;
     --sidebar-ring: 217.2 91.2% 59.8%;
+
+    --particle: 210 100% 18%;
   }
 
   .dark {
@@ -114,6 +116,8 @@ All colors MUST be HSL.
     --sidebar-accent-foreground: 240 4.8% 95.9%;
     --sidebar-border: 240 3.7% 15.9%;
     --sidebar-ring: 217.2 91.2% 59.8%;
+
+    --particle: 210 100% 88%; /* added particle colour */
   }
 }
 
diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx
index 1e33d9c..e29eff9 100644
--- a/src/pages/Contact.tsx
+++ b/src/pages/Contact.tsx
@@ -52,12 +52,12 @@ const Contact = () => {
                   <Input type="email" placeholder="john@example.com" className="glass-card" />
                 </div>
 
-                <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> */}
 
                 <div>
                   <label className="text-sm font-medium text-foreground mb-2 block">
@@ -92,7 +92,7 @@ const Contact = () => {
                     </div>
                   </div>
 
-                  <div className="flex items-start gap-4">
+                  {/* <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>
@@ -101,7 +101,7 @@ const Contact = () => {
                       <p className="text-muted-foreground">+971 XXX XXXX</p>
                       <p className="text-muted-foreground">+971 XXX XXXX</p>
                     </div>
-                  </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">
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index 7b4f395..f682f66 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -62,13 +62,13 @@ const Index = () => {
         {/* Hero Section */}
         <header className="text-center mb-32 animate-slide-in-up relative">
           {/* Floating sparkle effects */}
-          <Sparkles className="absolute top-0 left-1/4 w-8 h-8 text-primary/30 animate-glow-pulse" style={{
+          <Sparkles className="absolute top-0 left-1/4 w-8 h-8 text-primary/30 " style={{
           animationDelay: "0s"
         }} />
-          <Sparkles className="absolute top-10 right-1/3 w-6 h-6 text-accent/40 animate-glow-pulse" style={{
+          <Sparkles className="absolute top-10 right-1/3 w-6 h-6 text-accent/40 " style={{
           animationDelay: "1s"
         }} />
-          <Sparkles className="absolute bottom-10 left-1/3 w-7 h-7 text-primary/20 animate-glow-pulse" style={{
+          <Sparkles className="absolute bottom-10 left-1/3 w-7 h-7 text-primary/20 " style={{
           animationDelay: "2s"
         }} />
           
@@ -78,7 +78,7 @@ const Index = () => {
           
           <h1 className="text-6xl md:text-7xl lg:text-8xl font-bold text-foreground mb-8 tracking-tight leading-none">
             Precision. Innovation.
-            <span className="block mt-3 bg-gradient-to-r from-primary via-primary/80 to-accent bg-clip-text text-transparent animate-glow-pulse">
+            <span className="block mt-3 bg-gradient-to-r from-primary via-primary/80 to-accent bg-clip-text text-transparent "> {/*removed css animate-glow-pulse*/}
               Open Solutions.
             </span>
           </h1>
diff --git a/src/pages/Portfolio.tsx b/src/pages/Portfolio.tsx
index cf728d6..c4a5b2f 100644
--- a/src/pages/Portfolio.tsx
+++ b/src/pages/Portfolio.tsx
@@ -79,9 +79,9 @@ const Portfolio = () => {
                   <div className="absolute inset-0 bg-gradient-to-t from-background/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                   
                   {/* Hover Icon */}
-                  <div className="absolute top-4 right-4 w-10 h-10 rounded-full glass-strong flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                  {/* <div className="absolute top-4 right-4 w-10 h-10 rounded-full glass-strong flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                     <ExternalLink className="w-5 h-5 text-primary" />
-                  </div>
+                  </div> */}
                 </div>
 
                 {/* Content */}
diff --git a/src/pages/services/AmcSupport.tsx b/src/pages/services/AmcSupport.tsx
index 714aef4..06d0958 100644
--- a/src/pages/services/AmcSupport.tsx
+++ b/src/pages/services/AmcSupport.tsx
@@ -168,7 +168,7 @@ const AmcSupport = () => {
         </div>
 
         {/* Animated Support Visual */}
-        <div className="glass-strong rounded-3xl p-8 max-w-5xl mx-auto mb-20 animate-slide-in-up" style={{ animationDelay: "200ms" }}>
+        {/* <div className="glass-strong rounded-3xl p-8 max-w-5xl mx-auto mb-20 animate-slide-in-up" style={{ animationDelay: "200ms" }}>
           <div className="aspect-video glass-card rounded-2xl flex items-center justify-center relative overflow-hidden">
             <div className="relative">
               <HeadphonesIcon className="w-24 h-24 text-primary/30 animate-glow-pulse" />
@@ -192,7 +192,7 @@ const AmcSupport = () => {
               </div>
             ))}
           </div>
-        </div>
+        </div> */}
       </section>
 
       {/* Features Grid */}
@@ -290,7 +290,7 @@ const AmcSupport = () => {
       </section>
 
       {/* Pricing Tiers */}
-      <section className="container mx-auto px-6 py-20">
+      {/* <section className="container mx-auto px-6 py-20">
         <h2 className="text-4xl font-bold text-center text-foreground mb-4">
           Choose Your Support Plan
         </h2>
@@ -338,10 +338,10 @@ const AmcSupport = () => {
             </Card>
           ))}
         </div>
-      </section>
+      </section> */}
 
       {/* Testimonials */}
-      <section className="container mx-auto px-6 py-20">
+      {/* <section className="container mx-auto px-6 py-20">
         <h2 className="text-4xl font-bold text-center text-foreground mb-16">
           What Our Clients Say
         </h2>
@@ -365,7 +365,7 @@ const AmcSupport = () => {
             </Card>
           ))}
         </div>
-      </section>
+      </section> */}
 
       {/* CTA Section */}
       <section className="container mx-auto px-6 py-20">
diff --git a/src/pages/services/ECommerce.tsx b/src/pages/services/ECommerce.tsx
index 7c6fb1f..e3c6b02 100644
--- a/src/pages/services/ECommerce.tsx
+++ b/src/pages/services/ECommerce.tsx
@@ -125,7 +125,7 @@ const ECommerce = () => {
         </div>
 
         {/* Animated Store Preview */}
-        <div className="glass-strong rounded-3xl p-8 max-w-5xl mx-auto mb-20 animate-slide-in-up" style={{ animationDelay: "200ms" }}>
+        {/*<div className="glass-strong rounded-3xl p-8 max-w-5xl mx-auto mb-20 animate-slide-in-up" style={{ animationDelay: "200ms" }}>
           <div className="aspect-video glass-card rounded-2xl flex items-center justify-center relative overflow-hidden">
             <ShoppingCart className="w-24 h-24 text-primary/30 animate-glow-pulse" />
             <div className="absolute top-4 right-4">
@@ -147,7 +147,7 @@ const ECommerce = () => {
               </div>
             ))}
           </div>
-        </div>
+        </div>*/}
       </section>
 
       {/* Features Grid */}
@@ -180,7 +180,7 @@ const ECommerce = () => {
       </section>
 
       {/* Theme Playground */}
-      <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-8 md:p-12 max-w-5xl mx-auto">
           <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4 text-center">
             Live Theme Customizer
@@ -213,7 +213,7 @@ const ECommerce = () => {
             </div>
           </div>
         </div>
-      </section>
+      </section> */}
 
       {/* Conversion Features */}
       <section className="container mx-auto px-6 py-20">
@@ -242,7 +242,7 @@ const ECommerce = () => {
       </section>
 
       {/* Pricing Packages */}
-      <section className="container mx-auto px-6 py-20">
+      {/* <section className="container mx-auto px-6 py-20">
         <h2 className="text-4xl font-bold text-center text-foreground mb-4">
           Choose Your Package
         </h2>
@@ -279,7 +279,7 @@ const ECommerce = () => {
             </Card>
           ))}
         </div>
-      </section>
+      </section> */}
 
       {/* CTA Section */}
       <section className="container mx-auto px-6 py-20">
diff --git a/src/pages/services/ErpSystems.tsx b/src/pages/services/ErpSystems.tsx
index 2ee2693..c1afd60 100644
--- a/src/pages/services/ErpSystems.tsx
+++ b/src/pages/services/ErpSystems.tsx
@@ -104,7 +104,7 @@ const ErpSystems = () => {
         </div>
 
         {/* Animated Dashboard Preview */}
-        <div className="glass-strong rounded-3xl p-8 max-w-5xl mx-auto mb-20 animate-slide-in-up" style={{ animationDelay: "200ms" }}>
+        {/*<div className="glass-strong rounded-3xl p-8 max-w-5xl mx-auto mb-20 animate-slide-in-up" style={{ animationDelay: "200ms" }}>
           <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
             {[
               { label: "Revenue", value: "$2.4M", trend: "+12%" },
@@ -122,7 +122,7 @@ const ErpSystems = () => {
           <div className="h-48 glass-card rounded-2xl flex items-center justify-center">
             <BarChart3 className="w-16 h-16 text-primary/30 animate-glow-pulse" />
           </div>
-        </div>
+        </div>*/}
       </section>
 
       {/* Modules Section */}
@@ -155,7 +155,7 @@ const ErpSystems = () => {
       </section>
 
       {/* ROI Calculator */}
-      <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-8 md:p-12 max-w-5xl mx-auto">
           <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4 text-center">
             Calculate Your ROI
@@ -218,7 +218,7 @@ const ErpSystems = () => {
             </Button>
           </div>
         </div>
-      </section>
+      </section>*/}
 
       {/* Features Comparison */}
       <section className="container mx-auto px-6 py-20">
diff --git a/src/pages/services/RmmServices.tsx b/src/pages/services/RmmServices.tsx
index 509e4f5..83fb494 100644
--- a/src/pages/services/RmmServices.tsx
+++ b/src/pages/services/RmmServices.tsx
@@ -126,7 +126,7 @@ const RmmServices = () => {
       <Navigation />
 
       {/* Hero Section */}
-      <section className="relative container mx-auto px-6 pt-32 pb-20">
+      {/* <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
@@ -139,7 +139,7 @@ const RmmServices = () => {
           </p>
         </div>
 
-        {/* Animated Network Map */}
+        
         <div className="glass-strong rounded-3xl p-8 max-w-5xl mx-auto mb-20 animate-slide-in-up" style={{ animationDelay: "200ms" }}>
           <div className="aspect-video glass-card rounded-2xl flex items-center justify-center relative overflow-hidden">
             <div className="relative">
@@ -168,7 +168,7 @@ const RmmServices = () => {
             ))}
           </div>
         </div>
-      </section>
+      </section> */}
 
       {/* Features Grid */}
       <section className="container mx-auto px-6 py-20">
@@ -200,7 +200,7 @@ const RmmServices = () => {
       </section>
 
       {/* Live Status Simulation */}
-      <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-8 md:p-12 max-w-5xl mx-auto">
           <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4 text-center">
             Live Dashboard Preview
@@ -245,7 +245,7 @@ const RmmServices = () => {
             </div>
           )}
         </div>
-      </section>
+      </section> */}
 
       {/* Benefits Stats */}
       <section className="container mx-auto px-6 py-20">
@@ -270,7 +270,7 @@ const RmmServices = () => {
       </section>
 
       {/* Pricing Tiers */}
-      <section className="container mx-auto px-6 py-20">
+      {/* <section className="container mx-auto px-6 py-20">
         <h2 className="text-4xl font-bold text-center text-foreground mb-4">
           Choose Your Monitoring Plan
         </h2>
@@ -308,7 +308,7 @@ const RmmServices = () => {
             </Card>
           ))}
         </div>
-      </section>
+      </section> */}
 
       {/* CTA Section */}
       <section className="container mx-auto px-6 py-20">