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 3d1a01a commit f04894e
Showing 1 changed file with 40 additions and 40 deletions.
80 changes: 40 additions & 40 deletions src/views/Landing.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<h1 class="text-white font-semibold text-5xl">
Your story starts with us.
</h1>
<p class="mt-4 text-lg text-coolGray-200">
<p class="mt-4 text-lg text-blueGray-200">
This is a simple example of a Landing Page you can build using
Vue Notus. It features multiple CSS components based on the
Tailwind CSS design system.
Expand All @@ -46,14 +46,14 @@
y="0"
>
<polygon
class="text-coolGray-200 fill-current"
class="text-blueGray-200 fill-current"
points="2560 0 2560 100 0 100"
></polygon>
</svg>
</div>
</div>

<section class="pb-20 bg-coolGray-200 -mt-24">
<section class="pb-20 bg-blueGray-200 -mt-24">
<div class="container mx-auto px-4">
<div class="flex flex-wrap">
<div class="lg:pt-12 pt-6 w-full md:w-4/12 px-4 text-center">
Expand All @@ -67,7 +67,7 @@
<i class="fas fa-award"></i>
</div>
<h6 class="text-xl font-semibold">Awarded Agency</h6>
<p class="mt-2 mb-4 text-coolGray-500">
<p class="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 @@
<i class="fas fa-retweet"></i>
</div>
<h6 class="text-xl font-semibold">Free Revisions</h6>
<p class="mt-2 mb-4 text-coolGray-500">
<p class="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 @@ -105,7 +105,7 @@
<i class="fas fa-fingerprint"></i>
</div>
<h6 class="text-xl font-semibold">Verified Company</h6>
<p class="mt-2 mb-4 text-coolGray-500">
<p class="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 @@ -117,28 +117,28 @@
<div class="flex flex-wrap items-center mt-32">
<div class="w-full md:w-5/12 px-4 mr-auto ml-auto">
<div
class="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"
class="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 class="fas fa-user-friends text-xl"></i>
</div>
<h3 class="text-3xl mb-2 font-semibold leading-normal">
Working with us is a pleasure
</h3>
<p
class="text-lg font-light leading-relaxed mt-4 mb-4 text-coolGray-600"
class="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
class="text-lg font-light leading-relaxed mt-0 mb-4 text-coolGray-600"
class="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>
<router-link to="/" class="font-bold text-coolGray-700 mt-8">
<router-link to="/" class="font-bold text-blueGray-700 mt-8">
Check Vue Notus!
</router-link>
</div>
Expand Down Expand Up @@ -217,7 +217,7 @@
<i class="fas fa-rocket text-xl"></i>
</div>
<h3 class="text-3xl font-semibold">A growing company</h3>
<p class="mt-4 text-lg leading-relaxed text-coolGray-500">
<p class="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 @@ -233,7 +233,7 @@
</span>
</div>
<div>
<h4 class="text-coolGray-500">
<h4 class="text-blueGray-500">
Carefully crafted components
</h4>
</div>
Expand All @@ -249,7 +249,7 @@
</span>
</div>
<div>
<h4 class="text-coolGray-500">
<h4 class="text-blueGray-500">
Amazing page examples
</h4>
</div>
Expand All @@ -265,7 +265,7 @@
</span>
</div>
<div>
<h4 class="text-coolGray-500">Dynamic components</h4>
<h4 class="text-blueGray-500">Dynamic components</h4>
</div>
</div>
</li>
Expand All @@ -281,7 +281,7 @@
<div class="flex flex-wrap justify-center text-center mb-24">
<div class="w-full lg:w-6/12 px-4">
<h2 class="text-4xl font-semibold">Here are our heroes</h2>
<p class="text-lg leading-relaxed m-4 text-coolGray-500">
<p class="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 @@ -299,7 +299,7 @@
<div class="pt-6 text-center">
<h5 class="text-xl font-bold">Ryan Tompson</h5>
<p
class="mt-1 text-sm text-coolGray-400 uppercase font-semibold"
class="mt-1 text-sm text-blueGray-400 uppercase font-semibold"
>
Web Developer
</p>
Expand Down Expand Up @@ -336,7 +336,7 @@
<div class="pt-6 text-center">
<h5 class="text-xl font-bold">Romina Hadid</h5>
<p
class="mt-1 text-sm text-coolGray-400 uppercase font-semibold"
class="mt-1 text-sm text-blueGray-400 uppercase font-semibold"
>
Marketing Specialist
</p>
Expand Down Expand Up @@ -367,7 +367,7 @@
<div class="pt-6 text-center">
<h5 class="text-xl font-bold">Alexa Smith</h5>
<p
class="mt-1 text-sm text-coolGray-400 uppercase font-semibold"
class="mt-1 text-sm text-blueGray-400 uppercase font-semibold"
>
UI/UX Designer
</p>
Expand All @@ -385,7 +385,7 @@
<i class="fab fa-twitter"></i>
</button>
<button
class="bg-coolGray-700 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
class="bg-blueGray-700 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
type="button"
>
<i class="fab fa-instagram"></i>
Expand All @@ -404,7 +404,7 @@
<div class="pt-6 text-center">
<h5 class="text-xl font-bold">Jenna Kardi</h5>
<p
class="mt-1 text-sm text-coolGray-400 uppercase font-semibold"
class="mt-1 text-sm text-blueGray-400 uppercase font-semibold"
>
Founder and CEO
</p>
Expand All @@ -428,7 +428,7 @@
<i class="fab fa-twitter"></i>
</button>
<button
class="bg-coolGray-700 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
class="bg-blueGray-700 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
type="button"
>
<i class="fab fa-instagram"></i>
Expand All @@ -441,7 +441,7 @@
</div>
</section>

