Merge pull request #132 from MinorityProgrammers/new-incubator

New incubator
MinorityProgrammers · Feb 21, 2022 · f4d84ac · f4d84ac
2 parents 80f60c2 + 01ca83a
commit f4d84ac
Show file tree

Hide file tree

Showing 12 changed files with 411 additions and 282 deletions.
diff --git a/components/IncubatorHero.js b/components/IncubatorHero.js
@@ -1,33 +1,41 @@
-import React from 'react';
+import React from "react";
 
 const IncubatorHero = () => {
   const scrollTo = () => {
-    const section = document.querySelector('#all-startups');
-    section.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    const section = document.querySelector("#all-startups");
+    section.scrollIntoView({ behavior: "smooth", block: "start" });
   };
 
   return (
-    <section className="incubator-wrapper">
+    <section
+      style={{
+        backgroundImage: "url(/assets/images/incubator/incubator_image.png)",
+        backgroundSize: "cover",
+        height: "100vh",
+      }}
+      className="incubator-wrapper"
+    >
       <div className="incubator-header">
-        <div className="container">
-          <div className="incubator-center">
-            <div className="col-xl-6 col-lg-6 col-md-12 col-sm-12 incubator__text">
-              <h1 className="incubator__title">
-                Incubator
-              </h1>
-              <h2>
-                Build diverse startups in a transparent and accountable way.
-                Build milestone driven DAOs around the projects you have a stake in.
-              </h2>
+        <div className="incubator-center">
+          <div />
+          <div className="incubator__text">
+            <h1 className="incubator__title">Incubator</h1>
+            <h2>
+              Build diverse startups in a transparent and accountable way. Build
+              milestone driven DAOs around the projects you have a stake in.
+            </h2>
+            <div className="incubator-btns">
               <div className="incubator__button">
-                <div onClick={scrollTo} className="button btn-gradient">
+                <button onClick={scrollTo} className="incubator-btn1">
+                  Begin Creating
+                </button>
+              </div>
+              <div className="incubator__button">
+                <button onClick={scrollTo} className="incubator-btn2">
                   View Startups
-                </div>
+                </button>
               </div>
             </div>
-            <div>
-              <img src="assets/images/incubator/incubatorHero.png" alt="hero-img" />
-            </div>
           </div>
         </div>
       </div>

diff --git a/components/featured/FeaturedCard.js b/components/featured/FeaturedCard.js
@@ -1,13 +1,11 @@
-import React, { useState } from 'react';
-import Link from 'next/link';
-import axios from 'axios';
-import { numFormat, percentFund } from '../../helpers/formatIncubator';
-import FeaturedPopup from './FeaturedPopup';
-import { errorToast, successToast } from '../../contexts/utils/toasts';
+import React, { useState } from "react";
+import Link from "next/link";
+import axios from "axios";
+import { numFormat, percentFund } from "../../helpers/formatIncubator";
+import FeaturedPopup from "./FeaturedPopup";
+import { errorToast, successToast } from "../../contexts/utils/toasts";
 
-const FeaturedCard = ({
-  data, setClickRegister, userData, allfunded,
-}) => {
+const FeaturedCard = ({ data, setClickRegister, userData, allfunded }) => {
   const [buttonPopup, setButtonPopup] = useState(false);
   const [secondPopup, setSecondPopup] = useState(false);
   const [amount, setAmount] = useState();
@@ -24,7 +22,7 @@ const FeaturedCard = ({
           headers: {
             Authorization: `Bearer ${token}`,
           },
-        },
+        }
       )
       .then((res) => {
         successToast(res.data.message);
@@ -41,10 +39,10 @@ const FeaturedCard = ({
   };
 
   const signIfNotLoggedIn = (_data) => {
-    const token = window.localStorage.getItem('jwtToken');
+    const token = window.localStorage.getItem("jwtToken");
     if (userData === undefined) {
       setClickRegister(true);
-      errorToast('Log in to continue');
+      errorToast("Log in to continue");
     } else {
       fundStartup(_data._id, token);
     }
@@ -55,7 +53,11 @@ const FeaturedCard = ({
       <div className="card card__container">
         <div className="card-body">
           <div className="card__header">
-            <img src={data.startupImage} className="card__header-logo" alt="startupImage" />
+            <img
+              src={data.startupImage}
+              className="card__header-logo"
+              alt="startupImage"
+            />
             <h2 className="card__header-title">{data.name}</h2>
           </div>
           <p className="card-text card__text">
@@ -65,23 +67,21 @@ const FeaturedCard = ({
             <div className="fund__top">
               <h3 className="fund__topic">Fundraised</h3>
               <h3 className="fund__percentage">
-                {percentFund(data.targetAmount, data.amount)}
-                % complete
+                {percentFund(data.targetAmount, data.amount)}% complete
               </h3>
             </div>
             <h3 className="fund__amount">
-              $
-              {numFormat(data.amount)}
+              ${numFormat(data.amount)}
               /$
               {numFormat(data.targetAmount)}
             </h3>
-            <div className="progress" style={{ borderRadius: '30px' }}>
+            <div className="progress" style={{ borderRadius: "30px" }}>
               <div
                 className="tw-bg-gray-700"
                 role="progressbar"
                 style={{
                   width: `${percentFund(data.targetAmount, data.amount)}%`,
-                  borderRadius: '30px',
+                  borderRadius: "30px",
                 }}
                 aria-valuenow="50"
                 aria-valuemin="0"
@@ -95,11 +95,13 @@ const FeaturedCard = ({
             {!allfunded.includes(data._id) && (
               <button
                 type="button"
-                style={{ outline: 'none' }}
+                style={{ outline: "none" }}
                 className="button btn-filled"
-                onClick={() => (userData !== null
-                  ? setButtonPopup(true)
-                  : setClickRegister(true))}
+                onClick={() =>
+                  userData !== null
+                    ? setButtonPopup(true)
+                    : setClickRegister(true)
+                }
               >
                 Fund Startup
               </button>
@@ -113,15 +115,19 @@ const FeaturedCard = ({
       {/* Popup content */}
       <FeaturedPopup trigger={buttonPopup} setTrigger={setButtonPopup}>
         <div className="card__header">
-          <img src={data.startupImage} className="card__header-logo" alt="startupImage" />
+          <img
+            src={data.startupImage}
+            className="card__header-logo"
+            alt="startupImage"
+          />
           <h2 className="card__header-title">{data.name}</h2>
         </div>
-        <p style={{ marginTop: '20px' }}>
+        <p style={{ marginTop: "20px" }}>
           {`${data.about.substring(0, 1000)}...`}
         </p>
         <button
           type="button"
-          style={{ float: 'right', width: '100px' }}
+          style={{ float: "right", width: "100px" }}
           className="button btn-filled"
           onClick={() => setButtonPopup(false) + setSecondPopup(true)}
         >
@@ -131,19 +137,19 @@ const FeaturedCard = ({
       <FeaturedPopup trigger={secondPopup} setTrigger={setSecondPopup}>
         <br />
         <form>
-          <label style={{ marginLeft: '10px' }}>Enter amount</label>
+          <label style={{ marginLeft: "10px" }}>Enter amount</label>
           <input
             type="number"
             name="amout"
             placeholder="Enter amount"
             style={{
-              marginLeft: '20px',
-              border: '1px solid grey',
-              padding: '5px',
-              outline: 'none',
-              width: '250px',
-              borderRadius: '2px',
-              marginBottom: '20px',
+              marginLeft: "20px",
+              border: "1px solid grey",
+              padding: "5px",
+              outline: "none",
+              width: "250px",
+              borderRadius: "2px",
+              marginBottom: "20px",
             }}
             amount={amount}
             required

diff --git a/components/featured/FeaturedMyCard.js b/components/featured/FeaturedMyCard.js
@@ -1,21 +1,22 @@
-import React from 'react';
-import Link from 'next/link';
-import { numFormat, convert, percentFund } from '../../helpers/formatIncubator';
+import React from "react";
+import Link from "next/link";
+import { numFormat, convert, percentFund } from "../../helpers/formatIncubator";
 
 const FeaturedMyCard = ({ data }) => (
   <div className="card card__container">
     <div className="card-body">
       <div className="card__header">
-        <img src={data.startupImage} className="card__header-logo" alt="startupImage" />
         <h2 className="card__header-title">{data.name}</h2>
+        <img
+          src={data.startupImage}
+          className="card__header-logo"
+          alt="startupImage"
+        />
       </div>
       <div className="row container mb-3">
         <div className="card__info mr-auto">
           <p>Amount Invested</p>
-          <h3 className="">
-            $
-            {convert(data.amount)}
-          </h3>
+          <h3 className="">${convert(data.amount)}</h3>
         </div>
         <div className="card__info">
           <p>Shares owned</p>
@@ -26,23 +27,21 @@ const FeaturedMyCard = ({ data }) => (
         <div className="fund__top">
           <h3 className="fund__topic">Fundraised</h3>
           <h3 className="fund__percentage">
-            {percentFund(data.targetAmount, data.amount)}
-            % complete
+            {percentFund(data.targetAmount, data.amount)}% complete
           </h3>
         </div>
         <h3 className="fund__amount">
-          $
-          {numFormat(data.amount)}
+          ${numFormat(data.amount)}
           /$
           {numFormat(data.targetAmount)}
         </h3>
-        <div className="progress" style={{ borderRadius: '30px' }}>
+        <div className="progress" style={{ borderRadius: "30px" }}>
           <div
             className="tw-bg-gray-700 "
             role="progressbar"
             style={{
               width: `${percentFund(data.targetAmount, data.amount)}%`,
-              borderRadius: '30px',
+              borderRadius: "30px",
             }}
             aria-valuenow="50"
             aria-valuemin="0"

diff --git a/components/featured/FeaturedMyStartup.js b/components/featured/FeaturedMyStartup.js
@@ -1,7 +1,7 @@
-import React from 'react';
-import Swiper from 'react-id-swiper';
-import 'swiper/css/swiper.css';
-import FeaturedMyCard from './FeaturedMyCard';
+import React from "react";
+import Swiper from "react-id-swiper";
+import "swiper/css/swiper.css";
+import FeaturedMyCard from "./FeaturedMyCard";
 
 const FeaturedMyStartup = ({ data, setClickRegister, userData }) => {
   const params = {
@@ -10,8 +10,8 @@ const FeaturedMyStartup = ({ data, setClickRegister, userData }) => {
     speed: 700,
     spaceBetween: 0,
     navigation: {
-      nextEl: data.length >= 3 ? '.swiper-button-next' : '',
-      prevEl: data.length >= 3 ? '.swiper-button-prev' : '',
+      nextEl: data.length >= 3 ? ".swiper-button-next" : "",
+      prevEl: data.length >= 3 ? ".swiper-button-prev" : "",
     },
     autoplay: {
       delay: 3000,
@@ -45,14 +45,11 @@ const FeaturedMyStartup = ({ data, setClickRegister, userData }) => {
   return (
     <section className="featured__wrapper">
       <div className="container">
-        <div className="row">
-          <div className="col-lg-3 col-md-12 featured__text">
+        <div className="">
+          <div className=" featured__text">
             <h2 className="featured__title">My Startups</h2>
-            <p className="featured__subtitle">
-              These are startups you have some shares in
-            </p>
           </div>
-          <div className="col-lg-9 col-md-12 d-flex align-items-center justify-content-center ">
+          <div className="col-lg-12 col-md-12 d-flex align-items-center justify-content-center ">
             {userData === null && (
               <div className="container text-center mt-3 mb-3 featured__card-empty">
                 <h1 className="featured__card-title mb-3">

diff --git a/components/featured/FeaturedMyStartupSkeleton.js b/components/featured/FeaturedMyStartupSkeleton.js
@@ -1,6 +1,6 @@
-import React from 'react';
-import Swiper from 'react-id-swiper';
-import FeaturedMyCardSkeleton from './FeaturedMyCardSkeleton';
+import React from "react";
+import Swiper from "react-id-swiper";
+import FeaturedMyCardSkeleton from "./FeaturedMyCardSkeleton";
 
 const FeaturedMyStartupSkeleton = () => {
   const params = {
@@ -9,8 +9,8 @@ const FeaturedMyStartupSkeleton = () => {
     speed: 700,
     spaceBetween: 0,
     navigation: {
-      nextEl: 4 ? '.swiper-button-next' : '',
-      prevEl: 4 ? '.swiper-button-prev' : '',
+      nextEl: 4 ? ".swiper-button-next" : "",
+      prevEl: 4 ? ".swiper-button-prev" : "",
     },
     autoplay: {
       delay: 3000,
@@ -43,12 +43,9 @@ const FeaturedMyStartupSkeleton = () => {
   return (
     <section className="featured__wrapper">
       <div className="container">
-        <div className="row">
-          <div className="col-lg-3 col-md-12 featured__text">
+        <div className="">
+          <div className="featured__text">
             <h2 className="featured__title">My Startups</h2>
-            <p className="featured__subtitle">
-              These are startups you have some shares in
-            </p>
           </div>
           <div className="col-lg-9 col-md-12 d-flex align-items-center justify-content-center ">
             <Swiper {...params} grabCursor>

diff --git a/components/featured/FeaturedStartups.js b/components/featured/FeaturedStartups.js
@@ -1,22 +1,17 @@
-import React from 'react';
-import Swiper from 'react-id-swiper';
-import 'swiper/css/swiper.css';
-import FeaturedCard from './FeaturedCard';
+import React from "react";
+import Swiper from "react-id-swiper";
+import "swiper/css/swiper.css";
+import FeaturedCard from "./FeaturedCard";
 
-const FeaturedStartups = ({
-  data,
-  setClickRegister,
-  userData,
-  allfunded,
-}) => {
+const FeaturedStartups = ({ data, setClickRegister, userData, allfunded }) => {
   const params = {
     slidesPerView: 3,
     loop: true,
     speed: 700,
     spaceBetween: 0,
     navigation: {
-      nextEl: '.swiper-button-next',
-      prevEl: '.swiper-button-prev',
+      nextEl: ".swiper-button-next",
+      prevEl: ".swiper-button-prev",
     },
     autoplay: {
       delay: 3000,
@@ -49,14 +44,11 @@ const FeaturedStartups = ({
   return (
     <section className="featured__wrapper">
       <div className="container">
-        <div className="row">
-          <div className="col-lg-3 featured__text">
+        <div className="">
+          <div className="featured__text">
             <h2 className="featured__title">Featured Startups</h2>
-            <p className="featured__subtitle">
-              Invest in the next billion dollar company today
-            </p>
           </div>
-          <div className="col-lg-9 d-flex align-items-center featured__card">
+          <div className="col-lg-12 d-flex align-items-center featured__card">
             {!data ? (
               <div className="container text-center mt-3 mb-3 featured__card-empty">
                 <h1 className="featured__card-title mb-3">