feat: Implement Fresh Design (#31)

* feat: Implement Fresh Design

* Remove legacy code

* Fix Tag

* Fat Display

* Re-Introduce IFrame Page

* Fix search logic

* Add Spinner

* Freshen up

* Extract search to Hook

* Add SFY Thanks

* Add offer form: design update

* new favicon

* Only Render Footer for SFY

* Remove Emoji

* Add Index Link

* Remove mobile nav

Co-authored-by: Alexander Zyuzkevich <[email protected]>

.eslintrc.js

@@ -20,4 +20,7 @@ module.exports = {
       version: 'detect',
     },
   },
+  env: {
+    node: true,
+  },
 };

src/assets/app.css

@@ -1,5 +1,346 @@
+/* purgecss start ignore */
 @import 'tailwindcss/base';
+/* purgecss end ignore */
+
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
+
 @import url('https://fonts.googleapis.com/css?family=Nanum+Pen+Script&display=swap&text=Emma+bringts!');
 @import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap');
+
+body {
+  @apply text-gray-900;
+}
+
+h1 {
+  @apply text-3xl font-extrabold py-2 leading-tight;
+}
+
+h2 {
+  @apply text-2xl font-bold leading-tight mb-6;
+}
+
+h3 {
+  @apply text-2xl font-bold leading-tight;
+}
+
+a {
+  @apply text-emma-purple-800;
+}
+
+
+.label {
+  @apply text-gray-800 font-semibold py-2 block;
+}
+
+.input-info {
+  @apply text-gray-800 font-normal text-sm block pb-2;
+}
+
+.emma-container {
+  @apply mx-auto px-3;
+}
+
+.btn {
+  @apply text-white bg-emma-purple-500 py-3 px-5 rounded text-center font-medium;
+}
+
+/*****
+*
+* Navi
+*
+****/
+
+.navi {
+  @apply flex items-center justify-between flex-wrap py-6;
+}
+
+.navi.open {
+  @apply bg-white;
+}
+
+.navi .logo {
+  @apply flex items-center flex-shrink-0 mr-6;
+}
+
+.navi .menu-icon {
+  @apply block;
+}
+
+.navi .menu-icon button {
+  @apply flex items-center px-3 py-2;
+}
+
+.navi .logo img {
+  @apply h-8;
+}
+
+.navi .menu {
+  @apply w-full block flex-row justify-center mt-6 hidden;
+}
+
+.navi.open .menu {
+  @apply block;
+}
+
+.navi .navi-item {
+  @apply text-base text-gray-900 py-3 font-medium rounded block;
+}
+
+.navi .btn {
+  @apply btn mt-6 block;
+}
+
+.navi .navi-item:hover {
+  @apply text-purple-800;
+}
+
+/*****
+*
+* Hero
+*
+****/
+
+.hero-section {
+  @apply bg-emma-yellow-500;
+}
+
+.hero-stage {
+  @apply flex flex-col-reverse items-center;
+}
+
+.hero-stage .text {
+  @apply items-center;
+}
+
+.hero-stage .img {
+  @apply items-center mx-20;
+}
+
+.p-lead {
+  @apply text-gray-900 text-base font-medium;
+}
+
+/*****
+*
+* ZIP
+*
+****/
+
+.zip-search {
+  @apply flex justify-between bg-white rounded-lg p-3 max-w-sm shadow-2xl mx-auto;
+}
+
+.zip-search .zipcode {
+  /* @apply text-xl ml-3 text-black w-5/12; */
+  @apply text-base ml-2 w-5/12;
+}
+
+.zip-search .btn {
+  /* @apply text-xl px-3 py-4 w-7/12; */
+  @apply text-base px-3 py-4 w-7/12;
+}
+
+/*****
+*
+* Category
+*
+****/
+
+.category-outer {
+  @apply overflow-scroll mx-auto;
+}
+
+.category-container {
+  width: 1000px;
+  @apply flex flex-row flex-wrap py-16 ml-3;
+}
+
+.category-item {
+  @apply relative bg-white rounded-full py-2 px-4 m-2 text-sm font-semibold;
+  bottom: 0;
+}
+
+.category-item:hover {
+  @apply shadow-xl;
+  bottom: 1px;
+  transition: all 0.3s cubic-bezier();
+}
+
+/*****
+*
+* Search Results
+*
+****/
+
+.search-results {
+  @apply py-16;
+}
+
+.search-results-item {
+  @apply mb-8 px-8 py-10 bg-white rounded-lg;
+}
+
+.search-results-item .content {
+  @apply flex flex-col;
+}
+
+.search-results-item .header {
+  @apply pb-8;
+}
+
+.search-results-item .contact {
+  @apply mt-8;
+}
+
+.search-results-item a {
+  @apply block;
+}
+
+.search-results a.category-item {
+  @apply bg-emma-yellow-400 inline mx-0;
+}
+
+.search-results-item h3 {
+  @apply pt-0 pb-4;
+}
+
+.search-results-item .description {
+  @apply pb-6;
+}
+
+.search-results-item .phone {
+  @apply pb-3;
+}
+
+.search-results-item .email {
+  @apply pb-3;
+}
+
+.search-results-item .website {
+  @apply pb-3;
+}
+
+@screen md {
+  h1 {
+    @apply text-6xl py-4;
+  }
+
+  h3 {
+    @apply text-2xl;
+  }
+
+  .p-lead {
+    @apply text-lg;
+  }
+
+  .emma-container {
+    @apply mx-auto px-6;
+  }
+
+  /*****
+    *
+    * Hero
+    *
+    ****/
+  .hero-stage {
+    @apply flex-row py-12;
+  }
+
+  .hero-stage .text {
+    @apply w-7/12 mr-16;
+  }
+
+  .hero-stage .img {
+    @apply w-5/12 ml-16;
+  }
+
+  /*****
+    *
+    * ZIP
+    *
+    ****/
+
+  /*****
+    *
+    * Category
+    *
+    ****/
+
+  .category-container {
+    @apply justify-center m-auto;
+  }
+
+  .category-item {
+    @apply py-3 px-5;
+    bottom: 0px;
+  }
+
+  /*****
+    *
+    * Search Results
+    *
+    ****/
+
+  .search-results-item .content {
+    @apply flex-row;
+  }
+
+  .search-results-item .info {
+    @apply mr-10 w-1/2;
+  }
+
+  .search-results-item .contact {
+    @apply mt-0 w-1/2;
+  }
+}
+
+@screen lg {
+  /*****
+    *
+    * navi
+    *
+    ****/
+
+  .navi .menu-icon {
+    @apply hidden;
+  }
+
+  .navi .menu {
+    @apply flex items-center w-auto mt-0;
+  }
+
+  .navi .navi-item {
+    @apply inline px-2;
+  }
+
+  .navi .btn {
+    @apply ml-6 mt-0;
+  }
+
+  /*****
+    *
+    * Search Results
+    *
+    ****/
+  .search-results-item .info {
+    @apply w-2/3;
+  }
+
+  .search-results-item .contact {
+    @apply w-1/3;
+  }
+}
+
+@keyframes spinning {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.endless-spinning {
+  animation: spinning 1.5s linear infinite;
+}