diff --git a/footer.html b/footer.html index e69de29..bd69f0d 100644 --- a/footer.html +++ b/footer.html @@ -0,0 +1,168 @@ + + + + + + + + + + + + +
+ +
+ + diff --git a/portfolio.html b/portfolio.html deleted file mode 100644 index b7d63f5..0000000 --- a/portfolio.html +++ /dev/null @@ -1,1015 +0,0 @@ - - - - - - - - - - - - Portfolio - - -
-
- -
- - - -
-
-
- تلفن خود را بچرخانید - -
-
- - - - - - -
-
-
-
- logo-petboom -
-
- -
-
-
-
-
-
- -
-
-
- petboom - - petboom -
-
-
-
-
- -
-
- -
- -
- -
- -
- -
-
-
-
- -
- - - - - - -
-
- imgpopup - -
-
- درباره ما - - بازدید از صفحه - - -
-
-
- -
- -
-
-
-

طراحی وبسایت | گیمیفیکیشن

-
- -

طراحی وبسایت اینوا | ترکیب خلاقیت با نوآوری

- -
-
- - کارفرما: علیرضا زندی -
-
- - اردیبهشت ۱۴۰۴ -
-
-
-
- -
- - - - اسکرول کنید -
-
- -
-
- - -
- درباره پروژه - -

درباره پروژه

-
- -
-

- ما در وبسایت اینوا تلاش کردیم که کشف ناشناخته‌ها را با خلاقیت و کیفیت گره بزنیم -

-

- نمونه پروژه‌های ما در طراحی UI/UX، طراحی وب‌سایت و توسعه محصولات دیجیتال که با تمرکز - بر تجربه کاربری و عملکرد ساخته شده‌اند. -

-

- نمونه پروژه‌های ما در طراحی UI/UX، طراحی وب‌سایت و توسعه محصولات دیجیتال که با تمرکز - بر تجربه کاربری و عملکرد ساخته شده‌اند. -

-
-
-
- -
-
- - - -
-
- -
-
-
-

چالش‌های هوشمندانه، راهکارهای نوآورانه می‌خواهد

-

- اینوا با ترکیب خلاقیت، داده‌ها و تکنولوژی راهکارهایی نوآورانه برای حل چالش‌های پروژه - ارائه می‌دهد. -

-
- -
- - - -
- -
-
-

چالش‌های پروژه

- -
    -
  • - - -

    بازار اشباع شده و وجود رقبای قدرتمند در این عرصه

    -
    • -
  • - - -

    - بازار اشباع شده و وجود رقبای قدرتمند در این عرصه ازار اشباع شده و وجود رقبای - ازار اشباع شده و وجود رقبای قدرتمند در این عرصه -

    -
    • -
  • - - -

    - بازار اشباع شده و وجود رقبای قدرتمند در این عرصه ازار اشباع شده و وجود رقبای - ازار اشباع شده و وجود رقبای قدرتمند در این عرصه -

    -
    • -
  • - - -

    بازار اشباع شده و وجود رقبای قدرتمند در این عرصه

    -
    • -
-
- - - -
-

راهکارهای ما

- -
    -
  • - -

    تمرکز بر نقاط قوت و بولد کردن آن‌ها در سراسر وب‌سایت

    -
    • -
  • - -

    - بازار اشباع شده و وجود رقبای قدرتمند در این عرصه ازار اشباع شده و وجود رقبای - ازاریشیشسی -

    -
    • -
  • - -

    - بازار اشباع شده و وجود رقبای قدرتمند در این عرصه ازار اشباع شده و وجود رقبای - ازاریشیشسی -

    -
    • -
  • - -

    تمرکز بر نقاط قوت و بولد کردن آن‌ها در سراسر وب‌سایت

    -
    • -
-
-
- -
-
-
-
-
- -
-
-
-

روند و فرایند شروع و پایان پروژه

-

- در اینوا، کیفیت اتفاقی نیست؛ ما برای هر پروژه مسیری مهندسی‌شده و خلاقانه را طی - می‌کنیم. -

-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
- -
-
-
-

گالری تصاویر پروژه

-
- - - -
-
-
-
-
- -
- -
-
- مشاهده کامل پروژه - -
-
-
-

مشاهده کامل صفحه وبسایت فرداد

-
-
-
-
-
- - - -
-
- درباره ما - - -
-
-
- -
- درباره ما -
-
- -
-
-
- -
-
- درباره ما - - -
-
-
- -
- درباره ما -
-
- -
-
-
- -
-
- درباره ما - - -
-
-
- -
- درباره ما -
-
- -
-
-
- - - -
-
- درباره ما - - -
-
-
- -
- درباره ما -
-
- -
-
-
- -
-
- درباره ما - - -
-
-
- -
- درباره ما -
-
- -
-
-
- -
-
- درباره ما - - -
-
-
- -
- درباره ما -
-
-
- - - - مشاهده کامل پروژه - - -
-
- -
-
-
-

دستاوردهای پروژه

-

اعداد و نتایج، داستان واقعی این پروژه را روایت می‌کنند.

-
- -
-
- 2300+ -

ثبت نام در هفته اول

-
- -
- 80% -

رضایت کامل کارفرما

-
- -
- 2300+ -

ثبت نام در هفته اول

-
- -
- 80% -

رضایت کامل کارفرماfsdfsdfsdfsdfsdfsdfs

-
-
-
-
- -
-
- -
-
-

پروژه بعدی می‌تونه برای شما باشه، اگر آماده‌اید وقتشه در موردش صحبت کنیم

-

ما از ایده‌های جدید همواره استقبال می‌کنیم.

-

- با پرکردن فرم و ثبت درخواست، ما در کمتر از 24 ساعت باهاتون تماس می‌گیریم و آماده - شنیدن ایده‌ها و پروژه‌هاتون هستیم. -

-
-
- درخواست جلسه -

درخواست‌جلسه

-
-
- -
-
-
- - - -
- -
- -
-
- درخواست پروژه - - - - - - -
-
    -
  • درخواست پروژه
    • -
  • جلسه مشاوره
    • -
  • همکاری با اینوا
    • -
  • سایر موارد
    • -
-
-
- -
- - - -
- -
- - - -
- -
- - -
- - -
- -
- -

درخواست شما با موفقیت ثبت شد

-

- کارشناسان ما حداکثر تا ۲۴ ساعت آینده با شما تماس خواهند گرفت. جزئیات جلسه نیز از - طریق پیامک و ایمیل برای شما ارسال می‌شود. -

- -
-
-
-
- -
-
-
-
-

نمونه‌کارهای مرتبط

-

- به این سبک پروژه‌ها علاقه دارید؟ پس پروژه‌های زیر را ببینید -

-
- - مشاهده همه پروژه‌ها - - -
- -
- -
-
- - - -
-
- 23 آذر 1404 - - -
-
-
- -
-

طراحی وبسایت حسابداری فرداد

-

طراحی سایت | گیمیفیکیشن

-
- - - -
-
- -
-
- 23 آذر 1404 - - -
-
-
- -
-

طراحی وبسایت زبان مهر

-

طراحی سایت | گیمیفیکیشن

-
- - - -
-
- -
-
- 23 آذر 1404 - - -
-
-
- -
-

طراحی صفحه گیمیفیکیشن زبان مهر

-

طراحی سایت | گیمیفیکیشن

