Implement navigation, hero, vertical features, banner and footer comp…

…onents

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@tailwindcss/jit": "^0.1.17",
+    "classnames": "^2.2.6",
     "next": "^10.1.2",
     "next-seo": "^4.23.0",
     "react": "^17.0.2",
@@ -21,6 +22,7 @@
   },
   "devDependencies": {
     "@next/bundle-analyzer": "^10.1.2",
+    "@types/classnames": "^2.2.11",
     "@types/node": "^14.14.37",
     "@types/react": "^17.0.3",
     "@typescript-eslint/eslint-plugin": "^4.20.0",

src/background/Background.tsx

@@ -0,0 +1,10 @@
+import React, { ReactNode } from 'react';
+
+type IBackgroundProps = {
+  children: ReactNode;
+  color: string;
+};
+
+const Background = (props: IBackgroundProps) => <div className={props.color}>{props.children}</div>;
+
+export { Background };

src/button/Button.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import className from 'classnames';
+
+type IButtonProps = {
+  xl?: boolean;
+  children: string;
+};
+
+const Button = (props: IButtonProps) => {
+  const btnClass = className({
+    btn: true,
+    'btn-xl': props.xl,
+    'btn-base': !props.xl,
+    'btn-primary': true,
+  });
+
+  return (
+    <div className={btnClass}>
+      {props.children}
+
+      <style jsx>
+        {`
+          .btn {
+            @apply inline-block rounded-md text-center;
+          }
+
+          .btn-base {
+            @apply text-lg font-semibold py-2 px-4;
+          }
+
+          .btn-xl {
+            @apply font-extrabold text-xl py-4 px-6;
+          }
+
+          .btn-primary {
+            @apply text-white bg-primary-500;
+          }
+
+          .btn-primary:hover {
+            @apply bg-primary-600;
+          }
+        `}
+      </style>
+    </div>
+  );
+};
+
+export { Button };

src/cta/CTABanner.tsx

@@ -0,0 +1,20 @@
+import React, { ReactNode } from 'react';
+
+type ICTABannerProps = {
+  title: string;
+  subtitle: string;
+  button: ReactNode;
+};
+
+const CTABanner = (props: ICTABannerProps) => (
+  <div className="text-center flex flex-col p-4 sm:text-left sm:flex-row sm:items-center sm:justify-between sm:p-12 bg-primary-100 rounded-md">
+    <div className="text-2xl font-semibold">
+      <div className="text-gray-900">{props.title}</div>
+      <div className="text-primary-500">{props.subtitle}</div>
+    </div>
+
+    <div className="whitespace-no-wrap mt-3 sm:mt-0 sm:ml-2">{props.button}</div>
+  </div>
+);
+
+export { CTABanner };

src/feature/VerticalFeatureRow.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import className from 'classnames';
+
+type IVerticalFeatureRowProps = {
+  title: string;
+  description: string;
+  image: string;
+  imageAlt: string;
+  reverse?: boolean;
+};
+
+const VerticalFeatureRow = (props: IVerticalFeatureRowProps) => {
+  const verticalFeatureClass = className('mt-20', 'flex', 'flex-wrap', 'items-center', {
+    'flex-row-reverse': props.reverse,
+  });
+
+  return (
+    <div className={verticalFeatureClass}>
+      <div className="w-full sm:w-1/2 text-center sm:px-6">
+        <h3 className="text-3xl text-gray-900 font-semibold">{props.title}</h3>
+        <div className="mt-6 text-xl leading-9">{props.description}</div>
+      </div>
+
+      <div className="w-full sm:w-1/2 p-6">
+        <img src={`${process.env.baseUrl}${props.image}`} alt={props.imageAlt} />
+      </div>
+    </div>
+  );
+};
+
+export { VerticalFeatureRow };

src/footer/CenteredFooter.tsx

@@ -0,0 +1,40 @@
+import React, { ReactNode } from 'react';
+
+import { Logo } from '../templates/Logo';
+import { FooterCopyright } from './FooterCopyright';
+import { FooterIconList } from './FooterIconList';
+
+type ICenteredFooterProps = {
+  iconList: ReactNode;
+  children: ReactNode;
+};
+
+const CenteredFooter = (props: ICenteredFooterProps) => (
+  <div className="text-center">
+    <Logo />
+
+    <nav>
+      <ul className="navbar mt-5 flex flex-row justify-center font-medium text-xl text-gray-800">
+        {props.children}
+      </ul>
+    </nav>
+
+    <div className="mt-8 flex justify-center">
+      <FooterIconList>{props.iconList}</FooterIconList>
+    </div>
+
+    <div className="mt-8 text-sm">
+      <FooterCopyright />
+    </div>
+
+    <style jsx>
+      {`
+        .navbar :global(li) {
+          @apply mx-4;
+        }
+      `}
+    </style>
+  </div>
+);
+
+export { CenteredFooter };

src/footer/FooterCopyright.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { Config } from '../utils/Config';
+
+const FooterCopyright = () => (
+  <>
+    © Copyright
+    {' '}
+    {new Date().getFullYear()}
+    {' '}
+    {Config.title}
+    . Powered with
+    {' '}
+    <span role="img" aria-label="Love">
+      ♥
+    </span>
+    {' '}
+    by
+    {' '}
+    <a href="https://creativedesignsguru.com">CreativeDesignsGuru</a>
+    {/*
+     * PLEASE READ THIS SECTION
+     * We'll really appreciate if you could have a link to our website
+     * The link doesn't need to appear on every pages, one link on one page is enough.
+     * Thank you for your support it'll mean a lot for us.
+     */}
+  </>
+);
+
+export { FooterCopyright };

src/footer/FooterIconList.tsx

@@ -0,0 +1,33 @@
+import React, { ReactNode } from 'react';
+
+type IFooterIconListProps = {
+  children: ReactNode;
+};
+
+const FooterIconList = (props: IFooterIconListProps) => (
+  <div className="footer-icon-list flex flex-wrap">
+    {props.children}
+
+    <style jsx>
+      {`
+        .footer-icon-list :global(a:not(:last-child)) {
+          @apply mr-3;
+        }
+
+        .footer-icon-list :global(a) {
+          @apply text-gray-500;
+        }
+
+        .footer-icon-list :global(a:hover) {
+          @apply text-gray-700;
+        }
+
+        .footer-icon-list :global(svg) {
+          @apply fill-current w-5 h-5;
+        }
+      `}
+    </style>
+  </div>
+);
+
+export { FooterIconList };

src/hero/HeroOneButton.tsx

@@ -0,0 +1,20 @@
+import React, { ReactNode } from 'react';
+
+type IHeroOneButtonProps = {
+  title: ReactNode;
+  description: string;
+  button: ReactNode;
+};
+
+const HeroOneButton = (props: IHeroOneButtonProps) => (
+  <header className="text-center">
+    <h1 className="text-5xl text-gray-900 font-bold whitespace-pre-line leading-hero">
+      {props.title}
+    </h1>
+    <div className="text-2xl mt-4 mb-16">{props.description}</div>
+
+    {props.button}
+  </header>
+);
+
+export { HeroOneButton };

src/layout/Section.tsx

@@ -0,0 +1,23 @@
+import React, { ReactNode } from 'react';
+
+type ISectionProps = {
+  title?: string;
+  description?: string;
+  yPadding?: string;
+  children: ReactNode;
+};
+
+const Section = (props: ISectionProps) => (
+  <div className={`max-w-screen-lg mx-auto px-3 ${props.yPadding ? props.yPadding : 'py-16'}`}>
+    {(props.title || props.description) && (
+      <div className="mb-12 text-center">
+        {props.title && <h2 className="text-4xl text-gray-900 font-bold">{props.title}</h2>}
+        {props.description && <div className="mt-4 text-xl md:px-20">{props.description}</div>}
+      </div>
+    )}
+
+    {props.children}
+  </div>
+);
+
+export { Section };

src/navigation/NavbarTwoColumns.tsx

@@ -0,0 +1,38 @@
+import React, { ReactNode } from 'react';
+
+import Link from 'next/link';
+
+type INavbarProps = {
+  logo: ReactNode;
+  children: ReactNode;
+};
+
+const NavbarTwoColumns = (props: INavbarProps) => (
+  <div className="flex flex-wrap justify-between items-center">
+    <div>
+      <Link href="/">
+        <a>{props.logo}</a>
+      </Link>
+    </div>
+
+    <nav>
+      <ul className="navbar flex items-center font-medium text-xl text-gray-800">
+        {props.children}
+      </ul>
+    </nav>
+
+    <style jsx>
+      {`
+        .navbar :global(li:not(:first-child)) {
+          @apply mt-0;
+        }
+
+        .navbar :global(li:not(:last-child)) {
+          @apply mr-5;
+        }
+      `}
+    </style>
+  </div>
+);
+
+export { NavbarTwoColumns };