Skip to content
This repository has been archived by the owner on Dec 21, 2024. It is now read-only.

Commit

Permalink
holadok: lint and add transition on artwork and hero tagline
Browse files Browse the repository at this point in the history
  • Loading branch information
@khafidprayoga
khafidprayoga committed Sep 29, 2024
1 parent ee30101 commit b4bfd0f
Show file tree
Hide file tree
Showing 10 changed files with 158 additions and 138 deletions.
10 changes: 5 additions & 5 deletions holadok/postcss.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
plugins: {
tailwindcss: {},
autoprefixer: {}
}
};
2 changes: 1 addition & 1 deletion holadok/src/app.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind utilities;
65 changes: 32 additions & 33 deletions holadok/src/lib/components/Footer.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,41 +3,40 @@
</script>

<div class="footer">
<div class="footer-left">
<i>
<IconCalendarMonth stroke={2} />
</i>

<div class="feature-description">
<h2>Online appointment scheduling</h2>
<p>Allows users to schedule appointments with their healthcare provider through the app.</p>
</div>
</div>

<div class="footer-center">
<i>
<IconBell stroke={2} />
</i>

<div class="feature-description">
<h2>Medication reminders</h2>
<p>Allows users to schedule appointments with their healthcare provider through the app.</p>
</div>
</div>
<div class="footer-right">
<i>
<IconDeviceComputerCamera stroke={2} />
</i>
<div class="feature-description">
<h2>Virtual consultations</h2>
<p>Allows users to schedule appointments with their healthcare provider through the app.</p>
</div>
</div>
<div class="footer-left">
<i>
<IconCalendarMonth stroke={2} />
</i>

<div class="feature-description">
<h2>Online appointment scheduling</h2>
<p>Allows users to schedule appointments with their healthcare provider through the app.</p>
</div>
</div>

<div class="footer-center">
<i>
<IconBell stroke={2} />
</i>

<div class="feature-description">
<h2>Medication reminders</h2>
<p>Allows users to schedule appointments with their healthcare provider through the app.</p>
</div>
</div>
<div class="footer-right">
<i>
<IconDeviceComputerCamera stroke={2} />
</i>
<div class="feature-description">
<h2>Virtual consultations</h2>
<p>Allows users to schedule appointments with their healthcare provider through the app.</p>
</div>
</div>
</div>

