fix responsivenss and optimize images

src/components/CoverImage.css

@@ -1,6 +1,6 @@
 .dev {
-    height: 350px;
+    height: 340px;
-    width: 870px;
+    width: 860px;
 }
 
 .hashnode {

src/components/Editor.js

@@ -170,7 +170,7 @@ class Editor extends React.Component {
 										className="focus:outline-none border text-xl p-2 rounded"
 										value={this.state.pattern}>
 
-										<option>None</option>
+										<option>none</option>
 										<option>graph-paper</option>
 										<option>jigsaw</option>
 										<option>hideout</option>

src/components/Faq.js

@@ -8,46 +8,46 @@ const Faq = () => {
         <div>
             <Header />
 
-            <div className=" md:w-10/12 mx-auto p-20 ">
+            <div className=" md:w-10/12 mx-auto md:p-20 p-4">
-                <h1 className="font-bold text-4xl font-Anek text-center">Frequently asked questions</h1>
+                <h1 className="font-bold md:text-4xl  text-2xl font-Anek text-center">Frequently asked questions</h1>
 
 
                 <div className="flex flex-wrap justify-center mt-20 font-Inter">
 
-                    <div className="w-5/12 m-4 ">
+                    <div className="md:w-5/12 m-4 ">
                         <p className="text-xl font-bold py-2">What is Coverview?</p>
                         <p className="text-lg text-gray-700">Coverview is a tool to create cover images for your blogs quickly and easily.</p>
                     </div>
 
-                    <div className="w-5/12 m-4">
+                    <div className="md:w-5/12 m-4">
                         <p className="text-xl font-bold py-2">Is Coverview free?</p>
                         <p className="text-lg text-gray-700">Yes! Coverview is absolutely free to use.</p>
                     </div>
 
-                    <div className="w-5/12 m-4">
+                    <div className="md:w-5/12 m-4">
                         <p className="text-xl  font-bold py-2">Can I upload my custom brand logo?</p>
                         <p className="text-lg text-gray-700">Yes.Just search and select <span className="font-semibold">custom</span> in icon section and you can upload your own logo to personalize your cover images.</p>
                         <p className="italic mt-2">See <a href="https://twitter.com/WankhadeRutik/status/1518270774335111168?s=20&t=XMjbJpGAC7anadJ690_DUg" className="text-blue-400" target="_blank" rel="noreferrer">example</a></p>
                     </div>
 
-                    <div className="w-5/12 m-4">
+                    <div className="md:w-5/12 m-4">
                         <p className="text-xl font-bold my-2">Can I use coverview for non-technical/personal blogs?</p>
                         <p className="text-lg text-gray-700">Yes! Why not? Even though coverview was built with technical blogs in mind, you can still use it for your personal blogs. Check out the stylish theme for more.</p>
                     </div>
 
-                    <div className="w-5/12 m-4">
+                    <div className="md:w-5/12 m-4">
                         <p className="text-xl font-bold my-2">Why use Coverview?</p>
                         <p className="text-lg text-gray-700">Because it's simple, quick and easy to use. Why spend hours designing when you can create cover images in seconds?</p>
                     </div>
 
-                    <div className="w-5/12 m-4">
+                    <div className="md:w-5/12 m-4">
                         <p className="text-xl font-bold my-2">Want to support/sponsor the project?</p>
                         <p className="text-lg text-gray-700">If coverview adds value in your life and you wish to support this project, you can <a href="https://github.com/sponsors/rutikwankhade" target="_blank" rel="noreferrer" className="font-semibold hover:underline">sponsor me on Github</a> or <a href="https://www.buymeacoffee.com/rutikwankhade" target="_blank" rel="noreferrer" className="hover:underline text-pink-400 font-semibold">buy me a coffee</a>.</p>
                     </div>
 
                 </div>
 
-                <div className="w-1/2 mx-auto text-center mt-20">
+                <div className="md:w-1/2 mx-auto text-center mt-20">
                     <button
                         onClick={() => setShowMsg(!showMsg)}
                         className="text-6xl text-center m-2">💡</button>

src/components/Header.js

@@ -14,10 +14,10 @@ const Header = () => {
 
 					</Link>
 
-					<div className="ml-auto mr-4 ">
+					<div className="ml-auto md:mr-4 ">
-						<Link to="/faq" className="text-gray-700 hover:text-gray-800 text-base font-Nunito mx-4">How to use</Link>
+						<Link to="/faq" className="text-gray-700 hover:text-gray-800 text-base font-Nunito mx-4"><span className="hidden md:inline-block">How to use</span></Link>
-						<a href="https://www.buymeacoffee.com/rutikwankhade" target="_blank" rel="noreferrer" className="text-base mx-2 font-Nunito">🥤 Buy me a coffee</a>
+						<a href="https://www.buymeacoffee.com/rutikwankhade" target="_blank" rel="noreferrer" className="text-base mx-2 font-Nunito">🥤 <span className="hidden md:inline-block">Buy me a coffee</span></a>
-						<a   href={`https://twitter.com/intent/tweet?text=${tweetText}`} className="mx-2 bg-blue-400 text-sm rounded-full px-4 font-semibold text-white p-1">Share on Twitter</a>
+						<a   href={`https://twitter.com/intent/tweet?text=${tweetText}`} className="mx-2 bg-blue-400 md:text-sm text-xs rounded-full px-4 font-semibold text-white p-1">Share on Twitter</a>
 					</div>
 
 				</div>

src/components/Home.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import logo from '../assets/icons/logo.png'
 import { Link } from 'react-router-dom';
-import cover1 from '../assets/images/cover1.png'
+import cover1 from '../assets/images/cover1.webp'
-import cover2 from '../assets/images/cover2.png'
+import cover2 from '../assets/images/cover2.webp'
-import cover3 from '../assets/images/cover3.png'
+import cover3 from '../assets/images/cover3.webp'
-import cover4 from '../assets/images/cover4.png'
+import cover4 from '../assets/images/cover4.webp'
 
 
 
@@ -27,13 +27,13 @@ const Home = () => {
                     <h1 className="font-semibold font-Inter">Coverview</h1>
                 </div>
 
-                <Link to="/editor" className="hover:translate-x-2 duration-300 bg-gray-700 group rounded-xl px-6 text-white text-lg ml-auto mr-4 font-Inter font-semibold p-2">
+                <Link to="/editor" className="hover:translate-x-2 duration-300 bg-gray-700 group rounded-xl px-6 text-white md:text-lg text-sm ml-auto mr-4 font-Inter font-semibold p-2">
                     <span className="">Go to editor &rarr;</span>
                 </Link>
             </div>
 
-            <div className="  mx-auto px-20 py-6   flex flex-col items-center">
+            <div className="  mx-auto md:px-20 py-6   flex flex-col items-center">
-                <h1 className="w-7/12 m-10 text-center md:text-5xl text-2xl font-extrabold text-gray-700 font-Anek">
+                <h1 className="md:w-7/12 m-10 text-center md:text-5xl text-2xl font-extrabold text-gray-700 font-Anek">
                     Creating cover images for your blogs is now super easy
                 </h1>
             </div>
@@ -43,24 +43,24 @@ const Home = () => {
 
             <div className=" temple flex flex-row items-center justify-center mx-auto md:w-10/12">
 
-                <div className="m-4 transform -translate-y-20 border animate  rotate-6 duration-100 bg-white p-2 shadow-sm w-1/5 rounded-lg flex flex-col ">
+                <div className="m-4 transform -translate-y-20 border animate hover:scale-105 hover:-rotate-3  rotate-6 duration-100 bg-white p-2 shadow-sm w-1/5 rounded-lg flex flex-col ">
                     <img src={cover2} className="border border-gray-100 rounded mb-2" alt="cover1" />
-                    <p className="animate animate-pulse bg-gray-50 h-5 rounded mb-2"></p>
+                    <p className="animate animate-pulse bg-gray-50 md:h-5 h-2 rounded mb-2"></p>
-                    <p className="animate animate-pulse w-8/12 bg-gray-50 h-5 rounded mb-2"></p>
+                    <p className="animate animate-pulse w-8/12 bg-gray-50 md:h-5 h-2 rounded mb-2"></p>
 
                 </div>
 
-                <div className="m-4 transform  border animate  -rotate-2  duration-100 bg-white p-4 shadow-sm w-1/3 rounded-lg flex flex-col ">
+                <div className="m-4 transform hover:scale-105 hover:rotate-3 -rotate-2  duration-300 bg-white p-4 shadow-sm w-1/3 rounded-lg flex flex-col ">
                     <img src={cover1} className="rounded border border-gray-100 mb-2" alt="cover-2" />
-                    <p className="animate animate-pulse bg-gray-50 h-6 rounded mb-2"></p>
+                    <p className="animate animate-pulse bg-gray-50 md:h-6 h-3 rounded mb-2"></p>
-                    <p className="animate animate-pulse w-8/12 bg-gray-50 h-6 rounded mb-2"></p>
+                    <p className="animate animate-pulse w-8/12 bg-gray-50 md:h-6 h-3 rounded mb-2"></p>
 
                 </div>
 
-                <div className="m-4 transform -translate-y-20 border animate  -rotate-6 duration-100 bg-white p-2 shadow-sm w-1/5 rounded-lg flex flex-col ">
+                <div className="m-4 transform -translate-y-20 border animate hover:scale-105 hover:rotate-3 -rotate-6 duration-100 bg-white p-2 shadow-sm w-1/5 rounded-lg flex flex-col ">
                     <img src={cover3} className="rounded border border-gray-100 mb-2" alt="cover3" />
-                    <p className="animate animate-pulse bg-gray-50 h-5 rounded mb-2"></p>
+                    <p className="animate animate-pulse bg-gray-50 md:h-5 h-2 rounded mb-2"></p>
-                    <p className="animate animate-pulse w-8/12 bg-gray-50 h-5 rounded mb-2"></p>
+                    <p className="animate animate-pulse w-8/12 bg-gray-50 md:odd:h-5 h-2 rounded mb-2"></p>
 
                 </div>
 
@@ -70,29 +70,28 @@ const Home = () => {
 
 
 
-            <div className="my-32  mx-auto">
+            <div className="md:my-32  my-10 mx-auto">
 
                 <div className="md:w-10/12 mx-auto flex flex-col ">
-                    <div className="w-6/12 text-center mx-auto ">
+                    <div className="md:w-6/12 text-center mx-auto ">
                         <h2 className="text-4xl py-4 font-bold font-Anek text-gray-700">Why cover images are more important than you think?</h2>
-                        <p className="text-xl"></p>
 
                     </div>
 
-                    <div className="flex  my-10 mx-auto">
+                    <div className="flex md:flex-row flex-col my-10 mx-auto">
 
-                        <div className="m-10 flex  w-1/2">
+                        <div className="m-10 flex md:flex-row flex-col  md:w-1/2">
-                            <div className="mx-4 bg-purple-300 h-24 w-24 p-4 flex justify-center items-center rounded-full">
+                            <div className="md:mx-4 mx-auto bg-purple-300 h-24 w-24 p-4 flex justify-center items-center rounded-full">
                                 <svg class="text-white w-20 h-20" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path></svg>
                             </div>
-                            <p className="text-2xl  text-gray-700">Around <span className="font-bold">7 million</span> blog posts are published daily. And with the rise of new-age blogging tools, it will only go up.</p>
+                            <p className="text-2xl md:text-left text-center text-gray-700">Around <span className="font-bold">7 million</span> blog posts are published daily. And with the rise of new-age blogging tools, it will only go up.</p>
                         </div>
 
-                        <div className="m-10 flex  w-1/2">
+                        <div className="m-10 flex md:flex-row flex-col  md:w-1/2">
-                            <div className="mx-4 bg-green-300 h-24 w-24 p-4 flex justify-center items-center rounded-full">
+                            <div className="md:mx-4 mx-auto bg-green-300 h-24 w-24 p-4 flex justify-center items-center rounded-full">
                                 <svg class="text-white w-20 h-20" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path></svg>
                             </div>
-                            <p className="text-2xl  text-gray-700">A good cover image can lead to <span className="font-bold">higher conversion rate</span> than a random stock image.</p>
+                            <p className="text-2xl md:text-left text-center text-gray-700">A good cover image can lead to <span className="font-bold">higher conversion rate</span> than a random stock image.</p>
                         </div>
 
                     </div>
@@ -102,10 +101,10 @@ const Home = () => {
                 </div>
 
 
-                <h2 className="text-5xl w-1/2 mx-auto mt-32 font-bold font-Anek text-center text-gray-700">With coverview, you can create cover images in seconds.</h2>
+                <h2 className="md:text-5xl text-3xl md:w-1/2 mx-auto mt-32 font-bold font-Anek text-center text-gray-700">With coverview, you can create cover images in seconds.</h2>
-                <div className="md:w-8/12 my-20 flex mx-auto">
+                <div className="md:w-8/12 my-20 flex md:flex-row flex-col mx-auto">
 
-                    <div className="w-1/3 flex flex-col mx-10">
+                    <div className="md:w-1/3 flex flex-col mx-10">
 
                         <div className="text-center">
                             <div className="text-xl mx-auto w-10 h-10 p-2 font-bold text-white bg-gray-700 rounded-full flex items-center justify-center">1</div>
@@ -116,9 +115,9 @@ const Home = () => {
 
                     </div>
 
-                    <div className="flex items-center font-bold text-3xl">--------&rarr;</div>
+                    <div className="flex items-center font-bold text-3xl text-center mx-auto">--------&rarr;</div>
 
-                    <div className="flex flex-col w-1/3 mx-10">
+                    <div className="flex flex-col md:w-1/3 mx-10">
 
                         <div className="text-center">
                             <div className="text-xl mx-auto w-10 h-10 p-2 font-bold text-white bg-gray-700 rounded-full flex items-center justify-center">2</div>
@@ -132,26 +131,26 @@ const Home = () => {
 
 
 
-                <div className="md:w-8/12  flex justify-center items-center mx-auto">
+                <div className="md:w-8/12  flex md:flex-row flex-col justify-center items-center mx-auto">
 
-                    <div className="text-center w-1/3 m-4">
+                    <div className="text-center md:w-1/3 m-4">
                         <div className="text-xl mx-auto w-10 h-10 p-2 font-bold text-white bg-gray-700 rounded-full flex items-center justify-center">3</div>
 
                         <p className="text-2xl my-2 font-semibold font-Inter text-gray-600">Choose from different themes</p>
                         <p className="text-xl">Unsplash integration, custom icon for personal branding and more.</p>
                     </div>
 
-                    <div className="flex md:w-6/12 hideout p-6">
+                    <div className="flex md:w-8/12 hideout p-6">
-                        <div className="flex flex-col ">
+                        <div className="flex flex-col w-1/2 ">
-                            <img src={cover1} alt="preview" className=" m-2 rounded-lg shadow-sm" />
+                            <img src={cover1} alt="preview" className=" hover:scale-105 duration-300 m-2 rounded-lg shadow-sm" />
-                            <img src={cover2} alt="preview" className=" m-2 rounded-lg shadow-sm" />
+                            <img src={cover2} alt="preview" className="hover:scale-105 duration-300  m-2 rounded-lg shadow-sm" />
 
                         </div>
 
 
-                        <div className="flex flex-col mt-4">
+                        <div className="flex flex-col mt-4 w-1/2">
-                            <img src={cover3} alt="preview" className="  m-2 rounded-lg shadow-sm" />
+                            <img src={cover3} alt="preview" className="hover:scale-105 duration-300   m-2 rounded-lg shadow-sm" />
-                            <img src={cover4} alt="preview" className=" m-2 rounded-lg shadow-sm" />
+                            <img src={cover4} alt="preview" className="hover:scale-105 duration-300  m-2 rounded-lg shadow-sm" />
 
                         </div>
 
@@ -160,7 +159,7 @@ const Home = () => {
                 </div>
 
 
-                <div className="w-6/12 my-20 mx-auto">
+                <div className="md:w-6/12 my-20 mx-auto">
 
                     <div className="text-center m-4">
 
@@ -175,7 +174,7 @@ const Home = () => {
 
                 <WallOfLove />
 
-                <div className="md:w-1/2 mx-auto pt-20">
+                <div className="md:w-1/2 mx-auto pt-20 p-4">
                     <h2 className="text-5xl text-center font-Anek font-bold text-gray-700 mx-auto">Simple, quick, and easy to use</h2>
                     <p className="text-2xl text-center my-2">So you can focus on writing your blog and never worry about those cover images.</p>
                     <Link to="/editor" >
@@ -188,13 +187,13 @@ const Home = () => {
 
 
 
-            <footer className="bg-white p-10 flex font-Inter md:px-20 justify-center items-center">
+            <footer className="bg-white p-10 flex md:flex-row flex-col font-Inter md:px-20 justify-center items-center">
-                <div className="w-1/2 flex flex-col">
+                <div className="md:w-1/2 flex flex-col">
                     <span className="text-lg">Made with 💛 by <a href="https://twitter.com/WankhadeRutik" className="font-semibold" target="_blank" rel="noreferrer">Rutik Wankhade</a></span>
                     <span className="text-lg font-Nunito">checkout <a href="https://rutikwankhade.dev" target="_blank" rel="noreferrer" className="text-purple-400 hover:text-pink-400">more cool stuff</a> I built</span>
                 </div>
 
-                <div className="text-lg flex ">
+                <div className="md:text-lg text-sm flex flex-wrap  ">
                     <Link to="/faq" className="m-2 hover:font-semibold">📌 How to use</Link>
                     <a href="https://github.com/rutikwankhade/CoverView" target="_blank" rel="noreferrer" className="m-2 hover:font-semibold">⭐ Star on Github</a>
                     <a href="https://www.buymeacoffee.com/rutikwankhade" target="_blank" rel="noreferrer" className="m-2 hover:font-semibold">🥤 Buy me a coffee</a>

src/components/Themes/PreviewTheme.js

@@ -13,7 +13,7 @@ const PreviewTheme = ({ config }) => {
                 style={{ backgroundColor: bgColor }}
             >
 
-                <div className="w-10/12 mx-auto mt-auto mb-0 shadow-lg rounded-t-xl border-white">
+                <div className="w-10/12 mx-auto mt-auto mb-0 shadow-lg  flex flex-col bg-white rounded-t-xl border-white">
                     <div className="bg-gray-800 w-full p-2 flex rounded-t-xl">
                         <div className="bg-red-400 h-3 w-3 rounded-full mx-2"></div>
                         <div className="bg-yellow-400 h-3 w-3 rounded-full mx-2"></div>

src/components/Themes/StylishTheme.js

@@ -57,6 +57,12 @@ const StylishTheme = ({ config }) => {
 
     }
 
+    const handleSearchSubmit = (e) => {
+        e.preventDefault();
+        searchImages(searchText);
+
+    }
+
 
     return (
         <div className=" bg-white rounded">
@@ -66,7 +72,7 @@ const StylishTheme = ({ config }) => {
             // style={{ backgroundColor: bgColor }}
             >
 
-                <div className="flex flex-row items-center bg-white justify-center p-4 ">
+                <div className="flex flex-row border items-center bg-white  justify-center p-4 ">
 
                     <div className="h-full w-1/2  bg-white rounded-l-xl">
                         <div className={`${font} px-12 justify-center text-left rounded-xl h-full p-4 flex flex-col`}>
@@ -88,14 +94,14 @@ const StylishTheme = ({ config }) => {
                             </div>
                         </div>
                     </div>
-                    <div className="w-1/2  h-96">
+                    <div className="w-1/2">
 
 
                         {unsplashImage ?
                             <div className='relative group'>
 
-                                <div className="w-96 h-96 ">
+                                <div className="h-96 ">
-                                <img src={unsplashImage.url && unsplashImage.url} className=" rounded-xl object-cover h-96 w-96" alt="preview" />
+                                    <img src={unsplashImage.url && unsplashImage.url} className=" rounded-xl object-cover h-96 w-full " alt="preview" />
 
                                 </div>
                                 <button
@@ -122,7 +128,7 @@ const StylishTheme = ({ config }) => {
                             :
                             <div className="flex flex-col p-2  bg-white items-center justify-center">
 
-                                <div className="flex bg-gray-50 rounded-full border mb-2">
+                                <form onSubmit={(e) => handleSearchSubmit(e)} className="flex bg-gray-50 rounded-full border mb-2">
                                     <input type="text"
                                         value={searchText}
                                         placeholder="Search image"
@@ -130,10 +136,10 @@ const StylishTheme = ({ config }) => {
                                         onChange={(e) => setSearchText(e.target.value)}
                                     />
 
-                                    <button onClick={() => searchImages(searchText)}>
+                                    <button type="submit" onClick={() => searchImages(searchText)}>
                                         <svg className="w-9 h-9 p-2 bg-gray-700 hover:bg-gray-800 text-white rounded-full" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                                     </button>
-                                </div>
+                                </form>
 
 
                                 <div className="overflow-y-scroll overflow-x-hidden h-80">