admin/korean-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Init

Browse Source
This commit is contained in:
Chief-spartan-117
2025-09-25 22:38:59 +05:45
commit de81c42742
275 changed files with 9295 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/lib/components/layouts/Footer.svelte Normal file
View File

@@ -0,0 +1,101 @@
<script>
import fullLogo from '$lib/assets/img/logo/full_logo.png';
import { Phone, MapPin, Mail } from '@lucide/svelte';
import { SIIcon } from '@willingtonortiz/svelte-simple-icons';
import { siFacebook, siInstagram, siTiktok } from 'simple-icons';
</script>
<foote class="mx-auto w-full bg-primary/10 px-12 pt-10 pb-4 max-md:px-4">
<div
class="grid w-full grid-cols-4 items-start justify-between gap-12 max-md:flex max-md:flex-col max-md:gap-4"
>
<div>
<div class="flex flex-col gap-4">
<img src={fullLogo} alt="Korean Skin Care Logo" class="w-48" />
<p class="text-sm">
Korean Skin Care & Beauty Clinic in Kathmandu, Nepal offers advanced facials, acne scar
removal, skin whitening, and anti-aging treatments. Our licensed dermatologist and expert
team combine Korean skincare science with personalized care to deliver safe, clinically
proven results. Trusted by Nepal’s top celebrities, we help clients rejuvenate, restore,
and achieve glowing, youthful skin with world-class skincare solutions.
</p>
<div class="flex flex-col gap-2">
<a href="tel:9849365761" class="flex items-center gap-2">
<Phone size={20} strokeWidth={1.5} color="#AF272F" />
<p class="text-sm">(+977) 984-936-5761 / 01-4011568</p>
</a>
<a href="https://maps.app.goo.gl/Gx2N5XvhZMqwpmFa8" class="flex items-center gap-2">
<MapPin size={20} strokeWidth={1.5} color="#AF272F" />
<p class="text-sm">City Center, First Floor, Kathmandu 44600, Nepal</p>
</a>
<a href="mailto:kscclinicnepal@gmail.com" class="flex items-center gap-2">
<Mail size={20} strokeWidth={1.5} color="#AF272F" />
<p class="text-sm">kscclinicnepal@gmail.com</p>
</a>
</div>
</div>
</div>
<div class="w-full">
<div class="flex flex-col gap-2">
<p class="text-lg font-semibold tracking-tight">About KSCBC</p>
<ul class="flex flex-col gap-2">
<li>
<a href="/about-us" class="text-sm">About us</a>
</li>
<li>
<a href="/about-us" class="text-sm">My Account</a>
</li>
<li>
<a href="/about-us" class="text-sm">Privacy & Policy</a>
</li>
<li>
<a href="/contact-us" class="text-sm">Contact Us</a>
</li>
</ul>
</div>
</div>
<div class="w-full">
<div class="flex flex-col gap-2">
<p class="text-lg font-semibold tracking-tight">Customer Support</p>
<ul class="flex flex-col gap-2">
<li>
<a href="/faq" class="text-sm">F.A.Q</a>
</li>
<li>
<a href="/exchange-policy" class="text-sm">Refund and Exchange Policy</a>
</li>
<li>
<a href="/payment" class="text-sm">Payment Information</a>
</li>
<li>
<a href="/shipping" class="text-sm">Shipping and Delivery</a>
</li>
</ul>
</div>
</div>
<div></div>
</div>
<hr class="mt-6 border border-primary/10" />
<div
class="mt-4 flex items-center justify-between max-md:flex-col max-md:items-start max-md:gap-4"
>
<p class="text-sm">&copy; {new Date().getFullYear()} Korean Skin Care & Beauty Clinic</p>
<ul class="flex items-center gap-4">
<li>
<a href="https://www.facebook.com/koreanskincareclinic/" target="_blank">
<SIIcon icon={siFacebook} size={16} color={'#0c0a09'} />
</a>
</li>
<li>
<a href="https://www.instagram.com/korean_skincare_nepal_/" target="_blank">
<SIIcon icon={siInstagram} size={16} color={'#0c0a09'} />
</a>
</li>
<li>
<a href="https://www.tiktok.com/@koreanskincareclinic_np" target="_blank">
<SIIcon icon={siTiktok} size={16} color={'#0c0a09'} />
</a>
</li>
</ul>
</div>
</foote>

236
src/lib/components/layouts/Navbar.svelte Normal file
View File