<style lang="postcss">
.footer {
.footer {
@apply flex flex-col flex-wrap md:flex-nowrap sm:flex-row justify-between gap-3 text-center sm:text-left bg-primary text-gray-100 rounded-sm
max-w-screen-sm
sm:max-w-fit;
Expand All @@ -57,4 +56,4 @@
.feature-description > p {
@apply font-thin text-sm;
}
</style>
</style>
126 changes: 62 additions & 64 deletions holadok/src/lib/components/Header.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,79 +1,77 @@
<script>
import Logo from "$lib/assets/brand/logo.svg";
import Logo from '$lib/assets/brand/logo.svg';
</script>


<div class="navigation">
<div class="navigation-left">
<img src="{Logo}" alt="Holadok Brand Logo" >
</div>
<nav class="navigation-center">
<ul>
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">About Us</a>
</li>
</ul>
</nav>
<div class="navigation-left">
<img src={Logo} alt="Holadok Brand Logo" />
</div>
<nav class="navigation-center">
<ul>
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">About Us</a>
</li>
</ul>
</nav>

<div class="navigation-right">
<span>
<a href="#">Login</a>
</span>
<span class="bordered">
<a href="#">Book Now</a>
</span>
</div>
<div class="navigation-right">
<span>
<a href="#">Login</a>
</span>
<span class="bordered">
<a href="#">Book Now</a>
</span>
</div>
</div>

<style lang='postcss'>
* {
@apply text-sm
}
.navigation {
@apply
md:flex md:w-full md:justify-between md:items-center h-screen md:h-0 absolute
py-2 px-2 z-10
}
<style lang="postcss">
* {
@apply text-sm;
}
.navigation-left img {
@apply w-full h-7
}
.navigation {
@apply md:flex md:w-full md:justify-between md:items-center h-screen md:h-0 absolute
py-2 md:py-5 px-2 z-10;
}
.navigation-center > ul , .navigation-right > span {
@apply px-1 py-1
}
.navigation-left img {
@apply w-full h-7;
}
.navigation-center ul {
@apply hidden md:flex flex-row gap-4
}
.navigation-center > ul,
.navigation-right > span {
@apply px-1 py-1;
}
.navigation-center ul li:hover {
@apply underline
}
.navigation-center ul {
@apply hidden md:flex flex-row gap-4;
}
.navigation-center ul li:hover {
@apply underline;
}
.navigation-center ul li.active{
@apply font-semibold
}
.navigation-center ul li.active {
@apply font-semibold;
}
.navigation-center ul li:not(.active){
@apply font-thin
}
.navigation-right {
@apply hidden md:flex flex-row gap-4 font-semibold
}
.navigation-center ul li:not(.active) {
@apply font-thin;
}
.navigation-right {
@apply hidden md:flex flex-row gap-4 font-semibold;
}
.navigation-right span.bordered {
@apply border border-black rounded-sm px-3
}
</style>
.navigation-right span.bordered {
@apply border border-black rounded-sm px-3;
}
</style>
57 changes: 41 additions & 16 deletions holadok/src/lib/components/Hero.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,51 @@
import doctor from '$lib/assets/brand/doctor.svg';
import overlay from '$lib/assets/brand/background.svg';
import card from '$lib/assets/brand/card.svg';
import { fly, fade } from 'svelte/transition';
import { quadIn, quintOut } from 'svelte/easing';
import { onMount } from 'svelte';
let ready = false;
onMount(() => {
ready = true;
});
</script>

<div class="hero">
<div class="hero-tagline">
<h1 class="hero-header">Get the healthcare you need, when you need it.</h1>
<p class="hero-description">
Manage all of your healthcare needs in one convenient place – from booking appointments to
tracking your health history.
</p>
<div class="hero-action">
<span>
<a href="#">Book an Appointment</a>
</span>
{#if ready}
<div class="hero-tagline" transition:fade={{ delay: 0, duration: 100, easing: quadIn }}>
<h1 class="hero-header">Get the healthcare you need, when you need it.</h1>

<p class="hero-description">
Manage all of your healthcare needs in one convenient place – from booking appointments to
tracking your health history.
</p>
<div class="hero-action">
<span>
<a href="#">Book an Appointment</a>
</span>
</div>
</div>
</div>
{/if}

<div class="hero-artwork">
<img id="artwork-doctor" src={doctor} alt="Holadoc Doctor Consultant" />
{#if ready}
<img
id="artwork-doctor"
src={doctor}
alt="Holadoc Doctor Consultant"
transition:fly={{ delay: 0, duration: 3000, x: 200, y: 0, opacity: 1, easing: quintOut }}
/>
<img
id="artwork-card"
src={card}
alt="what people say"
transition:fly={{ delay: 0, duration: 3000, x: 0, y: -200, opacity: 1, easing: quintOut }}
/>
{/if}
<img id="artwork-overlay" src={overlay} alt="Overlay background" />
<img id="artwork-card" src={card} alt="what people say" />
</div>
</div>

Expand Down Expand Up @@ -51,14 +76,14 @@
}
#artwork-overlay {
@apply xl:block bg-no-repeat sm:absolute -z-50 top-0 -right-0;
@apply xl:block bg-no-repeat sm:absolute -z-50 top-0 -right-0;
}
#artwork-doctor {
@apply md:max-h-[720px] w-fit object-cover absolute z-10 bottom-0 md:right-10;
@apply md:max-h-[720px] w-fit object-cover absolute z-10 bottom-0 md:right-10;
}
#artwork-card {
@apply w-[225px] md:h-52 md:w-fit object-cover absolute z-[9] top-0 md:top-64 md:left-0;
@apply w-[225px] md:h-52 md:w-fit object-cover absolute z-[9] top-0 md:top-64 md:left-0;
}
</style>
5 changes: 2 additions & 3 deletions holadok/src/lib/components/square.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
<svg width="590" height="847" viewBox="0 0 590 847" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M80 0H590L510 847H0L80 0Z" fill="#9BEAE0"/>
</svg>

<path d="M80 0H590L510 847H0L80 0Z" fill="#9BEAE0" />
</svg>
4 changes: 2 additions & 2 deletions holadok/src/routes/+layout.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script>
import "../app.css"
import '../app.css';
</script>

<slot/>
<slot />
2 changes: 1 addition & 1 deletion holadok/src/routes/+layout.ts
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export const prerender: boolean = true;
export const prerender: boolean = true;
2 changes: 1 addition & 1 deletion holadok/svelte.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import adapter from "@sveltejs/adapter-static";
import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
Expand Down
23 changes: 11 additions & 12 deletions holadok/tailwind.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
/** @type {import('tailwindcss').Config} */
export default {
content: ['./src/**/*.{html,js,svelte,ts}'],
theme: {
extend: {
backgroundColor:{
primary: "#203271",
secondary: "#101C45",
}
},
},
plugins: [],
}

content: ['./src/**/*.{html,js,svelte,ts}'],
theme: {
extend: {
backgroundColor: {
primary: '#203271',
secondary: '#101C45'
}
}
},
plugins: []
};

0 comments on commit b4bfd0f

Please sign in to comment.