IVYN

index.html

<div id="container"></div>
<h2 style="text-align: center; color: #e50435; background-color: rgba(0,0,0,.2); padding:10px;">Find Us</h2>
<iframe id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.3144179024976!2d-73.9885187848746!3d40.75510884291463!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259ab2d9a9f23%3A0xd81666ef603e9144!2s1460+Broadway%2C+New+York%2C+NY+10036!5e0!3m2!1sen!2sus!4v1529363043589" width="100%" height="600" frameborder="0" allowfullscreen></iframe>

<!-- add http://react-responsive-carousel.js.org with engines for cars and aircraft -->

ivyn.markdown

IVYN

A Pen by Azeem Hussein on CodePen.

License.

script.babel

var destination = document.querySelector("#container");

var { Router,
      Route,
      IndexRoute,
      IndexLink,
      Link } = ReactRouter;

var STUFFITEMS = [
    { id: 1, title: "Nulla pulvinar diam", visible: false },
    { id: 2, title: "Facilisis bibendum", visible: false },
    { id: 3, title: "Vestibulum vulputate", visible: false },
    { id: 4, title: "Eget erat", visible: false },
    { id: 5, title: "Id porttitor", visible: false },
    { id: 6, title: "Lorem Ipsum", visible: true }
];

var App = React.createClass({  
  render: function() {
    return (
      <div>
        <h1 className="logo">IVYN Automotive</h1>
        <ul className="header">
          <li><IndexLink to="/" activeClassName="active">Home</IndexLink></li>
          <li><Link to="/warranty" activeClassName="active">Warranty</Link></li>
          <li><Link to="/aircraft" activeClassName="active">Aircraft</Link></li>
          <li><Link to="/faq" activeClassName="active">FAQ / Contact Us</Link></li>
        </ul>
        <div className="content">
          {this.props.children}
        </div>
      </div>
    )
  }
});

var Home = React.createClass({
  render: function() {
      return (
        <div>
          <h2>HELLO</h2>
          <p>Welcome to Ivynautomotive.com! We are the fastest, most reliable way to locate insurance quality used OEM parts online. Our knowledgeable and friendly staff can help minimize your search time and provide you with the precise part you need for your vehicle. We will provide you with used OEM automotive parts and accessories as quickly and as cost-effectively as possible.</p> 
          <p>We specialize in online-based car-part locating services in the U.S., Canada, and Caribbean Islands. Our well-established supply chain is made up of professional suppliers, recyclers, dismantlers and freight forwarding companies. This allows us to find your part locally and ship it quickly. We are proud to run a business that re-uses and recycles automotive parts and by doing so we contribute to a greener planet. We are also proud that we save our customers hundreds of dollars.</p>       
        </div>
      );
    }
});

var Warranty = React.createClass({
  render: function() {
      return (
        <div>
          <h2>WARRANTY POLICY</h2>
          <p>Warranty on each part RETURN / EXCHANGE POLICY</p>
                    
          <p>It’s a USED OEM part. Parts delivered shall not be in Mint/New Condition. Our Promise, we assure you that the part will be taken from same Make, Model or interchangeable models of the vehicle, and we guarantee it to be in good working condition and shall fit. Also, it will not be damaged, defective or incorrect (we make sure we match the part fitments correctly), However we advise you If any of these norms are not met, then we provide exchange or return. If you receive an incorrect, defective or damaged part, ship it back to IVYNAUTOMOTIVE.COM and we will replace the damaged part and provide you another one. If the second one isn’t correct or damaged, we will refund the complete amount of the item.</p>
          
          <p>We also ask you to send us a diagnosis report from a certified mechanic or an authorized dealer. We need your order number, name, e-mail address and phone number for the part you wish to return. If you do not have your order number, please indicate when your order was purchased and the phone number/email you used in the order process. Please be aware that in the event a second part is ordered, the refund for the first order will be sent after we receive the first part from you. And you need to pay the price of second part while ordering.</p>
            
            <p>Shipping costs for returns cannot be reimbursed, but store credits are provided for eligible customers. (Please check with your Customer Representative about eligibility and store credits.) All return orders must be packaged properly; We are not responsible for damaged returns resulting from improper packaging.</p>
            
            <p>A restocking fee of 30% along with one way shipping cost is charged on all returns that are not the direct result of our error. Items listed (includes high wear & tear parts) here are not guaranteed or warranted by IVYNAUTOMOTIVE.com. Items such as water pump, distributor cap, spark plugs, Ball joints & bushings, sensors, seals, gaskets, air-filters, rubber bushings, non-metal parts attached with the used OEM part ordered, handles, interior panels, hinges, latches, hood ornaments, trim & color match (in case of Body parts) wires and possibly (I don’t get this) timing chain.“Block Only” (short or Long Block) orders, are guaranteed to be rebuildable. YourCarPart.com strongly recommends our customers to Re-machine, replace all seals & gaskets, and get all the components cleaned if necessary prior to the installation of the part on the vehicle. We also recommend the body parts to be repainted to match your vehicle body color.</p>
            
         <p>You can return any wrong, damaged or defective part(s) to IVYNAUTOTMOTIVE.COM. (On receiving a confirmation from our customer care team via Email, customer can ship the part on the address provided at the time of contact) within 30 days from the day the part is delivered. Customer must provide IVYNAUTOMOTIVE.COM with the Return Tracking Number. No returns or exchange will be accepted after 30 days. Customer must notify us via call (888-555-5555 and Press 2 for Customer support) (why say this if everything has to be in writing?) or e-mail (info@ivynautomotive.com) about the damaged, defective or incorrect part received. ALL PROBLEMS MUST BE IN WRITING via MAIL, EMAIL OR FAX to verify a problem with a particular part or installation. Customer refunds are issued once the returned part has been received, verified and inspected by IVYNAUTOMOTIVE.COM authorized personnel. All parts to be returned must be in their original condition and cannot be disassembled or damaged due to incorrect installation. We are not responsible for installation errors. We are also not responsible for any labor expenses, towing expenses, or rental car expenses caused by the use of wrong or defective parts during installation. Core and parts that are ordered incorrectly by the customer & Parts ordered for testing purposes will not be available for return. ALL PARTS ARE UNIQUELY IDENTIFIED BY MARKINGS ON THE PART. (CORE - It’s a rebuildable unit/part. which, in its current form is not in working condition and is sold as it is)</p>
            
          
        </div>
      );
    }
});

