Skip to content

Commit

Permalink
refactor: change coolGray with blueGray
Browse files Browse the repository at this point in the history
  • Loading branch information
@einazare
einazare committed Mar 19, 2021
1 parent a15d08a commit df79abe
Showing 1 changed file with 40 additions and 40 deletions.
80 changes: 40 additions & 40 deletions src/views/Landing.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export default function Landing() {
<h1 className="text-white font-semibold text-5xl">
Your story starts with us.
</h1>
<p className="mt-4 text-lg text-coolGray-200">
<p className="mt-4 text-lg text-blueGray-200">
This is a simple example of a Landing Page you can build
using Notus React. It features multiple CSS components based
on the Tailwind CSS design system.
Expand All @@ -54,14 +54,14 @@ export default function Landing() {
y="0"
>
<polygon
className="text-coolGray-200 fill-current"
className="text-blueGray-200 fill-current"
points="2560 0 2560 100 0 100"
></polygon>
</svg>
</div>
</div>

<section className="pb-20 bg-coolGray-200 -mt-24">
<section className="pb-20 bg-blueGray-200 -mt-24">
<div className="container mx-auto px-4">
<div className="flex flex-wrap">
<div className="lg:pt-12 pt-6 w-full md:w-4/12 px-4 text-center">
Expand All @@ -71,7 +71,7 @@ export default function Landing() {
<i className="fas fa-award"></i>
</div>
<h6 className="text-xl font-semibold">Awarded Agency</h6>
<p className="mt-2 mb-4 text-coolGray-500">
<p className="mt-2 mb-4 text-blueGray-500">
Divide details about your product or agency work into
parts. A paragraph describing a feature will be enough.
</p>
Expand All @@ -86,7 +86,7 @@ export default function Landing() {
<i className="fas fa-retweet"></i>
</div>
<h6 className="text-xl font-semibold">Free Revisions</h6>
<p className="mt-2 mb-4 text-coolGray-500">
<p className="mt-2 mb-4 text-blueGray-500">
Keep you user engaged by providing meaningful information.
Remember that by this time, the user is curious.
</p>
Expand All @@ -101,7 +101,7 @@ export default function Landing() {
<i className="fas fa-fingerprint"></i>
</div>
<h6 className="text-xl font-semibold">Verified Company</h6>
<p className="mt-2 mb-4 text-coolGray-500">
<p className="mt-2 mb-4 text-blueGray-500">
Write a few lines about each one. A paragraph describing a
feature will be enough. Keep you user engaged!
</p>
Expand All @@ -112,24 +112,24 @@ export default function Landing() {

<div className="flex flex-wrap items-center mt-32">
<div className="w-full md:w-5/12 px-4 mr-auto ml-auto">
<div className="text-coolGray-500 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white">
<div className="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white">
<i className="fas fa-user-friends text-xl"></i>
</div>
<h3 className="text-3xl mb-2 font-semibold leading-normal">
Working with us is a pleasure
</h3>
<p className="text-lg font-light leading-relaxed mt-4 mb-4 text-coolGray-600">
<p className="text-lg font-light leading-relaxed mt-4 mb-4 text-blueGray-600">
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 className="text-lg font-light leading-relaxed mt-0 mb-4 text-coolGray-600">
<p className="text-lg font-light leading-relaxed mt-0 mb-4 text-blueGray-600">
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. Just make sure you enable them first via
JavaScript.
</p>
<Link to="/" className="font-bold text-coolGray-700 mt-8">
<Link to="/" className="font-bold text-blueGray-700 mt-8">
Check Notus React!
</Link>
</div>
Expand Down Expand Up @@ -204,7 +204,7 @@ export default function Landing() {
<i className="fas fa-rocket text-xl"></i>
</div>
<h3 className="text-3xl font-semibold">A growing company</h3>
<p className="mt-4 text-lg leading-relaxed text-coolGray-500">
<p className="mt-4 text-lg leading-relaxed text-blueGray-500">
The extension 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.
Expand All @@ -218,7 +218,7 @@ export default function Landing() {
</span>
</div>
<div>
<h4 className="text-coolGray-500">
<h4 className="text-blueGray-500">
Carefully crafted components
</h4>
</div>
Expand All @@ -232,7 +232,7 @@ export default function Landing() {
</span>
</div>
<div>
<h4 className="text-coolGray-500">
<h4 className="text-blueGray-500">
Amazing page examples
</h4>
</div>
Expand All @@ -246,7 +246,7 @@ export default function Landing() {
</span>
</div>
<div>
<h4 className="text-coolGray-500">
<h4 className="text-blueGray-500">
Dynamic components
</h4>
</div>
Expand All @@ -264,7 +264,7 @@ export default function Landing() {
<div className="flex flex-wrap justify-center text-center mb-24">
<div className="w-full lg:w-6/12 px-4">
<h2 className="text-4xl font-semibold">Here are our heroes</h2>
<p className="text-lg leading-relaxed m-4 text-coolGray-500">
<p className="text-lg leading-relaxed m-4 text-blueGray-500">
According to the National Oceanic and Atmospheric
Administration, Ted, Scambos, NSIDClead scentist, puts the
potentially record maximum.
Expand All @@ -281,7 +281,7 @@ export default function Landing() {
/>
<div className="pt-6 text-center">
<h5 className="text-xl font-bold">Ryan Tompson</h5>
<p className="mt-1 text-sm text-coolGray-400 uppercase font-semibold">
<p className="mt-1 text-sm text-blueGray-400 uppercase font-semibold">
Web Developer
</p>
<div className="mt-6">
Expand Down Expand Up @@ -316,7 +316,7 @@ export default function Landing() {
/>
<div className="pt-6 text-center">
<h5 className="text-xl font-bold">Romina Hadid</h5>
<p className="mt-1 text-sm text-coolGray-400 uppercase font-semibold">
<p className="mt-1 text-sm text-blueGray-400 uppercase font-semibold">
Marketing Specialist
</p>
<div className="mt-6">
Expand Down Expand Up @@ -345,7 +345,7 @@ export default function Landing() {
/>
<div className="pt-6 text-center">
<h5 className="text-xl font-bold">Alexa Smith</h5>
<p className="mt-1 text-sm text-coolGray-400 uppercase font-semibold">
<p className="mt-1 text-sm text-blueGray-400 uppercase font-semibold">
UI/UX Designer
</p>
<div className="mt-6">
Expand All @@ -362,7 +362,7 @@ export default function Landing() {
<i className="fab fa-twitter"></i>
</button>
<button
className="bg-coolGray-700 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
className="bg-blueGray-700 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
type="button"
>
<i className="fab fa-instagram"></i>
Expand All @@ -380,7 +380,7 @@ export default function Landing() {
/>
<div className="pt-6 text-center">
<h5 className="text-xl font-bold">Jenna Kardi</h5>
<p className="mt-1 text-sm text-coolGray-400 uppercase font-semibold">
<p className="mt-1 text-sm text-blueGray-400 uppercase font-semibold">
Founder and CEO
</p>
<div className="mt-6">
Expand All @@ -403,7 +403,7 @@ export default function Landing() {
<i className="fab fa-twitter"></i>
</button>
<button
className="bg-coolGray-700 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
className="bg-blueGray-700 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
type="button"
>
<i className="fab fa-instagram"></i>
Expand All @@ -416,7 +416,7 @@ export default function Landing() {
</div>
</section>

<section className="pb-20 relative block bg-coolGray-800">
<section className="pb-20 relative block bg-blueGray-800">
<div
className="bottom-auto top-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden -mt-20 h-20"
style={{ transform: "translateZ(0)" }}
Expand All @@ -431,7 +431,7 @@ export default function Landing() {
y="0"
>
<polygon
className="text-coolGray-800 fill-current"
className="text-blueGray-800 fill-current"
points="2560 0 2560 100 0 100"
></polygon>
</svg>
Expand All @@ -443,7 +443,7 @@ export default function Landing() {
<h2 className="text-4xl font-semibold text-white">
Build something
</h2>
<p className="text-lg leading-relaxed mt-4 mb-4 text-coolGray-400">
<p className="text-lg leading-relaxed mt-4 mb-4 text-blueGray-400">
Put the potentially record low maximum sea ice extent tihs
year down to low ice. According to the National Oceanic and
Atmospheric Administration, Ted, Scambos.
Expand All @@ -452,102 +452,102 @@ export default function Landing() {
</div>
<div className="flex flex-wrap mt-12 justify-center">
<div className="w-full lg:w-3/12 px-4 text-center">
<div className="text-coolGray-800 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center">
<div className="text-blueGray-800 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center">
<i className="fas fa-medal text-xl"></i>
</div>
<h6 className="text-xl mt-5 font-semibold text-white">
Excelent Services
</h6>
<p className="mt-2 mb-4 text-coolGray-400">
<p className="mt-2 mb-4 text-blueGray-400">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
</div>
<div className="w-full lg:w-3/12 px-4 text-center">
<div className="text-coolGray-800 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center">
<div className="text-blueGray-800 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center">
<i className="fas fa-poll text-xl"></i>
</div>
<h5 className="text-xl mt-5 font-semibold text-white">
Grow your market
</h5>
<p className="mt-2 mb-4 text-coolGray-400">
<p className="mt-2 mb-4 text-blueGray-400">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
</div>
<div className="w-full lg:w-3/12 px-4 text-center">
<div className="text-coolGray-800 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center">
<div className="text-blueGray-800 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center">
<i className="fas fa-lightbulb text-xl"></i>
</div>
<h5 className="text-xl mt-5 font-semibold text-white">
Launch time
</h5>
<p className="mt-2 mb-4 text-coolGray-400">
<p className="mt-2 mb-4 text-blueGray-400">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
</div>
</div>
</div>
</section>
<section className="relative block py-24 lg:pt-0 bg-coolGray-800">
<section className="relative block py-24 lg:pt-0 bg-blueGray-800">
<div className="container mx-auto px-4">
<div className="flex flex-wrap justify-center lg:-mt-64 -mt-48">
<div className="w-full lg:w-6/12 px-4">
<div className="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-coolGray-200">
<div className="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-200">
<div className="flex-auto p-5 lg:p-10">
<h4 className="text-2xl font-semibold">
Want to work with us?
</h4>
<p className="leading-relaxed mt-1 mb-4 text-coolGray-500">
<p className="leading-relaxed mt-1 mb-4 text-blueGray-500">
Complete this form and we will get back to you in 24
hours.
</p>
<div className="relative w-full mb-3 mt-8">
<label
className="block uppercase text-coolGray-600 text-xs font-bold mb-2"
className="block uppercase text-blueGray-600 text-xs font-bold mb-2"
htmlFor="full-name"
>
Full Name
</label>
<input
type="text"
className="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
className="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
placeholder="Full Name"
/>
</div>

<div className="relative w-full mb-3">
<label
className="block uppercase text-coolGray-600 text-xs font-bold mb-2"
className="block uppercase text-blueGray-600 text-xs font-bold mb-2"
htmlFor="email"
>
Email
</label>
<input
type="email"
className="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
className="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
placeholder="Email"
/>
</div>

<div className="relative w-full mb-3">
<label
className="block uppercase text-coolGray-600 text-xs font-bold mb-2"
className="block uppercase text-blueGray-600 text-xs font-bold mb-2"
htmlFor="message"
>
Message
</label>
<textarea
rows="4"
cols="80"
className="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full"
className="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full"
placeholder="Type a message..."
/>
</div>
<div className="text-center mt-6">
<button
className="bg-coolGray-800 text-white active:bg-coolGray-600 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
className="bg-blueGray-800 text-white active:bg-blueGray-600 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
type="button"
>
Send Message
Expand Down

0 comments on commit df79abe

Please sign in to comment.