<section class="pb-20 relative block bg-coolGray-800">
<section class="pb-20 relative block bg-blueGray-800">
<div
class="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 @@ -456,7 +456,7 @@
y="0"
>
<polygon
class="text-coolGray-800 fill-current"
class="text-blueGray-800 fill-current"
points="2560 0 2560 100 0 100"
></polygon>
</svg>
Expand All @@ -468,7 +468,7 @@
<h2 class="text-4xl font-semibold text-white">
Build something
</h2>
<p class="text-lg leading-relaxed mt-4 mb-4 text-coolGray-400">
<p class="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 @@ -478,108 +478,108 @@
<div class="flex flex-wrap mt-12 justify-center">
<div class="w-full lg:w-3/12 px-4 text-center">
<div
class="text-coolGray-800 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"
class="text-blueGray-800 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"
>
<i class="fas fa-medal text-xl"></i>
</div>
<h6 class="text-xl mt-5 font-semibold text-white">
Excelent Services
</h6>
<p class="mt-2 mb-4 text-coolGray-400">
<p class="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 class="w-full lg:w-3/12 px-4 text-center">
<div
class="text-coolGray-800 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"
class="text-blueGray-800 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"
>
<i class="fas fa-poll text-xl"></i>
</div>
<h5 class="text-xl mt-5 font-semibold text-white">
Grow your market
</h5>
<p class="mt-2 mb-4 text-coolGray-400">
<p class="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 class="w-full lg:w-3/12 px-4 text-center">
<div
class="text-coolGray-800 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"
class="text-blueGray-800 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"
>
<i class="fas fa-lightbulb text-xl"></i>
</div>
<h5 class="text-xl mt-5 font-semibold text-white">
Launch time
</h5>
<p class="mt-2 mb-4 text-coolGray-400">
<p class="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 class="relative block py-24 lg:pt-0 bg-coolGray-800">
<section class="relative block py-24 lg:pt-0 bg-blueGray-800">
<div class="container mx-auto px-4">
<div class="flex flex-wrap justify-center lg:-mt-64 -mt-48">
<div class="w-full lg:w-6/12 px-4">
<div
class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-coolGray-200"
class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-200"
>
<div class="flex-auto p-5 lg:p-10">
<h4 class="text-2xl font-semibold">
Want to work with us?
</h4>
<p class="leading-relaxed mt-1 mb-4 text-coolGray-500">
<p class="leading-relaxed mt-1 mb-4 text-blueGray-500">
Complete this form and we will get back to you in 24 hours.
</p>
<div class="relative w-full mb-3 mt-8">
<label
class="block uppercase text-coolGray-600 text-xs font-bold mb-2"
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
htmlFor="full-name"
>
Full Name
</label>
<input
type="text"
class="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"
class="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 class="relative w-full mb-3">
<label
class="block uppercase text-coolGray-600 text-xs font-bold mb-2"
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
htmlFor="email"
>
Email
</label>
<input
type="email"
class="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"
class="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 class="relative w-full mb-3">
<label
class="block uppercase text-coolGray-600 text-xs font-bold mb-2"
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
htmlFor="message"
>
Message
</label>
<textarea
rows="4"
cols="80"
class="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"
class="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 class="text-center mt-6">
<button
class="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"
class="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 f04894e

Please sign in to comment.