Skip to content

A
Aqbits Trace Code
Commit 5d97e618 authored by Vinh's avatar Vinh
Browse files
Options

update ui

parent 5103e270
Show whitespace changes
Inline Side-by-side
Showing with 122 additions and 501 deletions
src/assets/css/argon-design-system-react.css
View file @ 5d97e618
......@@ -3572,7 +3572,9 @@ input[type="button"].btn-block {
.card-img-top {
width: 100%;
border-top-left-radius: calc(0.25rem - 0.0625rem);
border-top-right-radius: calc(0.25rem - 0.0625rem); }
border-top-right-radius: calc(0.25rem - 0.0625rem);
border-radius: 5%;
}
.card-img-bottom {
width: 100%;
......
src/components/Navbars/DemoNavbar.js
View file @ 5d97e618
......@@ -257,21 +257,6 @@ class DemoNavbar extends React.Component {
Star us on Github
</UncontrolledTooltip>
</NavItem>
<NavItem className="d-none d-lg-block ml-lg-4">
<Button
className="btn-neutral btn-icon"
color="default"
href="https://www.creative-tim.com/product/argon-design-system-react?ref=adsr-navbar"
target="_blank"
>
<span className="btn-inner--icon">
<i className="fa fa-cloud-download mr-2" />
</span>
<span className="nav-link-inner--text ml-1">
Download
</span>
</Button>
</NavItem>
</Nav>
</UncontrolledCollapse>
</Container>
......
src/views/examples/Landing.js
View file @ 5d97e618
......@@ -32,24 +32,136 @@ import {
InputGroupText,
InputGroup,
Container,
NavItem,
NavLink,
Nav,
TabContent,
TabPane,
Row,
Col
} from "reactstrap";
// core components
import DemoNavbar from "components/Navbars/DemoNavbar.js";
import CardsFooter from "components/Footers/CardsFooter.js";
import SimpleFooter from "components/Footers/SimpleFooter.js";
// index page sections
import Download from "../IndexSections/Download.js";
import Tabs from "../IndexSections/Tabs.js";
class Landing extends React.Component {
state = {};
state = {
plainTabs: 1
};
componentDidMount() {
document.documentElement.scrollTop = 0;
document.scrollingElement.scrollTop = 0;
this.refs.main.scrollTop = 0;
}
toggleNavs = (e, state, index) => {
e.preventDefault();
this.setState({
[state]: index
});
};
renderTabs = () => {
return (
<>
<Row className="justify-content-center">
<Col className="mt-5 mt-lg-0" lg="10">
{/* Menu */}
<div className="nav-wrapper">
<Nav
className="nav-fill flex-column flex-md-row"
id="tabs-icons-text"
pills
role="tablist"
>
<NavItem>
<NavLink
aria-selected={this.state.plainTabs === 1}
className={classnames("mb-sm-3 mb-md-0", {
active: this.state.plainTabs === 1
})}
onClick={e => this.toggleNavs(e, "plainTabs", 1)}
href="#pablo"
role="tab"
>
Home
</NavLink>
</NavItem>
<NavItem>
<NavLink
aria-selected={this.state.plainTabs === 2}
className={classnames("mb-sm-3 mb-md-0", {
active: this.state.plainTabs === 2
})}
onClick={e => this.toggleNavs(e, "plainTabs", 2)}
href="#pablo"
role="tab"
>
Profile
</NavLink>
</NavItem>
<NavItem>
<NavLink
aria-selected={this.state.plainTabs === 3}
className={classnames("mb-sm-3 mb-md-0", {
active: this.state.plainTabs === 3
})}
onClick={e => this.toggleNavs(e, "plainTabs", 3)}
href="#pablo"
role="tab"
>
Messages
</NavLink>
</NavItem>
</Nav>
</div>
<Card className="shadow">
<CardBody>
<TabContent activeTab={"plainTabs" + this.state.plainTabs}>
<TabPane tabId="plainTabs1">
<p className="description">
Raw denim you probably haven't heard of them jean shorts
Austin. Nesciunt tofu stumptown aliqua, retro synth master
cleanse. Mustache cliche tempor, williamsburg carles vegan
helvetica. Reprehenderit butcher retro keffiyeh
dreamcatcher synth.
</p>
<p className="description">
Raw denim you probably haven't heard of them jean shorts
Austin. Nesciunt tofu stumptown aliqua, retro synth master
cleanse.
</p>
</TabPane>
<TabPane tabId="plainTabs2">
<p className="description">
Cosby sweater eu banh mi, qui irure terry richardson ex
squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher voluptate
nisi qui.
</p>
</TabPane>
<TabPane tabId="plainTabs3">
<p className="description">
Raw denim you probably haven't heard of them jean shorts
Austin. Nesciunt tofu stumptown aliqua, retro synth master
cleanse. Mustache cliche tempor, williamsburg carles vegan
helvetica. Reprehenderit butcher retro keffiyeh
dreamcatcher synth.
</p>
</TabPane>
</TabContent>
</CardBody>
</Card>
</Col>
</Row>
</>
);
}
render() {
return (
<>
......@@ -57,7 +169,7 @@ class Landing extends React.Component {
<main ref="main">
<div className="position-relative">
{/* shape Hero */}
<section className="section section-lg section-shaped pb-250">
<section className="section section-lg section-shaped pb-100">
<div className="shape shape-style-1 shape-default">
<span />
<span />
......@@ -74,38 +186,11 @@ class Landing extends React.Component {
<Row>
<Col lg="6">
<h1 className="display-3 text-white">
A beautiful Design System{" "}
<span>completed with examples</span>
Mạng xã hội sản phẩm và tiêu dùng
</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.
Chúng tôi là công ty công nghệ cung cấp các giải pháp số hóa sản phẩm, dịch vụ cho doanh nghiệp dựa trên mã Barcode và QR code<br/> Được tin dùng bởi 20.000 doanh nghiệp
</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>
......@@ -129,201 +214,6 @@ class Landing extends React.Component {
</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">
<Container>
<Row className="row-grid align-items-center">
......@@ -364,9 +254,6 @@ class Landing extends React.Component {
</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>Our customers</h3>
<p className="lead">
Don't let your uses guess by attaching tooltips and
......@@ -397,90 +284,7 @@ class Landing extends React.Component {
</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>
{this.renderTabs()}
</Container>
{/* SVG separator */}
<div className="separator separator-bottom separator-skew zindex-100">
......@@ -685,178 +489,8 @@ class Landing extends React.Component {
</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 />
<SimpleFooter/>
</>
);
}
......
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