# 💊 MediGallery – Premium UI/UX Setup

This document outlines the complete front-end customization for **MediGallery**, your AI-powered medicine delivery app. The design will follow a **premium**, **accessible**, and **trustworthy** style using TailwindCSS and shadcn/ui.

---

## 🎨 1. CSS Variables for Brand Theming

Update your `globals.css` (or main CSS file):

```css
:root {
  --background: 210 20% 98%;
  --foreground: 222.2 47.4% 11.2%;

  --primary: 162 100% 40%;           /* Mint Green */
  --primary-foreground: 0 0% 100%;

  --secondary: 196 100% 60%;         /* Sky Blue */
  --secondary-foreground: 222.2 47.4% 11.2%;

  --accent: 271 100% 71%;            /* Soft Violet */
  --accent-foreground: 255 100% 100%;

  --destructive: 0 100% 63%;
  --destructive-foreground: 0 0% 100%;

  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;

  --card: 0 0% 100%;
  --card-foreground: 222.2 47.4% 11.2%;

  --border: 214.3 31.8% 91.4%;
  --input: 210 20% 90%;
  --ring: 212.7 26.8% 83.9%;

  --radius: 0.75rem;
}
```

---

## 🧩 2. Tailwind Config Additions

Update `tailwind.config.ts`:

```ts
import { type Config } from "tailwindcss";
import { fontFamily } from "tailwindcss/defaultTheme";

export default {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      fontFamily: {
        sans: ["Inter", ...fontFamily.sans],
        display: ["Poppins", ...fontFamily.sans],
      },
      animation: {
        "fade-in": "fade-in 0.6s ease-out",
        "slide-in-right": "slide-in-right 0.5s ease-out",
      },
      keyframes: {
        "fade-in": {
          "0%": { opacity: "0", transform: "translateY(10px)" },
          "100%": { opacity: "1", transform: "translateY(0)" },
        },
        "slide-in-right": {
          "0%": { opacity: "0", transform: "translateX(20px)" },
          "100%": { opacity: "1", transform: "translateX(0)" },
        },
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config;
```

---

## 🔘 3. Button Variant Update (shadcn/ui)

Update `components/ui/button.tsx`:

```ts
variants: {
  variant: {
    default: "bg-primary text-primary-foreground hover:bg-primary/90",
    secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
    ghost: "hover:bg-muted",
    ai: "bg-accent text-white hover:bg-accent/80",
  },
}
```

### ✅ Usage:

```tsx
<Button variant="default">Order Now</Button>
<Button variant="ai">Chat with AI</Button>
<Button variant="secondary">Refill Reminder</Button>
<Button variant="ghost">Learn More</Button>
```

---

## 🧠 4. UX Enhancements

### ✅ Smooth Motion

```tsx
<div className="animate-fade-in">Welcome back!</div>
```

### ✅ Microcopy

- “Almost done! Just 1 more step.”
- “We’re fetching your prescription… hang tight!”

### ✅ Empty States

```tsx
<div className="text-center py-8">
  <img src="/empty.svg" className="mx-auto mb-4 h-32" />
  <h3 className="text-lg font-display font-semibold">No prescriptions yet</h3>
  <p className="text-muted-foreground">Upload a photo to get started</p>
</div>
```

### ✅ Toast Feedback (via sonner)

```ts
import { toast } from "sonner";

toast.success("Prescription added to cart!");
toast.error("Something went wrong. Try again.");
```

### ✅ Card Styling

```tsx
<div className="rounded-xl shadow-md p-6 bg-card text-card-foreground">
  <h2 className="text-xl font-display font-semibold mb-2">Paracetamol 500mg</h2>
  <p className="text-sm text-muted-foreground">Take 1 tablet after meals</p>
</div>
```

---

## 🧪 5. Optional UI Preview File

Create a file like `UIShowcase.tsx`:

```tsx
export default function UIShowcase() {
  return (
    <div className="p-8 space-y-6">
      <h1 className="text-3xl font-display font-semibold">UI Preview</h1>

      <div className="flex gap-4 flex-wrap">
        <Button variant="default">Primary</Button>
        <Button variant="secondary">Secondary</Button>
        <Button variant="ai">AI Assistant</Button>
        <Button variant="ghost">Ghost</Button>
      </div>

      <div className="rounded-xl shadow-md p-4 bg-card text-card-foreground">
        <h2 className="text-xl font-display">Sample Card</h2>
        <p className="text-muted-foreground">This is how your medicine cards will look.</p>
      </div>

      <input type="text" className="input w-full" placeholder="Search for medicines..." />
    </div>
  );
}
```

---

## ✅ Summary

| Feature       | Result                                      |
|---------------|----------------------------------------------|
| Colors        | Mint Green, Sky Blue, Soft Violet           |
| Fonts         | Inter (body), Poppins (titles)              |
| Buttons       | Added `ai`, `secondary`, `ghost` variants   |
| UX Enhancements | Empty states, fade animations, toasts     |
| Components    | Card layout, soft buttons, smooth flow      |
| Showcase Page | Optional live preview component             |

---