mirror of
https://github.com/woodchen-ink/CoverView.git
synced 2025-07-19 06:21:56 +08:00
feat: update hero section and feature section
This commit is contained in:
Rutik Wankhade
parent
4589a1f2e5
commit
0bf90d56b5
Binary file not shown.
|
Before Width: | Height: | Size: 9.0 KiB After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.1 KiB After Width: | Height: | Size: 7.3 KiB |
@ -19,82 +19,87 @@ const Home = () => {
|
|||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="bg-gray-50">
|
<div className="">
|
||||||
|
|
||||||
<div className="text-xl flex border-b border-gray-100 p-2 md:w-10/12 mx-auto">
|
|
||||||
<div className="flex items-center">
|
<div className="">
|
||||||
<img src={logo} alt="logo" className="w-8 h-8 mx-2" />
|
|
||||||
<h1 className="font-semibold md:text-xl text-lg font-Inter">Coverview</h1>
|
<div className="text-xl flex p-2 md:w-10/12 mx-auto">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<img src={logo} alt="logo" className="w-8 h-8 mx-2" />
|
||||||
|
<h1 className="font-semibold md:text-xl text-lg font-Inter">Coverview</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="https://github.com/rutikwankhade/CoverView" target="_blank" rel="noreferrer" className="hover:translate-x-2 duration-300 bg-gray-700 group rounded-xl md:px-4 text-white md:text-sm text-xs ml-auto mr-4 font-Inter font-semibold p-2">
|
||||||
|
<span className="text-sm">⭐ Star on Github</span>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a href="https://github.com/rutikwankhade/CoverView" target="_blank" rel="noreferrer" className="hover:translate-x-2 duration-300 bg-gray-700 group rounded-xl md:px-4 text-white md:text-sm text-xs ml-auto mr-4 font-Inter font-semibold p-2">
|
<div className=" mx-auto md:px-20 py-6 flex flex-col items-center">
|
||||||
<span className="text-sm">⭐ Star on Github</span>
|
<h1 className="md:w-7/12 m-10 text-center md:text-5xl text-4xl font-extrabold text-gray-700 font-Nunito">
|
||||||
</a>
|
Creating cover images for your blogs is now super easy
|
||||||
</div>
|
</h1>
|
||||||
|
<Link to="/editor" className="hover:translate-x-2 duration-300 bg-gray-700 hover:bg-gray-800 group rounded-full px-4 md:px-8 text-white md:text-2xl text-lg mx-auto font-Nunito font-semibold md:p-4 p-2">
|
||||||
<div className=" mx-auto md:px-20 py-6 flex flex-col items-center">
|
<span className="md:text-2xl text-lg">Create Now →</span>
|
||||||
<h1 className="md:w-7/12 m-10 text-center md:text-5xl text-3xl font-extrabold text-gray-700 font-Anek">
|
</Link>
|
||||||
Creating cover images for your blogs is now super easy
|
</div>
|
||||||
</h1>
|
|
||||||
<Link to="/editor" className="hover:translate-x-2 duration-300 bg-gray-700 hover:bg-gray-800 group rounded-full px-4 md:px-8 text-white md:text-2xl text-lg mx-auto font-Inter font-semibold md:p-4 p-2">
|
|
||||||
<span className="md:text-2xl text-lg">Open editor →</span>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div className=" temple flex flex-row items-center justify-center mx-auto md:w-10/12">
|
<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 hover:scale-105 hover:-rotate-3 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" />
|
<img src={cover2} className="border border-gray-100 rounded mb-2" alt="cover1" />
|
||||||
<p className="animate animate-pulse bg-gray-50 md:h-5 h-2 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 md:h-5 h-2 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 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 md:h-6 h-3 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 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 md:h-5 h-2 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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<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 md:h-6 h-3 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 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 md:h-5 h-2 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>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div className="md:my-32 my-10 mx-auto">
|
<div className="md:my-32 my-10 mx-auto">
|
||||||
|
|
||||||
<div className="md:w-10/12 mx-auto flex flex-col ">
|
<div className=" mx-auto flex flex-col md:w-10/12">
|
||||||
<div className="md:w-9/12 text-center mx-auto ">
|
<div className="md:w-7/12 text-center mx-auto ">
|
||||||
<h2 className="text-5xl py-4 font-bold font-Anek text-gray-700">Why cover images are more important than you think?</h2>
|
<h2 className="text-5xl py-4 font-bold font-Nunito text-gray-700">Why cover images are more important than you think?</h2>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex md:flex-row flex-col mx-auto justify-center my-10 mx-auto">
|
<div className="flex md:flex-row flex-col justify-center mx-auto">
|
||||||
|
|
||||||
<div className="m-10 p-10 bg-white rounded-xl shadow-xl shadow-gray-100 flex flex-col md:w-4/12 ">
|
<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 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>
|
<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>
|
</div>
|
||||||
<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>
|
<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>
|
||||||
|
|
||||||
<div className="m-10 p-10 bg-white rounded-xl shadow-xl shadow-gray-100 flex flex-col md:w-4/12 ">
|
<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=" 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>
|
<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>
|
</div>
|
||||||
<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>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -104,42 +109,44 @@ const Home = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<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 <span className="text-indigo-400">seconds</span>.</h2>
|
<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>
|
||||||
<div className="md:w-8/12 my-20 flex md:flex-row flex-col mx-auto">
|
|
||||||
|
|
||||||
<div className="md:w-1/3 flex flex-col mx-10">
|
|
||||||
|
<div className="md:w-8/12 my-16 p-4 flex md:flex-row flex-col mx-auto">
|
||||||
|
|
||||||
|
<div className="md:w-1/2 bg-gray-50 rounded-xl px-4 pt-6 flex flex-col mx-10">
|
||||||
|
|
||||||
<div className="text-center">
|
<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>
|
<div className="text-xl w-max mx-auto text-white py-1 px-4 font-Nunito font-semibold bg-indigo-400 rounded-full ">Step 1</div>
|
||||||
|
|
||||||
<p className="text-2xl my-2 font-semibold font-Inter text-gray-600">Add title and author of your blog post</p>
|
<p className="text-3xl p-4 text-center mx-auto my-2 font-semibold font-Nunito text-gray-700">Add your blog title and author name</p>
|
||||||
</div>
|
</div>
|
||||||
<img src={step1} alt="preview" className="mt-2 rounded-lg shadow-sm" />
|
<img src={step1} alt="preview" className="mt-2 w-10/12 mx-auto rounded-t-xl shadow-sm" />
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center font-bold text-3xl text-center mx-auto">--------→</div>
|
<div className="md:w-1/2 bg-gray-50 rounded-xl px-4 pt-6 flex flex-col mx-10">
|
||||||
|
|
||||||
<div className="flex flex-col md:w-1/3 mx-10">
|
|
||||||
|
|
||||||
<div className="text-center">
|
<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>
|
<div className="text-xl w-max mx-auto text-white py-1 px-4 font-Nunito font-semibold bg-indigo-400 rounded-full ">Step 2</div>
|
||||||
|
|
||||||
<p className="text-2xl my-2 font-semibold font-Inter text-gray-600">Customize with colors, fonts, icons and patterns</p>
|
<p className="text-3xl p-4 text-center mx-auto my-2 font-semibold font-Nunito text-gray-700">Customize with colors, fonts and icons</p>
|
||||||
</div>
|
</div>
|
||||||
<img src={step2} alt="preview" className="mt-2 rounded-lg shadow-sm" />
|
<img src={step2} alt="preview" className="mt-auto mb-0 w-10/12 mx-auto rounded-t-xl shadow-sm" />
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div className="md:w-8/12 flex md:flex-row flex-col justify-center items-center mx-auto">
|
<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="text-center md:w-1/3 m-4">
|
<div className="text-center md:w-1/2 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>
|
<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>
|
||||||
|
<p className="text-3xl pb-2 text-center mx-auto my-2 font-semibold font-Nunito text-gray-700">Choose your style from different themes</p>
|
||||||
|
|
||||||
<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>
|
<p className="text-xl">Unsplash integration, custom icon for personal branding and more.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -166,7 +173,7 @@ const Home = () => {
|
|||||||
|
|
||||||
<div className="text-center m-4">
|
<div className="text-center m-4">
|
||||||
|
|
||||||
<p className="text-2xl my-2 font-semibold font-Inter text-gray-600">Supports platforms like Hashnode or Dev.to</p>
|
<p className="text-2xl my-2 font-semibold font-Nunito text-gray-600">Supports platforms like Hashnode or Dev.to</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex mx-auto justify-center">
|
<div className="flex mx-auto justify-center">
|
||||||
<img src={hashnodeLogo} className="w-20 m-2" alt="hashnode" />
|
<img src={hashnodeLogo} className="w-20 m-2" alt="hashnode" />
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user