Skip to content

Commit

Permalink
modify
Browse files Browse the repository at this point in the history
  • Loading branch information
Peter Indiola committed Jun 18, 2020
1 parent 5fa13aa commit f2a3f88
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 142 deletions.
121 changes: 17 additions & 104 deletions src/components/footers/FiveColumnWithInputForm.js
View file
@@ -1,13 +1,10 @@
import React from "react";
import tw from "twin.macro";
import styled from "styled-components";
import { css } from "styled-components/macro"; //eslint-disable-line
import { PrimaryButton as PrimaryButtonBase } from "components/misc/Buttons.js";
import React from 'react';
import tw from 'twin.macro';
import styled from 'styled-components';
import {PrimaryButton as PrimaryButtonBase} from 'components/misc/Buttons.js';

import LogoImage from "images/logo.svg";
import { ReactComponent as FacebookIcon } from "images/facebook-icon.svg";
import { ReactComponent as TwitterIcon } from "images/twitter-icon.svg";
import { ReactComponent as YoutubeIcon } from "images/youtube-icon.svg";
import LogoImage from 'images/logo.svg';
import {ReactComponent as FacebookIcon} from 'images/facebook-icon.svg';

const Container = tw.div`relative bg-gray-200 text-gray-700 -mb-8 -mx-8 px-8 py-20 lg:py-24`;
const Content = tw.div`max-w-screen-xl mx-auto relative z-10`;
Expand All @@ -21,12 +18,16 @@ const LinkList = tw.ul`mt-6 text-sm font-medium`;
const LinkListItem = tw.li`mt-3`;
const Link = tw.a`border-b-2 border-transparent hocus:border-gray-700 pb-1 transition duration-300`;

const SubscribeNewsletterColumn = tw(Column)`text-center lg:text-left w-full! lg:w-auto! mt-20 lg:mt-12`;
const SubscribeNewsletterColumn = tw(
Column
)`text-center lg:text-left w-full! lg:w-auto! mt-20 lg:mt-12`;
const SubscribeNewsletterContainer = tw.div`max-w-sm mx-auto lg:mx-0 `;
const SubscribeText = tw.p`mt-2 lg:mt-6 text-sm font-medium text-gray-600`;
const SubscribeForm = tw.form`mt-4 lg:mt-6 text-sm sm:flex max-w-xs sm:max-w-none mx-auto sm:mx-0`;
const Input = tw.input`bg-gray-300 px-6 py-3 rounded sm:rounded-r-none border-2 sm:border-r-0 border-gray-400 hover:border-primary-500 focus:outline-none transition duration-300 w-full`;
const SubscribeButton = tw(PrimaryButtonBase)`mt-4 sm:mt-0 w-full sm:w-auto rounded sm:rounded-l-none px-8 py-3`;
const SubscribeButton = tw(
PrimaryButtonBase
)`mt-4 sm:mt-0 w-full sm:w-auto rounded sm:rounded-l-none px-8 py-3`;

const Divider = tw.div`my-16 border-b-2 border-gray-300 w-full`;

