btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

refactor(ui): sort windicss classes

Browse Source
This commit is contained in:
liyasthomas
2021-07-17 23:10:28 +05:30
parent a2a9bae0e3
commit 590c21209c
85 changed files with 32066 additions and 896 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
components/landing/CTA.vue
View File

@@ -1,21 +1,20 @@
<template>
<div class="flex p-4 bg-primaryLight rounded">
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
<div class="bg-primaryLight rounded flex p-4">
<div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
<div
v-for="(cta, index) in ctas"
:key="`cta-${index}`"
class="inline-flex flex-col p-8"
class="flex-col p-8 inline-flex"
>
<i class="text-3xl material-icons text-accent">{{ cta.icon }}</i>
<i class="text-accent text-3xl material-icons">{{ cta.icon }}</i>
<div class="flex-grow">
<h2
class="
mt-4
mb-2
text-lg
font-semibold
mt-4
text-lg text-secondaryDark
mb-2
transition
text-secondaryDark
"
>
{{ cta.title }}

15
components/landing/Features.vue
View File

@@ -1,26 +1,25 @@
<template>
<div class="flex flex-col p-4">
<div class="flex flex-col items-center">
<p class="my-4 font-semibold tracking-widest text-center text-accent">
<p class="font-semibold my-4 text-center text-accent tracking-widest">
FEATURES
</p>
</div>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
<div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
<div
v-for="(feature, index) in features"
:key="`feature-${index}`"
class="inline-flex flex-col p-8"
class="flex-col p-8 inline-flex"
>
<i class="text-4xl material-icons text-accent">{{ feature.icon }}</i>
<i class="text-accent text-4xl material-icons">{{ feature.icon }}</i>
<div class="flex-grow">
<h2
class="
mt-4
mb-2
text-lg
font-semibold
mt-4
text-lg text-secondaryDark
mb-2
transition
text-secondaryDark
"
>
{{ feature.title }}

8
components/landing/Footer.vue
View File

@@ -1,6 +1,6 @@
<template>
<footer class="flex flex-col p-4">
<nav class="grid grid-cols-2 gap-4 md:grid-cols-4">
<nav class="grid gap-4 grid-cols-2 md:grid-cols-4">
<div class="flex flex-col space-y-2">
<span>
<AppLogo class="h-8" />
@@ -22,7 +22,7 @@
<SmartColorModePicker />
</div>
<div class="flex flex-col space-y-2">
<h4 class="my-2 font-semibold">Solutions</h4>
<h4 class="font-semibold my-2">Solutions</h4>
<ul class="space-y-2">
<li
v-for="(item, index) in navigation.solutions"
@@ -37,7 +37,7 @@
</ul>
</div>
<div class="flex flex-col space-y-2">
<h4 class="my-2 font-semibold">Platform</h4>
<h4 class="font-semibold my-2">Platform</h4>
<ul class="space-y-2">
<li
v-for="(item, index) in navigation.platform"
@@ -52,7 +52,7 @@
</ul>
</div>
<div class="flex flex-col space-y-2">
<h4 class="my-2 font-semibold">Company</h4>
<h4 class="font-semibold my-2">Company</h4>
<ul class="space-y-2">
<li
v-for="(item, index) in navigation.company"

19
components/landing/Hero.vue
View File

@@ -1,12 +1,13 @@
<template>
<div class="flex p-4 relative">
<div class="relative my-16 z-10 max-w-3xl">
<div class="my-16 max-w-3xl z-10 relative">
<h2
class="
font-semibold
text-accent
leading-none
tracking-tighter
font-semibold
text-accent text-4xl
text-4xl
md:text-5xl
lg:text-6xl
"
@@ -15,23 +16,21 @@
</h2>
<h3
class="
text-3xl
font-mono font-semibold
my-4
font-mono
text-secondaryDark
text-secondaryDark text-3xl
md:text-4xl
lg:text-4xl
font-semibold
"
>
API Development Ecosystem
</h3>
<p class="text-lg my-4 text-secondaryLight max-w-4/5">
<p class="my-4 text-lg text-secondaryLight max-w-4/5">
Millions of developers and companies build, ship, and maintain their
APIs on Hoppscotch — the largest and most advanced development platform
in the world.
</p>
<div class="my-8 flex items-center">
<div class="flex my-8 items-center">
<ButtonPrimary
label="Dashboard"
icon="chevron_right"
@@ -45,7 +44,7 @@
</div>
</div>
<div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
<LandingGlobe class="h-64 w-full sm:h-72 md:h-96 lg:h-full" />
<LandingGlobe class="h-64 w-full lg:h-full sm:h-72 md:h-96" />
</div>
</div>
</template>

4
components/landing/Stats.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex p-4 font-mono space-x-16">
<div class="flex font-mono space-x-16 p-4">
<div v-for="(stat, index) in stats" :key="`stat-${index}`">
<span class="text-xl font-bold">
<span class="font-bold text-xl">
{{ stat.count }}<span class="text-secondaryLight">+</span>
</span>
<br />

10
components/landing/Users.vue
View File

@@ -1,21 +1,21 @@
<template>
<div class="flex flex-col p-4 mx-4 bg-primaryLight rounded">
<div class="bg-primaryLight rounded flex flex-col mx-4 p-4">
<div class="flex flex-col items-center">
<p class="my-4 font-semibold tracking-widest text-center">
<p class="font-semibold my-4 text-center tracking-widest">
EMPOWERING DEVELOPERS FROM
</p>
</div>
<div class="grid grid-cols-3 gap-4 md:grid-cols-4 lg:grid-cols-6">
<div class="grid gap-4 grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
<div
v-for="(user, index) in users"
:key="`user-${index}`"
class="inline-flex flex-col items-center justify-center px-4"
class="flex-col px-4 inline-flex items-center justify-center"
>
<img
:src="`/images/users/${user.image}`"
alt="Profile picture"
loading="lazy"
class="inline-flex flex-col object-contain object-center h-24 w-24"
class="flex-col object-contain object-center h-24 w-24 inline-flex"
/>
</div>
</div>