|
|
@@ -1,25 +1,361 @@
|
|
|
-import logo from './logo.svg';
|
|
|
import './App.css';
|
|
|
|
|
|
+const Wrapper = ({children}) =>
|
|
|
+<div className='body'>
|
|
|
+ <div id='wrapper'>
|
|
|
+ {children}
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+const MainText = ({title, text='In this space market-facing, yet UI work flows , or bake it in. Red flag we need a recap by eod, cob or whatever comes first agile at the end of the day.'}) =>
|
|
|
+<div class="text">
|
|
|
+ <h2 class="title">{title}</h2>
|
|
|
+ <p>{text}</p>
|
|
|
+</div>
|
|
|
+
|
|
|
+const StatisticsBlock = ({number, title}) =>
|
|
|
+<div class="statistic-block">
|
|
|
+ <span class="number">{number}</span>
|
|
|
+ <span>{title}</span>
|
|
|
+</div>
|
|
|
+
|
|
|
+const ApartmentCard = ({address='Random Street, Apt B453, New York', price=3500 , ba=2, bd=2}) =>
|
|
|
+<div class="card">
|
|
|
+ <a href="#">
|
|
|
+ <div class="card-top">
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ <div class="card-bottom">
|
|
|
+ <a href="#">
|
|
|
+ <p class="address">
|
|
|
+ {address}
|
|
|
+ </p>
|
|
|
+ </a>
|
|
|
+ <div class="price">
|
|
|
+ <span class="number">${price}</span>
|
|
|
+ <div>
|
|
|
+ <span class="ba">{ba} BA</span>
|
|
|
+ <span class="bd">{bd} BD</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+const HowCard = ({number, title, text='In this space market-facing, yet UI work flows , or bake it in. Red flag we neef the day.', url='#', button}) =>
|
|
|
+<div class="card">
|
|
|
+ <div class="number">
|
|
|
+ {number}
|
|
|
+ </div>
|
|
|
+ <div class="main-part">
|
|
|
+ <h4 class="card-title">{title}</h4>
|
|
|
+ <p>{text}</p>
|
|
|
+ <a class="card-link" href={url}>{button}</a>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+const ServicesItem = ({title, text='In this space market-facing, yet UI work flows , or bake it in. Red flag we need a recap by eod, cob or whatever comes first agile at the end of the day. Not enough bandwidth closing these latest prospects is like putting socks on an octopus, yet due diligence'}) =>
|
|
|
+<li class="services-item">
|
|
|
+ <h3 class="services-title">{title}</h3>
|
|
|
+ <p class="services-text">{text}</p>
|
|
|
+</li>
|
|
|
+
|
|
|
+const AgentCard = ({agentName='Mr. Luke Skywalker', socialMedia1='fb', socialMedia2='tw', socialMedia3='net'}) =>
|
|
|
+<div class="card">
|
|
|
+ <div class="card-top">
|
|
|
+ <a class="img-link" href="#"></a>
|
|
|
+ </div>
|
|
|
+ <div class="card-bottom">
|
|
|
+ <span class="card-title">Agent</span>
|
|
|
+ <div class="social">
|
|
|
+ <a class="agent-link" href="#">{agentName}</a>
|
|
|
+ <div class="social-links">
|
|
|
+ <a class="fb" href="#">{socialMedia1}</a>
|
|
|
+ <a class="twi" href="#">{socialMedia2}</a>
|
|
|
+ <a class="net" href="#">{socialMedia3}</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+const RowAdd = ({children, title='Super Awesome Add', text='In this space market-facing, yet UI work flows , or bake it in. Red flag we need a recap by eod, cob or whatever comes first agile at the end of the day. Not enough bandwidth closing these latest prospects is like putting socks on an octopus, yet due diligence'}) =>
|
|
|
+<div class="row">
|
|
|
+ <div class="img">
|
|
|
+ {children}
|
|
|
+ </div>
|
|
|
+ <div class="text">
|
|
|
+ <h3 class="row-title">{title}</h3>
|
|
|
+ <p>
|
|
|
+ {text}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+const AddAddress = ({url='https://www.google.com/maps/place/%D0%9C%D0%B5%D0%BB%D1%8C%D0%B1%D1%83%D1%80%D0%BD+%D0%92%D0%B8%D0%BA%D1%82%D0%BE%D1%80%D0%B8%D1%8F,+%D0%90%D0%B2%D1%81%D1%82%D1%80%D0%B0%D0%BB%D0%B8%D1%8F/@-37.9716913,144.7722771,10z/data=!3m1!4b1!4m5!3m4!1s0x6ad646b5d2ba4df7:0x4045675218ccd90!8m2!3d-37.8136276!4d144.9630576', address='Melbourne, Australia'}) =>
|
|
|
+<ul class="contacts-list">
|
|
|
+ <li>
|
|
|
+ <a class="address"
|
|
|
+ href={url}>{address}</a>
|
|
|
+ </li>
|
|
|
+</ul>
|
|
|
+
|
|
|
+const FooterList = ({title, li1, li2, li3, li4}) =>
|
|
|
+<div class="footer-list-wrap">
|
|
|
+ <h4 class="footer-list-title">{title}</h4>
|
|
|
+ <ul class="footer-list">
|
|
|
+ <li class="footer-list-item">
|
|
|
+ <a href="#">{li1}</a>
|
|
|
+ </li>
|
|
|
+ <li class="footer-list-item">
|
|
|
+ <a href="#">{li2}</a>
|
|
|
+ </li>
|
|
|
+ <li class="footer-list-item">
|
|
|
+ <a href="#">{li3}</a>
|
|
|
+ </li>
|
|
|
+ <li class="footer-list-item">
|
|
|
+ <a href="#">{li4}</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+</div>
|
|
|
+
|
|
|
function App() {
|
|
|
return (
|
|
|
- <div className="App">
|
|
|
- <header className="App-header">
|
|
|
- <img src={logo} className="App-logo" alt="logo" />
|
|
|
- <p>
|
|
|
- Edit <code>src/App.js</code> and save to reload.
|
|
|
- </p>
|
|
|
- <a
|
|
|
- className="App-link"
|
|
|
- href="https://reactjs.org"
|
|
|
- target="_blank"
|
|
|
- rel="noopener noreferrer"
|
|
|
- >
|
|
|
- Learn React
|
|
|
- </a>
|
|
|
- </header>
|
|
|
- </div>
|
|
|
+ <Wrapper>
|
|
|
+ <header class="header">
|
|
|
+ <div class="container">
|
|
|
+ <div class="header-box">
|
|
|
+ <div class="header-logo">
|
|
|
+ <a href="#" class="logo">
|
|
|
+ <img src="img/luxestate.png" alt="luxestate" />
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <div class="header-nav">
|
|
|
+ <div class="header-login">
|
|
|
+ <ul class="login-list">
|
|
|
+ <li>
|
|
|
+ <a href="#">Join Us</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a class="btn" href="#">Getting Started</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <nav class="nav hamburger-menu">
|
|
|
+ <input id="menu__toggle" type="checkbox" />
|
|
|
+ <label class="menu__btn" for="menu__toggle">
|
|
|
+ <span></span>
|
|
|
+ </label>
|
|
|
+ <ul class="nav-list">
|
|
|
+ <li>
|
|
|
+ <a href="#">About</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Apartments</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">How It Work</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Agents</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Contact Us</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </nav>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </header>
|
|
|
+
|
|
|
+ <main class="main">
|
|
|
+ <section class="section-banner">
|
|
|
+ <div class="container">
|
|
|
+ <div class="banner-wrap">
|
|
|
+ <a href="#our" class="link-down">Scroll Down
|
|
|
+ </a>
|
|
|
+ <div class="banner-top">
|
|
|
+ <h1 class="main-title">Find Your New Modern Apartment
|
|
|
+ </h1>
|
|
|
+ <form action="#">
|
|
|
+ <div class="form-group">
|
|
|
+ <input type="search" placeholder="Search locations" />
|
|
|
+ <button class="btn" type="submit">Search</button>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ <div class="banner-bottom">
|
|
|
+ <ul class="contacts-list">
|
|
|
+ <li>
|
|
|
+ <a class="phone" href="tel:+0001234567">(000) 123-4567</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a class="address"
|
|
|
+ href="https://www.google.com/maps/place/%D0%9C%D0%B5%D0%BB%D1%8C%D0%B1%D1%83%D1%80%D0%BD+%D0%92%D0%B8%D0%BA%D1%82%D0%BE%D1%80%D0%B8%D1%8F,+%D0%90%D0%B2%D1%81%D1%82%D1%80%D0%B0%D0%BB%D0%B8%D1%8F/@-37.9716913,144.7722771,10z/data=!3m1!4b1!4m5!3m4!1s0x6ad646b5d2ba4df7:0x4045675218ccd90!8m2!3d-37.8136276!4d144.9630576">Melbourne,
|
|
|
+ Australia</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="section-statistics" id="our">
|
|
|
+ <div class="container">
|
|
|
+ <div class="statistics-wrap">
|
|
|
+ <div class="statistics-text">
|
|
|
+ <h2 class="title">
|
|
|
+ Our Company’s <br />
|
|
|
+ Statistics
|
|
|
+ </h2>
|
|
|
+ <p>
|
|
|
+ In this space market-facing, yet UI work flows, or bake it in. Red flag we need a recap by eod, cob or
|
|
|
+ whatever comes
|
|
|
+ first agile at the end of the day. Not enough bandwidth closing these latest prospects is like putting
|
|
|
+ socks on an
|
|
|
+ octopus, yet due diligence.
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ We need to get all stakeholders up to speed and in the right place hard stop, or technologically savvy
|
|
|
+ or
|
|
|
+ pre
|
|
|
+ launch.
|
|
|
+ Pro-sumer software commitment to the cause offline this discussion and wiggle room blue sky. Beef up
|
|
|
+ teams
|
|
|
+ were able to
|
|
|
+ drive adoption and awareness. Screw the pooch killing it.
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="statistic-blocks">
|
|
|
+ <StatisticsBlock number='748' title='Apartments' />
|
|
|
+ <StatisticsBlock number='3854' title='Clients' />
|
|
|
+ <StatisticsBlock number='24' title='Employees' />
|
|
|
+ <StatisticsBlock number='14' title='Awards' />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="section-apartments">
|
|
|
+ <div class="container">
|
|
|
+ <div class="apartments-wrap">
|
|
|
+ <h2 class="title">
|
|
|
+ More Than 500+
|
|
|
+ Apartments For Rent
|
|
|
+ </h2>
|
|
|
+ <div class="card-box">
|
|
|
+ <ApartmentCard />
|
|
|
+ <ApartmentCard />
|
|
|
+ <ApartmentCard />
|
|
|
+ <ApartmentCard />
|
|
|
+ <ApartmentCard />
|
|
|
+ <ApartmentCard />
|
|
|
+ </div>
|
|
|
+ <div class="buttons">
|
|
|
+ <form action="#">
|
|
|
+ <div class="form-group">
|
|
|
+ <input type="search" placeholder="Search locations" />
|
|
|
+ <button class="btn" type="submit">Search</button>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ <a class="view-btn" href="#">View All Apartments</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="section-how-it-works">
|
|
|
+ <div class="container">
|
|
|
+ <div class="how-it-works-wrap">
|
|
|
+ <MainText title="How it works?" />
|
|
|
+ <div class="cards-box">
|
|
|
+ <HowCard number='01' title='Find Your Location' button='Find Location'/>
|
|
|
+ <HowCard number='02' title='Find Apartment' button='Find Apartment'/>
|
|
|
+ <HowCard number='03' title='Make Contact' button='Make Contact'/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="section-services">
|
|
|
+ <div class="container">
|
|
|
+ <MainText title="Services" />
|
|
|
+ <div class="helper">
|
|
|
+ <div class="img">
|
|
|
+ </div>
|
|
|
+ <ul class="services-list">
|
|
|
+ <ServicesItem title='Renting' />
|
|
|
+ <ServicesItem title='Selling' />
|
|
|
+ <ServicesItem title='Building' />
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="section-agents">
|
|
|
+ <div class="container">
|
|
|
+ <div class="agents-wrap">
|
|
|
+ <MainText title="Meet Our Agents" />
|
|
|
+ <div class="cards-box">
|
|
|
+ <AgentCard />
|
|
|
+ <AgentCard />
|
|
|
+ <AgentCard />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="section-add">
|
|
|
+ <div class="container">
|
|
|
+ <RowAdd>
|
|
|
+ <AddAddress />
|
|
|
+ </RowAdd>
|
|
|
+ <RowAdd>
|
|
|
+ <AddAddress />
|
|
|
+ </RowAdd>
|
|
|
+ <RowAdd />
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ </main>
|
|
|
+
|
|
|
+ <footer class="footer">
|
|
|
+ <div class="container">
|
|
|
+ <div class="footer-wrap">
|
|
|
+ <div class="footer-top">
|
|
|
+ <div class="footer-slogan">
|
|
|
+ <span>luxestate</span>
|
|
|
+ <span>Explore Real Estate</span>
|
|
|
+ </div>
|
|
|
+ <form action="#">
|
|
|
+ <div class="form-group">
|
|
|
+ <input type="text" placeholder="Subscribe To Our Newsletter" />
|
|
|
+ <button class="btn" type="submit">Submit</button>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="footer-bottom">
|
|
|
+ <div class="copyright-info">
|
|
|
+ <div class="footer-logo">
|
|
|
+ <a href="#" class="logo">
|
|
|
+ <img src="img/luxestate-white.png" alt="luxestate" />
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <span class="copyright">
|
|
|
+ © 2019 - luxestate, All Right Reserved
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <FooterList title="luxestate" li1='Agents' li2='Hunters' />
|
|
|
+ <FooterList title="company" li1='About' li2='FAQ' li3='Contact' li4="Social" />
|
|
|
+ <FooterList title="product" li1='Apartments' li2='How It Works' />
|
|
|
+ <FooterList title="services" li1='Renting' li2='Selling' li3='Building' />
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </footer>
|
|
|
+ </Wrapper>
|
|
|
);
|
|
|
}
|
|
|
|
|
|
-export default App;
|
|
|
+export default App;
|
