s1

app/routes/test.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+export default function Counter(){
+    const [counte, setCount] = useState(0);
+
+    const increment = () => {
+        setCount(counte + 1)
+    }
+    const decrement = () => {
+        setCount(counte - 1)
+    }
+
+    return(
+        <div 
+            className="flex items-center justify-center h-screen bg-gradient-to-r from-indigo-500
+            via-purple-500 to-pink-500">
+            <div 
+                className="bg-white p-10 rounded-3xl shadow-xl transform
+                trasnsition duration-500 hover:scale-105">
+                    <div 
+                        className="text-center text-3xl font-extrabold text-transparent 
+                        bg-clip-text bg-gradient-to-r from-pink-500 to-purple-500 mb-6">
+                            Counter Machine
+                    </div>
+                    <div 
+                        className="flex items-center justify-between space-x-6">
+                            <button
+                            onClick={decrement}
+                            className="w-12 h-12 bg-red-400 text-white rounded-full
+                            shadow-lg text-2xl font-bold flex items-center justify-center
+                            transform transition hover:scale-105 hover:bg-red-600 duration-700">
+                                &#8722;                                
+                            </button>
+                            <div 
+                                className="text-4xl font-bold text-white flex justify-center items-center
+                                w-20 h-20 bg-gradient-to-r from-indigo-300 to-purple-400 rounded-full
+                                shadow-inner">
+                                    {counte}
+                            </div>
+                            <button
+                            onClick={increment}
+                            className="w-12 h-12 bg-green-400 text-white rounded-full
+                            shadow-lg text-2xl font-bold flex items-center
+                            justify-center transform transition hover:scale-105 
+                            hover:bg-green-600 duration-700">
+                            &#43;
+                        </button>
+                    </div>
+
+                </div>
+
+        </div>
+    )
+}

app/routes/test3.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+
+export default function Counter() {
+  const [count, setCount] = useState(0);
+
+  const increment = () => {
+    setCount(count + 1);
+  };
+
+  const decrement = () => {
+    setCount(count - 1);
+  };
+
+  return (
+    <div className="flex items-center justify-center h-screen bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500">
+      <div className="bg-white p-10 rounded-3xl shadow-xl transform transition duration-500 hover:scale-105">
+        <div className="text-center text-3xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-pink-500 to-purple-500 mb-6">
+          Creative Counter
+        </div>
+        <div className="flex items-center justify-between space-x-6">
+          <button
+            onClick={decrement}
+            className="w-12 h-12 bg-red-400 text-white rounded-full shadow-lg text-2xl font-bold flex items-center justify-center transform transition hover:scale-125 hover:bg-red-600 duration-300"
+          >
+            -
+          </button>
+          <div className="text-4xl font-semibold text-white flex justify-center items-center w-20 h-20 bg-gradient-to-r from-indigo-300 to-purple-400 rounded-full shadow-inner">
+            {count}
+          </div>
+          <button
+            onClick={increment}
+            className="w-12 h-12 bg-green-400 text-white rounded-full shadow-lg text-2xl font-bold flex items-center justify-center transform transition hover:scale-125 hover:bg-green-600 duration-300"
+          >
+            +
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}