added some new ui updates and some optimisation

.github/workflows/ci.yml

@@ -0,0 +1,29 @@
+name: CI
+
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Set up Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20'
+        cache: 'npm'
+
+    - name: Install dependencies
+      run: npm install
+
+    - name: Lint
+      run: npm run lint
+
+    - name: Build
+      run: npm run build

.github/workflows/deploy.yml

@@ -0,0 +1,19 @@
+name: Deploy
+
+on:
+  workflow_run:
+    workflows: ["CI"]
+    types:
+      - completed
+    branches: [main, master]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    if: ${{ github.event.workflow_run.conclusion == 'success' }}
+    steps:
+      - name: Deploying to Production
+        run: echo "Starting deployment to production environment..."
+      # Add actual deployment steps here (e.g., Vercel, Netlify, GH Pages)
+      - name: Completion
+        run: echo "Deployment workflow triggered successfully."

index.html

@@ -7,15 +7,8 @@
 
     <meta name="description" content="Transform Africa's tech with NexaTech Rwanda's innovative solutions. We're creating the tech ecosystem that will make Rwanda the brain of Africa's technological revolution." />
     <meta name="author" content="NexaTech Rwanda" />
-
-    <!-- Favicon -->
-    <link rel="icon" type="image/x-icon" href="/favicon.ico" color="#000000"/>
-
-    <!-- Open Graph Meta Tags -->
-    <meta property="og:title" content="NexaTech Rwanda - Building Africa's Tech Ecosystem" />
-    <meta property="og:description" content="Transform Africa's tech with NexaTech Rwanda's innovative solutions." />
-    <meta property="og:type" content="website" />
-    <meta property="og:image" content="" />
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="apple-touch-icon" href="/favicon.ico" />
 
     <!-- Twitter Meta Tags -->
     <meta name="twitter:card" content="summary_large_image" />

package.json

@@ -54,6 +54,7 @@
     "react": "^18.3.1",
     "react-day-picker": "^8.10.1",
     "react-dom": "^18.3.1",
+    "react-helmet-async": "^2.0.5",
     "react-hook-form": "^7.61.1",
     "react-resizable-panels": "^2.1.9",
     "react-router-dom": "^6.30.1",

public/manifest.json

@@ -0,0 +1,20 @@
+{
+  "short_name": "NexaTech",
+  "name": "NexaTech Rwanda",
+  "icons": [
+    {
+      "src": "/favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "/og-image.png",
+      "type": "image/png",
+      "sizes": "1200x630"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#0057B8",
+  "background_color": "#ffffff"
+}

public/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://nexatech.co.rw/sitemap.xml

src/App.tsx

@@ -3,38 +3,52 @@ import { Toaster as Sonner } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { HelmetProvider } from "react-helmet-async";
+import React, { Suspense, lazy } from "react";
 
-import Index from "./pages/Index";
-import About from "./pages/About";
-import Work from "./pages/Work";
-import ShoppaDetail from "./pages/ShoppaDetail";
-import Contact from "./pages/Contact";
-import NotFound from "./pages/NotFound";
+// Lazy load pages for better performance
+const Index = lazy(() => import("./pages/Index"));
+const About = lazy(() => import("./pages/About"));
+const Work = lazy(() => import("./pages/Work"));
+const ShoppaDetail = lazy(() => import("./pages/ShoppaDetail"));
+const Contact = lazy(() => import("./pages/Contact"));
+const NotFound = lazy(() => import("./pages/NotFound"));
 
 const queryClient = new QueryClient();
 
+// Loading component for Suspense
+const PageLoader = () => (
+  <div className="h-screen w-full flex items-center justify-center bg-white">
+    <div className="w-8 h-8 border-4 border-[#0057B8] border-t-transparent rounded-full animate-spin"></div>
+  </div>
+);
+
 const App = () => (
-  <QueryClientProvider client={queryClient}>
-    <TooltipProvider>
-      <Toaster />
-      <Sonner />
-      <BrowserRouter>
-        <Routes>
-          {/* Home */}
-          <Route path="/" element={<Index />} />
+  <HelmetProvider>
+    <QueryClientProvider client={queryClient}>
+      <TooltipProvider>
+        <Toaster />
+        <Sonner />
+        <BrowserRouter>
+          <Suspense fallback={<PageLoader />}>
+            <Routes>
+              {/* Home */}
+              <Route path="/" element={<Index />} />
 
-          {/* Other pages */}
-          <Route path="/about" element={<About />} />
-          <Route path="/work" element={<Work />} />
-          <Route path="/work/shoppa" element={<ShoppaDetail />} />
-          <Route path="/contact" element={<Contact />} />
+              {/* Other pages */}
+              <Route path="/about" element={<About />} />
+              <Route path="/work" element={<Work />} />
+              <Route path="/work/shoppa" element={<ShoppaDetail />} />
+              <Route path="/contact" element={<Contact />} />
 
-          {/* 404 – MUST stay last */}
-          <Route path="*" element={<NotFound />} />
-        </Routes>
-      </BrowserRouter>
-    </TooltipProvider>
-  </QueryClientProvider>
+              {/* 404 – MUST stay last */}
+              <Route path="*" element={<NotFound />} />
+            </Routes>
+          </Suspense>
+        </BrowserRouter>
+      </TooltipProvider>
+    </QueryClientProvider>
+  </HelmetProvider>
 );
 
 export default App;