PageSourceSearch

https://alisaleem252.com/case-studies/custom-dashboard-plugin

html alisaleem252.com collected 2026-10-02 04:40:17 UTC 210,911 bytes, 155 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3    <head>
4      <meta charset="UTF-8" />
5      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6      <!-- Primary Meta Tags -->
7    <title>Ali Saleem | Freelance WordPress Developer | Custom Plugin & Theme Development</title>
8    <meta name="title" content="Ali Saleem | Freelance WordPress Developer | Custom Plugin & Theme Development" />
9    <meta name="description" content="Hire Ali Saleem, a skilled Freelance WordPress Developer specializing in custom plugin and theme development. Get fast, secure, and scalable WordPress solutions tailored to your needs. 10+ years experience, 2400+ projects, 400+ happy clients." />
10    <meta name="keywords" content="WordPress Developer, Freelance WordPress Developer, Custom WordPress Plugin Development, WordPress Theme Development, Hire WordPress Developer, WooCommerce Developer, AI Integration WordPress, Payment Gateway Integration" />
11    <meta name="author" content="Ali Saleem" />
12    <meta name="robots" content="index, follow" />
13    
14    <!-- Open Graph / Facebook -->
15    <meta property="og:type" content="website" />
16    <meta property="og:url" content="https://alisaleem252.com/" />
17    <meta property="og:title" content="Ali Saleem - Freelance WordPress Developer | Custom Plugin & Theme Development" />
18    <meta property="og:description" content="Expert WordPress developer with 10+ years experience. Specializing in custom plugin development, theme creation, AI integrations, and WooCommerce solutions. 2400+ projects delivered, 400+ happy clients." />
19    <meta property="og:image" content="https://alisaleem252.com/og-image.jpg" />
20    <meta property="og:image:width" content="1200" />
21    <meta property="og:image:height" content="630" />
22    <meta property="og:site_name" content="Ali Saleem" />
23    <meta property="og:locale" content="en_US" />
24
25    <!-- Twitter -->
26    <meta name="twitter:card" content="summary_large_image" />
27    <meta name="twitter:url" content="https://alisaleem252.com/" />
28    <meta name="twitter:title" content="Ali Saleem - Freelance WordPress Developer" />
29    <meta name="twitter:description" content="Expert WordPress developer with 10+ years experience. Custom plugin & theme development, AI integrations, WooCommerce solutions." />
30    <meta name="twitter:image" content="https://alisaleem252.com/og-image.jpg" />
31    <meta name="twitter:site" content="@alisaleem252" />
32    <meta name="twitter:creator" content="@alisaleem252" />
33
34    <!-- Canonical URL -->
35    <link rel="canonical" href="https://alisaleem252.com/" />
36
37    <!-- Additional Meta Tags -->
38    <meta name="theme-color" content="#000000" />
39    <meta name="msapplication-TileColor" content="#000000" />
40    
41    <!-- Structured Data (JSON-LD) -->
42    
42<script type="application/ld+json">
43    {
44      "@context": "https://schema.org",
45      "@type": "Person",
46      "name": "Ali Saleem",
47      "jobTitle": "Freelance WordPress Developer",
48      "description": "Expert WordPress plugin and theme developer with 10+ years experience. Specializing in custom plugin development, AI integrations, WooCommerce solutions, and payment gateway integration.",
49      "url": "https://alisaleem252.com",
50      "image": "https://alisaleem252.com/favicon.ico",
51      "email": "[email protected]",
52      "telephone": "+923164615153",
53      "sameAs": [
54        "https://www.youtube.com/@alisaleem252",
55        "https://facebook.com/alisaleem252",
56        "https://twitter.com/alisaleem252",
57        "https://github.com/alisaleem252",
58        "https://www.fiverr.com/wpfixit",
59        "https://www.upwork.com/freelancers/alis71",
60        "https://codecanyon.net/user/alisaleem252/portfolio",
61        "https://profiles.wordpress.org/zinger252",
62        "https://webostock.com/author/alisaleem252"
63      ],
64      "address": {
65        "@type": "PostalAddress",
66        "addressLocality": "New York City",
67        "addressRegion": "New York",
68        "addressCountry": "USA"
69      },
70      "knowsAbout": [
71        "WordPress Plugin Development",
72        "WordPress Theme Development",
73        "PHP Development",
74        "WooCommerce Development",
75        "AI Integration",
76        "Payment Gateway Integration",
77        "Custom WordPress Solutions",
78        "JavaScript",
79        "MySQL Database Design"
80      ],
81      "workLocation": {
82        "@type": "Place",
83        "name": "New York City, New York, USA"
84      }
85    }
86    </script>
86
87
88    <!-- Professional Service Schema -->
89    
89<script type="application/ld+json">
90    {
91      "@context": "https://schema.org",
92      "@type": "ProfessionalService",
93      "name": "Ali Saleem WordPress Development Services",
94      "description": "Professional WordPress development services including custom plugin development, theme creation, AI integration, and WooCommerce solutions",
95      "url": "https://alisaleem252.com",
96      "telephone": "+923164615153",
97      "email": "[email protected]",
98      "priceRange": "$$$",
99      "areaServed": "Worldwide",
100      "availableLanguage": ["English", "Urdu"],
101      "hasOfferCatalog": {
102        "@type": "OfferCatalog",
103        "name": "WordPress Development Services",
104        "itemListElement": [
105          {
106            "@type": "Offer",
107            "itemOffered": {
108              "@type": "Service",
109              "name": "Custom WordPress Plugin Development",
110              "description": "Custom WordPress plugin development tailored to your business needs"
111            }
112          },
113          {
114            "@type": "Offer",
115            "itemOffered": {
116              "@type": "Service",
117              "name": "WordPress Theme Development",
118              "description": "Professional React-based WordPress theme development"
119            }
120          },
121          {
122            "@type": "Offer",
123            "itemOffered": {
124              "@type": "Service",
125              "name": "AI Integration Services",
126              "description": "Custom AI integration with WordPress using OpenAI, Claude, and more"
127            }
128          }
129        ]
130      }
131    }
132    </script>
132
133      
133<script type="module" crossorigin src="https://alisaleem252.com/assets/app.js?v=3.2.2"></script>
133
134      <link rel="stylesheet" crossorigin href="https://alisaleem252.com/assets/public.css?v=3.2.2">
135    </head>
136
137    <body>
138      <div id="root"><div class="min-h-screen bg-background text-foreground"><div class="fixed top-0 left-0 right-0 h-1 bg-primary origin-left z-50" aria-hidden="true" style="transform: scaleX(0);"></div><a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-primary text-white p-2 rounded z-50">Skip to main content</a><header class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 bg-background/60 backdrop-blur-md" style="opacity: 1; transform: none;"><div class="container mx-auto px-6 py-3"><div class="flex items-center justify-between"><a href="/" data-discover="true"><div class="flex items-center gap-3 cursor-pointer" tabindex="0"><div class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary to-primary/60 flex items-center justify-center shadow-lg"><span class="text-white font-bold text-lg"><img src="https://alisaleem252.com/img/logo.png"></span></div><span class="text-xl font-semibold text-foreground hidden sm:block" style="font-family: Poppins;">Ali Saleem</span></div></a><nav class="hidden lg:flex items-center gap-2"><a href="/" data-discover="true"><div class="px-4 py-2 rounded-lg transition-all duration-200 bg-primary text-white shadow-md" tabindex="0">Home</div></a><a href="#about" class="px-4 py-2 rounded-lg text-foreground hover:bg-primary/10 transition-all duration-200" tabindex="0">About</a><a href="#skills" class="px-4 py-2 rounded-lg text-foreground hover:bg-primary/10 transition-all duration-200" tabindex="0">Skills</a><a href="#projects" class="px-4 py-2 rounded-lg text-foreground hover:bg-primary/10 transition-all duration-200" tabindex="0">Projects</a><a href="/case-studies" data-discover="true"><div class="px-4 py-2 rounded-lg transition-all duration-200 text-foreground hover:bg-primary/10" tabindex="0">Case Studies</div></a><a href="/blog" data-discover="true"><div class="px-4 py-2 rounded-lg transition-all duration-200 text-foreground hover:bg-primary/10" tabindex="0">Blog</div></a><a href="#contact" class="px-4 py-2 rounded-lg text-foreground hover:bg-primary/10 transition-all duration-200" tabindex="0">Contact</a><div class="relative"><button class="px-4 py-2 rounded-lg transition-all duration-200 flex items-center gap-1 text-foreground hover:bg-primary/10" tabindex="0">Services<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 transition-transform duration-200"><path d="m6 9 6 6 6-6"></path></svg></button></div></nav><div class="flex items-center gap-2"><div tabindex="0"><button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:text-accent-foreground dark:hover:bg-accent/50 size-9 rounded-lg hover:bg-primary/10"><div style="opacity: 1; transform: none;"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon h-5 w-5"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg></div></button></div><div tabindex="0"><button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:text-accent-foreground dark:hover:bg-accent/50 
138size-9 lg:hidden rounded-lg hover:bg-primary/10"><div style="opacity: 1; transform: none;"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu h-5 w-5"><line x1="4" x2="20" y1="12" y2="12"></line><line x1="4" x2="20" y1="6" y2="6"></line><line x1="4" x2="20" y1="18" y2="18"></line></svg></div></button></div></div></div></div></header><main id="main-content" role="main"><section id="hero" class="min-h-screen flex items-center justify-center relative overflow-hidden" aria-label="Hero section introducing Ali Saleem" style="cursor: auto;"><div class="absolute inset-0 -z-10" aria-hidden="true"><div class="absolute top-20 left-20 w-64 h-64 bg-secondary/30 rounded-full blur-3xl blob-animation"></div><div class="absolute bottom-20 right-20 w-80 h-80 bg-primary/20 rounded-full blur-3xl blob-animation" style="animation-delay: 2s;"></div><div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-accent/20 rounded-full blur-3xl blob-animation" style="animation-delay: 4s;"></div></div><div class="container mx-auto px-4 py-20"><div class="flex flex-col lg:grid lg:grid-cols-2 gap-12 items-center"><div class="relative flex items-center justify-center order-1 lg:order-2"><div class="relative z-10" style="opacity: 1; transform: none;"><div class="w-48 h-48 md:w-56 md:h-56 lg:w-220 lg:h-220 rounded-full bg-gradient-to-br from-primary/20 to-secondary/30 flex items-center justify-center"><div role="img" aria-label="Ali Saleem - WordPress Developer" class="w-44 h-44 md:w-52 md:h-52 lg:w-120 lg:h-120 rounded-full shadow-2xl" style="background-image: url(&quot;https://alisaleem252.com/img/portrait1-2.svg&quot;); background-repeat: no-repeat; background-size: auto 100%; background-position: 12.24% 50%;"></div></div></div><div class="hidden lg:block"><div class="absolute floating-icon" aria-label="CMS technology" style="left: calc(50% + 100px); top: calc(50% - 350px); animation-delay: 0.2s; opacity: 1; transform: none;"><div class="w-30 h-30 bg-card border-2 border-border rounded-lg shadow-lg flex items-center justify-center transform hover:scale-110 transition-transform duration-300"><span class="text-xs font-semibold text-foreground">CMS</span></div></div><div class="absolute floating-icon" aria-label="ERP technology" style="left: calc(50% - 250px); top: calc(50% + 80px); animation-delay: 0.4s; opacity: 1; transform: none;"><div class="w-30 h-30 bg-card border-2 border-border rounded-lg shadow-lg flex items-center justify-center transform hover:scale-110 transition-transform duration-300"><span class="text-xs font-semibold text-foreground">ERP</span></div></div><div class="absolute floating-icon" aria-label="WooCommerce technology" style="left: calc(50% + 200px); top: calc(50% - 80px); animation-delay: 0.6s; opacity: 1; transform: none;"><div class="w-30 h-30 bg-card border-2 border-border rounded-lg shadow-lg flex items-center justify-center transform hover:scale-110 transition-transform duration-300"><span class="text-xs font-semibold text-foreground">WooCommerce</span></div></div><div class="absolute floating-icon" aria-label="Stripe technology" style="left: calc(50% - 250px); top: calc(50% - 100px); animation-delay: 0.8s; opacity: 1; transform: none;"><div class="w-30 h-30 bg-card border-2 border-border rounded-lg shadow-lg flex items-center justify-center transform hover:scale-110 transition-transform duration-300"><span class="text-xs font-semibold text-foreground">Stripe</span></div></div><div class="absolute floating-icon" aria-label="React JS technology" style="left: calc(50% - 150px); top: calc(50% - 350px); animation-delay: 0.8s; opacity: 1; transform: none;"><div class="w-30 h-30 bg-card border-2 border-border rounded-lg shadow-lg flex items-center justify-center transform hover:scale-110 transition-transform duration-300"><span class="text-xs font-semibold text-foreground">React JS</span></div></div><div class="absolute floating-icon" aria-label="AI Integrations technology" style="left: calc(50% + 200px); top: calc(50% + 50px); animation-delay: 1s; opacity: 1; transform: none;"><div class="w-30 h-30 bg-card border-2 border-border rounded-lg shadow-lg flex items-center justify-center transform hover:scale-110 transition-transform duration-300"><span class="text-xs font-semibold text-foreground">AI Integrations</span></div></div></div></div><div class="space-y-6 order-2 lg:order-1 text-center lg:text-left" style="opacity: 1; transform: none;"><p class="text-base lg:text-lg text-primary font-medium" style="font-family: Poppins;
138 opacity: 1; transform: none;">Hi, I'm Ali Saleem</p><h1 class="text-4xl lg:text-6xl font-bold text-foreground" style="font-family: Poppins; opacity: 1; transform: none;">Custom WordPress &amp; <span class="text-primary">WooCommerce Development</span> for Complex Business Requirements</h1><h2 class="text-xl lg:text-2xl text-muted-foreground" style="font-family: Poppins; opacity: 1; transform: none;">Custom plugins, WooCommerce &amp; AI-powered solutions when off-the-shelf plugins aren't enough</h2><p class="text-lg text-muted-foreground max-w-2xl" style="opacity: 1; transform: none;">I build custom plugins, WooCommerce functionality, API integrations and AI-powered WordPress solutions when off-the-shelf plugins aren't enough. Delivering fast, secure and scalable WordPress solutions since 2013.</p><div class="flex flex-wrap gap-4 justify-center lg:justify-start" style="opacity: 1; transform: none;"><a href="/services/all-services" data-discover="true"><button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground h-10 rounded-md px-6 has-[&gt;svg]:px-4 bg-primary hover:bg-primary/90 transition-all duration-300"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link mr-2 h-4 w-4"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg>Request a Quote</button></a><a href="/case-studies" data-discover="true"><button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-10 rounded-md px-6 has-[&gt;svg]:px-4 border-primary text-primary hover:bg-primary hover:text-white transition-all duration-300">View Case Studies</button></a><button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-10 rounded-md px-6 has-[&gt;svg]:px-4 border-primary text-primary hover:bg-primary hover:text-white transition-all duration-300"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download mr-2 h-4 w-4"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" x2="12" y1="15" y2="3"></line></svg>Message on WhatsApp</button><button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:hover:bg-accent/50 h-10 rounded-md px-6 has-[&gt;svg]:px-4 hover:bg-primary/10 hover:text-primary transition-all duration-300"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail mr-2 h-4 w-4"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg>Get a Free Quote</button></div><div class="grid grid-cols-3 gap-4 pt-6" style="opacity: 1; transform: none;"><div class="text-center"><div class="text-2xl font-bold text-primary">10+</div><div class="text-sm text-muted-foreground">Years Experience</div></div><div class="text-center"><div class="text-2xl font-bold text-primary">400+</div><div class="text-sm text-muted-foreground">Projects</div></div><div class="text-center"><div class="text-2xl font-bold text-primary">400+</div><div class="text-sm text-muted-foreground">Happy Clients</div></div></div></div></div></div></section><section aria-label="Trusted brands" class="py-14 border-y border-border/50"><style>
139        @keyframes brands-marquee {
140          from { transform: translateX(0); }
141          to { transform: translateX(-50%); }
142        }
143        .brands-marquee-track {
144          animation: brands-marquee 190s linear infinite;
145          will-change: transform;
146        }
147        .brands-marquee:hover .brands-marquee-track {
148          animation-play-state: paused;
149        }
150      </style><div class="container mx-auto px-4"><p class="text-center text-sm font-medium uppercase tracking-[0.2em] text-muted-foreground mb-8" style="font-family: Poppins;">Trusted by leading brands &amp; organizations</p></div><div class="brands-marquee relative overflow-hidden"><div class="pointer-events-none absolute left-0 top-0 z-10 h-full w-16 bg-gradient-to-r from-background to-transparent"></div><div class="pointer-events-none absolute right-0 top-0 z-10 h-full w-16 bg-gradient-to-l from-background to-transparent"></div><div class="brands-marquee-track flex w-max items-center gap-20"><img src="/img/brands/benzinga.com.png" alt="Benzinga logo" title="Benzinga" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/bittorrent.com.png" alt="BitTorrent logo" title="BitTorrent" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/blender.org.png" alt="Blender logo" title="Blender" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/broadwayworld.com.png" alt="BroadwayWorld logo" title="BroadwayWorld" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/bu.edu.png" alt="Boston University logo" title="Boston University" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/byjus.com.png" alt="BYJU'S logo" title="BYJU'S" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/cafepress.com.png" alt="CafePress logo" title="CafePress" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/case.edu.png" alt="Case Western Reserve University logo" title="Case Western Reserve University" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/cbn.com.png" alt="CBN logo" title="CBN" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/clevelandclinic.org.png" alt="Cleveland Clinic logo" title="Cleveland Clinic" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/cointelegraph.com.png" alt="Cointelegraph logo" title="Cointelegraph" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/comodo.com.png" alt="Comodo logo" title="Comodo" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/corporatefinanceinstitute.com.png" alt="Corporate Finance Institute logo" title="Corporate Finance Institute" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/cricketwireless.com.png" alt="Cricket Wireless logo" title="Cricket Wireless" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0">
150<img src="/img/brands/css-tricks.com.png" alt="CSS-Tricks logo" title="CSS-Tricks" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/kaiserpermanente.org.png" alt="Kaiser Permanente logo" title="Kaiser Permanente" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/kampyle.com.png" alt="Kampyle logo" title="Kampyle" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/khaleejtimes.com.png" alt="Khaleej Times logo" title="Khaleej Times" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/kinsta.com.png" alt="Kinsta logo" title="Kinsta" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/nami.org.png" alt="NAMI logo" title="NAMI" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/nationaltoday.com.png" alt="National Today logo" title="National Today" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/nc.gov.png" alt="North Carolina logo" title="North Carolina" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/ndtv.com.png" alt="NDTV logo" title="NDTV" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/netdna-ssl.com.png" alt="NetDNA logo" title="NetDNA" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/newsday.com.png" alt="Newsday logo" title="Newsday" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/nielsen.com.png" alt="Nielsen logo" title="Nielsen" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/nike.com.png" alt="Nike logo" title="Nike" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/nintendolife.com.png" alt="Nintendo Life logo" title="Nintendo Life" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/ny.gov.png" alt="New York State logo" title="New York State" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/ohio-state.edu.png" alt="Ohio State logo" title="Ohio State" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/ok.gov.png" alt="Oklahoma logo" title="Oklahoma" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/openlibrary.org.png" alt="Open Library logo" title="Open Library" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/tasteofhome.com.png" alt="Taste of Home logo" title="Taste of Home" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/tawk.to.png" alt="Tawk.to logo" title="Tawk.to" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/teacherspayteachers.com.png" alt="Teachers Pay Teachers logo" title="Teachers Pay Teachers" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/techdirt.com.png" alt="Techdirt logo" title="Techdirt" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/templatemonster.com.png" alt="TemplateMonster logo" title="TemplateMonster" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/thenation.com.png" alt="The Nation logo" title="The Nation" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/therapservices.net.png" alt="Therap Services logo" title="Therap Services" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/thestar.com.my.png" alt="The Star logo" title="The Star" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/timeout.com.png" alt="Time Out logo" title="Time Out" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/tn.gov.png" alt="Tennessee logo" title="Tennessee" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0">
150<img src="/img/brands/tufts.edu.png" alt="Tufts University logo" title="Tufts University" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/tulane.edu.png" alt="Tulane University logo" title="Tulane University" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/benzinga.com.png" alt="Benzinga logo" title="Benzinga" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/bittorrent.com.png" alt="BitTorrent logo" title="BitTorrent" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/blender.org.png" alt="Blender logo" title="Blender" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/broadwayworld.com.png" alt="BroadwayWorld logo" title="BroadwayWorld" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/bu.edu.png" alt="Boston University logo" title="Boston University" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/byjus.com.png" alt="BYJU'S logo" title="BYJU'S" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/cafepress.com.png" alt="CafePress logo" title="CafePress" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/case.edu.png" alt="Case Western Reserve University logo" title="Case Western Reserve University" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/cbn.com.png" alt="CBN logo" title="CBN" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/clevelandclinic.org.png" alt="Cleveland Clinic logo" title="Cleveland Clinic" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/cointelegraph.com.png" alt="Cointelegraph logo" title="Cointelegraph" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/comodo.com.png" alt="Comodo logo" title="Comodo" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/corporatefinanceinstitute.com.png" alt="Corporate Finance Institute logo" title="Corporate Finance Institute" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/cricketwireless.com.png" alt="Cricket Wireless logo" title="Cricket Wireless" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/css-tricks.com.png" alt="CSS-Tricks logo" title="CSS-Tricks" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/kaiserpermanente.org.png" alt="Kaiser Permanente logo" title="Kaiser Permanente" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/kampyle.com.png" alt="Kampyle logo" title="Kampyle" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/khaleejtimes.com.png" alt="Khaleej Times logo" title="Khaleej Times" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/kinsta.com.png" alt="Kinsta logo" title="Kinsta" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/nami.org.png" alt="NAMI logo" title="NAMI" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/nationaltoday.com.png" alt="National Today logo" title="National Today" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/nc.gov.png" alt="North Carolina logo" title="North Carolina" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/ndtv.com.png" alt="NDTV logo" title="NDTV" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/netdna-ssl.com.png" alt="NetDNA logo" title="NetDNA" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/newsday.com.png" alt="Newsday logo" title="Newsday" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/nielsen.com.png" alt="Nielsen logo" title="Nielsen" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/nike.com.png" alt="Nike logo" title="Nike" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/nintendolife.com.png" alt="Nintendo Life logo" title="Nintendo Life" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/ny.gov.png" alt="New York State logo" title="New York State" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/ohio-state.edu.png" alt="Ohio State logo" title="Ohio State" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/ok.gov.png" alt="Oklahoma logo" title="Oklahoma" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/openlibrary.org.png" alt="Open Library logo" title="Open Library" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/tasteofhome.com.png" alt="Taste of Home logo" title="Taste of Home" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/tawk.to.png" alt="Tawk.to logo" title="Tawk.to" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/teacherspayteachers.com.png" alt="Teachers Pay Teachers logo" title="Teachers Pay Teachers" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/techdirt.com.png" alt="Techdirt logo" title="Techdirt" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/templatemonster.com.png" alt="TemplateMonster logo" title="TemplateMonster" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/thenation.com.png" alt="The Nation logo" title="The Nation" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/therapservices.net.png" alt="Therap Services logo" title="Therap Services" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/thestar.com.my.png" alt="The Star logo" title="The Star" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/timeout.com.png" alt="Time Out logo" title="Time Out" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/tn.gov.png" alt="Tennessee logo" title="Tennessee" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0">
150<img src="/img/brands/tufts.edu.png" alt="Tufts University logo" title="Tufts University" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"><img src="/img/brands/tulane.edu.png" alt="Tulane University logo" title="Tulane University" loading="lazy" class="h-24 w-auto max-w-[280px] shrink-0 object-contain opacity-70 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0"></div></div></section><section id="about" class="py-20 bg-secondary/20"><div class="container mx-auto px-4"><div class="text-center mb-16" style="opacity: 0; transform: translateY(50px);"><h2 class="text-4xl font-bold text-foreground mb-6" style="font-family: Poppins;">About Me - Your WordPress Development Expert</h2><div class="max-w-3xl mx-auto"><p class="text-lg text-muted-foreground mb-6">Hi! I'm Ali Saleem, a freelance WordPress plugin and theme developer with over 10 years of experience. I specialize in creating elegant WordPress solutions that are fast, secure, and scalable. With 400+ successful projects delivered to 400+ happy clients worldwide.</p><p class="text-lg text-muted-foreground">What sets me apart is my commitment to excellence and deep technical expertise in custom plugin development, AI integrations, WooCommerce solutions, and payment gateway integration. I don't just code - I create solutions that drive real business results.</p></div></div><div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"><div class="group" style="opacity: 0; transform: translateX(-50px);"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border h-full bg-card/50 backdrop-blur-sm border-border/50 hover:border-primary/50 transition-all duration-300"><div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-6"><div class="flex items-center mb-4"><div class="p-3 bg-primary/10 rounded-lg mr-4 group-hover:bg-primary/20 transition-colors duration-300"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code h-8 w-8 text-primary"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg></div><h3 class="text-xl font-semibold text-foreground" style="font-family: Poppins;">Custom Plugin Development</h3></div><p class="text-muted-foreground">Expert in building bespoke WordPress plugins from scratch with clean, optimized code and comprehensive documentation.</p></div></div></div><div class="group" style="opacity: 0; transform: translateX(50px);"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border h-full bg-card/50 backdrop-blur-sm border-border/50 hover:border-primary/50 transition-all duration-300"><div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-6"><div class="flex items-center mb-4"><div class="p-3 bg-primary/10 rounded-lg mr-4 group-hover:bg-primary/20 transition-colors duration-300"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search h-8 w-8 text-primary"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg></div><h3 class="text-xl font-semibold text-foreground" style="font-family: Poppins;">Theme Development</h3></div><p class="text-muted-foreground">Creating responsive, high-performance WordPress themes with advanced customizer options and modern design.</p></div></div></div><div class="group" style="opacity: 0; transform: translateX(-50px);"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border h-full bg-card/50 backdrop-blur-sm border-border/50 hover:border-primary/50 transition-all duration-300"><div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-6"><div class="flex items-center mb-4"><div class="p-3 bg-primary/10 rounded-lg mr-4 group-hover:bg-primary/20 transition-colors duration-300"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap h-8 w-8 text-primary"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg></div><h3 class="text-xl font-semibold text-foreground" style="font-family: Poppins;">WooCommerce Solutions</h3></div><p class="text-muted-foreground">Custom WooCommerce plugins, payment gateway integrations, and e-commerce functionality development.</p></div></div></div><div class="group" style="opacity: 0; transform: translateX(50px);"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border h-full bg-card/50 backdrop-blur-sm border-border/50 hover:border-primary/50 transition-all duration-300">
150<div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-6"><div class="flex items-center mb-4"><div class="p-3 bg-primary/10 rounded-lg mr-4 group-hover:bg-primary/20 transition-colors duration-300"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users h-8 w-8 text-primary"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg></div><h3 class="text-xl font-semibold text-foreground" style="font-family: Poppins;">AI Integration</h3></div><p class="text-muted-foreground">Cutting-edge AI solutions integrated with WordPress including OpenAI API and custom AI workflows.</p></div></div></div><div class="group" style="opacity: 0; transform: translateX(-50px);"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border h-full bg-card/50 backdrop-blur-sm border-border/50 hover:border-primary/50 transition-all duration-300"><div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-6"><div class="flex items-center mb-4"><div class="p-3 bg-primary/10 rounded-lg mr-4 group-hover:bg-primary/20 transition-colors duration-300"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-award h-8 w-8 text-primary"><path d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526"></path><circle cx="12" cy="8" r="6"></circle></svg></div><h3 class="text-xl font-semibold text-foreground" style="font-family: Poppins;">WordPress Expertise</h3></div><p class="text-muted-foreground">10+ years of WordPress development with deep knowledge of core, hooks, filters, and best practices.</p></div></div></div><div class="group" style="opacity: 0; transform: translateX(50px);"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border h-full bg-card/50 backdrop-blur-sm border-border/50 hover:border-primary/50 transition-all duration-300"><div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-6"><div class="flex items-center mb-4"><div class="p-3 bg-primary/10 rounded-lg mr-4 group-hover:bg-primary/20 transition-colors duration-300"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe h-8 w-8 text-primary"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path><path d="M2 12h20"></path></svg></div><h3 class="text-xl font-semibold text-foreground" style="font-family: Poppins;">Full-Stack Development</h3></div><p class="text-muted-foreground">Proficient in PHP, JavaScript, MySQL, and modern web technologies for complete WordPress solutions.</p></div></div></div></div><div class="mt-16 text-center" style="opacity: 0; transform: translateY(50px);"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border bg-gradient-to-r from-primary/10 to-secondary/20 border-primary/20 max-w-3xl mx-auto"><div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-8"><h3 class="text-2xl font-semibold text-foreground mb-4" style="font-family: Poppins;">Why Choose Me?</h3><p class="text-lg text-muted-foreground mb-6">Partner with a developer who has proven expertise, reliable delivery, and a track record of exceptional results.</p><div class="grid md:grid-cols-2 gap-4 text-left"><div class="space-y-2"><div class="flex items-center text-sm"><span class="w-1 h-1 bg-primary rounded-full mr-3"></span><span class="text-foreground">10+ years WordPress experience</span></div><div class="flex items-center text-sm"><span class="w-1 h-1 bg-primary rounded-full mr-3"></span><span class="text-foreground">400+ projects delivered</span></div><div class="flex items-center text-sm"><span class="w-1 h-1 bg-primary rounded-full mr-3"></span><span class="text-foreground">4.9/5 average rating</span></div></div><div class="space-y-2"><div class="flex items-center text-sm"><span class="w-1 h-1 bg-primary rounded-full mr-3"></span><span class="text-foreground">400+ happy clients worldwide</span></div><div class="flex items-center text-sm"><span class="w-1 h-1 bg-primary rounded-full mr-3"></span><span class="text-foreground">95% repeat client rate</span></div><div class="flex items-center text-sm"><span class="w-1 h-1 bg-primary rounded-full mr-3"></span><span class="text-foreground">Fast &amp; transparent communication</span></div></div></div></div></div></div></div></section><section id="skills" class="py-20"><div class="container mx-auto px-4"><div class="text-center mb-16" style="opacity: 0; transform: translateY(50px);"><h2 class="text-4xl font-bold text-foreground mb-6" style="font-family: Poppins;">Technical Expertise</h2><p class="text-lg text-muted-foreground max-w-2xl mx-auto">
150Comprehensive WordPress development skills with modern tools and technologies that deliver exceptional results for every project.</p></div><div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8"><div class="bg-card/50 backdrop-blur-sm rounded-lg p-6 border border-border/50 hover:border-primary/50 transition-all duration-300" style="opacity: 0; transform: translateY(50px);"><h3 class="text-xl font-semibold text-foreground mb-4" style="font-family: Poppins;">Core Technologies</h3><div class="space-y-3"><div class="group" style="opacity: 0; transform: scale(0.8);"><span data-slot="badge" class="inline-flex items-center rounded-md font-medium whitespace-nowrap shrink-0 [&amp;&gt;svg]:size-3 gap-1 [&amp;&gt;svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden [a&amp;]:hover:bg-secondary/90 w-full justify-center py-2 px-4 text-sm bg-primary/10 hover:bg-primary/20 text-primary border border-primary/20 group-hover:border-primary/40 transition-all duration-300 cursor-pointer" title="98% expertise">WordPress</span></div><div class="group" style="opacity: 0; transform: scale(0.8);"><span data-slot="badge" class="inline-flex items-center rounded-md font-medium whitespace-nowrap shrink-0 [&amp;&gt;svg]:size-3 gap-1 [&amp;&gt;svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden [a&amp;]:hover:bg-secondary/90 w-full justify-center py-2 px-4 text-sm bg-primary/10 hover:bg-primary/20 text-primary border border-primary/20 group-hover:border-primary/40 transition-all duration-300 cursor-pointer" title="95% expertise">PHP</span></div><div class="group" style="opacity: 0; transform: scale(0.8);"><span data-slot="badge" class="inline-flex items-center rounded-md font-medium whitespace-nowrap shrink-0 [&amp;&gt;svg]:size-3 gap-1 [&amp;&gt;svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden [a&amp;]:hover:bg-secondary/90 w-full justify-center py-2 px-4 text-sm bg-primary/10 hover:bg-primary/20 text-primary border border-primary/20 group-hover:border-primary/40 transition-all duration-300 cursor-pointer" title="90% expertise">JavaScript/jQuery</span></div><div class="group" style="opacity: 0; transform: scale(0.8);"><span data-slot="badge" class="inline-flex items-center rounded-md font-medium whitespace-nowrap shrink-0 [&amp;&gt;svg]:size-3 gap-1 [&amp;&gt;svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden [a&amp;]:hover:bg-secondary/90 w-full justify-center py-2 px-4 text-sm bg-primary/10 hover:bg-primary/20 text-primary border border-primary/20 group-hover:border-primary/40 transition-all duration-300 cursor-pointer" title="88% expertise">MySQL</span></div></div></div><div class="bg-card/50 backdrop-blur-sm rounded-lg p-6 border border-border/50 hover:border-primary/50 transition-all duration-300" style="opacity: 0; transform: translateY(50px);"><h3 class="text-xl font-semibold text-foreground mb-4" style="font-family: Poppins;">WordPress Development</h3><div class="space-y-3"><div class="group" style="opacity: 0; transform: scale(0.8);"><span data-slot="badge" class="inline-flex items-center rounded-md font-medium whitespace-nowrap shrink-0 [&amp;&gt;svg]:size-3 gap-1 [&amp;&gt;svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden [a&amp;]:hover:bg-secondary/90 w-full justify-center py-2 px-4 text-sm bg-primary/10 hover:bg-primary/20 text-primary border border-primary/20 group-hover:border-primary/40 transition-all duration-300 cursor-pointer" title="Expert level">Custom Plugins</span></div><div class="group" style="opacity: 0; transform: scale(0.8);"><span data-slot="badge" class="inline-flex items-center rounded-md font-medium whitespace-nowrap shrink-0 [&amp;&gt;svg]:size-3 gap-1 [&amp;&gt;svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden [a&amp;]:hover:bg-secondary/90 w-full justify-center py-2 px-4 text-sm bg-primary/10 hover:bg-primary/20 text-primary border border-primary/20 group-hover:border-primary/40 transition-all duration-300 cursor-pointer" title="Advanced">Theme Development</span></div><div class="group" style="opacity: 0; transform: scale(0.8);"><span data-slot="badge" class="inline-flex items-center rounded-md font-medium whitespace-nowrap shrink-0 [&amp;&gt;svg]:size-3 gap-1 [&amp;&gt;svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden [a&amp;]:hover:bg-secondary/90 w-full justify-center py-2 px-4 text-sm bg-primary/10 hover:bg-primary/20 text-primary border border-primary/20 group-hover:border-primary/40 transition-all duration-300 cursor-pointer" title="92% expertise">WooCommerce</span></div><div class="group" style="opacity: 0; transform: scale(0.8);"><span data-slot="badge" class="inline-flex items-center rounded-md font-medium whitespace-nowrap shrink-0 [&amp;&gt;svg]:size-3 gap-1 [&amp;&gt;svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden [a&amp;]:hover:bg-secondary/90 w-full justify-center py-2 px-4 text-sm bg-primary/10 hover:bg-primary/20 text-primary border border-primary/20 group-hover:border-primary/40 transition-all duration-300 cursor-pointer" title="REST &amp; Hooks">WordPress API</span></div></div></div><div class="bg-card/50 backdrop-blur-sm rounded-lg p-6 border border-border/50 hover:border-primary/50 transition-all duration-300" style="opacity: 0; transform: translateY(50px);"><h3 class="text-xl font-semibold text-foreground mb-4" style="font-family: Poppins;">Advanced Solutions</h3><div class="space-y-3"><div class="group" style="opacity: 0; transform: scale(0.8);"><span data-slot="badge" class="inline-flex items-center rounded-md font-medium whitespace-nowrap shrink-0 [&amp;&gt;svg]:size-3 gap-1 [&amp;&gt;svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden [a&amp;]:hover:bg-secondary/90 w-full justify-center py-2 px-4 text-sm bg-primary/10 hover:bg-primary/20 text-primary border border-primary/20 group-hover:border-primary/40 transition-all duration-300 cursor-pointer" title="85% expertise">AI Integration</span></div><div class="group" style="opacity: 0; transform: scale(0.8);"><span data-slot="badge" class="inline-flex items-center rounded-md font-medium whitespace-nowrap shrink-0 [&amp;&gt;svg]:size-3 gap-1 [&amp;&gt;svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden [a&amp;]:hover:bg-secondary/90 w-full justify-center py-2 px-4 text-sm bg-primary/10 hover:bg-primary/20 text-primary border border-primary/20 group-hover:border-primary/40 transition-all duration-300 cursor-pointer" title="Custom integration">Payment Gateways</span></div><div class="group" style="opacity: 0; transform: scale(0.8);"><span data-slot="badge" class="inline-flex items-center rounded-md font-medium whitespace-nowrap shrink-0 [&amp;&gt;svg]:size-3 gap-1 [&amp;&gt;svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden [a&amp;]:hover:bg-secondary/90 w-full justify-center py-2 px-4 text-sm bg-primary/10 hover:bg-primary/20 text-primary border border-primary/20 group-hover:border-primary/40 transition-all duration-300 cursor-pointer" title="RESTful APIs">API Development</span></div><div class="group" style="opacity: 0; transform: scale(0.8);"><span data-slot="badge" class="inline-flex items-center rounded-md font-medium whitespace-nowrap shrink-0 [&amp;&gt;svg]:size-3 gap-1 [&amp;&gt;svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden [a&amp;]:hover:bg-secondary/90 w-full justify-center py-2 px-4 text-sm bg-primary/10 hover:bg-primary/20 text-primary border border-primary/20 group-hover:border-primary/40 transition-all duration-300 cursor-pointer" title="Optimization">Database Design</span></div></div></div><div class="bg-card/50 backdrop-blur-sm rounded-lg p-6 border border-border/50 hover:border-primary/50 transition-all duration-300" style="opacity: 0; transform: translateY(50px);"><h3 class="text-xl font-semibold text-foreground mb-4" style="font-family: Poppins;">Development Tools</h3><div class="space-y-3"><div class="group" style="opacity: 0; transform: scale(0.8);"><span data-slot="badge" class="inline-flex items-center rounded-md font-medium whitespace-nowrap shrink-0 [&amp;&gt;svg]:size-3 gap-1 [&amp;&gt;svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden [a&amp;]:hover:bg-secondary/90 w-full justify-center py-2 px-4 text-sm bg-primary/10 hover:bg-primary/20 text-primary border border-primary/20 group-hover:border-primary/40 transition-all duration-300 cursor-pointer" title="Version control">Git/GitHub</span></div><div class="group" style="opacity: 0; transform: scale(0.8);"><span data-slot="badge" class="inline-flex items-center rounded-md font-medium whitespace-nowrap shrink-0 [&amp;&gt;svg]:size-3 gap-1 [&amp;&gt;svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden [a&amp;]:hover:bg-secondary/90 w-full justify-center py-2 px-4 text-sm bg-primary/10 hover:bg-primary/20 text-primary border border-primary/20 group-hover:border-primary/40 transition-all duration-300 cursor-pointer" title="Dependency management">
150Composer</span></div><div class="group" style="opacity: 0; transform: scale(0.8);"><span data-slot="badge" class="inline-flex items-center rounded-md font-medium whitespace-nowrap shrink-0 [&amp;&gt;svg]:size-3 gap-1 [&amp;&gt;svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden [a&amp;]:hover:bg-secondary/90 w-full justify-center py-2 px-4 text-sm bg-primary/10 hover:bg-primary/20 text-primary border border-primary/20 group-hover:border-primary/40 transition-all duration-300 cursor-pointer" title="Command line">WP-CLI</span></div><div class="group" style="opacity: 0; transform: scale(0.8);"><span data-slot="badge" class="inline-flex items-center rounded-md font-medium whitespace-nowrap shrink-0 [&amp;&gt;svg]:size-3 gap-1 [&amp;&gt;svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden [a&amp;]:hover:bg-secondary/90 w-full justify-center py-2 px-4 text-sm bg-primary/10 hover:bg-primary/20 text-primary border border-primary/20 group-hover:border-primary/40 transition-all duration-300 cursor-pointer" title="Xdebug, Query Monitor">Debugging Tools</span></div></div></div></div><div class="mt-16 text-center" style="opacity: 0; transform: translateY(50px);"><h3 class="text-2xl font-semibold text-foreground mb-8" style="font-family: Poppins;">Specialized Services</h3><div class="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto"><div class="p-4 bg-card/30 rounded-lg border border-border/50 hover:border-primary/50 transition-all duration-300"><h4 class="font-semibold text-foreground mb-2">Custom Plugin Development</h4><p class="text-sm text-muted-foreground">Bespoke WordPress plugins built from scratch with clean code and full documentation.</p></div><div class="p-4 bg-card/30 rounded-lg border border-border/50 hover:border-primary/50 transition-all duration-300"><h4 class="font-semibold text-foreground mb-2">AI Integration</h4><p class="text-sm text-muted-foreground">OpenAI API integration, content generation tools, and custom AI workflows.</p></div><div class="p-4 bg-card/30 rounded-lg border border-border/50 hover:border-primary/50 transition-all duration-300"><h4 class="font-semibold text-foreground mb-2">Payment Gateway Integration</h4><p class="text-sm text-muted-foreground">Secure custom payment gateway integration for WooCommerce with multi-currency support.</p></div></div></div></div></section><section id="transformation" class="py-20 bg-background" aria-label="Before and after transformation demo"><div class="container mx-auto px-4 max-w-7xl"><div class="text-center mb-10" style="opacity: 0; transform: translateY(30px);"><h2 class="text-3xl md:text-4xl font-bold mb-3">See the <span class="text-primary">Transformation</span></h2><p class="text-muted-foreground text-lg max-w-2xl mx-auto">Real results speak louder than words. Drag the slider to compare before &amp; after.</p></div><div class="relative rounded-2xl overflow-hidden shadow-2xl border border-border select-none" aria-label="Drag the divider to compare before and after images" role="img" style="height: 70vh; opacity: 0; transform: scale(0.97);"><img src="https://alisaleem252.com/img/compress-after.png" alt="After transformation" class="absolute inset-0 w-full h-full object-cover object-top" draggable="false"><div class="absolute inset-0 overflow-hidden" style="width: 58.796%;"><img src="https://alisaleem252.com/img/compress-before.png" alt="Before transformation" class="absolute inset-0 h-full object-cover object-top" draggable="false" style="width: 170.08%; max-width: none; filter: grayscale(100%);"></div><span class="absolute top-4 left-4 bg-black/60 text-white text-sm font-semibold px-3 py-1 rounded-full backdrop-blur-sm pointer-events-none">Before</span><span class="absolute top-4 right-4 bg-primary/90 text-white text-sm font-semibold px-3 py-1 rounded-full backdrop-blur-sm pointer-events-none">After</span><div class="absolute inset-y-0 w-0.5 bg-white shadow-[0_0_8px_rgba(0,0,0,0.6)]" style="left: 58.796%; transform: translateX(-50%);"></div><div class="absolute top-1/2 flex items-center justify-center w-10 h-10 rounded-full bg-white shadow-lg border-2 border-primary transition-transform scale-100" aria-hidden="true" style="left: 58.796%; transform: translate(-50%, -50%);"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-grip-vertical h-5 w-5 text-primary"><circle cx="9" cy="12" r="1"></circle><circle cx="9" cy="5" r="1"></circle><circle cx="9" cy="19" r="1"></circle><circle cx="15" cy="12" r="1"></circle><circle cx="15" cy="5" r="1"></circle><circle cx="15" cy="19" r="1"></circle></svg></div><div class="absolute bottom-5 left-1/2 -translate-x-1/2 flex items-center gap-2 bg-black/60 text-white text-sm px-4 py-2 rounded-full backdrop-blur-sm pointer-events-none" style="opacity: 1; transform: none;"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-move-horizontal h-4 w-4 animate-bounce-x"><path d="m18 8 4 4-4 4"></path><path d="M2 12h20"></path><path d="m6 8-4 4 4 4"></path></svg>
150Drag to compare</div></div></div></section><section id="projects" class="py-20 bg-secondary/20"><div class="container mx-auto px-4"><div class="text-center mb-16" style="opacity: 0; transform: translateY(50px);"><h2 class="text-5xl font-bold text-foreground mb-4" style="font-family: Poppins;">Trusted by Leading Brands Worldwide</h2><p class="text-lg text-muted-foreground max-w-3xl mx-auto mb-2">Delivering exceptional WordPress solutions to businesses across diverse industries and markets</p><div class="flex items-center justify-center gap-6 mt-4"><div class="text-center"><div class="text-3xl font-bold text-primary">44+</div><div class="text-sm text-muted-foreground">Global Clients</div></div><div class="text-center"><div class="text-3xl font-bold text-primary">161,634+</div><div class="text-sm text-muted-foreground">Combined Team Size</div></div><div class="text-center"><div class="text-3xl font-bold text-primary">9379K+</div><div class="text-sm text-muted-foreground">Social Reach</div></div></div></div><div class="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mb-8"><div class="group" style="opacity: 0; transform: scale(0.9);"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border h-full bg-card/60 backdrop-blur-sm border-border/50 hover:border-primary/60 hover:shadow-xl transition-all duration-300 overflow-hidden"><div class="relative overflow-hidden bg-gradient-to-br from-primary/5 to-secondary/5"><img src="https://alisaleem252.com/portfolio/Portoflio/benzinga.com.jpg" alt="Benzinga - WordPress client project" class="w-full h-48 object-cover object-top group-hover:scale-105 transition-transform duration-500"><div class="absolute inset-0 bg-gradient-to-t from-black/60 via-trans
150parent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div><div class="absolute inset-0 bg-primary/90 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive h-8 rounded-md gap-1.5 px-3 has-[&gt;svg]:px-2.5 bg-white text-primary hover:bg-white/90"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe h-4 w-4 mr-2"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path><path d="M2 12h20"></path></svg>Visit Website</button></div><div class="absolute top-3 left-3 bg-primary text-white px-3 py-1 rounded-full text-xs font-medium shadow-lg">Finance</div><div class="absolute top-3 right-3 bg-gradient-to-r from-yellow-400 to-orange-500 text-white px-3 py-1 rounded-full text-xs font-medium shadow-lg flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chart-column h-3 w-3"><path d="M3 3v16a2 2 0 0 0 2 2h16"></path><path d="M18 17V9"></path><path d="M13 17V5"></path><path d="M8 17v-3"></path></svg>Top 973</div></div><div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-5"><h3 class="font-bold text-foreground mb-3 text-base leading-tight group-hover:text-primary transition-colors" style="font-family: Poppins;">Benzinga</h3><div class="flex items-center gap-2 mb-3 text-sm text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe h-4 w-4 text-primary"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path><path d="M2 12h20"></path></svg><span class="truncate">benzinga.com</span></div><div class="grid grid-cols-2 gap-3 pt-3 border-t border-border/50"><div class="flex items-start gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin h-4 w-4 text-primary mt-0.5 flex-shrink-0"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx="12" cy="10" r="3"></circle></svg><div><div class="text-xs text-muted-foreground">Location</div><div class="text-xs font-medium text-foreground">Detroit</div></div></div><div class="flex items-start gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users h-4 w-4 text-primary mt-0.5 flex-shrink-0"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg><div><div class="text-xs text-muted-foreground">Team</div><div class="text-xs font-medium text-foreground">100+ people</div></div></div><div class="flex items-start gap-2 col-span-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up h-4 w-4 text-primary mt-0.5 flex-shrink-0"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline><polyline points="16 7 22 7 22 13"></polyline></svg><div><div class="text-xs text-muted-foreground">Social Reach</div><div class="text-xs font-medium text-foreground">200,000 followers</div></div></div></div><div class="mt-4 pt-3 border-t border-border/50"><div class="flex items-center justify-between"><span class="text-xs text-green-600 font-medium flex items-center gap-1"><span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>Active Client</span><span class="text-xs text-muted-foreground">WordPress Expert</span></div></div></div></div></div><div class="group" style="opacity: 0; transform: scale(0.9);"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border h-full bg-card/60 backdrop-blur-sm border-border/50 hover:border-primary/60 hover:shadow-xl transition-all duration-300 overflow-hidden"><div class="relative overflow-hidden bg-gradient-to-br from-primary/5 to-secondary/5"><img src="https://alisaleem252.com/portfolio/Portoflio/bittorrent.com.jpg" alt="BitTorrent Inc - WordPress client project" class="w-full h-48 object-cover object-top group-hover:scale-105 transition-transform duration-500"><div class="absolute inset-0 bg-gradient-to-t from-black/60 via-trans
150parent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div><div class="absolute inset-0 bg-primary/90 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive h-8 rounded-md gap-1.5 px-3 has-[&gt;svg]:px-2.5 bg-white text-primary hover:bg-white/90"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe h-4 w-4 mr-2"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path><path d="M2 12h20"></path></svg>Visit Website</button></div><div class="absolute top-3 left-3 bg-primary text-white px-3 py-1 rounded-full text-xs font-medium shadow-lg">Technology And Computing</div></div><div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-5"><h3 class="font-bold text-foreground mb-3 text-base leading-tight group-hover:text-primary transition-colors" style="font-family: Poppins;">BitTorrent Inc</h3><div class="flex items-center gap-2 mb-3 text-sm text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe h-4 w-4 text-primary"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path><path d="M2 12h20"></path></svg><span class="truncate">bittorrent.com</span></div><div class="grid grid-cols-2 gap-3 pt-3 border-t border-border/50"><div class="flex items-start gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin h-4 w-4 text-primary mt-0.5 flex-shrink-0"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx="12" cy="10" r="3"></circle></svg><div><div class="text-xs text-muted-foreground">Location</div><div class="text-xs font-medium text-foreground">San Francisco</div></div></div><div class="flex items-start gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users h-4 w-4 text-primary mt-0.5 flex-shrink-0"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg><div><div class="text-xs text-muted-foreground">Team</div><div class="text-xs font-medium text-foreground">10+ people</div></div></div><div class="flex items-start gap-2 col-span-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up h-4 w-4 text-primary mt-0.5 flex-shrink-0"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline><polyline points="16 7 22 7 22 13"></polyline></svg><div><div class="text-xs text-muted-foreground">Social Reach</div><div class="text-xs font-medium text-foreground">10,000 followers</div></div></div></div><div class="mt-4 pt-3 border-t border-border/50"><div class="flex items-center justify-between"><span class="text-xs text-green-600 font-medium flex items-center gap-1"><span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>Active Client</span><span class="text-xs text-muted-foreground">WordPress Expert</span></div></div></div></div></div><div class="group" style="opacity: 0; transform: scale(0.9);"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border h-full bg-card/60 backdrop-blur-sm border-border/50 hover:border-primary/60 hover:shadow-xl transition-all duration-300 overflow-hidden"><div class="relative overflow-hidden bg-gradient-to-br from-primary/5 to-secondary/5"><img src="https://alisaleem252.com/portfolio/Portoflio/blender.org.jpg" alt="Blender 3D - WordPress client project" class="w-full h-48 object-cover object-top group-hover:scale-105 transition-transform duration-500"><div class="absolute inset-0 bg-gradient-to-t from-black/60 via-trans
150parent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div><div class="absolute inset-0 bg-primary/90 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive h-8 rounded-md gap-1.5 px-3 has-[&gt;svg]:px-2.5 bg-white text-primary hover:bg-white/90"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe h-4 w-4 mr-2"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path><path d="M2 12h20"></path></svg>Visit Website</button></div><div class="absolute top-3 left-3 bg-primary text-white px-3 py-1 rounded-full text-xs font-medium shadow-lg">Art And Entertainment</div><div class="absolute top-3 right-3 bg-gradient-to-r from-yellow-400 to-orange-500 text-white px-3 py-1 rounded-full text-xs font-medium shadow-lg flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chart-column h-3 w-3"><path d="M3 3v16a2 2 0 0 0 2 2h16"></path><path d="M18 17V9"></path><path d="M13 17V5"></path><path d="M8 17v-3"></path></svg>Top 5,766</div></div><div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-5"><h3 class="font-bold text-foreground mb-3 text-base leading-tight group-hover:text-primary transition-colors" style="font-family: Poppins;">Blender 3D</h3><div class="flex items-center gap-2 mb-3 text-sm text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe h-4 w-4 text-primary"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path><path d="M2 12h20"></path></svg><span class="truncate">blender.org</span></div><div class="grid grid-cols-2 gap-3 pt-3 border-t border-border/50"><div class="flex items-start gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin h-4 w-4 text-primary mt-0.5 flex-shrink-0"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx="12" cy="10" r="3"></circle></svg><div><div class="text-xs text-muted-foreground">Location</div><div class="text-xs font-medium text-foreground">Amsterdam</div></div></div><div class="flex items-start gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users h-4 w-4 text-primary mt-0.5 flex-shrink-0"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg><div><div class="text-xs text-muted-foreground">Team</div><div class="text-xs font-medium text-foreground">100+ people</div></div></div><div class="flex items-start gap-2 col-span-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up h-4 w-4 text-primary mt-0.5 flex-shrink-0"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline><polyline points="16 7 22 7 22 13"></polyline></svg><div><div class="text-xs text-muted-foreground">Social Reach</div><div class="text-xs font-medium text-foreground">400,000 followers</div></div></div></div><div class="mt-4 pt-3 border-t border-border/50"><div class="flex items-center justify-between"><span class="text-xs text-green-600 font-medium flex items-center gap-1"><span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>Active Client</span><span class="text-xs text-muted-foreground">WordPress Expert</span></div></div></div></div></div><div class="group" style="opacity: 0; transform: scale(0.9);"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border h-full bg-card/60 backdrop-blur-sm border-border/50 hover:border-primary/60 hover:shadow-xl transition-all duration-300 overflow-hidden"><div class="relative overflow-hidden bg-gradient-to-br from-primary/5 to-secondary/5"><img src="https://alisaleem252.com/portfolio/Portoflio/broadwayworld.com.jpg" alt="BroadwayWorld.com - WordPress client project" class="w-full h-48 object-cover object-top group-hover:scale-105 transition-transform duration-500"><div class="absolute inset-0 bg-gradient-to-t from-black/60 via-trans
150parent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div><div class="absolute inset-0 bg-primary/90 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive h-8 rounded-md gap-1.5 px-3 has-[&gt;svg]:px-2.5 bg-white text-primary hover:bg-white/90"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe h-4 w-4 mr-2"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path><path d="M2 12h20"></path></svg>Visit Website</button></div><div class="absolute top-3 left-3 bg-primary text-white px-3 py-1 rounded-full text-xs font-medium shadow-lg">Art And Entertainment</div><div class="absolute top-3 right-3 bg-gradient-to-r from-yellow-400 to-orange-500 text-white px-3 py-1 rounded-full text-xs font-medium shadow-lg flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chart-column h-3 w-3"><path d="M3 3v16a2 2 0 0 0 2 2h16"></path><path d="M18 17V9"></path><path d="M13 17V5"></path><path d="M8 17v-3"></path></svg>Top 463</div></div><div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-5"><h3 class="font-bold text-foreground mb-3 text-base leading-tight group-hover:text-primary transition-colors" style="font-family: Poppins;">BroadwayWorld.com</h3><div class="flex items-center gap-2 mb-3 text-sm text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe h-4 w-4 text-primary"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path><path d="M2 12h20"></path></svg><span class="truncate">broadwayworld.com</span></div><div class="grid grid-cols-2 gap-3 pt-3 border-t border-border/50"><div class="flex items-start gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin h-4 w-4 text-primary mt-0.5 flex-shrink-0"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx="12" cy="10" r="3"></circle></svg><div><div class="text-xs text-muted-foreground">Location</div><div class="text-xs font-medium text-foreground">New York City</div></div></div><div class="flex items-start gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users h-4 w-4 text-primary mt-0.5 flex-shrink-0"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg><div><div class="text-xs text-muted-foreground">Team</div><div class="text-xs font-medium text-foreground">100+ people</div></div></div><div class="flex items-start gap-2 col-span-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up h-4 w-4 text-primary mt-0.5 flex-shrink-0"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline><polyline points="16 7 22 7 22 13"></polyline></svg><div><div class="text-xs text-muted-foreground">Social Reach</div><div class="text-xs font-medium text-foreground">500,000 followers</div></div></div></div><div class="mt-4 pt-3 border-t border-border/50"><div class="flex items-center justify-between"><span class="text-xs text-green-600 font-medium flex items-center gap-1"><span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>Active Client</span><span class="text-xs text-muted-foreground">WordPress Expert</span></div></div></div></div></div><div class="group" style="opacity: 0; transform: scale(0.9);"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border h-full bg-card/60 backdrop-blur-sm border-border/50 hover:border-primary/60 hover:shadow-xl transition-all duration-300 overflow-hidden"><div class="relative overflow-hidden bg-gradient-to-br from-primary/5 to-secondary/5"><img src="https://alisaleem252.com/portfolio/Portoflio/bu.edu.jpg" alt="Boston University - WordPress client project" class="w-full h-48 object-cover object-top group-hover:scale-105 transition-transform duration-500"><div class="absolute inset-0 bg-gradient-to-t from-black/60 via-trans
150parent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div><div class="absolute inset-0 bg-primary/90 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive h-8 rounded-md gap-1.5 px-3 has-[&gt;svg]:px-2.5 bg-white text-primary hover:bg-white/90"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe h-4 w-4 mr-2"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path><path d="M2 12h20"></path></svg>Visit Website</button></div><div class="absolute top-3 left-3 bg-primary text-white px-3 py-1 rounded-full text-xs font-medium shadow-lg">Technology And Computing</div><div class="absolute top-3 right-3 bg-gradient-to-r from-yellow-400 to-orange-500 text-white px-3 py-1 rounded-full text-xs font-medium shadow-lg flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chart-column h-3 w-3"><path d="M3 3v16a2 2 0 0 0 2 2h16"></path><path d="M18 17V9"></path><path d="M13 17V5"></path><path d="M8 17v-3"></path></svg>Top 1,659</div></div><div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-5"><h3 class="font-bold text-foreground mb-3 text-base leading-tight group-hover:text-primary transition-colors" style="font-family: Poppins;">Boston University</h3><div class="flex items-center gap-2 mb-3 text-sm text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe h-4 w-4 text-primary"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path><path d="M2 12h20"></path></svg><span class="truncate">bu.edu</span></div><div class="grid grid-cols-2 gap-3 pt-3 border-t border-border/50"><div class="flex items-start gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin h-4 w-4 text-primary mt-0.5 flex-shrink-0"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx="12" cy="10" r="3"></circle></svg><div><div class="text-xs text-muted-foreground">Location</div><div class="text-xs font-medium text-foreground">Boston</div></div></div><div class="flex items-start gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users h-4 w-4 text-primary mt-0.5 flex-shrink-0"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg><div><div class="text-xs text-muted-foreground">Team</div><div class="text-xs font-medium text-foreground">1000+ people</div></div></div><div class="flex items-start gap-2 col-span-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up h-4 w-4 text-primary mt-0.5 flex-shrink-0"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline><polyline points="16 7 22 7 22 13"></polyline></svg><div><div class="text-xs text-muted-foreground">Social Reach</div><div class="text-xs font-medium text-foreground">2,000 followers</div></div></div></div><div class="mt-4 pt-3 border-t border-border/50"><div class="flex items-center justify-between"><span class="text-xs text-green-600 font-medium flex items-center gap-1"><span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>Active Client</span><span class="text-xs text-muted-foreground">WordPress Expert</span></div></div></div></div></div><div class="group" style="opacity: 0; transform: scale(0.9);"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border h-full bg-card/60 backdrop-blur-sm border-border/50 hover:border-primary/60 hover:shadow-xl transition-all duration-300 overflow-hidden"><div class="relative overflow-hidden bg-gradient-to-br from-primary/5 to-secondary/5"><img src="https://alisaleem252.com/portfolio/Portoflio/byjus.com.jpg" alt="BYJUS - WordPress client project" class="w-full h-48 object-cover object-top group-hover:scale-105 transition-transform duration-500"><div class="absolute inset-0 bg-gradient-to-t from-black/60 via-trans
150parent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div><div class="absolute inset-0 bg-primary/90 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive h-8 rounded-md gap-1.5 px-3 has-[&gt;svg]:px-2.5 bg-white text-primary hover:bg-white/90"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe h-4 w-4 mr-2"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path><path d="M2 12h20"></path></svg>Visit Website</button></div><div class="absolute top-3 left-3 bg-primary text-white px-3 py-1 rounded-full text-xs font-medium shadow-lg">Science</div></div><div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-5"><h3 class="font-bold text-foreground mb-3 text-base leading-tight group-hover:text-primary transition-colors" style="font-family: Poppins;">BYJUS</h3><div class="flex items-center gap-2 mb-3 text-sm text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe h-4 w-4 text-primary"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path><path d="M2 12h20"></path></svg><span class="truncate">byjus.com</span></div><div class="grid grid-cols-2 gap-3 pt-3 border-t border-border/50"><div class="flex items-start gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin h-4 w-4 text-primary mt-0.5 flex-shrink-0"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx="12" cy="10" r="3"></circle></svg><div><div class="text-xs text-muted-foreground">Location</div><div class="text-xs font-medium text-foreground">Jayanagar East</div></div></div><div class="flex items-start gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users h-4 w-4 text-primary mt-0.5 flex-shrink-0"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg><div><div class="text-xs text-muted-foreground">Team</div><div class="text-xs font-medium text-foreground">1000+ people</div></div></div><div class="flex items-start gap-2 col-span-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up h-4 w-4 text-primary mt-0.5 flex-shrink-0"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline><polyline points="16 7 22 7 22 13"></polyline></svg><div><div class="text-xs text-muted-foreground">Social Reach</div><div class="text-xs font-medium text-foreground">200,000 followers</div></div></div></div><div class="mt-4 pt-3 border-t border-border/50"><div class="flex items-center justify-between"><span class="text-xs text-green-600 font-medium flex items-center gap-1"><span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>Active Client</span><span class="text-xs text-muted-foreground">WordPress Expert</span></div></div></div></div></div><div class="group" style="opacity: 0; transform: scale(0.9);"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border h-full bg-card/60 backdrop-blur-sm border-border/50 hover:border-primary/60 hover:shadow-xl transition-all duration-300 overflow-hidden"><div class="relative overflow-hidden bg-gradient-to-br from-primary/5 to-secondary/5"><img src="https://alisaleem252.com/portfolio/Portoflio/cafepress.com.jpg" alt="CafePress Inc - WordPress client project" class="w-full h-48 object-cover object-top group-hover:scale-105 transition-transform duration-500"><div class="absolute inset-0 bg-gradient-to-t from-black/60 via-trans
150parent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div><div class="absolute inset-0 bg-primary/90 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive h-8 rounded-md gap-1.5 px-3 has-[&gt;svg]:px-2.5 bg-white text-primary hover:bg-white/90"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe h-4 w-4 mr-2"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path><path d="M2 12h20"></path></svg>Visit Website</button></div><div class="absolute top-3 left-3 bg-primary text-white px-3 py-1 rounded-full text-xs font-medium shadow-lg">Technology And Computing</div><div class="absolute top-3 right-3 bg-gradient-to-r from-yellow-400 to-orange-500 text-white px-3 py-1 rounded-full text-xs font-medium shadow-lg flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chart-column h-3 w-3"><path d="M3 3v16a2 2 0 0 0 2 2h16"></path><path d="M18 17V9"></path><path d="M13 17V5"></path><path d="M8 17v-3"></path></svg>Top 1,220</div></div><div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-5"><h3 class="font-bold text-foreground mb-3 text-base leading-tight group-hover:text-primary transition-colors" style="font-family: Poppins;">CafePress Inc</h3><div class="flex items-center gap-2 mb-3 text-sm text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe h-4 w-4 text-primary"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path><path d="M2 12h20"></path></svg><span class="truncate">cafepress.com</span></div><div class="grid grid-cols-2 gap-3 pt-3 border-t border-border/50"><div class="flex items-start gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin h-4 w-4 text-primary mt-0.5 flex-shrink-0"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx="12" cy="10" r="3"></circle></svg><div><div class="text-xs text-muted-foreground">Location</div><div class="text-xs font-medium text-foreground">Pipersville</div></div></div><div class="flex items-start gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users h-4 w-4 text-primary mt-0.5 flex-shrink-0"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg><div><div class="text-xs text-muted-foreground">Team</div><div class="text-xs font-medium text-foreground">100+ people</div></div></div><div class="flex items-start gap-2 col-span-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up h-4 w-4 text-primary mt-0.5 flex-shrink-0"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline><polyline points="16 7 22 7 22 13"></polyline></svg><div><div class="text-xs text-muted-foreground">Social Reach</div><div class="text-xs font-medium text-foreground">20,000 followers</div></div></div></div><div class="mt-4 pt-3 border-t border-border/50"><div class="flex items-center justify-between"><span class="text-xs text-green-600 font-medium flex items-center gap-1"><span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>Active Client</span><span class="text-xs text-muted-foreground">WordPress Expert</span></div></div></div></div></div><div class="group" style="opacity: 0; transform: scale(0.9);"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border h-full bg-card/60 backdrop-blur-sm border-border/50 hover:border-primary/60 hover:shadow-xl transition-all duration-300 overflow-hidden"><div class="relative overflow-hidden bg-gradient-to-br from-primary/5 to-secondary/5"><img src="https://alisaleem252.com/portfolio/Portoflio/case.edu.jpg" alt="Case Western Reserve University - WordPress client project" class="w-full h-48 object-cover object-top group-hover:scale-105 transition-transform duration-500"><div class="absolute inset-0 bg-gradient-to-t from-black/60 via-trans
150parent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div><div class="absolute inset-0 bg-primary/90 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive h-8 rounded-md gap-1.5 px-3 has-[&gt;svg]:px-2.5 bg-white text-primary hover:bg-white/90"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe h-4 w-4 mr-2"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path><path d="M2 12h20"></path></svg>Visit Website</button></div><div class="absolute top-3 left-3 bg-primary text-white px-3 py-1 rounded-full text-xs font-medium shadow-lg">Technology And Computing</div><div class="absolute top-3 right-3 bg-gradient-to-r from-yellow-400 to-orange-500 text-white px-3 py-1 rounded-full text-xs font-medium shadow-lg flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chart-column h-3 w-3"><path d="M3 3v16a2 2 0 0 0 2 2h16"></path><path d="M18 17V9"></path><path d="M13 17V5"></path><path d="M8 17v-3"></path></svg>Top 5,593</div></div><div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-5"><h3 class="font-bold text-foreground mb-3 text-base leading-tight group-hover:text-primary transition-colors" style="font-family: Poppins;">Case Western Reserve University</h3><div class="flex items-center gap-2 mb-3 text-sm text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe h-4 w-4 text-primary"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path><path d="M2 12h20"></path></svg><span class="truncate">case.edu</span></div><div class="grid grid-cols-2 gap-3 pt-3 border-t border-border/50"><div class="flex items-start gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin h-4 w-4 text-primary mt-0.5 flex-shrink-0"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx="12" cy="10" r="3"></circle></svg><div><div class="text-xs text-muted-foreground">Location</div><div class="text-xs font-medium text-foreground">Cleveland</div></div></div><div class="flex items-start gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users h-4 w-4 text-primary mt-0.5 flex-shrink-0"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg><div><div class="text-xs text-muted-foreground">Team</div><div class="text-xs font-medium text-foreground">10000+ people</div></div></div><div class="flex items-start gap-2 col-span-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up h-4 w-4 text-primary mt-0.5 flex-shrink-0"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline><polyline points="16 7 22 7 22 13"></polyline></svg><div><div class="text-xs text-muted-foreground">Social Reach</div><div class="text-xs font-medium text-foreground">2,000 followers</div></div></div></div><div class="mt-4 pt-3 border-t border-border/50"><div class="flex items-center justify-between"><span class="text-xs text-green-600 font-medium flex items-center gap-1"><span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>Active Client</span><span class="text-xs text-muted-foreground">WordPress Expert</span></div></div></div></div></div></div><div class="text-center mb-20" style="opacity: 1; transform: none;"><button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground h-10 rounded-md has-[&gt;svg]:px-4 bg-primary hover:bg-primary/90 p-4">Load More</button></div><div class="mb-20" style="opacity: 0;"><div class="h-px bg-gradient-to-r from-transparent via-border to-transparent"></div></div><div class="text-center mb-16" style="opacity: 0; transform: translateY(50px);"><h2 class="text-4xl font-bold text-foreground mb-6" style="font-family: Poppins;">Featured Projects - Custom WordPress Solutions</h2><p class="text-lg text-muted-foreground max-w-2xl mx-auto">Showcasing custom WordPress plugins, themes, and integrations. Each project represents a unique solution with proven results and satisfied clients.</p></div><div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6"><div class="group" style="opacity: 0; transform: translateY(50px);"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border h-full bg-card/50 backdrop-blur-sm border-border/50 hover:border-primary/50 transition-all duration-300 overflow-hidden"><div class="relative overflow-hidden"><img src="https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=600&amp;h=400&amp;fit=crop" alt="Custom WooCommerce Payment Gateway - WordPress development project" class="w-full h-40 object-cover group-hover:scale-110 transition-transform duration-300"><div class="absolute inset-0 bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground h-8 rounded-md gap-1.5 px-3 has-[&gt;svg]:px-2.5 bg-primary hover:bg-primary/90"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link h-4 w-4 mr-2"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg>View Details</button></div><div class="absolute top-2 left-2 bg-primary/90 text-white px-2 py-1 rounded text-xs">WooCommerce</div><div class="absolute top-2 right-2 bg-green-500/90 text-white px-2 py-1 rounded text-xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up h-3 w-3 inline mr-1"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline><polyline points="16 7 22 7 22 13"></polyline></svg>Success</div></div>
150<div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-4"><h3 class="font-semibold text-foreground mb-2 text-sm leading-tight" style="font-family: Poppins;">Custom WooCommerce Payment Gateway</h3><p class="text-muted-foreground mb-3 text-xs leading-relaxed line-clamp-3">Custom payment gateway integration for an international e-commerce brand, supporting multi-currency transactions and seamless checkout flow with PCI compliance.</p><div class="flex flex-wrap gap-1 mb-3"><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">PHP</span><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">WooCommerce</span><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">API Integration</span></div><div class="text-xs text-green-600 font-medium mb-3">✓ 700+ sales on CodeCanyon</div><a href="/case-studies/woocommerce-payment-gateway" data-discover="true"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[&gt;svg]:px-2.5 w-full text-xs border-primary/40 text-primary hover:bg-primary hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text h-3 w-3 mr-1"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg>Read Case Study</button></a></div></div></div><div class="group" style="opacity: 0; transform: translateY(50px);"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border h-full bg-card/50 backdrop-blur-sm border-border/50 hover:border-primary/50 transition-all duration-300 overflow-hidden"><div class="relative overflow-hidden"><img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=600&amp;h=400&amp;fit=crop" alt="Membership Portal Plugin - WordPress development project" class="w-full h-40 object-cover group-hover:scale-110 transition-transform duration-300"><div class="absolute inset-0 bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground h-8 rounded-md gap-1.5 px-3 has-[&gt;svg]:px-2.5 bg-primary hover:bg-primary/90"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link h-4 w-4 mr-2"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg>View Details</button></div><div class="absolute top-2 left-2 bg-primary/90 text-white px-2 py-1 rounded text-xs">Custom Plugin</div><div class="absolute top-2 right-2 bg-green-500/90 text-white px-2 py-1 rounded text-xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up h-3 w-3 inline mr-1"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline><polyline points="16 7 22 7 22 13"></polyline></svg>Success</div></div>
150<div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-4"><h3 class="font-semibold text-foreground mb-2 text-sm leading-tight" style="font-family: Poppins;">Membership Portal Plugin</h3><p class="text-muted-foreground mb-3 text-xs leading-relaxed line-clamp-3">Custom membership levels, content restriction, and payment integration for a premium education site with automated subscription management.</p><div class="flex flex-wrap gap-1 mb-3"><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">WordPress</span><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">Custom Plugin</span><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">Payment Gateway</span></div><div class="text-xs text-green-600 font-medium mb-3">✓ 405+ reviews on Fiverr</div><a href="/case-studies/custom-membership-plugin" data-discover="true"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[&gt;svg]:px-2.5 w-full text-xs border-primary/40 text-primary hover:bg-primary hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text h-3 w-3 mr-1"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg>Read Case Study</button></a></div></div></div><div class="group" style="opacity: 0; transform: translateY(50px);"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border h-full bg-card/50 backdrop-blur-sm border-border/50 hover:border-primary/50 transition-all duration-300 overflow-hidden"><div class="relative overflow-hidden"><img src="https://images.unsplash.com/photo-1506784983877-45594efa4cbe?w=600&amp;h=400&amp;fit=crop" alt="Appointment Booking System - WordPress development project" class="w-full h-40 object-cover group-hover:scale-110 transition-transform duration-300"><div class="absolute inset-0 bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground h-8 rounded-md gap-1.5 px-3 has-[&gt;svg]:px-2.5 bg-primary hover:bg-primary/90"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link h-4 w-4 mr-2"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg>View Details</button></div><div class="absolute top-2 left-2 bg-primary/90 text-white px-2 py-1 rounded text-xs">Booking System</div><div class="absolute top-2 right-2 bg-green-500/90 text-white px-2 py-1 rounded text-xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up h-3 w-3 inline mr-1"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline><polyline points="16 7 22 7 22 13"></polyline></svg>Success</div></div>
150<div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-4"><h3 class="font-semibold text-foreground mb-2 text-sm leading-tight" style="font-family: Poppins;">Appointment Booking System</h3><p class="text-muted-foreground mb-3 text-xs leading-relaxed line-clamp-3">WordPress booking plugin with calendar integration, email notifications, SMS alerts, and payment processing for service businesses.</p><div class="flex flex-wrap gap-1 mb-3"><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">WordPress</span><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">Calendar API</span><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">Payment Integration</span></div><div class="text-xs text-green-600 font-medium mb-3">✓ Open source contribution</div><a href="/case-studies/appointment-booking-system" data-discover="true"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[&gt;svg]:px-2.5 w-full text-xs border-primary/40 text-primary hover:bg-primary hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text h-3 w-3 mr-1"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg>Read Case Study</button></a></div></div></div><div class="group" style="opacity: 0; transform: translateY(50px);"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border h-full bg-card/50 backdrop-blur-sm border-border/50 hover:border-primary/50 transition-all duration-300 overflow-hidden"><div class="relative overflow-hidden"><img src="https://images.unsplash.com/photo-1677442136019-21780ecad995?w=600&amp;h=400&amp;fit=crop" alt="AI Content Generator - WordPress development project" class="w-full h-40 object-cover group-hover:scale-110 transition-transform duration-300"><div class="absolute inset-0 bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground h-8 rounded-md gap-1.5 px-3 has-[&gt;svg]:px-2.5 bg-primary hover:bg-primary/90"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link h-4 w-4 mr-2"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg>View Details</button></div><div class="absolute top-2 left-2 bg-primary/90 text-white px-2 py-1 rounded text-xs">AI Integration</div><div class="absolute top-2 right-2 bg-green-500/90 text-white px-2 py-1 rounded text-xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up h-3 w-3 inline mr-1"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline><polyline points="16 7 22 7 22 13"></polyline></svg>Success</div></div>
150<div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-4"><h3 class="font-semibold text-foreground mb-2 text-sm leading-tight" style="font-family: Poppins;">AI Content Generator</h3><p class="text-muted-foreground mb-3 text-xs leading-relaxed line-clamp-3">WordPress plugin integrating with OpenAI API for automated content generation, SEO optimization, and image creation with custom workflows.</p><div class="flex flex-wrap gap-1 mb-3"><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">AI Integration</span><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">OpenAI API</span><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">WordPress</span></div><div class="text-xs text-green-600 font-medium mb-3">✓ Advanced AI features</div><a href="/case-studies/ai-wordpress-plugin" data-discover="true"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[&gt;svg]:px-2.5 w-full text-xs border-primary/40 text-primary hover:bg-primary hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text h-3 w-3 mr-1"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg>Read Case Study</button></a></div></div></div><div class="group" style="opacity: 0; transform: translateY(50px);"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border h-full bg-card/50 backdrop-blur-sm border-border/50 hover:border-primary/50 transition-all duration-300 overflow-hidden"><div class="relative overflow-hidden"><img src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=600&amp;h=400&amp;fit=crop" alt="Multi-vendor Marketplace - WordPress development project" class="w-full h-40 object-cover group-hover:scale-110 transition-transform duration-300"><div class="absolute inset-0 bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground h-8 rounded-md gap-1.5 px-3 has-[&gt;svg]:px-2.5 bg-primary hover:bg-primary/90"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link h-4 w-4 mr-2"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg>View Details</button></div><div class="absolute top-2 left-2 bg-primary/90 text-white px-2 py-1 rounded text-xs">Marketplace</div><div class="absolute top-2 right-2 bg-green-500/90 text-white px-2 py-1 rounded text-xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up h-3 w-3 inline mr-1"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline><polyline points="16 7 22 7 22 13"></polyline></svg>Success</div></div>
150<div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-4"><h3 class="font-semibold text-foreground mb-2 text-sm leading-tight" style="font-family: Poppins;">Multi-vendor Marketplace</h3><p class="text-muted-foreground mb-3 text-xs leading-relaxed line-clamp-3">Complete marketplace solution with vendor management, commission systems, front-end submission, and comprehensive seller dashboard.</p><div class="flex flex-wrap gap-1 mb-3"><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">WooCommerce</span><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">Multi-vendor</span><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">Commission System</span></div><div class="text-xs text-green-600 font-medium mb-3">✓ Top Rated on Upwork</div><a href="/case-studies/multi-vendor-marketplace" data-discover="true"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[&gt;svg]:px-2.5 w-full text-xs border-primary/40 text-primary hover:bg-primary hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text h-3 w-3 mr-1"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg>Read Case Study</button></a></div></div></div><div class="group" style="opacity: 0; transform: translateY(50px);"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border h-full bg-card/50 backdrop-blur-sm border-border/50 hover:border-primary/50 transition-all duration-300 overflow-hidden"><div class="relative overflow-hidden"><img src="https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?w=600&amp;h=400&amp;fit=crop" alt="Custom WordPress Theme - WordPress development project" class="w-full h-40 object-cover group-hover:scale-110 transition-transform duration-300"><div class="absolute inset-0 bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground h-8 rounded-md gap-1.5 px-3 has-[&gt;svg]:px-2.5 bg-primary hover:bg-primary/90"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link h-4 w-4 mr-2"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg>View Details</button></div><div class="absolute top-2 left-2 bg-primary/90 text-white px-2 py-1 rounded text-xs">Theme Development</div><div class="absolute top-2 right-2 bg-green-500/90 text-white px-2 py-1 rounded text-xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up h-3 w-3 inline mr-1"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline><polyline points="16 7 22 7 22 13"></polyline></svg>Success</div></div>
150<div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-4"><h3 class="font-semibold text-foreground mb-2 text-sm leading-tight" style="font-family: Poppins;">Custom WordPress Theme</h3><p class="text-muted-foreground mb-3 text-xs leading-relaxed line-clamp-3">Responsive, high-performance theme built from scratch with advanced customizer options, page builder integration, and WooCommerce support.</p><div class="flex flex-wrap gap-1 mb-3"><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">Theme Development</span><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">Custom Post Types</span><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">ACF</span></div><div class="text-xs text-green-600 font-medium mb-3">✓ 1100+ sales on Webostock</div><a href="/case-studies/custom-wordpress-theme" data-discover="true"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[&gt;svg]:px-2.5 w-full text-xs border-primary/40 text-primary hover:bg-primary hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text h-3 w-3 mr-1"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg>Read Case Study</button></a></div></div></div><div class="group" style="opacity: 0; transform: translateY(50px);"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border h-full bg-card/50 backdrop-blur-sm border-border/50 hover:border-primary/50 transition-all duration-300 overflow-hidden"><div class="relative overflow-hidden"><img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=600&amp;h=400&amp;fit=crop" alt="CRM Integration Plugin - WordPress development project" class="w-full h-40 object-cover group-hover:scale-110 transition-transform duration-300"><div class="absolute inset-0 bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground h-8 rounded-md gap-1.5 px-3 has-[&gt;svg]:px-2.5 bg-primary hover:bg-primary/90"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link h-4 w-4 mr-2"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg>View Details</button></div><div class="absolute top-2 left-2 bg-primary/90 text-white px-2 py-1 rounded text-xs">Integration</div><div class="absolute top-2 right-2 bg-green-500/90 text-white px-2 py-1 rounded text-xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up h-3 w-3 inline mr-1"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline><polyline points="16 7 22 7 22 13"></polyline></svg>Success</div></div>
150<div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-4"><h3 class="font-semibold text-foreground mb-2 text-sm leading-tight" style="font-family: Poppins;">CRM Integration Plugin</h3><p class="text-muted-foreground mb-3 text-xs leading-relaxed line-clamp-3">WordPress to CRM system connector with contact sync, form integration, analytics dashboard, and automated lead management.</p><div class="flex flex-wrap gap-1 mb-3"><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">API Development</span><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">CRM Integration</span><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">Data Sync</span></div><div class="text-xs text-green-600 font-medium mb-3">✓ WordPress.org approved</div><a href="/case-studies/api-integration" data-discover="true"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[&gt;svg]:px-2.5 w-full text-xs border-primary/40 text-primary hover:bg-primary hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text h-3 w-3 mr-1"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg>Read Case Study</button></a></div></div></div><div class="group" style="opacity: 0; transform: translateY(50px);"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border h-full bg-card/50 backdrop-blur-sm border-border/50 hover:border-primary/50 transition-all duration-300 overflow-hidden"><div class="relative overflow-hidden"><img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600&amp;h=400&amp;fit=crop" alt="Custom Dashboard Plugin - WordPress development project" class="w-full h-40 object-cover group-hover:scale-110 transition-transform duration-300"><div class="absolute inset-0 bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground h-8 rounded-md gap-1.5 px-3 has-[&gt;svg]:px-2.5 bg-primary hover:bg-primary/90"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link h-4 w-4 mr-2"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg>View Details</button></div><div class="absolute top-2 left-2 bg-primary/90 text-white px-2 py-1 rounded text-xs">Dashboard</div><div class="absolute top-2 right-2 bg-green-500/90 text-white px-2 py-1 rounded text-xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up h-3 w-3 inline mr-1"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline><polyline points="16 7 22 7 22 13"></polyline></svg>Success</div></div>
150<div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-4"><h3 class="font-semibold text-foreground mb-2 text-sm leading-tight" style="font-family: Poppins;">Custom Dashboard Plugin</h3><p class="text-muted-foreground mb-3 text-xs leading-relaxed line-clamp-3">Advanced WordPress dashboard with custom widgets, analytics, reporting, and role-based access control for enterprise clients.</p><div class="flex flex-wrap gap-1 mb-3"><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">WordPress Dashboard</span><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">Custom Widgets</span><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">Analytics</span></div><div class="text-xs text-green-600 font-medium mb-3">✓ Enterprise solution</div><a href="/case-studies/custom-dashboard-plugin" data-discover="true"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[&gt;svg]:px-2.5 w-full text-xs border-primary/40 text-primary hover:bg-primary hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text h-3 w-3 mr-1"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg>Read Case Study</button></a></div></div></div><div class="group" style="opacity: 0; transform: translateY(50px);"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border h-full bg-card/50 backdrop-blur-sm border-border/50 hover:border-primary/50 transition-all duration-300 overflow-hidden"><div class="relative overflow-hidden"><img src="https://webostock.com/wp-content/uploads/2025/10/woo-sMARTLINK-PRODUCTS-358x358.png" alt="WooCommerce + Smartlink ASI Promo Products Integration - WordPress development project" class="w-full h-40 object-cover group-hover:scale-110 transition-transform duration-300"><div class="absolute inset-0 bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground h-8 rounded-md gap-1.5 px-3 has-[&gt;svg]:px-2.5 bg-primary hover:bg-primary/90"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link h-4 w-4 mr-2"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg>View Details</button></div><div class="absolute top-2 left-2 bg-primary/90 text-white px-2 py-1 rounded text-xs">WooCommerce</div><div class="absolute top-2 right-2 bg-green-500/90 text-white px-2 py-1 rounded text-xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up h-3 w-3 inline mr-1"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline><polyline points="16 7 22 7 22 13"></polyline></svg>Success</div></div>
150<div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-4"><h3 class="font-semibold text-foreground mb-2 text-sm leading-tight" style="font-family: Poppins;">WooCommerce + Smartlink ASI Promo Products Integration</h3><p class="text-muted-foreground mb-3 text-xs leading-relaxed line-clamp-3">Automated import and sync of the Smartlink ASI promo-products catalog into WooCommerce — products, variations, inventory and all media images.</p><div class="flex flex-wrap gap-1 mb-3"><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">WooCommerce</span><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">REST API</span><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">Inventory Sync</span></div><div class="text-xs text-green-600 font-medium mb-3">✓ Automated catalog + inventory sync</div><a href="/case-studies/woocommerce-smartlink-asi-integration" data-discover="true"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[&gt;svg]:px-2.5 w-full text-xs border-primary/40 text-primary hover:bg-primary hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text h-3 w-3 mr-1"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg>Read Case Study</button></a></div></div></div><div class="group" style="opacity: 0; transform: translateY(50px);"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border h-full bg-card/50 backdrop-blur-sm border-border/50 hover:border-primary/50 transition-all duration-300 overflow-hidden"><div class="relative overflow-hidden"><img src="https://webostock.com/wp-content/uploads/2025/10/woo-sMARTLINK-PRODUCTS-358x358.png" alt="WooCommerce Catalog Import from Drivingi.com - WordPress development project" class="w-full h-40 object-cover group-hover:scale-110 transition-transform duration-300"><div class="absolute inset-0 bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground h-8 rounded-md gap-1.5 px-3 has-[&gt;svg]:px-2.5 bg-primary hover:bg-primary/90"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link h-4 w-4 mr-2"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg>View Details</button></div><div class="absolute top-2 left-2 bg-primary/90 text-white px-2 py-1 rounded text-xs">WooCommerce</div><div class="absolute top-2 right-2 bg-green-500/90 text-white px-2 py-1 rounded text-xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up h-3 w-3 inline mr-1"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline><polyline points="16 7 22 7 22 13"></polyline></svg>Success</div></div>
150<div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-4"><h3 class="font-semibold text-foreground mb-2 text-sm leading-tight" style="font-family: Poppins;">WooCommerce Catalog Import from Drivingi.com</h3><p class="text-muted-foreground mb-3 text-xs leading-relaxed line-clamp-3">Full product catalog imported from drivingi.com into WooCommerce with every variation, stock availability, pricing and all images.</p><div class="flex flex-wrap gap-1 mb-3"><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">WooCommerce</span><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">Product Import</span><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">Variations</span></div><div class="text-xs text-green-600 font-medium mb-3">✓ Entire catalog imported, ready to sell</div><a href="/case-studies/woocommerce-drivingi-import" data-discover="true"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[&gt;svg]:px-2.5 w-full text-xs border-primary/40 text-primary hover:bg-primary hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text h-3 w-3 mr-1"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg>Read Case Study</button></a></div></div></div><div class="group" style="opacity: 0; transform: translateY(50px);"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border h-full bg-card/50 backdrop-blur-sm border-border/50 hover:border-primary/50 transition-all duration-300 overflow-hidden"><div class="relative overflow-hidden"><img src="https://cdn.prod.website-files.com/68656f93c6517a9f0078673b/68cbb6988c6b5e4df8fc8ba5_dreaming-spanish-og.jpg" alt="Spanish Course Website Rebuild with ReactJS - WordPress development project" class="w-full h-40 object-cover group-hover:scale-110 transition-transform duration-300"><div class="absolute inset-0 bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground h-8 rounded-md gap-1.5 px-3 has-[&gt;svg]:px-2.5 bg-primary hover:bg-primary/90"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link h-4 w-4 mr-2"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg>View Details</button></div><div class="absolute top-2 left-2 bg-primary/90 text-white px-2 py-1 rounded text-xs">Headless WordPress</div><div class="absolute top-2 right-2 bg-green-500/90 text-white px-2 py-1 rounded text-xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up h-3 w-3 inline mr-1"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline><polyline points="16 7 22 7 22 13"></polyline></svg>Success</div></div>
150<div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-4"><h3 class="font-semibold text-foreground mb-2 text-sm leading-tight" style="font-family: Poppins;">Spanish Course Website Rebuild with ReactJS</h3><p class="text-muted-foreground mb-3 text-xs leading-relaxed line-clamp-3">Complete UI rebuild of a Spanish course website — custom REST endpoints powering a ReactJS frontend with membership and ACF-based content.</p><div class="flex flex-wrap gap-1 mb-3"><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">ReactJS</span><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">WordPress REST API</span><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">ACF</span></div><div class="text-xs text-green-600 font-medium mb-3">✓ Modern React frontend on WordPress</div><a href="/case-studies/spanish-course-react-rebuild" data-discover="true"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[&gt;svg]:px-2.5 w-full text-xs border-primary/40 text-primary hover:bg-primary hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text h-3 w-3 mr-1"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg>Read Case Study</button></a></div></div></div></div><div class="mt-8 text-center" style="opacity: 0; transform: translateY(20px);"><a href="/case-studies" data-discover="true"><button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-10 rounded-md px-6 has-[&gt;svg]:px-4 border-primary text-primary hover:bg-primary hover:text-white">View All Case Studies<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link ml-2 h-4 w-4"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></button></a></div><div class="mt-12 text-center" style="opacity: 0; transform: translateY(50px);"><h3 class="text-xl font-semibold text-foreground mb-6" style="font-family: Poppins;">View More Work</h3><div class="grid md:grid-cols-4 gap-4 max-w-4xl mx-auto"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border bg-card/30 backdrop-blur-sm border-border/50 hover:border-primary/50 transition-all duration-300 group cursor-pointer"><div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-4 text-center"><h4 class="font-medium text-foreground mb-2 text-sm">Fiverr Profile</h4><p class="text-xs text-muted-foreground mb-2">405+ Reviews</p><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 rounded-md gap-1.5 has-[&gt;svg]:px-2.5 text-xs h-6 px-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link h-3 w-3 mr-1"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg>View</button></div></div><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border bg-card/30 backdrop-blur-sm border-border/50 hover:border-primary/50 transition-all duration-300 group cursor-pointer">
150<div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-4 text-center"><h4 class="font-medium text-foreground mb-2 text-sm">Upwork Profile</h4><p class="text-xs text-muted-foreground mb-2">Top Rated</p><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 rounded-md gap-1.5 has-[&gt;svg]:px-2.5 text-xs h-6 px-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link h-3 w-3 mr-1"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg>View</button></div></div><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border bg-card/30 backdrop-blur-sm border-border/50 hover:border-primary/50 transition-all duration-300 group cursor-pointer"><div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-4 text-center"><h4 class="font-medium text-foreground mb-2 text-sm">CodeCanyon</h4><p class="text-xs text-muted-foreground mb-2">700+ Sales</p><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 rounded-md gap-1.5 has-[&gt;svg]:px-2.5 text-xs h-6 px-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link h-3 w-3 mr-1"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg>View</button></div></div><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border bg-card/30 backdrop-blur-sm border-border/50 hover:border-primary/50 transition-all duration-300 group cursor-pointer"><div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-4 text-center"><h4 class="font-medium text-foreground mb-2 text-sm">Webostock</h4><p class="text-xs text-muted-foreground mb-2">1100+ Sales</p><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 rounded-md gap-1.5 has-[&gt;svg]:px-2.5 text-xs h-6 px-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link h-3 w-3 mr-1"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg>View</button></div></div></div></div><div class="text-center mt-16" style="opacity: 0; transform: translateY(50px);"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border bg-gradient-to-r from-primary/10 to-secondary/20 border-primary/20 max-w-xl mx-auto">
150<div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-6"><h3 class="text-xl font-semibold text-foreground mb-3" style="font-family: Poppins;">Ready for Your Custom Solution?</h3><p class="text-muted-foreground mb-4 text-sm">Join 400+ satisfied clients who've transformed their WordPress websites with custom development.</p><button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground h-10 rounded-md px-6 has-[&gt;svg]:px-4 bg-primary hover:bg-primary/90">Start Your Project</button></div></div></div></div></section><section id="experience" class="py-20"><div class="container mx-auto px-4"><div class="text-center mb-16" style="opacity: 0; transform: translateY(50px);"><h2 class="text-4xl font-bold text-foreground mb-6" style="font-family: Poppins;">Work Experience</h2><p class="text-lg text-muted-foreground max-w-2xl mx-auto">A decade of WordPress development excellence, delivering custom solutions to clients worldwide.</p></div><div class="max-w-4xl mx-auto"><div class="relative"><div class="absolute left-4 top-0 bottom-0 w-0.5 bg-primary/20"></div><div class="relative mb-12 ml-12" style="opacity: 0; transform: translateX(-50px);"><div class="absolute -left-8 top-6 w-4 h-4 bg-primary rounded-full border-4 border-background z-10"></div><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border bg-card/50 backdrop-blur-sm border-border/50 hover:border-primary/50 transition-all duration-300"><div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-6"><div class="mb-4"><span class="inline-flex items-center px-3 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium">⭐ Top Rated Freelancer - Multiple Platforms</span></div><div class="mb-4"><h3 class="text-xl font-semibold text-foreground mb-2" style="font-family: Poppins;">Freelance WordPress Developer</h3><div class="flex flex-wrap gap-4 text-muted-foreground"><div class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up h-4 w-4 mr-2"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline><polyline points="16 7 22 7 22 13"></polyline></svg>Self-Employed</div><div class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin h-4 w-4 mr-2"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx="12" cy="10" r="3"></circle></svg>New York City, USA (Remote)</div><div class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-4 w-4 mr-2"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>2013 - Present (10+ years)</div></div></div><p class="text-muted-foreground mb-4">Full-time freelance WordPress plugin and theme developer serving clients worldwide through multiple platforms.</p><div class="mb-4"><h4 class="font-semibold text-foreground mb-2">Key Achievements:</h4><ul class="space-y-1"><li class="flex items-start text-muted-foreground"><span class="w-1 h-1 bg-primary rounded-full mr-3 mt-2 flex-shrink-0"></span><span>Delivered 400+ WordPress projects with 98% client satisfaction</span></li><li class="flex items-start text-muted-foreground"><span class="w-1 h-1 bg-primary rounded-full mr-3 mt-2 flex-shrink-0"></span><span>Maintained 4.9/5 average rating across all platforms</span></li><li class="flex items-start text-muted-foreground"><span class="w-1 h-1 bg-primary rounded-full mr-3 mt-2 flex-shrink-0"></span><span>Achieved Top Rated status on Upwork with 95% repeat client rate</span></li><li class="flex items-start text-muted-foreground"><span class="w-1 h-1 bg-primary rounded-full mr-3 mt-2 flex-shrink-0"></span><span>Published 700+ sales on CodeCanyon and 1,100+ on Webostock</span></li><li class="flex items-start text-muted-foreground"><span class="w-1 h-1 bg-primary rounded-full mr-3 mt-2 flex-shrink-0"></span><span>Served 400+ happy clients across diverse industries</span></li></ul></div><div class="flex flex-wrap gap-2"><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">WordPress</span><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">PHP</span><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">WooCommerce</span><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">JavaScript</span><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">MySQL</span><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">AI APIs</span></div></div></div></div><div class="relative mb-12 ml-12" style="opacity: 0; transform: translateX(-50px);"><div class="absolute -left-8 top-6 w-4 h-4 bg-primary rounded-full border-4 border-background z-10"></div><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border bg-card/50 backdrop-blur-sm border-border/50 hover:border-primary/50 transition-all duration-300">
150<div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-6"><div class="mb-4"><h3 class="text-xl font-semibold text-foreground mb-2" style="font-family: Poppins;">Senior WordPress Plugin Developer</h3><div class="flex flex-wrap gap-4 text-muted-foreground"><div class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up h-4 w-4 mr-2"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline><polyline points="16 7 22 7 22 13"></polyline></svg>CodeCanyon / Envato Market</div><div class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin h-4 w-4 mr-2"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx="12" cy="10" r="3"></circle></svg>Remote</div><div class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-4 w-4 mr-2"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>2015 - Present</div></div></div><p class="text-muted-foreground mb-4">Developing and selling premium WordPress plugins for global marketplace with focus on WooCommerce solutions.</p><div class="mb-4"><h4 class="font-semibold text-foreground mb-2">Key Achievements:</h4><ul class="space-y-1"><li class="flex items-start text-muted-foreground"><span class="w-1 h-1 bg-primary rounded-full mr-3 mt-2 flex-shrink-0"></span><span>Created multiple bestselling WordPress plugins</span></li><li class="flex items-start text-muted-foreground"><span class="w-1 h-1 bg-primary rounded-full mr-3 mt-2 flex-shrink-0"></span><span>700+ sales with consistent 5-star ratings</span></li><li class="flex items-start text-muted-foreground"><span class="w-1 h-1 bg-primary rounded-full mr-3 mt-2 flex-shrink-0"></span><span>Specialized in payment gateway integrations and custom solutions</span></li><li class="flex items-start text-muted-foreground"><span class="w-1 h-1 bg-primary rounded-full mr-3 mt-2 flex-shrink-0"></span><span>Provided exceptional customer support and regular updates</span></li></ul></div><div class="flex flex-wrap gap-2"><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">Custom Plugins</span><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">WooCommerce</span><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">Payment APIs</span><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">Security</span><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">Performance</span></div></div></div></div><div class="relative mb-12 ml-12" style="opacity: 0; transform: translateX(-50px);"><div class="absolute -left-8 top-6 w-4 h-4 bg-primary rounded-full border-4 border-background z-10"></div><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border bg-card/50 backdrop-blur-sm border-border/50 hover:border-primary/50 transition-all duration-300"><div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-6"><div class="mb-4"><h3 class="text-xl font-semibold text-foreground mb-2" style="font-family: Poppins;">WordPress Theme Developer</h3><div class="flex flex-wrap gap-4 text-muted-foreground"><div class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up h-4 w-4 mr-2"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline><polyline points="16 7 22 7 22 13"></polyline></svg>Webostock Marketplace</div><div class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin h-4 w-4 mr-2"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx="12" cy="10" r="3"></circle></svg>Remote</div><div class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-4 w-4 mr-2"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>2014 - Present</div></div></div><p class="text-muted-foreground mb-4">Creating premium WordPress themes with advanced features and customization options.
150</p><div class="mb-4"><h4 class="font-semibold text-foreground mb-2">Key Achievements:</h4><ul class="space-y-1"><li class="flex items-start text-muted-foreground"><span class="w-1 h-1 bg-primary rounded-full mr-3 mt-2 flex-shrink-0"></span><span>1,100+ theme sales demonstrating market demand</span></li><li class="flex items-start text-muted-foreground"><span class="w-1 h-1 bg-primary rounded-full mr-3 mt-2 flex-shrink-0"></span><span>Developed responsive themes with page builder integration</span></li><li class="flex items-start text-muted-foreground"><span class="w-1 h-1 bg-primary rounded-full mr-3 mt-2 flex-shrink-0"></span><span>Implemented advanced customizer options and settings panels</span></li><li class="flex items-start text-muted-foreground"><span class="w-1 h-1 bg-primary rounded-full mr-3 mt-2 flex-shrink-0"></span><span>Maintained high quality standards and regular updates</span></li></ul></div><div class="flex flex-wrap gap-2"><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">Theme Development</span><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">Custom Post Types</span><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">ACF</span><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">Page Builders</span><span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">Responsive Design</span></div></div></div></div></div></div></div></section><section id="education" class="py-20 bg-secondary/20"><div class="container mx-auto px-4"><div class="text-center mb-16" style="opacity: 0; transform: translateY(50px);"><h2 class="text-4xl font-bold text-foreground mb-6" style="font-family: Poppins;">Education &amp; Professional Recognition</h2><p class="text-lg text-muted-foreground max-w-2xl mx-auto">Continuous learning and proven excellence in WordPress development across multiple platforms.</p></div><div class="grid md:grid-cols-2 gap-8 max-w-6xl mx-auto"><div class="space-y-6"><h3 class="text-2xl font-semibold text-foreground mb-6" style="font-family: Poppins; opacity: 0; transform: translateX(-50px);">Education &amp; Training</h3><div style="opacity: 0; transform: translateY(50px);"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border bg-card/50 backdrop-blur-sm border-border/50 hover:border-primary/50 transition-all duration-300"><div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-6"><div class="flex items-start mb-4"><div class="p-3 bg-primary/10 rounded-lg mr-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-graduation-cap h-6 w-6 text-primary"><path d="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z"></path><path d="M22 10v6"></path><path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5"></path></svg></div><div class="flex-1"><h4 class="font-semibold text-foreground mb-1" style="font-family: Poppins;">Computer Science</h4><p class="text-muted-foreground text-sm mb-2">Self-Taught Developer</p><p class="text-primary text-sm font-medium">2010 - 2013</p></div></div><p class="text-muted-foreground mb-3">Intensive self-study in programming, web development, and WordPress ecosystem through online courses and practical projects.</p><div class="flex items-center text-sm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star h-4 w-4 text-yellow-500 mr-1"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><span class="text-foreground font-medium">Hands-on Experience</span></div></div></div></div><div style="opacity: 0; transform: translateY(50px);"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border bg-card/50 backdrop-blur-sm border-border/50 hover:border-primary/50 transition-all duration-300">
150<div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-6"><div class="flex items-start mb-4"><div class="p-3 bg-primary/10 rounded-lg mr-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-graduation-cap h-6 w-6 text-primary"><path d="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z"></path><path d="M22 10v6"></path><path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5"></path></svg></div><div class="flex-1"><h4 class="font-semibold text-foreground mb-1" style="font-family: Poppins;">WordPress &amp; PHP Specialization</h4><p class="text-muted-foreground text-sm mb-2">Online Learning Platforms</p><p class="text-primary text-sm font-medium">2013 - 2015</p></div></div><p class="text-muted-foreground mb-3">Advanced training in WordPress development, PHP programming, MySQL databases, and modern web technologies.</p><div class="flex items-center text-sm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star h-4 w-4 text-yellow-500 mr-1"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><span class="text-foreground font-medium">Professional Certification</span></div></div></div></div></div><div class="space-y-6"><h3 class="text-2xl font-semibold text-foreground mb-6" style="font-family: Poppins; opacity: 0; transform: translateX(50px);">Professional Recognition</h3><div style="opacity: 0; transform: translateY(50px);"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border bg-gradient-to-br from-primary/10 to-secondary/20 backdrop-blur-sm border-primary/30 hover:border-primary/50 transition-all duration-300 relative overflow-hidden"><div class="absolute top-0 right-0 w-32 h-32 bg-primary/10 rounded-full blur-2xl"></div><div class="absolute bottom-0 left-0 w-24 h-24 bg-secondary/20 rounded-full blur-xl"></div><div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-6 relative z-10"><div class="flex items-center mb-4"><div class="p-3 bg-primary/20 rounded-full mr-4 animate-pulse"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-award h-8 w-8 text-primary"><path d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526"></path><circle cx="12" cy="8" r="6"></circle></svg></div><div><h4 class="text-xl font-semibold text-foreground mb-1" style="font-family: Poppins;">Top Rated Freelancer</h4><p class="text-muted-foreground">Multiple Platforms • 2015 - Present</p></div></div><p class="text-muted-foreground mb-4">Achieved Top Rated status on Upwork and 405+ five-star reviews on Fiverr, demonstrating consistent excellence and client satisfaction.</p><div class="flex items-center justify-between"><div class="flex items-center text-sm text-primary"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star h-4 w-4 mr-1 fill-current"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><span class="font-medium">Excellence Award</span></div><div class="text-lg">⭐</div></div></div></div></div><div class="grid gap-4" style="opacity: 0; transform: translateY(50px);"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border bg-card/30 backdrop-blur-sm border-border/50 hover:border-primary/30 transition-all duration-300">
150<div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-4"><div class="flex items-center justify-between"><div><h5 class="font-medium text-foreground">Marketplace Success</h5><p class="text-sm text-muted-foreground">1,800+ total sales</p></div><div class="text-2xl">🏆</div></div></div></div><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border bg-card/30 backdrop-blur-sm border-border/50 hover:border-primary/30 transition-all duration-300"><div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-4"><div class="flex items-center justify-between"><div><h5 class="font-medium text-foreground">Client Satisfaction</h5><p class="text-sm text-muted-foreground">4.9/5 average rating</p></div><div class="text-2xl">🎯</div></div></div></div></div></div></div></div></section><section id="contact" class="py-20"><div class="container mx-auto px-4"><div class="text-center mb-12" style="opacity: 0; transform: translateY(50px);"><h2 class="text-4xl font-bold text-foreground mb-6" style="font-family: Poppins;">Let's Bring Your Vision to Life</h2><p class="text-lg text-muted-foreground max-w-3xl mx-auto mb-10">Ready to transform your online presence? Send me a message or book a free 30-minute discovery call — let's explore how we can work together.</p><div class="inline-flex items-center bg-card/50 backdrop-blur-sm border border-border/50 rounded-2xl p-1.5 gap-1"><button class="relative flex items-center gap-2 px-6 py-3 rounded-xl text-sm font-semibold transition-all duration-300 bg-primary text-primary-foreground shadow-lg shadow-primary/25"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-circle h-4 w-4"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"></path></svg>Send a Message</button><button class="relative flex items-center gap-2 px-6 py-3 rounded-xl text-sm font-semibold transition-all duration-300 text-muted-foreground hover:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-4 w-4"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>Book a Free Call<span class="absolute -top-1.5 -right-1.5 bg-green-500 text-white text-[10px] font-bold px-1.5 py-0.5 rounded-full leading-none">FREE</span></button></div></div><div style="opacity: 1; transform: none;"><div class="grid lg:grid-cols-2 gap-12 max-w-6xl mx-auto"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border bg-card/50 backdrop-blur-sm border-border/50"><div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-8"><div class="flex items-center mb-6"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-circle h-6 w-6 text-primary mr-3"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"></path></svg><h3 class="text-2xl font-semibold text-foreground" style="font-family: Poppins;">Start Your Project</h3></div><p class="text-muted-foreground mb-6">Tell me about your project and let's discuss how I can help you achieve your goals. I'll get back to you within 24 hours with a detailed response.</p><form class="space-y-6"><div class="grid md:grid-cols-2 gap-4"><div><label class="block text-sm font-medium text-foreground mb-2">Your Name *</label><input data-slot="input" class="file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-input-background border-border/50 focus:border-primary" name="name" placeholder="Enter your full name" required="" value=""></div><div><label class="block text-sm font-medium text-foreground mb-2">Email Address *</label><input type="email" data-slot="input" class="file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-input-background border-border/50 focus:border-primary" name="email" placeholder="[email protected]" required="" value=""></div></div><div><label class="block text-sm font-medium text-foreground mb-2">Project Type</label><select name="projectType" class="w-full p-3 bg-input-background border border-border/50 focus:border-primary rounded-lg text-foreground"><option value="">Select your project type</option><option value="Custom WordPress Plugin">Custom WordPress Plugin</option><option value="WordPress Theme Development">WordPress Theme Development</option><option value="WooCommerce Extension">WooCommerce Extension</option><option value="Payment Gateway Integration">Payment Gateway Integration</option><option value="AI Integration">AI Integration</option><option value="WordPress Fix/Bug">WordPress Fix/Bug</option><option value="Monthly Development">Monthly Development</option><option value="Other">Other</option></select></div><div><label class="block text-sm font-medium text-foreground mb-2">Project Details *</label><textarea data-slot="textarea" class="placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border px-3 py-2 text-base transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm bg-input-background border-border/50 focus:border-primary resize-none" name="message" placeholder="Tell me about your project goals, timeline, and any specific requirements..." required="" rows="6"></textarea></div><div class="flex justify-center"><div><div><div style="width: 304px; height: 78px;"><div><iframe title="reCAPTCHA" width="304" height="78" role="presentation" name="a-6a8vbil3ol28" frameborder="0" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox allow-storage-access-by-user-activation" src="https://www.google.com/recaptcha/api2/anchor?ar=1&amp;k=6Le5exAsAAAAABjTUHx3bYQuJJv9iOyU52fEr4z6&amp;co=aHR0cHM6Ly9hbGlzYWxlZW0yNTIuY29tOjQ0Mw..&amp;hl=en&amp;type=image&amp;v=zqB-6Xpbd3lCIvi7Tr2D0pob&amp;theme=light&amp;size=normal&amp;badge=bottomright&amp;anchor-ms=20000&amp;execute-ms=30000&amp;cb=v542f25gu1w5"></iframe></div><textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px; resize: none; display: none;"></textarea></div><iframe style="display: none;"></iframe></div></div></div><button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium disabled:pointer-events-none [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground h-10 rounded-md px-6 has-[&gt;svg]:px-4 w-full bg-primary hover:bg-primary/90 transition-all duration-300 disabled:opacity-50" type="submit"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-send mr-2 h-4 w-4"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"></path><path d="m21.854 2.147-10.94 10.939"></path></svg>Send Message &amp; Get Free Quote</button></form></div></div><div class="space-y-6"><h3 class="text-2xl font-semibold text-foreground mb-6" style="font-family: Poppins;">Get in Touch</h3><div style="opacity: 0; transform: translateY(20px);"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border bg-card/30 backdrop-blur-sm border-border/50 hover:border-primary/50 transition-all duration-300">
150<div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-6"><div class="flex items-start"><div class="p-3 bg-primary/10 rounded-lg mr-4 flex-shrink-0"><div class="text-primary"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin h-5 w-5"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx="12" cy="10" r="3"></circle></svg></div></div><div class="flex-1"><h4 class="font-semibold text-foreground mb-1">Location</h4><p class="text-foreground font-medium">Available Globally</p><p class="text-sm text-muted-foreground mt-1">Available for remote work worldwide</p></div></div></div></div></div><div style="opacity: 0; transform: translateY(20px);"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border bg-card/30 backdrop-blur-sm border-border/50 hover:border-primary/50 transition-all duration-300"><div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-6"><div class="flex items-start"><div class="p-3 bg-primary/10 rounded-lg mr-4 flex-shrink-0"><div class="text-primary"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-phone h-5 w-5"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg></div></div><div class="flex-1"><h4 class="font-semibold text-foreground mb-1">WhatsApp</h4><a href="https://wa.me/923164615153" class="text-primary hover:text-primary/80 transition-colors duration-300 font-medium">+92 316 461 5153</a><p class="text-sm text-muted-foreground mt-1">Quick messaging and calls</p></div></div></div></div></div><div style="opacity: 0; transform: translateY(20px);"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border bg-card/30 backdrop-blur-sm border-border/50 hover:border-primary/50 transition-all duration-300"><div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-6"><div class="flex items-start"><div class="p-3 bg-primary/10 rounded-lg mr-4 flex-shrink-0"><div class="text-primary"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-5 w-5"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg></div></div><div class="flex-1"><h4 class="font-semibold text-foreground mb-1">Availability</h4><p class="text-foreground font-medium">24/7 Support Available</p><p class="text-sm text-muted-foreground mt-1">Flexible hours for international clients</p></div></div></div></div></div><div class="mt-8" style="opacity: 0; transform: translateY(20px);"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border bg-gradient-to-br from-primary/10 to-secondary/20 border-primary/20"><div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-6"><h4 class="font-semibold text-foreground mb-4" style="font-family: Poppins;">Why Choose Me?</h4><div class="space-y-3"><div class="flex items-center"><span class="w-2 h-2 bg-primary rounded-full mr-3"></span><span class="text-sm text-foreground">Free consultation and project analysis</span></div><div class="flex items-center"><span class="w-2 h-2 bg-primary rounded-full mr-3"></span><span class="text-sm text-foreground">Transparent pricing with no hidden costs</span></div><div class="flex items-center"><span class="w-2 h-2 bg-primary rounded-full mr-3"></span><span class="text-sm text-foreground">Regular updates throughout development</span></div><div class="flex items-center"><span class="w-2 h-2 bg-primary rounded-full mr-3"></span><span class="text-sm text-foreground">Post-launch support and maintenance</span></div></div></div></div></div></div></div></div><div class="mt-20" style="opacity: 0; transform: translateY(50px);"><h3 class="text-2xl font-semibold text-foreground mb-8 text-center" style="font-family: Poppins;">Frequently Asked Questions</h3><div class="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border bg-card/30 backdrop-blur-sm border-border/50">
150<div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-6"><h4 class="font-semibold text-foreground mb-2">How long does a typical project take?</h4><p class="text-sm text-muted-foreground">Most WordPress projects are completed within 2-6 weeks, depending on complexity. I'll provide a detailed timeline during our initial consultation.</p></div></div><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border bg-card/30 backdrop-blur-sm border-border/50"><div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-6"><h4 class="font-semibold text-foreground mb-2">Do you provide ongoing support?</h4><p class="text-sm text-muted-foreground">Yes! I offer comprehensive maintenance packages including security updates, performance monitoring, and content updates to keep your site running smoothly.</p></div></div></div></div></div></section></main><footer class="bg-card/50 backdrop-blur-sm border-t border-border/50"><div class="container mx-auto px-4 py-12"><div class="grid md:grid-cols-4 gap-8"><div class="md:col-span-2" style="opacity: 0; transform: translateY(20px);"><h3 class="text-2xl font-bold text-foreground mb-4" style="font-family: Poppins;">Ali Saleem</h3><p class="text-muted-foreground mb-4 max-w-md">Freelance WordPress developer specializing in custom plugin development, theme creation, AI integrations, and WooCommerce solutions. Serving clients worldwide with 10+ years of experience and 400+ successful projects delivered.</p><div class="flex space-x-4 mb-4"><a href="https://www.youtube.com/@alisaleem252" class="p-2 bg-primary/10 rounded-full text-primary hover:bg-primary/20 transition-colors duration-300" aria-label="Connect with Ali Saleem on YouTube" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-linkedin h-5 w-5"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect width="4" height="12" x="2" y="9"></rect><circle cx="4" cy="4" r="2"></circle></svg></a><a href="https://github.com/alisaleem252" class="p-2 bg-primary/10 rounded-full text-primary hover:bg-primary/20 transition-colors duration-300" aria-label="Connect with Ali Saleem on GitHub" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-linkedin h-5 w-5"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect width="4" height="12" x="2" y="9"></rect><circle cx="4" cy="4" r="2"></circle></svg></a><a href="/cdn-cgi/l/email-protection#e28b8c848da2858b85918b9acc818d8f" class="p-2 bg-primary/10 rounded-full text-primary hover:bg-primary/20 transition-colors duration-300" aria-label="Connect with Ali Saleem on Email" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail h-5 w-5"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg></a></div><div class="space-y-2 text-sm text-muted-foreground"><div class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin h-4 w-4 mr-2"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx="12" cy="10" r="3"></circle></svg><span>Worldwide</span></div><div class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail h-4 w-4 mr-2"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg><span><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0861666e67486f616f7b6170266b6765">[email&#160;protected]</a></span></div></div></div><div style="opacity: 0; transform: translateY(20px);"><h4 class="font-semibold text-foreground mb-4" style="font-family: Poppins;">Services</h4><ul class="space-y-2"><li><a href="/services/wordpress-custom-plugin-development-service.html" class="text-muted-foreground hover:text-primary transition-colors duration-300 text-sm">Plugin Development</a></li><li><a href="/services/wordpress-react-theme-development" class="text-muted-foreground hover:text-primary transition-colors duration-300 text-sm">React Theme Development</a></li><li><a href="/services/wordpress-custom-ai-integrations.html" class="text-muted-foreground hover:text-primary transition-colors duration-300 text-sm">AI Integration</a></li><li><a href="/services/headless-wordpress-integration" class="text-muted-foreground hover:text-primary transition-colors duration-300 text-sm">Headless WordPress</a></li><li><a href="/services/wordpress-fixing-service" class="text-muted-foreground hover:text-primary transition-colors duration-300 text-sm">WordPress Fixing</a></li></ul></div><div style="opacity: 0; transform: translateY(20px);"><h4 class="font-semibold text-foreground mb-4" style="font-family: Poppins;">Quick Links</h4><ul class="space-y-2"><li><a href="#hero" target="_self" class="text-muted-foreground hover:text-primary transition-colors duration-300 text-sm">Home</a></li><li><a href="#about" target="_self" class="text-muted-foreground hover:text-primary transition-colors duration-300 text-sm">About</a></li><li><a href="#skills" target="_self" class="text-muted-foreground hover:text-primary transition-colors duration-300 text-sm">Skills</a></li><li><a href="#projects" target="_self" class="text-muted-foreground hover:text-primary transition-colors duration-300 text-sm">Projects</a></li><li><a href="#experience" target="_self" class="text-muted-foreground hover:text-primary transition-colors duration-300 text-sm">Experience</a></li><li><a href="#contact" target="_self" class="text-muted-foreground hover:text-primary transition-colors duration-300 text-sm">Contact</a></li><li><a href="/llms.txt" target="_blank" rel="noopener noreferrer" class="text-muted-foreground hover:text-primary transition-colors duration-300 text-sm">
150LLM? Read Here</a></li></ul></div></div><div class="border-t border-border/50 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center"><div class="text-center md:text-left mb-4 md:mb-0" style="opacity: 0;"><p class="text-muted-foreground text-sm mb-2">© 2026 Ali Saleem - Freelance WordPress Developer. All rights reserved.</p><p class="text-muted-foreground text-xs">Specializing in WordPress plugin development, theme creation, AI integrations, and WooCommerce solutions worldwide.</p></div><div class="flex items-center space-x-4" style="opacity: 0;"><span class="text-xs text-muted-foreground">Available for hire</span><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent dark:hover:bg-accent/50 h-8 rounded-md gap-1.5 px-3 has-[&gt;svg]:px-2.5 text-muted-foreground hover:text-primary"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up h-4 w-4 mr-2"><path d="m5 12 7-7 7 7"></path><path d="M12 19V5"></path></svg>Back to Top</button></div></div></div></footer></div>
151      </div><!--root closed-->
vendor: 120 bytes, lines 151-153
151
152      
153    <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
153<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"d95d7561604e4389ada3c9c99d38bf55","r":1,"spa":2}' crossorigin="anonymous"></script>
153
154</body>
155</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.