[N/A] Marketing: repository

marketing/package.json

@@ -15,7 +15,8 @@
   },
   "dependencies": {
     "@artsy/fresnel": "^3.5.0",
-    "@egjs/react-flicking": "^4.9.0",
+    "@egjs/flicking-plugins": "4.7.1",
+    "@egjs/react-flicking": "4.11.3",
     "@floating-ui/react-dom": "^0.7.0",
     "@heroicons/react": "1.0.6",
     "@hookform/resolvers": "2.8.8",
@@ -33,7 +34,7 @@
     "axios": "0.21.1",
     "classnames": "2.3.1",
     "d3-format": "^3.1.0",
-    "framer-motion": "6.3.11",
+    "framer-motion": "6",
     "next": "12.1.0",
     "next-compose-plugins": "^2.2.1",
     "next-optimized-images": "^2.6.2",

marketing/src/components/carousel/component.tsx

@@ -2,6 +2,8 @@ import React, { ReactElement, useEffect, useRef, useState, cloneElement } from '
 
 import Flicking, { ERROR_CODE, FlickingError } from '@egjs/react-flicking';
 
+import { Fade } from '@egjs/flicking-plugins';
+
 export interface CarouselProps {
   slide: number;
   slides: {
@@ -27,6 +29,7 @@ export const Carousel: React.FC<CarouselProps> = ({
   const slider = useRef(null);
   const timer = useRef(null);
   const [pause, setPause] = useState(false);
+  const plugings = new Fade();
 
   useEffect(() => {
     if (timer.current) clearInterval(timer.current);
@@ -75,7 +78,7 @@ export const Carousel: React.FC<CarouselProps> = ({
     <div className="w-full">
       <div
         role="presentation"
-        className="overflow-hidden"
+        className="overflow-hidden space-x-5"
         onMouseOver={() => {
           if (timer.current) clearInterval(timer.current);
           setPause(true);
@@ -98,7 +101,7 @@ export const Carousel: React.FC<CarouselProps> = ({
           onWillChange={({ index }) => {
             if (onChange) onChange(index);
           }}
-          {...options}
+          {...{ ...options, plugins: [plugings] }}
         >
           {slides.map((sl) => {
             return cloneElement(sl.content, {

marketing/src/components/cookies/component.tsx

@@ -1,4 +1,4 @@
-import { AnimatePresence, motion } from 'framer-motion';
+import { motion } from 'framer-motion';
 import Link from 'next/link';
 
 import type { CookiesProps } from './types';
@@ -7,7 +7,8 @@ import Button from 'components/button';
 
 export const CookieModal: React.FC<CookiesProps> = ({ open, onAccept, onReject }: CookiesProps) => {
   return (
-    <AnimatePresence>
+    // <AnimatePresence>
+    <>
       {open && (
         <div>
           <motion.div
@@ -56,7 +57,7 @@ export const CookieModal: React.FC<CookiesProps> = ({ open, onAccept, onReject }
           </motion.div>
         </div>
       )}
-    </AnimatePresence>
+    </>
   );
 };
 

marketing/src/components/modal/component.tsx

@@ -1,7 +1,7 @@
 import { useRef } from 'react';
 
 import classNames from 'classnames';
-import { AnimatePresence, motion } from 'framer-motion';
+import { motion } from 'framer-motion';
 import { XIcon } from '@heroicons/react/solid';
 import { FocusScope } from '@react-aria/focus';
 import { useOverlay, usePreventScroll, useModal, OverlayContainer } from '@react-aria/overlays';
@@ -32,7 +32,7 @@ export const Modal: React.FC<ModalProps> = ({
   usePreventScroll({ isDisabled: !open });
 
   return (
-    <AnimatePresence>
+    <>
       {open && (
         <OverlayContainer>
           <motion.div
@@ -101,7 +101,7 @@ export const Modal: React.FC<ModalProps> = ({
           </motion.div>
         </OverlayContainer>
       )}
-    </AnimatePresence>
+    </>
   );
 };
 

marketing/src/containers/header/component.tsx

@@ -50,14 +50,14 @@ const Header: React.FC = () => {
         transition={{ duration: 0.25, bounce: 0 }}
         className="fixed top-0 left-0 z-50 flex items-center justify-between w-full font-semibold bg-white"
       >
-        <div className="px-4 lg:px-12 shrink-0">
+        <div className="px-4 lg:px-12 shrink-0 flex items-center">
           <Link href="/">
-            <a className="block w-[180px] h-[14px]">
+            <a className="block w-[323px] h-[80px] py-6">
               <Image
                 src="/images/logo.svg"
                 alt="Landgriffon"
-                width={180}
-                height={14}
+                width={323}
+                height={30}
                 priority
                 layout="responsive"
               />

marketing/src/containers/header/nav/component.tsx

@@ -3,7 +3,7 @@ import { useRouter } from 'next/router';
 
 import cx from 'classnames';
 import { useMediaMatch } from 'rooks';
-import { motion, AnimatePresence } from 'framer-motion';
+import { motion } from 'framer-motion';
 
 import lockScroll from 'react-lock-scroll';
 import Icon from 'components/icon/component';
@@ -21,7 +21,8 @@ const HeaderNav: React.FC<NavProps> = ({ open }: NavProps) => {
   lockScroll(!isLg && open);
 
   return (
-    <AnimatePresence>
+    // <AnimatePresence>
+    <>
       {(open || isLg) && (
         <motion.nav
           initial={{
@@ -129,6 +130,23 @@ const HeaderNav: React.FC<NavProps> = ({ open }: NavProps) => {
                 </a>
               </Link>
             </li>
+            <li>
+              <Link href="/repository">
+                <a
+                  className={cx({
+                    'relative block font-light text-2xl lg:text-base py-1 lg:py-7 mx-5 lg:mx-0 px-5 lg:px-0':
+                      true,
+                    'hover:after:absolute hover:after:top-0 hover:after:left-0 hover:after:h-full hover:after:w-2 lg:hover:after:h-1 lg:hover:after:w-full hover:after:bg-green-500':
+                      true,
+                    'text-green-500': pathname === '/repository',
+                    'after:content-[""] after:absolute after:top-0 after:left-0 after:h-full after:w-2 lg:after:h-1 lg:after:w-full after:bg-green-500':
+                      pathname === '/repository',
+                  })}
+                >
+                  Repository
+                </a>
+              </Link>
+            </li>
             <li>
               <Link href="/faq">
                 <a
@@ -172,7 +190,7 @@ const HeaderNav: React.FC<NavProps> = ({ open }: NavProps) => {
           </div>
         </motion.nav>
       )}
-    </AnimatePresence>
+    </>
   );
 };
 

marketing/src/containers/methodology/hero/component.tsx

@@ -46,7 +46,7 @@ const Hero: React.FC = () => {
               <h1 className="text-5xl font-black text-black uppercase font-display md:text-7xl">
                 Analyze impacts with world-renowned datasets.
               </h1>
-              <h2 className="text-2xl font-medium text-black font-display md:text-3xl">
+              <h2 className="text-3xl font-medium text-black font-display md:text-3xl">
                 Our open-source and open-science software ensures total transparency to align
                 companies with nature standards and ESG regulations, such as SBTN and TNFD guidance.
               </h2>

marketing/src/containers/methodology/webinar/component.tsx

@@ -22,7 +22,7 @@ const Webinar: FC = () => (
       </div>
       <a
         href="https://bit.ly/3GbWOMa"
-        className="font-semibold block w-[195px] h-[82px] flex items-center hover:cursor-pointer justify-center border-2 border-white focus-visible:ring-0 focus-visible:outline-0"
+        className="font-semibold w-[195px] h-[82px] flex items-center hover:cursor-pointer justify-center border-2 border-white focus-visible:ring-0 focus-visible:outline-0"
       >
         Watch now
       </a>