feat: add ui enhancements

gimnathperera · Sep 29, 2023 · b90e039 · b90e039
1 parent e37217b
commit b90e039
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 13 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -15,8 +15,8 @@ export const metadata: Metadata = {
   description: siteConfig.description,
   icons: {
     icon: "/favicon.ico",
-    shortcut: "/favicon-16x16.png",
-    apple: "/apple-touch-icon.png",
+    shortcut: "/favicon.ico",
+    apple: "/favicon.ico",
   },
 };
 

diff --git a/components/footer/index.tsx b/components/footer/index.tsx
@@ -4,7 +4,7 @@ const Footer = (props: Props) => {
   return (
     <footer className="footer footer-center p-4 text-base-content">
       <aside>
-        <p>Copyright © 2023 - All right reserved by ACME Industries Ltd</p>
+        <p>Made with 💖 by Gimnath</p>
       </aside>
     </footer>
   );

diff --git a/components/hero/index.tsx b/components/hero/index.tsx
@@ -1,31 +1,40 @@
 "use client";
-import React, { useState, useEffect } from "react";
-import AnimatedCursor from "react-animated-cursor";
+import { useState, useEffect } from "react";
+// import AnimatedCursor from "react-animated-cursor";
+import Uploader from "../uploader";
 
-const Hero = () => {
-  const colors = ["#ff5733", "#65C3C8", "#5733ff", "#33a3ff", "#ff33a3"];
+const Colors = [
+  "#FF5117",
+  "#FF8E00",
+  "#F9D81E",
+  "#97CC37",
+  "#8177FA",
+  "#00C0E9",
+  "#C902E6",
+];
 
+const Hero = () => {
   const [currentColorIndex, setCurrentColorIndex] = useState(0);
 
   useEffect(() => {
     const cycleColors = () => {
-      setCurrentColorIndex((prevIndex) => (prevIndex + 1) % colors.length);
+      setCurrentColorIndex((prevIndex) => (prevIndex + 1) % Colors.length);
     };
 
     const colorInterval = setInterval(cycleColors, 3000);
 
     return () => {
       clearInterval(colorInterval);
     };
-  }, [colors.length]);
+  }, []);
 
-  const currentColor = colors[currentColorIndex];
+  const currentColor = Colors[currentColorIndex];
 
   return (
     <div className="hero lg:pt-24 pt-12">
       <div className="hero-content text-center">
         <div className="max-w-2xl">
-          <h1 className="text-5xl font-bold ">
+          <h1 className="text-4xl lg:text-5xl font-bold ">
             Your Images, Your{" "}
             <span className="animate-fadeOut" style={{ color: currentColor }}>
               Colors
@@ -36,10 +45,23 @@ const Hero = () => {
             click. Create unique color palettes for your art and design
             endeavors.
           </p>
-          <button className="btn btn-primary">Get Started</button>
+
+          <Uploader />
+
+          <div className="pt-16">
+            <div className="flex flex-row justify-around">
+              <div className="bg-transparent p-1 w-12 h-12 lg:w-28 lg:h-28 rounded-lg shadow-xl cursor-pointer border-2 border-gray-300 border-dashed">
+                <div className="btn btn-ghost flex flex-col justify-end h-full bg-red-300 rounded-lg p-0">
+                  <div className="p-2 rounded-b-lg rounded-none w-full text-white text-xs">
+                    #F42185
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
-      <AnimatedCursor />
+      {/* <AnimatedCursor /> */}
     </div>
   );
 };

diff --git a/components/icons/upload.tsx b/components/icons/upload.tsx
@@ -0,0 +1,30 @@
+const UploadIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      fill="none"
+      viewBox="0 0 61 61"
+    >
+      <path
+        fill="#3C9"
+        d="M48.91 46.347h-3.005c-.973 0-1.758.785-1.758 1.758 0 .972.785 1.757 1.758 1.757h3.006c.972 0 1.758-.785 1.758-1.757a1.76 1.76 0 00-1.758-1.758zm-9.011 0H9.325c-.973 0-1.758.785-1.758 1.758 0 .972.785 1.757 1.758 1.757h30.574c.973 0 1.758-.785 1.758-1.757a1.76 1.76 0 00-1.758-1.758z"
+      ></path>
+      <path
+        fill="#FFB89A"
+        d="M49.801 55.546H14.376a2.558 2.558 0 01-2.55-2.549c0-1.4 1.15-2.549 2.55-2.549H49.8c1.4 0 2.55 1.149 2.55 2.55 0 1.4-1.143 2.548-2.55 2.548z"
+      ></path>
+      <path
+        fill="#45484C"
+        d="M47.288 24.427h-7.39c-.972 0-1.757.785-1.757 1.758 0 .972.785 1.758 1.758 1.758h7.395a4.366 4.366 0 014.359 4.359v16.482a4.366 4.366 0 01-4.36 4.36H14.51a4.366 4.366 0 01-4.36-4.36V32.302a4.366 4.366 0 014.36-4.36h8.162c.973 0 1.758-.785 1.758-1.757 0-.973-.785-1.758-1.758-1.758H14.51c-4.341 0-7.875 3.533-7.875 7.875v16.482c0 4.342 3.534 7.875 7.875 7.875h32.778c4.341 0 7.875-3.533 7.875-7.875V32.302c0-4.342-3.534-7.875-7.875-7.875z"
+      ></path>
+      <path
+        fill="#45484C"
+        d="M22.122 16.37l6.96-6.96v32.279c0 .972.786 1.757 1.758 1.757.973 0 1.758-.785 1.758-1.757V9.409l6.961 6.961c.346.346.791.516 1.242.516.451 0 .903-.17 1.242-.516a1.758 1.758 0 000-2.484l-8.771-8.772a3.423 3.423 0 00-2.432-1.007c-.92 0-1.78.357-2.431 1.007l-8.772 8.772a1.758 1.758 0 002.485 2.484z"
+      ></path>
+    </svg>
+  );
+};
+
+export default UploadIcon;
diff --git a/components/uploader/index.tsx b/components/uploader/index.tsx
@@ -0,0 +1,29 @@
+import UploadIcon from "../icons/upload";
+
+type Props = {};
+
+const Uploader = ({}: Props) => {
+  return (
+    <div className="flex items-center justify-center w-full">
+      <label
+        htmlFor="dropzone-file"
+        className="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800  hover:bg-gray-100 "
+      >
+        <div className="flex flex-col items-center justify-center pt-5 pb-6">
+          <div className="animate-bounce">
+            <UploadIcon />
+          </div>
+
+          <p className="mb-2 text-sm">
+            <span className="font-semibold">Click to upload</span> or drag and
+            drop
+          </p>
+          <p className="text-xs">SVG, PNG or JPG</p>
+        </div>
+        <input id="dropzone-file" type="file" className="hidden" />
+      </label>
+    </div>
+  );
+};
+
+export default Uploader;