اجعله خاصًا بك

مكان كل شيء

شغّل yarn dev أثناء العمل: تُعاد تحميل الصفحة مع كل حفظ.

النصوص

كل كلمة في الصفحة تأتي من messages/en.json وmessages/ar.json. غيّر القيمة ولا تغيّر المفتاح أبدًا، وأبقِ المفاتيح نفسها في الملفين.

تُرسم الكلمة الضخمة بخط Thunder، بأحرف كبيرة، وهي JUICY في اللغتين. أبقِها بأحرف لاتينية، أو غيّر خطها أيضًا.

استبدل نكهة

النكهة معرّف يربط بين علبة ثلاثية الأبعاد ومظهر لوني وصورة فاكهة ونصوصها. تستبدل الخطوات أدناه انفجار المانجو بنكهة جديدة، Peach Fizz، بالمعرّف peachFizz. واتبع الخطوات نفسها لأي من النكهات الأربع.

1. 01

   غيّر اسم المعرّف

   في src/types/juice.ts، استبدل المعرّف القديم بالجديد. ومن هنا، يشير TypeScript إلى كل ملف ما زال يستخدم المعرّف القديم.

   src/types/juice.tsنسخ

   export type JuiceId =
     | "lemonGinger"
     | "blueberryAcai"
     | "peachFizz"
     | "raspberryRose";
2. 02

   اصنع نموذج العلبة

   كل علبة ملف .glb فيه شبكة واحدة ومادتان: M_Aluminum لجسم العلبة المعدني، وM_Cola للملصق. الملصق صورة واحدة ملفوفة حول العلبة، بحجم 2048 في 958 بكسل، ومخزّنة داخل ملف .glb. لصنع علبتك، افتح علبة موجودة في Blender (File > Import > glTF 2.0)، واستبدل الصورة في المادة M_Cola بملصقك بالحجم نفسه، ثم صدّرها عبر File > Export > glTF 2.0 بصيغة glTF Binary (.glb). حافظ على حجم النموذج وموضعه حتى يستقر على العجلة مثل غيره.

   احفظه باسم public/assets/3d/can/peach.glb. تجعل الشيفرة كل مادة معدنًا لامعًا عند تحميل النموذج (metalness وroughness في src/features/carousel/hooks/useCanModel.ts)، لذا غيّر اللمسة النهائية هناك وليس في Blender.
3. 03

   اربط العجلة بالنموذج

   في src/features/carousel/constants/juiceCans.ts، غيّر العنصر. ترتيب هذه القائمة هو الترتيب على العجلة، والعلبة الأولى هي التي تفتح عليها الصفحة.

   src/features/carousel/constants/juiceCans.tsنسخ

   { id: "peachFizz", model: "/assets/3d/can/peach.glb" },
4. 04

   أعطها ألوانها

   في src/features/product-showcase/constants/themes.ts، غيّر اسم العنصر واضبط ألوانه. ما يلوّنه كل لون موضّح في الألوان.

   src/features/product-showcase/constants/themes.tsنسخ

   peachFizz: {
     mainBgColor: "#F4A27B",
     blurColor: "#FFE1D2",
     textColor: "white",
     accentColor: "rgba(255, 255, 255, 0.9)",
     buttonBgColor: "white",
     buttonTextColor: "#F4A27B",
   },
5. 05

   أضف صورة فاكهتها

   ضع صورة PNG بخلفية شفافة في public/assets/images/fruit/، بحجم 400 في 600 بكسل مثل الصور الأخرى، واذكر اسمها في src/features/floating-fruits/constants/fruitImages.ts. تعرضها الصفحة أربع مرات حول العلبة، بأحجام وزوايا مختلفة.

   src/features/floating-fruits/constants/fruitImages.tsنسخ

   peachFizz: "peach.png",
6. 06

   اكتب نصوصها

   في messages/en.json وmessages/ar.json كليهما، غيّر أسماء مفاتيح النكهة تحت juices وcart.items واكتب النص الجديد.

   messages/en.jsonنسخ

   "juices": {
     "peachFizz": {
       "name": "Peach Fizz",
       "description": "Ripe peaches and a light sparkle, cold from the can."
     }
   }
7. 07

   حدّث السلة، إن كانت النكهة فيها

   تعرض لوحة السلة المنتجات الموجودة في src/features/navigation/constants/sampleCartItems.ts: ليمون وزنجبيل، وتوت أزرق وأساي. إذا كانت نكهتك إحداهما، فغيّر juiceId وprice وimage الخاصة بها، وهي صورة للعلبة في public/assets/images/can/.
8. 08

   تحقّق

   الطرفيةفي juicyنسخ

   yarn typecheck
   yarn dev

   النتيجة المتوقعة: لا يُبلغ yarn typecheck عن أي أخطاء، وتدور العلبة الجديدة إلى مكانها بألوانها وفاكهتها ونصوصها.

   تواجه مشكلة؟

