Implement Home page (#219)

.eslintrc

@@ -6,9 +6,9 @@
     "ecmaVersion": 2018,
     "sourceType": "module",
     "ecmaFeatures": {
-      "jsx": true
+      "jsx": true,
     },
-    "project": "./tsconfig.json"
+    "project": "./tsconfig.json",
   },
   "plugins": [
     "@typescript-eslint",
@@ -17,7 +17,7 @@
     "functional",
     "promise",
     "no-loops",
-    "formatjs"
+    "formatjs",
   ],
   "extends": [
     "eslint:recommended",
@@ -26,11 +26,16 @@
     "plugin:@typescript-eslint/recommended",
     "plugin:@typescript-eslint/recommended-requiring-type-checking",
     "prettier",
-    "plugin:prettier/recommended"
+    "plugin:prettier/recommended",
   ],
   "rules": {
     "no-console": "warn",
-    "prettier/prettier": "warn",
+    "prettier/prettier": [
+      "warn",
+      {
+        "endOfLine": "auto",
+      },
+    ],
     "no-loops/no-loops": "error",
     "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off",
@@ -39,11 +44,11 @@
     "formatjs/enforce-description": ["error", "literal"],
     "formatjs/enforce-default-message": ["error", "literal"],
     "formatjs/enforce-placeholders": "error",
-    "formatjs/no-literal-string-in-jsx": "error"
+    "formatjs/no-literal-string-in-jsx": "error",
   },
   "settings": {
     "react": {
-      "version": "detect"
-    }
-  }
+      "version": "detect",
+    },
+  },
 }

package.json

@@ -42,6 +42,7 @@
     "autoprefixer": "^10.4.18",
     "axios": "^1.6.8",
     "bufferutil": "^4.0.8",
+    "classnames": "^2.5.1",
     "crypto-browserify": "^3.12.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
@@ -56,6 +57,7 @@
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "framer-motion": "^11.0.14",
     "https-browserify": "^1.0.0",
     "postcss": "^8.4.36",
     "prettier": "^3.2.5",

src/components/molecules/ContentBox.tsx

@@ -0,0 +1,60 @@
+import { motion } from "framer-motion";
+import cx from "classnames";
+
+interface ContentBoxProps extends React.PropsWithChildren {
+  title?: string;
+  description?: string;
+  logoImageUrl?: string;
+  mainImageUrl?: string;
+  className?: string;
+  mainImageClassName?: string;
+}
+
+export const ContentBox: React.FC<ContentBoxProps> = (props) => {
+  const {
+    children,
+    title,
+    description,
+    mainImageUrl,
+    logoImageUrl,
+    className,
+    mainImageClassName,
+  } = props;
+
+  return (
+    <motion.div
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ amount: 0.3, once: true }}
+      variants={{
+        hidden: {
+          y: 80,
+          opacity: 0,
+        },
+        visible: {
+          y: 0,
+          opacity: 100,
+        },
+      }}
+      transition={{ duration: 0.8 }}
+      className={cx(
+        "relative flex w-full flex-col justify-between overflow-hidden rounded-[48px] border border-white/40 pb-0 pt-[56px] text-center",
+        className
+      )}
+    >
+      {!!logoImageUrl && (
+        <div className="mx-6 mb-6 h-20 w-20 rounded-xl border border-white/60 bg-[linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,.1))] p-3">
+          <img src={logoImageUrl} alt={``} />
+        </div>
+      )}
+      <h3 className="mb-3 px-6 text-[34px] font-bold leading-tight">{title}</h3>
+      <span className="mb-6 block px-6 text-xl">{description}</span>
+      <img
+        src={mainImageUrl}
+        alt={``}
+        className={cx("relative z-[10] mx-auto max-w-full", mainImageClassName)}
+      />
+      {children}
+    </motion.div>
+  );
+};

src/components/molecules/index.ts

@@ -25,3 +25,4 @@ export * from "./SearchInputField";
 export * from "./SearchResultItem";
 export * from "./ShareInfoCard";
 export * from "./WalletAddressCard";
+export * from "./ContentBox";

src/components/organisms/HeroSection.tsx

@@ -0,0 +1,68 @@
+import { useIntl } from "react-intl";
+import { motion } from "framer-motion";
+
+export const HeroSection = () => {
+  const i18n = useIntl();
+
+  const heroTagLabel = i18n.formatMessage({
+    id: "HomeView.Tag",
+    description: "",
+    defaultMessage: `One Profile For Every "You"`,
+  });
+
+  const heroSectionHeading = i18n.formatMessage({
+    id: "HomeView.Heading",
+    description: "Heading of HomeView Section",
+    defaultMessage: "Verida One",
+  });
+
+  const heroHeadingDescriptionLabel = i18n.formatMessage({
+    id: "HomeView.Description",
+    description: "",
+    defaultMessage: `All your identities and data in one place. <br/> Decentralized, multi-chain and censorship resistant`,
+  });
+
+  const joinTheWaitlistButtonLabel = i18n.formatMessage({
+    id: "HomeView.JoinTheWaitlistButtonLabel",
+    description: "",
+    defaultMessage: "Join the waitlist",
+  });
+
+  return (
+    <motion.div
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ amount: 0.3, once: true }}
+      variants={{
+        hidden: {
+          y: 80,
+          opacity: 0,
+        },
+        visible: {
+          y: 0,
+          opacity: 100,
+        },
+      }}
+      transition={{ duration: 0.8 }}
+      className="flex flex-col"
+    >
+      <div className="mx-auto mb-3 w-fit rounded-full border border-white/70 px-4 py-2 text-xl">
+        {heroTagLabel}
+      </div>
+
+      <h1 className="text-center text-[88px] font-bold leading-tight sm:text-9xl">
+        {heroSectionHeading}
+      </h1>
+      <p
+        className="mb-6 text-center text-2xl text-white/70"
+        dangerouslySetInnerHTML={{ __html: heroHeadingDescriptionLabel }}
+      ></p>
+
+      <div className="mx-auto overflow-hidden rounded-xl border-[3px] border-white/50">
+        <button className="mx-auto bg-[#efefef] px-4 py-3 text-base font-semibold text-background sm:px-10">
+          {joinTheWaitlistButtonLabel}
+        </button>
+      </div>
+    </motion.div>
+  );
+};

