+
);
}
-function navBarVariants(props) {
- const companyName = props.companyName;
- const leftLinks = props.leftLinks;
- const rightLinks = props.rightLinks;
- const navBarLinksPosition = props.navBarLinksPosition || 'left';
+function desktopNavVariants(props) {
+ const desktopNavVariant = props.desktopNavVariant || 'variant-a';
+ const title = props.title;
+ const isTitleVisible = props.isTitleVisible;
+ const logo = props.logoUrl;
+ const logoAlt = props.logoAltText || '';
+ const primaryLinks = props.primaryLinks;
+ const secondaryLinks = props.secondaryLinks;
- if (navBarLinksPosition === 'left') {
+ if (desktopNavVariant === 'variant-a') {
return (
<>
-
+ {primaryLinks && primaryLinks.length > 0 && (
+
+ )}
+ {secondaryLinks && secondaryLinks.length > 0 && (
+
+ )}
+ {mobileNavVariants(props)}
);
- } else if (navBarLinksPosition === 'center') {
+ } else if (desktopNavVariant === 'variant-b') {
return (
<>
- {siteLogoLink({ companyName, navBarLinksPosition })}
- {leftLinks && leftLinks.length > 0 &&
+ {primaryLinks && primaryLinks.length > 0 && (
+
+ )}
+ {secondaryLinks && secondaryLinks.length > 0 && (
+
+ )}
+ {mobileNavVariants(props)}
);
- } else if (navBarLinksPosition === 'right') {
- const links = (leftLinks || []).concat(rightLinks || []);
+ } else if (desktopNavVariant === 'variant-c') {
+ const links = (primaryLinks || []).concat(secondaryLinks || []);
return (
<>
- {siteLogoLink({ companyName, navBarLinksPosition })}
- {links.length > 0 &&
+ )}
+ {mobileNavVariants(props)}
+
+ );
+ } else if (desktopNavVariant === 'variant-d') {
+ return (
+ <>
+
+ {siteLogoLink({ title, logo, logoAlt, isTitleVisible })}
+
+ {primaryLinks && primaryLinks.length > 0 && (
+
+ )}
+ {secondaryLinks && secondaryLinks.length > 0 && (
+
+ )}
+ {mobileNavVariants(props)}
);
}
}
-function siteLogoLink({ companyName, navBarLinksPosition }) {
+function mobileNavVariants(props) {
+ const [isMenuOpen, setIsMenuOpen] = useState(false);
+ const secondaryColors = props.secondaryColors || 'colors-a';
+ const mobileNavVariant = props.mobileNavVariant || 'variant-a';
+ const title = props.title;
+ const isTitleVisible = props.isTitleVisible;
+ const logo = props.logoUrl;
+ const logoAlt = props.logoAltText || '';
+ const primaryLinks = props.primaryLinks;
+ const secondaryLinks = props.secondaryLinks;
+
+ if (mobileNavVariant === 'variant-a') {
+ return (
+
+ );
+ } else if (mobileNavVariant === 'variant-b') {
+ return (
+
+
setIsMenuOpen(true)}>
+ Open Menu
+
+ {isMenuOpen && (
+
+
setIsMenuOpen(false)}
+ />
+
+
+ {siteLogoLink({ title, logo, logoAlt, isTitleVisible })}
+ setIsMenuOpen(false)}
+ >
+
+
+
{listOfLinks(primaryLinks.concat(secondaryLinks), true)}
+
+
+ )}
+
+ );
+ }
+}
+
+function siteLogoLink({ title, logo, logoAlt, isTitleVisible }) {
return (
-
- {companyName}
+
+ {logo && {title} }
);
@@ -121,22 +189,27 @@ function siteLogoLink({ companyName, navBarLinksPosition }) {
function listOfLinks(links, inMenu = false) {
return links.map((link, idx) => (
- {link.style !== 'button' ? (
+ {(link.type === 'primary-button' || link.type === 'secondary-button') ? (
+
{link.label}
- ) : (
-
));
diff --git a/src/components/navbar/navbar.stories.js b/src/components/navbar/navbar.stories.js
index 5be669d5..d774ed29 100644
--- a/src/components/navbar/navbar.stories.js
+++ b/src/components/navbar/navbar.stories.js
@@ -5,8 +5,24 @@ export default {
title: 'Components/Navigation Bar',
component: NavBar,
argTypes: {
- navBarLinksPosition: {
- options: ['left', 'center', 'right'],
+ desktopNavVariant: {
+ options: ['variant-a', 'variant-b', 'variant-c', 'variant-d'],
+ control: { type: 'select' }
+ },
+ mobileNavVariant: {
+ options: ['variant-a', 'variant-b'],
+ control: { type: 'select' }
+ },
+ primaryColors: {
+ options: ['colors-a', 'colors-b', 'colors-c', 'colors-d', 'colors-e'],
+ control: { type: 'select' }
+ },
+ secondaryColors: {
+ options: ['colors-a', 'colors-b', 'colors-c', 'colors-d', 'colors-e'],
+ control: { type: 'select' }
+ },
+ width: {
+ options: ['narrow', 'wide', 'full'],
control: { type: 'select' }
}
}
@@ -15,8 +31,16 @@ export default {
const Template = (args) =>
;
const args = {
- companyName: 'Stackbit',
- leftLinks: [
+ desktopNavVariant: 'variant-a',
+ mobileNavVariant: 'variant-a',
+ primaryColors: 'colors-d',
+ secondaryColors: 'colors-a',
+ width: 'wide',
+ title: 'Fish_of_the_day',
+ isTitleVisible: true,
+ logoUrl: '/images/logo.svg',
+ logoAltText: 'Logo',
+ primaryLinks: [
{
label: 'About us',
url: '/about',
@@ -38,36 +62,55 @@ const args = {
alt: 'Pricing'
}
],
- rightLinks: [
+ secondaryLinks: [
{
label: 'Sign in',
url: '/',
- style: 'link',
- alt: 'Sign in'
+ alt: 'Sign in',
+ type: 'link'
},
{
label: 'Sign up',
url: '/',
- style: 'button',
- alt: 'Sign up'
+ alt: 'Sign up',
+ type: 'secondary-button'
}
- ],
- navBarLinksPosition: 'left'
+ ]
};
-//π Each story then reuses that template
export const Primary = Template.bind({});
-Primary.storyName = 'Left and right links';
-Primary.args = { ...args, navBarLinksPosition: 'left' };
+Primary.storyName = 'Navbar With Logo and Primary Links on the Left';
+Primary.args = args;
export const VariantB = Template.bind({});
-VariantB.storyName = 'Center and right links';
-VariantB.args = { ...args, navBarLinksPosition: 'center' };
+VariantB.storyName = 'Navbar With Logo on the Left and Primary Links Centered';
+VariantB.args = {
+ ...args,
+ desktopNavVariant: 'variant-b',
+ primaryColors: 'colors-a',
+ secondaryColors: 'colors-e'
+};
export const VariantC = Template.bind({});
-VariantC.storyName = 'Left links aligned to the right';
-VariantC.args = { ...args, navBarLinksPosition: 'right' };
+VariantC.storyName = 'Navbar With Logo on the Left and Primary Links on the Right';
+VariantC.args = {
+ ...args,
+ desktopNavVariant: 'variant-c',
+ mobileNavVariant: 'variant-b',
+ primaryColors: 'colors-b',
+ secondaryColors: 'colors-e',
+ width: 'full',
+ logoUrl: undefined
+};
export const VariantD = Template.bind({});
-VariantD.storyName = 'Left links empty';
-VariantD.args = { ...args, leftLinks: [], rightLinks: args.leftLinks.concat(args.rightLinks), navBarLinksPosition: 'left' };
+VariantD.storyName = 'Navbar With Logo Centered and Primary Links on the Left';
+VariantD.args = {
+ ...args,
+ desktopNavVariant: 'variant-d',
+ mobileNavVariant: 'variant-b',
+ primaryColors: 'colors-b',
+ secondaryColors: 'colors-b',
+ logoUrl: '/images/logo-alt.svg',
+ isTitleVisible: false
+};
diff --git a/src/components/posts-section/index.js b/src/components/posts-section/index.js
new file mode 100644
index 00000000..34159040
--- /dev/null
+++ b/src/components/posts-section/index.js
@@ -0,0 +1,132 @@
+import ReactMarkdown from 'react-markdown';
+import classNames from 'classnames';
+import Link from 'next/link';
+import Badge from '../badge';
+
+export default function PostsSection(props) {
+ const colors = props.colors || 'colors-a';
+ const width = props.width || 'full';
+ const height = props.height || 'auto';
+ const alignHoriz = props.alignHoriz || 'left';
+ return (
+
+
+ {(props.badge || props.title || props.subtitle) && (
+
+ {props.badge &&
}
+ {props.title && (
+
+
+ {props.title}
+
+
+ )}
+ {props.subtitle &&
{props.subtitle}
}
+
+ )}
+
+
+
+ );
+}
+
+function PostVariants({ variant, ...props }) {
+ variant = variant || 'variant-a';
+ switch (variant) {
+ case 'variant-a':
+ return PostsVariantA(props);
+ case 'variant-b':
+ return PostsVariantB(props);
+ }
+ return null;
+}
+
+function PostsVariantA(props) {
+ const posts = props.posts || [];
+ if (posts.length === 0) {
+ return null;
+ }
+ return (
+
+ );
+}
+
+function PostsVariantB(props) {
+ const posts = props.posts || [];
+ if (posts.length === 0) {
+ return null;
+ }
+ return (
+
+ {posts.map((post, idx) => (
+
+ {post.thumbImageUrl && (
+
+ )}
+
+
+ {post.excerpt &&
{post.excerpt} }
+
+ ))}
+
+ );
+}
+
+const components = {
+ strong({ children }) {
+ return
{children} ;
+ }
+};
diff --git a/src/components/posts-section/posts-section.stories.js b/src/components/posts-section/posts-section.stories.js
new file mode 100644
index 00000000..a3eff9e2
--- /dev/null
+++ b/src/components/posts-section/posts-section.stories.js
@@ -0,0 +1,89 @@
+import React from 'react';
+import PostsSection from './index';
+
+export default {
+ title: 'Components/Posts Section',
+ component: PostsSection,
+ argTypes: {
+ variant: {
+ options: ['variant-a', 'variant-b'],
+ control: { type: 'select' }
+ },
+ colors: {
+ options: ['colors-a', 'colors-b', 'colors-c', 'colors-d', 'colors-e'],
+ control: { type: 'select' }
+ },
+ width: {
+ options: ['narrow', 'wide', 'full'],
+ control: { type: 'select' }
+ },
+ height: {
+ options: ['auto', 'viewport'],
+ control: { type: 'select' }
+ },
+ alignHoriz: {
+ options: ['left', 'right', 'center'],
+ control: { type: 'select' }
+ }
+ }
+};
+
+const Template = (args) =>
;
+
+const args = {
+ type: 'posts_section',
+ variant: 'variant-a',
+ colors: 'colors-d',
+ width: 'wide',
+ height: 'auto',
+ alignHoriz: 'center',
+ badge: '',
+ subtitle: '',
+ posts: [
+ {
+ title: 'Sustainability at itβs purest',
+ date: '2021-07-03',
+ excerpt: 'Weβre local, seasonal fisherman, supporting fishing restrictions. We fish what the sea has to offer, nothing more, and no cheating.',
+ thumbImageUrl: '/images/fisherman.jpg',
+ thumbImageAltText: 'Fisherman',
+ url: '#',
+ content:
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ea mala virtuti magnitudine obruebantur. Duo Reges: constructio interrete. An hoc usque quaque, aliter in vita? Gracchum patrem non beatiorem fuisse quam fillum, cum alter stabilire rem publicam studuerit, alter evertere. Quo plebiscito decreta a senatu est consuli quaestio Cn. Illud non continuo, ut aeque incontentae. Atqui pugnantibus et contrariis studiis consiliisque semper utens nihil quieti videre, nihil tranquilli potest. Itaque hoc frequenter dici solet a vobis, non intellegere nos, quam dicat Epicurus voluptatem. Sin kakan malitiam dixisses, ad aliud nos unum certum vitium consuetudo Latina traduceret.\n\n## Sed Ille, UT Dixi, Vitiose\n\nUtrum igitur tibi litteram videor an totas paginas commovere? Potius inflammat, ut coercendi magis quam dedocendi esse videantur. Ne in odium veniam, si amicum destitero tueri. Ne amores quidem sanctos a sapiente alienos esse arbitrantur. Quid ergo aliud intellegetur nisi uti ne quae pars naturae neglegatur? Quis istud, quaeso, nesciebat? Primum divisit ineleganter; Hoc unum Aristo tenuit: praeter vitia atque virtutes negavit rem esse ullam aut fugiendam aut expetendam. Et ille ridens: Video, inquit, quid agas; In his igitur partibus duabus nihil erat, quod Zeno commutare gestiret.\n\n'
+ },
+ {
+ title: 'As fresh as it gets',
+ date: '2021-07-01',
+ excerpt: 'Same day delivery, cleaned, on ice, ready to be eaten.',
+ thumbImageUrl: '/images/mackerels.jpg',
+ thumbImageAltText: 'Mackerels',
+ url: '#',
+ content:
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ea mala virtuti magnitudine obruebantur. Duo Reges: constructio interrete. An hoc usque quaque, aliter in vita? Gracchum patrem non beatiorem fuisse quam fillum, cum alter stabilire rem publicam studuerit, alter evertere. Quo plebiscito decreta a senatu est consuli quaestio Cn. Illud non continuo, ut aeque incontentae. Atqui pugnantibus et contrariis studiis consiliisque semper utens nihil quieti videre, nihil tranquilli potest. Itaque hoc frequenter dici solet a vobis, non intellegere nos, quam dicat Epicurus voluptatem. Sin kakan malitiam dixisses, ad aliud nos unum certum vitium consuetudo Latina traduceret.\n\n## Sed Ille, UT Dixi, Vitiose\n\nUtrum igitur tibi litteram videor an totas paginas commovere? Potius inflammat, ut coercendi magis quam dedocendi esse videantur. Ne in odium veniam, si amicum destitero tueri. Ne amores quidem sanctos a sapiente alienos esse arbitrantur. Quid ergo aliud intellegetur nisi uti ne quae pars naturae neglegatur? Quis istud, quaeso, nesciebat? Primum divisit ineleganter; Hoc unum Aristo tenuit: praeter vitia atque virtutes negavit rem esse ullam aut fugiendam aut expetendam. Et ille ridens: Video, inquit, quid agas; In his igitur partibus duabus nihil erat, quod Zeno commutare gestiret.\n\n'
+ },
+ {
+ title: 'Bi-weekly subscription',
+ date: '2021-06-28',
+ excerpt: 'This feature is the thing you were missing in your workflow, thank god we have it for you to use.',
+ thumbImageUrl: '/images/fish-lemon.jpg',
+ thumbImageAltText: 'Raw fish, spices, lemon',
+ url: '#',
+ content:
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ea mala virtuti magnitudine obruebantur. Duo Reges: constructio interrete. An hoc usque quaque, aliter in vita? Gracchum patrem non beatiorem fuisse quam fillum, cum alter stabilire rem publicam studuerit, alter evertere. Quo plebiscito decreta a senatu est consuli quaestio Cn. Illud non continuo, ut aeque incontentae. Atqui pugnantibus et contrariis studiis consiliisque semper utens nihil quieti videre, nihil tranquilli potest. Itaque hoc frequenter dici solet a vobis, non intellegere nos, quam dicat Epicurus voluptatem. Sin kakan malitiam dixisses, ad aliud nos unum certum vitium consuetudo Latina traduceret.\n\n## Sed Ille, UT Dixi, Vitiose\n\nUtrum igitur tibi litteram videor an totas paginas commovere? Potius inflammat, ut coercendi magis quam dedocendi esse videantur. Ne in odium veniam, si amicum destitero tueri. Ne amores quidem sanctos a sapiente alienos esse arbitrantur. Quid ergo aliud intellegetur nisi uti ne quae pars naturae neglegatur? Quis istud, quaeso, nesciebat? Primum divisit ineleganter; Hoc unum Aristo tenuit: praeter vitia atque virtutes negavit rem esse ullam aut fugiendam aut expetendam. Et ille ridens: Video, inquit, quid agas; In his igitur partibus duabus nihil erat, quod Zeno commutare gestiret.\n\n'
+ }
+ ]
+};
+
+export const Primary = Template.bind({});
+Primary.storyName = 'Three Cols, Post Content Below Image';
+Primary.args = args;
+
+export const VariantB = Template.bind({});
+VariantB.storyName = 'Two Cols, Post Content to the Right of the Image';
+VariantB.args = {
+ ...args,
+ variant: 'variant-b',
+ colors: 'colors-b',
+ width: 'full',
+ alignHoriz: 'left',
+ title: 'Latest from **the Blog**'
+};
diff --git a/src/components/testimonials-section/index.js b/src/components/testimonials-section/index.js
new file mode 100644
index 00000000..c70775e6
--- /dev/null
+++ b/src/components/testimonials-section/index.js
@@ -0,0 +1,105 @@
+import ReactMarkdown from 'react-markdown';
+import classNames from 'classnames';
+
+export default function TestimonialsSection(props) {
+ const colors = props.colors || 'colors-a';
+ const width = props.width || 'full';
+ const height = props.height || 'auto';
+
+ return (
+
+ );
+}
+
+function TestimonialVariants({ variant, ...props }) {
+ variant = variant || 'variant-a';
+ switch (variant) {
+ case 'variant-a':
+ return TestimonialsVariantA(props);
+ case 'variant-b':
+ return TestimonialsVariantB(props);
+ }
+ return null;
+}
+
+function TestimonialsVariantA(props) {
+ const testimonials = props.testimonials || [];
+ if (testimonials.length === 0) {
+ return null;
+ }
+ return (
+ <>
+ {testimonials.map((testimonial, idx) => (
+
+ {testimonial.logoUrl &&
+ {testimonial.quote}
+
+ )}
+ {(testimonial.name || testimonial.title) && (
+
+ {testimonial.imageUrl && (
+ {testimonial.name}
+ {testimonial.title}
+
+ )}
+
+ ))}
+
+ );
+}
+
+function TestimonialsVariantB(props) {
+ const testimonials = props.testimonials || [];
+ if (testimonials.length === 0) {
+ return null;
+ }
+ return (
+ <>
+ {testimonials.map((testimonial, idx) => (
+
+ {testimonial.imageUrl && (
+
+
+
+ {testimonial.quote && (
+
+ {testimonial.quote}
+
+ )}
+ {(testimonial.name || testimonial.title) && (
+
+ {testimonial.name}
+ {testimonial.title}
+
+ )}
+
+ ))}
+
+ );
+}
diff --git a/src/components/testimonials-section/testimonials-section.stories.js b/src/components/testimonials-section/testimonials-section.stories.js
new file mode 100644
index 00000000..f0898c98
--- /dev/null
+++ b/src/components/testimonials-section/testimonials-section.stories.js
@@ -0,0 +1,59 @@
+import React from 'react';
+import TestimonialsSection from './index';
+
+export default {
+ title: 'Components/Testimonials Section',
+ component: TestimonialsSection,
+ argTypes: {
+ variant: {
+ options: ['variant-a', 'variant-b'],
+ control: { type: 'select' }
+ },
+ colors: {
+ options: ['colors-a', 'colors-b', 'colors-c', 'colors-d', 'colors-e'],
+ control: { type: 'select' }
+ },
+ width: {
+ options: ['narrow', 'wide', 'full'],
+ control: { type: 'select' }
+ },
+ height: {
+ options: ['auto', 'viewport'],
+ control: { type: 'select' }
+ }
+ }
+};
+
+const Template = (args) =>
;
+
+const args = {
+ type: 'testimonials_section',
+ variant: 'variant-a',
+ colors: 'colors-e',
+ width: 'wide',
+ height: 'auto',
+ testimonials: [
+ {
+ quote: 'βItβs great to see someone taking action while still maintaining a sustainable fish supply to home cooks.β',
+ name: 'Isabelle Parks',
+ title: 'Head chef at The Cook',
+ imageUrl: '/images/isabelle-parks.jpg',
+ imageAltText: 'Photo of Isabelle Parks',
+ logoUrl: '/images/the-cook-logo.svg',
+ logoAltText: 'The Cook logo'
+ }
+ ]
+};
+
+export const Primary = Template.bind({});
+Primary.storyName = 'Quote Under Image';
+Primary.args = args;
+
+export const VariantB = Template.bind({});
+VariantB.storyName = 'Quote to the Right of the Image';
+VariantB.args = {
+ ...args,
+ variant: 'variant-b',
+ colors: 'colors-a',
+ width: 'narrow'
+};
diff --git a/src/components/video-block/index.js b/src/components/video-block/index.js
new file mode 100644
index 00000000..f789bfa2
--- /dev/null
+++ b/src/components/video-block/index.js
@@ -0,0 +1,19 @@
+export default function VideoBlock(props) {
+ const videoUrl = props.videoUrl;
+ if (!videoUrl) {
+ return null;
+ }
+ return (
+
+
+ );
+}
diff --git a/src/components/video-block/video-block.stories.js b/src/components/video-block/video-block.stories.js
new file mode 100644
index 00000000..7c74f655
--- /dev/null
+++ b/src/components/video-block/video-block.stories.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import VideoBlock from './index';
+
+export default {
+ title: 'Atoms/Video Block',
+ component: VideoBlock
+};
+
+const Template = (args) =>
;
+
+const args = {
+ type: 'video_block',
+ videoUrl: '/videos/stackbit-for-marketers.mp4',
+ posterUrl: '/images/stackbit-for-marketers.jpg',
+ controls: true
+};
+
+export const Primary = Template.bind({});
+Primary.storyName = 'Video';
+Primary.args = { ...args };
diff --git a/src/css/global.css b/src/css/global.css
new file mode 100644
index 00000000..b5c61c95
--- /dev/null
+++ b/src/css/global.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 00000000..54417fab
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,2 @@
+export * as components from './components';
+export * as layouts from './layouts';
diff --git a/src/layouts/advanced/advanced.stories.js b/src/layouts/advanced/advanced.stories.js
new file mode 100644
index 00000000..b29857ca
--- /dev/null
+++ b/src/layouts/advanced/advanced.stories.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import Advanced from './index';
+
+import * as CTASectionStories from '../../components/cta-section/cta-section.stories';
+import * as NavBarStories from '../../components/navbar/navbar.stories';
+import * as FooterStories from '../../components/footer/footer.stories';
+import * as ContactSectionStories from '../../components/contact-section/contact-section.stories';
+import * as HeroSectionStories from '../../components/hero-section/hero-section.stories';
+import * as PostsSectionStories from '../../components/posts-section/posts-section.stories';
+import * as TestimonialsSectionStories from '../../components/testimonials-section/testimonials-section.stories';
+
+export default {
+ title: 'Layouts/Advanced Page',
+ component: Advanced
+};
+
+const Template = (args) =>
;
+
+export const Primary = Template.bind({});
+Primary.storyName = 'Advanced Page';
+Primary.args = {
+ page: {
+ title: 'Example Page',
+ sections: [
+ HeroSectionStories.Primary.args,
+ TestimonialsSectionStories.Primary.args,
+ PostsSectionStories.Primary.args,
+ CTASectionStories.Primary.args,
+ ContactSectionStories.Primary.args
+ ]
+ },
+ siteConfig: {
+ ...NavBarStories.Primary.args,
+ ...FooterStories.Primary.args
+ }
+};
diff --git a/src/layouts/landing/index.js b/src/layouts/advanced/index.js
similarity index 65%
rename from src/layouts/landing/index.js
rename to src/layouts/advanced/index.js
index c37de73b..3f14f8ac 100644
--- a/src/layouts/landing/index.js
+++ b/src/layouts/advanced/index.js
@@ -1,15 +1,19 @@
-import React from 'react';
-
-import BaseLayout from '../base-layout/base-layout';
-import TeamSection from '../../components/team-section';
+import BaseLayout from '../base-layout';
+import ContactSection from '../../components/contact-section';
+import CTASection from '../../components/cta-section';
import HeroSection from '../../components/hero-section';
+import PostsSection from '../../components/posts-section';
+import TestimonialsSection from '../../components/testimonials-section';
const components = {
- section_team: TeamSection,
- section_hero: HeroSection
+ contact_section: ContactSection,
+ cta_section: CTASection,
+ hero_section: HeroSection,
+ posts_section: PostsSection,
+ testimonials_section: TestimonialsSection
};
-export default function Landing(props) {
+export default function Advanced(props) {
const siteConfig = props?.siteConfig ?? {};
const page = props?.page ?? {};
const sections = page?.sections ?? [];
diff --git a/src/layouts/base-layout/base-layout.js b/src/layouts/base-layout/index.js
similarity index 99%
rename from src/layouts/base-layout/base-layout.js
rename to src/layouts/base-layout/index.js
index 6e19a94d..aded33d9 100644
--- a/src/layouts/base-layout/base-layout.js
+++ b/src/layouts/base-layout/index.js
@@ -1,4 +1,5 @@
import Head from 'next/head';
+
import NavBar from '../../components/navbar';
import Footer from '../../components/footer';
diff --git a/src/layouts/index.js b/src/layouts/index.js
new file mode 100644
index 00000000..a3e215af
--- /dev/null
+++ b/src/layouts/index.js
@@ -0,0 +1,9 @@
+import dynamic from 'next/dynamic';
+
+export { default as Advanced } from './advanced';
+export { default as BaseLayout } from './base-layout';
+
+// dynamic maps from model name to dynamic import
+export const dynamicLayouts = {
+ advanced: dynamic(() => import('./advanced'))
+}
diff --git a/src/layouts/landing/landing.stories.js b/src/layouts/landing/landing.stories.js
deleted file mode 100644
index 2b88d492..00000000
--- a/src/layouts/landing/landing.stories.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react';
-import Landing from './index';
-
-import * as NavBarStories from '../../components/navbar/navbar.stories';
-import FooterStory from '../../components/footer/footer.stories';
-import * as HeroSectionStories from '../../components/hero-section/hero-section.stories';
-import * as TeamSectionStories from '../../components/team-section/team-section.stories';
-
-export default {
- title: 'Layouts/Landing Page',
- component: Landing
-};
-
-const Template = (args) =>
;
-
-export const Primary = Template.bind({});
-Primary.storyName = 'Landing Page';
-Primary.args = {
- page: {
- title: 'Example Page',
- sections: [
- HeroSectionStories.HeroVideo.args,
- TeamSectionStories.Primary.args,
- HeroSectionStories.HeroSVG.args
- ]
- },
- siteConfig: {
- ...NavBarStories.Primary.args,
- ...FooterStory.args
- }
-};
diff --git a/src/svgs/arrow-right.js b/src/svgs/arrow-right.js
index ceb51180..cf8a27cd 100644
--- a/src/svgs/arrow-right.js
+++ b/src/svgs/arrow-right.js
@@ -1,7 +1,7 @@
-export default function ArrowRight() {
+export default function ArrowRight({ className }) {
return (
-
-
+
);
}
diff --git a/src/svgs/cart.js b/src/svgs/cart.js
index fbe104c3..57791325 100644
--- a/src/svgs/cart.js
+++ b/src/svgs/cart.js
@@ -1,10 +1,7 @@
-export default function Cart() {
+export default function Cart({ className }) {
return (
-
-
+
);
}
diff --git a/src/svgs/close.js b/src/svgs/close.js
new file mode 100644
index 00000000..7881ed55
--- /dev/null
+++ b/src/svgs/close.js
@@ -0,0 +1,7 @@
+export default function Close({ className }) {
+ return (
+
+
+ );
+}
diff --git a/src/svgs/facebook.js b/src/svgs/facebook.js
index e2ad227d..6b0b0e51 100644
--- a/src/svgs/facebook.js
+++ b/src/svgs/facebook.js
@@ -1,7 +1,7 @@
-export default function Facebook() {
+export default function Facebook({ className }) {
return (
-
-
+
);
}
diff --git a/src/svgs/github.js b/src/svgs/github.js
new file mode 100644
index 00000000..1e3687f4
--- /dev/null
+++ b/src/svgs/github.js
@@ -0,0 +1,7 @@
+export default function GitHub({ className }) {
+ return (
+
+
+ );
+}
diff --git a/src/svgs/hamburger.js b/src/svgs/hamburger.js
new file mode 100644
index 00000000..b909d141
--- /dev/null
+++ b/src/svgs/hamburger.js
@@ -0,0 +1,7 @@
+export default function Hamburger({ className }) {
+ return (
+
+
+ );
+}
diff --git a/src/svgs/instagram.js b/src/svgs/instagram.js
index eafbf6fb..2c773a89 100644
--- a/src/svgs/instagram.js
+++ b/src/svgs/instagram.js
@@ -1,8 +1,7 @@
-export default function Instagram() {
+export default function Instagram({ className }) {
return (
-
-
+
);
}
diff --git a/src/svgs/linkedin.js b/src/svgs/linkedin.js
new file mode 100644
index 00000000..c2a5e416
--- /dev/null
+++ b/src/svgs/linkedin.js
@@ -0,0 +1,7 @@
+export default function LinkedIn({ className }) {
+ return (
+
+
+ );
+}
diff --git a/src/svgs/twitter.js b/src/svgs/twitter.js
index 413cb488..7f65bcd3 100644
--- a/src/svgs/twitter.js
+++ b/src/svgs/twitter.js
@@ -1,7 +1,7 @@
-export default function Twitter() {
+export default function Twitter({ className }) {
return (
-
-
+
);
}
diff --git a/src/svgs/video-play.js b/src/svgs/video-play.js
index 218d6868..64ae219b 100644
--- a/src/svgs/video-play.js
+++ b/src/svgs/video-play.js
@@ -1,6 +1,6 @@
-export default function VideoPlay() {
+export default function VideoPlay({ className }) {
return (
-
+
);
diff --git a/src/utils/dynamic.js b/src/utils/dynamic.js
new file mode 100644
index 00000000..f2baa3c6
--- /dev/null
+++ b/src/utils/dynamic.js
@@ -0,0 +1,3 @@
+export default async function dynamic(callback) {
+ return callback();
+}
diff --git a/themes/kitwind.js b/themes/kitwind.js
deleted file mode 100644
index 8f7c72da..00000000
--- a/themes/kitwind.js
+++ /dev/null
@@ -1,330 +0,0 @@
-// https://kitwind.io/products/kometa/config
-
-const defaultTheme = require('tailwindcss/defaultTheme');
-
-module.exports = {
- theme: {
- extend: {
- fontFamily: {
- sans: ['Montserrat', ...defaultTheme.fontFamily.sans]
- },
- colors: {
- red: {
- 50: '#ffebee',
- 100: '#ffcdd2',
- 200: '#ef9a9a',
- 300: '#e57373',
- 400: '#ef5350',
- 500: '#f44336',
- 600: '#e53935',
- 700: '#d32f2f',
- 800: '#c62828',
- 900: '#b71c1c',
- 'accent-100': '#ff8a80',
- 'accent-200': '#ff5252',
- 'accent-400': '#ff1744',
- 'accent-700': '#d50000'
- },
- purple: {
- 50: '#f3e5f5',
- 100: '#e1bee7',
- 200: '#ce93d8',
- 300: '#ba68c8',
- 400: '#ab47bc',
- 500: '#9c27b0',
- 600: '#8e24aa',
- 700: '#7b1fa2',
- 800: '#6a1b9a',
- 900: '#4a148c',
- 'accent-100': '#ea80fc',
- 'accent-200': '#e040fb',
- 'accent-400': '#d500f9',
- 'accent-700': '#aa00ff'
- },
- 'deep-purple': {
- 50: '#ede7f6',
- 100: '#d1c4e9',
- 200: '#b39ddb',
- 300: '#9575cd',
- 400: '#7e57c2',
- 500: '#673ab7',
- 600: '#5e35b1',
- 700: '#512da8',
- 800: '#4527a0',
- 900: '#311b92',
- 'accent-100': '#b388ff',
- 'accent-200': '#7c4dff',
- 'accent-400': '#651fff',
- 'accent-700': '#6200ea'
- },
- teal: {
- 50: '#e0f2f1',
- 100: '#b2dfdb',
- 200: '#80cbc4',
- 300: '#4db6ac',
- 400: '#26a69a',
- 500: '#009688',
- 600: '#00897b',
- 700: '#00796b',
- 800: '#00695c',
- 900: '#004d40',
- 'accent-100': '#a7ffeb',
- 'accent-200': '#64ffda',
- 'accent-400': '#1de9b6',
- 'accent-700': '#00bfa5'
- },
- indigo: {
- 50: '#e8eaf6',
- 100: '#c5cae9',
- 200: '#9fa8da',
- 300: '#7986cb',
- 400: '#5c6bc0',
- 500: '#3f51b5',
- 600: '#3949ab',
- 700: '#303f9f',
- 800: '#283593',
- 900: '#1a237e',
- 'accent-100': '#8c9eff',
- 'accent-200': '#536dfe',
- 'accent-400': '#3d5afe',
- 'accent-700': '#304ffe'
- },
- pink: {
- 50: '#fce4ec',
- 100: '#f8bbd0',
- 200: '#f48fb1',
- 300: '#f06292',
- 400: '#ec407a',
- 500: '#e91e63',
- 600: '#d81b60',
- 700: '#c2185b',
- 800: '#ad1457',
- 900: '#880e4f',
- 'accent-100': '#ff80ab',
- 'accent-200': '#ff4081',
- 'accent-400': '#f50057',
- 'accent-700': '#c51162'
- },
- blue: {
- 50: '#e3f2fd',
- 100: '#bbdefb',
- 200: '#90caf9',
- 300: '#64b5f6',
- 400: '#42a5f5',
- 500: '#2196f3',
- 600: '#1e88e5',
- 700: '#1976d2',
- 800: '#1565c0',
- 900: '#0d47a1',
- 'accent-100': '#82b1ff',
- 'accent-200': '#448aff',
- 'accent-400': '#2979ff',
- 'accent-700': '#2962ff'
- },
- 'light-blue': {
- 50: '#e1f5fe',
- 100: '#b3e5fc',
- 200: '#81d4fa',
- 300: '#4fc3f7',
- 400: '#29b6f6',
- 500: '#03a9f4',
- 600: '#039be5',
- 700: '#0288d1',
- 800: '#0277bd',
- 900: '#01579b',
- 'accent-100': '#80d8ff',
- 'accent-200': '#40c4ff',
- 'accent-400': '#00b0ff',
- 'accent-700': '#0091ea'
- },
- cyan: {
- 50: '#e0f7fa',
- 100: '#b2ebf2',
- 200: '#80deea',
- 300: '#4dd0e1',
- 400: '#26c6da',
- 500: '#00bcd4',
- 600: '#00acc1',
- 700: '#0097a7',
- 800: '#00838f',
- 900: '#006064',
- 'accent-100': '#84ffff',
- 'accent-200': '#18ffff',
- 'accent-400': '#00e5ff',
- 'accent-700': '#00b8d4'
- },
- gray: {
- 50: '#fafafa',
- 100: '#f5f5f5',
- 200: '#eeeeee',
- 300: '#e0e0e0',
- 400: '#bdbdbd',
- 500: '#9e9e9e',
- 600: '#757575',
- 700: '#616161',
- 800: '#424242',
- 900: '#212121'
- },
- 'blue-gray': {
- 50: '#eceff1',
- 100: '#cfd8dc',
- 200: '#b0bec5',
- 300: '#90a4ae',
- 400: '#78909c',
- 500: '#607d8b',
- 600: '#546e7a',
- 700: '#455a64',
- 800: '#37474f',
- 900: '#263238'
- },
- green: {
- 50: '#e8f5e9',
- 100: '#c8e6c9',
- 200: '#a5d6a7',
- 300: '#81c784',
- 400: '#66bb6a',
- 500: '#4caf50',
- 600: '#43a047',
- 700: '#388e3c',
- 800: '#2e7d32',
- 900: '#1b5e20',
- 'accent-100': '#b9f6ca',
- 'accent-200': '#69f0ae',
- 'accent-400': '#00e676',
- 'accent-700': '#00c853'
- },
- 'light-green': {
- 50: '#f1f8e9',
- 100: '#dcedc8',
- 200: '#c5e1a5',
- 300: '#aed581',
- 400: '#9ccc65',
- 500: '#8bc34a',
- 600: '#7cb342',
- 700: '#689f38',
- 800: '#558b2f',
- 900: '#33691e',
- 'accent-100': '#ccff90',
- 'accent-200': '#b2ff59',
- 'accent-400': '#76ff03',
- 'accent-700': '#64dd17'
- },
- lime: {
- 50: '#f9fbe7',
- 100: '#f0f4c3',
- 200: '#e6ee9c',
- 300: '#dce775',
- 400: '#d4e157',
- 500: '#cddc39',
- 600: '#c0ca33',
- 700: '#afb42b',
- 800: '#9e9d24',
- 900: '#827717',
- 'accent-100': '#f4ff81',
- 'accent-200': '#eeff41',
- 'accent-400': '#c6ff00',
- 'accent-700': '#aeea00'
- },
- amber: {
- 50: '#fff8e1',
- 100: '#ffecb3',
- 200: '#ffe082',
- 300: '#ffd54f',
- 400: '#ffca28',
- 500: '#ffc107',
- 600: '#ffb300',
- 700: '#ffa000',
- 800: '#ff8f00',
- 900: '#ff6f00',
- 'accent-100': '#ffe57f',
- 'accent-200': '#ffd740',
- 'accent-400': '#ffc400',
- 'accent-700': '#ffab00'
- },
- yellow: {
- 50: '#fffde7',
- 100: '#fff9c4',
- 200: '#fff59d',
- 300: '#fff176',
- 400: '#ffee58',
- 500: '#ffeb3b',
- 600: '#fdd835',
- 700: '#fbc02d',
- 800: '#f9a825',
- 900: '#f57f17',
- 'accent-100': '#ffff8d',
- 'accent-200': '#ffff00',
- 'accent-400': '#ffea00',
- 'accent-700': '#ffd600'
- },
- orange: {
- 50: '#fff3e0',
- 100: '#ffe0b2',
- 200: '#ffcc80',
- 300: '#ffb74d',
- 400: '#ffa726',
- 500: '#ff9800',
- 600: '#fb8c00',
- 700: '#f57c00',
- 800: '#ef6c00',
- 900: '#e65100',
- 'accent-100': '#ffd180',
- 'accent-200': '#ffab40',
- 'accent-400': '#ff9100',
- 'accent-700': '#ff6d00'
- },
- 'deep-orange': {
- 50: '#fbe9e7',
- 100: '#ffccbc',
- 200: '#ffab91',
- 300: '#ff8a65',
- 400: '#ff7043',
- 500: '#ff5722',
- 600: '#f4511e',
- 700: '#e64a19',
- 800: '#d84315',
- 900: '#bf360c',
- 'accent-100': '#ff9e80',
- 'accent-200': '#ff6e40',
- 'accent-400': '#ff3d00',
- 'accent-700': '#dd2c00'
- },
- brown: {
- 50: '#efebe9',
- 100: '#d7ccc8',
- 200: '#bcaaa4',
- 300: '#a1887f',
- 400: '#8d6e63',
- 500: '#795548',
- 600: '#6d4c41',
- 700: '#5d4037',
- 800: '#4e342e',
- 900: '#3e2723'
- }
- },
- spacing: {
- 7: '1.75rem',
- 9: '2.25rem',
- 28: '7rem',
- 80: '20rem',
- 96: '24rem'
- },
- height: {
- '1/2': '50%'
- },
- scale: {
- 30: '.3'
- },
- boxShadow: {
- outline: '0 0 0 3px rgba(101, 31, 255, 0.4)'
- }
- }
- },
- variants: {
- scale: ['responsive', 'hover', 'focus', 'group-hover'],
- textColor: ['responsive', 'hover', 'focus', 'group-hover'],
- opacity: ['responsive', 'hover', 'focus', 'group-hover'],
- backgroundColor: ['responsive', 'hover', 'focus', 'group-hover']
- },
- plugins: []
-};
diff --git a/themes/tailwind.bold.config.js b/themes/tailwind.bold.config.js
new file mode 100644
index 00000000..2af9349f
--- /dev/null
+++ b/themes/tailwind.bold.config.js
@@ -0,0 +1,283 @@
+const plugin = require('tailwindcss/plugin');
+const defaultTheme = require('tailwindcss/defaultTheme');
+
+module.exports = {
+ mode: 'jit',
+ purge: {
+ enabled: true,
+ content: ['./src/**/*.{js,ts,jsx,tsx}']
+ },
+ darkMode: false, // or 'media' or 'class'
+ theme: {
+ extend: {
+ colors: {
+ 'primary': '#FFC329',
+ 'primary-variant': '#FFD362',
+ 'secondary': '#FFF7E3',
+ 'secondary-variant': '#FFECBC',
+ 'accent': '#EA5234',
+ 'accent-variant': '#E03817',
+ 'neutral': '#282828',
+ 'neutral-variant': '#3D404C',
+ 'base-50': '#FFFFFF',
+ 'base-100': '#F5F5F5',
+ 'base-200': '#E1E1E1',
+ 'base-900': '#0A0A0A',
+ },
+ fontFamily: {
+ sans: ['Rubik', ...defaultTheme.fontFamily.sans]
+ },
+ spacing: {
+ '1/1': '100%',
+ '1/3': '33.333%',
+ '1/2': '50%',
+ '2/3': '66.667%',
+ }
+ },
+ },
+ variants: {
+ extend: {},
+ },
+ plugins: [
+ function({ addComponents, theme }) {
+ addComponents({
+ '.sb-avatar': {
+ border: `2px solid ${theme('colors.neutral-variant')}`,
+ },
+ '.sb-badge': {
+ backgroundColor: theme('colors.accent'),
+ color: theme('colors.base-900'),
+ fontWeight: theme('fontWeight.medium'),
+ letterSpacing: theme('letterSpacing.wider'),
+ padding: `${theme('spacing[0.5]')} ${theme('spacing.2')}`
+ },
+ '.sb-btn': {
+ borderWidth: '2px',
+ fontWeight: theme('fontWeight.normal'),
+ letterSpacing: theme('letterSpacing.wider'),
+ padding: `${theme('spacing[2.5]')} ${theme('spacing.5')}`
+ },
+ 'a.sb-card': {
+ transition: 'transform .3s',
+ '&:hover': {
+ transform: 'translateY(-0.25rem)'
+ }
+ },
+ '.sb-checkbox': {
+ position: 'relative',
+ 'input[type=checkbox]': {
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ height: '1.25em',
+ width: '1.25em',
+ '-webkit-appearance': 'none',
+ '-moz-appearance': 'none',
+ },
+ 'label' : {
+ alignItems: 'center',
+ display: 'flex',
+ justifyContent: 'flex-start',
+ position: 'relative',
+ '&:before': {
+ border: '1px solid currentColor',
+ content: '""',
+ display: 'flex',
+ flexShrink: 0,
+ height: '1.25em',
+ marginRight: '1em',
+ pointerEvents: 'none',
+ width: '1.25em'
+ },
+ '&:after': {
+ borderStyle: 'solid',
+ borderColor: 'currentColor',
+ borderWidth: '0 2px 2px 0',
+ content: '""',
+ height: '0.75em',
+ left: '0.375em',
+ opacity: 0,
+ pointerEvents: 'none',
+ position: 'absolute',
+ top: '0.25em',
+ transform: 'rotate(45deg)',
+ transition: '0.25s ease',
+ width: '0.5em',
+ },
+ },
+ 'input[type=checkbox]:checked + label:after': {
+ opacity: 1
+ }
+ },
+ '.sb-highlight': {
+ color: theme('colors.accent')
+ },
+ '.sb-select': {
+ position: 'relative',
+ 'select': {
+ paddingRight: '1.5em',
+ '-webkit-appearance': 'none',
+ '-moz-appearance': 'none',
+ },
+ '&:before': {
+ borderColor: 'currentColor',
+ borderStyle: 'solid',
+ borderWidth: '0 2px 2px 0',
+ boxSizing: 'border-box',
+ content: '""',
+ display: 'flex',
+ flexShrink: 0,
+ height: '0.75em',
+ marginTop: '-0.5em',
+ position: 'absolute',
+ right: '0.75em',
+ top: '50%',
+ transform: 'rotate(45deg)',
+ width: '0.75em',
+ zIndex: '1',
+ },
+ },
+ '.colors-a': {
+ backgroundColor: theme('colors.base-50'),
+ color: theme('colors.base-900'),
+ 'input,textarea,select,hr': {
+ borderColor: theme('colors.base-900')
+ },
+ '::placeholder': {
+ color: theme('colors.base-900')
+ },
+ '.sb-btn-primary': {
+ backgroundColor: theme('colors.primary'),
+ borderColor: theme('colors.primary'),
+ color: theme('colors.base-900'),
+ '&:hover': {
+ opacity: '0.8'
+ },
+ },
+ '.sb-btn-secondary': {
+ borderColor: theme('colors.neutral-variant'),
+ color: theme('colors.neutral-variant'),
+ '&:hover': {
+ opacity: '0.8'
+ },
+ },
+ '.sb-card': {
+ backgroundColor: theme('colors.secondary')
+ }
+ },
+ '.colors-b': {
+ backgroundColor: theme('colors.neutral'),
+ color: theme('colors.base-50'),
+ 'input,textarea,select,hr': {
+ borderColor: theme('colors.neutral-variant')
+ },
+ '::placeholder': {
+ color: theme('colors.base-200')
+ },
+ '.sb-btn-primary': {
+ backgroundColor: theme('colors.neutral-variant'),
+ borderColor: theme('colors.neutral-variant'),
+ color: theme('colors.base-50'),
+ '&:hover': {
+ opacity: '0.8'
+ },
+ },
+ '.sb-btn-secondary': {
+ borderColor: theme('colors.neutral-variant'),
+ color: theme('colors.base-50'),
+ '&:hover': {
+ opacity: '0.8'
+ },
+ },
+ '.sb-card': {
+ backgroundColor: theme('colors.neutral-variant'),
+ }
+ },
+ '.colors-c': {
+ backgroundColor: theme('colors.neutral'),
+ color: theme('colors.secondary-variant'),
+ 'input,textarea,select,hr': {
+ borderColor: theme('colors.neutral-variant')
+ },
+ '::placeholder': {
+ color: theme('colors.primary')
+ },
+ '.sb-btn-primary': {
+ backgroundColor: theme('colors.neutral-variant'),
+ borderColor: theme('colors.neutral-variant'),
+ color: theme('colors.base-50'),
+ '&:hover': {
+ opacity: '0.8'
+ },
+ },
+ '.sb-btn-secondary': {
+ borderColor: theme('colors.neutral-variant'),
+ color: theme('colors.base-50'),
+ '&:hover': {
+ opacity: '0.8'
+ },
+ },
+ '.sb-card': {
+ backgroundColor: theme('colors.neutral-variant'),
+ }
+ },
+ '.colors-d': {
+ backgroundColor: theme('colors.primary'),
+ color: theme('colors.base-900'),
+ 'input,textarea,select,hr': {
+ borderColor: theme('colors.base-900')
+ },
+ '::placeholder': {
+ color: theme('colors.base-900')
+ },
+ '.sb-btn-primary': {
+ backgroundColor: theme('colors.neutral-variant'),
+ borderColor: theme('colors.neutral-variant'),
+ color: theme('colors.base-50'),
+ '&:hover': {
+ opacity: '0.8'
+ },
+ },
+ '.sb-btn-secondary': {
+ borderColor: theme('colors.neutral-variant'),
+ color: theme('colors.neutral-variant'),
+ '&:hover': {
+ opacity: '0.8'
+ },
+ },
+ '.sb-card': {
+ backgroundColor: theme('colors.primary-variant')
+ }
+ },
+ '.colors-e': {
+ backgroundColor: theme('colors.secondary'),
+ color: theme('colors.base-900'),
+ 'input,textarea,select,hr': {
+ borderColor: theme('colors.base-900')
+ },
+ '::placeholder': {
+ color: theme('colors.base-900')
+ },
+ '.sb-btn-primary': {
+ backgroundColor: theme('colors.neutral-variant'),
+ borderColor: theme('colors.neutral-variant'),
+ color: theme('colors.base-50'),
+ '&:hover': {
+ opacity: '0.8'
+ },
+ },
+ '.sb-btn-secondary': {
+ borderColor: theme('colors.neutral-variant'),
+ color: theme('colors.neutral-variant'),
+ '&:hover': {
+ opacity: '0.8'
+ },
+ },
+ '.sb-card': {
+ backgroundColor: theme('colors.secondary-variant')
+ }
+ }
+ })
+ }
+ ],
+};
diff --git a/themes/tailwind.classic.config.js b/themes/tailwind.classic.config.js
new file mode 100644
index 00000000..6677a8ae
--- /dev/null
+++ b/themes/tailwind.classic.config.js
@@ -0,0 +1,248 @@
+const plugin = require('tailwindcss/plugin');
+const defaultTheme = require('tailwindcss/defaultTheme');
+
+module.exports = {
+ mode: 'jit',
+ purge: {
+ enabled: true,
+ content: ['./src/**/*.{js,ts,jsx,tsx}']
+ },
+ darkMode: false, // or 'media' or 'class'
+ theme: {
+ extend: {
+ colors: {
+ 'primary': '#F47B7A',
+ 'primary-variant': '#F15756',
+ 'secondary': '#FAEAEB',
+ 'secondary-variant': '#F2CACD',
+ 'accent': '#98D8D9',
+ 'accent-variant': '#1E8EA4',
+ 'neutral': '#4A4F59',
+ 'neutral-variant': '#383C44',
+ 'base-50': '#FFFFFF',
+ 'base-100': '#F5F5F5',
+ 'base-200': '#E1E1E1',
+ 'base-900': '#333333',
+ },
+ fontFamily: {
+ sans: ['PT Serif', ...defaultTheme.fontFamily.serif]
+ },
+ spacing: {
+ '1/1': '100%',
+ '1/3': '33.333%',
+ '1/2': '50%',
+ '2/3': '66.667%',
+ }
+ },
+ },
+ variants: {
+ extend: {},
+ },
+ plugins: [
+ function({ addComponents, theme }) {
+ addComponents({
+ '.sb-avatar': {
+ borderRadius: theme('borderRadius.full')
+ },
+ '.sb-badge': {
+ backgroundColor: theme('colors.accent'),
+ color: theme('colors.base-900'),
+ fontWeight: theme('fontWeight.medium'),
+ letterSpacing: theme('letterSpacing.wider'),
+ padding: `${theme('spacing[0.5]')} ${theme('spacing.2')}`,
+ textTransform: 'uppercase',
+ borderRadius: theme('borderRadius.full')
+ },
+ '.sb-btn': {
+ fontWeight: theme('fontWeight.normal'),
+ letterSpacing: theme('letterSpacing.wider'),
+ padding: `${theme('spacing[2.5]')} ${theme('spacing.5')}`,
+ borderRadius: theme('borderRadius.full')
+ },
+ '.sb-card': {
+ borderRadius: theme('borderRadius.sm')
+ },
+ 'a.sb-card': {
+ transition: 'transform .3s',
+ '&:hover': {
+ transform: 'translateY(-0.25rem)'
+ }
+ },
+ '.sb-checkbox': {
+ position: 'relative',
+ 'input[type=checkbox]': {
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ height: '1.25em',
+ width: '1.25em',
+ '-webkit-appearance': 'none',
+ '-moz-appearance': 'none',
+ },
+ 'label' : {
+ alignItems: 'center',
+ display: 'flex',
+ justifyContent: 'flex-start',
+ position: 'relative',
+ '&:before': {
+ border: '1px solid currentColor',
+ content: '""',
+ display: 'flex',
+ flexShrink: 0,
+ height: '1.25em',
+ marginRight: '1em',
+ pointerEvents: 'none',
+ width: '1.25em'
+ },
+ '&:after': {
+ borderStyle: 'solid',
+ borderColor: 'currentColor',
+ borderWidth: '0 2px 2px 0',
+ content: '""',
+ height: '0.75em',
+ left: '0.375em',
+ opacity: 0,
+ pointerEvents: 'none',
+ position: 'absolute',
+ top: '0.25em',
+ transform: 'rotate(45deg)',
+ transition: '0.25s ease',
+ width: '0.5em',
+ },
+ },
+ 'input[type=checkbox]:checked + label:after': {
+ opacity: 1
+ }
+ },
+ '.sb-highlight': {
+ color: theme('colors.accent')
+ },
+ '.sb-select': {
+ position: 'relative',
+ 'select': {
+ paddingRight: '1.5em',
+ '-webkit-appearance': 'none',
+ '-moz-appearance': 'none',
+ },
+ '&:before': {
+ borderColor: 'currentColor',
+ borderStyle: 'solid',
+ borderWidth: '0 2px 2px 0',
+ boxSizing: 'border-box',
+ content: '""',
+ display: 'flex',
+ flexShrink: 0,
+ height: '0.75em',
+ marginTop: '-0.5em',
+ position: 'absolute',
+ right: '0.75em',
+ top: '50%',
+ transform: 'rotate(45deg)',
+ width: '0.75em',
+ zIndex: '1',
+ },
+ },
+ '.colors-a': {
+ backgroundColor: theme('colors.base-50'),
+ color: theme('colors.base-900'),
+ 'input,textarea,select,hr': {
+ borderColor: theme('colors.base-900')
+ },
+ '::placeholder': {
+ color: theme('colors.base-900')
+ },
+ '.sb-btn': {
+ backgroundColor: theme('colors.primary'),
+ color: theme('colors.base-900'),
+ '&:hover': {
+ backgroundColor: theme('colors.primary-variant')
+ },
+ },
+ '.sb-card': {
+ backgroundColor: theme('colors.secondary'),
+ }
+ },
+ '.colors-b': {
+ backgroundColor: theme('colors.neutral'),
+ color: theme('colors.base-50'),
+ 'input,textarea,select,hr': {
+ borderColor: theme('colors.neutral-variant')
+ },
+ '::placeholder': {
+ color: theme('colors.base-200')
+ },
+ '.sb-btn': {
+ backgroundColor: theme('colors.neutral-variant'),
+ color: theme('colors.base-50'),
+ '&:hover': {
+ backgroundColor: theme('colors.base-900')
+ },
+ },
+ '.sb-card': {
+ backgroundColor: theme('colors.neutral-variant')
+ }
+ },
+ '.colors-c': {
+ backgroundColor: theme('colors.neutral'),
+ color: theme('colors.primary'),
+ 'input,textarea,select,hr': {
+ borderColor: theme('colors.neutral-variant')
+ },
+ '::placeholder': {
+ color: theme('colors.primary')
+ },
+ '.sb-btn': {
+ backgroundColor: theme('colors.neutral-variant'),
+ color: theme('colors.primary'),
+ '&:hover': {
+ backgroundColor: theme('colors.base-900')
+ },
+ },
+ '.sb-card': {
+ backgroundColor: theme('colors.neutral-variant')
+ }
+ },
+ '.colors-d': {
+ backgroundColor: theme('colors.primary'),
+ color: theme('colors.base-900'),
+ 'input,textarea,select,hr': {
+ borderColor: theme('colors.base-900')
+ },
+ '::placeholder': {
+ color: theme('colors.base-900')
+ },
+ '.sb-btn': {
+ backgroundColor: theme('colors.neutral-variant'),
+ color: theme('colors.base-50'),
+ '&:hover': {
+ backgroundColor: theme('colors.base-900')
+ },
+ },
+ '.sb-card': {
+ backgroundColor: theme('colors.primary-variant')
+ }
+ },
+ '.colors-e': {
+ backgroundColor: theme('colors.secondary'),
+ color: theme('colors.base-900'),
+ 'input,textarea,select,hr': {
+ borderColor: theme('colors.base-900')
+ },
+ '::placeholder': {
+ color: theme('colors.base-900')
+ },
+ '.sb-btn': {
+ backgroundColor: theme('colors.neutral-variant'),
+ color: theme('colors.base-50'),
+ '&:hover': {
+ backgroundColor: theme('colors.base-900')
+ },
+ },
+ '.sb-card': {
+ backgroundColor: theme('colors.secondary-variant')
+ }
+ }
+ })
+ }
+ ],
+};
diff --git a/themes/tailwind.dark.config.js b/themes/tailwind.dark.config.js
deleted file mode 100644
index 33aba115..00000000
--- a/themes/tailwind.dark.config.js
+++ /dev/null
@@ -1,44 +0,0 @@
-const kitwindTheme = require('./kitwind');
-const plugin = require('tailwindcss/plugin')
-
-module.exports = {
- mode: 'jit',
- purge: {
- enabled: true,
- content: ['./src/**/*.{js,ts,jsx,tsx}']
- },
- darkMode: false, // or 'media' or 'class'
- theme: {
- extend: {
- ...kitwindTheme.theme.extend,
- backgroundColor: (theme) => ({
- ...theme('colors'),
- primary: kitwindTheme.theme.extend.colors.gray['900'],
- secondary: kitwindTheme.theme.extend.colors['deep-purple']['accent-700']
- }),
- textColor: (theme) => ({
- ...theme('colors'),
- primary: kitwindTheme.theme.extend.colors.teal['accent-400'],
- 'primary-hover': kitwindTheme.theme.extend.colors.teal['accent-700'],
- dark: kitwindTheme.theme.extend.colors.gray['100'],
- 'dark-hover': kitwindTheme.theme.extend.colors.teal['accent-700'],
- light: kitwindTheme.theme.extend.colors.gray['100'],
- 'secondary-foreground': kitwindTheme.theme.extend.colors.indigo['100'],
- paragraph: kitwindTheme.theme.extend.colors.gray['400'],
- })
- }
- },
- variants: kitwindTheme.variants,
- plugins: kitwindTheme.plugins.concat([
- plugin(function({ addBase, addComponents }) {
- addBase({
- 'body': { backgroundColor: kitwindTheme.theme.extend.colors.gray['900'] }
- })
- addComponents({
- '.header-2': {
- "@apply font-sans text-3xl font-bold tracking-tight text-white sm:text-4xl sm:leading-none": {}
- }
- })
- })
- ])
-};
diff --git a/themes/tailwind.eco.config.js b/themes/tailwind.eco.config.js
new file mode 100644
index 00000000..eda2fc4b
--- /dev/null
+++ b/themes/tailwind.eco.config.js
@@ -0,0 +1,258 @@
+const plugin = require('tailwindcss/plugin');
+const defaultTheme = require('tailwindcss/defaultTheme');
+
+module.exports = {
+ mode: 'jit',
+ purge: {
+ enabled: true,
+ content: ['./src/**/*.{js,ts,jsx,tsx}']
+ },
+ darkMode: false, // or 'media' or 'class'
+ theme: {
+ extend: {
+ colors: {
+ 'primary': '#4bc2a1',
+ 'primary-variant': '#3aab8c',
+ 'secondary': '#d6c9bb',
+ 'secondary-variant': '#c0ab96',
+ 'accent': '#C6D6D2',
+ 'accent-variant': '#AFC6C0',
+ 'neutral': '#4A4F59',
+ 'neutral-variant': '#383C44',
+ 'base-50': '#FFFFFF',
+ 'base-100': '#F5F5F5',
+ 'base-200': '#E1E1E1',
+ 'base-900': '#333333',
+ },
+ fontFamily: {
+ sans: ['Open Sans', ...defaultTheme.fontFamily.sans]
+ },
+ spacing: {
+ '1/1': '100%',
+ '1/3': '33.333%',
+ '1/2': '50%',
+ '2/3': '66.667%',
+ }
+ },
+ },
+ variants: {
+ extend: {},
+ },
+ plugins: [
+ function({ addComponents, theme }) {
+ addComponents({
+ '.sb-avatar': {
+ boxShadow: theme('boxShadow.xl'),
+ borderRadius: theme('borderRadius.md')
+ },
+ '.sb-badge': {
+ backgroundColor: theme('colors.accent'),
+ color: theme('colors.base-900'),
+ fontWeight: theme('fontWeight.medium'),
+ letterSpacing: theme('letterSpacing.wider'),
+ padding: `${theme('spacing[0.5]')} ${theme('spacing.2')}`,
+ borderRadius: theme('borderRadius.md'),
+ textTransform: 'uppercase'
+ },
+ '.sb-btn': {
+ fontWeight: theme('fontWeight.normal'),
+ letterSpacing: theme('letterSpacing.wider'),
+ padding: `${theme('spacing[2.5]')} ${theme('spacing.5')}`,
+ borderRadius: theme('borderRadius.md'),
+ boxShadow: theme('boxShadow.xl'),
+ textTransform: 'uppercase'
+ },
+ '.sb-card': {
+ boxShadow: theme('boxShadow.xl'),
+ borderRadius: theme('borderRadius.md')
+ },
+ 'a.sb-card': {
+ transition: 'transform .3s',
+ '&:hover': {
+ transform: 'translateY(-0.25rem)'
+ }
+ },
+ '.sb-checkbox': {
+ position: 'relative',
+ 'input[type=checkbox]': {
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ height: '1.25em',
+ width: '1.25em',
+ '-webkit-appearance': 'none',
+ '-moz-appearance': 'none',
+ },
+ 'label' : {
+ alignItems: 'center',
+ display: 'flex',
+ justifyContent: 'flex-start',
+ position: 'relative',
+ '&:before': {
+ border: '1px solid currentColor',
+ content: '""',
+ display: 'flex',
+ flexShrink: 0,
+ height: '1.25em',
+ marginRight: '1em',
+ pointerEvents: 'none',
+ width: '1.25em'
+ },
+ '&:after': {
+ borderStyle: 'solid',
+ borderColor: 'currentColor',
+ borderWidth: '0 2px 2px 0',
+ content: '""',
+ height: '0.75em',
+ left: '0.375em',
+ opacity: 0,
+ pointerEvents: 'none',
+ position: 'absolute',
+ top: '0.25em',
+ transform: 'rotate(45deg)',
+ transition: '0.25s ease',
+ width: '0.5em',
+ },
+ },
+ 'input[type=checkbox]:checked + label:after': {
+ opacity: 1
+ }
+ },
+ '.sb-highlight': {
+ color: theme('colors.accent')
+ },
+ '.sb-select': {
+ position: 'relative',
+ 'select': {
+ paddingRight: '1.5em',
+ '-webkit-appearance': 'none',
+ '-moz-appearance': 'none',
+ },
+ '&:before': {
+ borderColor: 'currentColor',
+ borderStyle: 'solid',
+ borderWidth: '0 2px 2px 0',
+ boxSizing: 'border-box',
+ content: '""',
+ display: 'flex',
+ flexShrink: 0,
+ height: '0.75em',
+ marginTop: '-0.5em',
+ position: 'absolute',
+ right: '0.75em',
+ top: '50%',
+ transform: 'rotate(45deg)',
+ width: '0.75em',
+ zIndex: '1',
+ },
+ },
+ '.colors-a': {
+ backgroundColor: theme('colors.base-50'),
+ color: theme('colors.base-900'),
+ 'input,textarea,select,hr': {
+ borderColor: theme('colors.base-900')
+ },
+ '::placeholder': {
+ color: theme('colors.base-900')
+ },
+ '.sb-btn': {
+ backgroundColor: theme('colors.primary'),
+ color: theme('colors.white'),
+ '&:hover': {
+ color: theme('colors.white'),
+ backgroundColor: theme('colors.primary-variant'),
+ boxShadow: theme('boxShadow.none'),
+ },
+ },
+ '.sb-card': {
+ backgroundColor: theme('colors.secondary')
+ }
+ },
+ '.colors-b': {
+ backgroundColor: theme('colors.neutral'),
+ color: theme('colors.base-50'),
+ 'input,textarea,select,hr': {
+ borderColor: theme('colors.neutral-variant')
+ },
+ '::placeholder': {
+ color: theme('colors.base-200')
+ },
+ '.sb-btn': {
+ backgroundColor: theme('colors.neutral-variant'),
+ color: theme('colors.base-50'),
+ '&:hover': {
+ backgroundColor: theme('colors.base-900'),
+ boxShadow: theme('boxShadow.none'),
+ },
+ },
+ '.sb-card': {
+ backgroundColor: theme('colors.neutral-variant')
+ }
+ },
+ '.colors-c': {
+ backgroundColor: theme('colors.neutral'),
+ color: theme('colors.primary'),
+ 'input,textarea,select,hr': {
+ borderColor: theme('colors.neutral-variant')
+ },
+ '::placeholder': {
+ color: theme('colors.primary')
+ },
+ '.sb-btn': {
+ backgroundColor: theme('colors.neutral-variant'),
+ color: theme('colors.primary'),
+ '&:hover': {
+ backgroundColor: theme('colors.base-900'),
+ boxShadow: theme('boxShadow.none')
+ },
+ },
+ '.sb-card': {
+ backgroundColor: theme('colors.neutral-variant')
+ }
+ },
+ '.colors-d': {
+ backgroundColor: theme('colors.primary'),
+ color: theme('colors.base-900'),
+ 'input,textarea,select,hr': {
+ borderColor: theme('colors.base-900')
+ },
+ '::placeholder': {
+ color: theme('colors.base-900')
+ },
+ '.sb-btn': {
+ backgroundColor: theme('colors.neutral-variant'),
+ color: theme('colors.base-50'),
+ '&:hover': {
+ backgroundColor: theme('colors.base-900'),
+ boxShadow: theme('boxShadow.none')
+ },
+ },
+ '.sb-card': {
+ backgroundColor: theme('colors.primary-variant')
+ }
+ },
+ '.colors-e': {
+ backgroundColor: theme('colors.secondary'),
+ color: theme('colors.base-900'),
+ 'input,textarea,select,hr': {
+ borderColor: theme('colors.base-900')
+ },
+ '::placeholder': {
+ color: theme('colors.base-900')
+ },
+ '.sb-btn': {
+ backgroundColor: theme('colors.neutral-variant'),
+ color: theme('colors.base-50'),
+ '&:hover': {
+ backgroundColor: theme('colors.base-900'),
+ boxShadow: theme('boxShadow.none')
+ },
+ },
+ '.sb-card': {
+ backgroundColor: theme('colors.secondary-variant')
+ }
+ }
+ })
+ }
+ ],
+};
diff --git a/themes/tailwind.light.config.js b/themes/tailwind.light.config.js
deleted file mode 100644
index 48c7af00..00000000
--- a/themes/tailwind.light.config.js
+++ /dev/null
@@ -1,53 +0,0 @@
-const kitwindTheme = require('./kitwind');
-const plugin = require('tailwindcss/plugin')
-
-module.exports = {
- mode: 'jit',
- purge: {
- enabled: true,
- content: ['./src/**/*.{js,ts,jsx,tsx}']
- },
- darkMode: false, // or 'media' or 'class'
- theme: {
- extend: {
- ...kitwindTheme.theme.extend,
- backgroundColor: (theme) => ({
- ...theme('colors'),
- primary: '#ffffff',
- secondary: kitwindTheme.theme.extend.colors.teal['accent-400']
- }),
- textColor: (theme) => ({
- ...theme('colors'),
- primary: kitwindTheme.theme.extend.colors['deep-purple']['accent-400'],
- 'primary-hover': kitwindTheme.theme.extend.colors['deep-purple']['800'],
- dark: kitwindTheme.theme.extend.colors.gray['800'],
- 'dark-hover': kitwindTheme.theme.extend.colors['deep-purple']['accent-700'],
- light: kitwindTheme.theme.extend.colors.gray['700'],
- 'secondary-foreground': kitwindTheme.theme.extend.colors.teal['900'],
- paragraph: kitwindTheme.theme.extend.colors.gray['700'],
- })
- }
- },
- variants: kitwindTheme.variants,
- plugins: kitwindTheme.plugins.concat([
- plugin(function({ addComponents, theme }) {
- addComponents({
- '.header-2': {
- "@apply font-sans text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl sm:leading-none": {}
- },
- '.btn': {
- padding: `${theme('spacing.2')} ${theme('spacing.4')}`,
- borderRadius: theme('borderRadius.md'),
- fontWeight: theme('fontWeight.600'),
- },
- '.btn-indigo': {
- backgroundColor: theme('colors.indigo.500'),
- color: theme('colors.white'),
- '&:hover': {
- backgroundColor: theme('colors.indigo.600')
- },
- },
- })
- })
- ])
-};
+ 
+