wood/CoverView
1
0
Fork 0
mirror of https://github.com/woodchen-ink/CoverView.git synced 2025-07-18 05:51:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: fix responsiveness on small devices

Browse Source
This commit is contained in:
Rutik Wankhade 2024-10-08 10:33:33 +05:30
parent 71a67d0675
commit db366e30be
1 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/Home.js
View File

@ -82,21 +82,21 @@ const Home = () => {
<div className=" mx-auto flex flex-col md:w-10/12">
<div className="md:w-7/12 text-center mx-auto ">
<h2 className="text-5xl py-4 font-bold font-Nunito text-gray-700">Why cover images are more important than you think?</h2>
<h2 className="md:text-5xl text-3xl p-4 font-bold font-Nunito text-gray-700">Why cover images are more important than you think?</h2>
</div>
<div className="flex md:flex-row flex-col justify-center mx-auto">
<div className="m-10 p-10 rounded-xl shadow-gray-100 flex flex-col md:w-4/12 ">
<div className=" my-2 bg-purple-300 h-24 w-24 p-4 flex justify-center items-center rounded-full">
<div className=" my-2 md:mx-0 mx-auto bg-purple-300 h-24 w-24 p-4 flex justify-center items-center rounded-full">
<svg className="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 md:text-left text-center font-Nunito ">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 p-10 rounded-xl shadow-gray-100 flex flex-col md:w-4/12 ">
<div className=" my-2 bg-green-300 h-24 w-24 p-4 flex justify-center items-center rounded-full">
<div className="md:mx-0 mx-auto my-2 bg-green-300 h-24 w-24 p-4 flex justify-center items-center rounded-full">
<svg className="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 md:text-left text-center font-Nunito ">A good cover image can lead to <span className="font-bold">higher conversion rate</span> than a random stock image.</p>
@ -109,10 +109,10 @@ const Home = () => {
</div>
<h2 className="md:text-5xl text-3xl md:w-7/12 mx-auto mt-32 font-bold font-Nunito text-center text-gray-700">With coverview, you can create cover images in <span className="text-indigo-400">seconds</span></h2>
<h2 className="md:text-5xl text-3xl md:w-7/12 md:mx-auto md:mt-32 mx-10 font-bold font-Nunito text-center text-gray-700">With coverview, you can create cover images in <span className="text-indigo-400">seconds</span></h2>
<div className="md:w-8/12 my-16 p-4 flex md:flex-row flex-col mx-auto">
<div className="md:w-8/12 my-16 p-4 flex md:flex-row flex-col gap-4 mx-auto">
<div className="md:w-1/2 bg-gray-50 rounded-xl px-4 pt-6 flex flex-col mx-10">
@ -141,7 +141,7 @@ const Home = () => {
<div className="md:w-7/12 p-6 rounded-xl bg-gray-50 flex md:flex-row flex-col justify-center items-center mx-auto">
<div className="md:w-7/12 p-6 md:mx-auto mx-10 rounded-xl bg-gray-50 flex md:flex-row flex-col justify-center items-center ">
<div className="text-center md:w-1/2 m-4">
<div className="text-xl w-max mx-auto text-white py-1 px-4 font-Nunito font-semibold bg-indigo-400 rounded-full ">Step 3</div>
@ -171,7 +171,7 @@ const Home = () => {
<div className="md:w-6/12 my-20 mx-auto">
<div className="text-center m-4">
<div className="text-center m-6 px-6">
<p className="text-2xl my-2 font-semibold font-Nunito text-gray-600">Supports platforms like Hashnode or Dev.to</p>
</div>
@ -184,16 +184,16 @@ const Home = () => {
<WallOfLove />
<div className="bg-indigo-400 text-white">
<div className="md:w-8/12 mx-auto pt-32 p-4">
<h2 className="text-6xl text-center font-Nunito font-bold mx-auto">Simple, quick, and easy to use</h2>
<p className="text-2xl font-Nunito text-center py-4 md:w-8/12 mx-auto">So you can focus on writing your blog and never worry about those cover images.</p>
<div className="bg-indigo-400 text-white p-2">
<div className="md:w-8/12 mx-auto pt-32 p-6">
<h2 className="md:text-6xl text-5xl text-center font-Nunito font-bold mx-auto">Simple, quick, and easy to use</h2>
<p className="md:text-2xl text-xl font-Nunito text-center py-4 md:w-8/12 mx-auto">So you can focus on writing your blog and never worry about those cover images.</p>
<Link to="/editor" >
<button className="flex mx-auto my-4 hover:translate-x-2 duration-300 bg-gray-700 rounded-full text-white text-xl font-Nunito font-semibold p-4 px-8">It's completely Free! Try Now &rarr;</button>
</Link>
</div>
<footer className=" p-10 flex md:flex-row flex-col font-Inter md:px-20 justify-center items-center">
<footer className=" p-10 flex md:flex-row flex-col-reverse font-Inter md:px-20 justify-center items-center">
<div className="md:w-1/2 flex flex-col">
<span className="text-lg">Made with 💛 by <a href="https://rutik.dev" className="font-semibold underline decoration-wavy underline-offset-4" target="_blank" rel="noreferrer">Rutik Wankhade</a></span>
</div>