Refactor

Front-End/src/Components/AboutMe/AboutMe.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import Constants from '../../resources/AboutMeConstants'
+
+let AboutMe = (props) =>{
+    /*let allCards = (
+        Constants.map(Event,index)=>{
+            return(
+
+            );
+        }
+    );*/
+    return(
+        <div ref={props.AboutMeRef} className="aboutMe eventsTitle">
+            <h1> About Me</h1>
+
+            <ul>
+                {
+                    Constants.map((Event,index)=>{
+                        return(
+                            <li className="event" key={index}>
+                                <img src={Event.picture} alt="eventLocation"/>
+                                <div className="eventDescription">
+                                    <p>
+                                        {Event.description}
+                                    </p>
+                                </div>
+                            </li>
+                        );
+                    })
+                }
+            </ul>
+        </div>
+    )
+}
+export default AboutMe;

Front-End/src/Components/Events/Events.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import Constants from '../../resources/EventsConstants'
+
+
+let Events = (props) =>{
+
+      let allEvents = Constants.map((event,index) =>{
+        return(
+        <li className="event"key={index}>
+          <a href={event.link} target="_blank" rel="noreferrer"><img src={event.picture} alt="eventLocation"/></a>
+          <div className="eventDescription">
+            <p>
+              Where: <a href={event.link} target="_blank" rel="noreferrer">{event.location}</a>
+            </p>
+
+            <p>
+              When: {event.date}
+            </p>
+          </div>
+        </li>);
+      })
+    return(
+        <div ref={props.EventsRef} className="eventsTitle">
+            <h1>Events</h1>
+            <ul>
+                {allEvents}
+            </ul>
+        </div>
+    )
+}
+export default Events;

Front-End/src/Components/Gallery/Gallery.js

@@ -0,0 +1,31 @@
+import React from 'react'
+
+let Gallery = (props) =>{
+
+    let entireGallery = props.gallery.map((item,index)=>{
+        if(item.link.includes(".mp4")){
+          return(
+            <li key={index}>
+              <video  autoPlay muted loop>
+                <source src={item.link} type="video/mp4" />
+              </video>
+            </li>
+          );
+        }
+        return(
+        <li key={index}>
+          <img src={item.link} alt="stand"/>
+        </li>);
+      })
+
+    return(
+            <div ref={props.GalleryRef} className="gallery">
+                <h1>Gallery</h1>
+                <ul>
+                    {entireGallery}
+                </ul>
+            </div>
+    );
+}
+
+export default Gallery;

Front-End/src/Components/Shop/Shop.js

@@ -0,0 +1,27 @@
+import React from 'react'
+
+let Shop = (props) =>{
+
+    let entireCatalog = props.shop.map((item) =>{
+        return (
+        <li key = {item.id} style={{backgroundImage: `url(${item.link})`}}>
+          <div className="shopButton">
+            <div className="shopButtonPackage">
+              <p><a href={"https://www.etsy.com/shop/LinDiBracelets?ref=simple-shop-header-name&listing_id=584303931"} target="_blank" rel="noreferrer">Go To Store</a></p>
+              <p><a href={item.page} target="_blank" rel="noreferrer">Product Details</a></p>
+            </div>
+          </div>
+        </li>);
+      })
+
+    return(
+        <div ref={props.ShopRef} className="shop">
+          <h1 >Shop</h1>
+          <ul>
+           {entireCatalog}
+          </ul>
+        </div>
+    );
+}
+
+export default Shop;

Front-End/src/Components/SocialMedia/SocialMedia.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import etsy from '../../resources/images/social-media/etsy.png';
+import facebook from '../../resources/images/social-media/facebook.png';
+import instagram from '../../resources/images/social-media/instagram.png';
+
+let SocialMedia = (props) => {
+    return(
+        <div className="socialMedia">
+          <p>All rights reserved</p>
+          <ul>
+            <li><a href={"https://www.instagram.com/lindibracelets/"} target="_blank" rel="noreferrer"><img className="socialMediaIcon"src={instagram} alt="FacebookLogo"/></a></li>
+            <li><a href={"https://www.facebook.com/LinDiBracelets/"} target="_blank" rel="noreferrer"><img className="socialMediaIcon"src={facebook} alt="InstagramLogo"/></a></li>
+            <li><a href={"https://www.etsy.com/shop/LinDiBracelets?ref=simple-shop-header-name&listing_id=584303931"} target="_blank" rel="noreferrer"><img className="socialMediaIcon"src={etsy} alt="EtsyLogo"/></a></li>
+          </ul>
+        </div>
+    );
+}
+
+export default SocialMedia;

Front-End/src/Components/SplashPage/SplashPage.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+
+let SplashPage = (props) => {
+    return(
+        <div className="headerText">
+            <h2 className="lindiName">Lindi Bracelets</h2>
+            <h2 className ="headerBold">Love</h2>
+            <h2 className ="headerReg">what you wear. be</h2>
+            <h2 className ="headerBold">Unique</h2>
+        </div>
+    );
+}
+
+export default SplashPage;

Front-End/src/Components/contactMe/contactMe.js

@@ -36,7 +36,7 @@ let contactMe = (props) =>{
     }
 
     return(
-        <div ref={props.refs} className="contactMe">
+        <div ref={props.ContactMeRef} className="contactMe">
           <h1>Contact Me</h1>
           <p>Got something different in mind? Send me an email and we can make it a realty</p>
           <form onSubmit={submit}className="contactMeForm">