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

Merge pull request #2 from yusuf-intern/main

Browse Source 
Clean up UI components, remove unnecessary libs, improve navigation &…
This commit is contained in:
Huzefa Mohammed Hussain
2025-12-10 20:33:05 +04:00
committed by GitHub
parent ae41548799 527131de00
commit c0d0c00531
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">