feat(front):homepage changes[MARXAN-1267]

app/components/carousel/component.stories.tsx

@@ -18,26 +18,78 @@ const Template: Story<CarouselProps> = ({ ...args }: CarouselProps) => (
 
 export const Default = Template.bind({});
 Default.args = {
-  images: [
+  slides: [
     {
       id: 1,
-      alt: 'carousel',
-      src: 'https://dummyimage.com/866x565/000/fff.png&text=01',
+      content: (
+        <div
+          className="relative w-full"
+          style={{
+            paddingBottom: '56.25%',
+          }}
+        >
+          <div
+            className="absolute w-full h-full bg-center bg-no-repeat bg-contain rounded-3xl"
+            style={{
+              backgroundImage: 'url(https://dummyimage.com/866x565/000/fff.png&text=01)',
+            }}
+          />
+        </div>
+      ),
     },
     {
       id: 2,
-      alt: 'carousel',
-      src: 'https://dummyimage.com/866x565/000/fff.png&text=02',
+      content: (
+        <div
+          className="relative w-full"
+          style={{
+            paddingBottom: '56.25%',
+          }}
+        >
+          <div
+            className="absolute w-full h-full bg-center bg-no-repeat bg-contain rounded-3xl"
+            style={{
+              backgroundImage: 'url(https://dummyimage.com/866x565/000/fff.png&text=02)',
+            }}
+          />
+        </div>
+      ),
     },
     {
       id: 3,
-      alt: 'carousel',
-      src: 'https://dummyimage.com/866x565/000/fff.png&text=03',
+      content: (
+        <div
+          className="relative w-full"
+          style={{
+            paddingBottom: '56.25%',
+          }}
+        >
+          <div
+            className="absolute w-full h-full bg-center bg-no-repeat bg-contain rounded-3xl"
+            style={{
+              backgroundImage: 'url(https://dummyimage.com/866x565/000/fff.png&text=03)',
+            }}
+          />
+        </div>
+      ),
     },
     {
       id: 4,
-      alt: 'carousel',
-      src: 'https://dummyimage.com/866x565/000/fff.png&text=04',
+      content: (
+        <div
+          className="relative w-full"
+          style={{
+            paddingBottom: '56.25%',
+          }}
+        >
+          <div
+            className="absolute w-full h-full bg-center bg-no-repeat bg-contain rounded-3xl"
+            style={{
+              backgroundImage: 'url(https://dummyimage.com/866x565/000/fff.png&text=04)',
+            }}
+          />
+        </div>
+      ),
     },
   ],
 };

app/components/carousel/component.tsx

@@ -1,17 +1,23 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, {
+  ReactElement, useEffect, useRef, useState,
+} from 'react';
 
 import Flicking, { ERROR_CODE, FlickingError } from '@egjs/react-flicking';
 import cx from 'classnames';
 
+import Icon from 'components/icon';
+
+import ARROW_LEFT_SVG from 'svgs/ui/arrow-left.svg?sprite';
+import ARROW_RIGHT_SVG from 'svgs/ui/arrow-right.svg?sprite';
+
 export interface CarouselProps {
-  images: {
+  slides: {
     id: string | number;
-    alt: string;
-    src: string
+    content?: ReactElement;
   }[];
 }
 
-export const Carousel: React.FC<CarouselProps> = ({ images }: CarouselProps) => {
+export const Carousel: React.FC<CarouselProps> = ({ slides }: CarouselProps) => {
   const slider = useRef(null);
   const timer = useRef(null);
   const [slide, setSlide] = useState(0);
@@ -35,23 +41,28 @@ export const Carousel: React.FC<CarouselProps> = ({ images }: CarouselProps) =>
             }
           });
       }
-    }, 4000);
+    }, 3000);
 
     return () => {
       if (timer.current) clearInterval(timer.current);
     };
   }, [pause, slider, slide]);
 
   return (
-    <div
-      className="w-full"
-    >
+    <div className="relative w-full">
+
+      <button
+        type="button"
+        aria-label="dot-element"
+        onClick={() => slider.current.prev()}
+        className="absolute flex items-center justify-center w-16 h-16 border border-gray-500 rounded-full -left-36 top-12 opacity-30 hover:opacity-90"
+      >
+        <Icon className="w-3 h-3 text-black" icon={ARROW_LEFT_SVG} />
+      </button>
+
       <div
         role="presentation"
-        className="overflow-hidden bg-black rounded-3xl"
-        style={{
-          boxShadow: '0px 50px 50px rgba(0, 0, 0, 0.5)',
-        }}
+        className="overflow-hidden"
         onMouseOver={() => {
           if (timer.current) clearInterval(timer.current);
           setPause(true);
@@ -69,52 +80,43 @@ export const Carousel: React.FC<CarouselProps> = ({ images }: CarouselProps) =>
           setPause(false);
         }}
       >
+
         <Flicking
           ref={slider}
+          duration={0}
           circular
           onWillChange={({ index }) => {
             setSlide(index);
           }}
         >
-          {images.map((img) => {
+          {slides.map((sl) => {
             return (
               <div
-                key={img.id}
+                key={sl.id}
                 className="w-full"
               >
-                <div
-                  className="relative w-full"
-                  style={{
-                    paddingBottom: '56.25%',
-                  }}
-                >
-                  <div
-                    className="absolute w-full h-full bg-center bg-no-repeat bg-contain rounded-3xl"
-                    style={{
-                      backgroundImage: `url(${img.src})`,
-                    }}
-                  />
-                </div>
+                {sl.content}
               </div>
             );
           })}
         </Flicking>
+
       </div>
 
       <div className="flex flex-row items-center justify-center space-x-1 mt-14">
-        {images.map((img, i) => {
+        {slides.map((sl, i) => {
           return (
             <button
-              key={img.id}
+              key={sl.id}
               type="button"
               aria-label="dot-element"
               onClick={() => {
                 slider.current.moveTo(i);
               }}
               className={cx({
                 'relative w-20': true,
-                'bg-blue-500 h-0.5': slide === i,
-                'bg-gray-300 h-px': slide !== i,
+                'bg-blue-500 h-1': slide === i,
+                'bg-gray-300 h-0.5': slide !== i,
               })}
             >
               <div
@@ -124,6 +126,14 @@ export const Carousel: React.FC<CarouselProps> = ({ images }: CarouselProps) =>
           );
         })}
       </div>
+      <button
+        type="button"
+        aria-label="dot-element"
+        onClick={() => slider.current.next()}
+        className="absolute flex items-center justify-center w-16 h-16 border border-gray-500 rounded-full top-12 -right-36 opacity-30 hover:opacity-90"
+      >
+        <Icon className="w-3 h-3 text-black" icon={ARROW_RIGHT_SVG} />
+      </button>
 
     </div>
   );

app/layout/footer/component.tsx

@@ -4,41 +4,97 @@ import Link from 'next/link';
 
 import Wrapper from 'layout/wrapper';
 
+import Button from 'components/button';
+import Icon from 'components/icon';
+
+import TWITTER_FILLED_SVG from 'svgs/social/twitter-filled.svg?sprite';
+
 export interface FooterProps {
 
 }
 
 export const Footer: React.FC<FooterProps> = () => {
   return (
-    <div className="bg-gray-700">
-      <Wrapper>
-        <div className="w-full max-w-5xl py-10 mx-auto md:py-32">
-          <h2
-            className="text-4xl text-center md:text-left md:text-6xl font-heading"
-          >
-            Want to know more
-          </h2>
-          <h2
-            className="text-4xl text-center md:text-left md:text-6xl font-heading"
-          >
-            about Marxan?
-          </h2>
-          <div className="flex flex-col items-center mt-10 space-y-8 text-2xl md:space-y-0 md:space-x-8 font-heading md:flex-row md:mt-16">
-            <span>Explore more:</span>
-            <Link href="/about">
-              <a href="/about" className="text-gray-400 hover:text-gray-200">About</a>
-            </Link>
-            <Link href="/community">
-              <a href="/community" className="text-gray-400 hover:text-gray-200">Community</a>
-            </Link>
+    <>
+      <div className="bg-primary-500">
+        <Wrapper>
+          <div className="flex flex-col w-full max-w-5xl py-24 mx-auto space-y-18 font-heading">
+            <div className="text-3xl text-black md:text-6xl">
+              <p>
+                Want to know more
+              </p>
+              <p>
+                about Marxan?
+              </p>
+            </div>
+            <div className="flex flex-col space-y-6 text-2xl md:space-y-0 md:space-x-8 md:items-center md:flex-row">
+              <p className="text-black">Explore more:</p>
+              <Link href="/community">
+                <a href="/community" className="text-black opacity-50 hover:underline hover:opacity-100">Community</a>
+              </Link>
+              <Link href="/about">
+                <a href="/about" className="text-black opacity-50 hover:underline hover:opacity-100">About</a>
+              </Link>
+            </div>
           </div>
-        </div>
-      </Wrapper>
+        </Wrapper>
+      </div>
 
-      {/* <Wrapper>
-        <div className="py-8 border-t-2 border-gray-600 border-opacity-25">
-          <div className="w-full max-w-5xl mx-auto">
-            <div className="flex items-center justify-center space-x-8 md:justify-start">
+      <div className="py-24 bg-gray-700">
+        <Wrapper>
+          <div className="justify-between w-full max-w-5xl pb-16 mx-auto space-y-24 md:flex md:space-y-0 md:space-x-36">
+            <div className="space-y-12">
+              <h3 className="text-2xl font-heading">
+                Reach out with comments
+                or suggestions.
+              </h3>
+              <Button
+                href="mailto:marxancloud@gmail.com"
+                size="lg"
+                target="_blank"
+                theme="secondary-alt"
+                type="submit"
+                className="w-full md:w-64"
+              >
+                Contact Us
+              </Button>
+            </div>
+
+            <div className="space-y-12">
+              <h3 className="text-2xl font-heading">
+                Join the Google Marxan group discussion forum.
+              </h3>
+              <Button
+                href="https://groups.google.com/g/marxan"
+                className="w-full md:w-64"
+                theme="secondary-alt"
+                size="lg"
+              >
+                MARXAN Google Group
+              </Button>
+            </div>
+          </div>
+
+          <div className="w-full h-px max-w-5xl mx-auto opacity-20" style={{ background: 'linear-gradient(to right, transparent, #ffffff, transparent)' }} />
+
+          <div className="justify-between w-full max-w-5xl pt-12 mx-auto space-y-10 md:flex md:space-y-0">
+            <div className="space-y-2">
+              <p className="text-base">Follow us on twitter and join in the conversation.</p>
+              <div className="flex items-center space-x-3">
+                <Icon icon={TWITTER_FILLED_SVG} className="w-5 h-5 text-primary-500" />
+                <a
+                  className="font-semibold text-primary-500 hover:underline"
+                  type="button"
+                  role="button"
+                  href="https://twitter.com/marxan_planning?"
+                  rel="noreferrer"
+                  target="_blank"
+                >
+                  @Marxan_Planning
+                </a>
+              </div>
+            </div>
+            <div className="flex flex-col md:flex-row md:items-center md:justify-center md:space-x-8">
               <Link href="/terms-of-use">
                 <a href="/terms-of-use" className="text-white hover:underline">Terms of use</a>
               </Link>
@@ -47,9 +103,9 @@ export const Footer: React.FC<FooterProps> = () => {
               </Link>
             </div>
           </div>
-        </div>
-      </Wrapper> */}
-    </div>
+        </Wrapper>
+      </div>
+    </>
   );
 };
 

app/layout/home/banner/component.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 
 import Wrapper from 'layout/wrapper';
 
-import BANNER_1_IMG from 'images/home-banner/banner-1.png';
-import BANNER_2_IMG from 'images/home-banner/banner-2.png';
-import BANNER_3_IMG from 'images/home-banner/banner-3.png';
-import BANNER_BACKGROUND from 'images/home-banner/banner-background.png';
+import BANNER_1_IMG from 'images/home/banner/banner-1.png';
+import BANNER_2_IMG from 'images/home/banner/banner-2.png';
+import BANNER_3_IMG from 'images/home/banner/banner-3.png';
+import BANNER_BACKGROUND from 'images/home/banner/banner-background.png';
 
 export interface HomeBannerProps {
 
@@ -15,7 +15,7 @@ const claimLines = [{ id: '0', text: 'free and open' }, { id: '1', text: 'flexib
 
 export const HomeBanner: React.FC<HomeBannerProps> = () => {
   return (
-    <div className="py-10 bg-gray-500 md:py-32" style={{ background: 'radial-gradient(circle at 50% 60%, rgba(54,55,62,1) 0%, rgba(17,17,17,1) 51%)' }}>
+    <div className="py-10 md:py-32" style={{ background: 'radial-gradient(circle at 50% 70%, rgba(54,55,62,1) 0%, rgba(21,21,21,1) 51%)' }}>
 
       <Wrapper>
         <div className="flex flex-col items-center -space-y-20 md:space-y-20">