function Homepage(props) {


  
  return(
    <div className="row">
    <div className="col" style={{ display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", minHeight: 150 }}>
      <h5 className="animate-left" style={{ color: "gray" }}>Your Premier Miami Body Shop and Auto Repair Center!</h5><br />
      <div className="row">
        <div className="col-md-6 animate-right">
          <h1 className="animate-left" style={{ color: "white" }}>Comprehensive Auto Repair and Maintenance Services</h1><br />
          <p className="animate-left">
            Experience top-notch repair and maintenance services right in the heart of Miami, Florida at DvAuto.<br />
            Our dedicated team is ready to serve you at our convenient location near the Fort Lauderdale Airport.<br />
            At DvAuto, we take pride in our exceptional team of skilled technicians who bring a wealth of expertise and dealer experience to every service.<br />
            Our bright, friendly, and talented technicians are equipped with the knowledge and skills needed to deliver outstanding results.<br /> <br />
            Trust your vehicle to the experts at DvAuto and experience the difference we can make in maintaining and repairing your vehicle.
          </p>
        </div>
        <div className="col-md-6 animate-right" id="home-pic" style={{ backgroundImage: "url('static/img/mechanic-homepage.jpg')", backgroundSize: "cover", backgroundPosition: "center", backgroundRepeat: "no-repeat" }}>
        </div>
      </div>
            <h3 style={{ justifyContent: "center", alignItems: "center", marginTop: "40px", color: "white", marginTop:"60px" }}>Schedule Your Appointment Today!</h3>
            <h3 style={{ justifyContent: "center", alignItems: "center", color: "white",  marginBottom:"60px"  }}>(954) 458-0043</h3>
            <a href="/coupon"> 
            <button className="coupon-button">
            Redeem $25 off coupon
            
                </button> </a> <br />
                <span className="coupon-disclaimer">*excluding oil change services, AC Freon, and diagnostics.</span>
                
            <h1 style={{ justifyContent: "center", alignItems: "center", marginTop: "40px", color: "white", marginTop:"60px", marginBottom:"60px"  }}>Why choose DvAuto?</h1>
           
        </div>
       
          </div>



        
      );
   }




function Services(props){
  return(


   <div className="row" style={{ display: "flex", justifyContent: "center", alignItems: "center"}}>
    <div className="col" style={{ display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center"}}>
    <h1  style={{ color: "white", marginBottom:"60px"}}>Services:</h1>
<p>
<h6 style={{ display: "flex", justifyContent: "center", alignItems: "center"}}>We work with all types of car insurances.*</h6> 
<div className="services" style={{ display: "flex", justifyContent: "center", alignItems: "center", marginTop: "15px"}}>
  

Our range of services includes: <br />  <br />
  ⚙️Maintenance: call for details. <br />
  ⚙️Paint & Body: $100 per hour.<br />
  ⚙️Structural: $100 per hour.<br />
  ⚙️Frame: $120 per hour.<br />
  ⚙️Exotics: $300 per hour.<br />
  ⚙️Paint Materials: $30 per hour.<br />
  ⚙️Aluminum Repair: $170 per hour.<br />
  ⚙️Mechanical: $180 per hour.<br />
  ⚙️Electrical: $180 per hour.<br />
  ⚙️Inside Storage: $200 per day.<br />
  ⚙️Outside Storage: $220 per day.<br />
  ⚙️Admin Fee: $1500.<br />
  <br />  
  </div>

 </p>

        </div>
    </div>



  );
}


function Contact(props){
  return(


   <div>
    <div style={{ display: "flex", justifyContent: "center", alignItems: "center"}}>
        <h1  style={{ color: "white"}}>Contact US:</h1><br />
      </div>
  
        <div style={{ display: "flex", justifyContent: "center", alignItems: "center"}}>
        <p>
        <h5>dvauto16@gmail.com</h5>
          <h5>(305) 770-8021</h5>
          </p> 
    </div>
    
    </div>



  );
}


function AboutUs(props){
  return (
    <div className="row" style={{ color: "white" }}>
      <div className="col animate">
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
          <h1 className="core-values">At DvAuto, our core values are:</h1>
          <br />
        
          <h3>
            <ul className="circles-container" style={{background: "linear-gradient(to right, white, grey)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent"}}>
            <li><span className="circle"></span>Trust</li>
            <li><span className="circle"></span>Quality</li>
            <li><span className="circle"></span>Safety</li>
            </ul>
          </h3>
        </div>
        <div style={{ justifyContent: "center", alignItems: "center", maxWidth: "800px", textAlign: "center" }}>
          <h4>
            We believe that these values are critical to delivering the best services to our clients and building long-term relationships with them.
            <br />
            We are committed to upholding these values in all of our interactions with our customers, employees, and partners.
            <br />
            Our mission at DvAuto is to provide high-quality automotive services, placing our clients' satisfaction first.
            <br />
            We are dedicated to offering personalized attention, reliable service, and competitive pricing. Our focus on trust, quality, and safety
            ensures that our customers can depend on us for their car-related needs.
          </h4>
        </div>
      </div>
    </div>
  );
}










function Navbar(props) {

  return (
    <nav>
      <ReactRouterDOM.Link to="/" className="havbar-brand d-flex justify-content-center">


      <section className="d-flex justify-content-center">
      <ReactRouterDOM.NavLink
          to="/"
          activeClassName="navlink-active"
          className="nav-link nav-item"
        >
          
        </ReactRouterDOM.NavLink>
        <ReactRouterDOM.NavLink
          to="/services"
          activeClassName="navlink-active"
          className="nav-link nav-item"
        >
         
        </ReactRouterDOM.NavLink>
        <ReactRouterDOM.NavLink
          to="/contact"
          activeClassName="navlink-active"
          className="nav-link nav-item"
        >
         
        </ReactRouterDOM.NavLink>
          <ReactRouterDOM.NavLink
          to="/aboutus"
          activeClassName="navlink-active"
          className="nav-link nav-item"
        >
         
        </ReactRouterDOM.NavLink>
      </section>
      </ReactRouterDOM.Link>
    </nav>
  );
}