src/components/organisms/JoinWaitlist.tsx

@@ -0,0 +1,48 @@
+import { useIntl } from "react-intl";
+import { motion } from "framer-motion";
+
+export const JoinWaitlist = () => {
+  const i18n = useIntl();
+
+  const joinTheVeridaWaitlistTitle = i18n.formatMessage({
+    id: "HomeView.JoinWaitlistTitle",
+    description: "",
+    defaultMessage: "Join the Verida One waitlist",
+  });
+
+  const joinTheWaitlistButtonLabel = i18n.formatMessage({
+    id: "HomeView.JoinTheWaitlistButtonLabel",
+    description: "",
+    defaultMessage: "Join the waitlist",
+  });
+
+  return (
+    <motion.div
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ amount: 0.3, once: true }}
+      variants={{
+        hidden: {
+          y: 80,
+          opacity: 0,
+        },
+        visible: {
+          y: 0,
+          opacity: 100,
+        },
+      }}
+      transition={{ duration: 0.8 }}
+      className="flex flex-col"
+    >
+      <h2 className="mb-4 text-center text-[49px] font-bold leading-tight sm:text-[59px]">
+        {joinTheVeridaWaitlistTitle}
+      </h2>
+
+      <div className="mx-auto overflow-hidden rounded-xl border-[3px] border-white/50">
+        <button className="mx-auto bg-[#efefef] px-4 py-3 text-base font-semibold text-background sm:px-10 ">
+          {joinTheWaitlistButtonLabel}
+        </button>
+      </div>
+    </motion.div>
+  );
+};

src/components/organisms/LearnMore.tsx

@@ -0,0 +1,96 @@
+import { useIntl } from "react-intl";
+import { motion } from "framer-motion";
+import { ContentBox } from "../molecules";
+import BracketsIcon from "../../assets/images/brackets-icon.svg";
+import ArrowLeftIcon from "../../assets/images/arrow-left.svg";
+import BlockchainIcon from "../../assets/images/blockchain-icon.svg";
+
+export const LearnMore = () => {
+  const i18n = useIntl();
+
+  const learnMore1Label = i18n.formatMessage({
+    id: "LearnMore.Label1",
+    description: "",
+    defaultMessage: "Developer-Friendly",
+  });
+
+  const learnMore1Description = i18n.formatMessage({
+    id: "LearnMore.Label1",
+    description: "",
+    defaultMessage:
+      "Remix Verida One data in your apps. Access our developer SDKs to get started.",
+  });
+
+  const learnMore2Label = i18n.formatMessage({
+    id: "LearnMore.Label1",
+    description: "",
+    defaultMessage: "Decentralized",
+  });
+
+  const learnMore2Description = i18n.formatMessage({
+    id: "LearnMore.Label1",
+    description: "",
+    defaultMessage:
+      "Multi-chain, your keys — your data, control where your data is stored, control who has access",
+  });
+
+  const learnMore = i18n.formatMessage({
+    id: "HomeView.LearnMore",
+    description: "",
+    defaultMessage: "Learn More",
+  });
+
+  return (
+    <motion.div
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ amount: 0.3, once: true }}
+      variants={{
+        hidden: {
+          y: 80,
+          opacity: 0,
+        },
+        visible: {
+          y: 0,
+          opacity: 100,
+        },
+      }}
+      transition={{ duration: 0.8 }}
+      className="grid grid-cols-1 gap-8 py-40 lg:grid-cols-2"
+    >
+      <ContentBox
+        title={learnMore1Label}
+        description={learnMore1Description}
+        className="bg-[linear-gradient(225deg,#f9c17a,#af3a6d)] p-2 !pb-16 !text-left sm:px-10"
+        logoImageUrl={BracketsIcon}
+      >
+        <a
+          href="https://developers.verida.network/"
+          className="mx-6 flex items-center gap-2 transition-all duration-300 hover:gap-5"
+          rel="noreferrer"
+          target="_blank"
+        >
+          <span className="text-base font-semibold">{learnMore}</span>
+          <img src={ArrowLeftIcon} alt={``} className="brightness-[1000]" />
+        </a>
+      </ContentBox>
+
+      <ContentBox
+        title={learnMore2Label}
+        description={learnMore2Description}
+        className="bg-[linear-gradient(225deg,#0dd7b2,#265293)] p-2 !pb-8 !pt-8 !text-left sm:px-10 sm:!pb-16 sm:!pt-16"
+        logoImageUrl={BlockchainIcon}
+      >
+        <a
+          href="https://www.verida.network/"
+          className="mx-6 flex items-center gap-2 transition-all duration-300 hover:gap-5"
+          rel="noreferrer"
+          target="_blank"
+        >
+          <span className="text-base font-semibold">{learnMore}</span>
+          <img src={ArrowLeftIcon} alt={``} className="brightness-[1000]" />
+        </a>
+      </ContentBox>
+    </motion.div>
+  );
+};