4
0
forked from crowetic/commerce

general improvements

This commit is contained in:
Franco Arza 2020-10-23 19:47:10 -03:00
parent 40049b27a1
commit 191bb96a0f
5 changed files with 13 additions and 12 deletions

View File

@ -43,9 +43,9 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
{ 'shadow-magical': hasScrolled } { 'shadow-magical': hasScrolled }
)} )}
> >
<Container> <div className="px-4">
<Navbar /> <Navbar />
</Container> </div>
</header> </header>
<main className="fit">{children}</main> <main className="fit">{children}</main>
<Footer pages={pageProps.pages} /> <Footer pages={pageProps.pages} />

View File

@ -83,6 +83,7 @@
.simple { .simple {
& .squareBg { & .squareBg {
@apply bg-accents-0 !important; @apply bg-accents-0 !important;
background-image: url("data:image/svg+xml,%3Csvg width='48' height='46' viewBox='0 0 48 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline opacity='0.05' x1='9.41421' y1='8' x2='21' y2='19.5858' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.05' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(-0.707107 0.707107 0.707107 0.707107 40 8)' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.05' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(0.707107 -0.707107 -0.707107 -0.707107 8 38)' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.05' x1='38.5858' y1='38' x2='27' y2='26.4142' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
} }
& .productTitle { & .productTitle {

View File

@ -9,20 +9,20 @@ interface Props {
const Hero: FC<Props> = ({ headline, description }) => { const Hero: FC<Props> = ({ headline, description }) => {
return ( return (
<Container> <div className="mx-auto grid grid-cols-2 bg-black py-32">
<div className="mx-auto grid grid-cols-2 bg-black py-32"> <Container>
<h2 className="text-4xl leading-10 font-extrabold text-white sm:text-5xl sm:leading-none sm:tracking-tight lg:text-6xl"> <h2 className="text-4xl leading-10 font-extrabold text-white sm:text-5xl sm:leading-none sm:tracking-tight lg:text-6xl">
{headline} {headline}
</h2> </h2>
<div className="flex flex-col justify-between"> <div className="flex flex-col justify-between">
<p className="mt-5 text-xl leading-7 text-accent-2">{description}</p> <p className="mt-5 text-xl leading-7 text-accent-2">{description}</p>
<a className="block text-white pt-3 font-bold hover:underline flex flex-row cursor-pointer"> <a className="text-white pt-3 font-bold hover:underline flex flex-row cursor-pointer">
<span>Read it here</span> <span>Read it here</span>
<RightArrow width="20" heigh="20" className="ml-1" /> <RightArrow width="20" heigh="20" className="ml-1" />
</a> </a>
</div> </div>
</div> </Container>
</Container> </div>
) )
} }

View File

@ -72,7 +72,7 @@ const Sidebar: FC<Props> = ({ className, children, show = true, close }) => {
leaveFrom="translate-x-0" leaveFrom="translate-x-0"
leaveTo="translate-x-full" leaveTo="translate-x-full"
> >
<div className="h-full w-screen max-w-md"> <div className="h-full md:w-screen md:max-w-md">
<div className="h-full flex flex-col text-base bg-accents-1 shadow-xl overflow-y-auto"> <div className="h-full flex flex-col text-base bg-accents-1 shadow-xl overflow-y-auto">
{children} {children}
</div> </div>

View File

@ -94,10 +94,10 @@ export default function Home({
<ProductCard key={node.path} product={node} variant="slim" /> <ProductCard key={node.path} product={node} variant="slim" />
))} ))}
</Marquee> </Marquee>
<div className="py-12 flex flex-row w-full px-12"> <div className="py-12 flex flex-col md:flex-row w-full px-12">
<div className="pr-3 w-48 relative"> <div className="pr-3 md:w-48 relative">
<div className="sticky top-32"> <div className="flex flex-row mb-8 md:mb-0 md:flex-col justify-between md:sticky md:top-32">
<ul className="mb-10"> <ul className="md:mb-10">
<li className="py-1 text-base font-bold tracking-wide"> <li className="py-1 text-base font-bold tracking-wide">
All Categories All Categories
</li> </li>