عندما تستبدل النكهة الأولى، ليمون وزنجبيل، غيّر أيضًا DEFAULT_JUICE_ID في نهاية themes.ts، وقيمة background الخاصة بـ body في src/app/globals.css إلى قيمة mainBgColor الخاصة بها. يظهر ذلك اللون لحظة قبل اكتمال تحميل الصفحة.

الألوان

لكل نكهة مظهر في src/features/product-showcase/constants/themes.ts. تنتقل الصفحة بسلاسة من مظهر إلى الذي يليه مع دوران العجلة.

textColor وaccentColor جزء من كل مظهر لكن لا يقرؤهما أي مكوّن. نصوص الصفحة بيضاء.

أثناء عمل الصفحة، يلوّن useBodyBackground في src/features/landing/hooks/ خلفية الصفحة بلون mainBgColor للنكهة النشطة. أما خلفية body في src/app/globals.css، أي #82AF38، فلا تظهر إلا لحظة قبل تحميل الصفحة، لذا غيّرها مع النكهة الأولى.

يأتي الضوء المنعكس على العلب من public/assets/hdri/forest_slope_1k.hdr، وهي صورة Forest Slope من Poly Haven (CC0). لتغييره، ضع ملف .hdr آخر في المجلد نفسه واذكر اسمه في src/features/carousel/constants/environment.ts.

الصور

استبدل ملفًا بملفك تحت الاسم نفسه، أو غيّر الاسم في المكان الذي يذكره الجدول.

عدد مكعبات الثلج والأوراق، على الهواتف والشاشات الأكبر، مضبوط في src/features/ice-cubes/constants/layout.ts.

الخطوط

• Thunder، للكلمة الضخمة: ملفاته في src/app/fonts/ ويحمّلها src/app/[locale]/layout.tsx باستخدام localFont. لاستخدام خط آخر، ضع ملفاته هناك وغيّر مسارات src.
• Cairo، للنص العربي: يُحمَّل من Google Fonts في الملف نفسه باستخدام next/font/google. استبدل Cairo بخط آخر من Google يتضمن المجموعة الفرعية arabic.
• النص اللاتيني يستخدم Arial، المضبوط على body في src/app/globals.css.

أجزاء الصفحة

الصفحة ملف واحد، src/app/[locale]/page.tsx، يضع كل جزء في مكانه. لإزالة جزء، احذف عنصره من هناك.

الروابط والأزرار

روابط قائمة التواصل موجودة في src/features/product-showcase/constants/contactLinks.ts. لكل رابط id وurl وicon من react-icons، وتسميته تحت contact.links.<id> في ملفات الرسائل. استبدل الرابطين النموذجيين بروابطك.

import { FaInstagram } from "react-icons/fa6";

{ id: "instagram", url: "https://www.instagram.com/your-brand", icon: FaInstagram },

• عناصر القائمة مذكورة بمعرّفاتها في src/features/navigation/constants/navItems.ts، وتسمياتها تحت nav.items. هي تسميات فقط ولا تؤدي إلى أي مكان بعد: لتحويل أحدها إلى رابط، اعرض <a> بعنوانك في src/features/navigation/components/NavLinks.tsx.
• اعرف المزيد وإتمام الشراء وعرض السلة لا تؤدي أي إجراء بعد. أضف onClick أو حوّلها إلى روابط حيث تُرسم: src/features/product-showcase/components/ProductInfo.tsx وsrc/features/navigation/components/CartSummary.tsx.
• نموذج تسجيل الدخول يتحقق من حقوله ثم يفرّغها. لتسجيل دخول المستخدمين فعلًا، أرسل القيم من onSubmit في src/features/navigation/hooks/useSignInForm.ts إلى واجهتك الخلفية.

أحجام العبوات

تأتي أزرار الأحجام الدائرية من src/features/product-showcase/constants/sizes.ts. الضغط على زر يختاره، ويحدد selected: true الحجم المختار عند فتح الصفحة. تسمية الوحدة موجودة تحت units في ملفات الرسائل.

{ value: "355", unit: "ml", selected: true },

عنوان الصفحة ووصفها ومحركات البحث

عنوان تبويب المتصفح والوصف الذي تعرضه محركات البحث هما metadata.title وmetadata.description في كل ملف رسائل، فلكل لغة عنوانها ووصفها. وأيقونة التبويب هي src/app/favicon.ico: استبدلها بأيقونتك تحت الاسم نفسه.

لا يضبط القالب عنوان الموقع، ولا صورة المشاركة على الشبكات الاجتماعية، ولا خريطة الموقع، ولا robots.txt. عندما تعرف نطاقك، أضفها في generateMetadata داخل src/app/[locale]/layout.tsx، مثلًا:

return {
  metadataBase: new URL("https://www.your-domain.com"),
  title: t("title"),
  description: t("description"),
  openGraph: { images: "/og.png" },
};

ضع صورة المشاركة في public/og.png، بحجم 1200 في 630 بكسل.