var Faq = React.createClass({
  render: function() {
      return (
        <div>
          <h2>CALL US AT OUR TOLL FREE NUMBER | 1-888-555-5555</h2>
          <p className="contactus">We deliver good quality used OEM car parts and accessories quickly and at the best price..
          </p>
        </div>
      );
    }
});

var Aircraft = React.createClass({
  render: function() {
      return (
        <div>
          <h2>Coming Soon: Aircraft</h2>
          <p>Our Business was founded in 2018 and is committed to supplying the aviation industry with New Surplus, salvaged, and overhauled aircraft parts with guaranteed customer satisfaction.
Our shops and warehouses are conveniently located near north FL, as well as South Texas, comprising over 80,000+ sqft of warehouse space, and 24/7 monitored security.</p>
          <p>At the Aircraft Parts Store we strive for the utmost customer satisfaction.</p>
          <p>Our inventory control team makes sure each part is fully inspected, properly identified, and then individually listed by part number on one or more of our aviation inventory listing services.</p>
          <p>Most parts sold are guaranteed and warranted for 60 days from the date of sale. At the Aircraft Part Store aviation is our passion and way of life and we look forward to working with you in the near future!</p>
        </div>
      );
    }
});
 
var Stuffs = React.createClass({
  _renderStuffs: function() {
    return (
        <div>
          <h2>STUFFS</h2>
          <p>Mauris sem velit, vehicula eget sodales vitae,
          rhoncus eget sapien:</p>
          <ol>
            {this.state.stuffs.map(stuff => (
              <li><Link to={`/stuffs/${stuff.id}`} activeClassName="active">{stuff.title}</Link></li>
            ))}
          </ol>
        </div>
    );
  },

  getInitialState: function() {
    return {
      stuffs: STUFFITEMS
    };
  },

  render: function() {
      return (
        <div>
          { this.props.params.stuffId ? this.props.children : this._renderStuffs() }
        </div>
      );
    }
});

var Stuff = React.createClass({
  _findStuffById: function(id) {
    return STUFFITEMS.filter((stuffItem) => stuffItem.id == id )[0];
  },
  
  getInitialState: function() {
    return {
      stuffs: null
    };
  },
  
  componentWillMount: function() {
    this.setState({
      stuff: this._findStuffById(this.props.params.stuffId)
    })
  },
  
  render: function() {
      const stuff = this.state.stuff;
      return (
        <div>
          <h2>{stuff.title}</h2>
          <p>My ID is {stuff.id}</p>
          <p><Link to="/about">Return to Stuffs</Link></p>
        </div>
      );
    }
});

var NoMatch = React.createClass({
  render: function() {
    return (
      <div>
        <h2>No route matches this URL.</h2>
        <p>Return <Link to="/">home</Link></p>
      </div>
    );
  }
});

ReactDOM.render(
  <Router>
    <Route path="/" component={App}>
      <IndexRoute component={Home} />
      <Route path="/about" component={Stuffs}>
        <Route path=":stuffId" component={Stuff} />
      </Route>
      <Route path="/warranty" component={Warranty}/>
      <Route path="aircraft" component={Aircraft}/>
      <Route path="faq" component={Faq} />
      <Route path="*" component={NoMatch}/>
    </Route>
  </Router>,
  destination
);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
<script src="https://npmcdn.com/react-router@2.4.0/umd/ReactRouter.min.js"></script>

style.css

body {
  background-color: #2e2f30;
  background-image: url("https://wallpapersite.com/images/wallpapers/porsche-911-turbo-s-exclusive-series-3840x2025-2017-4k-8690.jpg");
  padding: 20px;
  margin: 0;
}
h1, h2, p, ul, li {
  font-family: Helvetica, Arial, sans-serif;
}
.logo {
  color: #e50435;
}

ul.header li {
  display: inline;
  list-style-type: none;
  margin: 0;
}
ul.header {
  background-color: rgba(0,0,0,.4);
  padding: 0;
}
ul.header li a {
  color: #FFF;
  font-weight: bold;
  text-decoration: none;
  padding: 20px;
  display: inline-block;
}
.content {
  background-color: rgba(0,0,0,.4);
  color: white;
  padding: 20px;
}
.content h2 {
  padding: 0;
  margin: 0;
}
.content li {
  margin-bottom: 10px;
}
.active {
  background-color: #e50435;
}

a {
  text-decoration: none;
  color: #e50435;
}
#map {
  border: 10px solid rgba(0,0,0,.4);;
  border-radius: 5px;
}
.contactus{
  //color: #541e6d;
  color: #e09e0f;
  font-size: 2em;
}

@media only screen and (min-width: 1920px) {
#container {
  padding-left: 15%;
  padding-right: 15%;
  }
#map {
  padding-left: 15%;
  padding-right: 15%;
  } 
}