Feat: Refine UI and consolidate components

- Updated the heading in the Pastel page from 'Color Playground' to 'Pastel'.
- Adjusted the logo size in the Hero component for better visual balance.
- Removed duplicate/unused Footer components from pastel layout and ui directories.

components/units/converter/MainConverter.tsx

@@ -148,8 +148,10 @@ export default function MainConverter() {
           <CardTitle>Convert {formatMeasureName(selectedMeasure)}</CardTitle>
         </CardHeader>
         <CardContent className="space-y-6 pt-0">
-          <div className="flex gap-2 items-end">
-            <div className="flex-1">
+          {/* Input row, stacks vertically on mobile, horizontal on desktop */}
+          <div className="flex flex-col gap-4 md:flex-row md:items-end md:gap-2">
+            {/* Value Input */}
+            <div className="flex-1 w-full">
               <label className="text-sm font-medium mb-2 block">Value</label>
               <Input
                 type="text"
@@ -157,10 +159,11 @@ export default function MainConverter() {
                 value={inputValue}
                 onChange={(e) => setInputValue(e.target.value)}
                 placeholder="Enter value"
-                className="text-lg"
+                className={cn("text-lg", "w-full", "max-w-full")}
               />
             </div>
-            <div className="w-40">
+            {/* From Unit Select */}
+            <div className="w-full md:w-40">
               <label className="text-sm font-medium mb-2 block">From</label>
               <Select
                 value={selectedUnit}
@@ -173,16 +176,18 @@ export default function MainConverter() {
                 ))}
               </Select>
             </div>
+            {/* Swap Button */}
             <Button
               variant="outline"
               size="icon"
               onClick={handleSwapUnits}
-              className="flex-shrink-0"
+              className="flex-shrink-0 w-full md:w-40" // Make button full width on mobile too
               title="Swap units"
             >
               <ArrowLeftRight className="h-4 w-4" />
             </Button>
-            <div className="w-40">
+            {/* To Unit Select */}
+            <div className="w-full md:w-40">
               <label className="text-sm font-medium mb-2 block">To</label>
               <Select
                 value={targetUnit}

components/units/ui/Footer.tsx

@@ -1,85 +0,0 @@
-import { Heart, Github, Code2 } from 'lucide-react';
-import Link from 'next/link';
-
-export default function Footer() {
-  const currentYear = new Date().getFullYear();
-
-  return (
-    <footer className="border-t mt-16 bg-background">
-      <div className="w-full max-w-7xl mx-auto px-4 py-8">
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-          {/* About */}
-          <div>
-            <h3 className="font-semibold mb-3">Units UI</h3>
-            <p className="text-sm text-muted-foreground">
-              A spectacular unit conversion app supporting 23 measurement categories
-              with 187 units. Built with Next.js 16, TypeScript, and Tailwind CSS 4
-            </p>
-          </div>
-
-          {/* Features */}
-          <div>
-            <h3 className="font-semibold mb-3">Features</h3>
-            <ul className="space-y-2 text-sm text-muted-foreground">
-              <li>• Real-time bidirectional conversion</li>
-              <li>• Fuzzy search across all units</li>
-              <li>• Dark mode support</li>
-              <li>• Conversion history</li>
-              <li>• Keyboard shortcuts</li>
-              <li>• Copy & favorite units</li>
-            </ul>
-          </div>
-
-          {/* Links */}
-          <div>
-            <h3 className="font-semibold mb-3">Quick Links</h3>
-            <ul className="space-y-2 text-sm">
-              <li>
-                <Link
-                  href="/"
-                  className="text-muted-foreground hover:text-foreground transition-colors flex items-center gap-2"
-                >
-                  Back to Kit Home
-                </Link>
-              </li>
-              <li>
-                <a
-                  href="https://github.com/valknarness/units-ui"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-muted-foreground hover:text-foreground transition-colors flex items-center gap-2"
-                >
-                  <Github className="h-4 w-4" />
-                  GitHub Repository
-                </a>
-              </li>
-              <li>
-                <a
-                  href="https://github.com/convert-units/convert-units"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-muted-foreground hover:text-foreground transition-colors flex items-center gap-2"
-                >
-                  <Code2 className="h-4 w-4" />
-                  convert-units Library
-                </a>
-              </li>
-            </ul>
-          </div>
-        </div>
-
-        {/* Bottom Bar */}
-        <div className="mt-8 pt-8 border-t flex flex-col sm:flex-row justify-between items-center gap-4 text-sm text-muted-foreground">
-          <div className="flex items-center gap-1">
-            Made with{' '}
-            <Heart className="h-4 w-4 text-red-500 fill-red-500" />{' '}
-            using Next.js 16 & Tailwind CSS 4
-          </div>
-          <div>
-            © {currentYear} Units UI. All rights reserved
-          </div>
-        </div>
-      </div>
-    </footer>
-  );
-}