-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #68 from kpjackson90/client
setup new landing page
- Loading branch information
Showing
9 changed files
with
240 additions
and
62 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| import React from "react"; | ||
| import Forminput from "../partials/FormInput"; | ||
| import { useState } from "react"; | ||
| import { useEffect } from "react"; | ||
| import api from "../api/api"; | ||
|
|
||
| const LandingPage = () => { | ||
| const [email, setEmail] = useState(""); | ||
| const [emailSaved, setEmailSaved] = useState(false); | ||
| const [imgsLeft, setImgsLeft] = useState([1, 2, 3, 4]); | ||
| const [imgsRight, setImgsRight] = useState([5, 6, 7, 8]); | ||
|
|
||
| useEffect(() => { | ||
| console.log("imgs", imgsLeft); | ||
| }, []); | ||
|
|
||
| const handleSave = (e) => { | ||
| e.preventDefault(); | ||
| try { | ||
| if (email) { | ||
| const res = api.post("/api/add/list/member", { email }); | ||
| if (res.data) { | ||
| setEmailSaved(true); | ||
| } | ||
| } | ||
| } catch (err) { | ||
| console.log(err); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="app-height app-width d-flex justify-content-between"> | ||
| <div className="d-flex align-items-center justify-content-center w-40"> | ||
| <div className="max-408"> | ||
| <img src="/images/[email protected]" alt="" className="max-260 mb-24" /> | ||
| <p className="fw-300 f-60 text-teal theGwathmey mb-60"> | ||
| Your Virtual Arena | ||
| </p> | ||
| <div className="max-344"> | ||
| <p className="fw-300 f-16 mb-60"> | ||
| Sign up to get exclusive news on our launch | ||
| </p> | ||
| <Forminput | ||
| placeholder="Email Address" | ||
| value={email} | ||
| setValue={setEmail} | ||
| /> | ||
| <button | ||
| className="btn-teal w-100 mt-3 mb-24" | ||
| onClick={() => handleSave()} | ||
| > | ||
| Sign Up | ||
| </button> | ||
| </div> | ||
| {emailSaved ? ( | ||
| <p className="f-14 fw-500 text-teal"> | ||
| You have successfully added your email address to our list! | ||
| </p> | ||
| ) : ( | ||
| "" | ||
| )} | ||
| </div> | ||
| </div> | ||
| <div className="w-40 d-flex justify-content-center"> | ||
| <div className="max-192 mr-60 d-flex flex-column"> | ||
| {imgsLeft.map((img, i) => ( | ||
| <img | ||
| key={i} | ||
| src={`/images/landing-${img}@3x.png`} | ||
| alt={`landing-${img}`} | ||
| className={`w-100 ${img !== 1 ? "mt-auto" : ""}`} | ||
| /> | ||
| ))} | ||
| </div> | ||
| <div className="max-192 d-flex flex-column"> | ||
| {imgsRight.map((img, i) => ( | ||
| <img | ||
| key={i} | ||
| src={`/images/landing-${img}@3x.png`} | ||
| alt={`landing-${img}`} | ||
| className={`w-100 ${img !== 5 ? "mt-auto" : ""}`} | ||
| /> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default LandingPage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,90 +1,102 @@ | ||
| import React from "react"; | ||
| import React, { useState } from "react"; | ||
| import Forminput from "../partials/FormInput"; | ||
| import { useState } from "react"; | ||
| import { useEffect } from "react"; | ||
| import api from "../api/api"; | ||
|
|
||
| const LandingPage = () => { | ||
| const Index = () => { | ||
| const [email, setEmail] = useState(""); | ||
| const [emailSaved, setEmailSaved] = useState(false); | ||
| const [imgsLeft, setImgsLeft] = useState([1, 2, 3, 4]); | ||
| const [imgsRight, setImgsRight] = useState([5, 6, 7, 8]); | ||
|
|
||
| useEffect(() => { | ||
| console.log("imgs", imgsLeft); | ||
| }, []); | ||
|
|
||
| const handleSave = (e) => { | ||
| e.preventDefault(); | ||
| try { | ||
| if (email) { | ||
| const res = api.post("/api/add/list/member", { email }); | ||
| if (res.data) { | ||
| setEmailSaved(true); | ||
| } | ||
| } | ||
| } catch (err) { | ||
| console.log(err); | ||
| } | ||
| const bg = { | ||
| backgroundImage: `url('/images/[email protected]')`, | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="app-height app-width d-flex justify-content-between"> | ||
| <div className="d-flex align-items-center justify-content-center w-40"> | ||
| <div className="max-408"> | ||
| <img src="/images/[email protected]" alt="" className="max-260 mb-24" /> | ||
| <p className="fw-300 f-60 text-teal theGwathmey mb-60"> | ||
| <div className="landing-wrapper" style={bg}> | ||
| <div className="landing-top"> | ||
| <div> | ||
| <img src="/images/[email protected]" alt="" className="max-180 mb-2" /> | ||
| <p className="fw-300 f-60 text-teal theGwathmey mb-36 rotate-text"> | ||
| Your Virtual Arena | ||
| </p> | ||
| <div className="max-344"> | ||
| <p className="fw-300 f-16 mb-60"> | ||
| Sign up to get exclusive news on our launch | ||
| </p> | ||
| <p className="fw-200 f-24 mb-80"> | ||
| Sign up to get exclusive news <br /> on our launch | ||
| </p> | ||
| <div className="max-260 text-center"> | ||
| <Forminput | ||
| placeholder="Email Address" | ||
| value={email} | ||
| setValue={setEmail} | ||
| /> | ||
| <button | ||
| className="btn-teal w-100 mt-3 mb-24" | ||
| onClick={() => handleSave()} | ||
| className={`btn-teal max-120 mt-3 mb-24 ${ | ||
| !email ? "bg-gray" : "bg-teal" | ||
| }`} | ||
| disabled={!email ? true : false} | ||
| //onClick={() => handleSave()} | ||
| > | ||
| Sign Up | ||
| </button> | ||
| </div> | ||
| {emailSaved ? ( | ||
| <p className="f-14 fw-500 text-teal"> | ||
| You have successfully added your email address to our list! | ||
| </p> | ||
| ) : ( | ||
| "" | ||
| )} | ||
| <p className="fw-300 f-60 text-teal theGwathmey mb-36 mt-60 rotate-text"> | ||
| What is Unpluggd? | ||
| </p> | ||
| <p className="f-20 fw-400 mb-0"> | ||
| Unpluggd is a virtual event platform <br /> created to give you the | ||
| arena experience <br /> that you love, within your living room | ||
| </p> | ||
| </div> | ||
| <div> | ||
| <img | ||
| src="/images/[email protected]" | ||
| alt="" | ||
| className="max-180 mb-2" | ||
| /> | ||
| <img | ||
| src="/images/[email protected]" | ||
| alt="" | ||
| className="max-180 mb-2" | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div className="w-40 d-flex justify-content-center"> | ||
| <div className="max-192 mr-60 d-flex flex-column"> | ||
| {imgsLeft.map((img, i) => ( | ||
| <img | ||
| key={i} | ||
| src={`/images/landing-${img}@3x.png`} | ||
| alt={`landing-${img}`} | ||
| className={`w-100 ${img !== 1 ? "mt-auto" : ""}`} | ||
| /> | ||
| ))} | ||
| <div className="landing-bottom"> | ||
| <div> | ||
| <div className="text-center"> | ||
| <img src="/images/[email protected]" alt="" /> | ||
| </div> | ||
| <div> | ||
| <h4 className="f-18 fw-600 mb-12">Virtual Seats</h4> | ||
| <p className="f-14 fw-200 mb-0"> | ||
| Buy tickets with friends and virtually enjoy the event together | ||
| </p> | ||
| </div> | ||
| </div> | ||
| <div className="max-192 d-flex flex-column"> | ||
| {imgsRight.map((img, i) => ( | ||
| <img | ||
| key={i} | ||
| src={`/images/landing-${img}@3x.png`} | ||
| alt={`landing-${img}`} | ||
| className={`w-100 ${img !== 5 ? "mt-auto" : ""}`} | ||
| /> | ||
| ))} | ||
| <div> | ||
| <div className="text-center"> | ||
| <img src="/images/[email protected]" alt="" /> | ||
| </div> | ||
| <div> | ||
| <h4 className="f-18 fw-600 mb-12">Personalized Chatroom</h4> | ||
| <p className="f-14 fw-200 mb-0"> | ||
| Chat with friends or enjoy the noise of arena with custom chat | ||
| experiences that reflects a live arena | ||
| </p> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <div className="text-center"> | ||
| <img src="/images/[email protected]" alt="" /> | ||
| </div> | ||
| <div> | ||
| <h4 className="f-18 fw-600 mb-12">Event Creator Tools</h4> | ||
| <p className="f-14 fw-200 mb-0"> | ||
| Tools to help creators, design, market, and execute their events | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <p className="f-12 fw-400 mt-36 mb-36 text-center"> | ||
| All Rights Reserved ® Unpluggd. 2021 | ||
| </p> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default LandingPage; | ||
| export default Index; |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters