Initial commit

README.md

@@ -0,0 +1,142 @@
+# ساختار پروژه
+
+این ریپوزیتوری شامل ساختار و کدهای فرانت‌اند قالب وردپرس پروژه است که با Vite، HTML، CSS و JavaScript توسعه داده می‌شود.
+
+## درباره پروژه
+
+این ریپوزیتوری بخش فرانت‌اند قالب وردپرس پروژه اصلی است. اینجا تمام طراحی‌ها، کامپوننت‌ها و assetها با استفاده از Vite توسعه داده می‌شود.
+
+## پیش‌نیازها
+
+- Node.js 18+
+- npm 10+
+- Git
+- Visual Studio Code
+- Prettier(extention)
+
+## نصب و اجرا
+
+npm run dev
+
+```bash
+# کلون کردن پروژه
+git clone <git url> 
+
+# ورود به پوشه
+cd inova-frontend
+
+# نصب وابستگی‌ها
+npm install
+
+# اجرای محیط توسعه
+npm run dev
+```
+
+##  ساختار فایل ها
+
+- پوشه assets:
+
+فایل  آیکون‌ها در این بخش قرار داده  شده است
+تمامی ایکون های استفاده شده در این پروژه باید در این فایل تعریف شوند و برای صفحات مختلف فایل آیکون مجزا نخواهیم داشت.
+
+- ساختار آیکون هاicons.svg:
+  
+آیکون ها بصورت SVG Symbol ایجاد و استفاده می شوند
+تمام آیکون‌ها   icons.svg  در فایل
+src/assets/icons/icons.svg
+نگهداری می‌شوند
+و در html با دستور زیراستفاده می شوند
+```html
+<svg aria-hidden="true">
+    <use href="./src/assets/icons/svgicon.svg#<svgID>"/>
+</svg>
+```
+
+- پوشه components:
+
+ساختارهای تکرارشونده در فولدر components قرار داده شده است .
+و سکشن و یا بخش هایی که در صفحات مختلف پروژه تکرار شده اند در این بخش تعریف شده و برای جلوگیری از تکرار کد در صفحات مختلف فراخوانی شده و استفاده می شوند ،مثل پیجینیشن و اسلایدر و ....
+
+این بخش از قبل توسط تیم توسعه در این فایل ایجاد شده است
+
+- پوشه core:
+
+تمام متغیرها، رنگ‌ها، فونت‌ها، فاصله‌ها و استایل‌های پایه پروژه در این فایل قرار دارند
+این فایل با توجه به طراحی هر پروژه (Figma) سفارشی می‌شود.
+این بخش برای کل پروژه تعریف شده و استفاده می شود و برای هر صفحه نباید بطور جدا تعریف شود
+
+- پوشه layouts:
+
+در این بخش لیوت هایی که در پروژه داریم قرار داده می شود، مثل فوتر و هدر و...
+
+- پوشه pages :
+
+ در این بخش کدهای صفحات مختلف به تفکیک توسعه داده می شود.
+ هر صفحه یک پوشه ی جدا دارد که شامل فایل html - css- js و عکس های مربوط به هر صفحه می باشد
+ نام هر پوشه، نام همان صفحه می باشد و نام فایل های html - css - js هم باید هم نام با صفحه ی در حال توسعه باشد
+
+ برای مثال فایل های صفحه homepage به شرح زیر می باشد
+
+ ```
+ -pages
+   --homepage
+     ---assets
+       ----css
+          homepage.css
+       ----images
+       ----js
+          homepage.js
+       ----videos   
+      homepage.html
+  ``` 
+   
+
+
+- ساختار css :
+
+کدهای CSS در دو فایل مجزا ایجاد می شود و کدهای مربوط به ریسپانسیو  در فایل responsive.css ایجاد می شود
+
+- پوشه utils:
+  
+  در این بخش فانکشن هایی که در کل پروژه استفاده می شود قرار داده شده تا از تکرار کد جلوگیری شود 
+  مثل فانکشن ismobile برای تشخیص اندازه ی موبایل و اعمال موردی خاص در آن اندازه
+
+- فرمت تصاویر :
+
+تصاویر با فرمت webp در پروژه استفاده شود
+تصاویر هر صفحه باید در پوشه ی مربوط به همان صفحه قرار داده شود
+برای مثال در صفحه ی  homepage تصاویر باید در ادرس زیر قرار بگیرند
+src/pages/homepage/assets/images/image1.webp
+
+و آیکون ها بصورت svg  طبق ساختاری که بالاتر توضیح داده شد اعمال شوند
+
+
+- قوانین نامگذاری کلاس ها :
+  برای جلوگیری از تداخل نام کلاس ها در پروژه موارد زیر را رعایت کنید:
+ 1- برای نامگذاری همه ی کلاس های یک سکشن ، نام آن سکشن را در نامگذاری داشته باشید
+ ```html
+ hero-section__title
+```
+ 2- از نام گذاری های جنرال بپرهیزید
+
+btn- txt - title و....
+
+
+- محدودیت ها و قوانین:
+- 
+1- از cdn ها و یا کتابخانه ها در پیاده سازی استفاده نشود و همه ی موارد در local 
+ پیاده سازی شود
+
+2- کد باید بصورتی توسعه داده شود که دقیقا مشابه فایل (فیگا) باشد
+
+3- چک لیست نهایی:
+
+ بعد از اتمام کار قبل از تحویل نهایی ،
+ از همه ی جوانب اعم از رفتار سکشن ها، اندازه ی فونت ها، رنگ ها ، فاصله ها و...
+  فایل را بطور کامل بررسی کنید و در صورت مغایرت با فیگمااطلاحات لازم انجام شود
+
+4- برای این پروژه یک ریپازیتوری در گیت تعریف شده است 
+  در هنگام push  کردن کد بر روی گیت حتما چک شود که بر روی برنچی که در اختیارتان قرار گرفته push انجام شود
+ برای مشاهده ی برنچ فعال روی سیستم خود در ترمینال دستور زیر را وارد کنید
+
+git branch --show-current