preview

app/pages/home.tsx

@@ -0,0 +1,7 @@
+import Home from '@zoolabs/core/pages/home'
+
+export default function Home() {
+  return (
+    <Home></Home>
+  )
+}

core/package.json

@@ -5,7 +5,7 @@
   "private": true,
   "scripts": {
     "dev": "PORT=3006 next dev",
-    "build": "yarn lang && next build",
+    "build": "next build",
     "start": "next start",
     "lint": "next lint",
     "lang:extract": "NODE_ENV=development lingui extract --clean",

core/pages/home/AnimalFamilySection.tsx

@@ -0,0 +1,247 @@
+import React from 'react'
+import Image from 'next/image'
+import Link from 'next/link'
+
+import { useGif } from '../../context/GifContext'
+//import BabylonAnim from "components/Babylon";
+
+import dynamic from 'next/dynamic'
+const ModelViewer = dynamic(() => import('../../components/ModelViewer'), {
+  ssr: false,
+})
+
+const animalFamilyData = [
+  {
+    id: '1',
+    cameraZ: 100,
+    upLimit: 120,
+    lowLimit: 40,
+    glb: '/models/ELEPHANT_ADULT.glb',
+    image: 'https://res.cloudinary.com/diu8hjwwe/image/upload/v1644332888/zoo/images/sumatran-elephant_s3nww5.png',
+    gif: 'https://res.cloudinary.com/diu8hjwwe/video/upload/v1644330488/zoo/sumatran-elephant_bowsev.mov',
+    name: 'Sumatran Elephant',
+    slug: 'sumatran-elephant',
+    scientificName: ' Elephas Maximus Sumatranus',
+    description: `Sumatran elephants feed on a variety of plants and deposit seeds
+    wherever they go, contributing to a healthy forest ecosystem.
+    They also share their lush forest habitat with other endangered
+    species.`,
+    status: 'Critically Endangered',
+    population: '2,400 - 2,800',
+    size: '6.6 - 10.5 Feet',
+    habitat: 'Tropical Forests',
+    images: [
+      'https://res.cloudinary.com/diu8hjwwe/image/upload/v1644332888/zoo/images/sumatran-elephant_s3nww5.png',
+      'https://res.cloudinary.com/diu8hjwwe/image/upload/v1644332888/zoo/images/sumatran-elephant_s3nww5.png',
+      'https://res.cloudinary.com/diu8hjwwe/image/upload/v1644332888/zoo/images/sumatran-elephant_s3nww5.png',
+    ],
+  },
+  {
+    id: '2',
+    cameraZ: 80,
+    upLimit: 120,
+    lowLimit: 40,
+    glb: '/models/RHINO_ADULT.glb',
+    image: 'https://res.cloudinary.com/diu8hjwwe/image/upload/v1644332905/zoo/images/javan-rhino_aoxijc.png',
+    gif: 'https://res.cloudinary.com/diu8hjwwe/video/upload/v1644330489/zoo/javan-rhino_nkm1sw.mov',
+    name: 'Javan Rhino',
+    slug: 'javan-rhino',
+    scientificName: 'Rhinoceros Sondaicus',
+    description: `Once the most widespread of Asian rhinoceroses, the Javan
+    rhinoceros ranged from the islands of Java and Sumatra,
+    throughout Southeast Asia, and into India and China. The species
+    is critically endangered, with only one known population in the
+    wild, and no individuals in captivity. It is possibly the rarest
+    large mammal on Earth.`,
+    status: 'Critically Endangered',
+    population: '18',
+    size: '6.6 - 10.5 Feet',
+    habitat: 'Forests',
+    images: [
+      'https://res.cloudinary.com/diu8hjwwe/image/upload/v1644332905/zoo/images/javan-rhino_aoxijc.png',
+      'https://res.cloudinary.com/diu8hjwwe/image/upload/v1644332905/zoo/images/javan-rhino_aoxijc.png',
+      'https://res.cloudinary.com/diu8hjwwe/image/upload/v1644332905/zoo/images/javan-rhino_aoxijc.png',
+    ],
+  },
+  {
+    id: '3',
+    cameraZ: 50,
+    upLimit: 80,
+    lowLimit: 35,
+    glb: '/models/TIGER_ADULT.glb',
+    image: 'https://res.cloudinary.com/diu8hjwwe/image/upload/v1644332724/zoo/images/siberian-tiger_djt67i.png',
+    gif: 'https://res.cloudinary.com/diu8hjwwe/video/upload/v1644330487/zoo/siberian-tiger_gn44b5.mov',
+    name: 'Siberian Tiger',
+    slug: 'siberian-tiger',
+    scientificName: 'Panthera Tigris Altaica',
+    description: `The Siberian tiger is a tiger from a specific population of the
+    Panthera tigris tigris subspecies native to the Russian Far
+    East, Northeast China. It once ranged throughout the Korean
+    Peninsula, north China, and eastern Mongolia. The population
+    currently inhabits mainly the Sikhote-Alin mountain region in
+    southwest Primorye Province in East Russia.`,
+    status: 'endangered',
+    population: '2,400 - 2,800',
+    size: '6.6 - 10.5 Feet',
+    habitat: 'Tropical Forests',
+    images: [
+      'https://res.cloudinary.com/diu8hjwwe/image/upload/v1644332724/zoo/images/siberian-tiger_djt67i.png',
+      'https://res.cloudinary.com/diu8hjwwe/image/upload/v1644332724/zoo/images/siberian-tiger_djt67i.png',
+      'https://res.cloudinary.com/diu8hjwwe/image/upload/v1644332724/zoo/images/siberian-tiger_djt67i.png',
+    ],
+  },
+]
+
+const AnimalFamilySection = () => {
+  const { state } = useGif()
+  const { gifMode } = state
+
+  return (
+    <section className="AnimalFamily">
+      <div className="px-6 py-20 mx-auto max-w-7xl">
+        <h2 className="mb-8 text-3xl font-bold text-center lg:text-4xl">Our Animal Family</h2>
+        {animalFamilyData.map((data) => {
+          return (
+            <div className="flex flex-col items-center mb-4 AnimalFamily__nfts" key={data.id}>
+              <div className="flex flex-col items-center justify-center AnimalFamily__nft lg:flex-row">
+                <div className="flex flex-col items-center w-full h-auto mb-8 AnimalFamily__image lg:basis-1/3">
+                  <div className="p-px mb-8 overflow-hidden rounded-lg bg-nft-gradient ">
+                    {gifMode === 'gif' ? (
+                      <div className="overflow-hidden rounded">
+                        <div className=" w-[400px] h-[400px]">
+                          <ModelViewer glb={data.glb}></ModelViewer>
+                        </div>
+                      </div>
+                    ) : (
+                      <div className="overflow-hidden bg-black rounded-lg">
+                        <video autoPlay loop={true} playsInline={true} muted className="overflow-hidden rounded">
+                          <source src={data.gif}></source>
+                        </video>
+                      </div>
+                    )}
+                  </div>
+                </div>
+                <div className="text-center AnimalFamily__name lg:basis-1/3">
+                  <h2 className="mb-6 text-3xl text-center font-bold lg:4xl">{data.name}</h2>
+                  <a
+                    href="/coming-soon"
+                    className="px-8 py-3 text-sm font-semibold text-white rounded-full bg-gradient-to-b from-purple to-blue md:text-base md:px-6 lg:px-16"
+                  >
+                    Coming Soon
+                  </a>
+                </div>
+                <div className="px-2 py-6 lg:px-6 lg:basis-1/3 text-center lg:bg-black100 lg:rounded-3xl">
+                  <h3 className="mb-4 text-xl font-bold ">{data.scientificName}</h3>
+                  <p className="mb-3 text-grey text-opacity-70 md:px-8 lg:px-0">{data.description}</p>
+                  <Link href={`nft-product/${data.slug}`} passHref>
+                    <span className="text-green font-bold underline hover:cursor-pointer">Learn more</span>
+                  </Link>
+                </div>
+              </div>
+            </div>
+          )
+        })}
+
+        <div className="flex items-center justify-center">
+          <a
+            href="/animal-list"
+            className="px-5 py-3 text-sm border text-center rounded-full font-semibold border-green md:text-base text-green md:px-6 md:py-4 lg:px-20"
+          >
+            See the entire First Generation Animal NFT series
+          </a>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default AnimalFamilySection
+
+{
+  /* Another section */
+}
+{
+  /* <div className="flex flex-col items-center mb-4 AnimalFamily__nfts">
+          <div className="flex flex-col items-center justify-center AnimalFamily__nft lg:flex-row">
+            <div className="flex flex-col items-center w-full h-auto mb-8 AnimalFamily__image lg:basis-1/3">
+              <Image
+                src="/img/javan-rhino.png"
+                width={373}
+                height={373}
+                alt=""
+              />
+            </div>
+            <div className="text-center AnimalFamily__name lg:basis-1/3">
+              <h2 className="mb-6 text-3xl font-bold lg:4xl">Javan Rhino</h2>
+              <a
+                href="/nft"
+                className="px-8 py-3 text-sm font-bold text-white rounded-full bg-gradient-to-b from-purple to-blue md:text-base md:px-6 lg:px-16"
+              >
+                Buy NFT
+              </a>
+            </div>
+            <div className="px-2 py-6 lg:px-6 lg:basis-1/3 lg:bg-black100 lg:rounded-3xl">
+              <h3 className="mb-4 text-xl font-bold ">Rhinoceros Sondaicus</h3>
+              <p className="mb-3 text-grey text-opacity-70">
+                Once the most widespread of Asian rhinoceroses, the Javan
+                rhinoceros ranged from the islands of Java and Sumatra,
+                throughout Southeast Asia, and into India and China. The species
+                is critically endangered, with only one known population in the
+                wild, and no individuals in captivity. It is possibly the rarest
+                large mammal on Earth.
+              </p>
+              <a
+                href=""
+                rel="noreferrer"
+                className="font-bold underline text-green"
+              >
+                Learn more
+              </a>
+            </div>
+          </div>
+        </div> */
+}
+{
+  /* Another section */
+}
+{
+  /* <div className="flex flex-col items-center AnimalFamily__nfts ">
+          <div className="flex flex-col items-center justify-center AnimalFamily__nft lg:flex-row">
+            <div className="flex flex-col items-center w-full h-auto mb-8 AnimalFamily__image lg:basis-1/3">
+              <Image
+                src="/img/siberian-tiger.png"
+                width={373}
+                height={373}
+                alt=""
+              />
+            </div>
+            <div className="text-center AnimalFamily__name lg:basis-1/3">
+              <h2 className="mb-6 text-3xl font-bold lg:4xl">Siberian Tiger</h2>
+              <a
+                href="/nft"
+                className="px-8 py-3 text-sm font-bold text-white rounded-full bg-gradient-to-b from-purple to-blue md:text-base md:px-6 lg:px-16"
+              >
+                Buy NFT
+              </a>
+            </div>
+            <div className="px-2 py-6 lg:px-6 lg:basis-1/3 lg:bg-black100 lg:rounded-3xl">
+              <h3 className="mb-4 text-xl font-bold ">Siberian Tiger</h3>
+              <p className="mb-3 text-grey text-opacity-70">
+                The Siberian tiger is a tiger from a specific population of the
+                Panthera tigris tigris subspecies native to the Russian Far
+                East, Northeast China. It once ranged throughout the Korean
+                Peninsula, north China, and eastern Mongolia. The population
+                currently inhabits mainly the Sikhote-Alin mountain region in
+                southwest Primorye Province in East Russia.
+              </p>
+              <a
+                href=""
+                rel="noreferrer"
+                className="font-bold underline text-green"
+              >
+                Learn more
+              </a>
+            </div>
+          </div>
+        </div> */
+}

core/pages/home/BuyZooSection.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { handleFunds } from '../../utils/handleFunds'
+import { useWeb3React } from '@web3-react/core'
+import { useBuyZoo } from '../../state/zoo/hooks'
+
+const BuyZooSection = () => {
+  const { chainId } = useWeb3React()
+  const buyZoo = useBuyZoo()
+
+  return (
+    <section className="BuyZoo">
+      <div className="BuyZoo__inner">
+        <h2>Fully Transparent Ecosystem</h2>
+        <p>
+          Each animal NFT uses blockchain technology to establish a verified and public proof of ownership. This
+          establishes credibility for each NFT and its unchangeable nature.
+        </p>
+        <button className="Button Button__outline Button--default" onClick={() => handleFunds(chainId, buyZoo)}>
+          Buy $Zoo
+        </button>
+      </div>
+    </section>
+  )
+}
+
+export default BuyZooSection

core/pages/home/FaqSection.tsx

@@ -0,0 +1,97 @@
+import React, { useEffect } from 'react'
+import Link from 'next/link'
+// animation
+import { fadeInOnScroll } from '../../animation'
+
+const FaqSection = () => {
+  // const faqsRef = React.useRef();
+
+  // useEffect(() => {
+  //   fadeInOnScroll(faqsRef.current);
+  // }, []);
+
+  return (
+    <section id="faqs">
+      <div className="px-6 py-20 mx-auto max-w-7xl">
+        <h2 className="mb-10 text-3xl font-bold text-center lg:text-4xl lg:mb-20">Game FAQ</h2>
+        <div className="flex flex-col  lg:flex-row lg:flex-wrap lg:items-start lg:justify-between">
+          <div className="flex flex-col mb-8 lg:basis-1/2 lg:max-w-sm">
+            <h3 className="mb-4 text-xl font-bold text-green lg:text-2xl">What is ZOO?</h3>
+            <p className="leading-6 text-white lg:max-w-xl">
+              ZOO is a Liquidity Protocol that exists to bridge tokens and NFTs at the intersection of Defi and gaming.
+              Each of our NFTs (animal or egg) yield our native currency, $ZOO. Each NFT is collateralized by $ZOO,
+              which appreciates over time based on rarity, age and by playing our game.{' '}
+            </p>
+          </div>
+
+          <div className="flex flex-col mb-12 lg:basis-1/2 ">
+            <h3 className="mb-4 text-xl font-bold text-green lg:text-2xl">What are the Key Features in ZOO?</h3>
+            <p className="text-white lg:max-w-sm ">
+              {`Our key features include: growing,
+              breeding. In the near future we will
+              also launch the ZOO AR App which will enable you to
+              play with your animals in AR. With the app you will be able
+              to see your NFT and pet, play, shake hands and more.`}
+            </p>
+          </div>
+
+          <div className="flex flex-col mb-12 lg:basis-1/2">
+            <h3 className="mb-4 text-xl font-bold text-green lg:text-2xl">What is the $ZOO token?</h3>
+            <p className="text-white lg:max-w-sm">
+              The $ZOO token is the native currency in the game. It allows token holders to play, invest, use our NFT
+              marketplace and be part of the game.
+            </p>
+          </div>
+
+          <div className="flex flex-col mb-12 lg:basis-1/2">
+            <h3 className="mb-4 text-xl font-bold text-green lg:text-2xl">How Do I Get Started?</h3>
+            <p className="text-white lg:max-w-sm">
+              Players will be able to get access to the game through our DApp as well as ZOO {`Labs'`} official website.
+            </p>
+          </div>
+          {/* flex flex-col mb-12 text-left lg:basis-1/2,  pl-4 mb-4 text-xl font-bold text-left text-green lg:text-2xl lg:pl-0, max-w-sm px-4 mx-auto text-white list-disc lg:mx-0*/}
+          <div className="flex flex-col mb-12 lg:basis-1/2">
+            <h3 className="mb-4 text-xl font-bold text-green lg:text-2xl">How do I buy $ZOO?</h3>
+            <li>
+              <a
+                className="text-green underline"
+                href="https://prezi.com/i/view/fWOPqU2eZzcqYyVzb5pz"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Click here
+              </a>
+            </li>
+          </div>
+
+          <div className="flex flex-col mb-12 lg:basis-1/2">
+            <h3 className="mb-4 text-xl font-bold text-green lg:text-2xl">Still have questions?</h3>
+            <p className="mb-4 text-white lg:max-w-sm">
+              If you are having difficulty, please{' '}
+              <a href="https://discord.com/invite/43m9Sstd" className="text-green underline">
+                join our Discord server
+              </a>{' '}
+              and post in the #new-player-help channel and our community will be happy to help!
+            </p>
+            <p className="text-white lg:max-w-sm">
+              In addition, a complete list of guides can be found{' '}
+              <a href="/blog" className="underline text-green">
+                here
+              </a>
+              .
+            </p>
+          </div>
+        </div>
+        <div className="flex items-center justify-center">
+          <Link href="/faqs">
+            <a className="px-5 py-3 text-sm border rounded-full font-semibold border-green md:text-base text-green md:px-6 md:py-4 lg:px-20">
+              See more
+            </a>
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default FaqSection