Skip to content

A
Aqbits Trace Code
Commit 850d7b56 authored by Vinh's avatar Vinh
Browse files
Options

create detail profile page

parent 75165956
Show whitespace changes
Inline Side-by-side
Showing with 1000 additions and 35 deletions
src/index.js
View file @ 850d7b56
...@@ -29,6 +29,8 @@ import Login from "views/examples/Login.js"; ...@@ -29,6 +29,8 @@ import Login from "views/examples/Login.js";
import Profile from "views/examples/Profile.js"; import Profile from "views/examples/Profile.js";
import Register from "views/examples/Register.js"; import Register from "views/examples/Register.js";
import Tracecode from "views/examples/Tracecode.js" import Tracecode from "views/examples/Tracecode.js"
import DetailProfile from "views/examples/DetailProfile.js"
import { Routes } from "./reoutes";
ReactDOM.render( ReactDOM.render(
<BrowserRouter> <BrowserRouter>
...@@ -39,6 +41,11 @@ ReactDOM.render( ...@@ -39,6 +41,11 @@ ReactDOM.render(
exact exact
render={props => <Tracecode {...props} />} render={props => <Tracecode {...props} />}
/> />
<Route
path={'/profile/detail'}
exact
render={props => <DetailProfile {...props} />}
/>
<Route <Route
path="/landing-page" path="/landing-page"
exact exact
......
src/reoutes.js 0 → 100644
View file @ 850d7b56
export const Routes = {
SearchDetail: { path: "./profile"},
TraceCode: { path: "./trace-code"}
}
\ No newline at end of file
src/views/Index.js
View file @ 850d7b56
...@@ -60,6 +60,7 @@ class Index extends React.Component { ...@@ -60,6 +60,7 @@ class Index extends React.Component {
<Hero /> <Hero />
<section className="section"> <section className="section">
<Container> <Container>
<Inputs />
</Container> </Container>
</section> </section>
</main> </main>
......
src/views/IndexSections/Inputs.js
View file @ 850d7b56
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/ */
import React from "react"; import React, { useState, useEffect } from "react";
// nodejs library that concatenates classes // nodejs library that concatenates classes
import classnames from "classnames"; import classnames from "classnames";
// reactstrap components // reactstrap components
...@@ -27,32 +27,61 @@ import { ...@@ -27,32 +27,61 @@ import {
InputGroup, InputGroup,
Container, Container,
Row, Row,
Col Col,
Button,
Form
} from "reactstrap"; } from "reactstrap";
import { useHistory } from 'react-router-dom';
import dummyData from "../../data/index.json";
import { Routes } from "../../reoutes";
const Inputs = () => {
const [searchProfile, setSearchProfile] = useState();
const history = useHistory();
const handleChangeSearch = (event) => {
console.log("change change");
setSearchProfile(event.target.value);
}
const onHandleSearch = () => {
console.log("dummyData.data", dummyData.data);
const nameCode = dummyData.data.map(item => item.code);
console.log("nameCode", nameCode);
if(searchProfile === nameCode){
history.push({
pathname: Routes.SearchProfile.path + `${searchProfile}`,
state: { code_name: searchProfile }
});
}else {
history.push("");
}
console.log("this.state.searchProfile", searchProfile);
}
class Inputs extends React.Component {
state = {};
render() {
return ( return (
<> <>
<section className="section pb-0 section-components"> <section className="section pb-0 section-components">
<Container className="mb-5"> <Container className="mb-5">
{/* Inputs */} {/* Inputs */}
<h3 className="h4 text-success font-weight-bold mb-4">Inputs</h3> <h3 className="h4 text-success font-weight-bold mb-4">Search profile</h3>
<div className="mb-3"> {/* <div className="mb-3">
<small className="text-uppercase font-weight-bold"> <small className="text-uppercase font-weight-bold">
Form controls Form controls
</small> </small>
</div> </div> */}
<Row> <Row>
<Col lg="4" sm="6"> <Col lg="4" sm="6">
<FormGroup> {/* <FormGroup>
<Input placeholder="Regular" type="text" /> <Input placeholder="Regular" type="text" />
</FormGroup> </FormGroup> */}
<FormGroup <FormGroup
className={classnames({ // className={classnames({
focused: this.state.searchFocused // focused: this.state.searchFocused
})} // })}
> >
<InputGroup className="mb-4"> <InputGroup className="mb-4">
<InputGroupAddon addonType="prepend"> <InputGroupAddon addonType="prepend">
...@@ -63,13 +92,20 @@ class Inputs extends React.Component { ...@@ -63,13 +92,20 @@ class Inputs extends React.Component {
<Input <Input
placeholder="Search" placeholder="Search"
type="text" type="text"
onFocus={e => this.setState({ searchFocused: true })} // onFocus={e => this.setState({ searchFocused: true })}
onBlur={e => this.setState({ searchFocused: false })} // onBlur={e => this.setState({ searchFocused: false })}
value={searchProfile}
onChange={handleChangeSearch}
/> />
</InputGroup> </InputGroup>
</FormGroup> </FormGroup>
<Button className="btn-1" color="primary" type="button" onClick={onHandleSearch} >
Search
</Button>
</Col> </Col>
<Col lg="4" sm="6">
{/* <Col lg="4" sm="6">
<FormGroup> <FormGroup>
<Input disabled placeholder="Regular" type="text" /> <Input disabled placeholder="Regular" type="text" />
</FormGroup> </FormGroup>
...@@ -108,12 +144,12 @@ class Inputs extends React.Component { ...@@ -108,12 +144,12 @@ class Inputs extends React.Component {
type="email" type="email"
/> />
</FormGroup> </FormGroup>
</Col> </Col> */}
</Row> </Row>
</Container> </Container>
<div className="py-5 bg-secondary"> {/* <div className="py-5 bg-secondary">
<Container> <Container>
{/* Inputs (alternative) */} Inputs (alternative)
<div className="mb-3"> <div className="mb-3">
<small className="text-uppercase font-weight-bold"> <small className="text-uppercase font-weight-bold">
Form controls (alternative) Form controls (alternative)
...@@ -199,11 +235,10 @@ class Inputs extends React.Component { ...@@ -199,11 +235,10 @@ class Inputs extends React.Component {
</Col> </Col>
</Row> </Row>
</Container> </Container>
</div> </div> */}
</section> </section>
</> </>
); );
}
} }
export default Inputs; export default Inputs;
src/views/examples/DetailProfile.js 0 → 100644
View file @ 850d7b56
/*!
=========================================================
* Argon Design System React - v1.1.0
=========================================================
* Product Page: https://www.creative-tim.com/product/argon-design-system-react
* Copyright 2020 Creative Tim (https://www.creative-tim.com)
* Licensed under MIT (https://github.com/creativetimofficial/argon-design-system-react/blob/master/LICENSE.md)
* Coded by Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
import React from "react";
// nodejs library that concatenates classes
import classnames from "classnames";
// reactstrap components
import {
Badge,
Button,
Card,
CardBody,
CardImg,
FormGroup,
Input,
InputGroupAddon,
InputGroupText,
InputGroup,
Container,
Row,
Col
} from "reactstrap";
import { useHistory } from 'react-router-dom';
import { Routes } from '../../reoutes';
// core components
import DemoNavbar from "components/Navbars/DemoNavbar.js";
import CardsFooter from "components/Footers/CardsFooter.js";
import dummyData from "data/index.json";
// index page sections
import Download from "../IndexSections/Download.js";
class DetailProfile extends React.Component {
state = {};
componentDidMount() {
document.documentElement.scrollTop = 0;
document.scrollingElement.scrollTop = 0;
this.refs.main.scrollTop = 0;
}
render() {
// const history = useHistory();
return (
<>
<DemoNavbar />
<main ref="main">
<div className="position-relative">
{/* shape Hero */}
<section className="section section-lg section-shaped pb-250">
<div className="shape shape-style-1 shape-default">
<span />
<span />
<span />
<span />
<span />
<span />
<span />
<span />
<span />
</div>
<Container className="py-lg-md d-flex">
<div className="col px-0">
<h3 className="h4 text-center font-weight-bold mb-4">Search profile</h3>
{/* <Row>
<Col lg="6">
<h1 className="display-3 text-white">
A beautiful Design System{" "}
<span>completed with examples</span>
</h1>
<p className="lead text-white">
The design system comes with four pre-built pages to
help you get started faster. You can change the text and
images and you're good to go.
</p>
<div className="btn-wrapper">
<Button
className="btn-icon mb-3 mb-sm-0"
color="info"
href="https://demos.creative-tim.com/argon-design-system-react/#/documentation/alerts?ref=adsr-landing-page"
>
<span className="btn-inner--icon mr-1">
<i className="fa fa-code" />
</span>
<span className="btn-inner--text">Components</span>
</Button>
<Button
className="btn-white btn-icon mb-3 mb-sm-0 ml-1"
color="default"
href="https://www.creative-tim.com/product/argon-design-system-react?ref=adsr-landing-page"
>
<span className="btn-inner--icon mr-1">
<i className="ni ni-cloud-download-95" />
</span>
<span className="btn-inner--text">
Download React
</span>
</Button>
</div>
</Col>
</Row> */}
</div>
</Container>
{/* SVG separator */}
<div className="separator separator-bottom separator-skew">
<svg
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
version="1.1"
viewBox="0 0 2560 100"
x="0"
y="0"
>
<polygon
className="fill-white"
points="2560 0 2560 100 0 100"
/>
</svg>
</div>
</section>
{/* 1st Hero Variation */}
</div>
{/* <section className="section section-lg pt-lg-0 mt--200">
<Container>
<Row className="justify-content-center">
<Col lg="12">
<Row className="row-grid">
<Col lg="4">
<Card className="card-lift--hover shadow border-0">
<CardBody className="py-5">
<div className="icon icon-shape icon-shape-primary rounded-circle mb-4">
<i className="ni ni-check-bold" />
</div>
<h6 className="text-primary text-uppercase">
Download Argon
</h6>
<p className="description mt-3">
Argon is a great free UI package based on Bootstrap
4 that includes the most important components and
features.
</p>
<div>
<Badge color="primary" pill className="mr-1">
design
</Badge>
<Badge color="primary" pill className="mr-1">
system
</Badge>
<Badge color="primary" pill className="mr-1">
creative
</Badge>
</div>
<Button
className="mt-4"
color="primary"
href="#pablo"
onClick={e => e.preventDefault()}
>
Learn more
</Button>
</CardBody>
</Card>
</Col>
<Col lg="4">
<Card className="card-lift--hover shadow border-0">
<CardBody className="py-5">
<div className="icon icon-shape icon-shape-success rounded-circle mb-4">
<i className="ni ni-istanbul" />
</div>
<h6 className="text-success text-uppercase">
Build Something
</h6>
<p className="description mt-3">
Argon is a great free UI package based on Bootstrap
4 that includes the most important components and
features.
</p>
<div>
<Badge color="success" pill className="mr-1">
business
</Badge>
<Badge color="success" pill className="mr-1">
vision
</Badge>
<Badge color="success" pill className="mr-1">
success
</Badge>
</div>
<Button
className="mt-4"
color="success"
href="#pablo"
onClick={e => e.preventDefault()}
>
Learn more
</Button>
</CardBody>
</Card>
</Col>
<Col lg="4">
<Card className="card-lift--hover shadow border-0">
<CardBody className="py-5">
<div className="icon icon-shape icon-shape-warning rounded-circle mb-4">
<i className="ni ni-planet" />
</div>
<h6 className="text-warning text-uppercase">
Prepare Launch
</h6>
<p className="description mt-3">
Argon is a great free UI package based on Bootstrap
4 that includes the most important components and
features.
</p>
<div>
<Badge color="warning" pill className="mr-1">
marketing
</Badge>
<Badge color="warning" pill className="mr-1">
product
</Badge>
<Badge color="warning" pill className="mr-1">
launch
</Badge>
</div>
<Button
className="mt-4"
color="warning"
href="#pablo"
onClick={e => e.preventDefault()}
>
Learn more
</Button>
</CardBody>
</Card>
</Col>
</Row>
</Col>
</Row>
</Container>
</section> */}
{/* <section className="section section-lg">
<Container>
<Row className="row-grid align-items-center">
<Col className="order-md-2" md="6">
<img
alt="..."
className="img-fluid floating"
src={require("assets/img/theme/promo-1.png")}
/>
</Col>
<Col className="order-md-1" md="6">
<div className="pr-md-5">
<div className="icon icon-lg icon-shape icon-shape-success shadow rounded-circle mb-5">
<i className="ni ni-settings-gear-65" />
</div>
<h3>Awesome features</h3>
<p>
The kit comes with three pre-built pages to help you get
started faster. You can change the text and images and
you're good to go.
</p>
<ul className="list-unstyled mt-5">
<li className="py-2">
<div className="d-flex align-items-center">
<div>
<Badge
className="badge-circle mr-3"
color="success"
>
<i className="ni ni-settings-gear-65" />
</Badge>
</div>
<div>
<h6 className="mb-0">
Carefully crafted components
</h6>
</div>
</div>
</li>
<li className="py-2">
<div className="d-flex align-items-center">
<div>
<Badge
className="badge-circle mr-3"
color="success"
>
<i className="ni ni-html5" />
</Badge>
</div>
<div>
<h6 className="mb-0">Amazing page examples</h6>
</div>
</div>
</li>
<li className="py-2">
<div className="d-flex align-items-center">
<div>
<Badge
className="badge-circle mr-3"
color="success"
>
<i className="ni ni-satisfied" />
</Badge>
</div>
<div>
<h6 className="mb-0">
Super friendly support team
</h6>
</div>
</div>
</li>
</ul>
</div>
</Col>
</Row>
</Container>
</section> */}
<section className="section bg-secondary">
{dummyData.data && dummyData.data.length > 0 ?
dummyData.data.map((data, key) => {
return (
<Container>
<Row className="row-grid align-items-center">
<Col md="6">
<Card className="bg-default shadow border-0">
<CardImg
alt="..."
src={window.location.origin + data.logo}
top
/>
{/* <blockquote className="card-blockquote">
<svg
xmlns="http://www.w3.org/2000/svg"
className="svg-bg"
preserveAspectRatio="none"
viewBox="0 0 583 95"
>
<polygon
className="fill-default"
points="0,52 583,95 0,95"
/>
<polygon
className="fill-default"
opacity=".2"
points="0,42 583,95 683,0 0,95"
/>
</svg>
<h4 className="display-3 font-weight-bold text-white">
Design System
</h4>
<p className="lead text-italic text-white">
The Arctic Ocean freezes every winter and much of the
sea-ice then thaws every summer, and that process will
continue whatever happens.
</p>
</blockquote> */}
</Card>
</Col>
<Col md="6">
<div className="pl-md-5">
{/* <div className="icon icon-lg icon-shape icon-shape-warning shadow rounded-circle mb-5">
<i className="ni ni-settings" />
</div> */}
<h3>{data.name}</h3>
<div className="mb-3">
<div className="h5">Số điện thoại</div>
<div>{data.phone_number}</div>
</div>
<div className="mb-3">
<div className="h5">Địa chỉ</div>
<div>{data.address}</div>
</div>
<div className="mb-3">
<div className="h5">Sản phẩm</div>
<div>{data.profile_product && data.profile_product.length > 0 ? data.profile_product.map(product => {
const onHandleTraceCode = () => {
// history.push({
// pathname: Routes.TraceCode.path + `/${product.trace_code}`,
// state: { product }
// });
}
return (
<>
<div className="mb-3">{product.name}</div>
<div>
<Row>
<Col>
<img className="mb-3" src={window.location.origin + product.image} alt="product" onClick={onHandleTraceCode} />
</Col>
<Col>
<img src={window.location.origin + data.qr_code} alt="qrcode" />
</Col>
</Row>
</div>
<div>
<div className="h5">Mô tả</div>
<div>{product.description}</div>
</div>
</>
);
}) : null}</div>
</div>
{/* <p className="lead">
Don't let your uses guess by attaching tooltips and
popoves to any element. Just make sure you enable them
first via JavaScript.
</p>
<p>
The kit comes with three pre-built pages to help you get
started faster. You can change the text and images and
you're good to go.
</p>
<p>
The kit comes with three pre-built pages to help you get
started faster. You can change the text and images and
you're good to go.
</p>
<a
className="font-weight-bold text-warning mt-5"
href="#pablo"
onClick={e => e.preventDefault()}
>
A beautiful UI Kit for impactful websites
</a> */}
</div>
</Col>
</Row>
</Container>
);
}) : <div className="h4 font-weight-bold">Not found profile</div>
}
</section>
{/* <section className="section pb-0 bg-gradient-warning">
<Container>
<Row className="row-grid align-items-center">
<Col className="order-lg-2 ml-lg-auto" md="6">
<div className="position-relative pl-md-5">
<img
alt="..."
className="img-center img-fluid"
src={require("assets/img/ill/ill-2.svg")}
/>
</div>
</Col>
<Col className="order-lg-1" lg="6">
<div className="d-flex px-3">
<div>
<div className="icon icon-lg icon-shape bg-gradient-white shadow rounded-circle text-primary">
<i className="ni ni-building text-primary" />
</div>
</div>
<div className="pl-4">
<h4 className="display-3 text-white">Modern Interface</h4>
<p className="text-white">
The Arctic Ocean freezes every winter and much of the
sea-ice then thaws every summer, and that process will
continue whatever.
</p>
</div>
</div>
<Card className="shadow shadow-lg--hover mt-5">
<CardBody>
<div className="d-flex px-3">
<div>
<div className="icon icon-shape bg-gradient-success rounded-circle text-white">
<i className="ni ni-satisfied" />
</div>
</div>
<div className="pl-4">
<h5 className="title text-success">
Awesome Support
</h5>
<p>
The Arctic Ocean freezes every winter and much of
the sea-ice then thaws every summer, and that
process will continue whatever.
</p>
<a
className="text-success"
href="#pablo"
onClick={e => e.preventDefault()}
>
Learn more
</a>
</div>
</div>
</CardBody>
</Card>
<Card className="shadow shadow-lg--hover mt-5">
<CardBody>
<div className="d-flex px-3">
<div>
<div className="icon icon-shape bg-gradient-warning rounded-circle text-white">
<i className="ni ni-active-40" />
</div>
</div>
<div className="pl-4">
<h5 className="title text-warning">
Modular Components
</h5>
<p>
The Arctic Ocean freezes every winter and much of
the sea-ice then thaws every summer, and that
process will continue whatever.
</p>
<a
className="text-warning"
href="#pablo"
onClick={e => e.preventDefault()}
>
Learn more
</a>
</div>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
SVG separator
<div className="separator separator-bottom separator-skew zindex-100">
<svg
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
version="1.1"
viewBox="0 0 2560 100"
x="0"
y="0"
>
<polygon
className="fill-white"
points="2560 0 2560 100 0 100"
/>
</svg>
</div>
</section> */}
{/* <section className="section section-lg">
<Container>
<Row className="justify-content-center text-center mb-lg">
<Col lg="8">
<h2 className="display-3">The amazing Team</h2>
<p className="lead text-muted">
According to the National Oceanic and Atmospheric
Administration, Ted, Scambos, NSIDClead scentist, puts the
potentially record maximum.
</p>
</Col>
</Row>
<Row>
<Col className="mb-5 mb-lg-0" lg="3" md="6">
<div className="px-4">
<img
alt="..."
className="rounded-circle img-center img-fluid shadow shadow-lg--hover"
src={require("assets/img/theme/team-1-800x800.jpg")}
style={{ width: "200px" }}
/>
<div className="pt-4 text-center">
<h5 className="title">
<span className="d-block mb-1">Ryan Tompson</span>
<small className="h6 text-muted">Web Developer</small>
</h5>
<div className="mt-3">
<Button
className="btn-icon-only rounded-circle"
color="warning"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-twitter" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="warning"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-facebook" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="warning"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-dribbble" />
</Button>
</div>
</div>
</div>
</Col>
<Col className="mb-5 mb-lg-0" lg="3" md="6">
<div className="px-4">
<img
alt="..."
className="rounded-circle img-center img-fluid shadow shadow-lg--hover"
src={require("assets/img/theme/team-2-800x800.jpg")}
style={{ width: "200px" }}
/>
<div className="pt-4 text-center">
<h5 className="title">
<span className="d-block mb-1">Romina Hadid</span>
<small className="h6 text-muted">
Marketing Strategist
</small>
</h5>
<div className="mt-3">
<Button
className="btn-icon-only rounded-circle"
color="primary"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-twitter" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="primary"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-facebook" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="primary"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-dribbble" />
</Button>
</div>
</div>
</div>
</Col>
<Col className="mb-5 mb-lg-0" lg="3" md="6">
<div className="px-4">
<img
alt="..."
className="rounded-circle img-center img-fluid shadow shadow-lg--hover"
src={require("assets/img/theme/team-3-800x800.jpg")}
style={{ width: "200px" }}
/>
<div className="pt-4 text-center">
<h5 className="title">
<span className="d-block mb-1">Alexander Smith</span>
<small className="h6 text-muted">UI/UX Designer</small>
</h5>
<div className="mt-3">
<Button
className="btn-icon-only rounded-circle"
color="info"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-twitter" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="info"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-facebook" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="info"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-dribbble" />
</Button>
</div>
</div>
</div>
</Col>
<Col className="mb-5 mb-lg-0" lg="3" md="6">
<div className="px-4">
<img
alt="..."
className="rounded-circle img-center img-fluid shadow shadow-lg--hover"
src={require("assets/img/theme/team-4-800x800.jpg")}
style={{ width: "200px" }}
/>
<div className="pt-4 text-center">
<h5 className="title">
<span className="d-block mb-1">John Doe</span>
<small className="h6 text-muted">Founder and CEO</small>
</h5>
<div className="mt-3">
<Button
className="btn-icon-only rounded-circle"
color="success"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-twitter" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="success"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-facebook" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="success"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-dribbble" />
</Button>
</div>
</div>
</div>
</Col>
</Row>
</Container>
</section> */}
{/* <section className="section section-lg pt-0">
<Container>
<Card className="bg-gradient-warning shadow-lg border-0">
<div className="p-5">
<Row className="align-items-center">
<Col lg="8">
<h3 className="text-white">
We made website building easier for you.
</h3>
<p className="lead text-white mt-3">
I will be the leader of a company that ends up being
worth billions of dollars, because I got the answers. I
understand culture.
</p>
</Col>
<Col className="ml-lg-auto" lg="3">
<Button
block
className="btn-white"
color="default"
href="https://www.creative-tim.com/product/argon-design-system-react?ref=adsr-landing-page"
size="lg"
>
Download React
</Button>
</Col>
</Row>
</div>
</Card>
</Container>
</section> */}
{/* <section className="section section-lg bg-gradient-default">
<Container className="pt-lg pb-300">
<Row className="text-center justify-content-center">
<Col lg="10">
<h2 className="display-3 text-white">Build something</h2>
<p className="lead text-white">
According to the National Oceanic and Atmospheric
Administration, Ted, Scambos, NSIDClead scentist, puts the
potentially record low maximum sea ice extent tihs year down
to low ice.
</p>
</Col>
</Row>
<Row className="row-grid mt-5">
<Col lg="4">
<div className="icon icon-lg icon-shape bg-gradient-white shadow rounded-circle text-primary">
<i className="ni ni-settings text-primary" />
</div>
<h5 className="text-white mt-3">Building tools</h5>
<p className="text-white mt-3">
Some quick example text to build on the card title and make
up the bulk of the card's content.
</p>
</Col>
<Col lg="4">
<div className="icon icon-lg icon-shape bg-gradient-white shadow rounded-circle text-primary">
<i className="ni ni-ruler-pencil text-primary" />
</div>
<h5 className="text-white mt-3">Grow your market</h5>
<p className="text-white mt-3">
Some quick example text to build on the card title and make
up the bulk of the card's content.
</p>
</Col>
<Col lg="4">
<div className="icon icon-lg icon-shape bg-gradient-white shadow rounded-circle text-primary">
<i className="ni ni-atom text-primary" />
</div>
<h5 className="text-white mt-3">Launch time</h5>
<p className="text-white mt-3">
Some quick example text to build on the card title and make
up the bulk of the card's content.
</p>
</Col>
</Row>
</Container>
SVG separator
<div className="separator separator-bottom separator-skew zindex-100">
<svg
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
version="1.1"
viewBox="0 0 2560 100"
x="0"
y="0"
>
<polygon
className="fill-white"
points="2560 0 2560 100 0 100"
/>
</svg>
</div>
</section> */}
{/* <section className="section section-lg pt-lg-0 section-contact-us">
<Container>
<Row className="justify-content-center mt--300">
<Col lg="8">
<Card className="bg-gradient-secondary shadow">
<CardBody className="p-lg-5">
<h4 className="mb-1">Want to work with us?</h4>
<p className="mt-0">
Your project is very important to us.
</p>
<FormGroup
className={classnames("mt-5", {
focused: this.state.nameFocused
})}
>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-user-run" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Your name"
type="text"
onFocus={e => this.setState({ nameFocused: true })}
onBlur={e => this.setState({ nameFocused: false })}
/>
</InputGroup>
</FormGroup>
<FormGroup
className={classnames({
focused: this.state.emailFocused
})}
>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-email-83" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Email address"
type="email"
onFocus={e => this.setState({ emailFocused: true })}
onBlur={e => this.setState({ emailFocused: false })}
/>
</InputGroup>
</FormGroup>
<FormGroup className="mb-4">
<Input
className="form-control-alternative"
cols="80"
name="name"
placeholder="Type a message..."
rows="4"
type="textarea"
/>
</FormGroup>
<div>
<Button
block
className="btn-round"
color="default"
size="lg"
type="button"
>
Send Message
</Button>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</section> */}
{/* <Download /> */}
</main>
<CardsFooter />
</>
);
}
}
export default DetailProfile;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment