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

update: update design images in hero section

Browse Source
This commit is contained in:
Rutik Wankhade 2024-10-10 23:52:40 +05:30
parent fc024341bd
commit 07c69f6081
7 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/cover1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 626 KiB

BIN
src/assets/images/cover2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
src/assets/images/cover2.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.2 KiB

BIN
src/assets/images/cover3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

BIN
src/assets/images/cover3.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.6 KiB

2
src/components/Header.js
View File

@ -7,7 +7,7 @@ const Header = () => {
return (
<div className="text-xl md:px-2 flex border-dashed border-b-2 border-gray-100 p-2">
<div className="bg-orange-400 text-xl md:px-2 flex border-dashed border-b-2 border-orange-500 p-2">
<Link to="/" className="flex items-center">
<img src={logo} alt="logo" className="w-8 h-8 mx-4" />
<h1 className="font-semibold">Coverview</h1>

23
src/components/Home.js
View File

@ -1,9 +1,9 @@
import React from 'react';
import logo from '../assets/icons/logo.png'
import { Link } from 'react-router-dom';
import cover1 from '../assets/images/cover1.webp'
import cover2 from '../assets/images/cover2.webp'
import cover3 from '../assets/images/cover3.webp'
import cover1 from '../assets/images/cover1.png'
import cover2 from '../assets/images/cover2.png'
import cover3 from '../assets/images/cover3.png'
import cover4 from '../assets/images/cover4.webp'
@ -30,40 +30,41 @@ const Home = () => {
<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">
<a href="https://github.com/rutikwankhade/CoverView" target="_blank" rel="noreferrer" className="hover:translate-x-2 duration-300 bg-gray-700 group rounded-xl px-2 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 className=" mx-auto md:px-20 py-6 flex flex-col items-center">
<h1 className="md:w-7/12 m-10 text-center md:text-5xl text-4xl font-extrabold text-gray-700 font-Nunito">
<h1 className="md:w-7/12 m-10 text-center md:text-5xl text-4xl font-extrabold text-gray-700 font-Anek">
Creating cover images for your blogs is now super easy
</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">
<span className="md:text-2xl font-bold text-lg">Create Now &rarr;</span>
<Link to="/editor" className="hover:translate-x-2 duration-300 bg-gray-700 hover:bg-gray-800 group rounded-full border-4 border-gray-100 px-6 md:px-8 text-white md:text-2xl text-base mx-auto font-Poppins font-semibold md:p-4 p-2">
<span className="md:text-2xl font-semibold text-lg">Create Now</span>
</Link>
</div>
<div className=" temple flex flex-row items-center justify-center mx-auto md:w-10/12">
<div className=" 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-lg shadow-gray-50 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 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 ">
<div className="m-4 transform hover:scale-105 hover:rotate-3 -rotate-2 duration-300 bg-white p-4 shadow-lg shadow-gray-50 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 ">
<div className="m-4 transform -translate-y-20 border animate hover:scale-105 hover:rotate-3 -rotate-6 duration-100 bg-white p-2 sshadow-lg shadow-gray-50 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>