From b39cf400f92551dc7ff2e09c5c14281390cddda8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fede=20=C3=81lvarez?= <fedealvarezcampos@gmail.com>
Date: Sat, 16 Apr 2022 00:09:53 +0200
Subject: [PATCH] Work on client feedback

---
 src/components/common/footer/footer.tsx       |  8 +++---
 src/components/common/footer/index.tsx        | 25 +++++++++++--------
 .../homepage/benefits/benefits.module.scss    |  2 +-
 .../latest-news/latest-news.module.scss       |  5 ++++
 .../sections/products/app/index.tsx           |  2 +-
 .../sections/products/network/index.tsx       |  2 +-
 .../sections/products/stack/index.tsx         |  2 +-
 .../sections/products/token/index.tsx         |  2 +-
 8 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/src/components/common/footer/footer.tsx b/src/components/common/footer/footer.tsx
index abfd629..e6e51c1 100644
--- a/src/components/common/footer/footer.tsx
+++ b/src/components/common/footer/footer.tsx
@@ -19,10 +19,10 @@ export const DevelopersLinks = [
 export const ProductsLinks = [
   { href: '/products', title: 'Products' },
   { href: '/watchers', title: 'Watchers (SDK)' },
-  { href: '/stack', title: 'Laconic Stack' },
-  { href: '/network', title: 'Laconic Network' },
-  { href: '/app', title: 'Laconic App' },
-  { href: '/token', title: 'Laconic Network Token (LNT)' }
+  { href: '/products/#laconicstack', title: 'Laconic Stack' },
+  { href: '/products/#laconicnetwork', title: 'Laconic Network' },
+  { href: '/products/#laconicapp', title: 'Laconic App' },
+  { href: '/products/#laconictoken', title: 'Laconic Network Token (LNT)' }
 ]
 
 export const AboutLinks = [
diff --git a/src/components/common/footer/index.tsx b/src/components/common/footer/index.tsx
index 78b455c..47f1996 100644
--- a/src/components/common/footer/index.tsx
+++ b/src/components/common/footer/index.tsx
@@ -36,7 +36,8 @@ const SimpleForm = ({
 }: FormProps) => {
   let input: HTMLInputElement | null
 
-  const submit = () => {
+  const submit = (e: any) => {
+    e.preventDefault()
     if (!onSubmitted) return
     input &&
       input.value.indexOf('@') > -1 &&
@@ -62,16 +63,18 @@ const SimpleForm = ({
       {status === 'success' && (
         <div dangerouslySetInnerHTML={{ __html: message }} />
       )}
-      <input
-        placeholder="Enter your email to stay updated"
-        ref={(node) => (input = node)}
-        required
-        type="email"
-      />
-      <button onClick={submit}>
-        <ArrowLink />
-        <span className="sr-only">Send</span>
-      </button>
+      <form action="/" onSubmit={(e) => submit(e)}>
+        <input
+          placeholder="Enter your email to stay updated"
+          ref={(node) => (input = node)}
+          required
+          type="email"
+        />
+        <button type="submit">
+          <ArrowLink />
+          <span className="sr-only">Send</span>
+        </button>
+      </form>
     </div>
   )
 }
diff --git a/src/components/sections/homepage/benefits/benefits.module.scss b/src/components/sections/homepage/benefits/benefits.module.scss
index a41796a..7242082 100644
--- a/src/components/sections/homepage/benefits/benefits.module.scss
+++ b/src/components/sections/homepage/benefits/benefits.module.scss
@@ -2,7 +2,7 @@
 
 .section {
   @include respond-to('mobile') {
-    padding-bottom: tovw(105px, 'mobile');
+    padding-bottom: tovw(65px, 'mobile', 75px);
 
     .grid {
       display: flex;
diff --git a/src/components/sections/homepage/latest-news/latest-news.module.scss b/src/components/sections/homepage/latest-news/latest-news.module.scss
index 1ad671a..28d91ae 100644
--- a/src/components/sections/homepage/latest-news/latest-news.module.scss
+++ b/src/components/sections/homepage/latest-news/latest-news.module.scss
@@ -1,6 +1,11 @@
 @import '~/css/helpers';
 
 .section {
+  @include respond-to('mobile') {
+    margin-top: unset;
+    padding: tovw(30px, 'mobile', 60px) 0 tovw(40px, 'mobile', 70px) 0;
+  }
+
   display: flex;
   align-items: center;
   flex-direction: column;
diff --git a/src/components/sections/products/app/index.tsx b/src/components/sections/products/app/index.tsx
index 2ad3dea..aa85376 100644
--- a/src/components/sections/products/app/index.tsx
+++ b/src/components/sections/products/app/index.tsx
@@ -9,7 +9,7 @@ import s from './app.module.scss'
 
 const AppSection = () => {
   return (
-    <Section className={s['section']}>
+    <Section className={s['section']} id="laconicapp">
       <video
         autoPlay
         className={clsx('hide-on-mobile', s['video'])}
diff --git a/src/components/sections/products/network/index.tsx b/src/components/sections/products/network/index.tsx
index 592af83..ae4c38f 100644
--- a/src/components/sections/products/network/index.tsx
+++ b/src/components/sections/products/network/index.tsx
@@ -7,7 +7,7 @@ import s from './network.module.scss'
 
 const Network = () => {
   return (
-    <Section className={s['section']}>
+    <Section className={s['section']} id="laconicnetwork">
       <Container className={s['container']}>
         <div>
           <Heading as="h2" variant="lg">
diff --git a/src/components/sections/products/stack/index.tsx b/src/components/sections/products/stack/index.tsx
index 0e330c5..c68a723 100644
--- a/src/components/sections/products/stack/index.tsx
+++ b/src/components/sections/products/stack/index.tsx
@@ -10,7 +10,7 @@ import s from './stack.module.scss'
 
 const Stack = () => {
   return (
-    <Section className={s['section']}>
+    <Section className={s['section']} id="laconicstack">
       <Container className={s['container']}>
         <div className={s.header}>
           <Heading as="h2" variant="lg">
diff --git a/src/components/sections/products/token/index.tsx b/src/components/sections/products/token/index.tsx
index 1df3d17..b1ce30a 100644
--- a/src/components/sections/products/token/index.tsx
+++ b/src/components/sections/products/token/index.tsx
@@ -7,7 +7,7 @@ import s from './token.module.scss'
 
 const Token = () => {
   return (
-    <Section className={s['section']}>
+    <Section className={s['section']} id="laconictoken">
       <Container className={s['container']}>
         <div>
           <Heading as="h2" variant="lg">