Feat/fe web layout

apps/fe-web/src/app/components/Account/Account.module.scss

@@ -0,0 +1,5 @@
+.account {
+  display: flex;
+  color: $gray-600;
+  font-size: $font-size-xs;
+}

apps/fe-web/src/app/components/Account/Account.tsx

@@ -0,0 +1,9 @@
+import styles from './Account.module.scss';
+
+export default function Account() {
+  return (
+    <div className={styles.account}>
+      <p>Sign In</p>&nbsp;/&nbsp;<p>Sign Up</p>
+    </div>
+  );
+}

apps/fe-web/src/app/components/Button/Button.module.scss

@@ -0,0 +1,46 @@
+.button {
+  display: inline-flex;
+  align-items: center;
+  background-color: $primary;
+  padding: 16px 40px;
+  font-size: $font-size-md;
+  color: $white;
+  font-weight: $weight-600;
+  border-radius: $border-radius-button;
+  cursor: pointer;
+
+  &.small {
+    padding: 10px 24px;
+    font-size: $font-size-xs;
+  }
+
+  &.medium {
+    padding: 14px 32px;
+    font-size: $font-size-sm;
+  }
+
+  &.outline {
+    border: 2px solid $primary;
+    background-color: $white;
+    color: $primary;
+  }
+
+  &.activeOutline {
+    border: 2px solid $tertiary;
+    color: $tertiary;
+  }
+
+  &.active {
+    background-color: $tertiary;
+  }
+
+  &.ghost {
+    background: rgba(86, 172, 89, 0.1);
+    color: $primary;
+  }
+
+  &.activeGhost {
+    background: rgba(44, 116, 47, 0.2);
+    color: $tertiary;
+  }
+}

apps/fe-web/src/app/components/Button/Button.tsx

@@ -0,0 +1,44 @@
+import React, { ReactNode, useState } from 'react';
+import clsx from 'clsx';
+import styles from './Button.module.scss';
+import Image from 'next/image';
+
+interface ButtonProps {
+  children: string;
+  variant?: 'primary' | 'transparent';
+  size?: 'small' | 'medium' | 'large';
+  icon?: ReactNode | string;
+  fill?: 'filled' | 'outline';
+  ghost?: boolean;
+}
+
+export default function Button({
+  children = 'Button',
+  variant = 'primary',
+  size = 'large',
+  icon,
+  fill = 'filled',
+  ghost = false,
+}: ButtonProps) {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <div>
+      <button
+        className={clsx(
+          styles.button,
+          styles[variant],
+          styles[fill],
+          styles[size],
+          isHovered &&
+            (fill === 'outline' ? styles.activeOutline : styles.active),
+          ghost && (isHovered ? styles.activeGhost : styles.ghost)
+        )}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      >
+        {children}
+      </button>
+    </div>
+  );
+}

apps/fe-web/src/app/components/CallNow/CallNow.module.scss

@@ -0,0 +1,10 @@
+.callNow {
+  display: flex;
+  align-items: center;
+}
+
+.phoneNumber {
+  padding-left: 8px;
+  font-size: $font-size-sm;
+  color: $white;
+}

apps/fe-web/src/app/components/CallNow/CallNow.tsx

@@ -0,0 +1,16 @@
+import Image from 'next/image';
+import Phone from '../../assets/images/PhoneCall.svg';
+
+import styles from './CallNow.module.scss';
+
+const phoneNumber = 2195550114;
+const phoneDisplay = '(219) 555-0114';
+
+export default function CallNow() {
+  return (
+    <a className={styles.callNow} href={`tel:${phoneNumber}`}>
+      <Image src={Phone} alt='phone' />
+      <span className={styles.phoneNumber}>{phoneDisplay}</span>
+    </a>
+  );
+}

apps/fe-web/src/app/components/Company/Company.module.scss

@@ -0,0 +1,10 @@
+.company {
+  max-width: 336px;
+  width: 100%;
+
+  p {
+    padding-top: 16px;
+    color: $gray-500;
+    font-size: $font-size-sm;
+  }
+}

