heymlz/hossein-por-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of https://github.com/Byeto-Company/hossein_por_shop

Browse Source
This commit is contained in:
Parsa Nazer
2025-01-28 23:52:32 +03:30
parent 1dbcd2a2f1 7c26ef6752
commit e50d9525a0
8 changed files with 318 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/assets/css/tailwind.css
+51 -1
View File
@@ -121,12 +121,18 @@
--breakpoint-xs: 480px;
/* ANIMATIONS */
--animate-marquee: marquee 3s linear infinite;
--animate-marquee: marquee 20s linear infinite;
--animate-marquee-reverse: marquee 20s linear infinite reverse;
--animate-slide-down: slideDown 300ms ease-out;
--animate-slide-up: slideUp 300ms ease-out;
--animate-overlay-show: overlayShow 150ms ease-in;
--animate-content-show: contentShow 150ms ease-in;
--animate-slide-down-fade: slideDownAndFade 300ms ease-out;
--animate-slide-left-fade: slideLeftAndFade 300ms ease-out;
--animate-slide-up-fade: slideUpAndFade 300ms ease-out;
--animate-slide-right-fade: slideRightAndFade 300ms ease-out;
--animate-toast-hide: toastHide 100ms ease-in;
--animate-toast-in: toastSlideIn 600ms cubic-bezier(0.16, 1, 0.3, 1);
--animate-toast-out: toastSlideOut 200ms ease-out;
@@ -205,6 +211,50 @@
transform: translateX(calc(100% + var(--viewport-padding)));
}
}
@keyframes slideDownAndFade {
from {
opacity: 0;
transform: translateY(-2px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideLeftAndFade {
from {
opacity: 0;
transform: translateX(2px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideUpAndFade {
from {
opacity: 0;
transform: translateY(2px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideRightAndFade {
from {
opacity: 0;
transform: translateX(-2px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
}
/* CONTAINER */
frontend/components/cart/AddressModal.vue
+1 -1
View File
@@ -188,7 +188,7 @@ const addNew = () => {
id="address"
placeholder="آدرس خود را بنویسید"
v-model="addressData.full_address"
class="flex items-center field-sizing-content resize-none bg-slate-50 border-slate-200 hover:border-black max-h-[10rem] text-black justify-between cursor-text transition-all border-[1.5px] gap-3 typo-label-md px-4 py-3.5 selection:bg-slate-100 rounded-100 outline-none flex-1 text-sm placeholder-slate-400"
class="flex items-center field-sizing-content resize-none bg-slate-50 border-slate-200 hover:border-black focus:border-black max-h-[10rem] text-black justify-between cursor-text transition-all border-[1.5px] gap-3 typo-label-md px-4 py-3.5 selection:bg-slate-100 rounded-100 outline-none flex-1 !text-sm placeholder-slate-400"
></textarea>
</div>
</div>
frontend/components/global/Brands.vue
+14 -33
View File
@@ -1,52 +1,34 @@
<script setup lang="ts">
// types
type Props = {
// brands: string[];
}
};
// props
const props = defineProps<Props>();
const {} = toRefs(props);
// state
const { $gsap: gsap } = useNuxtApp();
// lifecycle
onMounted(() => {
gsap.to("#marquee-text-container", {
xPercent: -50, // Adjust based on content width
duration: 10, // Adjust for desired speed
ease: "none",
repeat: -1
});
});
</script>
<template>
<div class="relative w-full flex flex-col justify-center h-[350px]">
<div class="-rotate-z-2 z-20">
<div
class="bg-warning-500 flex pr-20 gap-20 py-2 w-max animate-marquee-reverse"
>
<span
v-for="i in 10"
class="text-[50px] text-white whitespace-nowrap font-semibold"
>
TEST {{ i }}
</span>
<span
v-for="i in 10"
class="text-[50px] text-white whitespace-nowrap font-semibold"
>
TEST {{ i }}
</span>
TEST {{ i }}
</span>
<span
v-for="i in 10"
class="text-[50px] text-white whitespace-nowrap font-semibold"
>
TEST {{ i }}
</span>
</div>
</div>
@@ -60,14 +42,13 @@ onMounted(() => {
>
TEST {{ i }}
</span>
<span
v-for="i in 10"
class="text-[50px] text-slate-300 whitespace-nowrap font-semibold"
>
<span
v-for="i in 10"
class="text-[50px] text-slate-300 whitespace-nowrap font-semibold"
>
TEST {{ i }}
</span>
</div>
</div>
</div>
</template>
</template>
frontend/components/global/Footer.vue
+2 -2
View File
@@ -19,8 +19,8 @@
class="bg-slate-950 border-slate-800 hover:border-slate-800 w-8/12"
/>
<Button
class="invert rounded-100 size-[3.5rem] !**:stroke-black"
end-icon="ci:arrow-right"
class="invert rounded-100 size-[3rem] !**:stroke-black"
end-icon="ci:arrow-left"
/>
</div>
<span class="text-slate-400 typo-p-sm">
frontend/components/global/Header.vue
+27 -11
View File
@@ -19,24 +19,24 @@ const { logout } = useAuth();
const nav_links = ref<NavLink[]>([
{
title: "خانه",
path: "/"
path: "/",
},
{
title: "محصولات",
path: "/products"
path: "/products",
},
{
title: "دسته بندی ها",
path: "/category"
path: "/category",
},
{
title: "ارتباط با ما",
path: "#"
path: "/contact-us",
},
{
title: "امکانات",
path: "#"
}
path: "#",
},
]);
</script>
@@ -60,13 +60,25 @@ const nav_links = ref<NavLink[]>([
/>
</button>
<NuxtLink to="/signin" v-else class="flex-center">
<Icon name="ci:profile" size="24px" class="**:stroke-black" />
<Icon
name="ci:profile"
size="24px"
class="**:stroke-black"
/>
</NuxtLink>
<NuxtLink to="/products" class="flex-center">
<Icon name="ci:search" size="21px" class="**:stroke-black" />
<Icon
name="ci:search"
size="21px"
class="**:stroke-black"
/>
</NuxtLink>
<button class="flex-center">
<Icon name="ci:cart" size="24px" class="**:stroke-black" />
<Icon
name="ci:cart"
size="24px"
class="**:stroke-black"
/>
</button>
</div>
@@ -84,7 +96,12 @@ const nav_links = ref<NavLink[]>([
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" height="23" fill="none" viewBox="0 0 220 40">
<svg
xmlns="http://www.w3.org/2000/svg"
height="23"
fill="none"
viewBox="0 0 220 40"
>
<path
fill="#0E1534"
d="M20 40c11.046 0 20-8.954 20-20V6a6 6 0 0 0-6-6H21v8.774c0 2.002.122 4.076 1.172 5.78a9.999 9.999 0 0 0 6.904 4.627l.383.062a.8.8 0 0 1 0 1.514l-.383.062a10 10 0 0 0-8.257 8.257l-.062.383a.8.8 0 0 1-1.514 0l-.062-.383a10 10 0 0 0-4.627-6.904C12.85 21.122 10.776 21 8.774 21H.024C.547 31.581 9.29 40 20 40Z"
@@ -95,7 +112,6 @@ const nav_links = ref<NavLink[]>([
></path>
</svg>
</div>
</div>
</header>
</template>
frontend/components/global/Select.vue
+81
View File
@@ -0,0 +1,81 @@
<script setup lang="ts">
// types
type Props = {
modelValue: string;
options: string[];
placeholder: string;
};
type Emit = {
"update:modelValue": [value: string];
};
// props
defineProps<Props>();
// emit
const emit = defineEmits<Emit>();
// state
const selectedValue = ref();
// watch
watch(
() => selectedValue.value,
(newValue) => {
emit("update:modelValue", newValue);
}
);
</script>
<template>
<SelectRoot v-model="selectedValue" dir="rtl">
<SelectTrigger
class="w-full flex items-center justify-between resize-none bg-slate-50 border-slate-200 hover:border-black focus:border-black h-[10rem] max-h-[12rem] text-black cursor-pointer transition-all border-[1.5px] gap-3 typo-label-md px-4 py-[12.5px] selection:bg-slate-100 rounded-100 outline-none flex-1 !text-sm placeholder-slate-400"
aria-label="Customise options"
>
<SelectValue
:placeholder="placeholder"
class="text-slate-400 font-iran-yekan-x"
/>
<Icon name="bi:chevron-down" size="16" />
</SelectTrigger>
<SelectPortal>
<SelectContent
data-side="bottom"
class="min-w-[160px] w-full bg-slate-50 border-slate-200 rounded-lg border shadow-sm will-change-[opacity,transform] data-[side=top]:animate-slide-down-fade data-[side=right]:animate-slide-left-fade data-[side=bottom]:animate-slide-up-fade data-[side=left]:animate-slide-right-fade z-[100]"
:side-offset="5"
>
<SelectViewport class="p-[5px]">
<SelectGroup>
<SelectItem
v-for="(option, index) in options"
:key="index"
class="text-xs leading-none w-full rounded-sm py-5 flex items-center justify-between h-[25px] pr-[12px] relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-slate-300 data-[highlighted]:text-black"
:value="option"
>
<SelectItemIndicator
class="absolute left-0 w-[25px] inline-flex items-center justify-center"
>
<Icon name="bi:check" size="20" />
</SelectItemIndicator>
<SelectItemText
class="text-end font-iran-yekan-x text-sm"
>
{{ option }}
</SelectItemText>
</SelectItem>
</SelectGroup>
</SelectViewport>
</SelectContent>
</SelectPortal>
</SelectRoot>
</template>
<style scoped></style>
frontend/pages/contact-us.vue
+142
View File
@@ -0,0 +1,142 @@
<script setup lang="ts">
// state
const contactInfo = ref({
name: "",
email: "",
phone: "",
requestType: "",
message: "",
});
const requestTypes = ref(["انتقادات", "پیشنهادات", "پیگیری سفارش"]);
const contactWays = ref([
{
title: "آدرس",
ways: [
{
type: "link",
title: "mlz@gmail.com",
path: "mailto:mlz@gmail.com",
},
],
},
{
title: "آدرس الکترونیکی",
ways: [
{
type: "link",
title: "mlz2@gmail.com",
path: "mailto:mlz2@gmail.com",
},
{
type: "link",
title: "mlz3@gmail.com",
path: "mailto:mlz3@gmail.com",
},
],
},
{
title: "تلفن",
ways: [
{
type: "link",
title: "+33 (0) 31-305-210",
path: "tel:12345678",
},
],
},
]);
</script>
<template>
<div class="w-full container flex flex-col">
<div class="w-full flex-center py-[5rem]">
<div
class="flex flex-col items-center gap-[1.5rem] text-black w-full"
>
<h1 class="typo-h-3">ارتباط با ما</h1>
<p>
ما اینجا هستیم تا کمک کنیم. برای پشتیبانی، بازخورد یا هر
سوالی که ممکن است داشته باشید تماس بگیرید.
</p>
</div>
</div>
<div class="w-full flex items-start justify-between">
<div class="w-8/12 flex flex-col items-start gap-16">
<div class="grid grid-cols-1 md:grid-cols-2 gap-[.6rem] w-full">
<div class="flex flex-col items-start w-full">
<Input
class="w-full"
placeholder="نام و نام خانوادگی"
/>
</div>
<div class="flex flex-col items-start w-full">
<Input class="w-full" placeholder="پست الکترونیکی" />
</div>
<div class="flex flex-col items-start w-full">
<Input class="w-full" placeholder="شماره تلفن" />
</div>
<div class="flex flex-col items-start w-full relative">
<Select
v-model="contactInfo.requestType"
:options="requestTypes"
placeholder="نوع درخواست"
/>
</div>
<div
class="flex flex-col items-start col-span-1 md:col-span-2 h-[10rem] max-h-[12rem]"
>
<textarea
placeholder="پیغام شما"
class="w-full flex items-center resize-none bg-slate-50 border-slate-200 hover:border-black focus:border-black h-[10rem] max-h-[12rem] text-black justify-between cursor-text transition-all border-[1.5px] gap-3 typo-label-md px-4 py-3.5 selection:bg-slate-100 rounded-100 outline-none flex-1 !text-sm placeholder-slate-400"
></textarea>
</div>
</div>
<div
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 w-full"
>
<div
v-for="(way, index) in contactWays"
:key="index"
class="flex flex-col gap-3"
>
<span class="text-slate-500 typo-p-md">
{{ way.title }}
</span>
<div
v-for="(link, index) in way.ways"
class="flex flex-col"
>
<a :href="link.path" class="text-black underline">{{
link.title
}}</a>
</div>
</div>
<div class="flex flex-col gap-3">
<span class="text-slate-500 typo-p-md">
شبکه های اجتماعی
</span>
<div class="flex items-center gap-3">
<a href="#" class="">
<Icon name="bi:telegram" size="20" />
</a>
<a href="#" class="">
<Icon name="bi:instagram" size="20" />
</a>
<a href="#" class="">
<Icon name="bi:twitter-x" size="20" />
</a>
</div>
</div>
</div>
</div>
<div class="w-4/12 h-full bg-red-300">
<img src="/mlz.jpeg" class="-mt-16" />
</div>
</div>
</div>
</template>
<style scoped></style>
frontend/public/mlz.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB