What's your typical project timeline?

It depends on the scope, but most projects take between 4-8 weeks from kickoff to launch. I'll give you a detailed timeline during our initial consultation so there are no surprises.

How much does a project cost?

Every project is unique, so I provide custom quotes based on your specific needs. I'm always upfront about costs and will work with you to find a solution that fits your budget without compromising quality.

Do you work with clients outside your country?

Absolutely! I work with clients worldwide. Modern tools make remote collaboration seamless — you'll feel like we're in the same room.

What if I need changes after the project is delivered?

I offer ongoing maintenance and support packages. Small tweaks are often included in the initial project scope, and for larger updates, we'll discuss the best approach together.

Can you work with my existing brand guidelines?

Of course. I'm great at working within established brand systems while still bringing fresh ideas and creative solutions to the table.

What technologies do you use?

I primarily work with Next.js, React, TypeScript, and Tailwind CSS for web development, along with Figma for design. But I choose the right tools for each project — the technology should serve the goal, not the other way around.

🎨

UI Library

A collection of beautiful, reusable React components and CSS snippets built with Tailwind CSS and Framer Motion.

Cards

Versatile containers for displaying content, articles, and interactive elements.

Hover Actions

Project Update

The latest release includes new components, performance improvements, and better accessibility features.

CardHover.tsxLanguage: tsx

import { motion } from 'framer-motion';

export function HoverActionsCard() {
  return (
    <motion.div
      whileHover={{ y: -5 }}
      className="relative p-6 md:p-8 rounded-2xl border border-border bg-card hover:shadow-xl hover:shadow-accent/5 transition-all duration-300 group overflow-hidden"
    >
      <div className="w-12 h-12 rounded-full bg-accent/10 flex items-center justify-center mb-6 text-accent">
        <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
        </svg>
      </div>
      <h4 className="text-xl font-semibold mb-3">Project Update</h4>
      <p className="text-muted leading-relaxed mb-6">
        The latest release includes new components, performance improvements, and better accessibility features.
      </p>
      
      {/* Hidden Actions (Reveal on Hover) */}
      <div className="absolute inset-x-0 bottom-0 p-6 bg-gradient-to-t from-surface via-surface to-transparent translate-y-full opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300 flex items-center gap-3">
        <button className="flex-1 px-4 py-2 bg-accent text-white font-medium rounded-xl hover:bg-accent-hover transition-colors">
          View Detail
        </button>
        <button className="p-2 border border-border rounded-xl hover:bg-black/5 dark:hover:bg-white/5 transition-colors text-muted">
          <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" /></svg>
        </button>
      </div>
    </motion.div>
  );
}

Pricing Table Card

Pro Plan

Perfect for growing businesses and agencies.

$49/mo

Unlimited Projects
Custom Domains
Priority Support

CardPricing.tsxLanguage: tsx

export function PricingCard() {
  return (
    <div className="relative p-8 rounded-2xl border border-accent bg-card shadow-2xl shadow-accent/5 overflow-hidden flex flex-col items-center text-center">
      <div className="absolute top-0 inset-x-0 h-1 bg-gradient-to-r from-accent to-purple-500" />
      <span className="inline-flex items-center px-3 py-1 rounded-full bg-accent/10 text-accent text-xs font-bold uppercase tracking-wider mb-4">
        Most Popular
      </span>
      <h4 className="text-2xl font-bold mb-2">Pro Plan</h4>
      <p className="text-muted mb-6">Perfect for growing businesses and agencies.</p>
      
      <div className="flex items-baseline gap-1 mb-8">
        <span className="text-4xl font-extrabold tracking-tight">$49</span>
        <span className="text-muted font-medium">/month</span>
      </div>

      <ul className="space-y-4 mb-8 text-left w-full">
        {['Unlimited Projects', 'Custom Domains', 'Priority Support', 'Advanced Analytics'].map((feature, i) => (
          <li key={i} className="flex items-center gap-3">
            <svg className="w-5 h-5 text-accent shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
            </svg>
            <span className="text-foreground font-medium">{feature}</span>
          </li>
        ))}
      </ul>

      <button className="w-full py-3 rounded-xl bg-accent text-white font-bold hover:bg-accent-hover transition-colors shadow-lg shadow-accent/20">
        Get Started
      </button>
    </div>
  );
}

Product Display

NEW

Premium Wireless Headphones

Active Noise Cancelling

$299.00

CardProduct.tsxLanguage: tsx

export function ProductCard() {
  return (
    <div className="group rounded-2xl border border-border bg-card overflow-hidden hover:shadow-xl transition-all duration-300">
      <div className="aspect-[4/3] bg-black/5 dark:bg-white/5 relative overflow-hidden">
        {/* Placeholder for Product Image */}
        <div className="absolute inset-0 flex items-center justify-center text-muted group-hover:scale-105 transition-transform duration-500">
          <svg className="w-16 h-16 opacity-20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
          </svg>
        </div>
        <div className="absolute top-4 right-4 px-2.5 py-1 bg-card/80 backdrop-blur-md rounded-lg text-xs font-bold font-mono border border-border">
          NEW
        </div>
      </div>
      
      <div className="p-6">
        <h4 className="text-lg font-bold truncate">Premium Wireless Headphones</h4>
        <p className="text-sm text-muted mt-1 mb-4 truncate">Active Noise Cancelling</p>
        
        <div className="flex items-center justify-between">
          <span className="text-xl font-extrabold">$299.00</span>
          <button className="px-4 py-2 bg-black dark:bg-white text-white dark:text-black font-semibold rounded-xl hover:opacity-80 transition-opacity flex items-center gap-2 text-sm">
            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" /></svg>
            Add to Cart
          </button>
        </div>
      </div>
    </div>
  );
}

Image Overlay Card

Travel

Discover the hidden gems of the Mediterranean

John Doe • 5 min read

CardOverlay.tsxLanguage: tsx

export function ImageOverlayCard() {
  return (
    <div className="relative isolate group rounded-2xl overflow-hidden aspect-square sm:aspect-video cursor-pointer">
      {/* Background Image Placeholder */}
      <div className="absolute inset-0 bg-gradient-to-br from-accent to-purple-500 group-hover:scale-105 transition-transform duration-700 -z-20" />
      
      {/* Gradient Overlay */}
      <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent -z-10" />

      <div className="h-full flex flex-col justify-end p-6 md:p-8">
        <span className="text-white/80 font-mono text-sm uppercase tracking-widest mb-2 font-semibold">Travel</span>
        <h3 className="text-2xl md:text-3xl font-bold text-white mb-2 leading-tight">
          Discover the hidden gems of the Mediterranean
        </h3>
        <div className="flex items-center gap-3 mt-4 opacity-0 -translate-y-4 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300">
          <div className="w-8 h-8 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center text-white">
            JD
          </div>
          <span className="text-sm font-medium text-white/90">John Doe • 5 min read</span>
        </div>
      </div>
    </div>
  );
}