Work on client feedback

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 = [

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>
   )
 }

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;

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;

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'])}

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">

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">

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">