diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache index 85e3446..4dd908b 100644 --- a/.firebase/hosting.YnVpbGQ.cache +++ b/.firebase/hosting.YnVpbGQ.cache @@ -1,19 +1,20 @@ -asset-manifest.json,1599357182615,bbf783668dd914ff3873a3b5d1bd6d99a7686b94316f64cc4fd0c23cd76e3f7b -index.html,1599357182614,184f7707bca500b5e83d1355501bf43195f270b45c93c1d5ab3c53b9d4ca6163 -precache-manifest.f537d4c5b93bf7c9c6b523329f6ed425.js,1599357182614,e63df71ead8c86f1639f36c1897da3c0fefb6f291f8535ebd91d83cdd8f4d107 -favicon.ico,1599357174133,a08fa4488c3ecef62d9effd03b3a989929bdcbecf5e905941f9034a15bd3dba3 -service-worker.js,1599357182614,cfce6516ea35c6884469c16e79efe944279a159f5747ba791064dffce093330f -logo192.png,1599357174133,caff018b7f1e8fd481eb1c50d75b0ef236bcd5078b1d15c8bb348453fee30293 -manifest.json,1599357174135,341d52628782f8ac9290bbfc43298afccb47b7cbfcee146ae30cf0f46bc30900 -robots.txt,1599357174135,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2 -static/js/2.2b242bd2.chunk.js.LICENSE.txt,1599357182617,a3e8b1ff4d8b8e727a88d96ba484b3cc1f4b6645be9f62f8445f35cb50e920cd -logo512.png,1599357174134,191fc21360b4ccfb1cda11a1efb97f489ed22672ca83f4064316802bbfdd750e -static/css/main.89027b07.chunk.css,1599357182617,87eb1c6f7a2d7c59f55e88be01b32aadb79a6335e49e875a21a43b9f04e8191a -static/js/runtime-main.fa53fba5.js,1599357182617,b9289f9a9022bc228976645ecd66e888587d9f995a502b741e475361470248f9 -static/js/main.44f30f04.chunk.js,1599357182618,6ebe9217a5174fb18826ac3a23c3f570a05a907c7a19e806ca9853e6d44576e8 -static/css/main.89027b07.chunk.css.map,1599357182619,eb142b956afdf8397e467d7f5554c1374a678ffb8e8275fe10ff91e5586646dc -static/js/runtime-main.fa53fba5.js.map,1599357182619,e98d47efe293730d8b3fdf7596cd1083175dffaeb1d5e4c3e07b2a92a5ecb5d8 -static/js/main.44f30f04.chunk.js.map,1599357182619,6cb7a24c1758d99967addb22e693dfcbb93bc53fd20baec315d8a23e3e5407d0 -static/js/2.2b242bd2.chunk.js,1599357182618,c6143a983ca92c75ec6731366c918e32adf59e7e0466ffc11f62252c1ecb39a6 -static/js/2.2b242bd2.chunk.js.map,1599357182618,c971de723d8d665df7e22ae5d2ed7fc8779e25bd8a2072751d8f7dd3f49a165b -static/media/rameelo_cover_photo.298525d7.png,1599357182616,584a99ed276e0ed86db78cca3f84462b4d2bba931a7cb7ff335265526dfedbbc +asset-manifest.json,1599414594462,bed79950607a7d7824a7184f5fabd9389e60a1e4127ad743c86b4869cc8d1b02 +favicon.ico,1599414588545,a08fa4488c3ecef62d9effd03b3a989929bdcbecf5e905941f9034a15bd3dba3 +index.html,1599414594462,d354bddf305dfb4996f274b74c0e1fa88e5f6a0c0b5f59bed0a74bd1e0d0a929 +manifest.json,1599414588549,341d52628782f8ac9290bbfc43298afccb47b7cbfcee146ae30cf0f46bc30900 +precache-manifest.84e8a07edeceaf9f94fb9f02fdac09ef.js,1599414594462,d93ed9e5485b554357e0cf8eced31d13f5a12ab83cee3175a823f573c018a225 +robots.txt,1599414588549,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2 +logo192.png,1599414588547,caff018b7f1e8fd481eb1c50d75b0ef236bcd5078b1d15c8bb348453fee30293 +service-worker.js,1599414594462,9c3e09bf5049ef341ba11cb0542e3a2c1d52906991fa97bfde582c277b138fe0 +static/js/2.2b242bd2.chunk.js.LICENSE.txt,1599414594464,a3e8b1ff4d8b8e727a88d96ba484b3cc1f4b6645be9f62f8445f35cb50e920cd +logo512.png,1599414588548,191fc21360b4ccfb1cda11a1efb97f489ed22672ca83f4064316802bbfdd750e +static/css/main.9367d51f.chunk.css,1599414594464,64dab1897d3ef3e094ec64100fdf5b103aeeab688cbcd5eae6c93acde862477b +static/js/main.a5b91c04.chunk.js,1599414594465,9c9f6576a382928a68bd59435dd6aa9c2007cb23c0a5bd9dbf1a3c19799fa2b3 +static/css/main.9367d51f.chunk.css.map,1599414594465,b5dd03e8b289bf39e040c068d4bc6b1b15ef3e583cdb153eafdbb78011f819ad +static/js/runtime-main.fa53fba5.js,1599414594464,b9289f9a9022bc228976645ecd66e888587d9f995a502b741e475361470248f9 +static/js/runtime-main.fa53fba5.js.map,1599414594464,e98d47efe293730d8b3fdf7596cd1083175dffaeb1d5e4c3e07b2a92a5ecb5d8 +static/js/main.a5b91c04.chunk.js.map,1599414594465,4d1363aa543224fd3d3a9b2fe4cc72a243966f67f3f477b3149bdd1a965e65bc +static/js/2.2b242bd2.chunk.js,1599414594463,c6143a983ca92c75ec6731366c918e32adf59e7e0466ffc11f62252c1ecb39a6 +static/media/host_bg_2x.8a86e3a6.png,1599414594465,1689bee07f1c51bd50315c71085a3c507c84c53f55f6e92bb63e16009cffa1e1 +static/js/2.2b242bd2.chunk.js.map,1599414594465,c971de723d8d665df7e22ae5d2ed7fc8779e25bd8a2072751d8f7dd3f49a165b +static/media/rameelo_cover_photo.298525d7.png,1599414594463,584a99ed276e0ed86db78cca3f84462b4d2bba931a7cb7ff335265526dfedbbc diff --git a/src/components/loader/index.js b/src/components/loader/index.js new file mode 100644 index 0000000..051829b --- /dev/null +++ b/src/components/loader/index.js @@ -0,0 +1 @@ +export { default } from './loader'; diff --git a/src/components/loader/loader.js b/src/components/loader/loader.js new file mode 100644 index 0000000..c4a0f2a --- /dev/null +++ b/src/components/loader/loader.js @@ -0,0 +1,16 @@ +import React from 'react'; + +// Styles +import './loader.scss'; + +export default function Loader(props) { + if (!props.show) { + return null; + } + + return ( +
+ ); +} diff --git a/src/components/loader/loader.scss b/src/components/loader/loader.scss new file mode 100644 index 0000000..9bec95c --- /dev/null +++ b/src/components/loader/loader.scss @@ -0,0 +1,44 @@ +@import '../../styles/index'; + +.loader-container { + margin: 0 auto; + flex: 1; + display: flex; + height: 100vh; + width: 100vw; + + align-items: center; + justify-content: center; + background-image: url('../../images/loader.gif'); + background-repeat: no-repeat; + background-position: center; + background-size: 70px; + + -webkit-animation-duration: 3s; + animation-duration: 3s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes fadeOut { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} + +@keyframes fadeOut { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} + +.fadeOut { + -webkit-animation-name: fadeOut; + animation-name: fadeOut; +} diff --git a/src/components/rameelo/landing/landing.js b/src/components/rameelo/landing/landing.js index fbdf6c2..c925704 100644 --- a/src/components/rameelo/landing/landing.js +++ b/src/components/rameelo/landing/landing.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { Fragment } from 'react'; // Styles import './landing.scss'; @@ -6,282 +6,308 @@ import './landing.scss'; // Slick import Slider from 'react-slick'; +// Loader component +import Loader from '../../loader'; + export default class Landing extends React.Component { - render() { - var sliderSettings = { - infinite: true, - speed: 300, - slidesToShow: 4, - slidesToScroll: 1, - responsive: [ - { - breakpoint: 1024, - settings: { - slidesToShow: 3, - slidesToScroll: 1, - }, - }, - { - breakpoint: 600, - settings: { - slidesToShow: 1, - slidesToScroll: 1, - }, - }, - ], + constructor(props) { + super(props); + this.state = { + isLoading: true, }; + } + + render() { + // dummy loader before the page content loads + // waiting for render engine to load larger assets on page + setTimeout(() => { + this.setState({ + isLoading: false, + }); + }, 3000); return ( -
-
-
-
-
- Rameelo - Raas Garba Forever. + + + + + ); + } +} + +function LandingContent(props) { + var sliderSettings = { + infinite: true, + speed: 300, + slidesToShow: 4, + slidesToScroll: 1, + responsive: [ + { + breakpoint: 1024, + settings: { + slidesToShow: 3, + slidesToScroll: 1, + }, + }, + { + breakpoint: 600, + settings: { + slidesToShow: 1, + slidesToScroll: 1, + }, + }, + ], + }; + + return ( +
+
+
+
+
+ Rameelo + Raas Garba Forever. +
+ +
+
+ About Us + Events + Registration + What is Raas Garba?
-
-
- About Us - Events - Registration - What is Raas Garba? -
- -
- - Welcome to the online platform for{' '} - everything Raas/Garba - - - If you love Raas/Garba, you are in the right place! Connect, - share, and grow with our community of passionate Raas/Garba - enthusiasts. - - Learn More -
- - - - Scroll - - +
+ + Welcome to the online platform for{' '} + everything Raas/Garba + + If you love Raas/Garba, you are in the right place! Connect, + share, and grow with our community of passionate Raas/Garba + enthusiasts. + + Learn More
-
-
-
-
-
-
-
-
- - Event Hosts - - For organizations and individuals who are hosting their - own Navrati events, we would like to welcome you to get - your event listed on our website, allow attendees to - purchase tickets on the site, and advertise your event! - - - - Sign up -
-
-
-
- - Event Attendees - - For attendees, you will be able to browse events, buy - tickets, and view videos of events! Sit tight until we - roll these features out! - - - - Create Account -
-
-
-
- - Collegiate Teams - - For collegiate teams, we welcome you to join the platform - to feature your team, share team details, and gain a - centralized place for recognition beside other teams in - the circuit! - - - - Sign Up Team -
-
-
-
- - Collegiate competitions - - For organizations and individuals who are hosting their - own Navrati events, we would like to welcome you to get - your event listed on our website, allow attendees to - purchase tickets on the site, and advertise your event! - - - - Sign Up Event -
-
-
-
-
- -
-
- Upcoming Events -
- -
- - - OCT - 19 - - - - - Garba with Attitude Competition - - - - - United Center @ Chicag, IL - - -
-
- - - OCT - 19 - - - - - Garba with Attitude Competition - - - - - United Center @ Chicag, IL - - -
-
- - - OCT - 19 - - - - - Garba with Attitude Competition - - - - - United Center @ Chicag, IL - - -
-
- - - OCT - 19 - - - - - Garba with Attitude Competition - - - - - United Center @ Chicag, IL - - -
-
- - - OCT - 19 - - - - - Garba with Attitude Competition - - - - - United Center @ Chicag, IL - - -
- -
-
-
- -
-
HOST
-
-
- Navratri Events - - On the next phase of the platform development, we will be - building a gateway for Raas/Garba event hosts to promote their - events, sell tickets, and manage event logistics! Event - attendees seeking to attend Navratri events will be able to - browse events, purchase tickets, and view promotion videos from - those events! - - - - - -
-
-
- -
-
Compete
-
-
- Collegiate - - For the first platform steps, we will be building a gateway for - the collegiate Raas/Garba teams and competitions. Teams will be - able to list their roster, share information about themselves, - demonstrate achievements they have, exhibit their dance videos, - and more. Competitions will be empowered to promote thier - events, enable easy competition team lists, showcase their - boards, exhibit videos, and present winners! - - - - + + + Scroll + +
- ); - } + +
+
+
+
+
+ + Event Hosts + + For organizations and individuals who are hosting their own + Navrati events, we would like to welcome you to get your + event listed on our website, allow attendees to purchase + tickets on the site, and advertise your event! + + + + Sign up +
+
+
+
+ + Event Attendees + + For attendees, you will be able to browse events, buy + tickets, and view videos of events! Sit tight until we roll + these features out! + + + + Create Account +
+
+
+
+ + Collegiate Teams + + For collegiate teams, we welcome you to join the platform to + feature your team, share team details, and gain a + centralized place for recognition beside other teams in the + circuit! + + + + Sign Up Team +
+
+
+
+ + Collegiate competitions + + For organizations and individuals who are hosting their own + Navrati events, we would like to welcome you to get your + event listed on our website, allow attendees to purchase + tickets on the site, and advertise your event! + + + + Sign Up Event +
+
+
+
+
+ +
+
+ Upcoming Events +
+ +
+ + + OCT + 19 + + + + + Garba with Attitude Competition + + + + + United Center @ Chicag, IL + + +
+
+ + + OCT + 19 + + + + + Garba with Attitude Competition + + + + + United Center @ Chicag, IL + + +
+
+ + + OCT + 19 + + + + + Garba with Attitude Competition + + + + + United Center @ Chicag, IL + + +
+
+ + + OCT + 19 + + + + + Garba with Attitude Competition + + + + + United Center @ Chicag, IL + + +
+
+ + + OCT + 19 + + + + + Garba with Attitude Competition + + + + + United Center @ Chicag, IL + + +
+ +
+
+
+ +
+
HOST
+
+
+ Navratri Events + + On the next phase of the platform development, we will be building + a gateway for Raas/Garba event hosts to promote their events, sell + tickets, and manage event logistics! Event attendees seeking to + attend Navratri events will be able to browse events, purchase + tickets, and view promotion videos from those events! + + + + + +
+
+
+ +
+
Compete
+
+
+ Collegiate + + For the first platform steps, we will be building a gateway for + the collegiate Raas/Garba teams and competitions. Teams will be + able to list their roster, share information about themselves, + demonstrate achievements they have, exhibit their dance videos, + and more. Competitions will be empowered to promote thier events, + enable easy competition team lists, showcase their boards, exhibit + videos, and present winners! + + + + + +
+
+
+
+ ); } diff --git a/src/images/loader.gif b/src/images/loader.gif new file mode 100644 index 0000000..e7561d7 Binary files /dev/null and b/src/images/loader.gif differ diff --git a/src/styles/_main.scss b/src/styles/_main.scss index 1f5947d..814c7c8 100644 --- a/src/styles/_main.scss +++ b/src/styles/_main.scss @@ -43,3 +43,7 @@ body { box-shadow: none; cursor: pointer; } + +.cf-hide { + display: none !important; +}