Taha-Tunkiwala/OpenXpert-Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Clean up UI components, remove unnecessary libs, improve navigation & portfolio

Browse Source 
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
This commit is contained in:
Yusuf Sabuwala
2025-12-10 15:54:54 +00:00
parent ae41548799
commit 527131de00
14 changed files with 60 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

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

4
src/components/Footer.tsx
View File

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

2
src/components/Navigation.tsx
View File

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

6
src/components/ParticleField.tsx
View File

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

12
src/components/ScrollToTop.tsx Normal file
View File

@@ -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;
}

2
src/components/ui/button.tsx
View File

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

4
src/index.css
View File

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

8
src/pages/Contact.tsx
View File

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

8
src/pages/Index.tsx
View File

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

4
src/pages/Portfolio.tsx
View File

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

12
src/pages/services/AmcSupport.tsx
View File

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

12
src/pages/services/ECommerce.tsx
View File

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

8
src/pages/services/ErpSystems.tsx
View File

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

14
src/pages/services/RmmServices.tsx
View File

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