mirror of
https://github.com/mertJF/tailblocks.git
synced 2025-12-11 02:03:00 +00:00
first commit
This commit is contained in:
mertJF
263
src/App.js
Normal file
263
src/App.js
Normal file
@@ -0,0 +1,263 @@
|
||||
import React, { Component } from 'react';
|
||||
import Frame from 'react-frame-component';
|
||||
import SyntaxHighlighter from 'react-syntax-highlighter';
|
||||
import { vs2015, docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';
|
||||
import getBlock from './blocks';
|
||||
import getIcons from './icons';
|
||||
|
||||
const iconList = getIcons();
|
||||
const themeList = ["indigo", "orange", "teal", "red", "purple", "pink", "blue", "green"];
|
||||
|
||||
const desktopIcon = (
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect x={2} y={3} width={20} height={14} rx={2} ry={2} />
|
||||
<path d="M8 21h8m-4-4v4" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const phoneIcon = (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<rect x={5} y={2} width={14} height={20} rx={2} ry={2} />
|
||||
<path d="M12 18h.01" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const tabletIcon = (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<rect x={4} y={2} width={16} height={20} rx={2} ry={2} />
|
||||
<path d="M12 18h.01" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const viewList = [
|
||||
{
|
||||
icon: desktopIcon,
|
||||
name: 'desktop'
|
||||
},
|
||||
{
|
||||
icon: tabletIcon,
|
||||
name: 'tablet'
|
||||
},
|
||||
{
|
||||
icon: phoneIcon,
|
||||
name: 'phone'
|
||||
}
|
||||
]
|
||||
|
||||
class App extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
ready: false,
|
||||
darkMode: false,
|
||||
sidebar: true,
|
||||
codeView: false,
|
||||
view: 'desktop',
|
||||
theme: 'indigo',
|
||||
blockType: 'Blog',
|
||||
blockName: 'BlogA',
|
||||
markup: ''
|
||||
}
|
||||
|
||||
this.changeMode = this.changeMode.bind(this);
|
||||
this.changeTheme = this.changeTheme.bind(this);
|
||||
this.changeBlock = this.changeBlock.bind(this);
|
||||
this.handleContentDidMount = this.handleContentDidMount.bind(this);
|
||||
this.changeView = this.changeView.bind(this);
|
||||
this.toggleSidebar = this.toggleSidebar.bind(this);
|
||||
this.toggleView = this.toggleView.bind(this);
|
||||
this.markupRef = React.createRef();
|
||||
this.textareaRef = React.createRef();
|
||||
}
|
||||
|
||||
changeMode() {
|
||||
this.setState({ darkMode: !this.state.darkMode })
|
||||
}
|
||||
|
||||
handleContentDidMount() {
|
||||
setTimeout(() => {
|
||||
this.setState({
|
||||
ready: true,
|
||||
markup: this.markupRef.current.innerHTML
|
||||
})
|
||||
}, 400);
|
||||
}
|
||||
|
||||
beautifyHTML(codeStr) {
|
||||
const process = (str) => {
|
||||
let div = document.createElement('div');
|
||||
div.innerHTML = str.trim();
|
||||
return format(div, 0).innerHTML.trim();
|
||||
}
|
||||
|
||||
const format = (node, level) => {
|
||||
let indentBefore = new Array(level++ + 1).join(' '),
|
||||
indentAfter = new Array(level - 1).join(' '),
|
||||
textNode;
|
||||
|
||||
for (let i = 0; i < node.children.length; i++) {
|
||||
textNode = document.createTextNode('\n' + indentBefore);
|
||||
node.insertBefore(textNode, node.children[i]);
|
||||
|
||||
format(node.children[i], level);
|
||||
|
||||
if (node.lastElementChild === node.children[i]) {
|
||||
textNode = document.createTextNode('\n' + indentAfter);
|
||||
node.appendChild(textNode);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
return process(codeStr);
|
||||
}
|
||||
|
||||
changeBlock(e) {
|
||||
const { currentTarget } = e;
|
||||
const blockType = currentTarget.getAttribute('block-type');
|
||||
const blockName = currentTarget.getAttribute('block-name');
|
||||
this.setState({
|
||||
blockType, blockName,
|
||||
codeView: false
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
changeTheme(e) {
|
||||
const { currentTarget } = e;
|
||||
const theme = currentTarget.getAttribute('data-theme');
|
||||
this.setState({ theme });
|
||||
}
|
||||
|
||||
changeView(e) {
|
||||
const { currentTarget } = e;
|
||||
const view = currentTarget.getAttribute('data-view');
|
||||
this.setState({ view, codeView: false });
|
||||
}
|
||||
|
||||
toggleView(e) {
|
||||
this.setState({ codeView: !this.state.codeView, view: 'desktop', markup: this.markupRef.current.innerHTML })
|
||||
}
|
||||
|
||||
themeListRenderer() {
|
||||
const { theme } = this.state;
|
||||
return themeList.map((t, k) =>
|
||||
<button key={k} data-theme={t} className={`theme-button bg-${t}-500${theme === t ? ' is-active' : ''}`} onClick={this.changeTheme}></button>
|
||||
)
|
||||
}
|
||||
|
||||
listRenderer() {
|
||||
const { blockName } = this.state;
|
||||
return Object.entries(iconList).map(([type, icons]) =>
|
||||
<div className="blocks" key={type}>
|
||||
<div className="block-category">{type}</div>
|
||||
<div className="block-list">
|
||||
{Object.entries(icons).map(icon => <button key={icon[0]} onClick={this.changeBlock} className={`block-item${icon[0] === blockName ? ' is-active': ''}`} block-type={type} block-name={icon[0]}>{icon[1]}</button>)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
viewModeRenderer() {
|
||||
const { view } = this.state;
|
||||
return viewList.map((v, k) => <button key={k} className={`device${view === v.name ? ' is-active' : ''}`} data-view={v.name} onClick={this.changeView}>{v.icon}</button>);
|
||||
}
|
||||
|
||||
toggleSidebar() {
|
||||
this.setState({ sidebar: !this.state.sidebar });
|
||||
}
|
||||
|
||||
render() {
|
||||
const { darkMode, theme, blockName, blockType, sidebar, view } = this.state;
|
||||
return (
|
||||
<div className={`app${darkMode ? ' dark-mode' : ''}${sidebar ? ' has-sidebar' : ''} ${theme} ${view}`}>
|
||||
<textarea className="copy-textarea" ref={this.textareaRef} />
|
||||
<aside className="sidebar">
|
||||
{this.listRenderer()}
|
||||
</aside>
|
||||
<div className="toolbar">
|
||||
<button className="opener" onClick={this.toggleSidebar}>TAILWIND BLOCKS</button>
|
||||
<button className="copy-the-block" onClick={this.toggleView}>
|
||||
{!this.state.codeView ?
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M16 18L22 12 16 6"></path>
|
||||
<path d="M8 6L2 12 8 18"></path>
|
||||
</svg>
|
||||
:
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="css-i6dzq1"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
|
||||
<circle cx="12" cy="12" r="3"></circle>
|
||||
</svg>
|
||||
}
|
||||
<span>{!this.state.codeView ? 'VIEW CODE': 'PREVIEW'}</span>
|
||||
</button>
|
||||
<div className="switcher">
|
||||
{this.themeListRenderer()}
|
||||
</div>
|
||||
{this.viewModeRenderer()}
|
||||
<button className="mode" onClick={this.changeMode}></button>
|
||||
</div>
|
||||
<div className="markup" ref={this.markupRef}>{getBlock({ theme, darkMode })[blockType][blockName]}</div>
|
||||
<main className="main" style={{ opacity: this.state.ready ? '1' : '0' }}>
|
||||
<div className={`view${this.state.codeView ? ' show-code' : ''}`}>
|
||||
<Frame
|
||||
contentDidMount={this.handleContentDidMount}
|
||||
contentDidUpdate={this.handleContentDidUpdate}
|
||||
head={
|
||||
<>
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css" rel="stylesheet" />
|
||||
{darkMode ? <style dangerouslySetInnerHTML={{__html:`img { filter: invert(1); mix-blend-mode: color-dodge }`}} /> : <style dangerouslySetInnerHTML={{__html:`img { filter: sepia(1) hue-rotate(180deg) opacity(.9) grayscale(.7) }`}} />}
|
||||
</>
|
||||
}
|
||||
>
|
||||
{getBlock({ theme, darkMode })[blockType][blockName]}
|
||||
</Frame>
|
||||
<div className="codes">
|
||||
<SyntaxHighlighter language="html" style={darkMode ? vs2015 : docco} showLineNumbers>
|
||||
{this.beautifyHTML(this.state.markup)}
|
||||
</SyntaxHighlighter>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
9
src/App.test.js
Normal file
9
src/App.test.js
Normal file
@@ -0,0 +1,9 @@
|
||||
import React from 'react';
|
||||
import { render } from '@testing-library/react';
|
||||
import App from './App';
|
||||
|
||||
test('renders learn react link', () => {
|
||||
const { getByText } = render(<App />);
|
||||
const linkElement = getByText(/learn react/i);
|
||||
expect(linkElement).toBeInTheDocument();
|
||||
});
|
||||
227
src/blocks/blog/dark/a.js
Normal file
227
src/blocks/blog/dark/a.js
Normal file
@@ -0,0 +1,227 @@
|
||||
import React from 'react';
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkBlogA(props) {
|
||||
return (
|
||||
<section className="text-gray-500 bg-gray-900 body-font">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="flex flex-wrap -m-4">
|
||||
<div className="p-4 md:w-1/3">
|
||||
<div className="h-full border-2 border-gray-800 rounded-lg overflow-hidden">
|
||||
<img
|
||||
className="lg:h-48 md:h-36 w-full object-cover object-center"
|
||||
src="https://dummyimage.com/720x400"
|
||||
alt="blog"
|
||||
/>
|
||||
<div className="p-6">
|
||||
<h2 className="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
|
||||
CATEGORY
|
||||
</h2>
|
||||
<h1 className="title-font text-lg font-medium text-white mb-3">
|
||||
The Catalyzer
|
||||
</h1>
|
||||
<p className="leading-relaxed mb-3">
|
||||
Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
|
||||
microdosing tousled waistcoat.
|
||||
</p>
|
||||
<div className="flex items-center flex-wrap ">
|
||||
<a href className={`text-${props.theme}-500 inline-flex items-center md:mb-2 lg:mb-0`}>
|
||||
Learn More
|
||||
<svg
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M5 12h14" />
|
||||
<path d="M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
<span className="text-gray-600 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-800">
|
||||
<svg
|
||||
className="w-4 h-4 mr-1"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
|
||||
<circle cx={12} cy={12} r={3} />
|
||||
</svg>
|
||||
1.2K
|
||||
</span>
|
||||
<span className="text-gray-600 inline-flex items-center leading-none text-sm">
|
||||
<svg
|
||||
className="w-4 h-4 mr-1"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
|
||||
</svg>
|
||||
6
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 md:w-1/3">
|
||||
<div className="h-full border-2 border-gray-800 rounded-lg overflow-hidden">
|
||||
<img
|
||||
className="lg:h-48 md:h-36 w-full object-cover object-center"
|
||||
src="https://dummyimage.com/721x401"
|
||||
alt="blog"
|
||||
/>
|
||||
<div className="p-6">
|
||||
<h2 className="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
|
||||
CATEGORY
|
||||
</h2>
|
||||
<h1 className="title-font text-lg font-medium text-white mb-3">
|
||||
The 400 Blows
|
||||
</h1>
|
||||
<p className="leading-relaxed mb-3">
|
||||
Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
|
||||
microdosing tousled waistcoat.
|
||||
</p>
|
||||
<div className="flex items-center flex-wrap">
|
||||
<a href className={`text-${props.theme}-500 inline-flex items-center md:mb-2 lg:mb-0`}>
|
||||
Learn More
|
||||
<svg
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M5 12h14" />
|
||||
<path d="M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
<span className="text-gray-600 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-800">
|
||||
<svg
|
||||
className="w-4 h-4 mr-1"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
|
||||
<circle cx={12} cy={12} r={3} />
|
||||
</svg>
|
||||
1.2K
|
||||
</span>
|
||||
<span className="text-gray-600 inline-flex items-center leading-none text-sm">
|
||||
<svg
|
||||
className="w-4 h-4 mr-1"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
|
||||
</svg>
|
||||
6
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 md:w-1/3">
|
||||
<div className="h-full border-2 border-gray-800 rounded-lg overflow-hidden">
|
||||
<img
|
||||
className="lg:h-48 md:h-36 w-full object-cover object-center"
|
||||
src="https://dummyimage.com/722x402"
|
||||
alt="blog"
|
||||
/>
|
||||
<div className="p-6">
|
||||
<h2 className="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
|
||||
CATEGORY
|
||||
</h2>
|
||||
<h1 className="title-font text-lg font-medium text-white mb-3">
|
||||
Shooting Stars
|
||||
</h1>
|
||||
<p className="leading-relaxed mb-3">
|
||||
Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
|
||||
microdosing tousled waistcoat.
|
||||
</p>
|
||||
<div className="flex items-center flex-wrap ">
|
||||
<a
|
||||
href
|
||||
className={`text-${props.theme}-500 inline-flex items-center md:mb-2 lg:mb-0`}
|
||||
>
|
||||
Learn More
|
||||
<svg
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M5 12h14" />
|
||||
<path d="M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
<span className="text-gray-600 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-800">
|
||||
<svg
|
||||
className="w-4 h-4 mr-1"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
|
||||
<circle cx={12} cy={12} r={3} />
|
||||
</svg>
|
||||
1.2K
|
||||
</span>
|
||||
<span className="text-gray-600 inline-flex items-center leading-none text-sm">
|
||||
<svg
|
||||
className="w-4 h-4 mr-1"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
|
||||
</svg>
|
||||
6
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
DarkBlogA.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkBlogA.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkBlogA;
|
||||
203
src/blocks/blog/dark/b.js
Normal file
203
src/blocks/blog/dark/b.js
Normal file
@@ -0,0 +1,203 @@
|
||||
import React from 'react';
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkBlogB(props) {
|
||||
return (
|
||||
<section className="text-gray-500 bg-gray-900 body-font">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="flex flex-wrap -m-4">
|
||||
<div className="p-4 lg:w-1/3">
|
||||
<div className="h-full bg-gray-800 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative">
|
||||
<h2 className="tracking-widest text-xs title-font font-medium text-gray-600 mb-1">
|
||||
CATEGORY
|
||||
</h2>
|
||||
<h1 className="title-font sm:text-2xl text-xl font-medium text-white mb-3">
|
||||
Raclette Blueberry Nextious Level
|
||||
</h1>
|
||||
<p className="leading-relaxed mb-3">
|
||||
Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
|
||||
microdosing tousled waistcoat.
|
||||
</p>
|
||||
<a href className={`text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M5 12h14" />
|
||||
<path d="M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
<div className="text-center mt-2 leading-none flex justify-center absolute bottom-0 left-0 w-full py-4">
|
||||
<span className="text-gray-600 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-700">
|
||||
<svg
|
||||
className="w-4 h-4 mr-1"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
|
||||
<circle cx={12} cy={12} r={3} />
|
||||
</svg>
|
||||
1.2K
|
||||
</span>
|
||||
<span className="text-gray-600 inline-flex items-center leading-none text-sm">
|
||||
<svg
|
||||
className="w-4 h-4 mr-1"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
|
||||
</svg>
|
||||
6
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 lg:w-1/3">
|
||||
<div className="h-full bg-gray-800 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative">
|
||||
<h2 className="tracking-widest text-xs title-font font-medium text-gray-600 mb-1">
|
||||
CATEGORY
|
||||
</h2>
|
||||
<h1 className="title-font sm:text-2xl text-xl font-medium text-white mb-3">
|
||||
Ennui Snackwave Thundercats
|
||||
</h1>
|
||||
<p className="leading-relaxed mb-3">
|
||||
Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
|
||||
microdosing tousled waistcoat.
|
||||
</p>
|
||||
<a href className={`text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M5 12h14" />
|
||||
<path d="M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
<div className="text-center mt-2 leading-none flex justify-center absolute bottom-0 left-0 w-full py-4">
|
||||
<span className="text-gray-600 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-700">
|
||||
<svg
|
||||
className="w-4 h-4 mr-1"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
|
||||
<circle cx={12} cy={12} r={3} />
|
||||
</svg>
|
||||
1.2K
|
||||
</span>
|
||||
<span className="text-gray-600 inline-flex items-center leading-none text-sm">
|
||||
<svg
|
||||
className="w-4 h-4 mr-1"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
|
||||
</svg>
|
||||
6
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 lg:w-1/3">
|
||||
<div className="h-full bg-gray-800 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative">
|
||||
<h2 className="tracking-widest text-xs title-font font-medium text-gray-600 mb-1">
|
||||
CATEGORY
|
||||
</h2>
|
||||
<h1 className="title-font sm:text-2xl text-xl font-medium text-white mb-3">
|
||||
Selvage Poke Waistcoat Godard
|
||||
</h1>
|
||||
<p className="leading-relaxed mb-3">
|
||||
Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
|
||||
microdosing tousled waistcoat.
|
||||
</p>
|
||||
<a href className={`text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M5 12h14" />
|
||||
<path d="M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
<div className="text-center mt-2 leading-none flex justify-center absolute bottom-0 left-0 w-full py-4">
|
||||
<span className="text-gray-600 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-700">
|
||||
<svg
|
||||
className="w-4 h-4 mr-1"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
|
||||
<circle cx={12} cy={12} r={3} />
|
||||
</svg>
|
||||
1.2K
|
||||
</span>
|
||||
<span className="text-gray-600 inline-flex items-center leading-none text-sm">
|
||||
<svg
|
||||
className="w-4 h-4 mr-1"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
|
||||
</svg>
|
||||
6
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
DarkBlogB.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkBlogB.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkBlogB;
|
||||
170
src/blocks/blog/dark/c.js
Normal file
170
src/blocks/blog/dark/c.js
Normal file
@@ -0,0 +1,170 @@
|
||||
import React from 'react';
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkBlogC(props) {
|
||||
return (
|
||||
<section className="text-gray-500 bg-gray-900 body-font overflow-hidden">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="flex flex-wrap -m-12">
|
||||
<div className="p-12 md:w-1/2 flex flex-col items-start">
|
||||
<span className="inline-block py-1 px-3 rounded bg-gray-800 text-gray-500 text-sm font-medium tracking-widest">
|
||||
CATEGORY
|
||||
</span>
|
||||
<h2 className="sm:text-3xl text-2xl title-font font-medium text-white mt-4 mb-4">
|
||||
Roof party normcore before they sold out, cornhole vape
|
||||
</h2>
|
||||
<p className="leading-relaxed mb-8">
|
||||
Live-edge letterpress cliche, salvia fanny pack humblebrag narwhal
|
||||
portland. VHS man braid palo santo hoodie brunch trust fund. Bitters
|
||||
hashtag waistcoat fashion axe chia unicorn. Plaid fixie chambray 90's,
|
||||
slow-carb etsy tumeric. Cray pug you probably haven't heard of them
|
||||
hexagon kickstarter craft beer pork chic.
|
||||
</p>
|
||||
<div className="flex items-center flex-wrap pb-4 mb-4 border-b-2 border-gray-800 mt-auto w-full">
|
||||
<a href className={`text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M5 12h14" />
|
||||
<path d="M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
<span className="text-gray-600 mr-3 inline-flex items-center ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-800">
|
||||
<svg
|
||||
className="w-4 h-4 mr-1"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
|
||||
<circle cx={12} cy={12} r={3} />
|
||||
</svg>
|
||||
1.2K
|
||||
</span>
|
||||
<span className="text-gray-600 inline-flex items-center leading-none text-sm">
|
||||
<svg
|
||||
className="w-4 h-4 mr-1"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
|
||||
</svg>
|
||||
6
|
||||
</span>
|
||||
</div>
|
||||
<a href className="inline-flex items-center">
|
||||
<img
|
||||
alt="blog"
|
||||
src="https://dummyimage.com/104x104"
|
||||
className="w-12 h-12 rounded-full flex-shrink-0 object-cover object-center"
|
||||
/>
|
||||
<span className="flex-grow flex flex-col pl-4">
|
||||
<span className="title-font font-medium text-white">
|
||||
Holden Caulfield
|
||||
</span>
|
||||
<span className="text-gray-600 text-sm">UI DEVELOPER</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div className="p-12 md:w-1/2 flex flex-col items-start">
|
||||
<span className="inline-block py-1 px-3 rounded bg-gray-800 text-gray-500 text-sm font-medium tracking-widest">
|
||||
CATEGORY
|
||||
</span>
|
||||
<h2 className="sm:text-3xl text-2xl title-font font-medium text-white mt-4 mb-4">
|
||||
Pinterest DIY dreamcatcher gentrify single-origin coffee
|
||||
</h2>
|
||||
<p className="leading-relaxed mb-8">
|
||||
Live-edge letterpress cliche, salvia fanny pack humblebrag narwhal
|
||||
portland. VHS man braid palo santo hoodie brunch trust fund. Bitters
|
||||
hashtag waistcoat fashion axe chia unicorn. Plaid fixie chambray 90's,
|
||||
slow-carb etsy tumeric.
|
||||
</p>
|
||||
<div className="flex items-center flex-wrap pb-4 mb-4 border-b-2 border-gray-800 mt-auto w-full">
|
||||
<a href className={`text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M5 12h14" />
|
||||
<path d="M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
<span className="text-gray-600 mr-3 inline-flex items-center ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-800">
|
||||
<svg
|
||||
className="w-4 h-4 mr-1"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
|
||||
<circle cx={12} cy={12} r={3} />
|
||||
</svg>
|
||||
1.2K
|
||||
</span>
|
||||
<span className="text-gray-600 inline-flex items-center leading-none text-sm">
|
||||
<svg
|
||||
className="w-4 h-4 mr-1"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
|
||||
</svg>
|
||||
6
|
||||
</span>
|
||||
</div>
|
||||
<a href className="inline-flex items-center">
|
||||
<img
|
||||
alt="blog"
|
||||
src="https://dummyimage.com/103x103"
|
||||
className="w-12 h-12 rounded-full flex-shrink-0 object-cover object-center"
|
||||
/>
|
||||
<span className="flex-grow flex flex-col pl-4">
|
||||
<span className="title-font font-medium text-white">
|
||||
Alper Kamu
|
||||
</span>
|
||||
<span className="text-gray-600 text-sm">DESIGNER</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
DarkBlogC.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkBlogC.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkBlogC;
|
||||
125
src/blocks/blog/dark/d.js
Normal file
125
src/blocks/blog/dark/d.js
Normal file
@@ -0,0 +1,125 @@
|
||||
import React from 'react';
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkBlogD(props) {
|
||||
return (
|
||||
<section className="text-gray-500 bg-gray-900 body-font overflow-hidden">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="-my-8">
|
||||
<div className="py-8 flex flex-wrap md:flex-no-wrap">
|
||||
<div className="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
|
||||
<span className="tracking-widest font-medium title-font text-white">
|
||||
CATEGORY
|
||||
</span>
|
||||
<span className="mt-1 text-gray-600 text-sm">12 Jun 2019</span>
|
||||
</div>
|
||||
<div className="md:flex-grow">
|
||||
<h2 className="text-2xl font-medium text-white title-font mb-2">
|
||||
Bitters hashtag waistcoat fashion axe chia unicorn
|
||||
</h2>
|
||||
<p className="leading-relaxed">
|
||||
Glossier echo park pug, church-key sartorial biodiesel vexillologist
|
||||
pop-up snackwave ramps cornhole. Marfa 3 wolf moon party messenger
|
||||
bag selfies, poke vaporware kombucha lumbersexual pork belly
|
||||
polaroid hoodie portland craft beer.
|
||||
</p>
|
||||
<a href className={`text-${props.theme}-500 inline-flex items-center mt-4`}>
|
||||
Learn More
|
||||
<svg
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M5 12h14" />
|
||||
<path d="M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-no-wrap">
|
||||
<div className="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
|
||||
<span className="tracking-widest font-medium title-font text-white">
|
||||
CATEGORY
|
||||
</span>
|
||||
<span className="mt-1 text-gray-600 text-sm">12 Jun 2019</span>
|
||||
</div>
|
||||
<div className="md:flex-grow">
|
||||
<h2 className="text-2xl font-medium text-white title-font mb-2">
|
||||
Meditation bushwick direct trade taxidermy shaman
|
||||
</h2>
|
||||
<p className="leading-relaxed">
|
||||
Glossier echo park pug, church-key sartorial biodiesel vexillologist
|
||||
pop-up snackwave ramps cornhole. Marfa 3 wolf moon party messenger
|
||||
bag selfies, poke vaporware kombucha lumbersexual pork belly
|
||||
polaroid hoodie portland craft beer.
|
||||
</p>
|
||||
<a href className={`text-${props.theme}-500 inline-flex items-center mt-4`}>
|
||||
Learn More
|
||||
<svg
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M5 12h14" />
|
||||
<path d="M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-no-wrap">
|
||||
<div className="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
|
||||
<span className="tracking-widest font-medium title-font text-white">
|
||||
CATEGORY
|
||||
</span>
|
||||
<span className="mt-1 text-gray-600 text-sm">12 Jun 2019</span>
|
||||
</div>
|
||||
<div className="md:flex-grow">
|
||||
<h2 className="text-2xl font-medium text-white title-font mb-2">
|
||||
Woke master cleanse drinking vinegar salvia
|
||||
</h2>
|
||||
<p className="leading-relaxed">
|
||||
Glossier echo park pug, church-key sartorial biodiesel vexillologist
|
||||
pop-up snackwave ramps cornhole. Marfa 3 wolf moon party messenger
|
||||
bag selfies, poke vaporware kombucha lumbersexual pork belly
|
||||
polaroid hoodie portland craft beer.
|
||||
</p>
|
||||
<a href className={`text-${props.theme}-500 inline-flex items-center mt-4`}>
|
||||
Learn More
|
||||
<svg
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M5 12h14" />
|
||||
<path d="M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
DarkBlogD.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkBlogD.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkBlogD;
|
||||
131
src/blocks/blog/dark/e.js
Normal file
131
src/blocks/blog/dark/e.js
Normal file
@@ -0,0 +1,131 @@
|
||||
import React from 'react';
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkBlogE(props) {
|
||||
return (
|
||||
<section className="text-gray-500 bg-gray-900 body-font">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="flex flex-wrap -mx-4 -my-8">
|
||||
<div className="py-8 px-4 lg:w-1/3">
|
||||
<div className="h-full flex items-start">
|
||||
<div className="w-12 flex-shrink-0 flex flex-col text-center leading-none">
|
||||
<span className="text-gray-600 pb-2 mb-2 border-b-2 border-gray-800">
|
||||
Jul
|
||||
</span>
|
||||
<span className="font-medium text-xl text-gray-300 title-font">
|
||||
18
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex-grow pl-6">
|
||||
<h2 className={`tracking-widest text-xs title-font font-medium text-${props.theme}-500 mb-1`}>
|
||||
CATEGORY
|
||||
</h2>
|
||||
<h1 className="title-font text-xl font-medium text-white mb-3">
|
||||
The 400 Blows
|
||||
</h1>
|
||||
<p className="leading-relaxed mb-5">
|
||||
Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
|
||||
microdosing tousled waistcoat.
|
||||
</p>
|
||||
<a href className="inline-flex items-center">
|
||||
<img
|
||||
alt="blog"
|
||||
src="https://dummyimage.com/103x103"
|
||||
className="w-8 h-8 rounded-full flex-shrink-0 object-cover object-center"
|
||||
/>
|
||||
<span className="flex-grow flex flex-col pl-3">
|
||||
<span className="title-font font-medium text-white">
|
||||
Alper Kamu
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="py-8 px-4 lg:w-1/3">
|
||||
<div className="h-full flex items-start">
|
||||
<div className="w-12 flex-shrink-0 flex flex-col text-center leading-none">
|
||||
<span className="text-gray-600 pb-2 mb-2 border-b-2 border-gray-800">
|
||||
Jul
|
||||
</span>
|
||||
<span className="font-medium text-xl text-gray-300 title-font">
|
||||
18
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex-grow pl-6">
|
||||
<h2 className={`tracking-widest text-xs title-font font-medium text-${props.theme}-500 mb-1`}>
|
||||
CATEGORY
|
||||
</h2>
|
||||
<h1 className="title-font text-xl font-medium text-white mb-3">
|
||||
Shooting Stars
|
||||
</h1>
|
||||
<p className="leading-relaxed mb-5">
|
||||
Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
|
||||
microdosing tousled waistcoat.
|
||||
</p>
|
||||
<a href className="inline-flex items-center">
|
||||
<img
|
||||
alt="blog"
|
||||
src="https://dummyimage.com/102x102"
|
||||
className="w-8 h-8 rounded-full flex-shrink-0 object-cover object-center"
|
||||
/>
|
||||
<span className="flex-grow flex flex-col pl-3">
|
||||
<span className="title-font font-medium text-white">
|
||||
Holden Caulfield
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="py-8 px-4 lg:w-1/3">
|
||||
<div className="h-full flex items-start">
|
||||
<div className="w-12 flex-shrink-0 flex flex-col text-center leading-none">
|
||||
<span className="text-gray-600 pb-2 mb-2 border-b-2 border-gray-800">
|
||||
Jul
|
||||
</span>
|
||||
<span className="font-medium text-xl text-gray-300 title-font">
|
||||
18
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex-grow pl-6">
|
||||
<h2 className={`tracking-widest text-xs title-font font-medium text-${props.theme}-500 mb-1`}>
|
||||
CATEGORY
|
||||
</h2>
|
||||
<h1 className="title-font text-xl font-medium text-white mb-3">
|
||||
Neptune
|
||||
</h1>
|
||||
<p className="leading-relaxed mb-5">
|
||||
Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
|
||||
microdosing tousled waistcoat.
|
||||
</p>
|
||||
<a href className="inline-flex items-center">
|
||||
<img
|
||||
alt="blog"
|
||||
src="https://dummyimage.com/101x101"
|
||||
className="w-8 h-8 rounded-full flex-shrink-0 object-cover object-center"
|
||||
/>
|
||||
<span className="flex-grow flex flex-col pl-3">
|
||||
<span className="title-font font-medium text-white">
|
||||
Henry Letham
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
DarkBlogE.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkBlogE.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkBlogE;
|
||||
233
src/blocks/blog/light/a.js
Normal file
233
src/blocks/blog/light/a.js
Normal file
@@ -0,0 +1,233 @@
|
||||
import React from 'react';
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightBlogA(props) {
|
||||
return (
|
||||
<section className="text-gray-700 body-font">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="flex flex-wrap -m-4">
|
||||
<div className="p-4 md:w-1/3">
|
||||
<div className="h-full border-2 border-gray-200 rounded-lg overflow-hidden">
|
||||
<img
|
||||
className="lg:h-48 md:h-36 w-full object-cover object-center"
|
||||
src="https://dummyimage.com/720x400"
|
||||
alt="blog"
|
||||
/>
|
||||
<div className="p-6">
|
||||
<h2 className="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
|
||||
CATEGORY
|
||||
</h2>
|
||||
<h1 className="title-font text-lg font-medium text-gray-900 mb-3">
|
||||
The Catalyzer
|
||||
</h1>
|
||||
<p className="leading-relaxed mb-3">
|
||||
Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
|
||||
microdosing tousled waistcoat.
|
||||
</p>
|
||||
<div className="flex items-center flex-wrap ">
|
||||
<a
|
||||
href
|
||||
className={`text-${props.theme}-500 inline-flex items-center md:mb-2 lg:mb-0`}
|
||||
>
|
||||
Learn More
|
||||
<svg
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M5 12h14" />
|
||||
<path d="M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
<span className="text-gray-600 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
|
||||
<svg
|
||||
className="w-4 h-4 mr-1"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
|
||||
<circle cx={12} cy={12} r={3} />
|
||||
</svg>
|
||||
1.2K
|
||||
</span>
|
||||
<span className="text-gray-600 inline-flex items-center leading-none text-sm">
|
||||
<svg
|
||||
className="w-4 h-4 mr-1"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
|
||||
</svg>
|
||||
6
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 md:w-1/3">
|
||||
<div className="h-full border-2 border-gray-200 rounded-lg overflow-hidden">
|
||||
<img
|
||||
className="lg:h-48 md:h-36 w-full object-cover object-center"
|
||||
src="https://dummyimage.com/721x401"
|
||||
alt="blog"
|
||||
/>
|
||||
<div className="p-6">
|
||||
<h2 className="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
|
||||
CATEGORY
|
||||
</h2>
|
||||
<h1 className="title-font text-lg font-medium text-gray-900 mb-3">
|
||||
The 400 Blows
|
||||
</h1>
|
||||
<p className="leading-relaxed mb-3">
|
||||
Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
|
||||
microdosing tousled waistcoat.
|
||||
</p>
|
||||
<div className="flex items-center flex-wrap">
|
||||
<a
|
||||
href
|
||||
className={`text-${props.theme}-500 inline-flex items-center md:mb-2 lg:mb-0`}
|
||||
>
|
||||
Learn More
|
||||
<svg
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M5 12h14" />
|
||||
<path d="M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
<span className="text-gray-600 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
|
||||
<svg
|
||||
className="w-4 h-4 mr-1"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
|
||||
<circle cx={12} cy={12} r={3} />
|
||||
</svg>
|
||||
1.2K
|
||||
</span>
|
||||
<span className="text-gray-600 inline-flex items-center leading-none text-sm">
|
||||
<svg
|
||||
className="w-4 h-4 mr-1"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
|
||||
</svg>
|
||||
6
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 md:w-1/3">
|
||||
<div className="h-full border-2 border-gray-200 rounded-lg overflow-hidden">
|
||||
<img
|
||||
className="lg:h-48 md:h-36 w-full object-cover object-center"
|
||||
src="https://dummyimage.com/722x402"
|
||||
alt="blog"
|
||||
/>
|
||||
<div className="p-6">
|
||||
<h2 className="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
|
||||
CATEGORY
|
||||
</h2>
|
||||
<h1 className="title-font text-lg font-medium text-gray-900 mb-3">
|
||||
Shooting Stars
|
||||
</h1>
|
||||
<p className="leading-relaxed mb-3">
|
||||
Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
|
||||
microdosing tousled waistcoat.
|
||||
</p>
|
||||
<div className="flex items-center flex-wrap ">
|
||||
<a
|
||||
href
|
||||
className={`text-${props.theme}-500 inline-flex items-center md:mb-2 lg:mb-0`}
|
||||
>
|
||||
Learn More
|
||||
<svg
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M5 12h14" />
|
||||
<path d="M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
<span className="text-gray-600 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
|
||||
<svg
|
||||
className="w-4 h-4 mr-1"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
|
||||
<circle cx={12} cy={12} r={3} />
|
||||
</svg>
|
||||
1.2K
|
||||
</span>
|
||||
<span className="text-gray-600 inline-flex items-center leading-none text-sm">
|
||||
<svg
|
||||
className="w-4 h-4 mr-1"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
|
||||
</svg>
|
||||
6
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
LightBlogA.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightBlogA.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightBlogA;
|
||||
203
src/blocks/blog/light/b.js
Normal file
203
src/blocks/blog/light/b.js
Normal file
@@ -0,0 +1,203 @@
|
||||
import React from 'react';
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightBlogB(props) {
|
||||
return (
|
||||
<section className="text-gray-700 body-font">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="flex flex-wrap -m-4">
|
||||
<div className="p-4 lg:w-1/3">
|
||||
<div className="h-full bg-gray-200 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative">
|
||||
<h2 className="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
|
||||
CATEGORY
|
||||
</h2>
|
||||
<h1 className="title-font sm:text-2xl text-xl font-medium text-gray-900 mb-3">
|
||||
Raclette Blueberry Nextious Level
|
||||
</h1>
|
||||
<p className="leading-relaxed mb-3">
|
||||
Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
|
||||
microdosing tousled waistcoat.
|
||||
</p>
|
||||
<a href className={`text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M5 12h14" />
|
||||
<path d="M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
<div className="text-center mt-2 leading-none flex justify-center absolute bottom-0 left-0 w-full py-4">
|
||||
<span className="text-gray-600 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
|
||||
<svg
|
||||
className="w-4 h-4 mr-1"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
|
||||
<circle cx={12} cy={12} r={3} />
|
||||
</svg>
|
||||
1.2K
|
||||
</span>
|
||||
<span className="text-gray-600 inline-flex items-center leading-none text-sm">
|
||||
<svg
|
||||
className="w-4 h-4 mr-1"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
|
||||
</svg>
|
||||
6
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 lg:w-1/3">
|
||||
<div className="h-full bg-gray-200 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative">
|
||||
<h2 className="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
|
||||
CATEGORY
|
||||
</h2>
|
||||
<h1 className="title-font sm:text-2xl text-xl font-medium text-gray-900 mb-3">
|
||||
Ennui Snackwave Thundercats
|
||||
</h1>
|
||||
<p className="leading-relaxed mb-3">
|
||||
Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
|
||||
microdosing tousled waistcoat.
|
||||
</p>
|
||||
<a href className={`text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M5 12h14" />
|
||||
<path d="M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
<div className="text-center mt-2 leading-none flex justify-center absolute bottom-0 left-0 w-full py-4">
|
||||
<span className="text-gray-600 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
|
||||
<svg
|
||||
className="w-4 h-4 mr-1"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
|
||||
<circle cx={12} cy={12} r={3} />
|
||||
</svg>
|
||||
1.2K
|
||||
</span>
|
||||
<span className="text-gray-600 inline-flex items-center leading-none text-sm">
|
||||
<svg
|
||||
className="w-4 h-4 mr-1"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
|
||||
</svg>
|
||||
6
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 lg:w-1/3">
|
||||
<div className="h-full bg-gray-200 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative">
|
||||
<h2 className="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
|
||||
CATEGORY
|
||||
</h2>
|
||||
<h1 className="title-font sm:text-2xl text-xl font-medium text-gray-900 mb-3">
|
||||
Selvage Poke Waistcoat Godard
|
||||
</h1>
|
||||
<p className="leading-relaxed mb-3">
|
||||
Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
|
||||
microdosing tousled waistcoat.
|
||||
</p>
|
||||
<a href className={`text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M5 12h14" />
|
||||
<path d="M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
<div className="text-center mt-2 leading-none flex justify-center absolute bottom-0 left-0 w-full py-4">
|
||||
<span className="text-gray-600 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
|
||||
<svg
|
||||
className="w-4 h-4 mr-1"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
|
||||
<circle cx={12} cy={12} r={3} />
|
||||
</svg>
|
||||
1.2K
|
||||
</span>
|
||||
<span className="text-gray-600 inline-flex items-center leading-none text-sm">
|
||||
<svg
|
||||
className="w-4 h-4 mr-1"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
|
||||
</svg>
|
||||
6
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
LightBlogB.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightBlogB.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightBlogB;
|
||||
170
src/blocks/blog/light/c.js
Normal file
170
src/blocks/blog/light/c.js
Normal file
@@ -0,0 +1,170 @@
|
||||
import React from 'react';
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightBlogC(props) {
|
||||
return (
|
||||
<section className="text-gray-700 body-font overflow-hidden">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="flex flex-wrap -m-12">
|
||||
<div className="p-12 md:w-1/2 flex flex-col items-start">
|
||||
<span className={`inline-block py-1 px-3 rounded bg-${props.theme}-100 text-${props.theme}-500 text-sm font-medium tracking-widest`}>
|
||||
CATEGORY
|
||||
</span>
|
||||
<h2 className="sm:text-3xl text-2xl title-font font-medium text-gray-900 mt-4 mb-4">
|
||||
Roof party normcore before they sold out, cornhole vape
|
||||
</h2>
|
||||
<p className="leading-relaxed mb-8">
|
||||
Live-edge letterpress cliche, salvia fanny pack humblebrag narwhal
|
||||
portland. VHS man braid palo santo hoodie brunch trust fund. Bitters
|
||||
hashtag waistcoat fashion axe chia unicorn. Plaid fixie chambray 90's,
|
||||
slow-carb etsy tumeric. Cray pug you probably haven't heard of them
|
||||
hexagon kickstarter craft beer pork chic.
|
||||
</p>
|
||||
<div className="flex items-center flex-wrap pb-4 mb-4 border-b-2 border-gray-200 mt-auto w-full">
|
||||
<a href className={`text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M5 12h14" />
|
||||
<path d="M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
<span className="text-gray-600 mr-3 inline-flex items-center ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
|
||||
<svg
|
||||
className="w-4 h-4 mr-1"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
|
||||
<circle cx={12} cy={12} r={3} />
|
||||
</svg>
|
||||
1.2K
|
||||
</span>
|
||||
<span className="text-gray-600 inline-flex items-center leading-none text-sm">
|
||||
<svg
|
||||
className="w-4 h-4 mr-1"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
|
||||
</svg>
|
||||
6
|
||||
</span>
|
||||
</div>
|
||||
<a href className="inline-flex items-center">
|
||||
<img
|
||||
alt="blog"
|
||||
src="https://dummyimage.com/104x104"
|
||||
className="w-12 h-12 rounded-full flex-shrink-0 object-cover object-center"
|
||||
/>
|
||||
<span className="flex-grow flex flex-col pl-4">
|
||||
<span className="title-font font-medium text-gray-900">
|
||||
Holden Caulfield
|
||||
</span>
|
||||
<span className="text-gray-500 text-sm">UI DEVELOPER</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div className="p-12 md:w-1/2 flex flex-col items-start">
|
||||
<span className={`inline-block py-1 px-3 rounded bg-${props.theme}-100 text-${props.theme}-500 text-sm font-medium tracking-widest`}>
|
||||
CATEGORY
|
||||
</span>
|
||||
<h2 className="sm:text-3xl text-2xl title-font font-medium text-gray-900 mt-4 mb-4">
|
||||
Pinterest DIY dreamcatcher gentrify single-origin coffee
|
||||
</h2>
|
||||
<p className="leading-relaxed mb-8">
|
||||
Live-edge letterpress cliche, salvia fanny pack humblebrag narwhal
|
||||
portland. VHS man braid palo santo hoodie brunch trust fund. Bitters
|
||||
hashtag waistcoat fashion axe chia unicorn. Plaid fixie chambray 90's,
|
||||
slow-carb etsy tumeric.
|
||||
</p>
|
||||
<div className="flex items-center flex-wrap pb-4 mb-4 border-b-2 border-gray-200 mt-auto w-full">
|
||||
<a href className={`text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M5 12h14" />
|
||||
<path d="M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
<span className="text-gray-600 mr-3 inline-flex items-center ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
|
||||
<svg
|
||||
className="w-4 h-4 mr-1"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
|
||||
<circle cx={12} cy={12} r={3} />
|
||||
</svg>
|
||||
1.2K
|
||||
</span>
|
||||
<span className="text-gray-600 inline-flex items-center leading-none text-sm">
|
||||
<svg
|
||||
className="w-4 h-4 mr-1"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
|
||||
</svg>
|
||||
6
|
||||
</span>
|
||||
</div>
|
||||
<a href className="inline-flex items-center">
|
||||
<img
|
||||
alt="blog"
|
||||
src="https://dummyimage.com/103x103"
|
||||
className="w-12 h-12 rounded-full flex-shrink-0 object-cover object-center"
|
||||
/>
|
||||
<span className="flex-grow flex flex-col pl-4">
|
||||
<span className="title-font font-medium text-gray-900">
|
||||
Alper Kamu
|
||||
</span>
|
||||
<span className="text-gray-500 text-sm">DESIGNER</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
LightBlogC.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightBlogC.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightBlogC;
|
||||
125
src/blocks/blog/light/d.js
Normal file
125
src/blocks/blog/light/d.js
Normal file
@@ -0,0 +1,125 @@
|
||||
import React from 'react';
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightBlogD(props) {
|
||||
return (
|
||||
<section className="text-gray-700 body-font overflow-hidden">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="-my-8">
|
||||
<div className="py-8 flex flex-wrap md:flex-no-wrap">
|
||||
<div className="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
|
||||
<span className="tracking-widest font-medium title-font text-gray-900">
|
||||
CATEGORY
|
||||
</span>
|
||||
<span className="mt-1 text-gray-500 text-sm">12 Jun 2019</span>
|
||||
</div>
|
||||
<div className="md:flex-grow">
|
||||
<h2 className="text-2xl font-medium text-gray-900 title-font mb-2">
|
||||
Bitters hashtag waistcoat fashion axe chia unicorn
|
||||
</h2>
|
||||
<p className="leading-relaxed">
|
||||
Glossier echo park pug, church-key sartorial biodiesel vexillologist
|
||||
pop-up snackwave ramps cornhole. Marfa 3 wolf moon party messenger
|
||||
bag selfies, poke vaporware kombucha lumbersexual pork belly
|
||||
polaroid hoodie portland craft beer.
|
||||
</p>
|
||||
<a href className={`text-${props.theme}-500 inline-flex items-center mt-4`}>
|
||||
Learn More
|
||||
<svg
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M5 12h14" />
|
||||
<path d="M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="py-8 flex border-t-2 border-gray-200 flex-wrap md:flex-no-wrap">
|
||||
<div className="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
|
||||
<span className="tracking-widest font-medium title-font text-gray-900">
|
||||
CATEGORY
|
||||
</span>
|
||||
<span className="mt-1 text-gray-500 text-sm">12 Jun 2019</span>
|
||||
</div>
|
||||
<div className="md:flex-grow">
|
||||
<h2 className="text-2xl font-medium text-gray-900 title-font mb-2">
|
||||
Meditation bushwick direct trade taxidermy shaman
|
||||
</h2>
|
||||
<p className="leading-relaxed">
|
||||
Glossier echo park pug, church-key sartorial biodiesel vexillologist
|
||||
pop-up snackwave ramps cornhole. Marfa 3 wolf moon party messenger
|
||||
bag selfies, poke vaporware kombucha lumbersexual pork belly
|
||||
polaroid hoodie portland craft beer.
|
||||
</p>
|
||||
<a href className={`text-${props.theme}-500 inline-flex items-center mt-4`}>
|
||||
Learn More
|
||||
<svg
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M5 12h14" />
|
||||
<path d="M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="py-8 flex border-t-2 border-gray-200 flex-wrap md:flex-no-wrap">
|
||||
<div className="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
|
||||
<span className="tracking-widest font-medium title-font text-gray-900">
|
||||
CATEGORY
|
||||
</span>
|
||||
<span className="mt-1 text-gray-500 text-sm">12 Jun 2019</span>
|
||||
</div>
|
||||
<div className="md:flex-grow">
|
||||
<h2 className="text-2xl font-medium text-gray-900 title-font mb-2">
|
||||
Woke master cleanse drinking vinegar salvia
|
||||
</h2>
|
||||
<p className="leading-relaxed">
|
||||
Glossier echo park pug, church-key sartorial biodiesel vexillologist
|
||||
pop-up snackwave ramps cornhole. Marfa 3 wolf moon party messenger
|
||||
bag selfies, poke vaporware kombucha lumbersexual pork belly
|
||||
polaroid hoodie portland craft beer.
|
||||
</p>
|
||||
<a href className={`text-${props.theme}-500 inline-flex items-center mt-4`}>
|
||||
Learn More
|
||||
<svg
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M5 12h14" />
|
||||
<path d="M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
LightBlogD.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightBlogD.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightBlogD;
|
||||
131
src/blocks/blog/light/e.js
Normal file
131
src/blocks/blog/light/e.js
Normal file
@@ -0,0 +1,131 @@
|
||||
import React from 'react';
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightBlogE(props) {
|
||||
return (
|
||||
<section className="text-gray-700 body-font">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="flex flex-wrap -mx-4 -my-8">
|
||||
<div className="py-8 px-4 lg:w-1/3">
|
||||
<div className="h-full flex items-start">
|
||||
<div className="w-12 flex-shrink-0 flex flex-col text-center leading-none">
|
||||
<span className="text-gray-500 pb-2 mb-2 border-b-2 border-gray-300">
|
||||
Jul
|
||||
</span>
|
||||
<span className="font-medium text-xl text-gray-800 title-font">
|
||||
18
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex-grow pl-6">
|
||||
<h2 className={`tracking-widest text-xs title-font font-medium text-${props.theme}-500 mb-1`}>
|
||||
CATEGORY
|
||||
</h2>
|
||||
<h1 className="title-font text-xl font-medium text-gray-900 mb-3">
|
||||
The 400 Blows
|
||||
</h1>
|
||||
<p className="leading-relaxed mb-5">
|
||||
Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
|
||||
microdosing tousled waistcoat.
|
||||
</p>
|
||||
<a href className="inline-flex items-center">
|
||||
<img
|
||||
alt="blog"
|
||||
src="https://dummyimage.com/103x103"
|
||||
className="w-8 h-8 rounded-full flex-shrink-0 object-cover object-center"
|
||||
/>
|
||||
<span className="flex-grow flex flex-col pl-3">
|
||||
<span className="title-font font-medium text-gray-900">
|
||||
Alper Kamu
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="py-8 px-4 lg:w-1/3">
|
||||
<div className="h-full flex items-start">
|
||||
<div className="w-12 flex-shrink-0 flex flex-col text-center leading-none">
|
||||
<span className="text-gray-500 pb-2 mb-2 border-b-2 border-gray-300">
|
||||
Jul
|
||||
</span>
|
||||
<span className="font-medium text-xl text-gray-800 title-font">
|
||||
18
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex-grow pl-6">
|
||||
<h2 className={`tracking-widest text-xs title-font font-medium text-${props.theme}-500 mb-1`}>
|
||||
CATEGORY
|
||||
</h2>
|
||||
<h1 className="title-font text-xl font-medium text-gray-900 mb-3">
|
||||
Shooting Stars
|
||||
</h1>
|
||||
<p className="leading-relaxed mb-5">
|
||||
Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
|
||||
microdosing tousled waistcoat.
|
||||
</p>
|
||||
<a href className="inline-flex items-center">
|
||||
<img
|
||||
alt="blog"
|
||||
src="https://dummyimage.com/102x102"
|
||||
className="w-8 h-8 rounded-full flex-shrink-0 object-cover object-center"
|
||||
/>
|
||||
<span className="flex-grow flex flex-col pl-3">
|
||||
<span className="title-font font-medium text-gray-900">
|
||||
Holden Caulfield
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="py-8 px-4 lg:w-1/3">
|
||||
<div className="h-full flex items-start">
|
||||
<div className="w-12 flex-shrink-0 flex flex-col text-center leading-none">
|
||||
<span className="text-gray-500 pb-2 mb-2 border-b-2 border-gray-300">
|
||||
Jul
|
||||
</span>
|
||||
<span className="font-medium text-xl text-gray-800 title-font">
|
||||
18
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex-grow pl-6">
|
||||
<h2 className={`tracking-widest text-xs title-font font-medium text-${props.theme}-500 mb-1`}>
|
||||
CATEGORY
|
||||
</h2>
|
||||
<h1 className="title-font text-xl font-medium text-gray-900 mb-3">
|
||||
Neptune
|
||||
</h1>
|
||||
<p className="leading-relaxed mb-5">
|
||||
Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
|
||||
microdosing tousled waistcoat.
|
||||
</p>
|
||||
<a href className="inline-flex items-center">
|
||||
<img
|
||||
alt="blog"
|
||||
src="https://dummyimage.com/101x101"
|
||||
className="w-8 h-8 rounded-full flex-shrink-0 object-cover object-center"
|
||||
/>
|
||||
<span className="flex-grow flex flex-col pl-3">
|
||||
<span className="title-font font-medium text-gray-900">
|
||||
Henry Letham
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
LightBlogE.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightBlogE.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightBlogE;
|
||||
58
src/blocks/contact/dark/a.js
Normal file
58
src/blocks/contact/dark/a.js
Normal file
@@ -0,0 +1,58 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkContactA(props) {
|
||||
return (
|
||||
<section className="text-gray-500 bg-gray-900 body-font relative">
|
||||
<div className="absolute inset-0 bg-gray-900">
|
||||
<iframe
|
||||
title="map"
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ filter: "grayscale(1) contrast(1.2) opacity(.16)" }}
|
||||
frameBorder="0"
|
||||
marginHeight="0"
|
||||
marginWidth="0"
|
||||
scrolling="no"
|
||||
src="https://maps.google.com/maps?width=100%&height=600&hl=en&q=%C4%B0zmir+(My%20Business%20Name)&ie=UTF8&t=&z=14&iwloc=B&output=embed"
|
||||
/>
|
||||
</div>
|
||||
<div className="container px-5 py-24 mx-auto flex">
|
||||
<div className="lg:w-1/3 md:w-1/2 bg-gray-900 rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0 relative z-10">
|
||||
<h2 className="text-white text-lg mb-1 font-medium title-font">
|
||||
Feedback
|
||||
</h2>
|
||||
<p className="leading-relaxed mb-5 text-gray-500">
|
||||
Post-ironic portland shabby chic echo park, banjo fashion axe
|
||||
</p>
|
||||
<input
|
||||
className={`bg-gray-800 text-white rounded border border-gray-700 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mb-4`}
|
||||
placeholder="Email"
|
||||
type="email"
|
||||
></input>
|
||||
<textarea
|
||||
className={`bg-gray-800 text-white rounded border border-gray-700 focus:outline-none h-32 focus:border-${props.theme}-500 text-base px-4 py-2 mb-4 resize-none`}
|
||||
placeholder="Message"
|
||||
></textarea>
|
||||
<button className={`text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
|
||||
Button
|
||||
</button>
|
||||
<p className="text-xs text-gray-600 mt-3">
|
||||
Chicharrones blog helvetica normcore iceland tousled brook viral
|
||||
artisan.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
DarkContactA.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkContactA.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkContactA;
|
||||
87
src/blocks/contact/dark/b.js
Normal file
87
src/blocks/contact/dark/b.js
Normal file
@@ -0,0 +1,87 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkContactB(props) {
|
||||
return (
|
||||
<section className="text-gray-500 bg-gray-900 body-font relative">
|
||||
<div className="container px-5 py-24 mx-auto flex sm:flex-no-wrap flex-wrap">
|
||||
<div className="lg:w-2/3 md:w-1/2 bg-gray-900 rounded-lg overflow-hidden sm:mr-10 p-10 flex items-end justify-start relative">
|
||||
<iframe
|
||||
width="100%"
|
||||
height="100%"
|
||||
title="map"
|
||||
className="absolute inset-0"
|
||||
style={{ filter: "grayscale(1) contrast(1.2) opacity(.16)" }}
|
||||
frameBorder="0"
|
||||
marginHeight="0"
|
||||
marginWidth="0"
|
||||
scrolling="no"
|
||||
src="https://maps.google.com/maps?width=100%&height=600&hl=en&q=%C4%B0zmir+(My%20Business%20Name)&ie=UTF8&t=&z=14&iwloc=B&output=embed"
|
||||
/>
|
||||
<div className="bg-gray-900 relative flex flex-wrap py-6">
|
||||
<div className="lg:w-1/2 px-6">
|
||||
<h2 className="title-font font-medium text-white tracking-widest text-sm">
|
||||
ADDRESS
|
||||
</h2>
|
||||
<p className="leading-relaxed">
|
||||
Photo booth tattooed prism, portland taiyaki hoodie neutra
|
||||
typewriter
|
||||
</p>
|
||||
</div>
|
||||
<div className="lg:w-1/2 px-6 mt-4 lg:mt-0">
|
||||
<h2 className="title-font font-medium text-white tracking-widest text-sm">
|
||||
EMAIL
|
||||
</h2>
|
||||
<a href className={`text-${props.theme}-500 leading-relaxed`}>
|
||||
example@email.com
|
||||
</a>
|
||||
<h2 className="title-font font-medium text-white tracking-widest text-sm mt-4">
|
||||
PHONE
|
||||
</h2>
|
||||
<p className="leading-relaxed">123-456-7890</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:w-1/3 md:w-1/2 flex flex-col md:ml-auto w-full md:py-8 mt-8 md:mt-0">
|
||||
<h2 className="text-white text-lg mb-1 font-medium title-font">
|
||||
Feedback
|
||||
</h2>
|
||||
<p className="leading-relaxed mb-5 text-gray-600">
|
||||
Post-ironic portland shabby chic echo park, banjo fashion axe
|
||||
</p>
|
||||
<input
|
||||
className={`bg-gray-800 rounded border border-gray-700 focus:outline-none focus:border-${props.theme}-500 text-base text-white px-4 py-2 mb-4`}
|
||||
placeholder="Name"
|
||||
type="text"
|
||||
></input>
|
||||
<input
|
||||
className={`bg-gray-800 rounded border border-gray-700 focus:outline-none focus:border-${props.theme}-500 text-base text-white px-4 py-2 mb-4`}
|
||||
placeholder="Email"
|
||||
type="email"
|
||||
></input>
|
||||
<textarea
|
||||
className={`bg-gray-800 rounded border border-gray-700 focus:outline-none h-32 focus:border-${props.theme}-500 text-base text-white px-4 py-2 mb-4 resize-none`}
|
||||
placeholder="Message"
|
||||
></textarea>
|
||||
<button className={`text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
|
||||
Button
|
||||
</button>
|
||||
<p className="text-xs text-gray-500 mt-3">
|
||||
Chicharrones blog helvetica normcore iceland tousled brook viral
|
||||
artisan.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
DarkContactB.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkContactB.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkContactB;
|
||||
124
src/blocks/contact/dark/c.js
Normal file
124
src/blocks/contact/dark/c.js
Normal file
@@ -0,0 +1,124 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkContactC(props) {
|
||||
return (
|
||||
<section className="text-gray-500 bg-gray-900 body-font relative">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="flex flex-col text-center w-full mb-12">
|
||||
<h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">
|
||||
Contact Us
|
||||
</h1>
|
||||
<p className="lg:w-2/3 mx-auto leading-relaxed text-base">
|
||||
Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical
|
||||
gentrify.
|
||||
</p>
|
||||
</div>
|
||||
<div className="lg:w-1/2 md:w-2/3 mx-auto">
|
||||
<div className="flex flex-wrap -m-2">
|
||||
<div className="p-2 w-1/2">
|
||||
<input
|
||||
className={`w-full bg-gray-800 rounded border border-gray-700 text-white focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2`}
|
||||
placeholder="Name"
|
||||
type="text"
|
||||
></input>
|
||||
</div>
|
||||
<div className="p-2 w-1/2">
|
||||
<input
|
||||
className={`w-full bg-gray-800 rounded border border-gray-700 text-white focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2`}
|
||||
placeholder="Email"
|
||||
type="email"
|
||||
></input>
|
||||
</div>
|
||||
<div className="p-2 w-full">
|
||||
<textarea
|
||||
className={`w-full bg-gray-800 rounded border border-gray-700 text-white focus:outline-none h-48 focus:border-${props.theme}-500 text-base px-4 py-2 resize-none block`}
|
||||
placeholder="Message"
|
||||
></textarea>
|
||||
</div>
|
||||
<div className="p-2 w-full">
|
||||
<button className={`flex mx-auto text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-2 w-full pt-8 mt-8 border-t border-gray-800 text-center">
|
||||
<a href className={`text-${props.theme}-500`}>example@email.com</a>
|
||||
<p className="leading-normal my-5">
|
||||
49 Smith St.<br />Saint Cloud, MN 56301
|
||||
</p>
|
||||
<span className="inline-flex">
|
||||
<a href className="text-gray-500">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-4 text-gray-500">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-4 text-gray-500">
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect
|
||||
width="20"
|
||||
height="20"
|
||||
x="2"
|
||||
y="2"
|
||||
rx="5"
|
||||
ry="5"
|
||||
/>
|
||||
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-4 text-gray-500">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
DarkContactC.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkContactC.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkContactC;
|
||||
58
src/blocks/contact/light/a.js
Normal file
58
src/blocks/contact/light/a.js
Normal file
@@ -0,0 +1,58 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightContactA(props) {
|
||||
return (
|
||||
<section className="text-gray-700 body-font relative">
|
||||
<div className="absolute inset-0 bg-gray-300">
|
||||
<iframe
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ filter: "grayscale(1) contrast(1.2) opacity(.4)" }}
|
||||
frameBorder="0"
|
||||
marginHeight="0"
|
||||
marginWidth="0"
|
||||
title="map"
|
||||
scrolling="no"
|
||||
src="https://maps.google.com/maps?width=100%&height=600&hl=en&q=%C4%B0zmir+(My%20Business%20Name)&ie=UTF8&t=&z=14&iwloc=B&output=embed"
|
||||
/>
|
||||
</div>
|
||||
<div className="container px-5 py-24 mx-auto flex">
|
||||
<div className="lg:w-1/3 md:w-1/2 bg-white rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0 relative z-10">
|
||||
<h2 className="text-gray-900 text-lg mb-1 font-medium title-font">
|
||||
Feedback
|
||||
</h2>
|
||||
<p className="leading-relaxed mb-5 text-gray-600">
|
||||
Post-ironic portland shabby chic echo park, banjo fashion axe
|
||||
</p>
|
||||
<input
|
||||
className={`bg-white rounded border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mb-4`}
|
||||
placeholder="Email"
|
||||
type="email"
|
||||
></input>
|
||||
<textarea
|
||||
className={`bg-white rounded border border-gray-400 focus:outline-none h-32 focus:border-${props.theme}-500 text-base px-4 py-2 mb-4 resize-none`}
|
||||
placeholder="Message"
|
||||
></textarea>
|
||||
<button className={`text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
|
||||
Button
|
||||
</button>
|
||||
<p className="text-xs text-gray-500 mt-3">
|
||||
Chicharrones blog helvetica normcore iceland tousled brook viral
|
||||
artisan.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
LightContactA.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightContactA.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightContactA;
|
||||
87
src/blocks/contact/light/b.js
Normal file
87
src/blocks/contact/light/b.js
Normal file
@@ -0,0 +1,87 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightContactB(props) {
|
||||
return (
|
||||
<section className="text-gray-700 body-font relative">
|
||||
<div className="container px-5 py-24 mx-auto flex sm:flex-no-wrap flex-wrap">
|
||||
<div className="lg:w-2/3 md:w-1/2 bg-gray-300 rounded-lg overflow-hidden sm:mr-10 p-10 flex items-end justify-start relative">
|
||||
<iframe
|
||||
width="100%"
|
||||
height="100%"
|
||||
className="absolute inset-0"
|
||||
style={{ filter: "grayscale(1) contrast(1.2) opacity(.4)" }}
|
||||
frameBorder="0"
|
||||
title="map"
|
||||
marginHeight="0"
|
||||
marginWidth="0"
|
||||
scrolling="no"
|
||||
src="https://maps.google.com/maps?width=100%&height=600&hl=en&q=%C4%B0zmir+(My%20Business%20Name)&ie=UTF8&t=&z=14&iwloc=B&output=embed"
|
||||
/>
|
||||
<div className="bg-white relative flex flex-wrap py-6">
|
||||
<div className="lg:w-1/2 px-6">
|
||||
<h2 className="title-font font-medium text-gray-900 tracking-widest text-sm">
|
||||
ADDRESS
|
||||
</h2>
|
||||
<p className="leading-relaxed">
|
||||
Photo booth tattooed prism, portland taiyaki hoodie neutra
|
||||
typewriter
|
||||
</p>
|
||||
</div>
|
||||
<div className="lg:w-1/2 px-6 mt-4 lg:mt-0">
|
||||
<h2 className="title-font font-medium text-gray-900 tracking-widest text-sm">
|
||||
EMAIL
|
||||
</h2>
|
||||
<a href className={`text-${props.theme}-500 leading-relaxed`}>
|
||||
example@email.com
|
||||
</a>
|
||||
<h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mt-4">
|
||||
PHONE
|
||||
</h2>
|
||||
<p className="leading-relaxed">123-456-7890</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:w-1/3 md:w-1/2 bg-white flex flex-col md:ml-auto w-full md:py-8 mt-8 md:mt-0">
|
||||
<h2 className="text-gray-900 text-lg mb-1 font-medium title-font">
|
||||
Feedback
|
||||
</h2>
|
||||
<p className="leading-relaxed mb-5 text-gray-600">
|
||||
Post-ironic portland shabby chic echo park, banjo fashion axe
|
||||
</p>
|
||||
<input
|
||||
className={`bg-white rounded border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mb-4`}
|
||||
placeholder="Name"
|
||||
type="text"
|
||||
></input>
|
||||
<input
|
||||
className={`bg-white rounded border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mb-4`}
|
||||
placeholder="Email"
|
||||
type="email"
|
||||
></input>
|
||||
<textarea
|
||||
className={`bg-white rounded border border-gray-400 focus:outline-none h-32 focus:border-${props.theme}-500 text-base px-4 py-2 mb-4 resize-none`}
|
||||
placeholder="Message"
|
||||
></textarea>
|
||||
<button className={`text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
|
||||
Button
|
||||
</button>
|
||||
<p className="text-xs text-gray-500 mt-3">
|
||||
Chicharrones blog helvetica normcore iceland tousled brook viral
|
||||
artisan.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
LightContactB.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightContactB.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightContactB;
|
||||
124
src/blocks/contact/light/c.js
Normal file
124
src/blocks/contact/light/c.js
Normal file
@@ -0,0 +1,124 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightContactC(props) {
|
||||
return (
|
||||
<section className="text-gray-700 body-font relative">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="flex flex-col text-center w-full mb-12">
|
||||
<h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">
|
||||
Contact Us
|
||||
</h1>
|
||||
<p className="lg:w-2/3 mx-auto leading-relaxed text-base">
|
||||
Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical
|
||||
gentrify.
|
||||
</p>
|
||||
</div>
|
||||
<div className="lg:w-1/2 md:w-2/3 mx-auto">
|
||||
<div className="flex flex-wrap -m-2">
|
||||
<div className="p-2 w-1/2">
|
||||
<input
|
||||
className={`w-full bg-gray-100 rounded border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2`}
|
||||
placeholder="Name"
|
||||
type="text"
|
||||
></input>
|
||||
</div>
|
||||
<div className="p-2 w-1/2">
|
||||
<input
|
||||
className={`w-full bg-gray-100 rounded border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2`}
|
||||
placeholder="Email"
|
||||
type="email"
|
||||
></input>
|
||||
</div>
|
||||
<div className="p-2 w-full">
|
||||
<textarea
|
||||
className={`w-full bg-gray-100 rounded border border-gray-400 focus:outline-none h-48 focus:border-${props.theme}-500 text-base px-4 py-2 resize-none block`}
|
||||
placeholder="Message"
|
||||
></textarea>
|
||||
</div>
|
||||
<div className="p-2 w-full">
|
||||
<button className={`flex mx-auto text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-2 w-full pt-8 mt-8 border-t border-gray-200 text-center">
|
||||
<a href className={`text-${props.theme}-500`}>example@email.com</a>
|
||||
<p className="leading-normal my-5">
|
||||
49 Smith St.<br />Saint Cloud, MN 56301
|
||||
</p>
|
||||
<span className="inline-flex">
|
||||
<a href className="text-gray-500">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-4 text-gray-500">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-4 text-gray-500">
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect
|
||||
width="20"
|
||||
height="20"
|
||||
x="2"
|
||||
y="2"
|
||||
rx="5"
|
||||
ry="5"
|
||||
/>
|
||||
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-4 text-gray-500">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
LightContactC.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightContactC.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightContactC;
|
||||
132
src/blocks/content/dark/a.js
Normal file
132
src/blocks/content/dark/a.js
Normal file
@@ -0,0 +1,132 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkContentA(props) {
|
||||
return (
|
||||
<section className="text-gray-500 body-font bg-gray-900">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="flex flex-col text-center w-full mb-20">
|
||||
<h2 className={`text-xs text-${props.theme}-500 tracking-widest font-medium title-font mb-1`}>
|
||||
ROOF PARTY POLAROID
|
||||
</h2>
|
||||
<h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">
|
||||
Master Cleanse Reliac Heirloom
|
||||
</h1>
|
||||
<p className="lg:w-2/3 mx-auto leading-relaxed text-base">
|
||||
Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical
|
||||
gentrify, subway tile poke farm-to-table. Franzen you probably
|
||||
haven't heard of them man bun deep jianbing selfies heirloom
|
||||
prism food truck ugh squid celiac humblebrag.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap">
|
||||
<div className="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-800">
|
||||
<h2 className="text-lg sm:text-xl text-white font-medium title-font mb-2">
|
||||
Shooting Stars
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base mb-4">
|
||||
Fingerstache flexitarian street art 8-bit waistcoat. Distillery
|
||||
hexagon disrupt edison bulbche.
|
||||
</p>
|
||||
<a href className={`text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div className="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-800">
|
||||
<h2 className="text-lg sm:text-xl text-white font-medium title-font mb-2">
|
||||
The Catalyzer
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base mb-4">
|
||||
Fingerstache flexitarian street art 8-bit waistcoat. Distillery
|
||||
hexagon disrupt edison bulbche.
|
||||
</p>
|
||||
<a href className={`text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div className="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-800">
|
||||
<h2 className="text-lg sm:text-xl text-white font-medium title-font mb-2">
|
||||
Neptune
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base mb-4">
|
||||
Fingerstache flexitarian street art 8-bit waistcoat. Distillery
|
||||
hexagon disrupt edison bulbche.
|
||||
</p>
|
||||
<a href className={`text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div className="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-800">
|
||||
<h2 className="text-lg sm:text-xl text-white font-medium title-font mb-2">
|
||||
Melanchole
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base mb-4">
|
||||
Fingerstache flexitarian street art 8-bit waistcoat. Distillery
|
||||
hexagon disrupt edison bulbche.
|
||||
</p>
|
||||
<a href className={`text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<button className={`flex mx-auto mt-16 text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
DarkContentA.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkContentA.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkContentA;
|
||||
113
src/blocks/content/dark/b.js
Normal file
113
src/blocks/content/dark/b.js
Normal file
@@ -0,0 +1,113 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkContentB(props) {
|
||||
return (
|
||||
<section className="text-gray-500 body-font bg-gray-900">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="flex flex-wrap w-full mb-20">
|
||||
<div className="lg:w-1/2 w-full mb-6 lg:mb-0">
|
||||
<h1 className="sm:text-3xl text-2xl font-medium title-font mb-2 text-white">
|
||||
Pitchfork Kickstarter Taxidermy
|
||||
</h1>
|
||||
<div className={`h-1 w-20 bg-${props.theme}-500 rounded`} />
|
||||
</div>
|
||||
<p className="lg:w-1/2 w-full leading-relaxed text-base">
|
||||
Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical
|
||||
gentrify, subway tile poke farm-to-table. Franzen you probably
|
||||
haven't heard of them man bun deep jianbing selfies heirloom
|
||||
prism food truck ugh squid celiac humblebrag.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap -m-4">
|
||||
<div className="xl:w-1/4 md:w-1/2 p-4">
|
||||
<div className="bg-gray-800 p-6 rounded-lg">
|
||||
<img
|
||||
className="h-40 rounded w-full object-cover object-center mb-6"
|
||||
src="https://dummyimage.com/720x400"
|
||||
alt="content"
|
||||
/>
|
||||
<h3 className={`tracking-widest text-${props.theme}-500 text-xs font-medium title-font`}>
|
||||
SUBTITLE
|
||||
</h3>
|
||||
<h2 className="text-lg text-white font-medium title-font mb-4">
|
||||
Chichen Itza
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Fingerstache flexitarian street art 8-bit waistcoat. Distillery
|
||||
hexagon disrupt edison bulbche.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="xl:w-1/4 md:w-1/2 p-4">
|
||||
<div className="bg-gray-800 p-6 rounded-lg">
|
||||
<img
|
||||
className="h-40 rounded w-full object-cover object-center mb-6"
|
||||
src="https://dummyimage.com/721x401"
|
||||
alt="content"
|
||||
/>
|
||||
<h3 className={`tracking-widest text-${props.theme}-500 text-xs font-medium title-font`}>
|
||||
SUBTITLE
|
||||
</h3>
|
||||
<h2 className="text-lg text-white font-medium title-font mb-4">
|
||||
Colosseum Roma
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Fingerstache flexitarian street art 8-bit waistcoat. Distillery
|
||||
hexagon disrupt edison bulbche.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="xl:w-1/4 md:w-1/2 p-4">
|
||||
<div className="bg-gray-800 p-6 rounded-lg">
|
||||
<img
|
||||
className="h-40 rounded w-full object-cover object-center mb-6"
|
||||
src="https://dummyimage.com/722x402"
|
||||
alt="content"
|
||||
/>
|
||||
<h3 className={`tracking-widest text-${props.theme}-500 text-xs font-medium title-font`}>
|
||||
SUBTITLE
|
||||
</h3>
|
||||
<h2 className="text-lg text-white font-medium title-font mb-4">
|
||||
Great Pyramid of Giza
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Fingerstache flexitarian street art 8-bit waistcoat. Distillery
|
||||
hexagon disrupt edison bulbche.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="xl:w-1/4 md:w-1/2 p-4">
|
||||
<div className="bg-gray-800 p-6 rounded-lg">
|
||||
<img
|
||||
className="h-40 rounded w-full object-cover object-center mb-6"
|
||||
src="https://dummyimage.com/723x403"
|
||||
alt="content"
|
||||
/>
|
||||
<h3 className={`tracking-widest text-${props.theme}-500 text-xs font-medium title-font`}>
|
||||
SUBTITLE
|
||||
</h3>
|
||||
<h2 className="text-lg text-white font-medium title-font mb-4">
|
||||
San Francisco
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Fingerstache flexitarian street art 8-bit waistcoat. Distillery
|
||||
hexagon disrupt edison bulbche.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
DarkContentB.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkContentB.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkContentB;
|
||||
182
src/blocks/content/dark/c.js
Normal file
182
src/blocks/content/dark/c.js
Normal file
@@ -0,0 +1,182 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkContentC(props) {
|
||||
return (
|
||||
<section className="text-gray-500 body-font bg-gray-900">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="flex flex-wrap w-full mb-20 flex-col items-center text-center">
|
||||
<h1 className="sm:text-3xl text-2xl font-medium title-font mb-2 text-white">
|
||||
Pitchfork Kickstarter Taxidermy
|
||||
</h1>
|
||||
<p className="lg:w-1/2 w-full leading-relaxed text-base">
|
||||
Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical
|
||||
gentrify, subway tile poke farm-to-table.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap -m-4">
|
||||
<div className="xl:w-1/3 md:w-1/2 p-4">
|
||||
<div className="border border-gray-800 p-6 rounded-lg">
|
||||
<div className={`w-10 h-10 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-4`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M22 12h-4l-3 9L9 3l-3 9H2" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className="text-lg text-white font-medium title-font mb-2">
|
||||
Shooting Stars
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Fingerstache flexitarian street art 8-bit waist co, subway tile
|
||||
poke farm.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="xl:w-1/3 md:w-1/2 p-4">
|
||||
<div className="border border-gray-800 p-6 rounded-lg">
|
||||
<div className={`w-10 h-10 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-4`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle cx="6" cy="6" r="3" />
|
||||
<circle cx="6" cy="18" r="3" />
|
||||
<path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className="text-lg text-white font-medium title-font mb-2">
|
||||
The Catalyzer
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Fingerstache flexitarian street art 8-bit waist co, subway tile
|
||||
poke farm.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="xl:w-1/3 md:w-1/2 p-4">
|
||||
<div className="border border-gray-800 p-6 rounded-lg">
|
||||
<div className={`w-10 h-10 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-4`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
|
||||
<circle cx="12" cy="7" r="4" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className="text-lg text-white font-medium title-font mb-2">
|
||||
Neptune
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Fingerstache flexitarian street art 8-bit waist co, subway tile
|
||||
poke farm.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="xl:w-1/3 md:w-1/2 p-4">
|
||||
<div className="border border-gray-800 p-6 rounded-lg">
|
||||
<div className={`w-10 h-10 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-4`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1zM4 22v-7" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className="text-lg text-white font-medium title-font mb-2">
|
||||
Melanchole
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Fingerstache flexitarian street art 8-bit waist co, subway tile
|
||||
poke farm.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="xl:w-1/3 md:w-1/2 p-4">
|
||||
<div className="border border-gray-800 p-6 rounded-lg">
|
||||
<div className={`w-10 h-10 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-4`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className="text-lg text-white font-medium title-font mb-2">
|
||||
Bunker
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Fingerstache flexitarian street art 8-bit waist co, subway tile
|
||||
poke farm.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="xl:w-1/3 md:w-1/2 p-4">
|
||||
<div className="border border-gray-800 p-6 rounded-lg">
|
||||
<div className={`w-10 h-10 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-4`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className="text-lg text-white font-medium title-font mb-2">
|
||||
Ramona Falls
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Fingerstache flexitarian street art 8-bit waist co, subway tile
|
||||
poke farm.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button className={`flex mx-auto mt-16 text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
DarkContentC.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkContentC.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkContentC;
|
||||
77
src/blocks/content/dark/d.js
Normal file
77
src/blocks/content/dark/d.js
Normal file
@@ -0,0 +1,77 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkContentD(props) {
|
||||
return (
|
||||
<section className="text-gray-500 body-font bg-gray-900">
|
||||
<div className="container flex flex-wrap px-5 py-24 mx-auto items-center">
|
||||
<div className="md:w-1/2 md:pr-12 md:py-8 md:border-r md:border-b-0 md:mb-0 mb-10 pb-10 border-b border-gray-800">
|
||||
<h1 className="sm:text-3xl text-2xl font-medium title-font mb-2 text-white">
|
||||
Pitchfork Kickstarter Taxidermy
|
||||
</h1>
|
||||
<p className="leading-relaxed text-base">
|
||||
Locavore cardigan small batch roof party blue bottle blog meggings
|
||||
sartorial jean shorts kickstarter migas sriracha church-key synth
|
||||
succulents. Actually taiyaki neutra, distillery gastropub pok pok
|
||||
ugh.
|
||||
</p>
|
||||
<a href className={`text-${props.theme}-500 inline-flex items-center mt-4`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex flex-col md:w-1/2 md:pl-12">
|
||||
<h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
|
||||
CATEGORIES
|
||||
</h2>
|
||||
<nav className="flex flex-wrap list-none -mb-1">
|
||||
<li className="lg:w-1/3 mb-1 w-1/2">
|
||||
<a href className="hover:text-white">First Link</a>
|
||||
</li>
|
||||
<li className="lg:w-1/3 mb-1 w-1/2">
|
||||
<a href className="hover:text-white">Second Link</a>
|
||||
</li>
|
||||
<li className="lg:w-1/3 mb-1 w-1/2">
|
||||
<a href className="hover:text-white">Third Link</a>
|
||||
</li>
|
||||
<li className="lg:w-1/3 mb-1 w-1/2">
|
||||
<a href className="hover:text-white">Fourth Link</a>
|
||||
</li>
|
||||
<li className="lg:w-1/3 mb-1 w-1/2">
|
||||
<a href className="hover:text-white">Fifth Link</a>
|
||||
</li>
|
||||
<li className="lg:w-1/3 mb-1 w-1/2">
|
||||
<a href className="hover:text-white">Sixth Link</a>
|
||||
</li>
|
||||
<li className="lg:w-1/3 mb-1 w-1/2">
|
||||
<a href className="hover:text-white">Seventh Link</a>
|
||||
</li>
|
||||
<li className="lg:w-1/3 mb-1 w-1/2">
|
||||
<a href className="hover:text-white">Eighth Link</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
DarkContentD.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkContentD.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkContentD;
|
||||
51
src/blocks/content/dark/e.js
Normal file
51
src/blocks/content/dark/e.js
Normal file
@@ -0,0 +1,51 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkContentE(props) {
|
||||
return (
|
||||
<section className="text-gray-500 bg-gray-900 body-font">
|
||||
<div className="container px-5 py-24 mx-auto flex flex-wrap">
|
||||
<h2 className="sm:text-3xl text-2xl text-white font-medium title-font mb-2 md:w-2/5">
|
||||
Kickstarter Actually Pinterest Brunch Bitters Occupy
|
||||
</h2>
|
||||
<div className="md:w-3/5 md:pl-6">
|
||||
<p className="leading-relaxed text-base">
|
||||
Taxidermy bushwick celiac master cleanse microdosing seitan. Fashion
|
||||
axe four dollar toast truffaut, direct trade kombucha brunch
|
||||
williamsburg keffiyeh gastropub tousled squid meh taiyaki drinking
|
||||
vinegar tacos.
|
||||
</p>
|
||||
<div className="flex md:mt-4 mt-6">
|
||||
<button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-1 px-4 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
|
||||
Button
|
||||
</button>
|
||||
<a href className={`text-${props.theme}-500 inline-flex items-center ml-4`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
DarkContentE.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkContentE.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkContentE;
|
||||
85
src/blocks/content/dark/f.js
Normal file
85
src/blocks/content/dark/f.js
Normal file
@@ -0,0 +1,85 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkContentF(props) {
|
||||
return (
|
||||
<section className="text-gray-500 bg-gray-900 body-font">
|
||||
<div className="container px-5 py-24 mx-auto flex flex-col">
|
||||
<div className="lg:w-4/6 mx-auto">
|
||||
<div className="rounded-lg h-64 overflow-hidden">
|
||||
<img
|
||||
alt="content"
|
||||
className="object-cover object-center h-full w-full"
|
||||
src="https://dummyimage.com/1200x500"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col sm:flex-row mt-10">
|
||||
<div className="sm:w-1/3 text-center sm:pr-8 sm:py-8">
|
||||
<div className="w-20 h-20 rounded-full inline-flex items-center justify-center bg-gray-800 text-gray-600">
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-10 h-10"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
|
||||
<circle cx="12" cy="7" r="4" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex flex-col items-center text-center justify-center">
|
||||
<h2 className="font-medium title-font mt-4 text-white text-lg">
|
||||
Phoebe Caulfield
|
||||
</h2>
|
||||
<div className={`w-12 h-1 bg-${props.theme}-500 rounded mt-2 mb-4`}></div>
|
||||
<p className="text-base text-gray-600">
|
||||
Raclette knausgaard hella meggs normcore williamsburg enamel
|
||||
pin sartorial venmo tbh hot chicken gentrify portland.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sm:w-2/3 sm:pl-8 sm:py-8 sm:border-l border-gray-800 sm:border-t-0 border-t mt-4 pt-4 sm:mt-0 text-center sm:text-left">
|
||||
<p className="leading-relaxed text-lg mb-4">
|
||||
Meggings portland fingerstache lyft, post-ironic fixie man bun
|
||||
banh mi umami everyday carry hexagon locavore direct trade art
|
||||
party. Locavore small batch listicle gastropub farm-to-table
|
||||
lumbersexual salvia messenger bag. Coloring book flannel
|
||||
truffaut craft beer drinking vinegar sartorial, disrupt fashion
|
||||
axe normcore meh butcher. Portland 90's scenester
|
||||
vexillologist forage post-ironic asymmetrical, chartreuse
|
||||
disrupt butcher paleo intelligentsia pabst before they sold out
|
||||
four loko. 3 wolf moon brooklyn.
|
||||
</p>
|
||||
<a href className={`text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
DarkContentF.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkContentF.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkContentF;
|
||||
61
src/blocks/content/dark/g.js
Normal file
61
src/blocks/content/dark/g.js
Normal file
@@ -0,0 +1,61 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkContentG(props) {
|
||||
return (
|
||||
<section className="text-gray-500 bg-gray-900 body-font">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="flex flex-wrap -mx-4 -mb-10 text-center">
|
||||
<div className="sm:w-1/2 mb-10 px-4">
|
||||
<div className="rounded-lg h-64 overflow-hidden">
|
||||
<img
|
||||
alt="content"
|
||||
className="object-cover object-center h-full w-full"
|
||||
src="https://dummyimage.com/1201x501"
|
||||
/>
|
||||
</div>
|
||||
<h2 className="title-font text-2xl font-medium text-white mt-6 mb-3">
|
||||
Buy YouTube Videos
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Williamsburg occupy sustainable snackwave gochujang. Pinterest
|
||||
cornhole brunch, slow-carb neutra irony.
|
||||
</p>
|
||||
<button className={`flex mx-auto mt-6 text-white bg-${props.theme}-500 border-0 py-2 px-5 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
<div className="sm:w-1/2 mb-10 px-4">
|
||||
<div className="rounded-lg h-64 overflow-hidden">
|
||||
<img
|
||||
alt="content"
|
||||
className="object-cover object-center h-full w-full"
|
||||
src="https://dummyimage.com/1202x502"
|
||||
/>
|
||||
</div>
|
||||
<h2 className="title-font text-2xl font-medium text-white mt-6 mb-3">
|
||||
The Catalyzer
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Williamsburg occupy sustainable snackwave gochujang. Pinterest
|
||||
cornhole brunch, slow-carb neutra irony.
|
||||
</p>
|
||||
<button className={`flex mx-auto mt-6 text-white bg-${props.theme}-500 border-0 py-2 px-5 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
DarkContentG.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkContentG.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkContentG;
|
||||
131
src/blocks/content/dark/h.js
Normal file
131
src/blocks/content/dark/h.js
Normal file
@@ -0,0 +1,131 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkContentH(props) {
|
||||
return (
|
||||
<section className="text-gray-500 bg-gray-900 body-font">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="flex flex-col">
|
||||
<div className="h-1 bg-gray-800 rounded overflow-hidden">
|
||||
<div className={`w-24 h-full bg-${props.theme}-500`}></div>
|
||||
</div>
|
||||
<div className="flex flex-wrap sm:flex-row flex-col py-6 mb-12">
|
||||
<h1 className="sm:w-2/5 text-white font-medium title-font text-2xl mb-2 sm:mb-0">
|
||||
Space The Final Frontier
|
||||
</h1>
|
||||
<p className="sm:w-3/5 leading-relaxed text-base sm:pl-10 pl-0">
|
||||
Street art subway tile salvia four dollar toast bitters selfies
|
||||
quinoa yuccie synth meditation iPhone intelligentsia prism tofu.
|
||||
Viral gochujang bitters dreamcatcher.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
|
||||
<div className="p-4 md:w-1/3 sm:mb-0 mb-6">
|
||||
<div className="rounded-lg h-64 overflow-hidden">
|
||||
<img
|
||||
alt="content"
|
||||
className="object-cover object-center h-full w-full"
|
||||
src="https://dummyimage.com/1203x503"
|
||||
/>
|
||||
</div>
|
||||
<h2 className="text-xl font-medium title-font text-white mt-5">
|
||||
Shooting Stars
|
||||
</h2>
|
||||
<p className="text-base leading-relaxed mt-2">
|
||||
Swag shoindxgoitch literally meditation subway tile tumblr
|
||||
cold-pressed. Gastropub street art beard dreamcatcher neutra,
|
||||
ethical XOXO lumbersexual.
|
||||
</p>
|
||||
<a href className={`text-${props.theme}-500 inline-flex items-center mt-3`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div className="p-4 md:w-1/3 sm:mb-0 mb-6">
|
||||
<div className="rounded-lg h-64 overflow-hidden">
|
||||
<img
|
||||
alt="content"
|
||||
className="object-cover object-center h-full w-full"
|
||||
src="https://dummyimage.com/1204x504"
|
||||
/>
|
||||
</div>
|
||||
<h2 className="text-xl font-medium title-font text-white mt-5">
|
||||
The Catalyzer
|
||||
</h2>
|
||||
<p className="text-base leading-relaxed mt-2">
|
||||
Swag shoindxigoitch literally meditation subway tile tumblr
|
||||
cold-pressed. Gastropub street art beard dreamcatcher neutra,
|
||||
ethical XOXO lumbersexual.
|
||||
</p>
|
||||
<a href className={`text-${props.theme}-500 inline-flex items-center mt-3`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div className="p-4 md:w-1/3 sm:mb-0 mb-6">
|
||||
<div className="rounded-lg h-64 overflow-hidden">
|
||||
<img
|
||||
alt="content"
|
||||
className="object-cover object-center h-full w-full"
|
||||
src="https://dummyimage.com/1205x505"
|
||||
/>
|
||||
</div>
|
||||
<h2 className="text-xl font-medium title-font text-white mt-5">
|
||||
The 400 Blows
|
||||
</h2>
|
||||
<p className="text-base leading-relaxed mt-2">
|
||||
Swag shoindegoitch literally meditation subway tile tumblr
|
||||
cold-pressed. Gastropub street art beard dreamcatcher neutra,
|
||||
ethical XOXO lumbersexual.
|
||||
</p>
|
||||
<a href className={`text-${props.theme}-500 inline-flex items-center mt-3`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
DarkContentH.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkContentH.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkContentH;
|
||||
132
src/blocks/content/light/a.js
Normal file
132
src/blocks/content/light/a.js
Normal file
@@ -0,0 +1,132 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightContentA(props) {
|
||||
return (
|
||||
<section className="text-gray-700 body-font">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="flex flex-col text-center w-full mb-20">
|
||||
<h2 className={`text-xs text-${props.theme}-500 tracking-widest font-medium title-font mb-1`}>
|
||||
ROOF PARTY POLAROID
|
||||
</h2>
|
||||
<h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">
|
||||
Master Cleanse Reliac Heirloom
|
||||
</h1>
|
||||
<p className="lg:w-2/3 mx-auto leading-relaxed text-base">
|
||||
Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical
|
||||
gentrify, subway tile poke farm-to-table. Franzen you probably
|
||||
haven't heard of them man bun deep jianbing selfies heirloom
|
||||
prism food truck ugh squid celiac humblebrag.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap">
|
||||
<div className="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200">
|
||||
<h2 className="text-lg sm:text-xl text-gray-900 font-medium title-font mb-2">
|
||||
Shooting Stars
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base mb-4">
|
||||
Fingerstache flexitarian street art 8-bit waistcoat. Distillery
|
||||
hexagon disrupt edison bulbche.
|
||||
</p>
|
||||
<a href className={`text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div className="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200">
|
||||
<h2 className="text-lg sm:text-xl text-gray-900 font-medium title-font mb-2">
|
||||
The Catalyzer
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base mb-4">
|
||||
Fingerstache flexitarian street art 8-bit waistcoat. Distillery
|
||||
hexagon disrupt edison bulbche.
|
||||
</p>
|
||||
<a href className={`text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div className="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200">
|
||||
<h2 className="text-lg sm:text-xl text-gray-900 font-medium title-font mb-2">
|
||||
Neptune
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base mb-4">
|
||||
Fingerstache flexitarian street art 8-bit waistcoat. Distillery
|
||||
hexagon disrupt edison bulbche.
|
||||
</p>
|
||||
<a href className={`text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div className="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200">
|
||||
<h2 className="text-lg sm:text-xl text-gray-900 font-medium title-font mb-2">
|
||||
Melanchole
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base mb-4">
|
||||
Fingerstache flexitarian street art 8-bit waistcoat. Distillery
|
||||
hexagon disrupt edison bulbche.
|
||||
</p>
|
||||
<a href className={`text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<button className={`flex mx-auto mt-16 text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
LightContentA.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightContentA.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightContentA;
|
||||
113
src/blocks/content/light/b.js
Normal file
113
src/blocks/content/light/b.js
Normal file
@@ -0,0 +1,113 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightContentB(props) {
|
||||
return (
|
||||
<section className="text-gray-700 body-font">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="flex flex-wrap w-full mb-20">
|
||||
<div className="lg:w-1/2 w-full mb-6 lg:mb-0">
|
||||
<h1 className="sm:text-3xl text-2xl font-medium title-font mb-2 text-gray-900">
|
||||
Pitchfork Kickstarter Taxidermy
|
||||
</h1>
|
||||
<div className={`h-1 w-20 bg-${props.theme}-500 rounded`}></div>
|
||||
</div>
|
||||
<p className="lg:w-1/2 w-full leading-relaxed text-base">
|
||||
Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical
|
||||
gentrify, subway tile poke farm-to-table. Franzen you probably
|
||||
haven't heard of them man bun deep jianbing selfies heirloom
|
||||
prism food truck ugh squid celiac humblebrag.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap -m-4">
|
||||
<div className="xl:w-1/4 md:w-1/2 p-4">
|
||||
<div className="bg-gray-100 p-6 rounded-lg">
|
||||
<img
|
||||
className="h-40 rounded w-full object-cover object-center mb-6"
|
||||
src="https://dummyimage.com/720x400"
|
||||
alt="content"
|
||||
/>
|
||||
<h3 className={`tracking-widest text-${props.theme}-500 text-xs font-medium title-font`}>
|
||||
SUBTITLE
|
||||
</h3>
|
||||
<h2 className="text-lg text-gray-900 font-medium title-font mb-4">
|
||||
Chichen Itza
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Fingerstache flexitarian street art 8-bit waistcoat. Distillery
|
||||
hexagon disrupt edison bulbche.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="xl:w-1/4 md:w-1/2 p-4">
|
||||
<div className="bg-gray-100 p-6 rounded-lg">
|
||||
<img
|
||||
className="h-40 rounded w-full object-cover object-center mb-6"
|
||||
src="https://dummyimage.com/721x401"
|
||||
alt="content"
|
||||
/>
|
||||
<h3 className={`tracking-widest text-${props.theme}-500 text-xs font-medium title-font`}>
|
||||
SUBTITLE
|
||||
</h3>
|
||||
<h2 className="text-lg text-gray-900 font-medium title-font mb-4">
|
||||
Colosseum Roma
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Fingerstache flexitarian street art 8-bit waistcoat. Distillery
|
||||
hexagon disrupt edison bulbche.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="xl:w-1/4 md:w-1/2 p-4">
|
||||
<div className="bg-gray-100 p-6 rounded-lg">
|
||||
<img
|
||||
className="h-40 rounded w-full object-cover object-center mb-6"
|
||||
src="https://dummyimage.com/722x402"
|
||||
alt="content"
|
||||
/>
|
||||
<h3 className={`tracking-widest text-${props.theme}-500 text-xs font-medium title-font`}>
|
||||
SUBTITLE
|
||||
</h3>
|
||||
<h2 className="text-lg text-gray-900 font-medium title-font mb-4">
|
||||
Great Pyramid of Giza
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Fingerstache flexitarian street art 8-bit waistcoat. Distillery
|
||||
hexagon disrupt edison bulbche.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="xl:w-1/4 md:w-1/2 p-4">
|
||||
<div className="bg-gray-100 p-6 rounded-lg">
|
||||
<img
|
||||
className="h-40 rounded w-full object-cover object-center mb-6"
|
||||
src="https://dummyimage.com/723x403"
|
||||
alt="content"
|
||||
/>
|
||||
<h3 className={`tracking-widest text-${props.theme}-500 text-xs font-medium title-font`}>
|
||||
SUBTITLE
|
||||
</h3>
|
||||
<h2 className="text-lg text-gray-900 font-medium title-font mb-4">
|
||||
San Francisco
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Fingerstache flexitarian street art 8-bit waistcoat. Distillery
|
||||
hexagon disrupt edison bulbche.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
LightContentB.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightContentB.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightContentB;
|
||||
182
src/blocks/content/light/c.js
Normal file
182
src/blocks/content/light/c.js
Normal file
@@ -0,0 +1,182 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightContentC(props) {
|
||||
return (
|
||||
<section className="text-gray-700 body-font">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="flex flex-wrap w-full mb-20 flex-col items-center text-center">
|
||||
<h1 className="sm:text-3xl text-2xl font-medium title-font mb-2 text-gray-900">
|
||||
Pitchfork Kickstarter Taxidermy
|
||||
</h1>
|
||||
<p className="lg:w-1/2 w-full leading-relaxed text-base">
|
||||
Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical
|
||||
gentrify, subway tile poke farm-to-table.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap -m-4">
|
||||
<div className="xl:w-1/3 md:w-1/2 p-4">
|
||||
<div className="border border-gray-300 p-6 rounded-lg">
|
||||
<div className={`w-10 h-10 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-4`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M22 12h-4l-3 9L9 3l-3 9H2" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className="text-lg text-gray-900 font-medium title-font mb-2">
|
||||
Shooting Stars
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Fingerstache flexitarian street art 8-bit waist co, subway tile
|
||||
poke farm.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="xl:w-1/3 md:w-1/2 p-4">
|
||||
<div className="border border-gray-300 p-6 rounded-lg">
|
||||
<div className={`w-10 h-10 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-4`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle cx="6" cy="6" r="3" />
|
||||
<circle cx="6" cy="18" r="3" />
|
||||
<path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className="text-lg text-gray-900 font-medium title-font mb-2">
|
||||
The Catalyzer
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Fingerstache flexitarian street art 8-bit waist co, subway tile
|
||||
poke farm.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="xl:w-1/3 md:w-1/2 p-4">
|
||||
<div className="border border-gray-300 p-6 rounded-lg">
|
||||
<div className={`w-10 h-10 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-4`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
|
||||
<circle cx="12" cy="7" r="4" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className="text-lg text-gray-900 font-medium title-font mb-2">
|
||||
Neptune
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Fingerstache flexitarian street art 8-bit waist co, subway tile
|
||||
poke farm.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="xl:w-1/3 md:w-1/2 p-4">
|
||||
<div className="border border-gray-300 p-6 rounded-lg">
|
||||
<div className={`w-10 h-10 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-4`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1zM4 22v-7" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className="text-lg text-gray-900 font-medium title-font mb-2">
|
||||
Melanchole
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Fingerstache flexitarian street art 8-bit waist co, subway tile
|
||||
poke farm.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="xl:w-1/3 md:w-1/2 p-4">
|
||||
<div className="border border-gray-300 p-6 rounded-lg">
|
||||
<div className={`w-10 h-10 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-4`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className="text-lg text-gray-900 font-medium title-font mb-2">
|
||||
Bunker
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Fingerstache flexitarian street art 8-bit waist co, subway tile
|
||||
poke farm.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="xl:w-1/3 md:w-1/2 p-4">
|
||||
<div className="border border-gray-300 p-6 rounded-lg">
|
||||
<div className={`w-10 h-10 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-4`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className="text-lg text-gray-900 font-medium title-font mb-2">
|
||||
Ramona Falls
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Fingerstache flexitarian street art 8-bit waist co, subway tile
|
||||
poke farm.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button className={`flex mx-auto mt-16 text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
LightContentC.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightContentC.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightContentC;
|
||||
77
src/blocks/content/light/d.js
Normal file
77
src/blocks/content/light/d.js
Normal file
@@ -0,0 +1,77 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightContentD(props) {
|
||||
return (
|
||||
<section className="text-gray-700 body-font">
|
||||
<div className="container flex flex-wrap px-5 py-24 mx-auto items-center">
|
||||
<div className="md:w-1/2 md:pr-12 md:py-8 md:border-r md:border-b-0 mb-10 md:mb-0 pb-10 border-b border-gray-300">
|
||||
<h1 className="sm:text-3xl text-2xl font-medium title-font mb-2 text-gray-900">
|
||||
Pitchfork Kickstarter Taxidermy
|
||||
</h1>
|
||||
<p className="leading-relaxed text-base">
|
||||
Locavore cardigan small batch roof party blue bottle blog meggings
|
||||
sartorial jean shorts kickstarter migas sriracha church-key synth
|
||||
succulents. Actually taiyaki neutra, distillery gastropub pok pok
|
||||
ugh.
|
||||
</p>
|
||||
<a href className={`text-${props.theme}-500 inline-flex items-center mt-4`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex flex-col md:w-1/2 md:pl-12">
|
||||
<h2 className="title-font font-medium text-gray-800 tracking-widest text-sm mb-3">
|
||||
CATEGORIES
|
||||
</h2>
|
||||
<nav className="flex flex-wrap list-none -mb-1">
|
||||
<li className="lg:w-1/3 mb-1 w-1/2">
|
||||
<a href className="text-gray-600 hover:text-gray-800">First Link</a>
|
||||
</li>
|
||||
<li className="lg:w-1/3 mb-1 w-1/2">
|
||||
<a href className="text-gray-600 hover:text-gray-800">Second Link</a>
|
||||
</li>
|
||||
<li className="lg:w-1/3 mb-1 w-1/2">
|
||||
<a href className="text-gray-600 hover:text-gray-800">Third Link</a>
|
||||
</li>
|
||||
<li className="lg:w-1/3 mb-1 w-1/2">
|
||||
<a href className="text-gray-600 hover:text-gray-800">Fourth Link</a>
|
||||
</li>
|
||||
<li className="lg:w-1/3 mb-1 w-1/2">
|
||||
<a href className="text-gray-600 hover:text-gray-800">Fifth Link</a>
|
||||
</li>
|
||||
<li className="lg:w-1/3 mb-1 w-1/2">
|
||||
<a href className="text-gray-600 hover:text-gray-800">Sixth Link</a>
|
||||
</li>
|
||||
<li className="lg:w-1/3 mb-1 w-1/2">
|
||||
<a href className="text-gray-600 hover:text-gray-800">Seventh Link</a>
|
||||
</li>
|
||||
<li className="lg:w-1/3 mb-1 w-1/2">
|
||||
<a href className="text-gray-600 hover:text-gray-800">Eighth Link</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
LightContentD.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightContentD.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightContentD;
|
||||
51
src/blocks/content/light/e.js
Normal file
51
src/blocks/content/light/e.js
Normal file
@@ -0,0 +1,51 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightContentE(props) {
|
||||
return (
|
||||
<section className="text-gray-700 body-font">
|
||||
<div className="container px-5 py-24 mx-auto flex flex-wrap">
|
||||
<h2 className="sm:text-3xl text-2xl text-gray-900 font-medium title-font mb-2 md:w-2/5">
|
||||
Kickstarter Actually Pinterest Brunch Bitters Occupy
|
||||
</h2>
|
||||
<div className="md:w-3/5 md:pl-6">
|
||||
<p className="leading-relaxed text-base">
|
||||
Taxidermy bushwick celiac master cleanse microdosing seitan. Fashion
|
||||
axe four dollar toast truffaut, direct trade kombucha brunch
|
||||
williamsburg keffiyeh gastropub tousled squid meh taiyaki drinking
|
||||
vinegar tacos.
|
||||
</p>
|
||||
<div className="flex md:mt-4 mt-6">
|
||||
<button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-1 px-4 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
|
||||
Button
|
||||
</button>
|
||||
<a href className={`text-${props.theme}-500 inline-flex items-center ml-4`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
LightContentE.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightContentE.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightContentE;
|
||||
85
src/blocks/content/light/f.js
Normal file
85
src/blocks/content/light/f.js
Normal file
@@ -0,0 +1,85 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightContentF(props) {
|
||||
return (
|
||||
<section className="text-gray-700 body-font">
|
||||
<div className="container px-5 py-24 mx-auto flex flex-col">
|
||||
<div className="lg:w-4/6 mx-auto">
|
||||
<div className="rounded-lg h-64 overflow-hidden">
|
||||
<img
|
||||
alt="content"
|
||||
className="object-cover object-center h-full w-full"
|
||||
src="https://dummyimage.com/1200x500"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col sm:flex-row mt-10">
|
||||
<div className="sm:w-1/3 text-center sm:pr-8 sm:py-8">
|
||||
<div className="w-20 h-20 rounded-full inline-flex items-center justify-center bg-gray-200 text-gray-400">
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-10 h-10"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
|
||||
<circle cx="12" cy="7" r="4" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex flex-col items-center text-center justify-center">
|
||||
<h2 className="font-medium title-font mt-4 text-gray-900 text-lg">
|
||||
Phoebe Caulfield
|
||||
</h2>
|
||||
<div className={`w-12 h-1 bg-${props.theme}-500 rounded mt-2 mb-4`}></div>
|
||||
<p className="text-base text-gray-600">
|
||||
Raclette knausgaard hella meggs normcore williamsburg enamel
|
||||
pin sartorial venmo tbh hot chicken gentrify portland.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sm:w-2/3 sm:pl-8 sm:py-8 sm:border-l border-gray-300 sm:border-t-0 border-t mt-4 pt-4 sm:mt-0 text-center sm:text-left">
|
||||
<p className="leading-relaxed text-lg mb-4">
|
||||
Meggings portland fingerstache lyft, post-ironic fixie man bun
|
||||
banh mi umami everyday carry hexagon locavore direct trade art
|
||||
party. Locavore small batch listicle gastropub farm-to-table
|
||||
lumbersexual salvia messenger bag. Coloring book flannel
|
||||
truffaut craft beer drinking vinegar sartorial, disrupt fashion
|
||||
axe normcore meh butcher. Portland 90's scenester
|
||||
vexillologist forage post-ironic asymmetrical, chartreuse
|
||||
disrupt butcher paleo intelligentsia pabst before they sold out
|
||||
four loko. 3 wolf moon brooklyn.
|
||||
</p>
|
||||
<a href className={`text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
LightContentF.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightContentF.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightContentF;
|
||||
61
src/blocks/content/light/g.js
Normal file
61
src/blocks/content/light/g.js
Normal file
@@ -0,0 +1,61 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightContentG(props) {
|
||||
return (
|
||||
<section className="text-gray-700 body-font">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="flex flex-wrap -mx-4 -mb-10 text-center">
|
||||
<div className="sm:w-1/2 mb-10 px-4">
|
||||
<div className="rounded-lg h-64 overflow-hidden">
|
||||
<img
|
||||
alt="content"
|
||||
className="object-cover object-center h-full w-full"
|
||||
src="https://dummyimage.com/1201x501"
|
||||
/>
|
||||
</div>
|
||||
<h2 className="title-font text-2xl font-medium text-gray-900 mt-6 mb-3">
|
||||
Buy YouTube Videos
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Williamsburg occupy sustainable snackwave gochujang. Pinterest
|
||||
cornhole brunch, slow-carb neutra irony.
|
||||
</p>
|
||||
<button className={`flex mx-auto mt-6 text-white bg-${props.theme}-500 border-0 py-2 px-5 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
<div className="sm:w-1/2 mb-10 px-4">
|
||||
<div className="rounded-lg h-64 overflow-hidden">
|
||||
<img
|
||||
alt="content"
|
||||
className="object-cover object-center h-full w-full"
|
||||
src="https://dummyimage.com/1202x502"
|
||||
/>
|
||||
</div>
|
||||
<h2 className="title-font text-2xl font-medium text-gray-900 mt-6 mb-3">
|
||||
The Catalyzer
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Williamsburg occupy sustainable snackwave gochujang. Pinterest
|
||||
cornhole brunch, slow-carb neutra irony.
|
||||
</p>
|
||||
<button className={`flex mx-auto mt-6 text-white bg-${props.theme}-500 border-0 py-2 px-5 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
LightContentG.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightContentG.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightContentG;
|
||||
131
src/blocks/content/light/h.js
Normal file
131
src/blocks/content/light/h.js
Normal file
@@ -0,0 +1,131 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightContentH(props) {
|
||||
return (
|
||||
<section className="text-gray-700 body-font">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="flex flex-col">
|
||||
<div className="h-1 bg-gray-200 rounded overflow-hidden">
|
||||
<div className={`w-24 h-full bg-${props.theme}-500`}></div>
|
||||
</div>
|
||||
<div className="flex flex-wrap sm:flex-row flex-col py-6 mb-12">
|
||||
<h1 className="sm:w-2/5 text-gray-900 font-medium title-font text-2xl mb-2 sm:mb-0">
|
||||
Space The Final Frontier
|
||||
</h1>
|
||||
<p className="sm:w-3/5 leading-relaxed text-base sm:pl-10 pl-0">
|
||||
Street art subway tile salvia four dollar toast bitters selfies
|
||||
quinoa yuccie synth meditation iPhone intelligentsia prism tofu.
|
||||
Viral gochujang bitters dreamcatcher.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
|
||||
<div className="p-4 md:w-1/3 sm:mb-0 mb-6">
|
||||
<div className="rounded-lg h-64 overflow-hidden">
|
||||
<img
|
||||
alt="content"
|
||||
className="object-cover object-center h-full w-full"
|
||||
src="https://dummyimage.com/1203x503"
|
||||
/>
|
||||
</div>
|
||||
<h2 className="text-xl font-medium title-font text-gray-900 mt-5">
|
||||
Shooting Stars
|
||||
</h2>
|
||||
<p className="text-base leading-relaxed mt-2">
|
||||
Swag shoivdigoitch literally meditation subway tile tumblr
|
||||
cold-pressed. Gastropub street art beard dreamcatcher neutra,
|
||||
ethical XOXO lumbersexual.
|
||||
</p>
|
||||
<a href className={`text-${props.theme}-500 inline-flex items-center mt-3`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div className="p-4 md:w-1/3 sm:mb-0 mb-6">
|
||||
<div className="rounded-lg h-64 overflow-hidden">
|
||||
<img
|
||||
alt="content"
|
||||
className="object-cover object-center h-full w-full"
|
||||
src="https://dummyimage.com/1204x504"
|
||||
/>
|
||||
</div>
|
||||
<h2 className="text-xl font-medium title-font text-gray-900 mt-5">
|
||||
The Catalyzer
|
||||
</h2>
|
||||
<p className="text-base leading-relaxed mt-2">
|
||||
Swag shoivdigoitch literally meditation subway tile tumblr
|
||||
cold-pressed. Gastropub street art beard dreamcatcher neutra,
|
||||
ethical XOXO lumbersexual.
|
||||
</p>
|
||||
<a href className={`text-${props.theme}-500 inline-flex items-center mt-3`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div className="p-4 md:w-1/3 sm:mb-0 mb-6">
|
||||
<div className="rounded-lg h-64 overflow-hidden">
|
||||
<img
|
||||
alt="content"
|
||||
className="object-cover object-center h-full w-full"
|
||||
src="https://dummyimage.com/1205x505"
|
||||
/>
|
||||
</div>
|
||||
<h2 className="text-xl font-medium title-font text-gray-900 mt-5">
|
||||
The 400 Blows
|
||||
</h2>
|
||||
<p className="text-base leading-relaxed mt-2">
|
||||
Swag shoivdigoitch literally meditation subway tile tumblr
|
||||
cold-pressed. Gastropub street art beard dreamcatcher neutra,
|
||||
ethical XOXO lumbersexual.
|
||||
</p>
|
||||
<a href className={`text-${props.theme}-500 inline-flex items-center mt-3`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
LightContentH.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightContentH.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightContentH;
|
||||
30
src/blocks/cta/dark/a.js
Normal file
30
src/blocks/cta/dark/a.js
Normal file
@@ -0,0 +1,30 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkCTAA(props) {
|
||||
return (
|
||||
<section className="text-gray-500 bg-gray-900 body-font">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="lg:w-2/3 flex flex-col sm:flex-row sm:items-center items-start mx-auto">
|
||||
<h1 className="flex-grow sm:pr-16 text-2xl font-medium title-font text-white">
|
||||
Slow-carb next level shoinddgoitch ethical authentic, scenester
|
||||
sriracha forage.
|
||||
</h1>
|
||||
<button className={`flex-shrink-0 text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg mt-10 sm:mt-0`}>
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
DarkCTAA.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkCTAA.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkCTAA;
|
||||
51
src/blocks/cta/dark/b.js
Normal file
51
src/blocks/cta/dark/b.js
Normal file
@@ -0,0 +1,51 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkCTAB(props) {
|
||||
return (
|
||||
<section className="text-gray-500 bg-gray-900 body-font">
|
||||
<div className="container px-5 py-24 mx-auto flex flex-wrap items-center">
|
||||
<div className="lg:w-3/5 md:w-1/2 md:pr-16 lg:pr-0 pr-0">
|
||||
<h1 className="title-font font-medium text-3xl text-white">
|
||||
Slow-carb next level shoindxgoitch ethical authentic, poko scenester
|
||||
</h1>
|
||||
<p className="leading-relaxed mt-4">
|
||||
Poke slow-carb mixtape knausgaard, typewriter street art gentrify
|
||||
hammock starladder roathse. Craies vegan tousled etsy austin.
|
||||
</p>
|
||||
</div>
|
||||
<div className="lg:w-2/6 md:w-1/2 bg-gray-800 rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0">
|
||||
<h2 className="text-white text-lg font-medium title-font mb-5">
|
||||
Sign Up
|
||||
</h2>
|
||||
<input
|
||||
className={`bg-gray-900 rounded border text-white border-gray-900 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mb-4`}
|
||||
placeholder="Full Name"
|
||||
type="text"
|
||||
></input>
|
||||
<input
|
||||
className={`bg-gray-900 rounded border text-white border-gray-900 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mb-4`}
|
||||
placeholder="Email"
|
||||
type="email"
|
||||
></input>
|
||||
<button className={`text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
|
||||
Button
|
||||
</button>
|
||||
<p className="text-xs text-gray-600 mt-3">
|
||||
Literally you probably haven't heard of them jean shorts.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
DarkCTAB.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkCTAB.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkCTAB;
|
||||
46
src/blocks/cta/dark/c.js
Normal file
46
src/blocks/cta/dark/c.js
Normal file
@@ -0,0 +1,46 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkCTAC(props) {
|
||||
return (
|
||||
<section className="text-gray-500 bg-gray-900 body-font">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="flex flex-col text-center w-full mb-12">
|
||||
<h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">
|
||||
Master Cleanse Reliac Heirloom
|
||||
</h1>
|
||||
<p className="lg:w-2/3 mx-auto leading-relaxed text-base">
|
||||
Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical
|
||||
gentrify, subway tile poke farm-to-table. Franzen you probably
|
||||
haven't heard of them man bun deep.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex lg:w-2/3 w-full sm:flex-row flex-col mx-auto px-8 sm:px-0">
|
||||
<input
|
||||
className={`flex-grow w-full bg-gray-800 rounded border border-gray-700 text-white focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mr-4 mb-4 sm:mb-0`}
|
||||
placeholder="Full Name"
|
||||
type="text"
|
||||
></input>
|
||||
<input
|
||||
className={`flex-grow w-full bg-gray-800 rounded border border-gray-700 text-white focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mr-4 mb-4 sm:mb-0`}
|
||||
placeholder="Email"
|
||||
type="email"
|
||||
></input>
|
||||
<button className={`text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
DarkCTAC.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkCTAC.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkCTAC;
|
||||
62
src/blocks/cta/dark/d.js
Normal file
62
src/blocks/cta/dark/d.js
Normal file
@@ -0,0 +1,62 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkCTAD(props) {
|
||||
return (
|
||||
<section className="text-gray-500 bg-gray-900 body-font">
|
||||
<div className="container px-5 py-24 mx-auto flex items-center md:flex-row flex-col">
|
||||
<div className="flex flex-col md:pr-10 md:mb-0 mb-6 pr-0 w-full md:w-auto md:text-left text-center">
|
||||
<h2 className={`text-xs text-${props.theme}-500 tracking-widest font-medium title-font mb-1`}>
|
||||
ROOF PARTY POLAROID
|
||||
</h2>
|
||||
<h1 className="md:text-3xl text-2xl font-medium title-font text-white">
|
||||
Master Cleanse Reliac Heirloom
|
||||
</h1>
|
||||
</div>
|
||||
<div className="flex md:ml-auto md:mr-0 mx-auto items-center flex-shrink-0">
|
||||
<button className="bg-gray-800 inline-flex py-3 px-5 rounded-lg items-center hover:bg-gray-700 focus:outline-none">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<path d="M99.617 8.057a50.191 50.191 0 00-38.815-6.713l230.932 230.933 74.846-74.846L99.617 8.057zM32.139 20.116c-6.441 8.563-10.148 19.077-10.148 30.199v411.358c0 11.123 3.708 21.636 10.148 30.199l235.877-235.877L32.139 20.116zM464.261 212.087l-67.266-37.637-81.544 81.544 81.548 81.548 67.273-37.64c16.117-9.03 25.738-25.442 25.738-43.908s-9.621-34.877-25.749-43.907zM291.733 279.711L60.815 510.629c3.786.891 7.639 1.371 11.492 1.371a50.275 50.275 0 0027.31-8.07l266.965-149.372-74.849-74.847z" />
|
||||
</svg>
|
||||
<span className="ml-4 flex items-start flex-col leading-none">
|
||||
<span className="text-xs text-gray-500 mb-1">GET IT ON</span>
|
||||
<span className="title-font font-medium">Google Play</span>
|
||||
</span>
|
||||
</button>
|
||||
<button className="bg-gray-800 inline-flex py-3 px-5 rounded-lg items-center ml-4 hover:bg-gray-700 focus:outline-none">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 305 305"
|
||||
>
|
||||
<path d="M40.74 112.12c-25.79 44.74-9.4 112.65 19.12 153.82C74.09 286.52 88.5 305 108.24 305c.37 0 .74 0 1.13-.02 9.27-.37 15.97-3.23 22.45-5.99 7.27-3.1 14.8-6.3 26.6-6.3 11.22 0 18.39 3.1 25.31 6.1 6.83 2.95 13.87 6 24.26 5.81 22.23-.41 35.88-20.35 47.92-37.94a168.18 168.18 0 0021-43l.09-.28a2.5 2.5 0 00-1.33-3.06l-.18-.08c-3.92-1.6-38.26-16.84-38.62-58.36-.34-33.74 25.76-51.6 31-54.84l.24-.15a2.5 2.5 0 00.7-3.51c-18-26.37-45.62-30.34-56.73-30.82a50.04 50.04 0 00-4.95-.24c-13.06 0-25.56 4.93-35.61 8.9-6.94 2.73-12.93 5.09-17.06 5.09-4.64 0-10.67-2.4-17.65-5.16-9.33-3.7-19.9-7.9-31.1-7.9l-.79.01c-26.03.38-50.62 15.27-64.18 38.86z" />
|
||||
<path d="M212.1 0c-15.76.64-34.67 10.35-45.97 23.58-9.6 11.13-19 29.68-16.52 48.38a2.5 2.5 0 002.29 2.17c1.06.08 2.15.12 3.23.12 15.41 0 32.04-8.52 43.4-22.25 11.94-14.5 17.99-33.1 16.16-49.77A2.52 2.52 0 00212.1 0z" />
|
||||
</svg>
|
||||
<span className="ml-4 flex items-start flex-col leading-none">
|
||||
<span className="text-xs text-gray-500 mb-1">
|
||||
Download on the
|
||||
</span>
|
||||
<span className="title-font font-medium">App Store</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
DarkCTAD.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkCTAD.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkCTAD;
|
||||
30
src/blocks/cta/light/a.js
Normal file
30
src/blocks/cta/light/a.js
Normal file
@@ -0,0 +1,30 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightCTAA(props) {
|
||||
return (
|
||||
<section className="text-gray-700 body-font">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="lg:w-2/3 flex flex-col sm:flex-row sm:items-center items-start mx-auto">
|
||||
<h1 className="flex-grow sm:pr-16 text-2xl font-medium title-font text-gray-900">
|
||||
Slow-carb next level shoindxgoitch ethical authentic, scenester
|
||||
sriracha forage.
|
||||
</h1>
|
||||
<button className={`flex-shrink-0 text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg mt-10 sm:mt-0`}>
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
LightCTAA.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightCTAA.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightCTAA;
|
||||
51
src/blocks/cta/light/b.js
Normal file
51
src/blocks/cta/light/b.js
Normal file
@@ -0,0 +1,51 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightCTAB(props) {
|
||||
return (
|
||||
<section className="text-gray-700 body-font">
|
||||
<div className="container px-5 py-24 mx-auto flex flex-wrap items-center">
|
||||
<div className="lg:w-3/5 md:w-1/2 md:pr-16 lg:pr-0 pr-0">
|
||||
<h1 className="title-font font-medium text-3xl text-gray-900">
|
||||
Slow-carb next level shoindcgoitch ethical authentic, poko scenester
|
||||
</h1>
|
||||
<p className="leading-relaxed mt-4">
|
||||
Poke slow-carb mixtape knausgaard, typewriter street art gentrify
|
||||
hammock starladder roathse. Craies vegan tousled etsy austin.
|
||||
</p>
|
||||
</div>
|
||||
<div className="lg:w-2/6 md:w-1/2 bg-gray-200 rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0">
|
||||
<h2 className="text-gray-900 text-lg font-medium title-font mb-5">
|
||||
Sign Up
|
||||
</h2>
|
||||
<input
|
||||
className={`bg-white rounded border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mb-4`}
|
||||
placeholder="Full Name"
|
||||
type="text"
|
||||
></input>
|
||||
<input
|
||||
className={`bg-white rounded border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mb-4`}
|
||||
placeholder="Email"
|
||||
type="email"
|
||||
></input>
|
||||
<button className={`text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
|
||||
Button
|
||||
</button>
|
||||
<p className="text-xs text-gray-500 mt-3">
|
||||
Literally you probably haven't heard of them jean shorts.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
LightCTAB.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightCTAB.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightCTAB;
|
||||
46
src/blocks/cta/light/c.js
Normal file
46
src/blocks/cta/light/c.js
Normal file
@@ -0,0 +1,46 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightCTAC(props) {
|
||||
return (
|
||||
<section className="text-gray-700 body-font">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="flex flex-col text-center w-full mb-12">
|
||||
<h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">
|
||||
Master Cleanse Reliac Heirloom
|
||||
</h1>
|
||||
<p className="lg:w-2/3 mx-auto leading-relaxed text-base">
|
||||
Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical
|
||||
gentrify, subway tile poke farm-to-table. Franzen you probably
|
||||
haven't heard of them man bun deep.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex lg:w-2/3 w-full sm:flex-row flex-col mx-auto px-8 sm:px-0">
|
||||
<input
|
||||
className={`flex-grow w-full bg-gray-100 rounded border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mr-4 mb-4 sm:mb-0`}
|
||||
placeholder="Full Name"
|
||||
type="text"
|
||||
></input>
|
||||
<input
|
||||
className={`flex-grow w-full bg-gray-100 rounded border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mr-4 mb-4 sm:mb-0`}
|
||||
placeholder="Email"
|
||||
type="email"
|
||||
></input>
|
||||
<button className={`text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
LightCTAC.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightCTAC.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightCTAC;
|
||||
62
src/blocks/cta/light/d.js
Normal file
62
src/blocks/cta/light/d.js
Normal file
@@ -0,0 +1,62 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightCTAD(props) {
|
||||
return (
|
||||
<section className="text-gray-700 body-font">
|
||||
<div className="container px-5 py-24 mx-auto flex items-center md:flex-row flex-col">
|
||||
<div className="flex flex-col md:pr-10 md:mb-0 mb-6 pr-0 w-full md:w-auto md:text-left text-center">
|
||||
<h2 className={`text-xs text-${props.theme}-500 tracking-widest font-medium title-font mb-1`}>
|
||||
ROOF PARTY POLAROID
|
||||
</h2>
|
||||
<h1 className="md:text-3xl text-2xl font-medium title-font text-gray-900">
|
||||
Master Cleanse Reliac Heirloom
|
||||
</h1>
|
||||
</div>
|
||||
<div className="flex md:ml-auto md:mr-0 mx-auto items-center flex-shrink-0">
|
||||
<button className="bg-gray-200 inline-flex py-3 px-5 rounded-lg items-center hover:bg-gray-300 focus:outline-none">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<path d="M99.617 8.057a50.191 50.191 0 00-38.815-6.713l230.932 230.933 74.846-74.846L99.617 8.057zM32.139 20.116c-6.441 8.563-10.148 19.077-10.148 30.199v411.358c0 11.123 3.708 21.636 10.148 30.199l235.877-235.877L32.139 20.116zM464.261 212.087l-67.266-37.637-81.544 81.544 81.548 81.548 67.273-37.64c16.117-9.03 25.738-25.442 25.738-43.908s-9.621-34.877-25.749-43.907zM291.733 279.711L60.815 510.629c3.786.891 7.639 1.371 11.492 1.371a50.275 50.275 0 0027.31-8.07l266.965-149.372-74.849-74.847z" />
|
||||
</svg>
|
||||
<span className="ml-4 flex items-start flex-col leading-none">
|
||||
<span className="text-xs text-gray-600 mb-1">GET IT ON</span>
|
||||
<span className="title-font font-medium">Google Play</span>
|
||||
</span>
|
||||
</button>
|
||||
<button className="bg-gray-200 inline-flex py-3 px-5 rounded-lg items-center ml-4 hover:bg-gray-300 focus:outline-none">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 305 305"
|
||||
>
|
||||
<path d="M40.74 112.12c-25.79 44.74-9.4 112.65 19.12 153.82C74.09 286.52 88.5 305 108.24 305c.37 0 .74 0 1.13-.02 9.27-.37 15.97-3.23 22.45-5.99 7.27-3.1 14.8-6.3 26.6-6.3 11.22 0 18.39 3.1 25.31 6.1 6.83 2.95 13.87 6 24.26 5.81 22.23-.41 35.88-20.35 47.92-37.94a168.18 168.18 0 0021-43l.09-.28a2.5 2.5 0 00-1.33-3.06l-.18-.08c-3.92-1.6-38.26-16.84-38.62-58.36-.34-33.74 25.76-51.6 31-54.84l.24-.15a2.5 2.5 0 00.7-3.51c-18-26.37-45.62-30.34-56.73-30.82a50.04 50.04 0 00-4.95-.24c-13.06 0-25.56 4.93-35.61 8.9-6.94 2.73-12.93 5.09-17.06 5.09-4.64 0-10.67-2.4-17.65-5.16-9.33-3.7-19.9-7.9-31.1-7.9l-.79.01c-26.03.38-50.62 15.27-64.18 38.86z" />
|
||||
<path d="M212.1 0c-15.76.64-34.67 10.35-45.97 23.58-9.6 11.13-19 29.68-16.52 48.38a2.5 2.5 0 002.29 2.17c1.06.08 2.15.12 3.23.12 15.41 0 32.04-8.52 43.4-22.25 11.94-14.5 17.99-33.1 16.16-49.77A2.52 2.52 0 00212.1 0z" />
|
||||
</svg>
|
||||
<span className="ml-4 flex items-start flex-col leading-none">
|
||||
<span className="text-xs text-gray-600 mb-1">
|
||||
Download on the
|
||||
</span>
|
||||
<span className="title-font font-medium">App Store</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
LightCTAD.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightCTAD.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightCTAD;
|
||||
158
src/blocks/ecommerce/dark/a.js
Normal file
158
src/blocks/ecommerce/dark/a.js
Normal file
@@ -0,0 +1,158 @@
|
||||
import React from "react";
|
||||
|
||||
function DarkEcommerceA() {
|
||||
return (
|
||||
<section className="text-gray-500 bg-gray-900 body-font">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="flex flex-wrap -m-4">
|
||||
<div className="lg:w-1/4 md:w-1/2 p-4 w-full">
|
||||
<a href className="block relative h-48 rounded overflow-hidden">
|
||||
<img
|
||||
alt="ecommerce"
|
||||
className="object-cover object-center w-full h-full block"
|
||||
src="https://dummyimage.com/420x260"
|
||||
/>
|
||||
</a>
|
||||
<div className="mt-4">
|
||||
<h3 className="text-gray-500 text-xs tracking-widest title-font mb-1">
|
||||
CATEGORY
|
||||
</h3>
|
||||
<h2 className="text-white title-font text-lg font-medium">
|
||||
The Catalyzer
|
||||
</h2>
|
||||
<p className="mt-1">$16.00</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:w-1/4 md:w-1/2 p-4 w-full">
|
||||
<a href className="block relative h-48 rounded overflow-hidden">
|
||||
<img
|
||||
alt="ecommerce"
|
||||
className="object-cover object-center w-full h-full block"
|
||||
src="https://dummyimage.com/421x261"
|
||||
/>
|
||||
</a>
|
||||
<div className="mt-4">
|
||||
<h3 className="text-gray-500 text-xs tracking-widest title-font mb-1">
|
||||
CATEGORY
|
||||
</h3>
|
||||
<h2 className="text-white title-font text-lg font-medium">
|
||||
Shooting Stars
|
||||
</h2>
|
||||
<p className="mt-1">$21.15</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:w-1/4 md:w-1/2 p-4 w-full">
|
||||
<a href className="block relative h-48 rounded overflow-hidden">
|
||||
<img
|
||||
alt="ecommerce"
|
||||
className="object-cover object-center w-full h-full block"
|
||||
src="https://dummyimage.com/422x262"
|
||||
/>
|
||||
</a>
|
||||
<div className="mt-4">
|
||||
<h3 className="text-gray-500 text-xs tracking-widest title-font mb-1">
|
||||
CATEGORY
|
||||
</h3>
|
||||
<h2 className="text-white title-font text-lg font-medium">
|
||||
Neptune
|
||||
</h2>
|
||||
<p className="mt-1">$12.00</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:w-1/4 md:w-1/2 p-4 w-full">
|
||||
<a href className="block relative h-48 rounded overflow-hidden">
|
||||
<img
|
||||
alt="ecommerce"
|
||||
className="object-cover object-center w-full h-full block"
|
||||
src="https://dummyimage.com/423x263"
|
||||
/>
|
||||
</a>
|
||||
<div className="mt-4">
|
||||
<h3 className="text-gray-500 text-xs tracking-widest title-font mb-1">
|
||||
CATEGORY
|
||||
</h3>
|
||||
<h2 className="text-white title-font text-lg font-medium">
|
||||
The 400 Blows
|
||||
</h2>
|
||||
<p className="mt-1">$18.40</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:w-1/4 md:w-1/2 p-4 w-full">
|
||||
<a href className="block relative h-48 rounded overflow-hidden">
|
||||
<img
|
||||
alt="ecommerce"
|
||||
className="object-cover object-center w-full h-full block"
|
||||
src="https://dummyimage.com/424x264"
|
||||
/>
|
||||
</a>
|
||||
<div className="mt-4">
|
||||
<h3 className="text-gray-500 text-xs tracking-widest title-font mb-1">
|
||||
CATEGORY
|
||||
</h3>
|
||||
<h2 className="text-white title-font text-lg font-medium">
|
||||
The Catalyzer
|
||||
</h2>
|
||||
<p className="mt-1">$16.00</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:w-1/4 md:w-1/2 p-4 w-full">
|
||||
<a href className="block relative h-48 rounded overflow-hidden">
|
||||
<img
|
||||
alt="ecommerce"
|
||||
className="object-cover object-center w-full h-full block"
|
||||
src="https://dummyimage.com/425x265"
|
||||
/>
|
||||
</a>
|
||||
<div className="mt-4">
|
||||
<h3 className="text-gray-500 text-xs tracking-widest title-font mb-1">
|
||||
CATEGORY
|
||||
</h3>
|
||||
<h2 className="text-white title-font text-lg font-medium">
|
||||
Shooting Stars
|
||||
</h2>
|
||||
<p className="mt-1">$21.15</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:w-1/4 md:w-1/2 p-4 w-full">
|
||||
<a href className="block relative h-48 rounded overflow-hidden">
|
||||
<img
|
||||
alt="ecommerce"
|
||||
className="object-cover object-center w-full h-full block"
|
||||
src="https://dummyimage.com/427x267"
|
||||
/>
|
||||
</a>
|
||||
<div className="mt-4">
|
||||
<h3 className="text-gray-500 text-xs tracking-widest title-font mb-1">
|
||||
CATEGORY
|
||||
</h3>
|
||||
<h2 className="text-white title-font text-lg font-medium">
|
||||
Neptune
|
||||
</h2>
|
||||
<p className="mt-1">$12.00</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:w-1/4 md:w-1/2 p-4 w-full">
|
||||
<a href className="block relative h-48 rounded overflow-hidden">
|
||||
<img
|
||||
alt="ecommerce"
|
||||
className="object-cover object-center w-full h-full block"
|
||||
src="https://dummyimage.com/428x268"
|
||||
/>
|
||||
</a>
|
||||
<div className="mt-4">
|
||||
<h3 className="text-gray-500 text-xs tracking-widest title-font mb-1">
|
||||
CATEGORY
|
||||
</h3>
|
||||
<h2 className="text-white title-font text-lg font-medium">
|
||||
The 400 Blows
|
||||
</h2>
|
||||
<p className="mt-1">$18.40</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default DarkEcommerceA;
|
||||
194
src/blocks/ecommerce/dark/b.js
Normal file
194
src/blocks/ecommerce/dark/b.js
Normal file
@@ -0,0 +1,194 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkEcommerceB(props) {
|
||||
return (
|
||||
<section className="text-gray-500 bg-gray-900 body-font overflow-hidden">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="lg:w-4/5 mx-auto flex flex-wrap">
|
||||
<img
|
||||
alt="ecommerce"
|
||||
className="lg:w-1/2 w-full lg:h-auto h-64 object-cover object-center rounded"
|
||||
src="https://dummyimage.com/400x400"
|
||||
/>
|
||||
<div className="lg:w-1/2 w-full lg:pl-10 lg:py-6 mt-6 lg:mt-0">
|
||||
<h2 className="text-sm title-font text-gray-600 tracking-widest">
|
||||
BRAND NAME
|
||||
</h2>
|
||||
<h1 className="text-white text-3xl title-font font-medium mb-1">
|
||||
The Catcher in the Rye
|
||||
</h1>
|
||||
<div className="flex mb-4">
|
||||
<span className="flex items-center">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className={`w-4 h-4 text-${props.theme}-500`}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
|
||||
</svg>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className={`w-4 h-4 text-${props.theme}-500`}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
|
||||
</svg>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className={`w-4 h-4 text-${props.theme}-500`}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
|
||||
</svg>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className={`w-4 h-4 text-${props.theme}-500`}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
|
||||
</svg>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className={`w-4 h-4 text-${props.theme}-500`}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
|
||||
</svg>
|
||||
<span className="text-gray-500 ml-3">4 Reviews</span>
|
||||
</span>
|
||||
<span className="flex ml-3 pl-3 py-2 border-l-2 border-gray-800 text-gray-600">
|
||||
<a href>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-2">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-2">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<p className="leading-relaxed">
|
||||
Fam locavore kickstarter distillery. Mixtape chillwave tumeric
|
||||
sriracha taximy chia microdosing tilde DIY. XOXO fam ${props.theme}
|
||||
juiceramps cornhole raw denim forage brooklyn. Everyday carry +1
|
||||
seitan poutine tumeric. Gastropub blue bottle austin listicle
|
||||
pour-over, neutra jean shorts keytar banjo tattooed umami
|
||||
cardigan.
|
||||
</p>
|
||||
<div className="flex mt-6 items-center pb-5 border-b-2 border-gray-800 mb-5">
|
||||
<div className="flex">
|
||||
<span className="mr-3">Color</span>
|
||||
<button className="border-2 border-gray-800 rounded-full w-6 h-6 focus:outline-none"></button>
|
||||
<button className="border-2 border-gray-800 ml-1 bg-gray-700 rounded-full w-6 h-6 focus:outline-none"></button>
|
||||
<button className={`border-2 border-gray-800 ml-1 bg-${props.theme}-500 rounded-full w-6 h-6 focus:outline-none`}></button>
|
||||
</div>
|
||||
<div className="flex ml-6 items-center">
|
||||
<span className="mr-3">Size</span>
|
||||
<div className="relative">
|
||||
<select className={`rounded border border-gray-700 bg-gray-800 appearance-none py-2 focus:outline-none focus:border-${props.theme}-500 text-white pl-3 pr-10`}>
|
||||
<option>SM</option>
|
||||
<option>M</option>
|
||||
<option>L</option>
|
||||
<option>XL</option>
|
||||
</select>
|
||||
<span className="absolute right-0 top-0 h-full w-10 text-center text-gray-600 pointer-events-none flex items-center justify-center">
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M6 9l6 6 6-6" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<span className="title-font font-medium text-2xl text-white">
|
||||
$58.00
|
||||
</span>
|
||||
<button className={`flex ml-auto text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
|
||||
Button
|
||||
</button>
|
||||
<button className="rounded-full w-10 h-10 bg-gray-800 p-0 border-0 inline-flex items-center justify-center text-gray-600 ml-4">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
DarkEcommerceB.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkEcommerceB.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkEcommerceB;
|
||||
86
src/blocks/ecommerce/dark/c.js
Normal file
86
src/blocks/ecommerce/dark/c.js
Normal file
@@ -0,0 +1,86 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkEcommerceC(props) {
|
||||
return (
|
||||
<section className="text-gray-500 bg-gray-900 body-font overflow-hidden">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="lg:w-4/5 mx-auto flex flex-wrap">
|
||||
<div className="lg:w-1/2 w-full lg:pr-10 lg:py-6 mb-6 lg:mb-0">
|
||||
<h2 className="text-sm title-font text-gray-600 tracking-widest">
|
||||
BRAND NAME
|
||||
</h2>
|
||||
<h1 className="text-white text-3xl title-font font-medium mb-4">
|
||||
Animated Night Hill Illustrations
|
||||
</h1>
|
||||
<div className="flex mb-4">
|
||||
<a href className={`flex-grow text-${props.theme}-500 border-b-2 border-${props.theme}-500 py-2 text-lg px-1`}>
|
||||
Description
|
||||
</a>
|
||||
<a href className="flex-grow border-b-2 border-gray-800 py-2 text-lg px-1">
|
||||
Reviews
|
||||
</a>
|
||||
<a href className="flex-grow border-b-2 border-gray-800 py-2 text-lg px-1">
|
||||
Details
|
||||
</a>
|
||||
</div>
|
||||
<p className="leading-relaxed mb-4">
|
||||
Fam locavore kickstarter distillery. Mixtape chillwave tumeric
|
||||
sriracha taximy chia microdosing tilde DIY. XOXO fam iligo
|
||||
juiceramps cornhole raw denim forage brooklyn. Everyday carry +1
|
||||
seitan poutine tumeric. Gastropub blue bottle austin listicle
|
||||
pour-over, neutra jean.
|
||||
</p>
|
||||
<div className="flex border-t border-gray-800 py-2">
|
||||
<span className="text-gray-500">Color</span>
|
||||
<span className="ml-auto text-white">Blue</span>
|
||||
</div>
|
||||
<div className="flex border-t border-gray-800 py-2">
|
||||
<span className="text-gray-500">Size</span>
|
||||
<span className="ml-auto text-white">Medium</span>
|
||||
</div>
|
||||
<div className="flex border-t border-b mb-6 border-gray-800 py-2">
|
||||
<span className="text-gray-500">Quantity</span>
|
||||
<span className="ml-auto text-white">4</span>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<span className="title-font font-medium text-2xl text-white">
|
||||
$58.00
|
||||
</span>
|
||||
<button className={`flex ml-auto text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
|
||||
Button
|
||||
</button>
|
||||
<button className="rounded-full w-10 h-10 bg-gray-800 p-0 border-0 inline-flex items-center justify-center text-gray-600 ml-4">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
alt="ecommerce"
|
||||
className="lg:w-1/2 w-full lg:h-auto h-64 object-cover object-center rounded"
|
||||
src="https://dummyimage.com/400x400"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
DarkEcommerceC.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkEcommerceC.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkEcommerceC;
|
||||
158
src/blocks/ecommerce/light/a.js
Normal file
158
src/blocks/ecommerce/light/a.js
Normal file
@@ -0,0 +1,158 @@
|
||||
import React from "react";
|
||||
|
||||
function LightEcommerceA() {
|
||||
return (
|
||||
<section className="text-gray-700 body-font">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="flex flex-wrap -m-4">
|
||||
<div className="lg:w-1/4 md:w-1/2 p-4 w-full">
|
||||
<a href className="block relative h-48 rounded overflow-hidden">
|
||||
<img
|
||||
alt="ecommerce"
|
||||
className="object-cover object-center w-full h-full block"
|
||||
src="https://dummyimage.com/420x260"
|
||||
/>
|
||||
</a>
|
||||
<div className="mt-4">
|
||||
<h3 className="text-gray-500 text-xs tracking-widest title-font mb-1">
|
||||
CATEGORY
|
||||
</h3>
|
||||
<h2 className="text-gray-900 title-font text-lg font-medium">
|
||||
The Catalyzer
|
||||
</h2>
|
||||
<p className="mt-1">$16.00</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:w-1/4 md:w-1/2 p-4 w-full">
|
||||
<a href className="block relative h-48 rounded overflow-hidden">
|
||||
<img
|
||||
alt="ecommerce"
|
||||
className="object-cover object-center w-full h-full block"
|
||||
src="https://dummyimage.com/421x261"
|
||||
/>
|
||||
</a>
|
||||
<div className="mt-4">
|
||||
<h3 className="text-gray-500 text-xs tracking-widest title-font mb-1">
|
||||
CATEGORY
|
||||
</h3>
|
||||
<h2 className="text-gray-900 title-font text-lg font-medium">
|
||||
Shooting Stars
|
||||
</h2>
|
||||
<p className="mt-1">$21.15</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:w-1/4 md:w-1/2 p-4 w-full">
|
||||
<a href className="block relative h-48 rounded overflow-hidden">
|
||||
<img
|
||||
alt="ecommerce"
|
||||
className="object-cover object-center w-full h-full block"
|
||||
src="https://dummyimage.com/422x262"
|
||||
/>
|
||||
</a>
|
||||
<div className="mt-4">
|
||||
<h3 className="text-gray-500 text-xs tracking-widest title-font mb-1">
|
||||
CATEGORY
|
||||
</h3>
|
||||
<h2 className="text-gray-900 title-font text-lg font-medium">
|
||||
Neptune
|
||||
</h2>
|
||||
<p className="mt-1">$12.00</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:w-1/4 md:w-1/2 p-4 w-full">
|
||||
<a href className="block relative h-48 rounded overflow-hidden">
|
||||
<img
|
||||
alt="ecommerce"
|
||||
className="object-cover object-center w-full h-full block"
|
||||
src="https://dummyimage.com/423x263"
|
||||
/>
|
||||
</a>
|
||||
<div className="mt-4">
|
||||
<h3 className="text-gray-500 text-xs tracking-widest title-font mb-1">
|
||||
CATEGORY
|
||||
</h3>
|
||||
<h2 className="text-gray-900 title-font text-lg font-medium">
|
||||
The 400 Blows
|
||||
</h2>
|
||||
<p className="mt-1">$18.40</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:w-1/4 md:w-1/2 p-4 w-full">
|
||||
<a href className="block relative h-48 rounded overflow-hidden">
|
||||
<img
|
||||
alt="ecommerce"
|
||||
className="object-cover object-center w-full h-full block"
|
||||
src="https://dummyimage.com/424x264"
|
||||
/>
|
||||
</a>
|
||||
<div className="mt-4">
|
||||
<h3 className="text-gray-500 text-xs tracking-widest title-font mb-1">
|
||||
CATEGORY
|
||||
</h3>
|
||||
<h2 className="text-gray-900 title-font text-lg font-medium">
|
||||
The Catalyzer
|
||||
</h2>
|
||||
<p className="mt-1">$16.00</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:w-1/4 md:w-1/2 p-4 w-full">
|
||||
<a href className="block relative h-48 rounded overflow-hidden">
|
||||
<img
|
||||
alt="ecommerce"
|
||||
className="object-cover object-center w-full h-full block"
|
||||
src="https://dummyimage.com/425x265"
|
||||
/>
|
||||
</a>
|
||||
<div className="mt-4">
|
||||
<h3 className="text-gray-500 text-xs tracking-widest title-font mb-1">
|
||||
CATEGORY
|
||||
</h3>
|
||||
<h2 className="text-gray-900 title-font text-lg font-medium">
|
||||
Shooting Stars
|
||||
</h2>
|
||||
<p className="mt-1">$21.15</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:w-1/4 md:w-1/2 p-4 w-full">
|
||||
<a href className="block relative h-48 rounded overflow-hidden">
|
||||
<img
|
||||
alt="ecommerce"
|
||||
className="object-cover object-center w-full h-full block"
|
||||
src="https://dummyimage.com/427x267"
|
||||
/>
|
||||
</a>
|
||||
<div className="mt-4">
|
||||
<h3 className="text-gray-500 text-xs tracking-widest title-font mb-1">
|
||||
CATEGORY
|
||||
</h3>
|
||||
<h2 className="text-gray-900 title-font text-lg font-medium">
|
||||
Neptune
|
||||
</h2>
|
||||
<p className="mt-1">$12.00</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:w-1/4 md:w-1/2 p-4 w-full">
|
||||
<a href className="block relative h-48 rounded overflow-hidden">
|
||||
<img
|
||||
alt="ecommerce"
|
||||
className="object-cover object-center w-full h-full block"
|
||||
src="https://dummyimage.com/428x268"
|
||||
/>
|
||||
</a>
|
||||
<div className="mt-4">
|
||||
<h3 className="text-gray-500 text-xs tracking-widest title-font mb-1">
|
||||
CATEGORY
|
||||
</h3>
|
||||
<h2 className="text-gray-900 title-font text-lg font-medium">
|
||||
The 400 Blows
|
||||
</h2>
|
||||
<p className="mt-1">$18.40</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default LightEcommerceA;
|
||||
194
src/blocks/ecommerce/light/b.js
Normal file
194
src/blocks/ecommerce/light/b.js
Normal file
@@ -0,0 +1,194 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightEcommerceB(props) {
|
||||
return (
|
||||
<section className="text-gray-700 body-font overflow-hidden">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="lg:w-4/5 mx-auto flex flex-wrap">
|
||||
<img
|
||||
alt="ecommerce"
|
||||
className="lg:w-1/2 w-full lg:h-auto h-64 object-cover object-center rounded"
|
||||
src="https://dummyimage.com/400x400"
|
||||
/>
|
||||
<div className="lg:w-1/2 w-full lg:pl-10 lg:py-6 mt-6 lg:mt-0">
|
||||
<h2 className="text-sm title-font text-gray-500 tracking-widest">
|
||||
BRAND NAME
|
||||
</h2>
|
||||
<h1 className="text-gray-900 text-3xl title-font font-medium mb-1">
|
||||
The Catcher in the Rye
|
||||
</h1>
|
||||
<div className="flex mb-4">
|
||||
<span className="flex items-center">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className={`w-4 h-4 text-${props.theme}-500`}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
|
||||
</svg>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className={`w-4 h-4 text-${props.theme}-500`}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
|
||||
</svg>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className={`w-4 h-4 text-${props.theme}-500`}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
|
||||
</svg>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className={`w-4 h-4 text-${props.theme}-500`}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
|
||||
</svg>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className={`w-4 h-4 text-${props.theme}-500`}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
|
||||
</svg>
|
||||
<span className="text-gray-600 ml-3">4 Reviews</span>
|
||||
</span>
|
||||
<span className="flex ml-3 pl-3 py-2 border-l-2 border-gray-200">
|
||||
<a href className="text-gray-500">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-2 text-gray-500">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-2 text-gray-500">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<p className="leading-relaxed">
|
||||
Fam locavore kickstarter distillery. Mixtape chillwave tumeric
|
||||
sriracha taximy chia microdosing tilde DIY. XOXO fam indxgo
|
||||
juiceramps cornhole raw denim forage brooklyn. Everyday carry +1
|
||||
seitan poutine tumeric. Gastropub blue bottle austin listicle
|
||||
pour-over, neutra jean shorts keytar banjo tattooed umami
|
||||
cardigan.
|
||||
</p>
|
||||
<div className="flex mt-6 items-center pb-5 border-b-2 border-gray-200 mb-5">
|
||||
<div className="flex">
|
||||
<span className="mr-3">Color</span>
|
||||
<button className="border-2 border-gray-300 rounded-full w-6 h-6 focus:outline-none"></button>
|
||||
<button className="border-2 border-gray-300 ml-1 bg-gray-700 rounded-full w-6 h-6 focus:outline-none"></button>
|
||||
<button className={`border-2 border-gray-300 ml-1 bg-${props.theme}-500 rounded-full w-6 h-6 focus:outline-none`}></button>
|
||||
</div>
|
||||
<div className="flex ml-6 items-center">
|
||||
<span className="mr-3">Size</span>
|
||||
<div className="relative">
|
||||
<select className={`rounded border appearance-none border-gray-400 py-2 focus:outline-none focus:border-${props.theme}-500 text-base pl-3 pr-10`}>
|
||||
<option>SM</option>
|
||||
<option>M</option>
|
||||
<option>L</option>
|
||||
<option>XL</option>
|
||||
</select>
|
||||
<span className="absolute right-0 top-0 h-full w-10 text-center text-gray-600 pointer-events-none flex items-center justify-center">
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M6 9l6 6 6-6" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<span className="title-font font-medium text-2xl text-gray-900">
|
||||
$58.00
|
||||
</span>
|
||||
<button className={`flex ml-auto text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
|
||||
Button
|
||||
</button>
|
||||
<button className="rounded-full w-10 h-10 bg-gray-200 p-0 border-0 inline-flex items-center justify-center text-gray-500 ml-4">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
LightEcommerceB.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightEcommerceB.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightEcommerceB;
|
||||
86
src/blocks/ecommerce/light/c.js
Normal file
86
src/blocks/ecommerce/light/c.js
Normal file
@@ -0,0 +1,86 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightEcommerceC(props) {
|
||||
return (
|
||||
<section className="text-gray-700 body-font overflow-hidden">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="lg:w-4/5 mx-auto flex flex-wrap">
|
||||
<div className="lg:w-1/2 w-full lg:pr-10 lg:py-6 mb-6 lg:mb-0">
|
||||
<h2 className="text-sm title-font text-gray-500 tracking-widest">
|
||||
BRAND NAME
|
||||
</h2>
|
||||
<h1 className="text-gray-900 text-3xl title-font font-medium mb-4">
|
||||
Animated Night Hill Illustrations
|
||||
</h1>
|
||||
<div className="flex mb-4">
|
||||
<a href className={`flex-grow text-${props.theme}-500 border-b-2 border-${props.theme}-500 py-2 text-lg px-1`}>
|
||||
Description
|
||||
</a>
|
||||
<a href className="flex-grow border-b-2 border-gray-300 py-2 text-lg px-1">
|
||||
Reviews
|
||||
</a>
|
||||
<a href className="flex-grow border-b-2 border-gray-300 py-2 text-lg px-1">
|
||||
Details
|
||||
</a>
|
||||
</div>
|
||||
<p className="leading-relaxed mb-4">
|
||||
Fam locavore kickstarter distillery. Mixtape chillwave tumeric
|
||||
sriracha taximy chia microdosing tilde DIY. XOXO fam inxigo
|
||||
juiceramps cornhole raw denim forage brooklyn. Everyday carry +1
|
||||
seitan poutine tumeric. Gastropub blue bottle austin listicle
|
||||
pour-over, neutra jean.
|
||||
</p>
|
||||
<div className="flex border-t border-gray-300 py-2">
|
||||
<span className="text-gray-500">Color</span>
|
||||
<span className="ml-auto text-gray-900">Blue</span>
|
||||
</div>
|
||||
<div className="flex border-t border-gray-300 py-2">
|
||||
<span className="text-gray-500">Size</span>
|
||||
<span className="ml-auto text-gray-900">Medium</span>
|
||||
</div>
|
||||
<div className="flex border-t border-b mb-6 border-gray-300 py-2">
|
||||
<span className="text-gray-500">Quantity</span>
|
||||
<span className="ml-auto text-gray-900">4</span>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<span className="title-font font-medium text-2xl text-gray-900">
|
||||
$58.00
|
||||
</span>
|
||||
<button className={`flex ml-auto text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
|
||||
Button
|
||||
</button>
|
||||
<button className="rounded-full w-10 h-10 bg-gray-200 p-0 border-0 inline-flex items-center justify-center text-gray-500 ml-4">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
alt="ecommerce"
|
||||
className="lg:w-1/2 w-full lg:h-auto h-64 object-cover object-center rounded"
|
||||
src="https://dummyimage.com/400x400"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
LightEcommerceC.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightEcommerceC.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightEcommerceC;
|
||||
150
src/blocks/feature/dark/a.js
Normal file
150
src/blocks/feature/dark/a.js
Normal file
@@ -0,0 +1,150 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkFeatureA(props) {
|
||||
return (
|
||||
<section className="text-gray-500 bg-gray-900 body-font">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<h1 className="sm:text-3xl text-2xl font-medium title-font text-center text-white mb-20">
|
||||
Raw Denim Heirloom Man Braid<br className="hidden sm:block" />
|
||||
Selfies Wayfarers
|
||||
</h1>
|
||||
<div className="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
|
||||
<div className="p-4 md:w-1/3 md:mb-0 mb-6 flex">
|
||||
<div className={`w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-4 flex-shrink-0`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M22 12h-4l-3 9L9 3l-3 9H2" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-grow pl-6">
|
||||
<h2 className="text-white text-lg title-font font-medium mb-2">
|
||||
Shooting Stars
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine, ramps microdosing
|
||||
banh mi pug VHS try-hard ugh iceland kickstarter tumblr
|
||||
live-edge tilde.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 md:w-1/3 md:mb-0 mb-6 flex">
|
||||
<div className={`w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-4 flex-shrink-0`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle cx="6" cy="6" r="3" />
|
||||
<circle cx="6" cy="18" r="3" />
|
||||
<path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-grow pl-6">
|
||||
<h2 className="text-white text-lg title-font font-medium mb-2">
|
||||
The Catalyzer
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine, ramps microdosing
|
||||
banh mi pug VHS try-hard ugh iceland kickstarter tumblr
|
||||
live-edge tilde.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 md:w-1/3 md:mb-0 mb-6 flex">
|
||||
<div className={`w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-4 flex-shrink-0`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
|
||||
<circle cx="12" cy="7" r="4" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-grow pl-6">
|
||||
<h2 className="text-white text-lg title-font font-medium mb-2">
|
||||
Neptune
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine, ramps microdosing
|
||||
banh mi pug VHS try-hard ugh iceland kickstarter tumblr
|
||||
live-edge tilde.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
DarkFeatureA.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkFeatureA.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkFeatureA;
|
||||
159
src/blocks/feature/dark/b.js
Normal file
159
src/blocks/feature/dark/b.js
Normal file
@@ -0,0 +1,159 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkFeatureB(props) {
|
||||
return (
|
||||
<section className="text-gray-500 bg-gray-900 body-font">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="text-center mb-20">
|
||||
<h1 className="sm:text-3xl text-2xl font-medium title-font text-white mb-4">
|
||||
Raw Denim Heirloom Man Braid
|
||||
</h1>
|
||||
<p className="text-base leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine, ramps microdosing banh mi
|
||||
pug.
|
||||
</p>
|
||||
<div className="flex mt-6 justify-center">
|
||||
<div className={`w-16 h-1 rounded-full bg-${props.theme}-500 inline-flex`}></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
|
||||
<div className="p-4 md:w-1/3 md:mb-0 mb-6 flex flex-col text-center items-center">
|
||||
<div className={`w-20 h-20 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-5 flex-shrink-0`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-10 h-10"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M22 12h-4l-3 9L9 3l-3 9H2" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-grow">
|
||||
<h2 className="text-white text-lg title-font font-medium mb-3">
|
||||
Shooting Stars
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine, ramps microdosing
|
||||
banh mi pug VHS try-hard.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 md:w-1/3 md:mb-0 mb-6 flex flex-col text-center items-center">
|
||||
<div className={`w-20 h-20 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-5 flex-shrink-0`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-10 h-10"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle cx="6" cy="6" r="3" />
|
||||
<circle cx="6" cy="18" r="3" />
|
||||
<path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-grow">
|
||||
<h2 className="text-white text-lg title-font font-medium mb-3">
|
||||
The Catalyzer
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine, ramps microdosing
|
||||
banh mi pug VHS try-hard.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 md:w-1/3 md:mb-0 mb-6 flex flex-col text-center items-center">
|
||||
<div className={`w-20 h-20 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-5 flex-shrink-0`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-10 h-10"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
|
||||
<circle cx="12" cy="7" r="4" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-grow">
|
||||
<h2 className="text-white text-lg title-font font-medium mb-3">
|
||||
Neptune
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine, ramps microdosing
|
||||
banh mi pug VHS try-hard.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button className={`flex mx-auto mt-16 text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
DarkFeatureB.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkFeatureB.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkFeatureB;
|
||||
147
src/blocks/feature/dark/c.js
Normal file
147
src/blocks/feature/dark/c.js
Normal file
@@ -0,0 +1,147 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkFeatureC(props) {
|
||||
return (
|
||||
<section className="text-gray-500 bg-gray-900 body-font">
|
||||
<div className="container px-5 py-24 mx-auto flex flex-wrap">
|
||||
<div className="lg:w-1/2 w-full mb-10 lg:mb-0 rounded-lg overflow-hidden">
|
||||
<img
|
||||
alt="feature"
|
||||
className="object-cover object-center h-full w-full"
|
||||
src="https://dummyimage.com/460x500"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col flex-wrap lg:py-6 -mb-10 lg:w-1/2 lg:pl-12 lg:text-left text-center">
|
||||
<div className="flex flex-col mb-10 lg:items-start items-center">
|
||||
<div className={`w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-5`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M22 12h-4l-3 9L9 3l-3 9H2" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-grow">
|
||||
<h2 className="text-white text-lg title-font font-medium mb-3">
|
||||
Shooting Stars
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col mb-10 lg:items-start items-center">
|
||||
<div className={`w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-5`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle cx="6" cy="6" r="3" />
|
||||
<circle cx="6" cy="18" r="3" />
|
||||
<path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-grow">
|
||||
<h2 className="text-white text-lg title-font font-medium mb-3">
|
||||
The Catalyzer
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col mb-10 lg:items-start items-center">
|
||||
<div className={`w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-5`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
|
||||
<circle cx="12" cy="7" r="4" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-grow">
|
||||
<h2 className="text-white text-lg title-font font-medium mb-3">
|
||||
Neptune
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
DarkFeatureC.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkFeatureC.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkFeatureC;
|
||||
104
src/blocks/feature/dark/d.js
Normal file
104
src/blocks/feature/dark/d.js
Normal file
@@ -0,0 +1,104 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkFeatureD(props) {
|
||||
return (
|
||||
<section className="text-gray-400 bg-gray-900 body-font">
|
||||
<div className="container px-5 py-24 mx-auto flex flex-wrap">
|
||||
<div className="flex flex-wrap -m-4">
|
||||
<div className="p-4 lg:w-1/2 md:w-full">
|
||||
<div className="flex border-2 rounded-lg border-gray-800 p-8 sm:flex-row flex-col">
|
||||
<div className={`w-16 h-16 sm:mr-8 sm:mb-0 mb-4 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 flex-shrink-0`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-8 h-8"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M22 12h-4l-3 9L9 3l-3 9H2" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-grow">
|
||||
<h2 className="text-white text-lg title-font font-medium mb-3">
|
||||
Shooting Stars
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 lg:w-1/2 md:w-full">
|
||||
<div className="flex border-2 rounded-lg border-gray-800 p-8 sm:flex-row flex-col">
|
||||
<div className={`w-16 h-16 sm:mr-8 sm:mb-0 mb-4 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 flex-shrink-0`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-10 h-10"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
|
||||
<circle cx="12" cy="7" r="4" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-grow">
|
||||
<h2 className="text-white text-lg title-font font-medium mb-3">
|
||||
The Catalyzer
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
DarkFeatureD.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkFeatureD.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkFeatureD;
|
||||
160
src/blocks/feature/dark/e.js
Normal file
160
src/blocks/feature/dark/e.js
Normal file
@@ -0,0 +1,160 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkFeatureE(props) {
|
||||
return (
|
||||
<section className="text-gray-500 bg-gray-900 body-font">
|
||||
<div className="container px-5 py-24 mx-auto flex flex-wrap">
|
||||
<div className="flex flex-col text-center w-full mb-20">
|
||||
<h2 className={`text-xs text-${props.theme}-500 tracking-widest font-medium title-font mb-1`}>
|
||||
ROOF PARTY POLAROID
|
||||
</h2>
|
||||
<h1 className="sm:text-3xl text-2xl font-medium title-font text-white">
|
||||
Master Cleanse Reliac Heirloom
|
||||
</h1>
|
||||
</div>
|
||||
<div className="flex flex-wrap -m-4">
|
||||
<div className="p-4 md:w-1/3">
|
||||
<div className="flex rounded-lg h-full bg-gray-800 p-8 flex-col">
|
||||
<div className="flex items-center mb-3">
|
||||
<div className={`w-8 h-8 mr-3 inline-flex items-center justify-center rounded-full bg-${props.theme}-500 text-white flex-shrink-0`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M22 12h-4l-3 9L9 3l-3 9H2" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className="text-white text-lg title-font font-medium">
|
||||
Shooting Stars
|
||||
</h2>
|
||||
</div>
|
||||
<div className="flex-grow">
|
||||
<p className="leading-relaxed text-base">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 md:w-1/3">
|
||||
<div className="flex rounded-lg h-full bg-gray-800 p-8 flex-col">
|
||||
<div className="flex items-center mb-3">
|
||||
<div className={`w-8 h-8 mr-3 inline-flex items-center justify-center rounded-full bg-${props.theme}-500 text-white flex-shrink-0`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
|
||||
<circle cx="12" cy="7" r="4" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className="text-white text-lg title-font font-medium">
|
||||
The Catalyzer
|
||||
</h2>
|
||||
</div>
|
||||
<div className="flex-grow">
|
||||
<p className="leading-relaxed text-base">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 md:w-1/3">
|
||||
<div className="flex rounded-lg h-full bg-gray-800 p-8 flex-col">
|
||||
<div className="flex items-center mb-3">
|
||||
<div className={`w-8 h-8 mr-3 inline-flex items-center justify-center rounded-full bg-${props.theme}-500 text-white flex-shrink-0`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle cx="6" cy="6" r="3" />
|
||||
<circle cx="6" cy="18" r="3" />
|
||||
<path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className="text-white text-lg title-font font-medium">
|
||||
Neptune
|
||||
</h2>
|
||||
</div>
|
||||
<div className="flex-grow">
|
||||
<p className="leading-relaxed text-base">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
DarkFeatureE.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkFeatureE.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkFeatureE;
|
||||
141
src/blocks/feature/dark/f.js
Normal file
141
src/blocks/feature/dark/f.js
Normal file
@@ -0,0 +1,141 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkFeatureF(props) {
|
||||
return (
|
||||
<section className="text-gray-500 bg-gray-900 body-font">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="flex items-center lg:w-3/5 mx-auto border-b pb-10 mb-10 border-gray-800 sm:flex-row flex-col">
|
||||
<div className={`sm:w-32 sm:h-32 h-20 w-20 sm:mr-10 inline-flex items-center justify-center rounded-full text-${props.theme}-400 bg-gray-800 flex-shrink-0`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="sm:w-16 sm:h-16 w-10 h-10"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M22 12h-4l-3 9L9 3l-3 9H2" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-grow sm:text-left text-center mt-6 sm:mt-0">
|
||||
<h2 className="text-white text-lg title-font font-medium mb-2">
|
||||
Shooting Stars
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center lg:w-3/5 mx-auto border-b pb-10 mb-10 border-gray-800 sm:flex-row flex-col">
|
||||
<div className="flex-grow sm:text-left text-center mt-6 sm:mt-0">
|
||||
<h2 className="text-white text-lg title-font font-medium mb-2">
|
||||
The Catalyzer
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div className={`sm:w-32 order-first sm:order-none sm:h-32 h-20 w-20 sm:ml-10 inline-flex items-center justify-center rounded-full text-${props.theme}-400 bg-gray-800 flex-shrink-0`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="sm:w-16 sm:h-16 w-10 h-10"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle cx="6" cy="6" r="3" />
|
||||
<circle cx="6" cy="18" r="3" />
|
||||
<path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center lg:w-3/5 mx-auto sm:flex-row flex-col">
|
||||
<div className={`sm:w-32 sm:h-32 h-20 w-20 sm:mr-10 inline-flex items-center justify-center rounded-full text-${props.theme}-400 bg-gray-800 flex-shrink-0`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="sm:w-16 sm:h-16 w-10 h-10"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
|
||||
<circle cx="12" cy="7" r="4" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-grow sm:text-left text-center mt-6 sm:mt-0">
|
||||
<h2 className="text-white text-lg title-font font-medium mb-2">
|
||||
The 400 Blows
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<button className={`flex mx-auto mt-20 text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
DarkFeatureF.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkFeatureF.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkFeatureF;
|
||||
150
src/blocks/feature/dark/g.js
Normal file
150
src/blocks/feature/dark/g.js
Normal file
@@ -0,0 +1,150 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkFeatureG(props) {
|
||||
return (
|
||||
<section className="text-gray-500 bg-gray-900 body-font">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="text-center mb-20">
|
||||
<h1 className="sm:text-3xl text-2xl font-medium text-center title-font text-white mb-4">
|
||||
Raw Denim Heirloom Man Braid
|
||||
</h1>
|
||||
<p className="text-base leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine, ramps microdosing banh mi
|
||||
pug.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap lg:w-4/5 sm:mx-auto sm:mb-2 -mx-2">
|
||||
<div className="p-2 sm:w-1/2 w-full">
|
||||
<div className="bg-gray-800 rounded flex p-4 h-full items-center">
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className={`text-${props.theme}-500 w-6 h-6 flex-shrink-0 mr-4`}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
|
||||
<path d="M22 4L12 14.01l-3-3" />
|
||||
</svg>
|
||||
<span className="title-font font-medium text-white">
|
||||
Authentic Cliche Forage
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-2 sm:w-1/2 w-full">
|
||||
<div className="bg-gray-800 rounded flex p-4 h-full items-center">
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className={`text-${props.theme}-500 w-6 h-6 flex-shrink-0 mr-4`}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
|
||||
<path d="M22 4L12 14.01l-3-3" />
|
||||
</svg>
|
||||
<span className="title-font font-medium text-white">
|
||||
Kinfolk Chips Snackwave
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-2 sm:w-1/2 w-full">
|
||||
<div className="bg-gray-800 rounded flex p-4 h-full items-center">
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className={`text-${props.theme}-500 w-6 h-6 flex-shrink-0 mr-4`}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
|
||||
<path d="M22 4L12 14.01l-3-3" />
|
||||
</svg>
|
||||
<span className="title-font font-medium text-white">
|
||||
Coloring Book Ethical
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-2 sm:w-1/2 w-full">
|
||||
<div className="bg-gray-800 rounded flex p-4 h-full items-center">
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className={`text-${props.theme}-500 w-6 h-6 flex-shrink-0 mr-4`}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
|
||||
<path d="M22 4L12 14.01l-3-3" />
|
||||
</svg>
|
||||
<span className="title-font font-medium text-white">
|
||||
Typewriter Polaroid Cray
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-2 sm:w-1/2 w-full">
|
||||
<div className="bg-gray-800 rounded flex p-4 h-full items-center">
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className={`text-${props.theme}-500 w-6 h-6 flex-shrink-0 mr-4`}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
|
||||
<path d="M22 4L12 14.01l-3-3" />
|
||||
</svg>
|
||||
<span className="title-font font-medium text-white">
|
||||
Pack Truffaut Blue
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-2 sm:w-1/2 w-full">
|
||||
<div className="bg-gray-800 rounded flex p-4 h-full items-center">
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className={`text-${props.theme}-500 w-6 h-6 flex-shrink-0 mr-4`}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
|
||||
<path d="M22 4L12 14.01l-3-3" />
|
||||
</svg>
|
||||
<span className="title-font font-medium text-white">
|
||||
The Catcher In The Rye
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button className={`flex mx-auto mt-16 text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
DarkFeatureG.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkFeatureG.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkFeatureG;
|
||||
384
src/blocks/feature/dark/h.js
Normal file
384
src/blocks/feature/dark/h.js
Normal file
@@ -0,0 +1,384 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkFeatureH(props) {
|
||||
return (
|
||||
<section className="text-gray-500 bg-gray-900 body-font">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="text-center mb-20">
|
||||
<h1 className="sm:text-3xl text-2xl font-medium text-center title-font text-white mb-4">
|
||||
Raw Denim Heirloom Man Braid
|
||||
</h1>
|
||||
<p className="text-base leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine, ramps microdosing banh mi
|
||||
pug.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap -m-4">
|
||||
<div className="p-4 lg:w-1/4 sm:w-1/2 w-full">
|
||||
<h2 className="font-medium title-font tracking-widest text-white mb-4 text-sm text-center sm:text-left">
|
||||
SHOOTING STARS
|
||||
</h2>
|
||||
<nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1">
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
First Link
|
||||
</a>
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
Second Link
|
||||
</a>
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
Third Link
|
||||
</a>
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
Fourth Link
|
||||
</a>
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
Fifth Link
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="p-4 lg:w-1/4 sm:w-1/2 w-full">
|
||||
<h2 className="font-medium title-font tracking-widest text-white mb-4 text-sm text-center sm:text-left">
|
||||
THE 400 BLOWS
|
||||
</h2>
|
||||
<nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1">
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
First Link
|
||||
</a>
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
Second Link
|
||||
</a>
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
Third Link
|
||||
</a>
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
Fourth Link
|
||||
</a>
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
Fifth Link
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="p-4 lg:w-1/4 sm:w-1/2 w-full">
|
||||
<h2 className="font-medium title-font tracking-widest text-white mb-4 text-sm text-center sm:text-left">
|
||||
THE CATALYZER
|
||||
</h2>
|
||||
<nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1">
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
First Link
|
||||
</a>
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
Second Link
|
||||
</a>
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
Third Link
|
||||
</a>
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
Fourth Link
|
||||
</a>
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
Fifth Link
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="p-4 lg:w-1/4 sm:w-1/2 w-full">
|
||||
<h2 className="font-medium title-font tracking-widest text-white mb-4 text-sm text-center sm:text-left">
|
||||
NEPTUNE
|
||||
</h2>
|
||||
<nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1">
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
First Link
|
||||
</a>
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
Second Link
|
||||
</a>
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
Third Link
|
||||
</a>
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
Fourth Link
|
||||
</a>
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
Fifth Link
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<button className={`flex mx-auto mt-16 text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
DarkFeatureH.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkFeatureH.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkFeatureH;
|
||||
150
src/blocks/feature/light/a.js
Normal file
150
src/blocks/feature/light/a.js
Normal file
@@ -0,0 +1,150 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightFeatureA(props) {
|
||||
return (
|
||||
<section className="text-gray-700 body-font">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<h1 className="sm:text-3xl text-2xl font-medium title-font text-center text-gray-900 mb-20">
|
||||
Raw Denim Heirloom Man Braid<br className="hidden sm:block" />
|
||||
Selfies Wayfarers
|
||||
</h1>
|
||||
<div className="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
|
||||
<div className="p-4 md:w-1/3 md:mb-0 mb-6 flex">
|
||||
<div className={`w-12 h-12 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-4 flex-shrink-0`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M22 12h-4l-3 9L9 3l-3 9H2" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-grow pl-6">
|
||||
<h2 className="text-gray-900 text-lg title-font font-medium mb-2">
|
||||
Shooting Stars
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine, ramps microdosing
|
||||
banh mi pug VHS try-hard ugh iceland kickstarter tumblr
|
||||
live-edge tilde.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 md:w-1/3 md:mb-0 mb-6 flex">
|
||||
<div className={`w-12 h-12 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-4 flex-shrink-0`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle cx="6" cy="6" r="3" />
|
||||
<circle cx="6" cy="18" r="3" />
|
||||
<path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-grow pl-6">
|
||||
<h2 className="text-gray-900 text-lg title-font font-medium mb-2">
|
||||
The Catalyzer
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine, ramps microdosing
|
||||
banh mi pug VHS try-hard ugh iceland kickstarter tumblr
|
||||
live-edge tilde.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 md:w-1/3 md:mb-0 mb-6 flex">
|
||||
<div className={`w-12 h-12 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-4 flex-shrink-0`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
|
||||
<circle cx="12" cy="7" r="4" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-grow pl-6">
|
||||
<h2 className="text-gray-900 text-lg title-font font-medium mb-2">
|
||||
Neptune
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine, ramps microdosing
|
||||
banh mi pug VHS try-hard ugh iceland kickstarter tumblr
|
||||
live-edge tilde.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
LightFeatureA.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightFeatureA.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightFeatureA;
|
||||
159
src/blocks/feature/light/b.js
Normal file
159
src/blocks/feature/light/b.js
Normal file
@@ -0,0 +1,159 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightFeatureB(props) {
|
||||
return (
|
||||
<section className="text-gray-700 body-font">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="text-center mb-20">
|
||||
<h1 className="sm:text-3xl text-2xl font-medium title-font text-gray-900 mb-4">
|
||||
Raw Denim Heirloom Man Braid
|
||||
</h1>
|
||||
<p className="text-base leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine, ramps microdosing banh mi
|
||||
pug.
|
||||
</p>
|
||||
<div className="flex mt-6 justify-center">
|
||||
<div className={`w-16 h-1 rounded-full bg-${props.theme}-500 inline-flex`}></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
|
||||
<div className="p-4 md:w-1/3 md:mb-0 mb-6 flex flex-col text-center items-center">
|
||||
<div className={`w-20 h-20 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-5 flex-shrink-0`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-10 h-10"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M22 12h-4l-3 9L9 3l-3 9H2" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-grow">
|
||||
<h2 className="text-gray-900 text-lg title-font font-medium mb-3">
|
||||
Shooting Stars
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine, ramps microdosing
|
||||
banh mi pug VHS try-hard.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 md:w-1/3 md:mb-0 mb-6 flex flex-col text-center items-center">
|
||||
<div className={`w-20 h-20 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-5 flex-shrink-0`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-10 h-10"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle cx="6" cy="6" r="3" />
|
||||
<circle cx="6" cy="18" r="3" />
|
||||
<path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-grow">
|
||||
<h2 className="text-gray-900 text-lg title-font font-medium mb-3">
|
||||
The Catalyzer
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine, ramps microdosing
|
||||
banh mi pug VHS try-hard.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 md:w-1/3 md:mb-0 mb-6 flex flex-col text-center items-center">
|
||||
<div className={`w-20 h-20 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-5 flex-shrink-0`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-10 h-10"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
|
||||
<circle cx="12" cy="7" r="4" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-grow">
|
||||
<h2 className="text-gray-900 text-lg title-font font-medium mb-3">
|
||||
Neptune
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine, ramps microdosing
|
||||
banh mi pug VHS try-hard.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button className={`flex mx-auto mt-16 text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
LightFeatureB.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightFeatureB.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightFeatureB;
|
||||
147
src/blocks/feature/light/c.js
Normal file
147
src/blocks/feature/light/c.js
Normal file
@@ -0,0 +1,147 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightFeatureC(props) {
|
||||
return (
|
||||
<section className="text-gray-700 body-font">
|
||||
<div className="container px-5 py-24 mx-auto flex flex-wrap">
|
||||
<div className="lg:w-1/2 w-full mb-10 lg:mb-0 rounded-lg overflow-hidden">
|
||||
<img
|
||||
alt="feature"
|
||||
className="object-cover object-center h-full w-full"
|
||||
src="https://dummyimage.com/460x500"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col flex-wrap lg:py-6 -mb-10 lg:w-1/2 lg:pl-12 lg:text-left text-center">
|
||||
<div className="flex flex-col mb-10 lg:items-start items-center">
|
||||
<div className={`w-12 h-12 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-5`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M22 12h-4l-3 9L9 3l-3 9H2" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-grow">
|
||||
<h2 className="text-gray-900 text-lg title-font font-medium mb-3">
|
||||
Shooting Stars
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col mb-10 lg:items-start items-center">
|
||||
<div className={`w-12 h-12 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-5`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle cx="6" cy="6" r="3" />
|
||||
<circle cx="6" cy="18" r="3" />
|
||||
<path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-grow">
|
||||
<h2 className="text-gray-900 text-lg title-font font-medium mb-3">
|
||||
The Catalyzer
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col mb-10 lg:items-start items-center">
|
||||
<div className={`w-12 h-12 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-5`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
|
||||
<circle cx="12" cy="7" r="4" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-grow">
|
||||
<h2 className="text-gray-900 text-lg title-font font-medium mb-3">
|
||||
Neptune
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
LightFeatureC.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightFeatureC.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightFeatureC;
|
||||
104
src/blocks/feature/light/d.js
Normal file
104
src/blocks/feature/light/d.js
Normal file
@@ -0,0 +1,104 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightFeatureD(props) {
|
||||
return (
|
||||
<section className="text-gray-700 body-font">
|
||||
<div className="container px-5 py-24 mx-auto flex flex-wrap">
|
||||
<div className="flex flex-wrap -m-4">
|
||||
<div className="p-4 lg:w-1/2 md:w-full">
|
||||
<div className="flex border-2 rounded-lg border-gray-200 p-8 sm:flex-row flex-col">
|
||||
<div className={`w-16 h-16 sm:mr-8 sm:mb-0 mb-4 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 flex-shrink-0`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-8 h-8"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M22 12h-4l-3 9L9 3l-3 9H2" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-grow">
|
||||
<h2 className="text-gray-900 text-lg title-font font-medium mb-3">
|
||||
Shooting Stars
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 lg:w-1/2 md:w-full">
|
||||
<div className="flex border-2 rounded-lg border-gray-200 p-8 sm:flex-row flex-col">
|
||||
<div className={`w-16 h-16 sm:mr-8 sm:mb-0 mb-4 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 flex-shrink-0`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-10 h-10"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
|
||||
<circle cx="12" cy="7" r="4" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-grow">
|
||||
<h2 className="text-gray-900 text-lg title-font font-medium mb-3">
|
||||
The Catalyzer
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
LightFeatureD.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightFeatureD.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightFeatureD;
|
||||
160
src/blocks/feature/light/e.js
Normal file
160
src/blocks/feature/light/e.js
Normal file
@@ -0,0 +1,160 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightFeatureE(props) {
|
||||
return (
|
||||
<section className="text-gray-700 body-font">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="flex flex-col text-center w-full mb-20">
|
||||
<h2 className={`text-xs text-${props.theme}-500 tracking-widest font-medium title-font mb-1`}>
|
||||
ROOF PARTY POLAROID
|
||||
</h2>
|
||||
<h1 className="sm:text-3xl text-2xl font-medium title-font text-gray-900">
|
||||
Master Cleanse Reliac Heirloom
|
||||
</h1>
|
||||
</div>
|
||||
<div className="flex flex-wrap -m-4">
|
||||
<div className="p-4 md:w-1/3">
|
||||
<div className="flex rounded-lg h-full bg-gray-100 p-8 flex-col">
|
||||
<div className="flex items-center mb-3">
|
||||
<div className={`w-8 h-8 mr-3 inline-flex items-center justify-center rounded-full bg-${props.theme}-500 text-white flex-shrink-0`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M22 12h-4l-3 9L9 3l-3 9H2" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className="text-gray-900 text-lg title-font font-medium">
|
||||
Shooting Stars
|
||||
</h2>
|
||||
</div>
|
||||
<div className="flex-grow">
|
||||
<p className="leading-relaxed text-base">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 md:w-1/3">
|
||||
<div className="flex rounded-lg h-full bg-gray-100 p-8 flex-col">
|
||||
<div className="flex items-center mb-3">
|
||||
<div className={`w-8 h-8 mr-3 inline-flex items-center justify-center rounded-full bg-${props.theme}-500 text-white flex-shrink-0`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
|
||||
<circle cx="12" cy="7" r="4" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className="text-gray-900 text-lg title-font font-medium">
|
||||
The Catalyzer
|
||||
</h2>
|
||||
</div>
|
||||
<div className="flex-grow">
|
||||
<p className="leading-relaxed text-base">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 md:w-1/3">
|
||||
<div className="flex rounded-lg h-full bg-gray-100 p-8 flex-col">
|
||||
<div className="flex items-center mb-3">
|
||||
<div className={`w-8 h-8 mr-3 inline-flex items-center justify-center rounded-full bg-${props.theme}-500 text-white flex-shrink-0`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle cx="6" cy="6" r="3" />
|
||||
<circle cx="6" cy="18" r="3" />
|
||||
<path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className="text-gray-900 text-lg title-font font-medium">
|
||||
Neptune
|
||||
</h2>
|
||||
</div>
|
||||
<div className="flex-grow">
|
||||
<p className="leading-relaxed text-base">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
LightFeatureE.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightFeatureE.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightFeatureE;
|
||||
141
src/blocks/feature/light/f.js
Normal file
141
src/blocks/feature/light/f.js
Normal file
@@ -0,0 +1,141 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightFeatureF(props) {
|
||||
return (
|
||||
<section className="text-gray-700 body-font">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="flex items-center lg:w-3/5 mx-auto border-b pb-10 mb-10 border-gray-200 sm:flex-row flex-col">
|
||||
<div className={`sm:w-32 sm:h-32 h-20 w-20 sm:mr-10 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 flex-shrink-0`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="sm:w-16 sm:h-16 w-10 h-10"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M22 12h-4l-3 9L9 3l-3 9H2" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-grow sm:text-left text-center mt-6 sm:mt-0">
|
||||
<h2 className="text-gray-900 text-lg title-font font-medium mb-2">
|
||||
Shooting Stars
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center lg:w-3/5 mx-auto border-b pb-10 mb-10 border-gray-200 sm:flex-row flex-col">
|
||||
<div className="flex-grow sm:text-left text-center mt-6 sm:mt-0">
|
||||
<h2 className="text-gray-900 text-lg title-font font-medium mb-2">
|
||||
The Catalyzer
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div className={`sm:w-32 sm:order-none order-first sm:h-32 h-20 w-20 sm:ml-10 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 flex-shrink-0`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="sm:w-16 sm:h-16 w-10 h-10"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle cx="6" cy="6" r="3" />
|
||||
<circle cx="6" cy="18" r="3" />
|
||||
<path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center lg:w-3/5 mx-auto sm:flex-row flex-col">
|
||||
<div className={`sm:w-32 sm:h-32 h-20 w-20 sm:mr-10 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 flex-shrink-0`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="sm:w-16 sm:h-16 w-10 h-10"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
|
||||
<circle cx="12" cy="7" r="4" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-grow sm:text-left text-center mt-6 sm:mt-0">
|
||||
<h2 className="text-gray-900 text-lg title-font font-medium mb-2">
|
||||
The 400 Blows
|
||||
</h2>
|
||||
<p className="leading-relaxed text-base">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<button className={`flex mx-auto mt-20 text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
LightFeatureF.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightFeatureF.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightFeatureF;
|
||||
148
src/blocks/feature/light/g.js
Normal file
148
src/blocks/feature/light/g.js
Normal file
@@ -0,0 +1,148 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightFeatureG(props) {
|
||||
return (
|
||||
<section className="text-gray-700 body-font">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="text-center mb-20">
|
||||
<h1 className="sm:text-3xl text-2xl font-medium text-center title-font text-gray-900 mb-4">
|
||||
Raw Denim Heirloom Man Braid
|
||||
</h1>
|
||||
<p className="text-base leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine, ramps microdosing banh mi
|
||||
pug.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap lg:w-4/5 sm:mx-auto sm:mb-2 -mx-2">
|
||||
<div className="p-2 sm:w-1/2 w-full">
|
||||
<div className="bg-gray-200 rounded flex p-4 h-full items-center">
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className={`text-${props.theme}-500 w-6 h-6 flex-shrink-0 mr-4`}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
|
||||
<path d="M22 4L12 14.01l-3-3" />
|
||||
</svg>
|
||||
<span className="title-font font-medium">
|
||||
Authentic Cliche Forage
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-2 sm:w-1/2 w-full">
|
||||
<div className="bg-gray-200 rounded flex p-4 h-full items-center">
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className={`text-${props.theme}-500 w-6 h-6 flex-shrink-0 mr-4`}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
|
||||
<path d="M22 4L12 14.01l-3-3" />
|
||||
</svg>
|
||||
<span className="title-font font-medium">
|
||||
Kinfolk Chips Snackwave
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-2 sm:w-1/2 w-full">
|
||||
<div className="bg-gray-200 rounded flex p-4 h-full items-center">
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className={`text-${props.theme}-500 w-6 h-6 flex-shrink-0 mr-4`}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
|
||||
<path d="M22 4L12 14.01l-3-3" />
|
||||
</svg>
|
||||
<span className="title-font font-medium">
|
||||
Coloring Book Ethical
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-2 sm:w-1/2 w-full">
|
||||
<div className="bg-gray-200 rounded flex p-4 h-full items-center">
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className={`text-${props.theme}-500 w-6 h-6 flex-shrink-0 mr-4`}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
|
||||
<path d="M22 4L12 14.01l-3-3" />
|
||||
</svg>
|
||||
<span className="title-font font-medium">
|
||||
Typewriter Polaroid Cray
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-2 sm:w-1/2 w-full">
|
||||
<div className="bg-gray-200 rounded flex p-4 h-full items-center">
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className={`text-${props.theme}-500 w-6 h-6 flex-shrink-0 mr-4`}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
|
||||
<path d="M22 4L12 14.01l-3-3" />
|
||||
</svg>
|
||||
<span className="title-font font-medium">Pack Truffaut Blue</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-2 sm:w-1/2 w-full">
|
||||
<div className="bg-gray-200 rounded flex p-4 h-full items-center">
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className={`text-${props.theme}-500 w-6 h-6 flex-shrink-0 mr-4`}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
|
||||
<path d="M22 4L12 14.01l-3-3" />
|
||||
</svg>
|
||||
<span className="title-font font-medium">
|
||||
The Catcher In The Rye
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button className={`flex mx-auto mt-16 text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
LightFeatureG.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightFeatureG.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightFeatureG;
|
||||
384
src/blocks/feature/light/h.js
Normal file
384
src/blocks/feature/light/h.js
Normal file
@@ -0,0 +1,384 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightFeatureH(props) {
|
||||
return (
|
||||
<section className="text-gray-700 body-font">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="text-center mb-20">
|
||||
<h1 className="sm:text-3xl text-2xl font-medium text-center title-font text-gray-900 mb-4">
|
||||
Raw Denim Heirloom Man Braid
|
||||
</h1>
|
||||
<p className="text-base leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto">
|
||||
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
|
||||
taxidermy. Gastropub indxgo juice poutine, ramps microdosing banh mi
|
||||
pug.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap -m-4">
|
||||
<div className="p-4 lg:w-1/4 sm:w-1/2 w-full">
|
||||
<h2 className="font-medium title-font tracking-widest text-gray-900 mb-4 text-sm text-center sm:text-left">
|
||||
SHOOTING STARS
|
||||
</h2>
|
||||
<nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1">
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
First Link
|
||||
</a>
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
Second Link
|
||||
</a>
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
Third Link
|
||||
</a>
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
Fourth Link
|
||||
</a>
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
Fifth Link
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="p-4 lg:w-1/4 sm:w-1/2 w-full">
|
||||
<h2 className="font-medium title-font tracking-widest text-gray-900 mb-4 text-sm text-center sm:text-left">
|
||||
THE 400 BLOWS
|
||||
</h2>
|
||||
<nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1">
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
First Link
|
||||
</a>
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
Second Link
|
||||
</a>
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
Third Link
|
||||
</a>
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
Fourth Link
|
||||
</a>
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
Fifth Link
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="p-4 lg:w-1/4 sm:w-1/2 w-full">
|
||||
<h2 className="font-medium title-font tracking-widest text-gray-900 mb-4 text-sm text-center sm:text-left">
|
||||
THE CATALYZER
|
||||
</h2>
|
||||
<nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1">
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
First Link
|
||||
</a>
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
Second Link
|
||||
</a>
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
Third Link
|
||||
</a>
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
Fourth Link
|
||||
</a>
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
Fifth Link
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="p-4 lg:w-1/4 sm:w-1/2 w-full">
|
||||
<h2 className="font-medium title-font tracking-widest text-gray-900 mb-4 text-sm text-center sm:text-left">
|
||||
NEPTUNE
|
||||
</h2>
|
||||
<nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1">
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
First Link
|
||||
</a>
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
Second Link
|
||||
</a>
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
Third Link
|
||||
</a>
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
Fourth Link
|
||||
</a>
|
||||
<a href className="mb-2">
|
||||
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="3"
|
||||
className="w-3 h-3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
Fifth Link
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<button className={`flex mx-auto mt-16 text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
LightFeatureH.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightFeatureH.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightFeatureH;
|
||||
186
src/blocks/footer/dark/a.js
Normal file
186
src/blocks/footer/dark/a.js
Normal file
@@ -0,0 +1,186 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkFooterA(props) {
|
||||
return (
|
||||
<footer className="text-gray-500 bg-gray-900 body-font">
|
||||
<div className="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-no-wrap flex-wrap flex-col">
|
||||
<div className="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left">
|
||||
<a href className="flex title-font font-medium items-center md:justify-start justify-center text-white">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className={`w-10 h-10 text-white p-2 bg-${props.theme}-500 rounded-full`}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
|
||||
</svg>
|
||||
<span className="ml-3 text-xl">madde</span>
|
||||
</a>
|
||||
<p className="mt-2 text-sm text-gray-700">
|
||||
Air plant banjo lyft occupy retro adaptogen indego
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center">
|
||||
<div className="lg:w-1/4 md:w-1/2 w-full px-4">
|
||||
<h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
|
||||
CATEGORIES
|
||||
</h2>
|
||||
<nav className="list-none mb-10">
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">First Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Second Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Third Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Fourth Link</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="lg:w-1/4 md:w-1/2 w-full px-4">
|
||||
<h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
|
||||
CATEGORIES
|
||||
</h2>
|
||||
<nav className="list-none mb-10">
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">First Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Second Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Third Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Fourth Link</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="lg:w-1/4 md:w-1/2 w-full px-4">
|
||||
<h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
|
||||
CATEGORIES
|
||||
</h2>
|
||||
<nav className="list-none mb-10">
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">First Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Second Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Third Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Fourth Link</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="lg:w-1/4 md:w-1/2 w-full px-4">
|
||||
<h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
|
||||
CATEGORIES
|
||||
</h2>
|
||||
<nav className="list-none mb-10">
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">First Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Second Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Third Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Fourth Link</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gray-800">
|
||||
<div className="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
|
||||
<p className="text-gray-600 text-sm text-center sm:text-left">
|
||||
© 2020 madde —
|
||||
<a href="https://twitter.com/knyttneve" rel="noopener noreferrer" className="text-gray-500 ml-1" target="_blank">
|
||||
@knyttneve
|
||||
</a>
|
||||
</p>
|
||||
<span className="inline-flex sm:ml-auto sm:mt-0 mt-2 justify-center sm:justify-start">
|
||||
<a href className="text-gray-600">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-3 text-gray-600">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-3 text-gray-600">
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
|
||||
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-3 text-gray-600">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="0"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke="none"
|
||||
d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"
|
||||
/>
|
||||
<circle cx="4" cy="4" r="2" stroke="none" />
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
DarkFooterA.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkFooterA.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkFooterA;
|
||||
186
src/blocks/footer/dark/b.js
Normal file
186
src/blocks/footer/dark/b.js
Normal file
@@ -0,0 +1,186 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkFooterB(props) {
|
||||
return (
|
||||
<footer className="text-gray-500 bg-gray-900 body-font">
|
||||
<div className="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-no-wrap flex-wrap flex-col">
|
||||
<div className="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left md:mt-0 mt-10">
|
||||
<a href className="flex title-font font-medium items-center md:justify-start justify-center text-white">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className={`w-10 h-10 text-white p-2 bg-${props.theme}-500 rounded-full`}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
|
||||
</svg>
|
||||
<span className="ml-3 text-xl">madde</span>
|
||||
</a>
|
||||
<p className="mt-2 text-sm text-gray-700">
|
||||
Air plant banjo lyft occupy retro adaptogen indego
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex-grow flex flex-wrap md:pr-20 -mb-10 md:text-left text-center order-first">
|
||||
<div className="lg:w-1/4 md:w-1/2 w-full px-4">
|
||||
<h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
|
||||
CATEGORIES
|
||||
</h2>
|
||||
<nav className="list-none mb-10">
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">First Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Second Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Third Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Fourth Link</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="lg:w-1/4 md:w-1/2 w-full px-4">
|
||||
<h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
|
||||
CATEGORIES
|
||||
</h2>
|
||||
<nav className="list-none mb-10">
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">First Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Second Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Third Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Fourth Link</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="lg:w-1/4 md:w-1/2 w-full px-4">
|
||||
<h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
|
||||
CATEGORIES
|
||||
</h2>
|
||||
<nav className="list-none mb-10">
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">First Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Second Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Third Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Fourth Link</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="lg:w-1/4 md:w-1/2 w-full px-4">
|
||||
<h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
|
||||
CATEGORIES
|
||||
</h2>
|
||||
<nav className="list-none mb-10">
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">First Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Second Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Third Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Fourth Link</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gray-800">
|
||||
<div className="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
|
||||
<p className="text-gray-600 text-sm text-center sm:text-left">
|
||||
© 2020 madde —
|
||||
<a href="https://twitter.com/knyttneve" className="text-gray-500 ml-1" rel="noopener noreferrer" target="_blank">
|
||||
@knyttneve
|
||||
</a>
|
||||
</p>
|
||||
<span className="inline-flex sm:ml-auto sm:mt-0 mt-2 justify-center sm:justify-start">
|
||||
<a href className="text-gray-600">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-3 text-gray-600">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-3 text-gray-600">
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
|
||||
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-3 text-gray-600">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="0"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke="none"
|
||||
d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"
|
||||
/>
|
||||
<circle cx="4" cy="4" r="2" stroke="none" />
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
DarkFooterB.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkFooterB.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkFooterB;
|
||||
225
src/blocks/footer/dark/c.js
Normal file
225
src/blocks/footer/dark/c.js
Normal file
@@ -0,0 +1,225 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkFooterC(props) {
|
||||
return (
|
||||
<footer className="text-gray-500 bg-gray-900 body-font">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="flex flex-wrap md:text-left text-center -mb-10 -mx-4">
|
||||
<div className="lg:w-1/6 md:w-1/2 w-full px-4">
|
||||
<h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
|
||||
CATEGORIES
|
||||
</h2>
|
||||
<nav className="list-none mb-10">
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">First Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Second Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Third Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Fourth Link</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="lg:w-1/6 md:w-1/2 w-full px-4">
|
||||
<h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
|
||||
CATEGORIES
|
||||
</h2>
|
||||
<nav className="list-none mb-10">
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">First Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Second Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Third Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Fourth Link</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="lg:w-1/6 md:w-1/2 w-full px-4">
|
||||
<h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
|
||||
CATEGORIES
|
||||
</h2>
|
||||
<nav className="list-none mb-10">
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">First Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Second Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Third Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Fourth Link</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="lg:w-1/6 md:w-1/2 w-full px-4">
|
||||
<h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
|
||||
CATEGORIES
|
||||
</h2>
|
||||
<nav className="list-none mb-10">
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">First Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Second Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Third Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Fourth Link</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="lg:w-1/6 md:w-1/2 w-full px-4">
|
||||
<h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
|
||||
CATEGORIES
|
||||
</h2>
|
||||
<nav className="list-none mb-10">
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">First Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Second Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Third Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Fourth Link</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="lg:w-1/6 md:w-1/2 w-full px-4">
|
||||
<h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
|
||||
CATEGORIES
|
||||
</h2>
|
||||
<nav className="list-none mb-10">
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">First Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Second Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Third Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Fourth Link</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t border-gray-800">
|
||||
<div className="container px-5 py-8 flex flex-wrap mx-auto items-center">
|
||||
<div className="flex md:flex-no-wrap flex-wrap justify-center md:justify-start">
|
||||
<input
|
||||
className={`sm:w-64 w-40 bg-gray-800 rounded sm:mr-4 mr-2 border border-gray-700 text-white focus:outline-none focus:border-${props.theme}-500 text-base py-2 px-4`}
|
||||
placeholder="Placeholder"
|
||||
type="text"
|
||||
></input>
|
||||
<button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
|
||||
Button
|
||||
</button>
|
||||
<p className="text-gray-600 text-sm md:ml-6 md:mt-0 mt-2 text-center sm:text-left">
|
||||
Bitters chicharrones fanny pack
|
||||
<br className="lg:block hidden"></br>waistcoat green juice
|
||||
</p>
|
||||
</div>
|
||||
<span className="inline-flex lg:ml-auto lg:mt-0 mt-6 w-full justify-center md:justify-start md:w-auto">
|
||||
<a href className="text-gray-600">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-3 text-gray-600">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-3 text-gray-600">
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
|
||||
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-3 text-gray-600">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="0"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke="none"
|
||||
d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"
|
||||
/>
|
||||
<circle cx="4" cy="4" r="2" stroke="none" />
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gray-800">
|
||||
<div className="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
|
||||
<p className="text-gray-600 text-sm text-center sm:text-left">
|
||||
© 2020 madde —
|
||||
<a href="https://twitter.com/knyttneve" className="text-gray-500 ml-1" target="_blank" rel="noopener noreferrer">
|
||||
@knyttneve
|
||||
</a>
|
||||
</p>
|
||||
<span className="sm:ml-auto sm:mt-0 mt-2 sm:w-auto w-full sm:text-left text-center text-gray-600 text-sm">
|
||||
Enamel pin tousled raclette tacos irony
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
DarkFooterC.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkFooterC.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkFooterC;
|
||||
99
src/blocks/footer/dark/d.js
Normal file
99
src/blocks/footer/dark/d.js
Normal file
@@ -0,0 +1,99 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkFooterD(props) {
|
||||
return (
|
||||
<footer className="text-gray-500 bg-gray-900 body-font">
|
||||
<div className="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col">
|
||||
<a href className="flex title-font font-medium items-center md:justify-start justify-center text-white">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className={`w-10 h-10 text-white p-2 bg-${props.theme}-500 rounded-full`}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
|
||||
</svg>
|
||||
<span class="ml-3 text-xl">madde</span>
|
||||
</a>
|
||||
<p className="text-sm text-gray-600 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-800 sm:py-2 sm:mt-0 mt-4">
|
||||
© 2020 madde —
|
||||
<a href="https://twitter.com/knyttneve" className="text-gray-500 ml-1" target="_blank" rel="noopener noreferrer">
|
||||
@knyttneve
|
||||
</a>
|
||||
</p>
|
||||
<span className="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
|
||||
<a href className="text-gray-600">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-3 text-gray-600">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-3 text-gray-600">
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
|
||||
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-3 text-gray-600">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="0"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke="none"
|
||||
d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"
|
||||
/>
|
||||
<circle cx="4" cy="4" r="2" stroke="none" />
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
DarkFooterD.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkFooterD.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkFooterD;
|
||||
181
src/blocks/footer/dark/e.js
Normal file
181
src/blocks/footer/dark/e.js
Normal file
@@ -0,0 +1,181 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkFooterE(props) {
|
||||
return (
|
||||
<footer className="text-gray-500 bg-gray-900 body-font">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="flex flex-wrap md:text-left text-center order-first">
|
||||
<div className="lg:w-1/4 md:w-1/2 w-full px-4">
|
||||
<h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
|
||||
CATEGORIES
|
||||
</h2>
|
||||
<nav className="list-none mb-10">
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">First Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Second Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Third Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Fourth Link</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="lg:w-1/4 md:w-1/2 w-full px-4">
|
||||
<h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
|
||||
CATEGORIES
|
||||
</h2>
|
||||
<nav className="list-none mb-10">
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">First Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Second Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Third Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Fourth Link</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="lg:w-1/4 md:w-1/2 w-full px-4">
|
||||
<h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
|
||||
CATEGORIES
|
||||
</h2>
|
||||
<nav className="list-none mb-10">
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">First Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Second Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Third Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-white">Fourth Link</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="lg:w-1/4 md:w-1/2 w-full px-4">
|
||||
<h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
|
||||
SUBSCRIBE
|
||||
</h2>
|
||||
<div className="flex xl:flex-no-wrap md:flex-no-wrap lg:flex-wrap flex-wrap justify-center md:justify-start">
|
||||
<input
|
||||
className={`w-40 sm:w-auto bg-gray-800 rounded text-white xl:mr-4 lg:mr-0 sm:mr-4 mr-2 border border-gray-700 focus:outline-none focus:border-${props.theme}-500 text-base py-2 px-4`}
|
||||
placeholder="Placeholder"
|
||||
type="text"
|
||||
></input>
|
||||
<button className={`lg:mt-2 xl:mt-0 flex-shrink-0 inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-gray-600 text-sm mt-2 md:text-left text-center">
|
||||
Bitters chicharrones fanny pack
|
||||
<br className="lg:block hidden"></br>waistcoat green juice
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gray-800">
|
||||
<div className="container px-5 py-6 mx-auto flex items-center sm:flex-row flex-col">
|
||||
<a href className="flex title-font font-medium items-center md:justify-start justify-center text-white">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className={`w-10 h-10 text-white p-2 bg-${props.theme}-500 rounded-full`}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
|
||||
</svg>
|
||||
<span class="ml-3 text-xl">madde</span>
|
||||
</a>
|
||||
<p className="text-sm text-gray-600 sm:ml-6 sm:mt-0 mt-4">
|
||||
© 2020 madde —
|
||||
<a href="https://twitter.com/knyttneve" className="text-gray-500 ml-1" target="_blank" rel="noopener noreferrer">
|
||||
@knyttneve
|
||||
</a>
|
||||
</p>
|
||||
<span className="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
|
||||
<a href className="text-gray-600">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-3 text-gray-600">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-3 text-gray-600">
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
|
||||
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-3 text-gray-600">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="0"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke="none"
|
||||
d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"
|
||||
/>
|
||||
<circle cx="4" cy="4" r="2" stroke="none" />
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
DarkFooterE.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkFooterE.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkFooterE;
|
||||
186
src/blocks/footer/light/a.js
Normal file
186
src/blocks/footer/light/a.js
Normal file
@@ -0,0 +1,186 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightFooterA(props) {
|
||||
return (
|
||||
<footer className="text-gray-700 body-font">
|
||||
<div className="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-no-wrap flex-wrap flex-col">
|
||||
<div className="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left">
|
||||
<a href className="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className={`w-10 h-10 text-white p-2 bg-${props.theme}-500 rounded-full`}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
|
||||
</svg>
|
||||
<span className="ml-3 text-xl">madde</span>
|
||||
</a>
|
||||
<p className="mt-2 text-sm text-gray-500">
|
||||
Air plant banjo lyft occupy retro adaptogen indego
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center">
|
||||
<div className="lg:w-1/4 md:w-1/2 w-full px-4">
|
||||
<h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
|
||||
CATEGORIES
|
||||
</h2>
|
||||
<nav className="list-none mb-10">
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">First Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Second Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Third Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Fourth Link</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="lg:w-1/4 md:w-1/2 w-full px-4">
|
||||
<h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
|
||||
CATEGORIES
|
||||
</h2>
|
||||
<nav className="list-none mb-10">
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">First Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Second Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Third Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Fourth Link</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="lg:w-1/4 md:w-1/2 w-full px-4">
|
||||
<h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
|
||||
CATEGORIES
|
||||
</h2>
|
||||
<nav className="list-none mb-10">
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">First Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Second Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Third Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Fourth Link</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="lg:w-1/4 md:w-1/2 w-full px-4">
|
||||
<h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
|
||||
CATEGORIES
|
||||
</h2>
|
||||
<nav className="list-none mb-10">
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">First Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Second Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Third Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Fourth Link</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gray-200">
|
||||
<div className="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
|
||||
<p className="text-gray-500 text-sm text-center sm:text-left">
|
||||
© 2020 madde —
|
||||
<a href="https://twitter.com/knyttneve" rel="noopener noreferrer" className="text-gray-600 ml-1" target="_blank">
|
||||
@knyttneve
|
||||
</a>
|
||||
</p>
|
||||
<span className="inline-flex sm:ml-auto sm:mt-0 mt-2 justify-center sm:justify-start">
|
||||
<a href className="text-gray-500">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-3 text-gray-500">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-3 text-gray-500">
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
|
||||
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-3 text-gray-500">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="0"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke="none"
|
||||
d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"
|
||||
/>
|
||||
<circle cx="4" cy="4" r="2" stroke="none" />
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
LightFooterA.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightFooterA.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightFooterA;
|
||||
186
src/blocks/footer/light/b.js
Normal file
186
src/blocks/footer/light/b.js
Normal file
@@ -0,0 +1,186 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightFooterB(props) {
|
||||
return (
|
||||
<footer className="text-gray-700 body-font">
|
||||
<div className="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-no-wrap flex-wrap flex-col">
|
||||
<div className="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left md:mt-0 mt-10">
|
||||
<a href className="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className={`w-10 h-10 text-white p-2 bg-${props.theme}-500 rounded-full`}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
|
||||
</svg>
|
||||
<span className="ml-3 text-xl">madde</span>
|
||||
</a>
|
||||
<p className="mt-2 text-sm text-gray-500">
|
||||
Air plant banjo lyft occupy retro adaptogen indego
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex-grow flex flex-wrap md:pr-20 -mb-10 md:text-left text-center order-first">
|
||||
<div className="lg:w-1/4 md:w-1/2 w-full px-4">
|
||||
<h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
|
||||
CATEGORIES
|
||||
</h2>
|
||||
<nav className="list-none mb-10">
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">First Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Second Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Third Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Fourth Link</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="lg:w-1/4 md:w-1/2 w-full px-4">
|
||||
<h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
|
||||
CATEGORIES
|
||||
</h2>
|
||||
<nav className="list-none mb-10">
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">First Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Second Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Third Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Fourth Link</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="lg:w-1/4 md:w-1/2 w-full px-4">
|
||||
<h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
|
||||
CATEGORIES
|
||||
</h2>
|
||||
<nav className="list-none mb-10">
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">First Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Second Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Third Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Fourth Link</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="lg:w-1/4 md:w-1/2 w-full px-4">
|
||||
<h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
|
||||
CATEGORIES
|
||||
</h2>
|
||||
<nav className="list-none mb-10">
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">First Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Second Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Third Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Fourth Link</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gray-200">
|
||||
<div className="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
|
||||
<p className="text-gray-500 text-sm text-center sm:text-left">
|
||||
© 2020 madde —
|
||||
<a href="https://twitter.com/knyttneve" rel="noopener noreferrer" className="text-gray-600 ml-1" target="_blank">
|
||||
@knyttneve
|
||||
</a>
|
||||
</p>
|
||||
<span className="inline-flex sm:ml-auto sm:mt-0 mt-2 justify-center sm:justify-start">
|
||||
<a href className="text-gray-500">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-3 text-gray-500">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-3 text-gray-500">
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
|
||||
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-3 text-gray-500">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="0"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke="none"
|
||||
d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"
|
||||
/>
|
||||
<circle cx="4" cy="4" r="2" stroke="none" />
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
LightFooterB.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightFooterB.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightFooterB;
|
||||
225
src/blocks/footer/light/c.js
Normal file
225
src/blocks/footer/light/c.js
Normal file
@@ -0,0 +1,225 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightFooterC(props) {
|
||||
return (
|
||||
<footer className="text-gray-700 body-font">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="flex flex-wrap md:text-left text-center -mb-10 -mx-4">
|
||||
<div className="lg:w-1/6 md:w-1/2 w-full px-4">
|
||||
<h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
|
||||
CATEGORIES
|
||||
</h2>
|
||||
<nav className="list-none mb-10">
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">First Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Second Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Third Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Fourth Link</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="lg:w-1/6 md:w-1/2 w-full px-4">
|
||||
<h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
|
||||
CATEGORIES
|
||||
</h2>
|
||||
<nav className="list-none mb-10">
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">First Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Second Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Third Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Fourth Link</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="lg:w-1/6 md:w-1/2 w-full px-4">
|
||||
<h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
|
||||
CATEGORIES
|
||||
</h2>
|
||||
<nav className="list-none mb-10">
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">First Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Second Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Third Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Fourth Link</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="lg:w-1/6 md:w-1/2 w-full px-4">
|
||||
<h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
|
||||
CATEGORIES
|
||||
</h2>
|
||||
<nav className="list-none mb-10">
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">First Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Second Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Third Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Fourth Link</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="lg:w-1/6 md:w-1/2 w-full px-4">
|
||||
<h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
|
||||
CATEGORIES
|
||||
</h2>
|
||||
<nav className="list-none mb-10">
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">First Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Second Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Third Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Fourth Link</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="lg:w-1/6 md:w-1/2 w-full px-4">
|
||||
<h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
|
||||
CATEGORIES
|
||||
</h2>
|
||||
<nav className="list-none mb-10">
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">First Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Second Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Third Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Fourth Link</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t border-gray-200">
|
||||
<div className="container px-5 py-8 flex flex-wrap mx-auto items-center">
|
||||
<div className="flex md:flex-no-wrap flex-wrap justify-center md:justify-start">
|
||||
<input
|
||||
className={`sm:w-64 w-40 bg-gray-100 rounded sm:mr-4 mr-2 border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base py-2 px-4`}
|
||||
placeholder="Placeholder"
|
||||
type="text"
|
||||
/>
|
||||
<button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
|
||||
Button
|
||||
</button>
|
||||
<p className="text-gray-500 text-sm md:ml-6 md:mt-0 mt-2 sm:text-left text-center">
|
||||
Bitters chicharrones fanny pack
|
||||
<br className="lg:block hidden"></br>waistcoat green juice
|
||||
</p>
|
||||
</div>
|
||||
<span className="inline-flex lg:ml-auto lg:mt-0 mt-6 w-full justify-center md:justify-start md:w-auto">
|
||||
<a href className="text-gray-500">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-3 text-gray-500">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-3 text-gray-500">
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
|
||||
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-3 text-gray-500">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="0"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke="none"
|
||||
d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"
|
||||
/>
|
||||
<circle cx="4" cy="4" r="2" stroke="none" />
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gray-200">
|
||||
<div className="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
|
||||
<p className="text-gray-500 text-sm text-center sm:text-left">
|
||||
© 2020 madde —
|
||||
<a href="https://twitter.com/knyttneve" className="text-gray-600 ml-1" target="_blank" rel="noopener noreferrer">
|
||||
@knyttneve
|
||||
</a>
|
||||
</p>
|
||||
<span className="sm:ml-auto sm:mt-0 mt-2 sm:w-auto w-full sm:text-left text-center text-gray-500 text-sm">
|
||||
Enamel pin tousled raclette tacos irony
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
LightFooterC.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightFooterC.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightFooterC;
|
||||
99
src/blocks/footer/light/d.js
Normal file
99
src/blocks/footer/light/d.js
Normal file
@@ -0,0 +1,99 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightFooterD(props) {
|
||||
return (
|
||||
<footer className="text-gray-700 body-font">
|
||||
<div className="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col">
|
||||
<a href className="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className={`w-10 h-10 text-white p-2 bg-${props.theme}-500 rounded-full`}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
|
||||
</svg>
|
||||
<span class="ml-3 text-xl">madde</span>
|
||||
</a>
|
||||
<p className="text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-200 sm:py-2 sm:mt-0 mt-4">
|
||||
© 2020 madde —
|
||||
<a href="https://twitter.com/knyttneve" className="text-gray-600 ml-1" rel="noopener noreferrer" target="_blank">
|
||||
@knyttneve
|
||||
</a>
|
||||
</p>
|
||||
<span className="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
|
||||
<a href className="text-gray-500">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-3 text-gray-500">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-3 text-gray-500">
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
|
||||
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-3 text-gray-500">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="0"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke="none"
|
||||
d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"
|
||||
/>
|
||||
<circle cx="4" cy="4" r="2" stroke="none" />
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
LightFooterD.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightFooterD.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightFooterD;
|
||||
181
src/blocks/footer/light/e.js
Normal file
181
src/blocks/footer/light/e.js
Normal file
@@ -0,0 +1,181 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightFooterE(props) {
|
||||
return (
|
||||
<footer className="text-gray-700 body-font">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="flex flex-wrap md:text-left text-center order-first">
|
||||
<div className="lg:w-1/4 md:w-1/2 w-full px-4">
|
||||
<h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
|
||||
CATEGORIES
|
||||
</h2>
|
||||
<nav className="list-none mb-10">
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">First Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Second Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Third Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Fourth Link</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="lg:w-1/4 md:w-1/2 w-full px-4">
|
||||
<h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
|
||||
CATEGORIES
|
||||
</h2>
|
||||
<nav className="list-none mb-10">
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">First Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Second Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Third Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Fourth Link</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="lg:w-1/4 md:w-1/2 w-full px-4">
|
||||
<h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
|
||||
CATEGORIES
|
||||
</h2>
|
||||
<nav className="list-none mb-10">
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">First Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Second Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Third Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href className="text-gray-600 hover:text-gray-800">Fourth Link</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="lg:w-1/4 md:w-1/2 w-full px-4">
|
||||
<h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
|
||||
SUBSCRIBE
|
||||
</h2>
|
||||
<div className="flex xl:flex-no-wrap md:flex-no-wrap lg:flex-wrap flex-wrap justify-center md:justify-start">
|
||||
<input
|
||||
className={`w-40 sm:w-auto bg-gray-100 rounded xl:mr-4 lg:mr-0 sm:mr-4 mr-2 border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base py-2 px-4`}
|
||||
placeholder="Placeholder"
|
||||
type="text"
|
||||
></input>
|
||||
<button className={`lg:mt-2 xl:mt-0 flex-shrink-0 inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-gray-500 text-sm mt-2 md:text-left text-center">
|
||||
Bitters chicharrones fanny pack
|
||||
<br className="lg:block hidden"></br>waistcoat green juice
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gray-200">
|
||||
<div className="container px-5 py-6 mx-auto flex items-center sm:flex-row flex-col">
|
||||
<a href className="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className={`w-10 h-10 text-white p-2 bg-${props.theme}-500 rounded-full`}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
|
||||
</svg>
|
||||
<span class="ml-3 text-xl">madde</span>
|
||||
</a>
|
||||
<p className="text-sm text-gray-500 sm:ml-6 sm:mt-0 mt-4">
|
||||
© 2020 madde —
|
||||
<a href="https://twitter.com/knyttneve" rel="noopener noreferrer" className="text-gray-600 ml-1" target="_blank">
|
||||
@knyttneve
|
||||
</a>
|
||||
</p>
|
||||
<span className="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
|
||||
<a href className="text-gray-500">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-3 text-gray-500">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-3 text-gray-500">
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
|
||||
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href className="ml-3 text-gray-500">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="0"
|
||||
className="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke="none"
|
||||
d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"
|
||||
/>
|
||||
<circle cx="4" cy="4" r="2" stroke="none" />
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
LightFooterE.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightFooterE.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightFooterE;
|
||||
70
src/blocks/gallery/dark/a.js
Normal file
70
src/blocks/gallery/dark/a.js
Normal file
@@ -0,0 +1,70 @@
|
||||
import React from "react";
|
||||
|
||||
function DarkGalleryA() {
|
||||
return (
|
||||
<section className="text-gray-500 bg-gray-900 body-font">
|
||||
<div className="container px-5 py-24 mx-auto flex flex-wrap">
|
||||
<div className="flex w-full mb-20 flex-wrap">
|
||||
<h1 className="sm:text-3xl text-2xl font-medium title-font text-white lg:w-1/3 lg:mb-0 mb-4">
|
||||
Master Cleanse Reliac Heirloom
|
||||
</h1>
|
||||
<p className="lg:pl-6 lg:w-2/3 mx-auto leading-relaxed text-base">
|
||||
Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical
|
||||
gentrify, subway tile poke farm-to-table. Franzen you probably
|
||||
haven't heard of them man bun deep jianbing selfies heirloom.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap md:-m-2 -m-1">
|
||||
<div className="flex flex-wrap w-1/2">
|
||||
<div className="md:p-2 p-1 w-1/2">
|
||||
<img
|
||||
alt="gallery"
|
||||
className="w-full object-cover h-full object-center block"
|
||||
src="https://dummyimage.com/500x300"
|
||||
/>
|
||||
</div>
|
||||
<div className="md:p-2 p-1 w-1/2">
|
||||
<img
|
||||
alt="gallery"
|
||||
className="w-full object-cover h-full object-center block"
|
||||
src="https://dummyimage.com/501x301"
|
||||
/>
|
||||
</div>
|
||||
<div className="md:p-2 p-1 w-full">
|
||||
<img
|
||||
alt="gallery"
|
||||
className="w-full h-full object-cover object-center block"
|
||||
src="https://dummyimage.com/600x360"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap w-1/2">
|
||||
<div className="md:p-2 p-1 w-full">
|
||||
<img
|
||||
alt="gallery"
|
||||
className="w-full h-full object-cover object-center block"
|
||||
src="https://dummyimage.com/601x361"
|
||||
/>
|
||||
</div>
|
||||
<div className="md:p-2 p-1 w-1/2">
|
||||
<img
|
||||
alt="gallery"
|
||||
className="w-full object-cover h-full object-center block"
|
||||
src="https://dummyimage.com/502x302"
|
||||
/>
|
||||
</div>
|
||||
<div className="md:p-2 p-1 w-1/2">
|
||||
<img
|
||||
alt="gallery"
|
||||
className="w-full object-cover h-full object-center block"
|
||||
src="https://dummyimage.com/503x303"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default DarkGalleryA;
|
||||
116
src/blocks/gallery/dark/b.js
Normal file
116
src/blocks/gallery/dark/b.js
Normal file
@@ -0,0 +1,116 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkGalleryB(props) {
|
||||
return (
|
||||
<section className="text-gray-400 bg-gray-900 body-font">
|
||||
<div className="container px-5 py-24 mx-auto flex flex-wrap">
|
||||
<div className="lg:w-2/3 mx-auto">
|
||||
<div className="flex flex-wrap w-full bg-gray-800 py-32 px-10 relative mb-4">
|
||||
<img
|
||||
alt="gallery"
|
||||
className="w-full object-cover h-full object-center block opacity-25 absolute inset-0"
|
||||
src="https://dummyimage.com/820x340"
|
||||
/>
|
||||
<div className="text-center relative z-10 w-full">
|
||||
<h2 className="text-2xl text-white font-medium title-font mb-2">
|
||||
Shooting Stars
|
||||
</h2>
|
||||
<p className="leading-relaxed">
|
||||
Skateboard +1 mustache fixie paleo lumbersexual.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-300 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap -mx-2">
|
||||
<div className="px-2 w-1/2">
|
||||
<div className="flex flex-wrap w-full bg-gray-800 sm:py-24 py-16 sm:px-10 px-6 relative">
|
||||
<img
|
||||
alt="gallery"
|
||||
className="w-full object-cover h-full object-center block opacity-25 absolute inset-0"
|
||||
src="https://dummyimage.com/542x460"
|
||||
/>
|
||||
<div className="text-center relative z-10 w-full">
|
||||
<h2 className="text-xl text-white font-medium title-font mb-2">
|
||||
Shooting Stars
|
||||
</h2>
|
||||
<p className="leading-relaxed">
|
||||
Skateboard +1 mustache fixie paleo lumbersexual.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-300 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-2 w-1/2">
|
||||
<div className="flex flex-wrap w-full bg-gray-800 sm:py-24 py-16 sm:px-10 px-6 relative">
|
||||
<img
|
||||
alt="gallery"
|
||||
className="w-full object-cover h-full object-center block opacity-25 absolute inset-0"
|
||||
src="https://dummyimage.com/542x420"
|
||||
/>
|
||||
<div className="text-center relative z-10 w-full">
|
||||
<h2 className="text-xl text-white font-medium title-font mb-2">
|
||||
Shooting Stars
|
||||
</h2>
|
||||
<p className="leading-relaxed">
|
||||
Skateboard +1 mustache fixie paleo lumbersexual.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-300 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
DarkGalleryB.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkGalleryB.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkGalleryB;
|
||||
159
src/blocks/gallery/dark/c.js
Normal file
159
src/blocks/gallery/dark/c.js
Normal file
@@ -0,0 +1,159 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkGalleryC(props) {
|
||||
return (
|
||||
<section className="text-gray-500 bg-gray-900 body-font">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="flex flex-col text-center w-full mb-20">
|
||||
<h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">
|
||||
Master Cleanse Reliac Heirloom
|
||||
</h1>
|
||||
<p className="lg:w-2/3 mx-auto leading-relaxed text-base">
|
||||
Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical
|
||||
gentrify, subway tile poke farm-to-table. Franzen you probably
|
||||
haven't heard of them man bun deep jianbing selfies heirloom.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap -m-4">
|
||||
<div className="lg:w-1/3 sm:w-1/2 p-4">
|
||||
<div className="flex relative">
|
||||
<img
|
||||
alt="gallery"
|
||||
className="absolute inset-0 w-full h-full object-cover object-center"
|
||||
src="https://dummyimage.com/600x360"
|
||||
/>
|
||||
<div className="px-8 py-10 relative z-10 w-full border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
|
||||
<h2 className={`tracking-widest text-sm title-font font-medium text-${props.theme}-500 mb-1`}>
|
||||
THE SUBTITLE
|
||||
</h2>
|
||||
<h1 className="title-font text-lg font-medium text-white mb-3">
|
||||
Shooting Stars
|
||||
</h1>
|
||||
<p className="leading-relaxed">
|
||||
Photo booth fam kinfolk cold-pressed sriracha leggings
|
||||
jianbing microdosing tousled waistcoat.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:w-1/3 sm:w-1/2 p-4">
|
||||
<div className="flex relative">
|
||||
<img
|
||||
alt="gallery"
|
||||
className="absolute inset-0 w-full h-full object-cover object-center"
|
||||
src="https://dummyimage.com/601x361"
|
||||
/>
|
||||
<div className="px-8 py-10 relative z-10 w-full border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
|
||||
<h2 className={`tracking-widest text-sm title-font font-medium text-${props.theme}-500 mb-1`}>
|
||||
THE SUBTITLE
|
||||
</h2>
|
||||
<h1 className="title-font text-lg font-medium text-white mb-3">
|
||||
The Catalyzer
|
||||
</h1>
|
||||
<p className="leading-relaxed">
|
||||
Photo booth fam kinfolk cold-pressed sriracha leggings
|
||||
jianbing microdosing tousled waistcoat.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:w-1/3 sm:w-1/2 p-4">
|
||||
<div className="flex relative">
|
||||
<img
|
||||
alt="gallery"
|
||||
className="absolute inset-0 w-full h-full object-cover object-center"
|
||||
src="https://dummyimage.com/603x363"
|
||||
/>
|
||||
<div className="px-8 py-10 relative z-10 w-full border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
|
||||
<h2 className={`tracking-widest text-sm title-font font-medium text-${props.theme}-500 mb-1`}>
|
||||
THE SUBTITLE
|
||||
</h2>
|
||||
<h1 className="title-font text-lg font-medium text-white mb-3">
|
||||
The 400 Blows
|
||||
</h1>
|
||||
<p className="leading-relaxed">
|
||||
Photo booth fam kinfolk cold-pressed sriracha leggings
|
||||
jianbing microdosing tousled waistcoat.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:w-1/3 sm:w-1/2 p-4">
|
||||
<div className="flex relative">
|
||||
<img
|
||||
alt="gallery"
|
||||
className="absolute inset-0 w-full h-full object-cover object-center"
|
||||
src="https://dummyimage.com/602x362"
|
||||
/>
|
||||
<div className="px-8 py-10 relative z-10 w-full border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
|
||||
<h2 className={`tracking-widest text-sm title-font font-medium text-${props.theme}-500 mb-1`}>
|
||||
THE SUBTITLE
|
||||
</h2>
|
||||
<h1 className="title-font text-lg font-medium text-white mb-3">
|
||||
Neptune
|
||||
</h1>
|
||||
<p className="leading-relaxed">
|
||||
Photo booth fam kinfolk cold-pressed sriracha leggings
|
||||
jianbing microdosing tousled waistcoat.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:w-1/3 sm:w-1/2 p-4">
|
||||
<div className="flex relative">
|
||||
<img
|
||||
alt="gallery"
|
||||
className="absolute inset-0 w-full h-full object-cover object-center"
|
||||
src="https://dummyimage.com/605x365"
|
||||
/>
|
||||
<div className="px-8 py-10 relative z-10 w-full border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
|
||||
<h2 className={`tracking-widest text-sm title-font font-medium text-${props.theme}-500 mb-1`}>
|
||||
THE SUBTITLE
|
||||
</h2>
|
||||
<h1 className="title-font text-lg font-medium text-white mb-3">
|
||||
Holden Caulfield
|
||||
</h1>
|
||||
<p className="leading-relaxed">
|
||||
Photo booth fam kinfolk cold-pressed sriracha leggings
|
||||
jianbing microdosing tousled waistcoat.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:w-1/3 sm:w-1/2 p-4">
|
||||
<div className="flex relative">
|
||||
<img
|
||||
alt="gallery"
|
||||
className="absolute inset-0 w-full h-full object-cover object-center"
|
||||
src="https://dummyimage.com/606x366"
|
||||
/>
|
||||
<div className="px-8 py-10 relative z-10 w-full border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
|
||||
<h2 className={`tracking-widest text-sm title-font font-medium text-${props.theme}-500 mb-1`}>
|
||||
THE SUBTITLE
|
||||
</h2>
|
||||
<h1 className="title-font text-lg font-medium text-white mb-3">
|
||||
Alper Kamu
|
||||
</h1>
|
||||
<p className="leading-relaxed">
|
||||
Photo booth fam kinfolk cold-pressed sriracha leggings
|
||||
jianbing microdosing tousled waistcoat.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
DarkGalleryC.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkGalleryC.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkGalleryC;
|
||||
70
src/blocks/gallery/light/a.js
Normal file
70
src/blocks/gallery/light/a.js
Normal file
@@ -0,0 +1,70 @@
|
||||
import React from "react";
|
||||
|
||||
function LightGalleryA() {
|
||||
return (
|
||||
<section className="text-gray-700 body-font">
|
||||
<div className="container px-5 py-24 mx-auto flex flex-wrap">
|
||||
<div className="flex w-full mb-20 flex-wrap">
|
||||
<h1 className="sm:text-3xl text-2xl font-medium title-font text-gray-900 lg:w-1/3 lg:mb-0 mb-4">
|
||||
Master Cleanse Reliac Heirloom
|
||||
</h1>
|
||||
<p className="lg:pl-6 lg:w-2/3 mx-auto leading-relaxed text-base">
|
||||
Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical
|
||||
gentrify, subway tile poke farm-to-table. Franzen you probably
|
||||
haven't heard of them man bun deep jianbing selfies heirloom.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap md:-m-2 -m-1">
|
||||
<div className="flex flex-wrap w-1/2">
|
||||
<div className="md:p-2 p-1 w-1/2">
|
||||
<img
|
||||
alt="gallery"
|
||||
className="w-full object-cover h-full object-center block"
|
||||
src="https://dummyimage.com/500x300"
|
||||
/>
|
||||
</div>
|
||||
<div className="md:p-2 p-1 w-1/2">
|
||||
<img
|
||||
alt="gallery"
|
||||
className="w-full object-cover h-full object-center block"
|
||||
src="https://dummyimage.com/501x301"
|
||||
/>
|
||||
</div>
|
||||
<div className="md:p-2 p-1 w-full">
|
||||
<img
|
||||
alt="gallery"
|
||||
className="w-full h-full object-cover object-center block"
|
||||
src="https://dummyimage.com/600x360"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap w-1/2">
|
||||
<div className="md:p-2 p-1 w-full">
|
||||
<img
|
||||
alt="gallery"
|
||||
className="w-full h-full object-cover object-center block"
|
||||
src="https://dummyimage.com/601x361"
|
||||
/>
|
||||
</div>
|
||||
<div className="md:p-2 p-1 w-1/2">
|
||||
<img
|
||||
alt="gallery"
|
||||
className="w-full object-cover h-full object-center block"
|
||||
src="https://dummyimage.com/502x302"
|
||||
/>
|
||||
</div>
|
||||
<div className="md:p-2 p-1 w-1/2">
|
||||
<img
|
||||
alt="gallery"
|
||||
className="w-full object-cover h-full object-center block"
|
||||
src="https://dummyimage.com/503x303"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default LightGalleryA;
|
||||
116
src/blocks/gallery/light/b.js
Normal file
116
src/blocks/gallery/light/b.js
Normal file
@@ -0,0 +1,116 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightGalleryB(props) {
|
||||
return (
|
||||
<section className="text-gray-700 body-font">
|
||||
<div className="container px-5 py-24 mx-auto flex flex-wrap">
|
||||
<div className="lg:w-2/3 mx-auto">
|
||||
<div className="flex flex-wrap w-full bg-gray-100 py-32 px-10 relative mb-4">
|
||||
<img
|
||||
alt="gallery"
|
||||
className="w-full object-cover h-full object-center block opacity-25 absolute inset-0"
|
||||
src="https://dummyimage.com/820x340"
|
||||
/>
|
||||
<div className="text-center relative z-10 w-full">
|
||||
<h2 className="text-2xl text-gray-900 font-medium title-font mb-2">
|
||||
Shooting Stars
|
||||
</h2>
|
||||
<p className="leading-relaxed">
|
||||
Skateboard +1 mustache fixie paleo lumbersexual.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap -mx-2">
|
||||
<div className="px-2 w-1/2">
|
||||
<div className="flex flex-wrap w-full bg-gray-100 sm:py-24 py-16 sm:px-10 px-6 relative">
|
||||
<img
|
||||
alt="gallery"
|
||||
className="w-full object-cover h-full object-center block opacity-25 absolute inset-0"
|
||||
src="https://dummyimage.com/542x460"
|
||||
/>
|
||||
<div className="text-center relative z-10 w-full">
|
||||
<h2 className="text-xl text-gray-900 font-medium title-font mb-2">
|
||||
Shooting Stars
|
||||
</h2>
|
||||
<p className="leading-relaxed">
|
||||
Skateboard +1 mustache fixie paleo lumbersexual.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-2 w-1/2">
|
||||
<div className="flex flex-wrap w-full bg-gray-100 sm:py-24 py-16 sm:px-10 px-6 relative">
|
||||
<img
|
||||
alt="gallery"
|
||||
className="w-full object-cover h-full object-center block opacity-25 absolute inset-0"
|
||||
src="https://dummyimage.com/542x420"
|
||||
/>
|
||||
<div className="text-center relative z-10 w-full">
|
||||
<h2 className="text-xl text-gray-900 font-medium title-font mb-2">
|
||||
Shooting Stars
|
||||
</h2>
|
||||
<p className="leading-relaxed">
|
||||
Skateboard +1 mustache fixie paleo lumbersexual.
|
||||
</p>
|
||||
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
LightGalleryB.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightGalleryB.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightGalleryB;
|
||||
159
src/blocks/gallery/light/c.js
Normal file
159
src/blocks/gallery/light/c.js
Normal file
@@ -0,0 +1,159 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightGalleryC(props) {
|
||||
return (
|
||||
<section className="text-gray-700 body-font">
|
||||
<div className="container px-5 py-24 mx-auto">
|
||||
<div className="flex flex-col text-center w-full mb-20">
|
||||
<h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">
|
||||
Master Cleanse Reliac Heirloom
|
||||
</h1>
|
||||
<p className="lg:w-2/3 mx-auto leading-relaxed text-base">
|
||||
Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical
|
||||
gentrify, subway tile poke farm-to-table. Franzen you probably
|
||||
haven't heard of them man bun deep jianbing selfies heirloom.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap -m-4">
|
||||
<div className="lg:w-1/3 sm:w-1/2 p-4">
|
||||
<div className="flex relative">
|
||||
<img
|
||||
alt="gallery"
|
||||
className="absolute inset-0 w-full h-full object-cover object-center"
|
||||
src="https://dummyimage.com/600x360"
|
||||
/>
|
||||
<div className="px-8 py-10 relative z-10 w-full border-4 border-gray-200 bg-white opacity-0 hover:opacity-100">
|
||||
<h2 className={`tracking-widest text-sm title-font font-medium text-${props.theme}-500 mb-1`}>
|
||||
THE SUBTITLE
|
||||
</h2>
|
||||
<h1 className="title-font text-lg font-medium text-gray-900 mb-3">
|
||||
Shooting Stars
|
||||
</h1>
|
||||
<p className="leading-relaxed">
|
||||
Photo booth fam kinfolk cold-pressed sriracha leggings
|
||||
jianbing microdosing tousled waistcoat.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:w-1/3 sm:w-1/2 p-4">
|
||||
<div className="flex relative">
|
||||
<img
|
||||
alt="gallery"
|
||||
className="absolute inset-0 w-full h-full object-cover object-center"
|
||||
src="https://dummyimage.com/601x361"
|
||||
/>
|
||||
<div className="px-8 py-10 relative z-10 w-full border-4 border-gray-200 bg-white opacity-0 hover:opacity-100">
|
||||
<h2 className={`tracking-widest text-sm title-font font-medium text-${props.theme}-500 mb-1`}>
|
||||
THE SUBTITLE
|
||||
</h2>
|
||||
<h1 className="title-font text-lg font-medium text-gray-900 mb-3">
|
||||
The Catalyzer
|
||||
</h1>
|
||||
<p className="leading-relaxed">
|
||||
Photo booth fam kinfolk cold-pressed sriracha leggings
|
||||
jianbing microdosing tousled waistcoat.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:w-1/3 sm:w-1/2 p-4">
|
||||
<div className="flex relative">
|
||||
<img
|
||||
alt="gallery"
|
||||
className="absolute inset-0 w-full h-full object-cover object-center"
|
||||
src="https://dummyimage.com/603x363"
|
||||
/>
|
||||
<div className="px-8 py-10 relative z-10 w-full border-4 border-gray-200 bg-white opacity-0 hover:opacity-100">
|
||||
<h2 className={`tracking-widest text-sm title-font font-medium text-${props.theme}-500 mb-1`}>
|
||||
THE SUBTITLE
|
||||
</h2>
|
||||
<h1 className="title-font text-lg font-medium text-gray-900 mb-3">
|
||||
The 400 Blows
|
||||
</h1>
|
||||
<p className="leading-relaxed">
|
||||
Photo booth fam kinfolk cold-pressed sriracha leggings
|
||||
jianbing microdosing tousled waistcoat.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:w-1/3 sm:w-1/2 p-4">
|
||||
<div className="flex relative">
|
||||
<img
|
||||
alt="gallery"
|
||||
className="absolute inset-0 w-full h-full object-cover object-center"
|
||||
src="https://dummyimage.com/602x362"
|
||||
/>
|
||||
<div className="px-8 py-10 relative z-10 w-full border-4 border-gray-200 bg-white opacity-0 hover:opacity-100">
|
||||
<h2 className={`tracking-widest text-sm title-font font-medium text-${props.theme}-500 mb-1`}>
|
||||
THE SUBTITLE
|
||||
</h2>
|
||||
<h1 className="title-font text-lg font-medium text-gray-900 mb-3">
|
||||
Neptune
|
||||
</h1>
|
||||
<p className="leading-relaxed">
|
||||
Photo booth fam kinfolk cold-pressed sriracha leggings
|
||||
jianbing microdosing tousled waistcoat.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:w-1/3 sm:w-1/2 p-4">
|
||||
<div className="flex relative">
|
||||
<img
|
||||
alt="gallery"
|
||||
className="absolute inset-0 w-full h-full object-cover object-center"
|
||||
src="https://dummyimage.com/605x365"
|
||||
/>
|
||||
<div className="px-8 py-10 relative z-10 w-full border-4 border-gray-200 bg-white opacity-0 hover:opacity-100">
|
||||
<h2 className={`tracking-widest text-sm title-font font-medium text-${props.theme}-500 mb-1`}>
|
||||
THE SUBTITLE
|
||||
</h2>
|
||||
<h1 className="title-font text-lg font-medium text-gray-900 mb-3">
|
||||
Holden Caulfield
|
||||
</h1>
|
||||
<p className="leading-relaxed">
|
||||
Photo booth fam kinfolk cold-pressed sriracha leggings
|
||||
jianbing microdosing tousled waistcoat.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:w-1/3 sm:w-1/2 p-4">
|
||||
<div className="flex relative">
|
||||
<img
|
||||
alt="gallery"
|
||||
className="absolute inset-0 w-full h-full object-cover object-center"
|
||||
src="https://dummyimage.com/606x366"
|
||||
/>
|
||||
<div className="px-8 py-10 relative z-10 w-full border-4 border-gray-200 bg-white opacity-0 hover:opacity-100">
|
||||
<h2 className={`tracking-widest text-sm title-font font-medium text-${props.theme}-500 mb-1`}>
|
||||
THE SUBTITLE
|
||||
</h2>
|
||||
<h1 className="title-font text-lg font-medium text-gray-900 mb-3">
|
||||
Alper Kamu
|
||||
</h1>
|
||||
<p className="leading-relaxed">
|
||||
Photo booth fam kinfolk cold-pressed sriracha leggings
|
||||
jianbing microdosing tousled waistcoat.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
LightGalleryC.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightGalleryC.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightGalleryC;
|
||||
56
src/blocks/header/dark/a.js
Normal file
56
src/blocks/header/dark/a.js
Normal file
@@ -0,0 +1,56 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkHeaderA(props) {
|
||||
return (
|
||||
<header className="text-gray-500 bg-gray-900 body-font">
|
||||
<div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
|
||||
<a href className="flex title-font font-medium items-center text-white mb-4 md:mb-0">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className={`w-10 h-10 text-white p-2 bg-${props.theme}-500 rounded-full`}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
|
||||
</svg>
|
||||
<span className="ml-3 text-xl">madde</span>
|
||||
</a>
|
||||
<nav className="md:ml-auto flex flex-wrap items-center text-base justify-center">
|
||||
<a href className="mr-5 hover:text-white">First Link</a>
|
||||
<a href className="mr-5 hover:text-white">Second Link</a>
|
||||
<a href className="mr-5 hover:text-white">Third Link</a>
|
||||
<a href className="mr-5 hover:text-white">Fourth Link</a>
|
||||
</nav>
|
||||
<button className="inline-flex items-center bg-gray-800 border-0 py-1 px-3 focus:outline-none hover:bg-gray-700 rounded text-base mt-4 md:mt-0">
|
||||
Button
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-1"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
DarkHeaderA.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkHeaderA.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkHeaderA;
|
||||
56
src/blocks/header/dark/b.js
Normal file
56
src/blocks/header/dark/b.js
Normal file
@@ -0,0 +1,56 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkHeaderB(props) {
|
||||
return (
|
||||
<header className="text-gray-500 bg-gray-900 body-font">
|
||||
<div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
|
||||
<a href className="flex title-font font-medium items-center text-white mb-4 md:mb-0">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className={`w-10 h-10 text-white p-2 bg-${props.theme}-500 rounded-full`}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
|
||||
</svg>
|
||||
<span className="ml-3 text-xl">madde</span>
|
||||
</a>
|
||||
<nav className="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-700 flex flex-wrap items-center text-base justify-center">
|
||||
<a href className="mr-5 hover:text-white">First Link</a>
|
||||
<a href className="mr-5 hover:text-white">Second Link</a>
|
||||
<a href className="mr-5 hover:text-white">Third Link</a>
|
||||
<a href className="mr-5 hover:text-white">Fourth Link</a>
|
||||
</nav>
|
||||
<button className="inline-flex items-center bg-gray-800 border-0 py-1 px-3 focus:outline-none hover:bg-gray-700 rounded text-base mt-4 md:mt-0">
|
||||
Button
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-1"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
DarkHeaderB.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkHeaderB.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkHeaderB;
|
||||
58
src/blocks/header/dark/c.js
Normal file
58
src/blocks/header/dark/c.js
Normal file
@@ -0,0 +1,58 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkHeaderC(props) {
|
||||
return (
|
||||
<header className="text-gray-500 bg-gray-900 body-font">
|
||||
<div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
|
||||
<nav className="flex lg:w-2/5 flex-wrap items-center text-base md:ml-auto">
|
||||
<a href className="mr-5 hover:text-white">First Link</a>
|
||||
<a href className="mr-5 hover:text-white">Second Link</a>
|
||||
<a href className="mr-5 hover:text-white">Third Link</a>
|
||||
<a href className="hover:text-white">Fourth Link</a>
|
||||
</nav>
|
||||
<a href className="flex order-first lg:order-none lg:w-1/5 title-font font-medium items-center text-white lg:items-center lg:justify-center mb-4 md:mb-0">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className={`w-10 h-10 text-white p-2 bg-${props.theme}-500 rounded-full`}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
|
||||
</svg>
|
||||
<span className="ml-3 text-xl xl:block lg:hidden">madde</span>
|
||||
</a>
|
||||
<div className="lg:w-2/5 inline-flex lg:justify-end ml-5 lg:ml-0">
|
||||
<button className="inline-flex items-center bg-gray-800 border-0 py-1 px-3 focus:outline-none hover:bg-gray-700 rounded text-base mt-4 md:mt-0">
|
||||
Button
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-1"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
DarkHeaderC.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkHeaderC.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkHeaderC;
|
||||
56
src/blocks/header/dark/d.js
Normal file
56
src/blocks/header/dark/d.js
Normal file
@@ -0,0 +1,56 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkHeaderD(props) {
|
||||
return (
|
||||
<header className="text-gray-500 bg-gray-900 body-font">
|
||||
<div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
|
||||
<a href className="flex title-font font-medium items-center text-white mb-4 md:mb-0">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className={`w-10 h-10 text-white p-2 bg-${props.theme}-500 rounded-full`}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
|
||||
</svg>
|
||||
<span class="ml-3 text-xl">madde</span>
|
||||
</a>
|
||||
<nav className="md:ml-auto md:mr-auto flex flex-wrap items-center text-base justify-center">
|
||||
<a href className="mr-5 hover:text-white">First Link</a>
|
||||
<a href className="mr-5 hover:text-white">Second Link</a>
|
||||
<a href className="mr-5 hover:text-white">Third Link</a>
|
||||
<a href className="mr-5 hover:text-white">Fourth Link</a>
|
||||
</nav>
|
||||
<button className="inline-flex items-center bg-gray-800 border-0 py-1 px-3 focus:outline-none hover:bg-gray-700 rounded text-base mt-4 md:mt-0">
|
||||
Button
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-1"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
DarkHeaderD.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkHeaderD.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkHeaderD;
|
||||
56
src/blocks/header/light/a.js
Normal file
56
src/blocks/header/light/a.js
Normal file
@@ -0,0 +1,56 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightHeaderA(props) {
|
||||
return (
|
||||
<header className="text-gray-700 body-font">
|
||||
<div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
|
||||
<a href className="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className={`w-10 h-10 text-white p-2 bg-${props.theme}-500 rounded-full`}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
|
||||
</svg>
|
||||
<span class="ml-3 text-xl">madde</span>
|
||||
</a>
|
||||
<nav className="md:ml-auto flex flex-wrap items-center text-base justify-center">
|
||||
<a href className="mr-5 hover:text-gray-900">First Link</a>
|
||||
<a href className="mr-5 hover:text-gray-900">Second Link</a>
|
||||
<a href className="mr-5 hover:text-gray-900">Third Link</a>
|
||||
<a href className="mr-5 hover:text-gray-900">Fourth Link</a>
|
||||
</nav>
|
||||
<button className="inline-flex items-center bg-gray-200 border-0 py-1 px-3 focus:outline-none hover:bg-gray-300 rounded text-base mt-4 md:mt-0">
|
||||
Button
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-1"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
LightHeaderA.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightHeaderA.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightHeaderA;
|
||||
56
src/blocks/header/light/b.js
Normal file
56
src/blocks/header/light/b.js
Normal file
@@ -0,0 +1,56 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightHeaderB(props) {
|
||||
return (
|
||||
<header className="text-gray-700 body-font">
|
||||
<div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
|
||||
<a href className="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className={`w-10 h-10 text-white p-2 bg-${props.theme}-500 rounded-full`}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
|
||||
</svg>
|
||||
<span class="ml-3 text-xl">madde</span>
|
||||
</a>
|
||||
<nav className="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-400 flex flex-wrap items-center text-base justify-center">
|
||||
<a href className="mr-5 hover:text-gray-900">First Link</a>
|
||||
<a href className="mr-5 hover:text-gray-900">Second Link</a>
|
||||
<a href className="mr-5 hover:text-gray-900">Third Link</a>
|
||||
<a href className="mr-5 hover:text-gray-900">Fourth Link</a>
|
||||
</nav>
|
||||
<button className="inline-flex items-center bg-gray-200 border-0 py-1 px-3 focus:outline-none hover:bg-gray-300 rounded text-base mt-4 md:mt-0">
|
||||
Button
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-1"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
LightHeaderB.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightHeaderB.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightHeaderB;
|
||||
58
src/blocks/header/light/c.js
Normal file
58
src/blocks/header/light/c.js
Normal file
@@ -0,0 +1,58 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightHeaderC(props) {
|
||||
return (
|
||||
<header className="text-gray-700 body-font">
|
||||
<div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
|
||||
<nav className="flex lg:w-2/5 flex-wrap items-center text-base md:ml-auto">
|
||||
<a href className="mr-5 hover:text-gray-900">First Link</a>
|
||||
<a href className="mr-5 hover:text-gray-900">Second Link</a>
|
||||
<a href className="mr-5 hover:text-gray-900">Third Link</a>
|
||||
<a href className="hover:text-gray-900">Fourth Link</a>
|
||||
</nav>
|
||||
<a href className="flex order-first lg:order-none lg:w-1/5 title-font font-medium items-center text-gray-900 lg:items-center lg:justify-center mb-4 md:mb-0">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className={`w-10 h-10 text-white p-2 bg-${props.theme}-500 rounded-full`}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
|
||||
</svg>
|
||||
<span class="ml-3 text-xl">madde</span>
|
||||
</a>
|
||||
<div className="lg:w-2/5 inline-flex lg:justify-end ml-5 lg:ml-0">
|
||||
<button className="inline-flex items-center bg-gray-200 border-0 py-1 px-3 focus:outline-none hover:bg-gray-300 rounded text-base mt-4 md:mt-0">
|
||||
Button
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-1"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
LightHeaderC.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightHeaderC.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightHeaderC;
|
||||
56
src/blocks/header/light/d.js
Normal file
56
src/blocks/header/light/d.js
Normal file
@@ -0,0 +1,56 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightHeaderD(props) {
|
||||
return (
|
||||
<header className="text-gray-700 body-font">
|
||||
<div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
|
||||
<a href className="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className={`w-10 h-10 text-white p-2 bg-${props.theme}-500 rounded-full`}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
|
||||
</svg>
|
||||
<span className="ml-3 text-xl">madde</span>
|
||||
</a>
|
||||
<nav className="md:ml-auto md:mr-auto flex flex-wrap items-center text-base justify-center">
|
||||
<a href className="mr-5 hover:text-gray-900">First Link</a>
|
||||
<a href className="mr-5 hover:text-gray-900">Second Link</a>
|
||||
<a href className="mr-5 hover:text-gray-900">Third Link</a>
|
||||
<a href className="mr-5 hover:text-gray-900">Fourth Link</a>
|
||||
</nav>
|
||||
<button className="inline-flex items-center bg-gray-200 border-0 py-1 px-3 focus:outline-none hover:bg-gray-300 rounded text-base mt-4 md:mt-0">
|
||||
Button
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="w-4 h-4 ml-1"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
LightHeaderD.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightHeaderD.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightHeaderD;
|
||||
44
src/blocks/hero/dark/a.js
Normal file
44
src/blocks/hero/dark/a.js
Normal file
@@ -0,0 +1,44 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkHeroA(props) {
|
||||
return (
|
||||
<section className="text-gray-500 bg-gray-900 body-font">
|
||||
<div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
|
||||
<div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
|
||||
<h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-white">
|
||||
Before they sold out<br className="hidden lg:inline-block" />
|
||||
readymade gluten
|
||||
</h1>
|
||||
<p className="mb-8 leading-relaxed">
|
||||
Copper mug try-hard pitchfork pour-over freegan heirloom neutra air
|
||||
plant cold-pressed tacos poke beard tote bag. Heirloom echo park
|
||||
mlkshk tote bag selvage hot chicken authentic tumeric truffaut
|
||||
hexagon try-hard chambray.
|
||||
</p>
|
||||
<div className="flex justify-center">
|
||||
<button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
|
||||
Button
|
||||
</button>
|
||||
<button className="ml-4 inline-flex text-gray-400 bg-gray-800 border-0 py-2 px-6 focus:outline-none hover:bg-gray-700 hover:text-white rounded text-lg">
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
|
||||
<img className="object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
DarkHeroA.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkHeroA.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkHeroA;
|
||||
42
src/blocks/hero/dark/b.js
Normal file
42
src/blocks/hero/dark/b.js
Normal file
@@ -0,0 +1,42 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkHeroB(props) {
|
||||
return (
|
||||
<section className="text-gray-500 bg-gray-900 body-font">
|
||||
<div className="container mx-auto flex px-5 py-24 items-center justify-center flex-col">
|
||||
<img className="lg:w-2/6 md:w-3/6 w-5/6 mb-10 object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600" />
|
||||
<div className="text-center lg:w-2/3 w-full">
|
||||
<h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-white">
|
||||
Microdosing synth tattooed vexillologist
|
||||
</h1>
|
||||
<p className="leading-relaxed mb-8">
|
||||
Meggings kinfolk echo park stumptown DIY, kale chips beard jianbing
|
||||
tousled. Chambray dreamcatcher trust fund, kitsch vice godard disrupt
|
||||
ramps hexagon mustache umami snackwave tilde chillwave ugh. Pour-over
|
||||
meditation PBR&B pickled ennui celiac mlkshk freegan photo booth af
|
||||
fingerstache pitchfork.
|
||||
</p>
|
||||
<div className="flex justify-center">
|
||||
<button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
|
||||
Button
|
||||
</button>
|
||||
<button className="ml-4 inline-flex text-gray-400 bg-gray-800 border-0 py-2 px-6 focus:outline-none hover:bg-gray-700 hover:text-white rounded text-lg">
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
DarkHeroB.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkHeroB.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkHeroB;
|
||||
44
src/blocks/hero/dark/c.js
Normal file
44
src/blocks/hero/dark/c.js
Normal file
@@ -0,0 +1,44 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkHeroC(props) {
|
||||
return (
|
||||
<section className="text-gray-500 bg-gray-900 body-font">
|
||||
<div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
|
||||
<div className="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 md:mb-0 mb-10">
|
||||
<img className="object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600" />
|
||||
</div>
|
||||
<div className="lg:flex-grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col md:items-start md:text-left items-center text-center">
|
||||
<h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-white">
|
||||
Before they sold out<br className="hidden lg:inline-block" />
|
||||
readymade gluten
|
||||
</h1>
|
||||
<p className="mb-8 leading-relaxed">
|
||||
Copper mug try-hard pitchfork pour-over freegan heirloom neutra air
|
||||
plant cold-pressed tacos poke beard tote bag. Heirloom echo park
|
||||
mlkshk tote bag selvage hot chicken authentic tumeric truffaut
|
||||
hexagon try-hard chambray.
|
||||
</p>
|
||||
<div className="flex justify-center">
|
||||
<button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
|
||||
Button
|
||||
</button>
|
||||
<button className="ml-4 inline-flex text-gray-400 bg-gray-800 border-0 py-2 px-6 focus:outline-none hover:bg-gray-700 hover:text-white rounded text-lg">
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
DarkHeroC.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkHeroC.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkHeroC;
|
||||
79
src/blocks/hero/dark/d.js
Normal file
79
src/blocks/hero/dark/d.js
Normal file
@@ -0,0 +1,79 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkHeroD(props) {
|
||||
return (
|
||||
<section className="text-gray-500 bg-gray-900 body-font">
|
||||
<div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
|
||||
<div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
|
||||
<h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-white">
|
||||
Knausgaard typewriter readymade marfa
|
||||
</h1>
|
||||
<p className="mb-8 leading-relaxed">
|
||||
Chillwave portland ugh, knausgaard fam polaroid iPhone. Man braid
|
||||
swag typewriter affogato, hella selvage wolf narwhal dreamcatcher.
|
||||
</p>
|
||||
<div className="flex w-full md:justify-start justify-center">
|
||||
<input
|
||||
className={`bg-gray-800 rounded mr-4 border border-gray-700 text-white focus:outline-none focus:border-${props.theme}-500 text-base px-4 md:w-full lg:w-full xl:w-1/2 w-2/4`}
|
||||
placeholder="Placeholder"
|
||||
type="text"
|
||||
></input>
|
||||
<button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-sm mt-2 text-gray-600 mb-8 w-full">
|
||||
Neutra shabby chic ramps, viral fixie.
|
||||
</p>
|
||||
<div className="flex lg:flex-row md:flex-col text-gray-300">
|
||||
<button className="bg-gray-800 inline-flex py-3 px-5 rounded-lg items-center hover:bg-gray-700 hover:text-white focus:outline-none">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<path d="M99.617 8.057a50.191 50.191 0 00-38.815-6.713l230.932 230.933 74.846-74.846L99.617 8.057zM32.139 20.116c-6.441 8.563-10.148 19.077-10.148 30.199v411.358c0 11.123 3.708 21.636 10.148 30.199l235.877-235.877L32.139 20.116zM464.261 212.087l-67.266-37.637-81.544 81.544 81.548 81.548 67.273-37.64c16.117-9.03 25.738-25.442 25.738-43.908s-9.621-34.877-25.749-43.907zM291.733 279.711L60.815 510.629c3.786.891 7.639 1.371 11.492 1.371a50.275 50.275 0 0027.31-8.07l266.965-149.372-74.849-74.847z" />
|
||||
</svg>
|
||||
<span className="ml-4 flex items-start flex-col leading-none">
|
||||
<span className="text-xs text-gray-500 mb-1">GET IT ON</span>
|
||||
<span className="title-font font-medium">Google Play</span>
|
||||
</span>
|
||||
</button>
|
||||
<button className="bg-gray-800 inline-flex py-3 px-5 rounded-lg items-center hover:bg-gray-700 hover:text-white focus:outline-none lg:ml-4 md:ml-0 ml-4 md:mt-4 mt-0 lg:mt-0">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 305 305"
|
||||
>
|
||||
<path d="M40.74 112.12c-25.79 44.74-9.4 112.65 19.12 153.82C74.09 286.52 88.5 305 108.24 305c.37 0 .74 0 1.13-.02 9.27-.37 15.97-3.23 22.45-5.99 7.27-3.1 14.8-6.3 26.6-6.3 11.22 0 18.39 3.1 25.31 6.1 6.83 2.95 13.87 6 24.26 5.81 22.23-.41 35.88-20.35 47.92-37.94a168.18 168.18 0 0021-43l.09-.28a2.5 2.5 0 00-1.33-3.06l-.18-.08c-3.92-1.6-38.26-16.84-38.62-58.36-.34-33.74 25.76-51.6 31-54.84l.24-.15a2.5 2.5 0 00.7-3.51c-18-26.37-45.62-30.34-56.73-30.82a50.04 50.04 0 00-4.95-.24c-13.06 0-25.56 4.93-35.61 8.9-6.94 2.73-12.93 5.09-17.06 5.09-4.64 0-10.67-2.4-17.65-5.16-9.33-3.7-19.9-7.9-31.1-7.9l-.79.01c-26.03.38-50.62 15.27-64.18 38.86z" />
|
||||
<path d="M212.1 0c-15.76.64-34.67 10.35-45.97 23.58-9.6 11.13-19 29.68-16.52 48.38a2.5 2.5 0 002.29 2.17c1.06.08 2.15.12 3.23.12 15.41 0 32.04-8.52 43.4-22.25 11.94-14.5 17.99-33.1 16.16-49.77A2.52 2.52 0 00212.1 0z" />
|
||||
</svg>
|
||||
<span className="ml-4 flex items-start flex-col leading-none">
|
||||
<span className="text-xs text-gray-500 mb-1">
|
||||
Download on the
|
||||
</span>
|
||||
<span className="title-font font-medium">App Store</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
|
||||
<img className="object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
DarkHeroD.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkHeroD.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkHeroD;
|
||||
79
src/blocks/hero/dark/e.js
Normal file
79
src/blocks/hero/dark/e.js
Normal file
@@ -0,0 +1,79 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkHeroE(props) {
|
||||
return (
|
||||
<section className="text-gray-500 bg-gray-900 body-font">
|
||||
<div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
|
||||
<div className="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 mb-10 md:mb-0">
|
||||
<img className="object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600" />
|
||||
</div>
|
||||
<div className="lg:flex-grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col md:items-start md:text-left items-center text-center">
|
||||
<h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-white">
|
||||
Knausgaard typewriter readymade marfa
|
||||
</h1>
|
||||
<p className="mb-8 leading-relaxed">
|
||||
Chillwave portland ugh, knausgaard fam polaroid iPhone. Man braid
|
||||
swag typewriter affogato, hella selvage wolf narwhal dreamcatcher.
|
||||
</p>
|
||||
<div className="flex w-full md:justify-start justify-center">
|
||||
<input
|
||||
className={`bg-gray-800 rounded mr-4 border border-gray-700 text-white focus:outline-none focus:border-${props.theme}-500 text-base px-4 md:w-full lg:w-full xl:w-1/2 w-2/4`}
|
||||
placeholder="Placeholder"
|
||||
type="text"
|
||||
></input>
|
||||
<button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-sm mt-2 text-gray-600 mb-8 w-full">
|
||||
Neutra shabby chic ramps, viral fixie.
|
||||
</p>
|
||||
<div className="flex lg:flex-row md:flex-col text-gray-300">
|
||||
<button className="bg-gray-800 inline-flex py-3 px-5 rounded-lg items-center hover:bg-gray-700 hover:text-white focus:outline-none">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<path d="M99.617 8.057a50.191 50.191 0 00-38.815-6.713l230.932 230.933 74.846-74.846L99.617 8.057zM32.139 20.116c-6.441 8.563-10.148 19.077-10.148 30.199v411.358c0 11.123 3.708 21.636 10.148 30.199l235.877-235.877L32.139 20.116zM464.261 212.087l-67.266-37.637-81.544 81.544 81.548 81.548 67.273-37.64c16.117-9.03 25.738-25.442 25.738-43.908s-9.621-34.877-25.749-43.907zM291.733 279.711L60.815 510.629c3.786.891 7.639 1.371 11.492 1.371a50.275 50.275 0 0027.31-8.07l266.965-149.372-74.849-74.847z" />
|
||||
</svg>
|
||||
<span className="ml-4 flex items-start flex-col leading-none">
|
||||
<span className="text-xs text-gray-500 mb-1">GET IT ON</span>
|
||||
<span className="title-font font-medium">Google Play</span>
|
||||
</span>
|
||||
</button>
|
||||
<button className="bg-gray-800 inline-flex py-3 px-5 rounded-lg items-center hover:bg-gray-700 hover:text-white focus:outline-none lg:ml-4 md:ml-0 ml-4 md:mt-4 mt-0 lg:mt-0">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 305 305"
|
||||
>
|
||||
<path d="M40.74 112.12c-25.79 44.74-9.4 112.65 19.12 153.82C74.09 286.52 88.5 305 108.24 305c.37 0 .74 0 1.13-.02 9.27-.37 15.97-3.23 22.45-5.99 7.27-3.1 14.8-6.3 26.6-6.3 11.22 0 18.39 3.1 25.31 6.1 6.83 2.95 13.87 6 24.26 5.81 22.23-.41 35.88-20.35 47.92-37.94a168.18 168.18 0 0021-43l.09-.28a2.5 2.5 0 00-1.33-3.06l-.18-.08c-3.92-1.6-38.26-16.84-38.62-58.36-.34-33.74 25.76-51.6 31-54.84l.24-.15a2.5 2.5 0 00.7-3.51c-18-26.37-45.62-30.34-56.73-30.82a50.04 50.04 0 00-4.95-.24c-13.06 0-25.56 4.93-35.61 8.9-6.94 2.73-12.93 5.09-17.06 5.09-4.64 0-10.67-2.4-17.65-5.16-9.33-3.7-19.9-7.9-31.1-7.9l-.79.01c-26.03.38-50.62 15.27-64.18 38.86z" />
|
||||
<path d="M212.1 0c-15.76.64-34.67 10.35-45.97 23.58-9.6 11.13-19 29.68-16.52 48.38a2.5 2.5 0 002.29 2.17c1.06.08 2.15.12 3.23.12 15.41 0 32.04-8.52 43.4-22.25 11.94-14.5 17.99-33.1 16.16-49.77A2.52 2.52 0 00212.1 0z" />
|
||||
</svg>
|
||||
<span className="ml-4 flex items-start flex-col leading-none">
|
||||
<span className="text-xs text-gray-500 mb-1">
|
||||
Download on the
|
||||
</span>
|
||||
<span className="title-font font-medium">App Store</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
DarkHeroE.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkHeroE.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkHeroE;
|
||||
78
src/blocks/hero/dark/f.js
Normal file
78
src/blocks/hero/dark/f.js
Normal file
@@ -0,0 +1,78 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function DarkHeroF(props) {
|
||||
return (
|
||||
<section className="text-gray-500 bg-gray-900 body-font">
|
||||
<div className="container mx-auto flex flex-col px-5 py-24 justify-center items-center">
|
||||
<img className="lg:w-2/6 md:w-3/6 w-5/6 mb-10 object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600" />
|
||||
<div className="w-full md:w-2/3 flex flex-col mb-16 items-center text-center">
|
||||
<h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-white">
|
||||
Knausgaard typewriter readymade marfa
|
||||
</h1>
|
||||
<p className="mb-8 leading-relaxed">
|
||||
Kickstarter biodiesel roof party wayfarers cold-pressed. Palo santo
|
||||
live-edge tumeric scenester copper mug flexitarian. Prism vice offal
|
||||
plaid everyday carry. Gluten-free chia VHS squid listicle artisan.
|
||||
</p>
|
||||
<div className="flex w-full justify-center">
|
||||
<input
|
||||
className={`bg-gray-800 rounded mr-4 border border-gray-700 text-white focus:outline-none focus:border-${props.theme}-500 text-base px-4 md:w-full lg:w-full xl:w-1/2 w-2/4`}
|
||||
placeholder="Placeholder"
|
||||
type="text"
|
||||
></input>
|
||||
<button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-sm mt-2 text-gray-500 mb-8 w-full">
|
||||
Neutra shabby chic ramps, viral fixie.
|
||||
</p>
|
||||
<div className="flex text-gray-300">
|
||||
<button className="bg-gray-800 inline-flex py-3 px-5 rounded-lg items-center hover:bg-gray-700 hover:text-white focus:outline-none">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<path d="M99.617 8.057a50.191 50.191 0 00-38.815-6.713l230.932 230.933 74.846-74.846L99.617 8.057zM32.139 20.116c-6.441 8.563-10.148 19.077-10.148 30.199v411.358c0 11.123 3.708 21.636 10.148 30.199l235.877-235.877L32.139 20.116zM464.261 212.087l-67.266-37.637-81.544 81.544 81.548 81.548 67.273-37.64c16.117-9.03 25.738-25.442 25.738-43.908s-9.621-34.877-25.749-43.907zM291.733 279.711L60.815 510.629c3.786.891 7.639 1.371 11.492 1.371a50.275 50.275 0 0027.31-8.07l266.965-149.372-74.849-74.847z" />
|
||||
</svg>
|
||||
<span className="ml-4 flex items-start flex-col leading-none">
|
||||
<span className="text-xs text-gray-600 mb-1">GET IT ON</span>
|
||||
<span className="title-font font-medium">Google Play</span>
|
||||
</span>
|
||||
</button>
|
||||
<button className="bg-gray-800 inline-flex py-3 px-5 rounded-lg items-center ml-4 hover:bg-gray-700 hover:text-white focus:outline-none">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 305 305"
|
||||
>
|
||||
<path d="M40.74 112.12c-25.79 44.74-9.4 112.65 19.12 153.82C74.09 286.52 88.5 305 108.24 305c.37 0 .74 0 1.13-.02 9.27-.37 15.97-3.23 22.45-5.99 7.27-3.1 14.8-6.3 26.6-6.3 11.22 0 18.39 3.1 25.31 6.1 6.83 2.95 13.87 6 24.26 5.81 22.23-.41 35.88-20.35 47.92-37.94a168.18 168.18 0 0021-43l.09-.28a2.5 2.5 0 00-1.33-3.06l-.18-.08c-3.92-1.6-38.26-16.84-38.62-58.36-.34-33.74 25.76-51.6 31-54.84l.24-.15a2.5 2.5 0 00.7-3.51c-18-26.37-45.62-30.34-56.73-30.82a50.04 50.04 0 00-4.95-.24c-13.06 0-25.56 4.93-35.61 8.9-6.94 2.73-12.93 5.09-17.06 5.09-4.64 0-10.67-2.4-17.65-5.16-9.33-3.7-19.9-7.9-31.1-7.9l-.79.01c-26.03.38-50.62 15.27-64.18 38.86z" />
|
||||
<path d="M212.1 0c-15.76.64-34.67 10.35-45.97 23.58-9.6 11.13-19 29.68-16.52 48.38a2.5 2.5 0 002.29 2.17c1.06.08 2.15.12 3.23.12 15.41 0 32.04-8.52 43.4-22.25 11.94-14.5 17.99-33.1 16.16-49.77A2.52 2.52 0 00212.1 0z" />
|
||||
</svg>
|
||||
<span className="ml-4 flex items-start flex-col leading-none">
|
||||
<span className="text-xs text-gray-600 mb-1">
|
||||
Download on the
|
||||
</span>
|
||||
<span className="title-font font-medium">App Store</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
DarkHeroF.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
DarkHeroF.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default DarkHeroF;
|
||||
44
src/blocks/hero/light/a.js
Normal file
44
src/blocks/hero/light/a.js
Normal file
@@ -0,0 +1,44 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightHeroA(props) {
|
||||
return (
|
||||
<section className="text-gray-700 body-font">
|
||||
<div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
|
||||
<div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
|
||||
<h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">
|
||||
Before they sold out<br className="hidden lg:inline-block" />
|
||||
readymade gluten
|
||||
</h1>
|
||||
<p className="mb-8 leading-relaxed">
|
||||
Copper mug try-hard pitchfork pour-over freegan heirloom neutra air
|
||||
plant cold-pressed tacos poke beard tote bag. Heirloom echo park
|
||||
mlkshk tote bag selvage hot chicken authentic tumeric truffaut
|
||||
hexagon try-hard chambray.
|
||||
</p>
|
||||
<div className="flex justify-center">
|
||||
<button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
|
||||
Button
|
||||
</button>
|
||||
<button className="ml-4 inline-flex text-gray-700 bg-gray-200 border-0 py-2 px-6 focus:outline-none hover:bg-gray-300 rounded text-lg">
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
|
||||
<img className="object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
LightHeroA.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightHeroA.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightHeroA;
|
||||
42
src/blocks/hero/light/b.js
Normal file
42
src/blocks/hero/light/b.js
Normal file
@@ -0,0 +1,42 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightHeroB(props) {
|
||||
return (
|
||||
<section className="text-gray-700 body-font">
|
||||
<div className="container mx-auto flex px-5 py-24 items-center justify-center flex-col">
|
||||
<img className="lg:w-2/6 md:w-3/6 w-5/6 mb-10 object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600" />
|
||||
<div className="text-center lg:w-2/3 w-full">
|
||||
<h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">
|
||||
Microdosing synth tattooed vexillologist
|
||||
</h1>
|
||||
<p className="mb-8 leading-relaxed">
|
||||
Meggings kinfolk echo park stumptown DIY, kale chips beard jianbing
|
||||
tousled. Chambray dreamcatcher trust fund, kitsch vice godard disrupt
|
||||
ramps hexagon mustache umami snackwave tilde chillwave ugh. Pour-over
|
||||
meditation PBR&B pickled ennui celiac mlkshk freegan photo booth af
|
||||
fingerstache pitchfork.
|
||||
</p>
|
||||
<div className="flex justify-center">
|
||||
<button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
|
||||
Button
|
||||
</button>
|
||||
<button className="ml-4 inline-flex text-gray-700 bg-gray-200 border-0 py-2 px-6 focus:outline-none hover:bg-gray-300 rounded text-lg">
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
LightHeroB.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightHeroB.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightHeroB;
|
||||
44
src/blocks/hero/light/c.js
Normal file
44
src/blocks/hero/light/c.js
Normal file
@@ -0,0 +1,44 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightHeroC(props) {
|
||||
return (
|
||||
<section className="text-gray-700 body-font">
|
||||
<div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
|
||||
<div className="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 mb-10 md:mb-0">
|
||||
<img className="object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600" />
|
||||
</div>
|
||||
<div className="lg:flex-grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col md:items-start md:text-left items-center text-center">
|
||||
<h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">
|
||||
Before they sold out<br className="hidden lg:inline-block"></br>
|
||||
readymade gluten
|
||||
</h1>
|
||||
<p className="mb-8 leading-relaxed">
|
||||
Copper mug try-hard pitchfork pour-over freegan heirloom neutra air
|
||||
plant cold-pressed tacos poke beard tote bag. Heirloom echo park
|
||||
mlkshk tote bag selvage hot chicken authentic tumeric truffaut
|
||||
hexagon try-hard chambray.
|
||||
</p>
|
||||
<div className="flex justify-center">
|
||||
<button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
|
||||
Button
|
||||
</button>
|
||||
<button className="ml-4 inline-flex text-gray-700 bg-gray-200 border-0 py-2 px-6 focus:outline-none hover:bg-gray-300 rounded text-lg">
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
LightHeroC.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightHeroC.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightHeroC;
|
||||
79
src/blocks/hero/light/d.js
Normal file
79
src/blocks/hero/light/d.js
Normal file
@@ -0,0 +1,79 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightHeroD(props) {
|
||||
return (
|
||||
<section className="text-gray-700 body-font">
|
||||
<div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
|
||||
<div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
|
||||
<h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">
|
||||
Knausgaard typewriter readymade marfa
|
||||
</h1>
|
||||
<p className="mb-8 leading-relaxed">
|
||||
Chillwave portland ugh, knausgaard fam polaroid iPhone. Man braid
|
||||
swag typewriter affogato, hella selvage wolf narwhal dreamcatcher.
|
||||
</p>
|
||||
<div className="flex w-full md:justify-start justify-center">
|
||||
<input
|
||||
className={`bg-gray-100 rounded mr-4 border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 lg:w-full xl:w-1/2 w-2/4 md:w-full`}
|
||||
placeholder="Placeholder"
|
||||
type="text"
|
||||
/>
|
||||
<button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-sm mt-2 text-gray-500 mb-8 w-full">
|
||||
Neutra shabby chic ramps, viral fixie.
|
||||
</p>
|
||||
<div className="flex lg:flex-row md:flex-col">
|
||||
<button className="bg-gray-200 inline-flex py-3 px-5 rounded-lg items-center hover:bg-gray-300 focus:outline-none">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<path d="M99.617 8.057a50.191 50.191 0 00-38.815-6.713l230.932 230.933 74.846-74.846L99.617 8.057zM32.139 20.116c-6.441 8.563-10.148 19.077-10.148 30.199v411.358c0 11.123 3.708 21.636 10.148 30.199l235.877-235.877L32.139 20.116zM464.261 212.087l-67.266-37.637-81.544 81.544 81.548 81.548 67.273-37.64c16.117-9.03 25.738-25.442 25.738-43.908s-9.621-34.877-25.749-43.907zM291.733 279.711L60.815 510.629c3.786.891 7.639 1.371 11.492 1.371a50.275 50.275 0 0027.31-8.07l266.965-149.372-74.849-74.847z" />
|
||||
</svg>
|
||||
<span className="ml-4 flex items-start flex-col leading-none">
|
||||
<span className="text-xs text-gray-600 mb-1">GET IT ON</span>
|
||||
<span className="title-font font-medium">Google Play</span>
|
||||
</span>
|
||||
</button>
|
||||
<button className="bg-gray-200 inline-flex py-3 px-5 rounded-lg items-center lg:ml-4 md:ml-0 ml-4 md:mt-4 mt-0 lg:mt-0 hover:bg-gray-300 focus:outline-none">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 305 305"
|
||||
>
|
||||
<path d="M40.74 112.12c-25.79 44.74-9.4 112.65 19.12 153.82C74.09 286.52 88.5 305 108.24 305c.37 0 .74 0 1.13-.02 9.27-.37 15.97-3.23 22.45-5.99 7.27-3.1 14.8-6.3 26.6-6.3 11.22 0 18.39 3.1 25.31 6.1 6.83 2.95 13.87 6 24.26 5.81 22.23-.41 35.88-20.35 47.92-37.94a168.18 168.18 0 0021-43l.09-.28a2.5 2.5 0 00-1.33-3.06l-.18-.08c-3.92-1.6-38.26-16.84-38.62-58.36-.34-33.74 25.76-51.6 31-54.84l.24-.15a2.5 2.5 0 00.7-3.51c-18-26.37-45.62-30.34-56.73-30.82a50.04 50.04 0 00-4.95-.24c-13.06 0-25.56 4.93-35.61 8.9-6.94 2.73-12.93 5.09-17.06 5.09-4.64 0-10.67-2.4-17.65-5.16-9.33-3.7-19.9-7.9-31.1-7.9l-.79.01c-26.03.38-50.62 15.27-64.18 38.86z" />
|
||||
<path d="M212.1 0c-15.76.64-34.67 10.35-45.97 23.58-9.6 11.13-19 29.68-16.52 48.38a2.5 2.5 0 002.29 2.17c1.06.08 2.15.12 3.23.12 15.41 0 32.04-8.52 43.4-22.25 11.94-14.5 17.99-33.1 16.16-49.77A2.52 2.52 0 00212.1 0z" />
|
||||
</svg>
|
||||
<span className="ml-4 flex items-start flex-col leading-none">
|
||||
<span className="text-xs text-gray-600 mb-1">
|
||||
Download on the
|
||||
</span>
|
||||
<span className="title-font font-medium">App Store</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
|
||||
<img className="object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
LightHeroD.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightHeroD.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightHeroD;
|
||||
79
src/blocks/hero/light/e.js
Normal file
79
src/blocks/hero/light/e.js
Normal file
@@ -0,0 +1,79 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightHeroE(props) {
|
||||
return (
|
||||
<section className="text-gray-700 body-font">
|
||||
<div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
|
||||
<div className="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 mb-10 md:mb-0">
|
||||
<img className="object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600" />
|
||||
</div>
|
||||
<div className="lg:flex-grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col md:items-start md:text-left items-center text-center">
|
||||
<h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">
|
||||
Knausgaard typewriter readymade marfa
|
||||
</h1>
|
||||
<p className="mb-8 leading-relaxed">
|
||||
Chillwave portland ugh, knausgaard fam polaroid iPhone. Man braid
|
||||
swag typewriter affogato, hella selvage wolf narwhal dreamcatcher.
|
||||
</p>
|
||||
<div className="flex w-full md:justify-start justify-center">
|
||||
<input
|
||||
className={`bg-gray-100 rounded mr-4 border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 lg:w-full xl:w-1/2 w-2/4`}
|
||||
placeholder="Placeholder"
|
||||
type="text"
|
||||
/>
|
||||
<button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-sm mt-2 text-gray-500 mb-8 w-full">
|
||||
Neutra shabby chic ramps, viral fixie.
|
||||
</p>
|
||||
<div className="flex lg:flex-row md:flex-col">
|
||||
<button className="bg-gray-200 inline-flex py-3 px-5 rounded-lg items-center hover:bg-gray-300 focus:outline-none">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<path d="M99.617 8.057a50.191 50.191 0 00-38.815-6.713l230.932 230.933 74.846-74.846L99.617 8.057zM32.139 20.116c-6.441 8.563-10.148 19.077-10.148 30.199v411.358c0 11.123 3.708 21.636 10.148 30.199l235.877-235.877L32.139 20.116zM464.261 212.087l-67.266-37.637-81.544 81.544 81.548 81.548 67.273-37.64c16.117-9.03 25.738-25.442 25.738-43.908s-9.621-34.877-25.749-43.907zM291.733 279.711L60.815 510.629c3.786.891 7.639 1.371 11.492 1.371a50.275 50.275 0 0027.31-8.07l266.965-149.372-74.849-74.847z" />
|
||||
</svg>
|
||||
<span className="ml-4 flex items-start flex-col leading-none">
|
||||
<span className="text-xs text-gray-600 mb-1">GET IT ON</span>
|
||||
<span className="title-font font-medium">Google Play</span>
|
||||
</span>
|
||||
</button>
|
||||
<button className="bg-gray-200 inline-flex py-3 px-5 rounded-lg items-center lg:ml-4 md:ml-0 ml-4 md:mt-4 mt-0 lg:mt-0 hover:bg-gray-300 focus:outline-none">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 305 305"
|
||||
>
|
||||
<path d="M40.74 112.12c-25.79 44.74-9.4 112.65 19.12 153.82C74.09 286.52 88.5 305 108.24 305c.37 0 .74 0 1.13-.02 9.27-.37 15.97-3.23 22.45-5.99 7.27-3.1 14.8-6.3 26.6-6.3 11.22 0 18.39 3.1 25.31 6.1 6.83 2.95 13.87 6 24.26 5.81 22.23-.41 35.88-20.35 47.92-37.94a168.18 168.18 0 0021-43l.09-.28a2.5 2.5 0 00-1.33-3.06l-.18-.08c-3.92-1.6-38.26-16.84-38.62-58.36-.34-33.74 25.76-51.6 31-54.84l.24-.15a2.5 2.5 0 00.7-3.51c-18-26.37-45.62-30.34-56.73-30.82a50.04 50.04 0 00-4.95-.24c-13.06 0-25.56 4.93-35.61 8.9-6.94 2.73-12.93 5.09-17.06 5.09-4.64 0-10.67-2.4-17.65-5.16-9.33-3.7-19.9-7.9-31.1-7.9l-.79.01c-26.03.38-50.62 15.27-64.18 38.86z" />
|
||||
<path d="M212.1 0c-15.76.64-34.67 10.35-45.97 23.58-9.6 11.13-19 29.68-16.52 48.38a2.5 2.5 0 002.29 2.17c1.06.08 2.15.12 3.23.12 15.41 0 32.04-8.52 43.4-22.25 11.94-14.5 17.99-33.1 16.16-49.77A2.52 2.52 0 00212.1 0z" />
|
||||
</svg>
|
||||
<span className="ml-4 flex items-start flex-col leading-none">
|
||||
<span className="text-xs text-gray-600 mb-1">
|
||||
Download on the
|
||||
</span>
|
||||
<span className="title-font font-medium">App Store</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
LightHeroE.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightHeroE.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightHeroE;
|
||||
78
src/blocks/hero/light/f.js
Normal file
78
src/blocks/hero/light/f.js
Normal file
@@ -0,0 +1,78 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
function LightHeroF(props) {
|
||||
return (
|
||||
<section className="text-gray-700 body-font">
|
||||
<div className="container mx-auto flex flex-col px-5 py-24 justify-center items-center">
|
||||
<img className="lg:w-2/6 md:w-3/6 w-5/6 mb-10 object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600" />
|
||||
<div className="w-full md:w-2/3 flex flex-col mb-16 items-center text-center">
|
||||
<h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">
|
||||
Knausgaard typewriter readymade marfa
|
||||
</h1>
|
||||
<p className="mb-8 leading-relaxed">
|
||||
Kickstarter biodiesel roof party wayfarers cold-pressed. Palo santo
|
||||
live-edge tumeric scenester copper mug flexitarian. Prism vice offal
|
||||
plaid everyday carry. Gluten-free chia VHS squid listicle artisan.
|
||||
</p>
|
||||
<div className="flex w-full justify-center">
|
||||
<input
|
||||
className={`border-0 bg-gray-100 rounded mr-4 border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 lg:w-full xl:w-1/2 w-2/4 md:w-full`}
|
||||
placeholder="Placeholder"
|
||||
type="text"
|
||||
/>
|
||||
<button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-sm mt-2 text-gray-500 mb-8 w-full">
|
||||
Neutra shabby chic ramps, viral fixie.
|
||||
</p>
|
||||
<div className="flex">
|
||||
<button className="bg-gray-200 inline-flex py-3 px-5 rounded-lg items-center hover:bg-gray-300 focus:outline-none">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<path d="M99.617 8.057a50.191 50.191 0 00-38.815-6.713l230.932 230.933 74.846-74.846L99.617 8.057zM32.139 20.116c-6.441 8.563-10.148 19.077-10.148 30.199v411.358c0 11.123 3.708 21.636 10.148 30.199l235.877-235.877L32.139 20.116zM464.261 212.087l-67.266-37.637-81.544 81.544 81.548 81.548 67.273-37.64c16.117-9.03 25.738-25.442 25.738-43.908s-9.621-34.877-25.749-43.907zM291.733 279.711L60.815 510.629c3.786.891 7.639 1.371 11.492 1.371a50.275 50.275 0 0027.31-8.07l266.965-149.372-74.849-74.847z" />
|
||||
</svg>
|
||||
<span className="ml-4 flex items-start flex-col leading-none">
|
||||
<span className="text-xs text-gray-600 mb-1">GET IT ON</span>
|
||||
<span className="title-font font-medium">Google Play</span>
|
||||
</span>
|
||||
</button>
|
||||
<button className="bg-gray-200 inline-flex py-3 px-5 rounded-lg items-center ml-4 hover:bg-gray-300 focus:outline-none">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 305 305"
|
||||
>
|
||||
<path d="M40.74 112.12c-25.79 44.74-9.4 112.65 19.12 153.82C74.09 286.52 88.5 305 108.24 305c.37 0 .74 0 1.13-.02 9.27-.37 15.97-3.23 22.45-5.99 7.27-3.1 14.8-6.3 26.6-6.3 11.22 0 18.39 3.1 25.31 6.1 6.83 2.95 13.87 6 24.26 5.81 22.23-.41 35.88-20.35 47.92-37.94a168.18 168.18 0 0021-43l.09-.28a2.5 2.5 0 00-1.33-3.06l-.18-.08c-3.92-1.6-38.26-16.84-38.62-58.36-.34-33.74 25.76-51.6 31-54.84l.24-.15a2.5 2.5 0 00.7-3.51c-18-26.37-45.62-30.34-56.73-30.82a50.04 50.04 0 00-4.95-.24c-13.06 0-25.56 4.93-35.61 8.9-6.94 2.73-12.93 5.09-17.06 5.09-4.64 0-10.67-2.4-17.65-5.16-9.33-3.7-19.9-7.9-31.1-7.9l-.79.01c-26.03.38-50.62 15.27-64.18 38.86z" />
|
||||
<path d="M212.1 0c-15.76.64-34.67 10.35-45.97 23.58-9.6 11.13-19 29.68-16.52 48.38a2.5 2.5 0 002.29 2.17c1.06.08 2.15.12 3.23.12 15.41 0 32.04-8.52 43.4-22.25 11.94-14.5 17.99-33.1 16.16-49.77A2.52 2.52 0 00212.1 0z" />
|
||||
</svg>
|
||||
<span className="ml-4 flex items-start flex-col leading-none">
|
||||
<span className="text-xs text-gray-600 mb-1">
|
||||
Download on the
|
||||
</span>
|
||||
<span className="title-font font-medium">App Store</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
LightHeroF.defaultProps = {
|
||||
theme: 'indigo'
|
||||
};
|
||||
|
||||
LightHeroF.propTypes = {
|
||||
theme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default LightHeroF;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user