apps/fe-web/src/app/components/Company/Company.tsx

@@ -0,0 +1,17 @@
+import Cta from '../Cta/Cta';
+import Logo from '../Logo/Logo';
+
+import styles from './Company.module.scss';
+
+export default function Company() {
+  return (
+    <div className={styles.company}>
+      <Logo colorText='white' />
+      <p>
+        Morbi cursus porttitor enim lobortis molestie. Duis gravida turpis dui,
+        eget bibendum magna congue nec.
+      </p>
+      <Cta />
+    </div>
+  );
+}

apps/fe-web/src/app/components/CopyRight/CopyRight.module.scss

@@ -0,0 +1,4 @@
+.copyRight {
+  color: $gray-500;
+  font-size: $font-size-sm;
+}

apps/fe-web/src/app/components/CopyRight/CopyRight.tsx

@@ -0,0 +1,9 @@
+import styles from './CopyRight.module.scss';
+
+export default function CopyRight() {
+  return (
+    <div className={styles.copyRight}>
+      <p>Ecobazar eCommerce &copy; 2021. All Rights Reserved</p>
+    </div>
+  );
+}

apps/fe-web/src/app/components/Cta/Cta.module.scss

@@ -0,0 +1,19 @@
+.cta {
+  display: flex;
+  align-items: center;
+  padding-top: 16px;
+
+  p {
+    padding: 0 !important;
+    color: $white !important;
+    font-size: $font-size-sm;
+    font-weight: $weight-600;
+  }
+
+  span {
+    padding: 0 16px;
+    color: $white !important;
+    font-size: $font-size-sm;
+    font-weight: $weight-600;
+  }
+}

apps/fe-web/src/app/components/Cta/Cta.tsx

@@ -0,0 +1,19 @@
+import styles from './Cta.module.scss';
+
+interface CtaProps {
+  numberPhone?: string;
+  email?: string;
+}
+
+export default function Cta({
+  numberPhone = '(219) 555-0114',
+  email = 'Proxy@gmail.com',
+}: CtaProps) {
+  return (
+    <div className={styles.cta}>
+      <p>{numberPhone}</p>
+      <span>or</span>
+      <p>{email}</p>
+    </div>
+  );
+}

apps/fe-web/src/app/components/Details/Details.module.scss

@@ -0,0 +1,22 @@
+.details {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: $gray-600;
+  font-size: $font-size-xs;
+}
+
+.links {
+  display: flex;
+  align-items: center;
+}
+
+.selector {
+  display: flex;
+  align-items: center;
+}
+
+.divider {
+  padding: 0 20px;
+  color: $gray-200;
+}

apps/fe-web/src/app/components/Details/Details.tsx

@@ -0,0 +1,23 @@
+import Image from 'next/image';
+import Account from '../Account/Account';
+import Location from '../Location/Location';
+
+import styles from './details.module.scss';
+import InfoOption from '../InfoOption/InfoOption';
+
+export default function Details() {
+  return (
+    <div className={styles.details}>
+      <Location />
+
+      <div className={styles.links}>
+        <div className={styles.selector}>
+          <InfoOption>Eng</InfoOption>
+          <InfoOption>USD</InfoOption>
+        </div>
+        <span className={styles.divider}>|</span>
+        <Account />
+      </div>
+    </div>
+  );
+}

apps/fe-web/src/app/components/Divider/Divider.module.scss

@@ -0,0 +1,3 @@
+.divider {
+  border-top: 1px solid $gray-100;
+}

apps/fe-web/src/app/components/Divider/Divider.tsx

@@ -0,0 +1,5 @@
+import styles from './Divider.module.scss';
+
+export default function Divider() {
+  return <div className={styles.divider}></div>;
+}

apps/fe-web/src/app/components/Footer/Footer.module.scss

@@ -0,0 +1,17 @@
+.wrapper {
+  width: 100%;
+  background-color: $gray-900;
+
+  main {
+    width: 1440px;
+    margin: 0 auto;
+  }
+}
+
+.copy_payment {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 1px solid $gray-400;
+  padding: 24px 0;
+}