mirror of
https://github.com/woodchen-ink/CoverView.git
synced 2025-07-18 14:01:56 +08:00
add landing page and hero section
This commit is contained in:
rutik wankhade
parent
be27d89435
commit
d648bfe12f
25
package-lock.json
generated
25
package-lock.json
generated
@ -7375,6 +7375,14 @@
|
||||
"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
|
||||
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
|
||||
},
|
||||
"history": {
|
||||
"version": "5.3.0",
|
||||
"resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
|
||||
"integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.7.6"
|
||||
}
|
||||
},
|
||||
"hoopy": {
|
||||
"version": "0.1.4",
|
||||
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
|
||||
@ -12433,6 +12441,23 @@
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
|
||||
"integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
|
||||
},
|
||||
"react-router": {
|
||||
"version": "6.3.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
|
||||
"integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
|
||||
"requires": {
|
||||
"history": "^5.2.0"
|
||||
}
|
||||
},
|
||||
"react-router-dom": {
|
||||
"version": "6.3.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
|
||||
"integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
|
||||
"requires": {
|
||||
"history": "^5.2.0",
|
||||
"react-router": "6.3.0"
|
||||
}
|
||||
},
|
||||
"react-scripts": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
"react": "^16.13.1",
|
||||
"react-component-export-image": "^0.1.6",
|
||||
"react-dom": "^16.13.1",
|
||||
"react-router-dom": "^6.3.0",
|
||||
"react-scripts": "^5.0.1",
|
||||
"react-select": "^3.1.0",
|
||||
"unsplash-js": "^7.0.15"
|
||||
|
||||
BIN
public/logo.png
BIN
public/logo.png
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 15 KiB |
BIN
src/assets/images/cover1.png
Normal file
BIN
src/assets/images/cover1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 283 KiB |
BIN
src/assets/images/cover2.png
Normal file
BIN
src/assets/images/cover2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
src/assets/images/cover3.png
Normal file
BIN
src/assets/images/cover3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
src/assets/images/cover4.png
Normal file
BIN
src/assets/images/cover4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
src/assets/images/cover5.png
Normal file
BIN
src/assets/images/cover5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 288 KiB |
@ -1,17 +1,18 @@
|
||||
import React from 'react';
|
||||
import { BrowserRouter, Route, Routes } from "react-router-dom";
|
||||
|
||||
import Editor from './Editor';
|
||||
import Info from './Info'
|
||||
import { ImgProvider } from '../utils/ImgContext'
|
||||
import Home from './Home'
|
||||
|
||||
const App = () => {
|
||||
|
||||
return (
|
||||
<ImgProvider>
|
||||
<div>
|
||||
<Editor />
|
||||
<Info />
|
||||
</div>
|
||||
</ImgProvider>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route exact path="/" element={<Home />} />
|
||||
<Route exact path="/editor" element={<Editor />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
@ -4,6 +4,9 @@ import ComponentToImg from "./ComponentToImg";
|
||||
import Select from 'react-select';
|
||||
import RandomTheme from './RandomTheme';
|
||||
// import resetIcon from '../assets/icons/reset.svg'
|
||||
import { ImgProvider } from '../utils/ImgContext'
|
||||
import logo from '../assets/icons/logo.png'
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
const defaultSettings = {
|
||||
title: "How I built my first project with react",
|
||||
@ -60,7 +63,22 @@ class Editor extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="flex md:flex-row flex-col bg-gray-50 ">
|
||||
<div>
|
||||
<div className="text-xl bg-white flex border-b border-gray-100 shadow-xl p-2">
|
||||
<Link to="/" className="flex items-center">
|
||||
<img src={logo} alt="logo" className="w-8 h-8 mx-2"/>
|
||||
<h1 className="font-semibold">Coverview</h1>
|
||||
|
||||
</Link>
|
||||
|
||||
<a href="a" className="ml-auto mr-4 bg-blue-400 text-sm rounded-full px-4 font-semibold text-white p-1">Share on Twitter</a>
|
||||
</div>
|
||||
|
||||
<ImgProvider>
|
||||
|
||||
|
||||
<div className="flex md:flex-row flex-col bg-gray-50 ">
|
||||
|
||||
<div className="bg-white shadow-sm p-4 flex flex-col md:w-1/4">
|
||||
|
||||
|
||||
@ -70,7 +88,7 @@ class Editor extends React.Component {
|
||||
type="text"
|
||||
value={this.state.title}
|
||||
placeholder="Enter title here"
|
||||
className="focus:outline-none border text-gray-700 text-xl rounded p-2 h-24"
|
||||
className="focus:outline-none border text-gray-700 text-xl rounded p-2 h-24"
|
||||
onChange={(e) => this.setState({ title: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
@ -220,7 +238,7 @@ class Editor extends React.Component {
|
||||
</div>
|
||||
|
||||
|
||||
<span className="text-sm mt-4 text-center text-gray-400">Made with 💖 by <a href="https://rutikwankhade.dev"
|
||||
<span className="text-sm mt-4 text-center text-gray-400">Made with 💖 by <a href="https://twitter.com/WankhadeRutik"
|
||||
target="_blank" rel="noopener noreferrer" className="underline hover:text-purple-400">Rutik Wankhade</a></span>
|
||||
|
||||
|
||||
@ -252,7 +270,7 @@ class Editor extends React.Component {
|
||||
<div className="flex flex-col items-center justify-center ">
|
||||
|
||||
|
||||
<div className="w-full flex items-center mb-4 ">
|
||||
{/* <div className="w-full flex items-center mb-4 ">
|
||||
|
||||
<h1 className="ml-2 mr-auto text-gray-800 text-2xl font-bold ">Coverview</h1>
|
||||
|
||||
@ -263,19 +281,25 @@ class Editor extends React.Component {
|
||||
<img src="https://img.shields.io/github/stars/rutikwankhade/Coverview.svg" alt="star" className="w-20" />
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
<a className="mx-2 p-2" href="https://github.com/sponsors/rutikwankhade" target="_blank" rel="noreferrer">
|
||||
|
||||
<img src="https://img.shields.io/badge/sponsor-30363D?style=for-the-badge&logo=GitHub-Sponsors&logoColor=#white" alt="sponsor" className="rounded" />
|
||||
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div> */}
|
||||
<ComponentToImg downloadAs={this.state.download}>
|
||||
<CoverImage {...this.state} />
|
||||
</ComponentToImg>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</ImgProvider>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
64
src/components/Home.js
Normal file
64
src/components/Home.js
Normal file
@ -0,0 +1,64 @@
|
||||
import React from 'react';
|
||||
import logo from '../assets/icons/logo.png'
|
||||
import { Link } from 'react-router-dom';
|
||||
import cover1 from '../assets/images/cover5.png'
|
||||
import cover2 from '../assets/images/cover2.png'
|
||||
import cover3 from '../assets/images/cover3.png'
|
||||
|
||||
|
||||
const Home = () => {
|
||||
|
||||
|
||||
return (
|
||||
<div className="bg-gray-50">
|
||||
|
||||
<div className="text-xl flex border-b border-gray-100 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 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">
|
||||
<span className="">Go to editor →</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className=" mx-auto 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">
|
||||
Creating cover images for your blogs is now super easy
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<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 ">
|
||||
<img src={cover2} className="rounded mb-2" alt="cover1" />
|
||||
<p className="animate animate-pulse bg-gray-50 h-5 rounded mb-2"></p>
|
||||
<p className="animate animate-pulse w-8/12 bg-gray-50 h-5 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 ">
|
||||
<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 w-8/12 bg-gray-50 h-6 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 ">
|
||||
<img src={cover3} className="rounded mb-2" alt="cover3" />
|
||||
<p className="animate animate-pulse bg-gray-50 h-5 rounded mb-2"></p>
|
||||
<p className="animate animate-pulse w-8/12 bg-gray-50 h-5 rounded mb-2"></p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Home;
|
||||
@ -1,59 +0,0 @@
|
||||
import React from 'react';
|
||||
import logo from '../assets/icons/logo.png'
|
||||
|
||||
const Info = () => {
|
||||
|
||||
|
||||
const fbMeta = ` <meta property="og:image" content="url of your image">`
|
||||
const twitterMeta = `<meta property="twitter:image" content="url of your image">
|
||||
`
|
||||
|
||||
return (
|
||||
<div className="md:p-20 bg-gray-100">
|
||||
|
||||
|
||||
|
||||
<div className="flex md:flex-row flex-col justify-center">
|
||||
<div className="m-4 bg-white p-10 rounded-xl shadow-sm">
|
||||
<h2 className="text-2xl my-2 font-semibold">How to use it with meta tags?</h2>
|
||||
<p>Add this code in the head tag of your site.</p>
|
||||
|
||||
<div className="bg-purple-100 border-2 border-gray-700 my-4 p-6 rounded text-gray-700 ">
|
||||
<p>{fbMeta}</p>
|
||||
<p>{twitterMeta}</p>
|
||||
</div>
|
||||
|
||||
<span className="text-sm italic">Don't forget to replace content with your image url</span>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div className=" md:w-1/3 m-4 bg-white p-10 rounded-xl shadow-sm">
|
||||
<h2 className="text-2xl my-2 font-semibold">Can I upload a custom icon or my own Image?</h2>
|
||||
<p className="">Yes. Search <span className="text-purple-400 font-semibold ">custom</span> in the icon option and select it. Now you can upload a custom logo or your own image.</p>
|
||||
<p className="text-sm my-2 italic">Make sure to upload an icon/image with 1:1 ratio</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div className=" p-20 ">
|
||||
<div className="flex flex-col items-center">
|
||||
<img src={logo} className="" alt="logo" />
|
||||
<h1 className="text-2xl text-purple-400 ">coverview</h1>
|
||||
</div>
|
||||
|
||||
<h1 className="text-center md:text-6xl text-3xl font-extrabold text-gray-700 ">Creating cover images for your blogs is now super easy</h1>
|
||||
<a href="https://github.com/rutikwankhade/CoverView" target="_blank" rel="noreferrer" className="bg-gray-700 text-white p-2 px-6 rounded text-xl flex my-10 hover:bg-gray-800 mx-auto w-max">⭐ Star on Github</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Info;
|
||||
@ -74,8 +74,8 @@ const StylishTheme = ({ config }) => {
|
||||
<div className="flex items-center mt-10 text-left">
|
||||
{
|
||||
customIcon ?
|
||||
<div className="w-12 h-12 ">
|
||||
<img src={customIcon} alt="img" className="rounded-full bg-white p-1 border-white" />
|
||||
<div className=" ">
|
||||
<img src={customIcon} alt="img" className="w-12 h-12 mr-2 rounded-full bg-white border border-white" />
|
||||
</div>
|
||||
:
|
||||
<div className="mr-2 items-center justify-center flex">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user