-
- -
- - مشاهده همه پروژه‌ها - - -
-
-
-
- - diff --git a/public/images/1.png b/public/images/1.png deleted file mode 100644 index 6103de6..0000000 Binary files a/public/images/1.png and /dev/null differ diff --git a/public/images/2.png b/public/images/2.png deleted file mode 100644 index 28a0433..0000000 Binary files a/public/images/2.png and /dev/null differ diff --git a/public/images/3.png b/public/images/3.png deleted file mode 100644 index c739eab..0000000 Binary files a/public/images/3.png and /dev/null differ diff --git a/public/images/Component 28.svg b/public/images/Component 28.svg deleted file mode 100644 index fdc34b7..0000000 --- a/public/images/Component 28.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/public/images/DigitalPublish 1.png b/public/images/DigitalPublish 1.png new file mode 100644 index 0000000..b748f5f Binary files /dev/null and b/public/images/DigitalPublish 1.png differ diff --git a/public/images/Group.png b/public/images/Group.png new file mode 100644 index 0000000..702fb4f Binary files /dev/null and b/public/images/Group.png differ diff --git a/public/images/Vector (1).png b/public/images/Vector (1).png new file mode 100644 index 0000000..3983274 Binary files /dev/null and b/public/images/Vector (1).png differ diff --git a/public/images/Vector.png b/public/images/Vector.png new file mode 100644 index 0000000..a02a8d0 Binary files /dev/null and b/public/images/Vector.png differ diff --git a/public/images/media.jpg b/public/images/media.jpg deleted file mode 100644 index 6892503..0000000 Binary files a/public/images/media.jpg and /dev/null differ diff --git a/public/images/petboom-logo-v4.svg fill.svg b/public/images/petboom-logo-v4.svg fill.svg deleted file mode 100644 index c4f2bfa..0000000 --- a/public/images/petboom-logo-v4.svg fill.svg +++ /dev/null @@ -1,35 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/images/petboom-mobile.png b/public/images/petboom-mobile.png deleted file mode 100644 index 6325a66..0000000 Binary files a/public/images/petboom-mobile.png and /dev/null differ diff --git a/public/images/petboom.png b/public/images/petboom.png deleted file mode 100644 index 7e06a6d..0000000 Binary files a/public/images/petboom.png and /dev/null differ diff --git a/public/images/videotest.mp4 b/public/images/videotest.mp4 deleted file mode 100644 index d4f3e65..0000000 Binary files a/public/images/videotest.mp4 and /dev/null differ diff --git a/public/images/Ñëîé_10.png b/public/images/Ñëîé_10.png new file mode 100644 index 0000000..173f267 Binary files /dev/null and b/public/images/Ñëîé_10.png differ diff --git a/src/assets/css/footer-responsive.css b/src/assets/css/footer-responsive.css index e69de29..e341d7f 100644 --- a/src/assets/css/footer-responsive.css +++ b/src/assets/css/footer-responsive.css @@ -0,0 +1,68 @@ +@media screen and (max-width: 1400px) { +} +@media screen and (max-width: 1200px) { +} +@media screen and (max-width: 992px) { +.footer-container{ + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content:flex-start; + margin-bottom: 24px; +} +.footer-cta { + bottom: 93%; + left: 90px; + right: 90px; +} + +} +@media screen and (max-width: 768px) { +.footer-imgb , .footer-imga{ + display: none; +} +.footer-imgd { + display: block; + position: absolute; + top: 0; + left: 0; +} + .footer-imgc{ +display: block; + position: absolute; + bottom: 0; + right: 0; + } +.footer-cta-content { + border-radius: 10px; + padding: 24px 16px; + display: flex; + align-items: center; + flex-direction: column; + justify-content: space-between; + gap: 24px; +} +.footer-cta-txt h2 { + margin-bottom: 16px; + font-size: 22px; + font-weight: 700; + align-self: center; +} +.footer-cta-txt p { + font-size: 14px; + text-align: center; + line-height: 1.8; +} +} +@media screen and (max-width: 576px) { +.footer-cta { + left: 20px; + right: 20px; +} +.footer{ + padding-top: 129px; +} +.footer-bottom-line{ + margin-bottom: 92px; +} +} \ No newline at end of file diff --git a/src/assets/css/footer.css b/src/assets/css/footer.css index e69de29..f6343bf 100644 --- a/src/assets/css/footer.css +++ b/src/assets/css/footer.css @@ -0,0 +1,208 @@ +footer > .container { + max-width: 1240px; + padding: 0 20px; + margin: 0 auto; +} + +.footer { + margin-top: 183px; + background: #0d1222; + color: #9ea0a7; + position: relative; + padding-top: 141px; + +} + +.footer-cta { + position: absolute; + bottom: 88%; + left: 120px; + right: 120px; + /* transform: translateY(-60%); */ +} +.footer-cta-content { + background: #0274B2 ; + border-radius: 10px; + padding: 37px 48px; + display: flex; + align-items: center; + justify-content: space-between; + position: relative; +} +.footer-cta-txt{ + display: flex; + flex-direction: column; +} +.footer-cta-txt h2 { + color: #ffffff; + margin-bottom: 8px; + font-size: 24px; + font-weight: bold; + line-height: 1.5; +} +.footer-cta-txt p { + color: #ffffff; + font-size: 15px; + font-weight: 400; + line-height: 1.7; +} +.footer-cta-btn { + background: #fff; + color: var(--color-primary); + text-decoration: none; + padding: 7px 16px 7px 12px; + border-radius: 10px; + display: flex; + gap: 8px; + z-index: 1; +} +.footer-cta-btn span{ + font-size: 15px; + line-height: 1.7; + font-weight: 600; +} +.footer-cta-btn svg{ + width: 24px; + height: 24px; +} +.footer-imga{ + position: absolute; + bottom: 0; + left: 277px; +} +.footer-imgb{ + position: absolute; + top: 0; + left: 0; +} +.footer-imgc , .footer-imgd{ + display: none; +} +.footer-cta-btn:hover { + transform: translateY(-3px); +} + +.footer-container { + display: flex; + justify-content: center; + gap: 40px; +} +.footer-one { + max-width: 347px; + display: flex; + flex-direction: column; + gap: 16px; +} + +.footer-icon-two, +.footer-icon-three { + display: flex; + gap: 8px; +} +.footer-icon-two svg { + width: 20px; + height: 24px; + flex-shrink: 0; +} +.footer-column-two { + max-width: 304px; +} +.footer-column-three { + min-width: 161px; +} +.footer-column-four { + min-width: 252px; +} +.footer-icon-three svg { + width: 30px; + height: 24px; + flex-shrink: 0; +} +.ershad-logo{ + width: 24px; + height: 24px; +} +.footer-column h3 { + margin-bottom: 24px; + color: #fff; + position: relative; + font-size: 18px; +} +.footer-column h3::after { + content: ''; + position: absolute; + bottom: -8px; + right: 0; + width: 48px; + height: 1.5px; + background: #03aeff; + /* margin-bottom:16px; */ +} +.footer-column ul { + list-style: none; +} +.footer-column ul li { + margin-bottom: 12px; + line-height: 1.8; + color: #9ea0a7; +} +.footer-column a { + text-decoration: none; + color: #9ea0a7; + font-size: 15px; + font-weight: 400; +} +.footer-column div{ + font-size: 15px; + font-weight: 400; +} +.footer-column a:hover { + color: #03aeff; +} + +.footer-logo { + width: 150px; + margin-bottom: 20px; +} +.footer-column-txt { + color: #9ea0a7; + font-size: 16px; + font-weight: 400; + line-height: 1.8; +} +.social-links { + display: flex; + gap: 16px; +} +.social-links a { + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + transition: 0.3s; +} +.social-links SVG { + width: 32px; + height: 32px; +} + +.footer-bottom { + text-align: right; + padding: 16px 0 24px 0; + color: #9ea0a7; + font-size: 12px; + font-weight: 400; + line-height: 1.8; +} +.footer-bottom span { + color: #cfd0d3; +} +.footer-bottom-line { + position: absolute; + bottom: 0; + margin-bottom: 62px; + width: 100%; + height: 1px; + background: #3d414e; +} diff --git a/src/assets/css/portfolio-gallery.css b/src/assets/css/portfolio-gallery.css deleted file mode 100644 index 6650357..0000000 --- a/src/assets/css/portfolio-gallery.css +++ /dev/null @@ -1,272 +0,0 @@ -.gallery-section { - margin: 100px 0; -} -.gallery-section .tabs { - display: flex; - gap: 1rem; - margin-top: 16px; -} -.gallery-section .tabs button { - display: flex; - align-items: center; - justify-content: center; - height: 36px; - padding: 0 13px; - border-radius: 10px; - border: 1px solid #505068; - color: #505068; -} -.gallery-section .tabs button .txt { - font-size: 14px; - color: inherit; -} -.gallery-section .tabs button:hover { - border-color: #0274b3; - color: #0274b3; -} -.gallery-section .tabs button.current { - border-color: #0274b3; - background-color: #0274b3; - color: #fff; -} -.gallery-section .gallery-thumbnail { - margin: 24px 0 32px; -} -.gallery-section .gallery-thumbnail p { - display: none; -} -.gallery-section .gallery-thumbnail .thumbnail { - position: relative; - max-width: 720px; - margin: 0 auto; - border-radius: 16px; - overflow: hidden; - cursor: pointer; -} -.gallery-section .gallery-thumbnail .thumbnail::before { - content: ''; - position: absolute; - inset: 0; - pointer-events: none; - background-image: linear-gradient(#00000000, #000000); - opacity: 0; - transition: opacity 200ms; -} -.gallery-section .gallery-thumbnail .thumbnail:hover::before { - opacity: 1; -} -.gallery-section .gallery-thumbnail .thumbnail img { - display: block; - width: 100%; - height: auto; - aspect-ratio: 16 / 9; - object-fit: cover; -} -.gallery-section .gallery-thumbnail .thumbnail .expand-icon { - position: absolute; - right: 50%; - bottom: 0; - transform: translateX(50%); - - display: grid; - place-items: center; - width: 48px; - height: 48px; - border-radius: 6px 6px 0 0; - background-color: #fff; -} -.gallery-section .gallery-thumbnail .thumbnail .expand-icon svg { - width: 32px; - height: 32px; - transition: scale 200ms; -} -.gallery-section .gallery-thumbnail .thumbnail .cta { - position: absolute; - bottom: 50%; - right: 50%; - transform: translate(50%, 50%); -height: 40px; - display: flex; - align-items: center; - justify-content: center; - gap: 8px; - padding: 4px 12px 4px 10px; - background-color: #eaf7ff; - border-radius: 8px; - opacity: 0; - transition: opacity 200ms; -} -.gallery-section .gallery-thumbnail .thumbnail .cta .txt { - font-size: 14px; - color: #0274b3; -} -.gallery-section .gallery-thumbnail .thumbnail .cta svg { - width: 20px; - height: 20px; - stroke: #0274b3; -} -.gallery-section .gallery-thumbnail .thumbnail:hover .expand-icon svg { - scale: 1.15; -} -.gallery-section .gallery-thumbnail .thumbnail:hover .cta { - opacity: 1; - height: 40px; - font-size: 15px; -} -.gallery-section .gallery-items { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 24px 16px; - list-style-type: none; -} -.gallery-section .gallery-items li { - position: relative; - border-radius: 10px; - overflow: hidden; - cursor: pointer; -} -.gallery-section .gallery-items li::before { - content: ''; - position: absolute; - inset: 0; - background-image: linear-gradient(#00141f00, #00141f); - opacity: 0; - transition: opacity 200ms; -} -.gallery-section .gallery-items li img { - display: block; - width: 100%; - height: auto; - aspect-ratio: 4 / 3; - object-fit: cover; -} -.gallery-section .gallery-items li .title { - position: absolute; - bottom: 0; - right: 0; - left: 0; - padding: 0px 12px 16px; - display: flex; - opacity: 0; - transition: opacity 200ms; -} -.gallery-section .gallery-items li .title .txt { - font-size: 15px; - line-height: 1.7; - font-weight: bold; - color: #fff; -} -.gallery-section .gallery-items li .title svg { - width: 24px; - height: 24px; - stroke: #fff; - margin-right: auto; -} -.gallery-section .gallery-items li:hover .title { - opacity: 1; -} -.gallery-section .gallery-items li:hover::before { - opacity: 1; -} -.gallery-section .b-cta { - height: 40px; - background-color: var(--color-primary); - border-radius: 10px; - padding: 0 12px; - - display: flex; - align-items: center; - justify-content: center; - gap: 8px; - - width: fit-content; - margin: 32px auto 0; -} -.gallery-section .b-cta .txt { - font-size: 15px; - color: #ffffff; - font-weight: 400; -} -.gallery-section .b-cta svg { - width: 20px; - height: 20px; - stroke: #fff; -} -.pagination { - margin-top: 32px; -} -.pagination ul { - list-style-type: none; - display: flex; - align-items: center; - justify-content: center; - gap: 8px; - margin: initial; -} -.pagination ul a { - width: 32px; - height: 32px; - display: grid; - place-items: center; - border-radius: 8px; - font-size: 16px; - font-weight: normal; - border: none; - color: #000; - transform: none; - line-height: normal; - transition: none; - box-shadow: 2px 10px 20px 0 #595c6018; -} -.pagination ul a svg { - width: 16px; - height: 16px; - stroke: #505068; -} -.pagination ul li:hover a { - background-color: #e5efff; -} -.pagination ul li:hover a svg { - stroke: var(--color-primary); -} -.pagination ul .current a { - background-color: var(--color-primary); - color: #fff; -} -@media screen and (max-width: 768px) { - .gallery-section .gallery-items { - grid-template-columns: repeat(1, 1fr); - } - .gallery-section .gallery-thumbnail .thumbnail { - margin: 0 -20px; - border-radius: 0; - } - .gallery-section .gallery-thumbnail p { - display: inline-block; - font-size: 15px; - font-weight: bold; - margin-top: 16px; - color: var(--color-title); - } - .gallery-section .gallery-items li:hover::before, - .gallery-section .gallery-items li .title svg { - display: none; - } - .gallery-section .gallery-items li .title { - position: static; - padding: initial; - opacity: 1 !important; - } - .gallery-section .gallery-items li .title .txt { - font-size: 15px; - font-weight: bold; - margin-top: 8px; - color: var(--color-title); - } - .gallery-section .gallery-items li { - overflow: visible; - } - .gallery-section .gallery-items li img { - border-radius: 10px; - } -} diff --git a/src/assets/css/portfolio-responsive.css b/src/assets/css/portfolio-responsive.css deleted file mode 100644 index 8934835..0000000 --- a/src/assets/css/portfolio-responsive.css +++ /dev/null @@ -1,443 +0,0 @@ -@media screen and (max-width: 1400px) { -} -@media screen and (max-width: 1200px) { -} -@media screen and (max-width: 992px) { - .about-section > .container { - flex-direction: column; - padding: 48px 20px 78px; - gap: 24px; - } - .about-section-title, - .about-section-p { - flex-basis: initial; - } - .about-section-uptitle, - .about-section-title svg { - display: none; - } - .vs, - .column-titlec, - .column-titler { - display: none; - } - .challenge-header { - text-align: right; - } - .challenge-header p { - font-size: 14px; - } - .mobile-toggle { - display: flex; - overflow: hidden; - } - .toggle-btn { - display: none; - } - .toggle-btn.is-active { - display: flex; - } - .scroll-pagination { - display: flex; - } - .table-wrapper { - overflow-x: auto; - scroll-snap-type: x mandatory; - scroll-behavior: smooth; - -webkit-overflow-scrolling: touch; - } - .column { - min-width: 100%; - scroll-snap-align: start; - } - .form-section-left { - flex: 0 1 100%; - margin-top: 24px; - } - - .form-section-right { - flex: 0 1 100%; - } - - .form-img p { - font-size: 36px; - } - .form-btn { - width: 100%; - } - - .media { - width: auto; - } -} -@media screen and (max-width: 992px) and (orientation: landscape) { - .portfolio-logo-wrapper { - width: 660px !important; - max-width: 660px !important; - } -} -@media screen and (max-width: 768px) { - .about-section { - padding: initial; - } - .about-section > .container { - border-radius: initial; - } - .about-section-title { - font-size: 48px; - } - .about-section-p .bold { - font-size: 20px; - } - .related-boxes { - flex-wrap: wrap; - } - .related-button { - display: none; - } - .related-button-mobile { - display: flex; - gap: 8px; - height: 40px; - padding: 0px 12px 0px 10px; - background-color: var(--color-primary); - border-radius: 10px; - color: #ffffff; - align-items: center; - align-self: center; - margin-top: 24px; - } - .related-button-mobile span { - font-size: 15px; - font-weight: 400; - } - .showcase-section > .container-showcase { - height: calc(var(--slides-count) * 100dvh); - } - .showcase-sticky { - height: 100vh; - } - .showcase-inner { - position: relative; - width: 100%; - height: 100vh; - display: block; - } - .showcase-media-side, - .showcase-text-side { - position: absolute; - inset: 0; - width: 100%; - height: 100%; - } - .showcase-media-wrapper { - width: 100%; - height: 100%; - max-width: unset; - border-radius: 0; - } - .media-item { - position: absolute; - inset: 0; - opacity: 0; - transform: translateY(80px); - transition: - opacity 0.9s ease, - transform 0.9s ease; - } - .media-item.active { - opacity: 1; - transform: translateY(0); - z-index: 2; - } - .mobile-pos-one img, - .mobile-pos-one video, - .mobile-pos-two img, - .mobile-pos-two video, - .mobile-pos-three img, - .mobile-pos-three video { - width: 100%; - height: 100%; - object-fit: cover; - } - .media-item::after { - content: ''; - position: absolute; - inset: 0; - z-index: 1; - } - .gradient-one::after, - .gradient-two::after, - .gradient-three::after { - background: linear-gradient( - 0deg, - rgba(0, 20, 31, 0.9) 6.09%, - rgba(0, 20, 31, 0.8) 17.54%, - rgba(0, 20, 31, 0.7) 26.09%, - rgba(0, 20, 31, 0.6) 36.3%, - rgba(0, 20, 31, 0.5) 43.43%, - rgba(0, 63, 97, 0) 87.09% - ); - } - .showcase-text-side { - z-index: 5; - overflow: hidden; - pointer-events: none; - } - .text-track { - position: absolute; - inset: 0; - } - .text-item { - position: absolute; - inset: 0; - height: 100vh; - display: flex; - flex-direction: column; - justify-content: flex-end; - - padding: 0 24px calc(env(safe-area-inset-bottom) + 48px); - - color: white; - - opacity: 0; - - visibility: hidden; - pointer-events: none; - z-index: 1; - - transform: translateY(60px); - - transition: - transform 0.6s ease, - opacity 0.6s ease, - visibility 0.6s ease; - } - .text-item.active { - opacity: 1; - visibility: visible; - z-index: 5; - transform: translateY(0); - } - - .text-item span { - color: #aebcc5; - font-size: 18px; - margin-bottom: 8px; - } - .text-item h2 { - color: #ffffff; - font-size: 22px; - margin-bottom: 16px; - } - .text-item p { - color: #e9ecee; - font-size: 16px; - line-height: 1.8; - } - .container-showcase { - padding: 0; - margin: 0 auto; - } - .showcase-text-side::after { - display: none; - } - .hero-section { - padding-right: 19px; - padding-bottom: 122px; - } - - .hero-section video, - .hero-section .bg-gif { - position: absolute; - inset: 0; - width: 100%; - height: 100%; - object-fit: cover; - } - .hero-content { - position: relative; - z-index: 2; - text-align: right; - display: flex; - flex-direction: column; - } - .hero-category { - position: relative; - display: inline-block; - } - .hero-category p { - font-size: 13px; - } - .hero-category::after { - content: ''; - position: absolute; - width: 225px; - height: 1px; - background: #8898a3; - margin-top: 8px; - } - .hero-title { - font-size: 24px; - padding-left: 850px; - } - .hero-meta-inner { - font-size: 13px; - } - .hero-scroll-down span { - font-size: 12px; - margin-top: 8px; - } - - .portfolio-floating-nav { - width: 390px; - max-width: calc(100vw - 16px); - bottom: -140px; - } - - .portfolio-floating-nav.show { - bottom: 16px; - } - - .portfolio-nav-inner { - width: 100%; - padding: 8px 10px; - gap: 8px; - border-radius: 24px; - } - .portfolio-nav-action { - display: none; - } - - .portfolio-nav-scroll-wrapper, - .portfolio-nav-scroll { - flex: 1; - min-width: 0; - } - - .portfolio-nav-scroll { - width: 100%; - overflow-x: auto; - } - - .portfolio-nav-links { - gap: 6px; - padding: 8px; - } - - .portfolio-nav-btn { - font-size: 12px; - padding: 7px 10px; - white-space: nowrap; - } - - .portfolio-nav-meeting { - min-width: auto; - flex-shrink: 0; - font-size: 12px; - padding: 7px 10px; - white-space: nowrap; - } - .portfolio-scroll-track { - transform: translateX(-50%); - bottom: 6px; - right: 187px; - width: 56px; - height: 4px; - border-radius: 999px; - background: #d9d9d9; - overflow: hidden; - } - - .portfolio-scroll-thumb { - width: 28px; - right: 0; - } - - .next-popup, - .prev-popup { - display: none; - } - .down-txt { - display: block; - } - .img-popup-img { - width: 390px; - height: 292px; - border-radius: 0; - } -} - -@media screen and (max-width: 576px) { - .about-section-circleup { - top: -192px; - right: -210px; - } - .about-section-circledown { - bottom: -240px; - left: -220px; - } - .process-section > .container { - padding: 0; - } - .process-title { - padding: 0 20px; - } - .step { - padding: 24px 67px 24px 20px; - } - .step-title { - font-size: 16px; - line-height: 1.5; - } - .step.active .step-title { - font-size: 18px; - padding-left: 10px; - } - .toggle-icon { - width: 24px; - height: 24px; - } - .step-number-bg { - right: 15px; - top: 6px; - font-size: 40px; - font-weight: normal; - letter-spacing: -5px; - transform: initial; - } - .step-list li, - .step-intro { - font-size: 15px; - line-height: 1.7; - color: var(--color-body-text); - } - .star-form { - top: 35px; - left: 20px; - width: 56px; - height: 56px; - } - .form-section-text h2 { - margin-bottom: 16px; - font-size: 18px; - } - .form-section-text p, - .result-section-header p, - .process-title p, - .related-titlep { - font-size: 14px; - } - .form-input, - .form-text { - flex-basis: 100%; - } - .side-buttons { - display: none; - } - .container-hero { - max-width: 1240px; - padding: 0; - margin: 0 auto; - } -} diff --git a/src/assets/css/portfolio.css b/src/assets/css/portfolio.css deleted file mode 100644 index 58410cb..0000000 --- a/src/assets/css/portfolio.css +++ /dev/null @@ -1,1806 +0,0 @@ -section > .container { - /* اینجا کنتیر عمومی تعریف شده برای سکشن ها */ - - /* چهل پیکسل اضافه برای پدینگ راست و چپ */ - max-width: 1240px; - padding: 0 20px; - margin: 0 auto; -} -.about-section { - padding: 0 20px; -} -section[class*='-section'] { - margin-bottom: 100px; -} -.container-hero{ - max-width: 1240px; - padding: 0 20px; - margin: 0 auto; -} -.hero-section { - position: relative; - width: 100%; - height: 100vh; - overflow: hidden; - display: flex; - align-items: end; - justify-content: flex-start; - /* color: #fff; */ - /* padding-right: 120px; */ - padding-bottom: 88px; -} -.hero-section video, -.hero-section .bg-gif { - position: absolute; - inset: 0; - width: 100%; - height: 100%; - object-fit: cover; -} -.hero-section::before { - content: ''; - position: absolute; - inset: 0; - z-index: 1; - background: - linear-gradient( - 0deg, - rgba(0, 20, 31, 0.9) -11.31%, - rgba(0, 20, 31, 0.8) -3.78%, - rgba(0, 20, 31, 0.7) 1.84%, - rgba(0, 20, 31, 0.578084) 8.55%, - rgba(0, 20, 31, 0.493025) 13.23%, - rgba(0, 63, 97, 0) 41.93% - ), - linear-gradient(106.84deg, rgba(0, 63, 97, 0) 0%, rgba(0, 20, 31, 0.6) 94.22%), - linear-gradient(0deg, rgba(0, 20, 31, 0.15), rgba(0, 20, 31, 0.15)); -} -.hero-content { - position: relative; - z-index: 2; - text-align: right; - display: flex; - flex-direction: column; - min-width: 1200px; -} - -.hero-category { - position: relative; - display: inline-block; -} -.hero-category p { - color: #eaeef0; - font-size: 14px; - line-height: 1.8; -} -.hero-category::after { - content: ''; - position: absolute; - width: 225px; - height: 1px; - background: #8898a3; - margin-top: 8px; -} -.hero-title { - font-size: 36px; - line-height: 1.5; - font-weight: bold; - margin-bottom: 16px; - margin-top: 8px; - color: #eaeef0; - padding-left: 600px; -} -.hero-meta { - display: flex; - gap: 12px; -} -.hero-meta-inner { - display: flex; - gap: 8px; - font-size: 14px; - color: var(--color-pastel-main); -} -.hero-scroll-down { - display: flex; - flex-direction: column; - align-items: center; - position: absolute; - bottom: 30px; - left: 50%; - transform: translateX(-50%); - z-index: 2; - text-align: center; - font-size: 14px; - opacity: 0.8; -} -.hero-scroll-down span { - font-size: 12px; - margin-top: 8px; - color: #ffffff; -} -.hero-scroll-down svg { - color: #777; - transition: fill 0.3s ease; -} -.icon-main * { - animation: mainStep 3s infinite; -} -.arrow-1 * { - animation: firstStep 3s infinite; -} -.arrow-2 * { - animation: secondStep 3s infinite; -} -@keyframes mainStep { - 0% { - color: #777; - filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0)); - } - - 10%, - 85% { - color: #fff; - filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.8)); - } - - 100% { - color: #777; - filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0)); - } -} -@keyframes firstStep { - 0%, - 40% { - color: #fff; - } - 50%, - 100% { - color: #777; - } -} -@keyframes secondStep { - 0%, - 40% { - color: #777; - } - 50%, - 90% { - color: #fff; - } - 100% { - color: #777; - } -} - -.portfolio-floating-nav { - position: fixed; - left: 50%; - bottom: -140px; - transform: translateX(-50%); - width: 668px; - z-index: 999; - transition: bottom 0.45s ease; -} -.portfolio-floating-nav.show { - bottom: 24px; -} -.portfolio-nav-inner { - display: flex; - align-items: center; - gap: 12px; - background: #ffffff; - border: 1px solid #acacac; - border-radius: 32px; - padding: 8px 16px; - overflow: hidden; -} -.portfolio-nav-scroll::-webkit-scrollbar { - display: none; -} -.portfolio-nav-links { - position: relative; - display: flex; - align-items: center; - gap: 8px; - min-width: max-content; - padding: 8px; - background-color: #f0f4f8; - border-radius: 10px; - width: max-content; - -} -.portfolio-nav-scroll-wrapper { - position: relative; - flex: 1; - min-width: 0; -} -.portfolio-nav-scroll { - overflow-x: auto; - overflow-y: hidden; - scrollbar-width: none; - direction: rtl; - flex: 1; - min-width: 0; - max-width: 100%; - cursor: grab; -} -.portfolio-nav-scroll::-webkit-scrollbar { - display: none; -} -.portfolio-nav-links { - display: flex; - align-items: center; - gap: 10px; - width: max-content; -} -.portfolio-scroll-track { - /* position: absolute; */ - position: fixed; - bottom: 10px; - width: 56px; - height: 4px; - right: 460px; - border-radius: 999px; - background: #d9d9d9; - overflow: hidden; -} -.portfolio-scroll-thumb { - position: absolute; - top: 0; - right: 0; - width: 28px; - height: 100%; - border-radius: 999px; - background: var(--color-primary); - transition: right 0.08s linear; -} -.portfolio-nav-btn { - border-radius: 10px; - border: 1px solid var(--color-body-text); - padding: 8px 12px; - flex-shrink: 0; - font-size: 13px; - font-weight: normal; - color: var(--color-body-text); - position: relative; - z-index: 2; -} -.portfolio-nav-btn:hover, -.portfolio-nav-btn.active { - border-color: var(--color-primary); - color: var(--color-primary); -} -.portfolio-nav-project-btn { - border-radius: 10px; - background-color: var(--color-primary); - padding: 8px 12px; - flex-shrink: 0; - font-size: 13px; - font-weight: normal; - color: #ffffff; - display: flex; - text-align: center; - align-items: center; - gap: 4px; - min-width: 135px; -} -.portfolio-nav-project-btn svg { - align-items: center; -} -.portfolio-nav-project-btn:hover { - background: var(--color-primary); -} -.portfolio-nav-link-btn { - background: var(--color-primary); - color: white; -} -.portfolio-nav-link-btn:hover { - background-color: var(--color-primary); -} -.portfolio-nav-meeting { - background: #c5d7ec; - color: var(--color-primary); - font-size: 13px; - font-weight: normal; - padding: 8px 12px; - border-radius: 10px; - min-width: 111px; -} -.portfolio-nav-meeting:hover { - background: #c8ddf1; -} - -.portfolio-preview-modal { - position: fixed; - inset: 0; - z-index: 2000; - opacity: 0; - visibility: hidden; - transition: 0.35s ease; -} -.portfolio-preview-modal.show { - opacity: 1; - visibility: visible; -} -.portfolio-preview-backdrop { - position: absolute; - inset: 0; - background: rgba(0, 0, 0, 0.72); - backdrop-filter: blur(5px); -} -.portfolio-preview-content { - position: relative; - width: min(1000px, calc(100% - 32px)); - max-height: calc(100vh - 40px); - overflow: auto; - background: white; - border-radius: 24px; - padding: 20px; - margin: 20px auto; - z-index: 2; -} -.portfolio-preview-content img { - width: 100%; - display: block; - border-radius: 18px; -} -.portfolio-preview-close { - position: sticky; - top: 0; - margin-right: auto; - width: 44px; - height: 44px; - border-radius: 50%; - border: none; - background: #0f87ca; - color: white; - font-size: 22px; - cursor: pointer; - margin-bottom: 16px; -} -.portfolio-popup { - position: fixed; - inset: 0; - width: 100%; - height: 100vh; - background: #04263b; - display: flex; - justify-content: center; - align-items: center; - z-index: 999; - opacity: 0; - visibility: hidden; - transition: 0.35s ease; -} -.portfolio-popup.active { - opacity: 1; - visibility: visible; -} -.portfolio-logo-wrapper { - position: relative; - top: 69px; - /* width: 794px; */ - height: 892px; - overflow: hidden; - transition: - width 0.5s ease, - height 0.5s ease; -} -.portfolio-wrapper { - display: flex; - gap: 0; - position: relative; -} -.portfolio-modal { - width: 704px; - height: 684px; - background: #ffffff; - border-radius: 7px; - overflow: hidden; - padding: 6px 7px; - transition: - width 0.5s ease, - height 0.5s ease, - border-radius 0.5s ease, - transform 0.5s ease; -} -.portfolio-popup.active .portfolio-modal { - transform: translateY(0) scale(1); -} -.portfolio-logo-wrapper.mobile-view { - width: 350px; - height: 820px; -} -.portfolio-logo-wrapper.mobile-view .logo-popup { - left: -50%; -} -.portfolio-logo-wrapper.mobile-view .portfolio-modal { - width: 360px; - height: 740px; -} -.portfolio-logo-wrapper.mobile-view .desktop-image { - opacity: 0; - visibility: hidden; -} - -.portfolio-logo-wrapper.mobile-view .mobile-image { - opacity: 1; - visibility: visible; -} -.close-popup { - position: absolute; - top: 24px; - right: 20px; - background: none; - border: none; - cursor: pointer; - z-index: 99999; - pointer-events: auto; -} -.close-popup svg { - transition: transform 0.3s ease; -} -.close-popup:hover svg { - transform: rotate(90deg); -} -.next-popup { - position: absolute; - top: 50%; - right: 24px; - background: none; - border: none; - cursor: pointer; -} -.prev-popup { - position: absolute; - top: 50%; - left: 24px; - background: none; - border: none; - cursor: pointer; - transform: rotate(180deg); -} -.portfolio-scroll { - width: 100%; - height: 100%; - overflow-y: auto; - overflow-x: hidden; - border-radius: 7px; - scroll-behavior: smooth; - overscroll-behavior: contain; - scrollbar-width: none; - border: 1px solid var(--color-primary); - position: relative; -} -.portfolio-scroll::-webkit-scrollbar { - display: none; -} -.portfolio-scroll img { - width: 100%; -} -.portfolio-scroll::-webkit-scrollbar { - display: none; -} -.custom-scroll { - width: 39px; - height: 112px; - background: #ffffff; - border-radius: 0 7px 7px 0; - display: flex; - justify-content: center; - align-items: center; - position: relative; - z-index: 10; - top: 125px; -} -.custom-scroll::before { - content: ''; - position: absolute; - top: -40px; - left: 0; - width: 35px; - height: 40px; - background: transparent; - border-bottom-left-radius: 7px; - box-shadow: -6px 6px 0 #ffffff; -} - -.custom-scroll::after { - content: ''; - position: absolute; - bottom: -40px; - left: 0; - width: 35px; - height: 40px; - background: transparent; - border-top-left-radius: 7px; - box-shadow: -6px -6px 0 #ffffff; -} -.logo-popup::before { - content: ''; - position: absolute; - right: -30px; - left: 0; - bottom: 0; - width: 30px; - height: 30px; - background: transparent; - border-bottom-left-radius: 7px; - box-shadow: -6px 6px 0 #ffffff; -} - -.portfolio-modal-switch { - width: 90px; - padding: 14px 10px; - border-radius: 60px; - background: rgba(255, 255, 255, 0.08); - border: 1px solid rgba(255, 255, 255, 0.12); - backdrop-filter: blur(10px); - - display: flex; - flex-direction: column; - align-items: center; - gap: 18px; - - position: relative; -} -.switch-btn { - width: 58px; - height: 58px; - border: none; - border-radius: 50%; - background: transparent; - cursor: pointer; - - display: flex; - align-items: center; - justify-content: center; - - transition: all 0.35s ease; - position: relative; - z-index: 2; -} -.switch-btn::before { - content: ''; - position: absolute; - inset: 0; - border-radius: 50%; - background: linear-gradient(135deg, #2563eb, #06b6d4); - opacity: 0; - transform: scale(0.7); - transition: all 0.35s ease; - z-index: -1; -} - -.switch-btn.active::before { - opacity: 1; - transform: scale(1); -} - -.switch-btn:hover { - transform: scale(1.08); -} -.icon, -.arrow { - fill: white; -} - -.portfolio-modal-switch::before { - content: ''; - position: absolute; - width: 58px; - height: 58px; - border-radius: 50%; - background: white; - left: 50%; - transform: translateX(-50%); - top: 14px; - transition: top 0.45s cubic-bezier(0.76, 0, 0.24, 1); - z-index: 1; -} - -.portfolio-modal-switch.mobile-active::before { - top: 108px; -} -.rotate-overlay { - display: none; -} - -.rotate-overlay.show { - display: flex; -} - -.portfolio-logo-wrapper.mobile-view { - display: block; -} - -.portfolio-logo-wrapper.rotated-desktop { - transform: rotate(90deg); - transform-origin: center; -} - -.logo-popup::after { - content: ''; - position: absolute; - bottom: 0; - left: -30px; - width: 30px; - height: 30px; - background: transparent; - border-bottom-right-radius: 7px; - box-shadow: 6px 6px 0 #ffffff; -} -.scroll-track { - width: 5px; - height: 93px; - background: #dfdfdf; - border-radius: 26.6px; - position: relative; -} -.scroll-thumb { - position: absolute; - top: 0; - left: 50%; - transform: translateX(-50%); - user-select: none; - touch-action: none; - border-radius: 50%; - background: var(--color-primary); - width: 16.62px; - height: 16.62px; - border: 5px solid #d9ecff; - cursor: pointer; - box-shadow: 0 4px 12px var(--color-pastel-main); -} -body.dragging-scroll { - user-select: none; -} -.side-buttons-wrapper { - display: flex; - align-items: flex-start; - gap: 48px; - position: relative; - top: 69px; - transition: transform 0.3s ease; -} -.side-buttons { - position: relative; - top: 168px; - display: flex; - flex-direction: column; - align-items: center; - text-align: center; -} -.logo-popup { - width: 151px; - height: 37px; - background: #fff; - border-radius: 7px 7px 0 0; - display: flex; - flex-direction: column; - position: relative; - left: -70%; - top: 0; - align-items: center; -} -.logo-popup-img img { - border-radius: 7px; - width: 109px; - height: 32px; -} -/* پیشفرض دسکتاپ */ -.desktop-image { - display: block; -} - -.mobile-image { - display: none; -} - -.portfolio-logo-wrapper.mobile-view .desktop-image { - display: none; -} - -.portfolio-logo-wrapper.mobile-view .mobile-image { - display: block; -} -.desktop-image { - opacity: 1; - visibility: visible; - z-index: 2; -} -.mobile-image { - opacity: 0; - visibility: hidden; - z-index: 1; -} -.desktop-image, -.mobile-image { - width: 100%; - position: absolute; - top: 0; - left: 0; - pointer-events: none; - transition: opacity 0.4s ease; - backface-visibility: hidden; -} -.portfolio-logo-wrapper.mobile-view .desktop-image { - opacity: 0; - visibility: hidden; -} -.portfolio-logo-wrapper.mobile-view .mobile-image { - opacity: 1; - visibility: visible; -} -.rotate-overlay { - position: absolute; - inset: 0; - background: rgba(4, 38, 59, 0.92); - display: flex; - justify-content: center; - align-items: center; - z-index: 9990; - opacity: 0; - visibility: hidden; - transition: 0.35s ease; -} -.rotate-overlay.show { - opacity: 1; - visibility: visible; -} -.rotate-message { - display: flex; - flex-direction: column; - align-items: center; - gap: 16px; - color: #fff; - font-size: 22px; - font-weight: 600; -} -.portfolio-rotate-container { - width: 100%; - height: 100%; - transition: transform 0.6s ease; -} -.portfolio-popup.is-rotated2 .next-popup, -.portfolio-popup.is-rotated2 .prev-popup { - display: none; -} - -.side-buttons-wrapper.is-rotated { - top: 220px; -} - -.portfolio-logo-wrapper.rotated-desktop .portfolio-scroll { - overflow-x: auto; - overflow-y: auto; -} -.next-popup.disabled, -.prev-popup.disabled { - opacity: 0.3; - pointer-events: none; -} -.img-popup-link { - text-decoration: none; - color: #ffffff; - display: flex; - align-items: center; - gap: 8px; -} -.img-popup-link span { - font-size: 15px; - font-weight: 400; - line-height: 1.6; -} -.img-popup-link svg { - width: 20px; - height: 20px; -} -.img-popup-img { - width: 720px; - height: 540px; - border-radius: 8px; -} -.video-popup-player { - width: 100%; - max-width: 100%; - max-height: 80vh; - object-fit: contain; -} - -.img-popup-img { - width: 100%; - max-width: 100%; - max-height: 80vh; - object-fit: contain; -} - -.about-section > .container { - position: relative; - justify-content: space-between; - display: flex; - max-width: 1200px; - border-radius: 10px; - background-color: #0b7fbf; - padding: 80px 48px 96px; - overflow: hidden; -} -.about-section-title { - flex-basis: 47%; - z-index: 1; - display: flex; - flex-direction: column; -} -.about-section h2 { - color: #54a5d2; - font-size: 56px; - line-height: 1.2; -} -.about-section-uptitle { - font-size: 16px; - font-weight: bold; - line-height: 1.5; - margin-bottom: 12px; - color: #fff; -} -.about-section-title svg { - width: 100%; -} -.about-section-p { - flex-basis: 47%; - display: flex; - flex-direction: column; - z-index: 1; - margin-top: 24px; -} -.about-section-p p { - font-size: 16px; - font-weight: normal; - /* 28 % 16 = 1.75 */ - line-height: 1.75; - color: #e6f2f8; -} -.about-section-p .bold { - font-size: 22px; - font-weight: bold; - /* 34 % 22 ~= 1.5 */ - line-height: 1.5; - margin-bottom: 16px; -} -.about-section-circleup { - position: absolute; - display: block; - width: 356px; - height: 356px; - border-radius: 50%; - top: -142px; - right: -142px; - background-color: #1e8ecb; - z-index: 0; -} -.about-section-circledown { - width: 356px; - height: 356px; - background-color: #1e8ecb; - border-radius: 50%; - display: block; - position: absolute; - z-index: 0; - bottom: -184px; - left: -94px; -} - -.challenge-section { - padding: 0px 20px; -} -.challenge-section > .container { - display: flex; - flex-direction: column; - padding: 0; -} -.challenge-header { - width: 100%; - text-align: center; - margin-bottom: 24px; -} -.challenge-header h2 { - margin-bottom: 8px; -} - -.table-wrapper { - position: relative; - display: flex; - justify-content: space-between; - overflow-x: hidden; - scroll-snap-type: x mandatory; - scroll-behavior: smooth; - max-width: 1200px; -} - -.column { - flex-basis: 50%; - scroll-snap-align: start; -} -.scroll-pagination { - display: none; - justify-content: center; - margin-top: 16px; -} -.scroll-dots { - display: flex; - align-items: center; - gap: 8px; -} -.scroll-dot { - width: 8px; - height: 8px; - border-radius: 50%; - background-color: #d1d5db; - transition: - width 0.3s ease, - background 0.3s ease, - transform 0.3s ease; - cursor: pointer; -} -.scroll-dot.active { - width: 24px; - border-radius: 8px; - background-color: var(--color-primary); -} - -.column-titlec { - margin-bottom: 16px; - color: var(--color-body-text); - padding: 17px; - text-align: center; -} -.column-titler { - margin-bottom: 16px; - color: var(--blue-600); - padding: 17px; - text-align: center; -} -.items { - list-style: none; - display: flex; - flex-direction: column; - gap: 24px; -} -.itemc, -.itemr { - display: flex; - gap: 8px; - align-items: center; - padding: 12px 16px 12px 24px; - border-radius: 8px; - max-height: 76px; - overflow: hidden; -} -.itemc { - background-color: #f0f5fe; - background-image: url(/src/img/dot-pattrn.svg); - background-repeat: no-repeat; - background-position: bottom; - background-size: auto; -} -.itemr { - background-color: #e5efff; - position: relative; -} -.itemr::after { - content: ''; - position: absolute; - top: 20%; - right: 0; - width: 2px; - height: 60%; - border-radius: 16px; - background: var(--color-primary); -} -.item-textc { - color: var(--color-body-text); -} -.item-textr { - color: var(--blue-600); -} -.item-textc, -.item-textr { - display: -webkit-box; - -webkit-line-clamp: 2; - line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; -} -.item-icon { - align-items: flex-start; -} -.vs { - position: absolute; - top: 7%; - left: 50%; - transform: translate(-50%, -50%); - width: 64px; - height: 64px; - background-color: var(--color-pastel-main); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; -} -.vs span { - font-size: 25.6px; - line-height: 38.4px; - font-weight: bold; - color: #0274b3; -} -.mobile-toggle { - display: none; -} -.toggle-btn { - display: flex; - gap: 8px; - align-items: center; - justify-content: space-between; - margin-bottom: 12px; - background-color: #e8f0ff; - padding: 10px 12px; - border-radius: 10px; - min-width: 100%; -} -.toggle-btn p { - font-size: 15px; - font-weight: 400; - line-height: 1.7; - color: var(--color-body-text); -} -.arr-icon { - display: flex; - align-self: center; -} - -.process-section, -.result-section, -.form-section { - margin-top: 100px; -} -.process-title { - margin-bottom: 24px; -} -.process-title p { - margin-top: 8px; -} -.step { - border-top: 1px solid var(--color-pastel-main); - border-bottom: 1px solid var(--color-pastel-main); - padding: 24px 290px 24px 12px; - cursor: pointer; - position: relative; - overflow: hidden; -} -.step-number-bg { - position: absolute; - right: 15px; - left: auto; - top: -51px; - font-size: 235px; - font-weight: bold; - letter-spacing: -30px; - color: #a4cde3; - transform: translateY(-10px); - transition: transform 0.3s ease; - z-index: 0; -} -.step.active .step-number-bg { - transform: translateY(0); -} -.step-header { - display: flex; - justify-content: flex-start; - width: 100%; - background: none; - border: none; - padding: 0; - cursor: pointer; - text-align: right; -} -.step-title { - font-size: 22px; - font-weight: 700; - line-height: 34px; - color: var(--color-title); - flex-grow: 1; -} -.step.active .step-title { - color: var(--color-primary); -} -.step-list { - list-style: none; - margin-top: 8px; -} -.step-list li { - position: relative; - padding-right: 20px; -} -.step-list li::before { - content: ''; - position: absolute; - right: 0; - top: 12px; - transform: translateY(-50%); - width: 6px; - height: 6px; - background-color: var(--color-primary); - border-radius: 50%; -} -.step-list li, -.step-intro { - font-size: 16px; - font-weight: 400; - line-height: 1.8; - color: var(--color-body-text); -} -.step-body { - max-height: 0; - overflow: hidden; - transition: max-height 0.4s ease; - margin-top: 0; - max-width: 812px; -} -.step.active .step-body { - max-height: 380px; - margin-top: 16px; -} -.toggle-icon { - font-size: 28px; - color: var(--color-primary); - background-color: var(--color-pastel-main); - border-radius: 50%; - width: 32px; - height: 32px; - display: flex; - align-items: center; - justify-content: center; - text-align: center; -} -.step.active .toggle-icon { - transform: none; -} -.step:not(.active) .toggle-icon::before { - content: '+'; -} -.step.active .toggle-icon::before { - content: '-'; -} - -.result-section > .container { - display: flex; - flex-direction: column; - gap: 24px; -} -.result-section-header h2 { - margin-bottom: 8px; -} -.result-section-box { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); - gap: 16px; - align-items: stretch; -} -.result-card { - background-color: #f0f4fd; - background-image: url(/src/img/dot-pattrn.svg); - background-repeat: no-repeat; - background-position: bottom; - background-size: auto; - border-radius: 16px; - padding: 20px; - text-align: center; - display: flex; - flex-direction: column; - justify-content: center; - height: 100%; -} -.result-card__number { - font-size: 40px; - font-weight: 700; - line-height: 40px; - color: var(--color-primary); - margin-bottom: 8px; -} -.result-card__text { - font-size: 15px; - line-height: 26px; - color: var(--color-body-text); -} - -.form-section > .container { - display: flex; - align-items: flex-start; - justify-content: space-between; - flex-wrap: wrap; - position: relative; -} -.star-form { - position: absolute; - top: 0; - left: 20px; - z-index: -1; - width: 100px; - height: 100px; -} -.form-section-left { - flex: 0 1 50%; - margin-top: 87px; -} -form { - display: flex; - flex-wrap: wrap; - gap: 16px; -} -.form-input label, -.required-label { - font-size: 14px; - margin-bottom: 8px; - display: block; - color: #1a1a2e; -} -.required-label::after { - content: '*'; - color: #ff0000; - margin-left: 4px; -} -input, -.select-box, -textarea { - width: 100%; - border: 1px solid #dbdbdb; - border-radius: 8px; - padding: 0px 12px; - height: 38px; - font-size: 14px; - font-weight: 400; - line-height: 1.8; - color: var(--color-title); - background-color: #f9f9f9; -} -textarea { - min-height: 114px; - resize: vertical; -} -.form-input { - flex-basis: 48%; - position: relative; -} -.label { - display: block; - margin-bottom: 10px; - font-size: 18px; - font-weight: 500; - color: #222; -} -.custom-select { - position: relative; - width: 100%; - user-select: none; -} -.select-box { - display: flex; - align-items: center; - justify-content: space-between; - cursor: pointer; - transition: 0.25s; -} -.selected-text { - font-size: 14px; - color: #222; - font-weight: 500; -} -.arrow { - display: flex; - transition: 0.25s; -} -.custom-select.active .arrow { - transform: rotate(180deg); -} -.options { - position: absolute; - right: 0; - width: 100%; - border-radius: 8px; - overflow: hidden; - list-style: none; - border: 1px solid #dbdbdb; - opacity: 0; - visibility: hidden; - z-index: 100; -} -.custom-select.active .options { - opacity: 1; - visibility: visible; -} -.option { - padding: 0px 12px; - height: 38px; - font-size: 17px; - transition: 0.2s; - background-color: #f9f9f9; - display: flex; - align-items: center; -} -.option.active { - background: var(--color-primary); - color: #fff; -} -.form-text { - flex-basis: 98%; -} -.form-btn { - background-color: var(--color-primary); - border: none; - border-radius: 10px; - padding: 10px 12px 10px 10px; - display: flex; - align-items: center; - justify-content: center; - gap: 8px; - cursor: pointer; - transition: 0.3s ease; -} -.form-btn-icon { - display: none; - align-items: center; - justify-content: center; - color: #000; -} -.form-btn.loading .btn-icon-default { - display: none; -} -.form-btn.loading .btn-icon-loading { - display: flex; -} -.btn-icon-default { - display: flex; -} -.spinner { - width: 24px; - height: 24px; - border: 4px solid #c5d7ec; - border-top-color: transparent; - border-radius: 50%; - box-sizing: border-box; - animation: spin 300ms linear infinite; -} -@keyframes spin { - to { - transform: rotate(360deg); - } -} -.btn-text { - color: #ffffff; - font-size: 16px; - font-weight: 400; -} -.form-section-right { - flex: 0 1 45%; -} -.form-section-text h2 { - margin-bottom: 16px; -} -.form-section-text p { - font-size: 15px; - font-weight: 400; - line-height: 1.7; - color: var(--color-body-text); -} -.form-img { - position: relative; -} -.form-img p { - position: absolute; - top: 28%; - right: 16%; - font-size: 56px; - font-weight: 700; - color: #c8dff9; -} -.form-img img { - max-width: 100%; - height: auto; - display: block; -} -.end-form-img { - left: 184px; - top: -28px; -} -.success-message { - display: none; -} -.success-message p { - margin-top: 16px; -} -.success-message h3 { - margin-top: 24px; -} -.success-btn { - margin-top: 24px; - border: none; - border-radius: 10px; - background-color: var(--color-primary); - color: #ffffff; - font-size: 16px; - font-weight: 500; - cursor: pointer; - padding: 10px 24px; - display: inline-flex; - align-items: center; - justify-content: center; -} -.success-message.visible { - display: flex; - flex-direction: column; - align-items: center; - text-align: center; -} -.related-section > .container { - display: flex; - flex-direction: column; -} -.related-header { - display: flex; - justify-content: space-between; - gap: 100px; - padding-bottom: 24px; -} -.related-title { - margin-bottom: 8px; -} -.related-button { - display: flex; - gap: 8px; - height: 40px; - align-self: center; - align-items: center; -} -.related-button span { - font-size: 15px; - font-weight: normal; - line-height: 1.6; -} -.related-button svg { - fill: var(--color-title); -} -.related-button span { - color: var(--color-title); -} -.related-button:hover svg { - fill: var(--color-primary); -} -.related-button:hover span { - color: var(--color-primary); -} -.related-button-mobile { - display: none; -} -.related-button:hover svg { - transform: translateX(-4px); -} - -.related-boxes { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(280px, 389px)); - gap: 16px; - - justify-content: center; -} -.related-card { - width: 100%; - aspect-ratio: 4 / 3; -} -.related-image { - width: 100%; - height: 292px; - border-radius: 10px; - overflow: hidden; - position: relative; - object-fit: cover; -} -.media-container { - width: 100%; - height: 100%; -} -.related-image img, -.media-container video { - width: 100%; - height: 100%; - object-fit: cover; - display: block; - transition: transform 0.5s ease; -} -.related-content { - margin-top: 16px; -} -.related-content h3 { - font-size: 15px; - margin-bottom: 8px; -} -.related-content p { - font-size: 12px; -} -.down-txt { - display: none; - margin-top: 8px; -} -.down-txt span { - font-size: 15px; - font-weight: bold; -} -.overlay-layer { - position: absolute; - inset: 0; - background-image: url(/src/img/overlay.svg); - border-radius: 10px; - display: flex; - align-items: flex-end; - opacity: 0; - visibility: hidden; - transition: - opacity 0.35s ease, - visibility 0.35s ease; - z-index: 2; -} -.related-card:hover .overlay-layer { - opacity: 1; - visibility: visible; -} -.button-overlay { - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - z-index: 3; - padding: 12px 12px 16px 12px; -} -.button-overlay svg { - width: 24px; - height: 24px; - fill: white; - transition: 0.3s; -} -.date { - color: #ffffff; - font-size: 13px; - font-weight: normal; -} -.namepopup { - color: #ffffff; - font-size: 18px; - font-weight: bold; - line-height: 1.4; -} -.play-btn { - position: absolute; - top: 12px; - left: 12px; - border-radius: 50%; - border: none; - opacity: 0; - display: flex; - justify-content: center; - align-items: center; - z-index: 10; - width: 32px; - height: 32px; -} -.progress-ring { - position: absolute; - top: 13px; - left: 13px; - overflow: visible; - z-index: 20; - transform: rotate(180deg); -} -.progress-circle { - fill: transparent; - stroke: white; - stroke-width: 2; - stroke-linecap: round; -} -.play-icon { - width: 100%; - height: 100%; - fill: white; - position: absolute; - z-index: 3; - transition: - opacity 0.25s ease, - transform 0.25s ease; -} -.icon-play { - opacity: 1; -} -.icon-pause { - opacity: 0; -} -.related-card:hover .icon-pause { - opacity: 1; -} -.related-card:hover .icon-play { - opacity: 0; -} -.is-video .play-btn { - opacity: 1; -} -.is-image .play-btn { - display: none; -} - -.media-section { - width: 100%; - overflow: hidden; -} -.media { - height: 100%; - width: 100%; - object-fit: cover; - object-position: center; - display: block; -} -.container-showcase { - max-width: 1240px; - padding: 0 20px; - margin: 0 auto; -} -.showcase-section > .container-showcase { - height: 200vh; -} -.showcase-sticky { - position: sticky; - top: 0; - width: 100%; - height: 100dvh; - overflow: hidden; -} -.showcase-inner { - height: 100%; - display: flex; - align-items: center; - gap: 40px; - height: 100dvh; -} -.showcase-media-side { - flex-basis: 58%; - display: flex; - align-items: center; - justify-content: center; -} -.showcase-media-wrapper { - width: 100%; - max-width: 679px; - aspect-ratio: 1/1; - position: relative; - overflow: hidden; - border-radius: 8px; -} -.media-item { - position: absolute; - inset: 0; - opacity: 0; - transition: - opacity 0.8s ease, - transform 1.4s ease; - will-change: opacity, transform; -} -.media-item.active { - opacity: 1; - z-index: 2; -} -.media-item img, -.media-item video { - display: block; - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 8px; -} -.showcase-text-side { - flex-basis: 40%; - height: 90%; - overflow: visible; - position: relative; -} -.text-track { - position: absolute; - top: 0; - left: 0; - width: 100%; -} -.text-item { - height: 60dvh; - display: flex; - flex-direction: column; - justify-content: flex-end; - align-items: flex-start; - opacity: 1; - transform: translateY(0); - filter: blur(0); - transition: - opacity 0.4s linear, - transform 0.4s linear, - filter 0.4s linear; - will-change: transform, opacity, filter; -} -.text-item span { - font-size: 20px; - color: var(--color-primary); - margin-bottom: 4px; - font-weight: bold; -} -.text-item h2 { - font-size: 22px; - color: var(--color-title); - line-height: 1.5; - margin-bottom: 16px; -} -.text-item p { - color: var(--color-body-text); - line-height: 1.7; - font-size: 15px; -} -.devidermedia { - margin-top: 100px; - margin-bottom: 100px; -} -.devidermedia > .container { - max-width: 1240px; - padding: 0 20px; - margin: 0 auto; -} -.devidermedia .media { - display: block; - width: 100%; - height: auto; - object-fit: cover; - border-radius: 10px; -} -.devidermedia .sclae-in-view { - animation: scale-in-view linear; - animation-timeline: view(); - animation-range: entry 0% cover 40%; -} -.devidermedia .media.ar16-9 { - aspect-ratio: 16 / 9; -} -.devidermedia .media.ar4-5 { - aspect-ratio: 4 / 5; -} -@keyframes scale-in-view { - from { - scale: 0.6; - } - to { - scale: 1; - } -} -.form-input input, -.form-text textarea { - border: 1px solid #ccc; - outline: none; - transition: all 0.3s ease; -} - -.form-input input:focus, -.form-text textarea:focus { - border-color: var(--color-primary); - background-color: #EAF7FF; -} -.error-message { - color: #DC2626; - font-size: 13px; - margin-top: 6px; - display: block; -} - -.input-error { - background-color: #FFEBEB !important; - border-color: #ef4444 !important; -} diff --git a/src/assets/icons/footer.svg b/src/assets/icons/footer.svg new file mode 100644 index 0000000..1651cf1 --- /dev/null +++ b/src/assets/icons/footer.svg @@ -0,0 +1,292 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/1.png b/src/assets/images/1.png deleted file mode 100644 index 6103de6..0000000 Binary files a/src/assets/images/1.png and /dev/null differ diff --git a/src/assets/images/2.png b/src/assets/images/2.png deleted file mode 100644 index 28a0433..0000000 Binary files a/src/assets/images/2.png and /dev/null differ diff --git a/src/assets/images/3.png b/src/assets/images/3.png deleted file mode 100644 index c739eab..0000000 Binary files a/src/assets/images/3.png and /dev/null differ diff --git a/src/assets/images/4.png b/src/assets/images/4.png deleted file mode 100644 index 0d8ca44..0000000 Binary files a/src/assets/images/4.png and /dev/null differ diff --git a/src/assets/images/5.png b/src/assets/images/5.png deleted file mode 100644 index 5b9634f..0000000 Binary files a/src/assets/images/5.png and /dev/null differ diff --git a/src/assets/images/6.png b/src/assets/images/6.png deleted file mode 100644 index 7d3d29a..0000000 Binary files a/src/assets/images/6.png and /dev/null differ diff --git a/src/assets/images/devidermedia.mp4 b/src/assets/images/devidermedia.mp4 deleted file mode 100644 index 36c0249..0000000 Binary files a/src/assets/images/devidermedia.mp4 and /dev/null differ diff --git a/src/assets/images/devidermedia.webp b/src/assets/images/devidermedia.webp deleted file mode 100644 index 43f3ded..0000000 Binary files a/src/assets/images/devidermedia.webp and /dev/null differ diff --git a/src/assets/images/gallery-img.webp b/src/assets/images/gallery-img.webp deleted file mode 100644 index 9d89a65..0000000 Binary files a/src/assets/images/gallery-img.webp and /dev/null differ diff --git a/src/assets/images/gallery-thumbnail.webp b/src/assets/images/gallery-thumbnail.webp deleted file mode 100644 index c097a18..0000000 Binary files a/src/assets/images/gallery-thumbnail.webp and /dev/null differ diff --git a/src/assets/images/high.mp4 b/src/assets/images/high.mp4 deleted file mode 100644 index cb12748..0000000 Binary files a/src/assets/images/high.mp4 and /dev/null differ diff --git a/src/assets/js/portfolio-gallery.js b/src/assets/js/portfolio-gallery.js deleted file mode 100644 index e69de29..0000000 diff --git a/src/assets/js/portfolio.js b/src/assets/js/portfolio.js deleted file mode 100644 index b03f449..0000000 --- a/src/assets/js/portfolio.js +++ /dev/null @@ -1,1403 +0,0 @@ -document.addEventListener('DOMContentLoaded', () => { - const buttons = document.querySelectorAll('.toggle-btn'); - const wrapper = document.querySelector('.table-wrapper'); - const columns = document.querySelectorAll('.column'); - - let isClickScrolling = false; - let isInitialLoad = true; - setTimeout(() => { - isInitialLoad = false; - }, 100); - - buttons.forEach((btn) => { - btn.addEventListener('click', (e) => { - e.preventDefault(); - - const currentTarget = btn.dataset.target; - const targetId = currentTarget === 'challenges' ? 'solutions' : 'challenges'; - const targetColumn = document.getElementById(targetId); - - if (targetColumn) { - isClickScrolling = true; - - targetColumn.scrollIntoView({ - behavior: 'smooth', - inline: 'start', - block: 'nearest', - }); - - buttons.forEach((b) => { - const active = b.dataset.target === targetId; - b.classList.toggle('is-active', active); - b.setAttribute('aria-selected', active); - }); - - setTimeout(() => { - isClickScrolling = false; - }, 800); - } - }); - }); - - const observer = new IntersectionObserver( - (entries) => { - if (isClickScrolling || isInitialLoad) return; - - entries.forEach((entry) => { - if (entry.isIntersecting) { - const id = entry.target.id; - buttons.forEach((btn) => { - const isActive = btn.dataset.target === id; - btn.classList.toggle('is-active', isActive); - btn.setAttribute('aria-selected', isActive); - }); - } - }); - }, - { - root: wrapper, - threshold: 0.6, - } - ); - - columns.forEach((col) => observer.observe(col)); -}); - -const stepsData = [ - { - number: '01', - title: 'ایده‌یابی و پیدا کردن مشکلات صفحه', - intro: - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - content: [ - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - ], - }, - { - number: '02', - title: 'ایده‌یابی و پیدا کردن مشکلات صفحه', - intro: - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - content: [ - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - ], - }, - { - number: '03', - title: 'ایده‌یابی و پیدا کردن مشکلات صفحه', - intro: - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - content: [ - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - ], - }, - { - number: '04', - title: 'ایده‌یابی و پیدا کردن مشکلات صفحه', - intro: - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - content: [ - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - ], - }, - { - number: '05', - title: 'ایده‌یابی و پیدا کردن مشکلات صفحه', - intro: - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - content: [ - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - ], - }, - { - number: '06', - title: 'ایده‌یابی و پیدا کردن مشکلات صفحه', - intro: - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - content: [ - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - ], - }, - { - number: '07', - title: 'ایده‌یابی و پیدا کردن مشکلات صفحه', - intro: - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - content: [ - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - ], - }, - { - number: '08', - title: 'ایده‌یابی و پیدا کردن مشکلات صفحه', - intro: - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - content: [ - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - ], - }, - { - number: '09', - title: 'ایده‌یابی و پیدا کردن مشکلات صفحه', - intro: - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - content: [ - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - ], - }, -]; - -const container = document.getElementById('stepsProcess'); -const isMobile = window.innerWidth <= 768; -const visibleSteps = isMobile ? stepsData.filter((step) => Number(step.number) <= 7) : stepsData; - -visibleSteps.forEach((step, i) => { - const intro = step.intro || ''; - const items = step.content || []; - - container.insertAdjacentHTML( - 'beforeend', - ` -
-
- ${step.number} -
- - - -
- ${intro ? `

${intro}

` : ''} - - -
-
-` - ); -}); - -const steps = document.querySelectorAll('.step'); - -steps.forEach((step) => { - const toggleStep = () => { - steps.forEach((s) => { - if (s !== step) s.classList.remove('active'); - }); - - step.classList.toggle('active'); - }; - - step.querySelector('.step-header').addEventListener('click', toggleStep); - - step.querySelector('.step-number-bg').addEventListener('click', toggleStep); -}); - -const form = document.getElementById('contactForm'); -const submitBtn = document.getElementById('submitBtn'); -const backBtn = document.getElementById('backBtn'); -const successMessage = document.getElementById('successMessage'); -const submitBtnText = submitBtn.querySelector('.btn-text'); - -form.addEventListener('submit', function (event) { - event.preventDefault(); - - submitBtn.classList.add('loading'); - submitBtnText.textContent = 'درحال ارسال فرم'; - submitBtn.disabled = true; - - setTimeout(() => { - form.style.display = 'none'; - - successMessage.classList.add('visible'); - }, 1500); -}); - -backBtn.addEventListener('click', function () { - successMessage.classList.remove('visible'); - - form.style.display = 'flex'; - - submitBtn.disabled = false; - submitBtn.classList.remove('loading'); - submitBtnText.textContent = 'ثبت درخواست'; - - form.reset(); -}); - -const customSelect = document.getElementById('customSelect'); -const selectBox = customSelect.querySelector('.select-box'); -const options = customSelect.querySelectorAll('.option'); -const selectedText = customSelect.querySelector('.selected-text'); - -selectBox.addEventListener('click', () => { - customSelect.classList.toggle('active'); -}); - -options.forEach((option) => { - option.addEventListener('click', () => { - options.forEach((item) => { - item.classList.remove('active'); - }); - - option.classList.add('active'); - selectedText.textContent = option.textContent; - customSelect.classList.remove('active'); - }); -}); - -document.addEventListener('click', (e) => { - if (!customSelect.contains(e.target)) { - customSelect.classList.remove('active'); - } -}); - -function initRelatedSection(section) { - const cards = section.querySelectorAll('.related-card'); - - cards.forEach((card) => { - const container = card.querySelector('.media-container'); - - if (!container) return; - if (container.dataset.initialized === 'true') return; - container.dataset.initialized = 'true'; - - const progressCircle = card.querySelector('.progress-circle'); - const type = container.dataset.type; - const src = container.dataset.src; - - if (!type || !src) return; - - card.classList.add(type === 'video' ? 'is-video' : 'is-image'); - if (type === 'video') { - const ext = src.split('.').pop().toLowerCase(); - const video = document.createElement('video'); - video.muted = true; - video.playsInline = true; - video.preload = 'metadata'; - - const source = document.createElement('source'); - source.src = src; - source.type = `video/${ext}`; - - video.appendChild(source); - container.appendChild(video); - - if (!progressCircle) return; - const radius = progressCircle.r.baseVal.value; - const circumference = 2 * Math.PI * radius; - progressCircle.style.strokeDasharray = circumference; - progressCircle.style.strokeDashoffset = circumference; - - let stopTimeout; - - card.addEventListener('mouseenter', async () => { - clearTimeout(stopTimeout); - - try { - video.currentTime = 0; - - await video.play(); - - progressCircle.style.transition = 'none'; - progressCircle.style.strokeDashoffset = circumference; - - requestAnimationFrame(() => { - progressCircle.style.transition = 'stroke-dashoffset 5s linear'; - - progressCircle.style.strokeDashoffset = 0; - }); - - stopTimeout = setTimeout(() => { - video.pause(); - video.currentTime = 0; - - progressCircle.style.transition = 'none'; - progressCircle.style.strokeDashoffset = circumference; - }, 5000); - } catch (err) { - console.error(err); - } - }); - - card.addEventListener('mouseleave', () => { - clearTimeout(stopTimeout); - - video.pause(); - video.currentTime = 0; - - progressCircle.style.transition = 'none'; - progressCircle.style.strokeDashoffset = circumference; - }); - card.addEventListener('click', () => { - if (type === 'video') { - openVideoPopup(src); - } else { - openImagePopup(src); - } - }); - } else if (type === 'image') { - const img = document.createElement('img'); - img.src = src; - img.alt = 'portfolio'; - - container.appendChild(img); - } - }); -} -function initGalleryFilter(section) { - const tabs = section.querySelectorAll('.tabs button'); - const cards = section.querySelectorAll('.related-card'); - - tabs.forEach((tab) => { - tab.addEventListener('click', () => { - tabs.forEach((btn) => { - btn.classList.remove('current'); - }); - - tab.classList.add('current'); - - const text = tab.querySelector('.txt')?.textContent.trim(); - cards.forEach((card) => { - const media = card.querySelector('.media-container'); - if (!media) return; - - const type = media.dataset.type; - if (text === 'همه') { - card.style.display = ''; - } else if (text === 'ویدیو') { - if (type === 'video') { - card.style.display = ''; - } else { - card.style.display = 'none'; - } - } else if (text === 'تصاویر') { - if (type === 'image') { - card.style.display = ''; - } else { - card.style.display = 'none'; - } - } - }); - }); - }); -} - -document.querySelectorAll('.related-content p').forEach((item) => { - item.addEventListener('click', (e) => { - e.preventDefault(); - e.stopPropagation(); - }); -}); -document.addEventListener('DOMContentLoaded', () => { - document.querySelectorAll('[data-related-section]').forEach((section) => { - initRelatedSection(section); - initGalleryFilter(section); - }); -}); - -const slides = [ - { - type: 'image', - src: 'src/assets/images/5.png', - number: '01', - title: 'لورم ایپسوم متن ساختگی', - description: - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - gradientClass: 'gradient-one', - mobilePositionClass: 'mobile-pos-one', - }, - { - type: 'image', - src: 'src/assets/images/4.png', - number: '02', - title: 'لورم اپسیلون متن ساختگی', - description: - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - gradientClass: 'gradient-two', - mobilePositionClass: 'mobile-pos-two', - }, - { - type: 'image', - src: 'src/assets/images/6.png', - number: '03', - title: 'لورم اپسیلون متن ساختگی', - description: - 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ', - gradientClass: 'gradient-three', - mobilePositionClass: 'mobile-pos-three', - }, -]; - -const showcase = document.getElementById('showcase'); -const mediaWrapper = document.getElementById('showcasemediaWrapper'); -const textTrack = document.getElementById('textTrack'); -function renderMedia() { - slides.forEach((slide, index) => { - const item = document.createElement('div'); - - item.className = ` - media-item - ${slide.gradientClass || ''} - ${slide.mobilePositionClass || ''} -`; - - if (index === 0) { - item.classList.add('active'); - } - if (slide.type === 'image' || slide.type === 'gif') { - const img = document.createElement('img'); - img.src = slide.src; - item.appendChild(img); - } - - if (slide.type === 'video') { - const video = document.createElement('video'); - - video.src = slide.src; - - video.autoplay = true; - video.loop = true; - video.muted = true; - video.playsInline = true; - - item.appendChild(video); - } - mediaWrapper.appendChild(item); - }); -} -function renderTexts() { - slides.forEach((slide) => { - const item = document.createElement('div'); - item.className = 'text-item'; - item.innerHTML = ` - ${slide.number} -

- ${slide.title} -

-

- ${slide.description} -

- `; - textTrack.appendChild(item); - }); -} -renderMedia(); - -renderTexts(); - -const mediaItems = document.querySelectorAll('.media-item'); -const textItems = document.querySelectorAll('.text-item'); -const totalSlides = slides.length; -const showcaseScrollContainer = showcase.querySelector('.container-showcase'); - -document.documentElement.style.setProperty('--slides-count', slides.length); - -function setActiveSlide(current) { - mediaItems.forEach((item, index) => { - item.classList.toggle('active', index === current); - }); - - textItems.forEach((item, index) => { - item.classList.toggle('active', index === current); - }); -} - -function resetTextItemInlineStyles() { - textItems.forEach((item) => { - item.style.opacity = ''; - item.style.filter = ''; - }); -} -function updateScrollScene() { - const isMobile = window.innerWidth <= 768; - const rect = showcase.getBoundingClientRect(); - const sectionTop = window.scrollY + rect.top; - const scrollInside = window.scrollY - sectionTop; - const scrollHeight = showcaseScrollContainer?.offsetHeight ?? showcase.offsetHeight; - const maxScroll = Math.max(scrollHeight - window.innerHeight, 1); - const progress = Math.min(Math.max(scrollInside / maxScroll, 0), 1); - const exactIndex = progress * (totalSlides - 1); - const current = Math.round(exactIndex); - - if (isMobile) { - textTrack.style.transform = 'translateY(0)'; - resetTextItemInlineStyles(); - setActiveSlide(current); - - return; - } - - textTrack.style.transform = `translateY(-${exactIndex * 60}vh)`; - - textItems.forEach((item) => { - item.classList.remove('active'); - }); - - textItems.forEach((item, index) => { - const offset = index - exactIndex; - - let blur = 0; - let opacity = 1; - - if (offset > 0) { - const enterProgress = Math.min(offset, 1); - - blur = Math.max((enterProgress - 0.35) * 14, 0); - - opacity = Math.min(1.2 - enterProgress, 1); - } - - item.style.filter = `blur(${blur}px)`; - - item.style.opacity = opacity; - }); - - setActiveSlide(current); -} - -window.addEventListener('scroll', updateScrollScene); - -window.addEventListener('resize', updateScrollScene); - -updateScrollScene(); - -const portfolioNavConfig = { - actionType: 'project', - projectPreviewImage: './src/assets/images/gallery-thumbnail.webp', - websiteUrl: 'https://example.com', -}; - -const overlay = document.getElementById('portfolioOverlay'); -const imagePopup = document.getElementById('portfolioOverlayimg'); -const navLinksContainer = document.getElementById('portfolioNavLinks'); -const navAction = document.getElementById('portfolioNavAction'); - -const navSections = [...document.querySelectorAll('section[data-nav-title]')].filter( - (section) => section.dataset.nav !== 'false' && section.offsetParent !== null -); - -navSections.forEach((section) => { - const id = section.id || section.className.split(' ')[0]; - section.id = id; - const btn = document.createElement('button'); - - btn.className = 'portfolio-nav-btn'; - btn.textContent = section.dataset.navTitle; - btn.dataset.target = id; - - btn.addEventListener('click', () => { - document.getElementById(id).scrollIntoView({ - behavior: 'smooth', - block: 'start', - }); - }); - - navLinksContainer.appendChild(btn); -}); - -const navButtons = document.querySelectorAll('.portfolio-nav-btn'); -const sectionObserver = new IntersectionObserver( - (entries) => { - entries.forEach((entry) => { - if (entry.isIntersecting) { - const activeId = entry.target.id; - - navButtons.forEach((btn) => { - btn.classList.remove('active'); - - if (btn.dataset.target === activeId) { - btn.classList.add('active'); - - btn.scrollIntoView({ - behavior: 'smooth', - inline: 'start', - block: 'nearest', - }); - } - }); - } - }); - }, - { threshold: 0.45 } -); - -navSections.forEach((section) => sectionObserver.observe(section)); -const portfolioNav = document.getElementById('portfolioNav'); - -document.querySelector('.portfolio-nav-meeting').addEventListener('click', function () { - const target = document.querySelector(this.dataset.scrollTarget); - - if (target) { - target.scrollIntoView({ - behavior: 'smooth', - }); - } -}); -const aboutSection = document.querySelector('.about-section'); -const showcaseSection = document.querySelector('.showcase-section'); -const mediaSection = document.querySelector('.media-section'); - -function togglePortfolioNav() { - const aboutTop = aboutSection.getBoundingClientRect().top; - const showcaseRect = showcaseSection.getBoundingClientRect(); - const mediaTop = mediaSection.getBoundingClientRect().top; - const afterAbout = aboutTop <= window.innerHeight; - const showcaseVisible = showcaseRect.top <= window.innerHeight && showcaseRect.bottom >= 0; - const mediaVisible = mediaTop <= window.innerHeight; - - if (afterAbout) { - portfolioNav.classList.add('show'); - } else { - portfolioNav.classList.remove('show'); - } - - if (showcaseVisible && !mediaVisible) { - portfolioNav.classList.remove('show'); - } -} - -window.addEventListener('scroll', togglePortfolioNav); -window.addEventListener('load', togglePortfolioNav); - -function openPortfolioPopup() { - overlay.classList.add('active'); - document.body.style.overflow = 'hidden'; - - const sideWrapper = document.querySelector('.side-buttons-wrapper'); - const portfolioWrapper = document.querySelector('.portfolio-logo-wrapper'); - const desktopBtn = document.querySelector('.desktop-btn'); - const phoneBtn = document.querySelector('.phone-btn'); - const desktopUse = document.getElementById('desktopIcon'); - const phoneUse = document.getElementById('phoneIcon'); - - sideWrapper?.classList.remove('rotated-desktop'); - - if (window.innerWidth <= 768) { - handleMobilePopupView(); - - phoneBtn?.classList.add('active'); - desktopBtn?.classList.remove('active'); - - desktopUse?.setAttribute('href', './src/assets/icons/portfolioP.svg#descktop-icon'); - - phoneUse?.setAttribute('href', './src/assets/icons/portfolioP.svg#phone-icon-active'); - } else { - rotateOverlay?.classList.remove('show'); - - portfolioWrapper?.classList.remove('mobile-view'); - - sideWrapper?.classList.remove('rotated-desktop'); - - desktopBtn?.classList.add('active'); - phoneBtn?.classList.remove('active'); - - desktopUse?.setAttribute('href', './src/assets/icons/portfolioP.svg#descktop-icon-active'); - - phoneUse?.setAttribute('href', './src/assets/icons/portfolioP.svg#phone-icon'); - } -} - -if (portfolioNavConfig.actionType === 'project') { - navAction.innerHTML = ` - - `; - - document - .querySelector('.portfolio-nav-project-btn') - ?.addEventListener('click', openPortfolioPopup); -} - -if (portfolioNavConfig.actionType === 'website') { - navAction.innerHTML = ` - - بازدید از سایت - - `; -} - -document.querySelectorAll('.close-popup').forEach((btn) => { - btn.addEventListener('click', () => { - const video = imagePopup.querySelector('.video-popup-player'); - - if (video) { - video.pause(); - video.removeAttribute('src'); - video.load(); - // video.src = ''; - } - overlay.classList.remove('active'); - imagePopup.classList.remove('active'); - - document.body.style.overflow = ''; - }); -}); - -// overlay?.addEventListener('click', (e) => { -// if (e.target === overlay) { -// overlay.classList.remove('active'); -// document.body.style.overflow = ''; -// } -// }); - -function openImagePopup(src) { - // const img = imagePopup?.querySelector('img'); - const img = imagePopup.querySelector('.img-popup-img'); - const video = imagePopup.querySelector('.video-popup-player'); - - // if (img && src) { - // img.src = src; - // } - video.pause(); - // video.src = ''; - video.style.display = 'none'; - - img.style.display = 'block'; - img.src = src; - - imagePopup?.classList.add('active'); - document.body.style.overflow = 'hidden'; -} - -imagePopup?.addEventListener('click', (e) => { - const video = imagePopup.querySelector('.video-popup-player'); - - if (video) { - video.pause(); - video.src = ''; - } -}); -function openVideoPopup(src, poster = '') { - const img = imagePopup.querySelector('.img-popup-img'); - const video = imagePopup.querySelector('.video-popup-player'); - - img.style.display = 'none'; - - video.style.display = 'block'; - video.pause(); - // if (poster) { - // video.poster = poster; - // } - video.removeAttribute('poster'); - - if (poster) { - video.poster = poster; - } - video.src = src; - video.load(); - // video.currentTime = 0; - // video.play(); - - imagePopup.classList.add('active'); - document.body.style.overflow = 'hidden'; -} - -document.addEventListener('DOMContentLoaded', () => { - const mediaContainer = document.getElementById('media-section-container'); - const section = document.querySelector('.media-section'); - const mediaData = { - type: 'image', - src: './public/images/media.jpg', - hideOnMobile: false, - }; - function handleMobileVisibility() { - if (window.innerWidth <= 768 && mediaData.hideOnMobile) { - section.style.display = 'none'; - } else { - section.style.display = 'block'; - } - } - - handleMobileVisibility(); - - window.addEventListener('resize', handleMobileVisibility); - - function renderMedia(data) { - let element; - - if (data.type === 'image') { - element = document.createElement('img'); - - element.src = data.src; - element.alt = ''; - } else if (data.type === 'gif') { - element = document.createElement('img'); - - element.src = data.src; - element.alt = ''; - } else if (data.type === 'video') { - element = document.createElement('video'); - - element.src = data.src; - - element.autoplay = true; - element.muted = true; - element.loop = true; - element.playsInline = true; - } - - element.classList.add('media'); - - mediaContainer.appendChild(element); - } - - renderMedia(mediaData); -}); - -// document.querySelectorAll('.wrapper').forEach((item) => { -// item.addEventListener('click', (e) => { -// e.preventDefault(); -// openPortfolioPopup(); -// }); -// }); -document.querySelector('.gallery-thumbnail .wrapper')?.addEventListener('click', (e) => { - e.preventDefault(); - openPopupByIndex(0); -}); - -const navScroll = document.getElementById('portfolioNavScroll'); -const scrollThumb = document.querySelector('.portfolio-scroll-thumb'); -const scrollTrack = document.querySelector('.portfolio-scroll-track'); - -function updateFakeScrollbar() { - if (!navScroll || !scrollThumb || !scrollTrack) return; - - const maxScroll = navScroll.scrollWidth - navScroll.clientWidth; - const currentScroll = Math.abs(navScroll.scrollLeft); - const trackWidth = scrollTrack.clientWidth; - const thumbWidth = 28; - const maxThumbMove = trackWidth - thumbWidth; - const scrollPercent = currentScroll / maxScroll; - - scrollThumb.style.right = `${scrollPercent * maxThumbMove}px`; -} - -navScroll?.addEventListener('scroll', updateFakeScrollbar); -window.addEventListener('load', updateFakeScrollbar); -window.addEventListener('resize', updateFakeScrollbar); - -document.addEventListener('DOMContentLoaded', () => { - const phoneBtn = document.querySelector('.phone-btn'); - const desktopBtn = document.querySelector('.desktop-btn'); - const portfolioWrapper = document.querySelector('.portfolio-logo-wrapper'); - const desktopUse = document.getElementById('desktopIcon'); - const phoneUse = document.getElementById('phoneIcon'); - const sideWrapper = document.querySelector('.side-buttons-wrapper'); - - let isMobileView = window.innerWidth <= 768; - - function updateUI() { - sideWrapper?.classList.remove('rotated-desktop'); - - if (isMobileView) { - portfolioWrapper?.classList.add('mobile-view'); - - phoneBtn?.classList.add('active'); - desktopBtn?.classList.remove('active'); - - phoneUse?.setAttribute('href', './src/assets/icons/portfolioP.svg#phone-icon-active'); - - desktopUse?.setAttribute('href', './src/assets/icons/portfolioP.svg#descktop-icon'); - } else { - portfolioWrapper?.classList.remove('mobile-view'); - - desktopBtn?.classList.add('active'); - phoneBtn?.classList.remove('active'); - desktopUse?.setAttribute('href', './src/assets/icons/portfolioP.svg#descktop-icon-active'); - - phoneUse?.setAttribute('href', './src/assets/icons/portfolioP.svg#phone-icon'); - } - } - phoneBtn?.addEventListener('click', () => { - isMobileView = true; - updateUI(); - }); - - desktopBtn?.addEventListener('click', () => { - isMobileView = false; - updateUI(); - }); - - updateUI(); -}); - -// const relatedCards = [ -// ...document.querySelectorAll('[data-related-section="gallery"] .related-card'), -// ]; - -// let currentPopupIndex = 0; - -// function openPopupByIndex(index) { -// const card = relatedCards[index]; -// if (!card) return; - -// currentPopupIndex = index; -// const media = card.querySelector('.media-container'); - -// if (!media) return; -// const type = media.dataset.type; -// const src = media.dataset.src; - -// if (type === 'image') { -// const popupImg = imagePopup.querySelector('.img-wrapper img'); - -// if (popupImg) { -// popupImg.src = src; -// } - -// imagePopup.classList.add('active'); -// } else if (type === 'video') { -// return; -// } - -// document.body.style.overflow = 'hidden'; - -// updatePopupButtons(); -// } - -// function updatePopupButtons() { -// const allPopups = document.querySelectorAll('.portfolio-popup.active'); - -// allPopups.forEach((popup) => { -// const nextBtn = popup.querySelector('.next-popup'); -// const prevBtn = popup.querySelector('.prev-popup'); - -// if (!nextBtn || !prevBtn) return; - -// if (currentPopupIndex <= 0) { -// prevBtn.classList.add('disabled'); -// } else { -// prevBtn.classList.remove('disabled'); -// } -// if (currentPopupIndex >= relatedCards.length - 1) { -// nextBtn.classList.add('disabled'); -// } else { -// nextBtn.classList.remove('disabled'); -// } -// }); -// } - -// relatedCards.forEach((card, index) => { -// card.addEventListener('click', (e) => { -// if (e.target.closest('.play-btn')) return; -// if (e.target.closest('.related-content p')) return; -// openPopupByIndex(index); -// }); -// }); -// document.querySelectorAll('.next-popup').forEach((btn) => { -// btn.addEventListener('click', () => { -// if (currentPopupIndex >= relatedCards.length - 1) return; - -// currentPopupIndex++; -// overlay.classList.remove('active'); -// imagePopup.classList.remove('active'); -// openPopupByIndex(currentPopupIndex); -// }); -// }); - -// document.querySelectorAll('.prev-popup').forEach((btn) => { -// btn.addEventListener('click', () => { -// if (currentPopupIndex <= 0) return; - -// currentPopupIndex--; -// overlay.classList.remove('active'); -// imagePopup.classList.remove('active'); - -// openPopupByIndex(currentPopupIndex); -// }); -// }); - -// window.addEventListener('keydown', (e) => { -// const popupIsOpen = -// overlay.classList.contains('active') || imagePopup.classList.contains('active'); - -// if (!popupIsOpen) return; - -// if (e.key === 'ArrowRight') { -// if (currentPopupIndex < relatedCards.length - 1) { -// currentPopupIndex++; -// overlay.classList.remove('active'); -// imagePopup.classList.remove('active'); -// openPopupByIndex(currentPopupIndex); -// } -// } - -// if (e.key === 'ArrowLeft') { -// if (currentPopupIndex > 0) { -// currentPopupIndex--; -// overlay.classList.remove('active'); -// imagePopup.classList.remove('active'); -// openPopupByIndex(currentPopupIndex); -// } -// } -// if (e.key === 'Escape') { -// overlay.classList.remove('active'); -// imagePopup.classList.remove('active'); -// document.body.style.overflow = ''; -// } -// }); -const relatedCards = [ - ...document.querySelectorAll('[data-related-section="gallery"] .related-card'), -]; - -let currentPopupIndex = 0; -const galleryItems = [ - { - type: 'project', - }, - - ...[...document.querySelectorAll('[data-related-section="gallery"] .related-card')].map( - (card) => ({ - type: 'card', - element: card, - }) - ), -]; - -// function openPopupByIndex(index) { -// const card = relatedCards[index]; - -// if (!card) return; - -// currentPopupIndex = index; - -// const media = card.querySelector('.media-container'); - -// const type = media.dataset.type; -// const src = media.dataset.src; -// const poster = media.dataset.poster; - -// if (type === 'video') { -// openVideoPopup(src, poster); -// } else { -// openImagePopup(src); -// } - -// updatePopupButtons(); -// } - -function openPopupByIndex(index) { - const item = galleryItems[index]; - - if (!item) return; - - currentPopupIndex = index; - - // اول هر دو پاپ‌آپ بسته شوند - overlay.classList.remove('active'); - imagePopup.classList.remove('active'); - - if (item.type === 'project') { - openPortfolioPopup(); - } else { - const media = item.element.querySelector('.media-container'); - - const mediaType = media.dataset.type; - const src = media.dataset.src; - const poster = media.dataset.poster; - - if (mediaType === 'video') { - openVideoPopup(src, poster); - } else { - openImagePopup(src); - } - } - - updatePopupButtons(); -} -// function updatePopupButtons() { -// const nextBtn = imagePopup.querySelector('.next-popup'); -// const prevBtn = imagePopup.querySelector('.prev-popup'); - -// if (!nextBtn || !prevBtn) return; -// prevBtn.disabled = currentPopupIndex === 0; -// nextBtn.disabled = currentPopupIndex === galleryItems.length - 1; - -// prevBtn.classList.toggle('disabled', currentPopupIndex === 0); -// nextBtn.classList.toggle('disabled', currentPopupIndex === galleryItems.length - 1); -// } -function updatePopupButtons() { - document.querySelectorAll('.next-popup').forEach((btn) => { - btn.disabled = currentPopupIndex === galleryItems.length - 1; - - btn.classList.toggle('disabled', currentPopupIndex === galleryItems.length - 1); - }); - - document.querySelectorAll('.prev-popup').forEach((btn) => { - btn.disabled = currentPopupIndex === 0; - - btn.classList.toggle('disabled', currentPopupIndex === 0); - }); -} -// relatedCards.forEach((card, index) => { -// card.addEventListener('click', (e) => { -// if (e.target.closest('.play-btn')) return; - -// openPopupByIndex(index); -// }); -// }); -document.querySelector('.gallery-thumbnail .wrapper')?.addEventListener('click', (e) => { - e.preventDefault(); - openPopupByIndex(0); -}); - -relatedCards.forEach((card, index) => { - card.addEventListener('click', (e) => { - if (e.target.closest('.play-btn')) return; - - openPopupByIndex(index + 1); - }); -}); -// imagePopup.querySelector('.next-popup').addEventListener('click', () => { -// if (currentPopupIndex >= galleryItems.length - 1) return; - -// openPopupByIndex(currentPopupIndex + 1); -// }); - -// imagePopup.querySelector('.prev-popup').addEventListener('click', () => { -// if (currentPopupIndex <= 0) return; - -// openPopupByIndex(currentPopupIndex - 1); -// }); - -document.querySelectorAll('.next-popup').forEach((btn) => { - btn.addEventListener('click', () => { - if (currentPopupIndex < galleryItems.length - 1) { - openPopupByIndex(currentPopupIndex + 1); - } - }); -}); - -document.querySelectorAll('.prev-popup').forEach((btn) => { - btn.addEventListener('click', () => { - if (currentPopupIndex > 0) { - openPopupByIndex(currentPopupIndex - 1); - } - }); -}); -window.addEventListener('keydown', (e) => { - if (!imagePopup.classList.contains('active')) return; - - if (e.key === 'ArrowRight') { - if (currentPopupIndex < galleryItems.length - 1) { - openPopupByIndex(currentPopupIndex + 1); - } - } - - if (e.key === 'ArrowLeft') { - if (currentPopupIndex > 0) { - openPopupByIndex(currentPopupIndex - 1); - } - } -}); - -let rotationTimer = null; - -function handleMobilePopupView() { - const rotateOverlay = document.getElementById('rotateOverlay'); - const portfolioWrapper = document.querySelector('.portfolio-logo-wrapper'); - const sideWrapper = document.querySelector('.side-buttons-wrapper'); - - if (!rotateOverlay || !portfolioWrapper || !sideWrapper) return; - - rotateOverlay.classList.add('show'); - - clearTimeout(rotationTimer); - - rotationTimer = setTimeout(() => { - rotateOverlay.classList.remove('show'); - updateOrientationState(); - }, 2000); - - window.removeEventListener('resize', updateOrientationState); - window.removeEventListener('orientationchange', updateOrientationState); - - window.addEventListener('resize', updateOrientationState); - window.addEventListener('orientationchange', updateOrientationState); - - function updateOrientationState() { - const isLandscape = window.innerWidth > window.innerHeight; - - if (isLandscape) { - portfolioWrapper.classList.remove('mobile-view'); - sideWrapper.classList.add('rotated-desktop'); - sideWrapper.classList.add('is-rotated'); - overlay.classList.add('is-rotated2'); - } else { - portfolioWrapper.classList.add('mobile-view'); - sideWrapper.classList.remove('rotated-desktop'); - sideWrapper.classList.remove('is-rotated'); - overlay.classList.remove('is-rotated2'); - } - } - updateOrientationState(); -} - -window.addEventListener('load', () => { - const portfolioImageScroll = document.getElementById('portfolioScroll'); - const portfolioCustomThumb = document.getElementById('scrollThumb'); - const portfolioCustomTrack = document.querySelector('.scroll-track'); - - if (!portfolioImageScroll || !portfolioCustomThumb || !portfolioCustomTrack) { - console.log('Portfolio scroll elements not found'); - return; - } - - let isDraggingPortfolioThumb = false; - - function updatePortfolioThumb() { - if (isDraggingPortfolioThumb) return; - const maxScroll = portfolioImageScroll.scrollHeight - portfolioImageScroll.clientHeight; - const maxThumbMove = portfolioCustomTrack.clientHeight - portfolioCustomThumb.clientHeight; - if (maxScroll <= 0) return; - const thumbPosition = (portfolioImageScroll.scrollTop / maxScroll) * maxThumbMove; - - portfolioCustomThumb.style.top = `${thumbPosition}px`; - } - - portfolioImageScroll.addEventListener('scroll', updatePortfolioThumb); - updatePortfolioThumb(); - - let portfolioDragOffsetY = 0; - portfolioCustomThumb.addEventListener('mousedown', (event) => { - isDraggingPortfolioThumb = true; - document.body.style.userSelect = 'none'; - - portfolioDragOffsetY = event.clientY - portfolioCustomThumb.getBoundingClientRect().top; - }); - document.addEventListener('mouseup', () => { - isDraggingPortfolioThumb = false; - - document.body.style.userSelect = ''; - }); - - document.addEventListener('mousemove', (event) => { - if (!isDraggingPortfolioThumb) return; - - const trackRect = portfolioCustomTrack.getBoundingClientRect(); - let newThumbTop = event.clientY - trackRect.top - portfolioDragOffsetY; - const maxThumbTop = portfolioCustomTrack.clientHeight - portfolioCustomThumb.clientHeight; - - newThumbTop = Math.max(0, Math.min(newThumbTop, maxThumbTop)); - portfolioCustomThumb.style.top = `${newThumbTop}px`; - const scrollPercent = newThumbTop / maxThumbTop; - const maxImageScroll = portfolioImageScroll.scrollHeight - portfolioImageScroll.clientHeight; - - portfolioImageScroll.scrollTop = scrollPercent * maxImageScroll; - }); -}); - -const nameInput = document.getElementById('name'); -const nameError = document.getElementById('nameError'); - -nameInput.addEventListener('input', function () { - const hasNumber = /\d/.test(this.value); - - if (hasNumber) { - this.classList.add('input-error'); - nameError.textContent = '* فقط حروف فارسی و انگلیسی مجاز است'; - } else { - this.classList.remove('input-error'); - nameError.textContent = ''; - } -}); - -const phoneInput = document.getElementById('phone'); -const phoneError = document.getElementById('phoneError'); - -phoneInput.addEventListener('input', function () { - const hasLetter = /[a-zA-Zآ-ی]/.test(this.value); - - if (hasLetter) { - this.classList.add('input-error'); - phoneError.textContent = 'فقط عدد مجاز است'; - } else { - this.classList.remove('input-error'); - phoneError.textContent = ''; - } - this.value = this.value.replace(/\D/g, ''); -}); - -const emailInput = document.getElementById('email'); -const emailError = document.getElementById('emailError'); - -emailInput.addEventListener('input', function () { - if (this.value !== '' && !this.value.includes('@')) { - this.classList.add('input-error'); - emailError.textContent = 'ایمیل باید شامل @ باشد'; - } else { - this.classList.remove('input-error'); - emailError.textContent = ''; - } -}); - -const slider = document.getElementById('portfolioNavScroll'); - -let isDown = false; -let startX = 0; -let scrollLeft = 0; - -slider.addEventListener('mousedown', (e) => { - isDown = true; - slider.style.cursor = 'grabbing'; - - startX = e.pageX; - scrollLeft = slider.scrollLeft; -}); - -window.addEventListener('mouseup', () => { - isDown = false; - slider.style.cursor = 'grab'; -}); - -slider.addEventListener('mousemove', (e) => { - if (!isDown) return; - - e.preventDefault(); - - const walk = e.pageX - startX; - slider.scrollLeft = scrollLeft - walk; -}); -slider.addEventListener( - 'wheel', - (e) => { - e.preventDefault(); - slider.scrollLeft += e.deltaY; - }, - { passive: false } -); diff --git a/src/img/Star 2.svg b/src/img/Star 2.svg deleted file mode 100644 index 4862de4..0000000 --- a/src/img/Star 2.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/img/chair.svg b/src/img/chair.svg deleted file mode 100644 index 5787510..0000000 --- a/src/img/chair.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/img/dot-pattrn.svg b/src/img/dot-pattrn.svg deleted file mode 100644 index 646fcf1..0000000 --- a/src/img/dot-pattrn.svg +++ /dev/null @@ -1,3876 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/img/line-pattern.svg b/src/img/line-pattern.svg deleted file mode 100644 index 6a71145..0000000 --- a/src/img/line-pattern.svg +++ /dev/null @@ -1,62 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/img/massage-send.svg b/src/img/massage-send.svg deleted file mode 100644 index 675042a..0000000 --- a/src/img/massage-send.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/src/img/overlay.svg b/src/img/overlay.svg deleted file mode 100644 index 0a3ceb1..0000000 --- a/src/img/overlay.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/img/playicon.svg b/src/img/playicon.svg deleted file mode 100644 index a7f6729..0000000 --- a/src/img/playicon.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/img/puse-icon.svg b/src/img/puse-icon.svg deleted file mode 100644 index b44ad2f..0000000 --- a/src/img/puse-icon.svg +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/vite.config.js b/vite.config.js index 96133ba..916580d 100644 --- a/vite.config.js +++ b/vite.config.js @@ -14,7 +14,7 @@ export default defineConfig({ rollupOptions: { input: { main: resolve(__dirname, 'index.html'), - portfolio: resolve(__dirname, 'portfolio.html'), + footer: resolve(__dirname, 'footer.html'), }, }, manifest: true,