import React, {Component} from 'react';
import { Testimonial } from './assests/data/about';

class About extends React.Component {
    render() {
        return(
            <div>


        {/* PRELOADER SPINNER
		============================================= */}	
        <div id="loader-wrapper">
          <div id="loading">
            <span className="cssload-loader"><span className="cssload-loader-inner" /></span>
          </div>
        </div>
        {/* PAGE CONTENT
		============================================= */}	
        <div id="page" className="page">
          
          {/* PAGE HERO
			============================================= */}	
          <div id="about-page" className="rel purple_gradient bg_shape_01 page-hero-section division">
            <div className="container">	
              <div className="row">	
                <div className="col-lg-8 offset-lg-2">
                  <div className="hero-txt text-center white-color">
                    {/* Title */}
                    <h2 className="h2-md">{heroInfo.title.normal} <span>{heroInfo.title.bold}</span> </h2>
                    {/* Text */}	
                    <p className="p-xl">{heroInfo.desc}</p>
                  </div>
                </div>	
              </div>	  {/* End row */}
            </div>	   {/* End container */} 
          </div>	{/* END PAGE HERO */}	
          {/* ABOUT-2
			============================================= */}
          <div id="about-2" className="wide-90 about-section division">
            <div className="container">
              {/* TEXT BLOCK */}	
              <div className="about-2-txt pc-50">
                {/* SMALL TITLE */}
                <div className="row">
                  <div className="col-md-12">
                    <div className="txt-block mb-35">
                      <h5 className="h5-lg text-justify">{aboutDesc.upperSection.title}</h5>
                    </div>
                  </div>
                </div>
                <div className="row">
                  {/* LEFT COLUMN */}
                  <div className="col-md-6">
                    <div className="txt-block top-box">
                      {/* Title */}	
                      <h5 className="h5-lg">{aboutDesc.upperSection.vision.title}</h5>
                      {/* Text */}
                      <p className="p-lg lh-lg">{aboutDesc.upperSection.vision.text}</p>                      
                    </div>
                  </div>	{/* END LEFT COLUMN */}
                  {/* RIGHT COLUMN */}
                  <div className="col-md-6">
                    <div className="txt-block">
                      {/* Title */}	
                      <h5 className="h5-lg">{aboutDesc.upperSection.mission.title}</h5>
                      {/* List */}	
                      {/* Text */}
                      <p className="p-lg lg-lh">{aboutDesc.upperSection.mission.text}</p>	{/* End List */}	
                    </div>
                  </div>	{/* END RIGHT COLUMN */}	
                </div>
              </div>	{/* END TEXT BLOCK */}	
              {/* IMAGE BLOCK */}	
              <div className="row">
                <div className="col-md-12">
                  <div className="img-block mt-50 mb-70">
                    <img className="img-fluid" src="assets/images/about-us-made-for-you.jpg" alt="content-image" />
                  </div>
                </div>	
              </div>
              {/* TEXT BLOCK */}	
              <div className="about-2-txt pc-50">
                <h5 className="h5-lg"> <span>{aboutDesc.lowerSection.caption.first}</span><br />{aboutDesc.lowerSection.caption.second}</h5>
                <div className="row">
                  {/* LEFT COLUMN */}
                  <div className="col-md-6">
                    <div className="txt-block top-box">
                      {/* Title */}	
                      {/* <h5 className="h5-lg">We care about the details</h5> */}
                      {/* Text */}
                      <p className="p-lg">{aboutDesc.lowerSection.left.first}<br />{aboutDesc.lowerSection.left.second}</p>
                    </div>
                  </div>	{/* END LEFT COLUMN */}
                  {/* RIGHT COLUMN */}
                  <div className="col-md-6">
                    <div className="txt-block">
                      {/* Title */}	
                      {/* <h5 className="h5-lg">With knowledge, skill and hard work</h5> */}
                      {/* List */}	
                      <p className="p-lg">{aboutDesc.lowerSection.right}</p>	{/* End List */}		
                    </div>
                  </div>	{/* END RIGHT COLUMN */}		
                </div>
              </div>	{/* END TEXT BLOCK */}	
              {/* BUTTON */}		
              <div className="row">
                <div className="col-md-12">
                  <div className="about-2-btn text-center mt-40">
                    <a href="#" className="btn btn-md btn-skyblue tra-skyblue-hover">{aboutDesc.cta}</a> 
                  </div>
                </div>
              </div>	{/* END BUTTON */}
            </div>	   {/* End container */}	
          </div>	{/* END ABOUT-2 */}
          {/* TESTIMONIALS-1
			============================================= */}
          <section id="reviews-1" className="rel bg_whitesmoke wide-100 reviews-section division">
            <div className="container">
              {/* SECTION TITLE */}	
              <div className="row">	
                <div className="col-lg-10 offset-lg-1">
                  <div className="section-title text-center mb-60">	
                  <p>{testimonials.tag}</p>	
                    {/* Title */}	
                    <h2 className="h2-md">{testimonials.title}</h2>	
                    {/* Text */}	
                    {/* <p className="p-xl">Our Team is as vibrating and diversified as your urban life. */}
                    {/* </p> */}
                  </div>	
                </div>
              </div>
              {/* TESTIMONIALS CONTENT */}
              <div className="row">
                <div className="col-md-12">					
                  <div className="owl-carousel owl-theme reviews-1-wrapper">
                    {Testimonial.map(({title, desc, name, image}, idx) => (
                      <>
                    {/* TESTIMONIAL #1 */}
                    <div className="review-1 radius-08" key={idx}>
                      {/* App Rating */}
                      {/* <div className="app-rating ico-20 yellow-color">
                        <span className="flaticon-star" />
                        <span className="flaticon-star" />
                        <span className="flaticon-star" />
                        <span className="flaticon-star" />
                        <span className="flaticon-star" />
                      </div> */}
                      <div style={{         
                        width: '50px',
                        marginInline: 'auto',
                        padding: 3,
                      }}>
                      <img src={image} style={{
                        borderRadius: '100%'
                      }} />
                      </div>
                      {/* Title */}
                      <h5 className="h5-sm">{title}</h5>
                      {/* Testimonial Text */}
                      <div className="review-1-txt">
                        {/* Text */}
                        <p className="p-lg grey-color">{desc}				   
                        </p>
                        {/* Testimonial Author */}
                        <h5 className="h5-xs">{name}</h5>	
                      </div>	
                    </div>	{/* END TESTIMONIAL #1 */}
                      </>
                    ))}
                  </div>
                </div>									
              </div>
            </div>     {/* End container */}
          </section>	{/* END TESTIMONIALS-1 */}
          {/* CONTENT-2
			============================================= */}
          <section id="content-2" className="wide-50 content-section division">
            <div className="container">
              <div className="row d-flex align-items-center">
                {/* IMAGE BLOCK */}
                <div className="col-md-5 col-lg-6">
                  <div className="img-block left-column pc-20 mb-40 wow fadeInRight" data-wow-delay="0.6s">
                    <img className="img-fluid" src="assets/images/about-annouce.jpg" alt="content-image" />
                  </div>
                </div>
                {/* TEXT BLOCK */}	
                <div className="col-md-7 col-lg-6">
                  <div className="txt-block right-column mb-40 wow fadeInLeft" data-wow-delay="0.6s">
                    {/* Section ID */}	
                    <span className="section-id grey-color">{valueInfo.id}</span>
                    <div>
                    {/* Title */}	
                    <h3 className="h2-xs">{valueInfo.title1}</h3>
                    {/* Text */}	
                    <p className="p-lg">{valueInfo.text1}</p>
                    </div>
                    <div>
                    {/* Title */}	
                    <h3 className="h2-xs">{valueInfo.title2}</h3>
                    {/* Text */}	
                    <p className="p-lg">{valueInfo.text2}</p>
                    </div>
                    <div>
                    {/* Title */}	
                    <h3 className="h2-xs">{valueInfo.title3}</h3>
                    {/* Text */}	
                    <p className="p-lg">{valueInfo.text3}</p>
                    </div>
                  </div>
                </div>	{/* END TEXT BLOCK */}	
              </div>	   {/* End row */}
            </div>	   {/* End container */}
          </section>	{/* END CONTENT-2 */}
          {/* SECTION DIVIDER
			============================================= */}
          <div className="divider-wrapper text-center"><div className="section-divider" /></div>
          {/* TEAM-1
			============================================= */}
          <section id="team-1" className="wide-60 team-section division">
            <div className="container">
              {/* SECTION TITLE */}	
              <div className="row">	
                <div className="col-lg-10 offset-lg-1">
                  <div className="section-title text-center mb-70">		
                    {/* Title */}	
                    <h2 className="h2-md">{team.tag}</h2>	
                    {/* Text */}	
                    <p className="p-xl">{team.title}</p>
                  </div>	
                </div>
              </div>
              {/* TEAM MEMBERS HOLDER */}	
              <div className="team-members-holder pc-20 text-center">
                <div className="row justify-content-center">
                  {Testimonial.map(({name, title, image, link: {domain, href}}, idx) => (
                    <>
                    {/* TEAM MEMBER #1 */}
                    <div className="col-sm-6 col-lg-3" key={idx}>
                      <div className="team-member wow fadeInUp" data-wow-delay="0.4s">
                        {/* Team Member Photo */}
                        <div className="team-member-photo pc-10">
                          <img className="img-fluid" src={image} alt="team-member-photo" />
                        </div>
                        {/* Team Member Data */}		
                        <div className="team-member-data">	
                          <h5 className="h5-sm">{name}</h5>
                          <p>{title}</p>
                          <span><a href={href} className="grey-color">@{domain}</a></span>
                        </div>	
                      </div>									
                    </div>	
                    {/* END TEAM MEMBER #1 */}
                    </>
                  ))}
                </div>   {/* End row */}
              </div>	{/* TEAM MEMBERS HOLDER */}	   
            </div>	    {/* End container */}
          </section>	{/* END TEAM-1 */}
          {/* NEWSLETTER-1
			============================================= */}
          <section id="newsletter-1" className="pb-20 newsletter-section division">
            <div className="container">
              <div className="newsletter-wrapper bg-white">
                <div className="row d-flex align-items-center">
                  {/* SECTION TITLE */}	
                  <div className="col-lg-6">
                    <div className="newsletter-txt">	
                      {/* Section ID */}	
                      <span className="section-id">{newsletter.tag}</span>
                      {/* Title */}	
                      <h4 className="h4-xl">{newsletter.title}</h4>	
                    </div>								
                  </div>
                  {/* NEWSLETTER FORM */}
                  <div className="col-lg-6">
                    <form className="newsletter-form">
                      <div className="input-group">
                        <input type="email" autoComplete="off" className="form-control" placeholder="Your email address" required id="s-email" />								
                        <span className="input-group-btn">
                          <button type="submit" className="btn btn-md btn-skyblue tra-skyblue-hover">{newsletter.cta}</button>
                        </span>										
                      </div>
                      {/* Newsletter Form Notification */}	
                      <label htmlFor="s-email" className="form-notification" />
                    </form>							
                  </div>	  {/* END NEWSLETTER FORM */}
                </div>	  {/* End row */}
              </div>    {/* End newsletter-holder */}
            </div>	   {/* End container */}	
          </section>	{/* END NEWSLETTER-1 */}
         
        </div>	{/* END PAGE CONTENT */}
            </div>
        )
    }
}
export default About 

// PAGE TEXT/CONTENT VARIABLES

//Hero Section
let heroInfo = {
  title: {
    normal: 'No, we are ', //leave a space after writing for proper indentation
    bold: 'not just another travel app.'
  }, 
  desc: "Float is a global Start Up working on improving everyone’s city life."
}

// About Section
let aboutDesc = {
  upperSection: {
    title: "With AI and other unique technology we want to help and encourage people to improve their travel behavior for the better. Whether you want to save time, save money, reduce your carbon footprint, look for great deals or just explore your hood - we’ve got you covered.",
    vision: {
      title: 'OUR VISION',
      text: "Improve quality of life for the world's population by building the future global transportation platform. Increasing accessibility and personal choices, while reducing travel time, traffic congestion, pollution, and loss to local GDP."
    },
    mission: {
      title: "OUR MISSION",
      text: "We empower travelers to move easier and faster by analyzing their past trips, with traffic and external factors - allowing them to customize travel and receive rewards for sharing their data for the greater good."
    }
  },
  lowerSection: {
    caption: {
      first: "MADE FOR YOU",
      second: "Created for urbanists"
    },
    left: {
      first: "A classic day in your urban life:",
      second: "You drive to work, drive to the store, maybe drive your kids to school, drive back home, meet some friends if there is little time left. Distances are so vast, it takes forever to get anywhere and there’s little chance for spontaneity and diversity in daily routines - Vibrating urban Citylife is just passing you by."
    },
    right: "You are interested in public infrastructure and promote eco-friendly alternatives - however keeping track of what is the fastest, cheapest and greenest way to get somewhere isn’t easily done while being in a rush. We feel you - we are here to support you with by finding a better way to go."
  },
  cta: "Read the Reviews"
}

// Testimonials Section
let testimonials = {
  tag: 'MADE FOR US',
  title:'Created from urbanists'
}

// Values Section
let valueInfo = {
  id: 'Values',
  title1: 'Put the User first',
  text1: 'We are fully independent. We will only show you recommendations, tips, and deals customized for you.',
  title2: 'Together is Better',
  text2: 'AI and personal behavior are better together. Together we can make better decisions.',
  title3: 'There is no planet B',
  text3: 'There are more and more green alternatives especially in transportation we want to encourage everyone to use these.'
}

// Brand Section
let brands = 'You might know Float from:'

// Team Section
let team = {
  tag: 'One Team Many Talents',
  title: 'Our Team is as vibrating and diversified as your urban life.',
}

// Newsletter Section
let newsletter = {
  tag: 'Subscribe to Our Newsletter',
  title: 'Stay up to date with our news, ideas and updates',
  cta: 'Subscribe Now'
}