Merge pull request #46 from nexlabsweb3/fix

Fix

frontend/src/app/Modal.tsx

@@ -7,7 +7,7 @@ import {
   TransitionChild,
 } from '@headlessui/react';
 import { BackwardIcon } from '@heroicons/react/24/outline';
-import { BackIcon2 } from '@/assets/icons/icons';
+import { BackIcon2 } from '@/assets/icons';
 
 type ModalProps = {
   open: boolean;

frontend/src/app/components/ConnectWallet.tsx

@@ -0,0 +1,16 @@
+import { roboto } from '../fonts';
+
+const ConnectWallet = (props: any) => {
+  return (
+    <button
+      className={`w-[12.5rem] h-14 grid py-2 px-[1.25rem]
+          place-items-center rounded-2xl gap-2 text-textPrimary
+          font-medium text-base bg-primary ${roboto.variable} font-roboto`}
+      {...props}
+    >
+      CONNECT WALLET
+    </button>
+  );
+};
+
+export default ConnectWallet;

frontend/src/app/components/ContentSection.tsx

@@ -0,0 +1,208 @@
+import {
+  ContentCTAArtDirection,
+  ContentEdgeArtDirection,
+  EdgeUnderline,
+  EdgeUnderLineMobile,
+  ScanGuardEdge,
+  ScanGuardEdgeMobile,
+  ScanList,
+  ScanListMobile,
+} from '@/assets/landing-page';
+import { poppins, roboto } from '../fonts';
+import ScanButton from './ScanButton';
+
+const ContentSection = () => (
+  <section className="my-[7.5rem] md:my-[6.5rem]">
+    <ContentHeader />
+    <ContentCTA />
+    <ContentCTAMobile />
+    <GuideContent />
+  </section>
+);
+
+const ContentHeader = () => (
+  <div className="my-28 text-center px-4 md:px-0">
+    <div className={`${poppins.variable} text-center text-textPrimary mb-6`}>
+      <h2
+        className={`${poppins.variable} hidden md:block md:text-2xl lg:text-4xl
+          font-semibold font-poppins`}
+      >
+        Introducing ScanGuard, a trusted platform designed to{' '}
+        <br className="hidden md:block" /> safeguard consumers from counterfeit
+        goods <br className="hidden md:block" /> with blockchain technology
+      </h2>
+      <h2
+        className={`${poppins.variable} text-2xl font-medium leading-9 md:hidden font-poppins`}
+      >
+        Introducing ScanGuard, a <br /> trusted platform designed to <br />{' '}
+        safeguard consumers from <br /> counterfeit goods <br /> with blockchain
+        technology
+      </h2>
+    </div>
+    <div>
+      <p
+        className={`${roboto.variable} hidden md:block text-textFaded text-base font-normal font-roboto`}
+      >
+        SCANGUARD is a project aiming to protect consumers from counterfeit
+        products by allowing easy authentication with a{' '}
+        <br className="hidden lg:block" /> QR code scan. Why? Because the rise
+        of counterfeit products is exploiting trusted brands, damaging
+        reputations, and <br className="hidden lg:block" />
+        even risking your health. You deserve better, don’t you think?
+      </p>
+      <p
+        className={`${roboto.variable} md:hidden text-textFaded text-base font-normal font-roboto`}
+      >
+        SCANGUARD is a project aiming to protect consumers from counterfeit
+        products by allowing easy authentication with a QR code scan. <br />
+        <br /> Why? Because the rise of counterfeit products is exploiting
+        trusted brands, damaging reputations, and even risking your health. You
+        deserve better, don’t you think?
+      </p>
+    </div>
+  </div>
+);
+
+const ContentCTA = () => (
+  <div
+    className={`hidden lg:grid place-items-center lg:py-16
+    shadow-2xl rounded-2xl lg:my-28 bg-[#232323]`}
+  >
+    <div className="grid grid-cols-2 lg:max-w-[50rem]">
+      <VideoComponent />
+      <div
+        className={`flex flex-col items-center justify-center gap-6
+        text-textFaded ${roboto.variable} text-base text-center font-roboto`}
+      >
+        <div>
+          <h3
+            className={`${poppins.variable} text-textPrimary text-2xl text-center
+              font-semibold mb-1 font-poppins`}
+          >
+            HOW IT WORKS
+          </h3>
+          <p>Super easy steps to use scanguard</p>
+        </div>
+        <AuthenticityParagraph />
+        <ScanButton />
+      </div>
+    </div>
+  </div>
+);
+
+const ContentCTAMobile = () => (
+  <div
+    className={`lg:hidden relative flex flex-col justify-center place-items-center
+    text-textFaded ${roboto.variable} text-base text-center font-roboto`}
+  >
+    <div className="mb-6">
+      <h3
+        className={`${poppins.variable} text-textPrimary text-2xl text-center
+      font-semibold mb-1 font-poppins`}
+      >
+        HOW IT WORKS
+      </h3>
+      <p className={`${roboto.variable} font-roboto`}>
+        Super easy steps to use scanguard
+      </p>
+    </div>
+    <VideoComponent />
+    <AuthenticityParagraph />
+    <ScanButton />
+    <div className="absolute bottom-4 right-1 md:hidden">
+      <ContentCTAArtDirection />
+    </div>
+  </div>
+);
+
+const VideoComponent = () => (
+  <div className="w-[22rem] h-[31rem] lg:h-[36.5rem] rounded-2xl">
+    <video controls className="w-full h-full object-cover rounded-2xl">
+      <source src="" type="" />
+    </video>
+  </div>
+);
+
+const AuthenticityParagraph = () => (
+  <p
+    className={`mt-4 mb-6 md:mt-0 md:mb-0
+    ${roboto.variable} font-roboto p-8`}
+  >
+    It’s super simple. Just switch to your phone camera and scan the barcode or
+    QR code of the product to check it’s authenticity.
+  </p>
+);
+
+const GuideContent = () => (
+  <div
+    className={`relative flex flex-col lg:flex-row justify-center
+      items-center gap-6 lg:gap-32 my-28 px-8
+      shadow-2xl rounded-2xl bg-[#232323] py-12
+      lg:shadow-none lg:rounded-none lg:bg-inherit lg:py-0`}
+  >
+    <div className="flex-1 flex flex-col gap-6">
+      <GuideContentHeader />
+      <GuideContentHeaderMobile />
+      <p
+        className={`${roboto.className} text-base text-textFaded font-normal text-center lg:text-left`}
+      >
+        ScanGuard runs on the blockchain technology allowing relevant data about
+        products used on a daily basis; production date, distribution, and
+        expiration date, to be immutable and safely stored.
+      </p>
+    </div>
+    <GuideContentImage />
+    <div className="absolute bottom-16 left-1 md:hidden">
+      <ContentEdgeArtDirection />
+    </div>
+  </div>
+);
+
+const GuideContentHeader = () => (
+  <div className="hidden lg:block">
+    <h4
+      className={`${poppins.variable} text-2xl lg:text-[2.5rem] text-textPrimary
+      capitalize font-semibold`}
+    >
+      The edge ScanGuard offers
+    </h4>
+    <EdgeUnderline />
+  </div>
+);
+
+const GuideContentHeaderMobile = () => (
+  <div className="grid place-items-center lg:hidden">
+    <div>
+      <h4
+        className={`${poppins.variable} text-2xl lg:text-[2.5rem] text-textPrimary
+      capitalize font-semibold text-center`}
+      >
+        The edge <br /> ScanGuard offers
+      </h4>
+      <EdgeUnderLineMobile />
+    </div>
+  </div>
+);
+
+const GuideContentImage = () => (
+  <div className="flex-1 float-left relative w-full ml-14 sm:ml-0 md:w-auto">
+    <div>
+      <div className="hidden lg:block">
+        <ScanGuardEdge />
+      </div>
+      <div className="lg:hidden">
+        <ScanGuardEdgeMobile />
+      </div>
+    </div>
+    <div className="absolute bottom-0 left-20 lg:left-32 lg:top-16 lg:right-0 xl:top-16 xl:left-[13rem]">
+      <div className="hidden lg:block">
+        <ScanList />
+      </div>
+      <div className="lg:hidden">
+        <ScanListMobile />
+      </div>
+    </div>
+  </div>
+);
+
+export default ContentSection;

frontend/src/app/components/FlagProductModal.tsx

@@ -1,4 +1,4 @@
-import { FlagIcon } from '@/assets/icons/icons';
+import { FlagIcon } from '@/assets/icons';
 import React, { useState } from 'react';
 
 export default function FlagProductModal({ setOpen }: { setOpen: () => void }) {

frontend/src/app/components/Footer.tsx

@@ -0,0 +1,61 @@
+import { poppins, roboto } from '../fonts';
+import Link from 'next/link';
+import { GithubIcon, TelegramIcon, TwitterIcon } from '@/assets/icons';
+
+const Footer = () => (
+  <footer className="bg-[#303030] lg:bg-[#171717]">
+    <div className="container mx-auto pt-12 px-6 lg:p-0 lg:px-4">
+      {/* <div className="mt-12" /> */}
+      <h5
+        className={`${poppins.variable} text-center text-textPrimary
+          mb-6 lg:my-0 text-2xl font-medium
+          lg:text-[2rem] lg:leading-[6rem] lg:font-medium font-roboto`}
+      >
+        Get in touch with us. We&apos;re here to assist you.
+      </h5>
+      <div className="flex flex-col lg:flex-row justify-center lg:justify-between items-center">
+        <p
+          className={`${roboto.variable} text-textPrimary text-base lg:text-left
+            capitalize font-normal font-roboto max-w-[12rem] text-center`}
+        >
+          Promoting Authenticity, one scan at a time.
+        </p>
+        <div className="my-6">
+          <p
+            className={`${roboto.variable} text-center text-textPrimary font-normal text-base`}
+          >
+            Join our community
+          </p>
+          <FooterIcons />
+        </div>
+      </div>
+      <p
+        className={`${roboto.variable} text-textFaded text-base
+          capitalize text-center font-normal font-roboto pb-6`}
+      >
+        ScanGuard. All rights reserved
+      </p>
+    </div>
+  </footer>
+);
+
+const FooterIcons = () => (
+  <div className="flex gap-4 mt-2">
+    {[
+      { url: 'https://x.com/SgOnStarknet', icon: <TwitterIcon /> },
+      { url: 'https://t.me/+p5JGJ4C8lCw5NjNk', icon: <TelegramIcon /> },
+      { url: 'https://github.com/nexlabsweb3/scanguard', icon: <GithubIcon /> },
+    ].map(({ url, icon }) => (
+      <div
+        key={url}
+        className="grid place-items-center w-12 h-12 border border-textFaded rounded-lg"
+      >
+        <Link href={url} target="_blank">
+          {icon}
+        </Link>
+      </div>
+    ))}
+  </div>
+);
+
+export default Footer;

frontend/src/app/components/HeroSection.tsx

@@ -0,0 +1,87 @@
+import { PhoneImage, PhoneImageMobile } from '@/assets/landing-page';
+import { poppins, roboto } from '../fonts';
+import ScanButton from './ScanButton';
+
+const HeroSection = () => (
+  <div className="relative px-6 md:px-0">
+    <div className="flex flex-col justify-center items-center gap-6">
+      <HeroCTA />
+      <HeroImage />
+    </div>
+    <SocialProof />
+  </div>
+);
+
+const HeroCTA = (props: any) => (
+  <div className="flex flex-col justify-center items-center gap-6 max-w-lg">
+    <div
+      className={`${poppins.variable} text-textPrimary
+        text-center text-5xl font-medium font-poppins`}
+    >
+      <h1 className="hidden md:block">
+        Ensuring Authenticity, One Scan at a Time
+      </h1>
+      <h1 className={`text-2xl md:hidden`}>
+        Ensuring Authenticity, <br /> One Scan at a Time
+      </h1>
+    </div>
+    <div
+      className={`${roboto.variable} text-textFaded text-center
+      text-base font-normal leading-7 font-roboto`}
+    >
+      <p className="hidden md:block">
+        This is a shared liquidity market smart contract which{' '}
+        <br className="hidden md:block" /> is used by multiple website to
+        provide the users the <br className="hidden md:block" /> best possible
+        experience.
+      </p>
+      <p className="md:hidden">
+        This is a shared liquidity market smart <br /> contract which is used by
+        multiple <br /> website to provide the users the best <br /> possible
+        experience.
+      </p>
+    </div>
+    <ScanButton />
+  </div>
+);
+
+const HeroImage = () => (
+  <div className="">
+    <PhoneImage className="hidden lg:block" />
+    <PhoneImageMobile className="lg:hidden" />
+  </div>
+);
+
+const SocialProof = () => (
+  <div className="flex justify-center items-center shadow-2xl rounded-2xl mb-4 mt-6 md:mt-0">
+    {['Users', 'Products', 'Producers'].map((name, index, array) => (
+      <SocialProofItem
+        key={name}
+        name={name}
+        display={index != array.length - 1}
+      />
+    ))}
+  </div>
+);
+
+const SocialProofItem = (props: any) => (
+  <div className="flex flex-col h-36 items-center justify-center p-6 relative">
+    <p
+      className={`${roboto.variable} text-xs md:text-base text-textPrimary
+          font-normal font-roboto capitalize`}
+    >
+      {props.name}
+    </p>
+    <p
+      className={`${poppins.variable} text-[#FF6028] font-bold text-3xl
+          md:text-[2.5rem] uppercase font-poppins`}
+    >
+      100+
+    </p>
+    {props.display && (
+      <div className="w-1 h-12 opacity-10 bg-[#ff6029] rounded-sm absolute top-1/3 right-0" />
+    )}
+  </div>
+);
+
+export default HeroSection;