@@ -0,0 +1,236 @@
<script lang="ts">
import { tick } from 'svelte';
import { goto } from '$app/navigation';
import { enhance } from '$app/forms';
import {
ShoppingBag,
CircleUserRound,
Search,
SlidersHorizontal,
LogOut,
UserRound
} from '@lucide/svelte';
import logo from '$lib/assets/img/logo/full_logo.png?enhanced';
import { Button } from '$lib/components/ui/button';
import * as Sheet from '$lib/components/ui/sheet/index.js';
import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
import * as NavigationMenu from '$lib/components/ui/navigation-menu/index.js';
const languages = [
{
value: 'English',
label: 'English',
code: 'Us'
},
{
value: 'Nepali',
label: 'Nepali',
code: 'Np'
}
];
let { user, category } = $props();
let open = $state(false);
let value = $state(languages[0].value);
let triggerRef = $state<HTMLButtonElement>(null!);
let searchInputText = $state('');
const selectedValue = $derived(languages.find((f) => f.value === value)?.label);
function closeAndFocusTrigger() {
open = false;
tick().then(() => {
triggerRef.focus();
});
}
function searchInput(e: Event) {
e.preventDefault();
goto(`/category/search/${searchInputText}?q=${searchInputText}`, {
invalidateAll: true,
keepFocus: false,
replaceState: true
});
}
</script>
<header class="sticky top-0 z-50 border-y border-gray-200 bg-white">
<div
class="max-xs:gap-0 mx-auto flex max-w-screen-2xl items-center justify-between gap-10 px-10 py-4 max-lg:flex-wrap max-lg:gap-4 max-md:px-6 max-sm:border-y-0 max-sm:border-b max-sm:px-4"
>
<div class="max-xs:w-32 w-40 max-sm:w-32">
<a href="/" aria-label="Logo">
<enhanced:img src={logo} alt="Logo" class="w-64" />
</a>
</div>
<div class="flex w-full items-center gap-2 max-lg:order-3 max-lg:w-full">
<Sheet.Root>
<Sheet.Trigger>
<!-- <SlidersHorizontal class="md:hidden" strokeWidth={1.8} size={20} /> -->
<p class="text-sm font-medium md:hidden">Categories</p>
</Sheet.Trigger>
<Sheet.Content side="left" class="flex w-full flex-col gap-8 sm:w-full">
<Sheet.Header class="text-start">
<Sheet.Title>Categories</Sheet.Title>
</Sheet.Header>
<ScrollArea
class="w-full [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
scrollbarXClasses="border-none"
>
<div class="flex flex-col gap-4">
<!-- {#await category then categoryItem} -->
{#each category?.categories as item}
{#if item?.status !== 'draft'}
<a href="/category/{item?.id}/{item?.slug}" class="text-nowrap">{item?.title}</a>
{/if}
{/each}
<!-- {/await} -->
</div>
</ScrollArea>
</Sheet.Content>
</Sheet.Root>
<NavigationMenu.Root>
<NavigationMenu.List class="gap-0">
<NavigationMenu.Item class="max-md:hidden">
<NavigationMenu.Trigger>Categories</NavigationMenu.Trigger>
<NavigationMenu.Content>
<ul class="grid w-[400px] gap-1 p-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
<!-- {#await category then categoryItem} -->
{#each category?.categories as item}
{#if item?.status !== 'draft'}
<li>
<NavigationMenu.Link
href="/category/{item?.id}/{item?.slug}"
class="text-nowrap"
>
{item?.title}
</NavigationMenu.Link>
</li>
{/if}
{/each}
<!-- {/await} -->
</ul>
</NavigationMenu.Content>
</NavigationMenu.Item>
<NavigationMenu.Item>
<NavigationMenu.Link href="/brand" class="text-sm font-medium text-nowrap">
Brands
</NavigationMenu.Link>
</NavigationMenu.Item>
</NavigationMenu.List>
</NavigationMenu.Root>
<form class="max-xs:mt-2 w-full max-lg:w-full max-md:hidden" onsubmit={searchInput}>
<div
class="flex w-full items-center gap-1 rounded-lg border-[1.6px] border-gray-200 p-1 pl-4 focus-within:border-primary/40 max-sm:gap-2 max-sm:pl-3"
>
<Search strokeWidth={1.5} class="text-primary/45 max-sm:w-5" />
<input
type="text"
placeholder="Search for products..."
class="max-xs:text-xs w-full text-sm tracking-tight focus-visible:ring-0 focus-visible:outline-none max-sm:py-2"
bind:value={searchInputText}
/>
<Button
class="max-xs:text-xs rounded-md border border-primary px-4 py-2 text-sm font-semibold tracking-tight text-primary max-sm:hidden"
type="submit"
variant="outline">Search</Button
>
</div>
</form>
</div>
<div class="flex items-center gap-5 max-sm:gap-3">
<Sheet.Root>
<Sheet.Trigger class="flex flex-col items-center justify-center gap-2 md:hidden">
<Search class="md:hidden" strokeWidth={1.8} size={20} />
<p class="text-xs font-medium text-nowrap">Search</p>
</Sheet.Trigger>
<Sheet.Content side="right" class="flex w-full flex-col gap-0 sm:w-full">
<Sheet.Header class="text-start">
<Sheet.Title>Search</Sheet.Title>
</Sheet.Header>
<form class="w-full px-2 max-lg:w-full md:hidden" onsubmit={searchInput}>
<div
class="flex w-full items-center gap-1 rounded-lg border-[1.6px] border-gray-200 p-1 pl-4 focus-within:border-primary/40 max-sm:gap-2 max-sm:pl-3"
>
<Search strokeWidth={1.5} class="text-primary/45 max-sm:w-5" />
<input
type="text"
placeholder="Search for products..."
class="max-xs:text-xs w-full text-sm tracking-tight focus-visible:ring-0 focus-visible:outline-none max-sm:py-2"
bind:value={searchInputText}
/>
<Button
class="max-xs:text-xs rounded-md border border-primary px-4 py-2 text-sm font-semibold tracking-tight text-primary max-sm:hidden"
type="submit"
variant="outline">Search</Button
>
</div>
</form>
</Sheet.Content>
</Sheet.Root>
<div class="max-xs:gap-4 flex items-center gap-4 max-sm:gap-3">
<a
href={user?.authenticated ? '/cart' : '/login'}
class="max-xs:gap-0 flex flex-col items-center gap-1"
>
<ShoppingBag strokeWidth={1.2} class="max-xs:w-5" />
<p class="text-xs font-medium text-nowrap">Cart</p>
</a>
{#if user?.authenticated}
<DropdownMenu.Root>
<DropdownMenu.Trigger class="cursor-pointer">
<div class="flex flex-col items-center">
{#if user?.user?.profileImage}
<img
src={user?.user?.profileImage}
alt="{user?.user?.name} avatar"
class="aspect-square h-7 w-7 rounded-full object-cover object-center"
/>
{:else}
<p class="flex h-7 w-7 items-center justify-center rounded-full bg-slate-200">
{user?.user?.name.slice(0, 1)}
</p>
{/if}
<p class="text-xs font-medium">{user?.user?.name.split(' ')[0]}</p>
</div>
</DropdownMenu.Trigger>
<DropdownMenu.Content align="end" class="min-w-40">
<DropdownMenu.Group>
<DropdownMenu.GroupHeading>My Account</DropdownMenu.GroupHeading>
<DropdownMenu.Separator class="bg-primary/15 " />
<a href="/profile">
<DropdownMenu.Item class="cursor-pointer">
<UserRound size={20} strokeWidth={1.5} />
<span> Profile </span>
</DropdownMenu.Item>
</a>
<DropdownMenu.Item class="flex cursor-pointer items-center text-primary">
<form method="POST" action="/logout" use:enhance>
<button type="submit" class="flex items-center gap-2">
<LogOut size={20} strokeWidth={1.5} />
<p>Logout</p>
</button>
</form>
</DropdownMenu.Item>
</DropdownMenu.Group>
</DropdownMenu.Content>
</DropdownMenu.Root>
{:else}
<a href="/login" class="max-xs:gap-0 flex flex-col flex-nowrap items-center gap-1">
<CircleUserRound strokeWidth={1.2} class="max-xs:w-5" />
<p class="text-xs font-medium text-nowrap">Log in</p>
</a>
{/if}
</div>
<!-- <a
href="/booking"
class="text-nowrap rounded-md bg-primary px-5 py-3 text-sm font-semibold tracking-tight text-white max-md:px-3 max-md:py-3 max-md:text-xs max-xs:hidden"
>Book Appointment</a
> -->
</div>
</div>
</header>