Expand All @@ -50,105 +51,17 @@ export default () => {
return (
<Container>
<Content>
<SixColumns>
<Column>
<ColumnHeading>Main</ColumnHeading>
<LinkList>
<LinkListItem>
<Link href="#">Blog</Link>
</LinkListItem>
<LinkListItem>
<Link href="#">FAQs</Link>
</LinkListItem>
<LinkListItem>
<Link href="#">Support</Link>
</LinkListItem>
<LinkListItem>
<Link href="#">About Us</Link>
</LinkListItem>
</LinkList>
</Column>
<Column>
<ColumnHeading>Product</ColumnHeading>
<LinkList>
<LinkListItem>
<Link href="#">Log In</Link>
</LinkListItem>
<LinkListItem>
<Link href="#">Personal</Link>
</LinkListItem>
<LinkListItem>
<Link href="#">Business</Link>
</LinkListItem>
<LinkListItem>
<Link href="#">Team</Link>
</LinkListItem>
</LinkList>
</Column>
<Column>
<ColumnHeading>Press</ColumnHeading>
<LinkList>
<LinkListItem>
<Link href="#">Logos</Link>
</LinkListItem>
<LinkListItem>
<Link href="#">Events</Link>
</LinkListItem>
<LinkListItem>
<Link href="#">Stories</Link>
</LinkListItem>
<LinkListItem>
<Link href="#">Office</Link>
</LinkListItem>
</LinkList>
</Column>
<Column>
<ColumnHeading>Legal</ColumnHeading>
<LinkList>
<LinkListItem>
<Link href="#">GDPR</Link>
</LinkListItem>
<LinkListItem>
<Link href="#">Privacy Policy</Link>
</LinkListItem>
<LinkListItem>
<Link href="#">Terms of Service</Link>
</LinkListItem>
<LinkListItem>
<Link href="#">Disclaimer</Link>
</LinkListItem>
</LinkList>
</Column>
<SubscribeNewsletterColumn>
<SubscribeNewsletterContainer>
<ColumnHeading>Subscribe to our Newsletter</ColumnHeading>
<SubscribeText>
We deliver high quality blog posts written by professionals weekly. And we promise no spam.
</SubscribeText>
<SubscribeForm method="get" action="#">
<Input type="email" placeholder="Your Email Address" />
<SubscribeButton type="submit">Subscribe</SubscribeButton>
</SubscribeForm>
</SubscribeNewsletterContainer>
</SubscribeNewsletterColumn>
</SixColumns>
<Divider />
<ThreeColRow>
<LogoContainer>
<LogoImg src={LogoImage} />
<LogoText>Treact Inc.</LogoText>
<LogoText>MyBigas</LogoText>
</LogoContainer>
<CopywrightNotice>&copy; 2018 Treact Inc. All Rights Reserved.</CopywrightNotice>
<CopywrightNotice>
&copy; 2020 MyBigas All Rights Reserved.
</CopywrightNotice>
<SocialLinksContainer>
<SocialLink href="https://facebook.com">
<SocialLink href='https://facebook.com'>
<FacebookIcon />
</SocialLink>
<SocialLink href="https://twitter.com">
<TwitterIcon />
</SocialLink>
<SocialLink href="https://youtube.com">
<YoutubeIcon />
</SocialLink>
</SocialLinksContainer>
</ThreeColRow>
</Content>
Expand Down
84 changes: 47 additions & 37 deletions src/components/headers/light.js
View file
@@ -1,14 +1,14 @@
import React from "react";
import { motion } from "framer-motion";
import tw from "twin.macro";
import styled from "styled-components";
import { css } from "styled-components/macro"; //eslint-disable-line
import React from 'react';
import {motion} from 'framer-motion';
import tw from 'twin.macro';
import styled from 'styled-components';
import {css} from 'styled-components/macro'; //eslint-disable-line

import useAnimatedNavToggler from "../../helpers/useAnimatedNavToggler.js";
import useAnimatedNavToggler from '../../helpers/useAnimatedNavToggler.js';

import logo from "../../images/logo.svg";
import { ReactComponent as MenuIcon } from "feather-icons/dist/icons/menu.svg";
import { ReactComponent as CloseIcon } from "feather-icons/dist/icons/x.svg";
import logo from '../../images/logo.svg';
import {ReactComponent as MenuIcon} from 'feather-icons/dist/icons/menu.svg';
import {ReactComponent as CloseIcon} from 'feather-icons/dist/icons/x.svg';

const Header = tw.header`
flex justify-between items-center
Expand Down Expand Up @@ -56,7 +56,13 @@ export const DesktopNavLinks = tw.nav`
hidden lg:flex flex-1 justify-between items-center
`;

export default ({ roundedHeaderButton = false, logoLink, links, className, collapseBreakpointClass = "lg" }) => {
export default ({
roundedHeaderButton = false,
logoLink,
links,
className,
collapseBreakpointClass = 'lg',
}) => {
/*
* This header component accepts an optionals "links" prop that specifies the links to render in the navbar.
* This links props should be an array of "NavLinks" components which is exported from this file.
Expand All @@ -72,44 +78,48 @@ export default ({ roundedHeaderButton = false, logoLink, links, className, colla
*/
const defaultLinks = [
<NavLinks key={1}>
<NavLink href="/#">About</NavLink>
<NavLink href="/#">Blog</NavLink>
<NavLink href="/#">Pricing</NavLink>
<NavLink href="/#">Contact Us</NavLink>
<NavLink href="/#" tw="lg:ml-12!">
Login
</NavLink>
<PrimaryLink css={roundedHeaderButton && tw`rounded-full`}href="/#">Sign Up</PrimaryLink>
</NavLinks>
<NavLink href='/#'>Products</NavLink>
<NavLink href='/#'>About</NavLink>
<NavLink href='/#'>Contact Us</NavLink>
</NavLinks>,
];

const { showNavLinks, animation, toggleNavbar } = useAnimatedNavToggler();
const collapseBreakpointCss = collapseBreakPointCssMap[collapseBreakpointClass];
const {showNavLinks, animation, toggleNavbar} = useAnimatedNavToggler();
const collapseBreakpointCss =
collapseBreakPointCssMap[collapseBreakpointClass];

const defaultLogoLink = (
<LogoLink href="/">
<img src={logo} alt="logo" />
Treact
</LogoLink>
);
const defaultLogoLink = <LogoLink href='/'>MyBigas</LogoLink>;

logoLink = logoLink || defaultLogoLink;
links = links || defaultLinks;

return (
<Header className={className || "header-light"}>
<Header className={className || 'header-light'}>
<DesktopNavLinks css={collapseBreakpointCss.desktopNavLinks}>
{logoLink}
{links}
</DesktopNavLinks>

<MobileNavLinksContainer css={collapseBreakpointCss.mobileNavLinksContainer}>
<MobileNavLinksContainer
css={collapseBreakpointCss.mobileNavLinksContainer}
>
{logoLink}
<MobileNavLinks initial={{ x: "150%", display: "none" }} animate={animation} css={collapseBreakpointCss.mobileNavLinks}>
<MobileNavLinks
initial={{x: '150%', display: 'none'}}
animate={animation}
css={collapseBreakpointCss.mobileNavLinks}
>
{links}
</MobileNavLinks>
<NavToggle onClick={toggleNavbar} className={showNavLinks ? "open" : "closed"}>
{showNavLinks ? <CloseIcon tw="w-6 h-6" /> : <MenuIcon tw="w-6 h-6" />}
<NavToggle
onClick={toggleNavbar}
className={showNavLinks ? 'open' : 'closed'}
>
{showNavLinks ? (
<CloseIcon tw='w-6 h-6' />
) : (
<MenuIcon tw='w-6 h-6' />
)}
</NavToggle>
</MobileNavLinksContainer>
</Header>
Expand All @@ -126,21 +136,21 @@ const collapseBreakPointCssMap = {
sm: {
mobileNavLinks: tw`sm:hidden`,
desktopNavLinks: tw`sm:flex`,
mobileNavLinksContainer: tw`sm:hidden`
mobileNavLinksContainer: tw`sm:hidden`,
},
md: {
mobileNavLinks: tw`md:hidden`,
desktopNavLinks: tw`md:flex`,
mobileNavLinksContainer: tw`md:hidden`
mobileNavLinksContainer: tw`md:hidden`,
},
lg: {
mobileNavLinks: tw`lg:hidden`,
desktopNavLinks: tw`lg:flex`,
mobileNavLinksContainer: tw`lg:hidden`
mobileNavLinksContainer: tw`lg:hidden`,
},
xl: {
mobileNavLinks: tw`lg:hidden`,
desktopNavLinks: tw`lg:flex`,
mobileNavLinksContainer: tw`lg:hidden`
}
mobileNavLinksContainer: tw`lg:hidden`,
},
};
2 changes: 1 addition & 1 deletion src/demos/RestaurantLandingPage.js
View file
Expand Up @@ -19,7 +19,7 @@ export default () => {
</>
}
description='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
imageSrc='https://images.unsplash.com/photo-1504674900247-0877df9cc836?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=768&q=80'
imageSrc='https://images.unsplash.com/photo-1536304993881-ff6e9eefa2a6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80'
imageCss={imageCss}
imageDecoratorBlob={true}
primaryButtonText='Order Now'
Expand Down

1 comment on commit f2a3f88

@vercel
Copy link

@vercel vercel bot commented on f2a3f88 Jun 18, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to following URLs:

Please sign in to comment.