diff --git a/package-lock.json b/package-lock.json
index 5760e69..053f952 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,13 @@
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
+ "sass": "^1.45.0",
"web-vitals": "^2.1.2"
+ },
+ "devDependencies": {
+ "autoprefixer": "^10.4.0",
+ "postcss": "^8.4.5",
+ "tailwindcss": "^3.0.7"
}
},
"node_modules/@babel/code-frame": {
@@ -8065,6 +8071,11 @@
"url": "https://opencollective.com/immer"
}
},
+ "node_modules/immutable": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz",
+ "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw=="
+ },
"node_modules/import-cwd": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz",
@@ -13630,6 +13641,22 @@
"resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
"integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
},
+ "node_modules/sass": {
+ "version": "1.45.0",
+ "resolved": "https://registry.npmjs.org/sass/-/sass-1.45.0.tgz",
+ "integrity": "sha512-ONy5bjppoohtNkFJRqdz1gscXamMzN3wQy1YH9qO2FiNpgjLhpz/IPRGg0PpCjyz/pWfCOaNEaiEGCcjOFAjqw==",
+ "dependencies": {
+ "chokidar": ">=3.0.0 <4.0.0",
+ "immutable": "^4.0.0",
+ "source-map-js": ">=0.6.2 <2.0.0"
+ },
+ "bin": {
+ "sass": "sass.js"
+ },
+ "engines": {
+ "node": ">=8.9.0"
+ }
+ },
"node_modules/sass-loader": {
"version": "12.4.0",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.4.0.tgz",
@@ -21788,6 +21815,11 @@
"resolved": "https://registry.npmjs.org/immer/-/immer-9.0.7.tgz",
"integrity": "sha512-KGllzpbamZDvOIxnmJ0jI840g7Oikx58lBPWV0hUh7dtAyZpFqqrBZdKka5GlTwMTZ1Tjc/bKKW4VSFAt6BqMA=="
},
+ "immutable": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz",
+ "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw=="
+ },
"import-cwd": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz",
@@ -25650,6 +25682,16 @@
"resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
"integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
},
+ "sass": {
+ "version": "1.45.0",
+ "resolved": "https://registry.npmjs.org/sass/-/sass-1.45.0.tgz",
+ "integrity": "sha512-ONy5bjppoohtNkFJRqdz1gscXamMzN3wQy1YH9qO2FiNpgjLhpz/IPRGg0PpCjyz/pWfCOaNEaiEGCcjOFAjqw==",
+ "requires": {
+ "chokidar": ">=3.0.0 <4.0.0",
+ "immutable": "^4.0.0",
+ "source-map-js": ">=0.6.2 <2.0.0"
+ }
+ },
"sass-loader": {
"version": "12.4.0",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.4.0.tgz",
diff --git a/package.json b/package.json
index e7276d2..b2400fa 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
+ "sass": "^1.45.0",
"web-vitals": "^2.1.2"
},
"scripts": {
@@ -34,5 +35,10 @@
"last 1 firefox version",
"last 1 safari version"
]
+ },
+ "devDependencies": {
+ "autoprefixer": "^10.4.0",
+ "postcss": "^8.4.5",
+ "tailwindcss": "^3.0.7"
}
}
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..33ad091
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+}
diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index 74b5e05..0000000
--- a/src/App.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.App {
- text-align: center;
-}
-
-.App-logo {
- height: 40vmin;
- pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
- .App-logo {
- animation: App-logo-spin infinite 20s linear;
- }
-}
-
-.App-header {
- background-color: #282c34;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: calc(10px + 2vmin);
- color: white;
-}
-
-.App-link {
- color: #61dafb;
-}
-
-@keyframes App-logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-}
diff --git a/src/App.js b/src/App.js
index 3784575..debe24b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,23 +1,16 @@
-import logo from './logo.svg';
-import './App.css';
+import "./App.scss";
+import ProductDesign from "./components/productDesign/ProductDesign";
+
+// import { library } from "@fortawesome/fontawesome-svg-core";
+// import { fab } from "@fortawesome/free-brands-svg-icons";
+// import { faCheckSquare, faCoffee } from "@fortawesome/free-solid-svg-icons";
+
+// library.add(fab, faCheckSquare, faCoffee);
function App() {
return (
);
}
diff --git a/src/App.scss b/src/App.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/App.test.js b/src/App.test.js
deleted file mode 100644
index 1f03afe..0000000
--- a/src/App.test.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
- render();
- const linkElement = screen.getByText(/learn react/i);
- expect(linkElement).toBeInTheDocument();
-});
diff --git a/src/assets/fonts/iransans/eot/IRANSansWeb.eot b/src/assets/fonts/iransans/eot/IRANSansWeb.eot
new file mode 100644
index 0000000..553eec8
Binary files /dev/null and b/src/assets/fonts/iransans/eot/IRANSansWeb.eot differ
diff --git a/src/assets/fonts/iransans/eot/IRANSansWeb_Black.eot b/src/assets/fonts/iransans/eot/IRANSansWeb_Black.eot
new file mode 100644
index 0000000..ee7c6a0
Binary files /dev/null and b/src/assets/fonts/iransans/eot/IRANSansWeb_Black.eot differ
diff --git a/src/assets/fonts/iransans/eot/IRANSansWeb_Bold.eot b/src/assets/fonts/iransans/eot/IRANSansWeb_Bold.eot
new file mode 100644
index 0000000..746a6e6
Binary files /dev/null and b/src/assets/fonts/iransans/eot/IRANSansWeb_Bold.eot differ
diff --git a/src/assets/fonts/iransans/eot/IRANSansWeb_Light.eot b/src/assets/fonts/iransans/eot/IRANSansWeb_Light.eot
new file mode 100644
index 0000000..f79a681
Binary files /dev/null and b/src/assets/fonts/iransans/eot/IRANSansWeb_Light.eot differ
diff --git a/src/assets/fonts/iransans/eot/IRANSansWeb_Medium.eot b/src/assets/fonts/iransans/eot/IRANSansWeb_Medium.eot
new file mode 100644
index 0000000..8b31d6b
Binary files /dev/null and b/src/assets/fonts/iransans/eot/IRANSansWeb_Medium.eot differ
diff --git a/src/assets/fonts/iransans/eot/IRANSansWeb_UltraLight.eot b/src/assets/fonts/iransans/eot/IRANSansWeb_UltraLight.eot
new file mode 100644
index 0000000..fd4b205
Binary files /dev/null and b/src/assets/fonts/iransans/eot/IRANSansWeb_UltraLight.eot differ
diff --git a/src/assets/fonts/iransans/ttf/IRANSansWeb.ttf b/src/assets/fonts/iransans/ttf/IRANSansWeb.ttf
new file mode 100644
index 0000000..7416c53
Binary files /dev/null and b/src/assets/fonts/iransans/ttf/IRANSansWeb.ttf differ
diff --git a/src/assets/fonts/iransans/ttf/IRANSansWeb_Black.ttf b/src/assets/fonts/iransans/ttf/IRANSansWeb_Black.ttf
new file mode 100644
index 0000000..df4928f
Binary files /dev/null and b/src/assets/fonts/iransans/ttf/IRANSansWeb_Black.ttf differ
diff --git a/src/assets/fonts/iransans/ttf/IRANSansWeb_Bold.ttf b/src/assets/fonts/iransans/ttf/IRANSansWeb_Bold.ttf
new file mode 100644
index 0000000..158fbaa
Binary files /dev/null and b/src/assets/fonts/iransans/ttf/IRANSansWeb_Bold.ttf differ
diff --git a/src/assets/fonts/iransans/ttf/IRANSansWeb_Light.ttf b/src/assets/fonts/iransans/ttf/IRANSansWeb_Light.ttf
new file mode 100644
index 0000000..3060c60
Binary files /dev/null and b/src/assets/fonts/iransans/ttf/IRANSansWeb_Light.ttf differ
diff --git a/src/assets/fonts/iransans/ttf/IRANSansWeb_Medium.ttf b/src/assets/fonts/iransans/ttf/IRANSansWeb_Medium.ttf
new file mode 100644
index 0000000..6dd6c5d
Binary files /dev/null and b/src/assets/fonts/iransans/ttf/IRANSansWeb_Medium.ttf differ
diff --git a/src/assets/fonts/iransans/ttf/IRANSansWeb_UltraLight.ttf b/src/assets/fonts/iransans/ttf/IRANSansWeb_UltraLight.ttf
new file mode 100644
index 0000000..7ebe1bf
Binary files /dev/null and b/src/assets/fonts/iransans/ttf/IRANSansWeb_UltraLight.ttf differ
diff --git a/src/assets/fonts/iransans/woff/IRANSansWeb.woff b/src/assets/fonts/iransans/woff/IRANSansWeb.woff
new file mode 100644
index 0000000..abb63f2
Binary files /dev/null and b/src/assets/fonts/iransans/woff/IRANSansWeb.woff differ
diff --git a/src/assets/fonts/iransans/woff/IRANSansWeb_Black.woff b/src/assets/fonts/iransans/woff/IRANSansWeb_Black.woff
new file mode 100644
index 0000000..12c8a6e
Binary files /dev/null and b/src/assets/fonts/iransans/woff/IRANSansWeb_Black.woff differ
diff --git a/src/assets/fonts/iransans/woff/IRANSansWeb_Bold.woff b/src/assets/fonts/iransans/woff/IRANSansWeb_Bold.woff
new file mode 100644
index 0000000..801c55d
Binary files /dev/null and b/src/assets/fonts/iransans/woff/IRANSansWeb_Bold.woff differ
diff --git a/src/assets/fonts/iransans/woff/IRANSansWeb_Light.woff b/src/assets/fonts/iransans/woff/IRANSansWeb_Light.woff
new file mode 100644
index 0000000..99b8d5d
Binary files /dev/null and b/src/assets/fonts/iransans/woff/IRANSansWeb_Light.woff differ
diff --git a/src/assets/fonts/iransans/woff/IRANSansWeb_Medium.woff b/src/assets/fonts/iransans/woff/IRANSansWeb_Medium.woff
new file mode 100644
index 0000000..322c396
Binary files /dev/null and b/src/assets/fonts/iransans/woff/IRANSansWeb_Medium.woff differ
diff --git a/src/assets/fonts/iransans/woff/IRANSansWeb_UltraLight.woff b/src/assets/fonts/iransans/woff/IRANSansWeb_UltraLight.woff
new file mode 100644
index 0000000..31c21ca
Binary files /dev/null and b/src/assets/fonts/iransans/woff/IRANSansWeb_UltraLight.woff differ
diff --git a/src/assets/fonts/iransans/woff2/IRANSansWeb.woff2 b/src/assets/fonts/iransans/woff2/IRANSansWeb.woff2
new file mode 100644
index 0000000..21bbba5
Binary files /dev/null and b/src/assets/fonts/iransans/woff2/IRANSansWeb.woff2 differ
diff --git a/src/assets/fonts/iransans/woff2/IRANSansWeb_Black.woff2 b/src/assets/fonts/iransans/woff2/IRANSansWeb_Black.woff2
new file mode 100644
index 0000000..da34aad
Binary files /dev/null and b/src/assets/fonts/iransans/woff2/IRANSansWeb_Black.woff2 differ
diff --git a/src/assets/fonts/iransans/woff2/IRANSansWeb_Bold.woff2 b/src/assets/fonts/iransans/woff2/IRANSansWeb_Bold.woff2
new file mode 100644
index 0000000..dd1436c
Binary files /dev/null and b/src/assets/fonts/iransans/woff2/IRANSansWeb_Bold.woff2 differ
diff --git a/src/assets/fonts/iransans/woff2/IRANSansWeb_Light.woff2 b/src/assets/fonts/iransans/woff2/IRANSansWeb_Light.woff2
new file mode 100644
index 0000000..16dc9f1
Binary files /dev/null and b/src/assets/fonts/iransans/woff2/IRANSansWeb_Light.woff2 differ
diff --git a/src/assets/fonts/iransans/woff2/IRANSansWeb_Medium.woff2 b/src/assets/fonts/iransans/woff2/IRANSansWeb_Medium.woff2
new file mode 100644
index 0000000..5fb39d4
Binary files /dev/null and b/src/assets/fonts/iransans/woff2/IRANSansWeb_Medium.woff2 differ
diff --git a/src/assets/fonts/iransans/woff2/IRANSansWeb_UltraLight.woff2 b/src/assets/fonts/iransans/woff2/IRANSansWeb_UltraLight.woff2
new file mode 100644
index 0000000..eeeec11
Binary files /dev/null and b/src/assets/fonts/iransans/woff2/IRANSansWeb_UltraLight.woff2 differ
diff --git a/src/assets/icons/discount.png b/src/assets/icons/discount.png
new file mode 100644
index 0000000..eff7853
Binary files /dev/null and b/src/assets/icons/discount.png differ
diff --git a/src/assets/icons/vuesax-linear-heart.svg b/src/assets/icons/vuesax-linear-heart.svg
new file mode 100644
index 0000000..306bf40
--- /dev/null
+++ b/src/assets/icons/vuesax-linear-heart.svg
@@ -0,0 +1,8 @@
+
diff --git a/src/assets/images/Path2.svg b/src/assets/images/Path2.svg
new file mode 100644
index 0000000..89ce43b
--- /dev/null
+++ b/src/assets/images/Path2.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/images/goldon.png b/src/assets/images/goldon.png
new file mode 100644
index 0000000..d864e44
Binary files /dev/null and b/src/assets/images/goldon.png differ
diff --git a/src/assets/images/o1.svg b/src/assets/images/o1.svg
new file mode 100644
index 0000000..12fcd6e
--- /dev/null
+++ b/src/assets/images/o1.svg
@@ -0,0 +1,8 @@
+
diff --git a/src/components/productDesign/ProductDesign.js b/src/components/productDesign/ProductDesign.js
new file mode 100644
index 0000000..74f39f0
--- /dev/null
+++ b/src/components/productDesign/ProductDesign.js
@@ -0,0 +1,673 @@
+import React from "react";
+import "./ProductDesign.scss";
+import book from "../../assets/images/goldon.png";
+import heart from "../../assets/icons/vuesax-linear-heart.svg";
+import discountImg from "../../assets/icons/discount.png";
+// import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+const ProductDesign = ({
+ colors,
+ likeBtn,
+ discount,
+ discountPricePercent,
+ discountPrice,
+ productContent,
+ star,
+ productTags,
+ priceDirection,
+ productTitleAlignment,
+}) => {
+ return (
+
+ {/* title holder */}
+
+
آیتم محصولات
+
+
+
+ {/* product items1 */}
+
+ {/* item1 */}
+
+ {/*star img holder*/}
+
+ {discountPricePercent && (
+
+ )}
+ {likeBtn && (
+
+
+
+ )}
+ {discount && (
+
+
+
+ )}
+ {/* img Holder */}
+
+
+
+ {/* select Color */}
+ {colors && (
+
+
+ -
+ {/* */}
+
+ -
+ {/* */}
+
+ -
+ {/* */}
+
+ -
+ {/* */}
+
+
+
+ )}
+
+ {/* content holder */}
+
+
+ نسخه چاپی علموم تجربه هفتم
+
+ {productContent && (
+
+ این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب
+ دیگری نیز دارد.
+
+ )}
+
+ {/* star holder */}
+ {star && (
+
+
+ -
+ {/* */}
+
+ -
+ {/* */}
+
+ -
+ {/* */}
+
+ -
+ {/* */}
+
+ -
+ {/* */}
+
+
+
+ 39
+
+
+ )}
+ {/* price holder */}
+
+ {/* price */}
+
+
+
قیمت
+ {discountPrice && (
+
+ 145تومان
+
+ )}
+
+
+ 145.000تومان
+
+
+ {/* add to cart */}
+
+
+ {/* tag holder */}
+ {productTags && (
+
+
+
+
+
+ )}
+
+
+ {/* product items2 */}
+
+ {/* item1 */}
+
+ {/*star img holder*/}
+
+ {discountPricePercent && (
+
+ )}
+ {likeBtn && (
+
+
+
+ )}
+ {discount && (
+
+
+
+ )}
+ {/* img Holder */}
+
+
+
+ {/* select Color */}
+ {colors && (
+
+
+ -
+ {/* */}
+
+ -
+ {/* */}
+
+ -
+ {/* */}
+
+ -
+ {/* */}
+
+
+
+ )}
+
+ {/* content holder */}
+
+
+ نسخه چاپی علموم تجربه هفتم
+
+ {productContent && (
+
+ این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب
+ دیگری نیز دارد.
+
+ )}
+
+ {/* star holder */}
+ {star && (
+
+
+ -
+ {/* */}
+
+ -
+ {/* */}
+
+ -
+ {/* */}
+
+ -
+ {/* */}
+
+ -
+ {/* */}
+
+
+
+ 39
+
+
+ )}
+ {/* price holder */}
+
+ {/* price */}
+
+
+
قیمت
+ {discountPrice && (
+
+ 145تومان
+
+ )}
+
+
+ 145.000تومان
+
+
+ {/* add to cart */}
+
+
+ {/* tag holder */}
+ {productTags && (
+
+
+
+
+
+ )}
+
+
+ {/* product items3 */}
+
+ {/* item1 */}
+
+ {/*star img holder*/}
+
+ {discountPricePercent && (
+
+ )}
+ {likeBtn && (
+
+
+
+ )}
+ {discount && (
+
+
+
+ )}
+ {/* img Holder */}
+
+
+
+ {/* select Color */}
+ {colors && (
+
+
+ -
+ {/* */}
+
+ -
+ {/* */}
+
+ -
+ {/* */}
+
+ -
+ {/* */}
+
+
+
+ )}
+
+ {/* content holder */}
+
+
+ نسخه چاپی علموم تجربه هفتم
+
+ {productContent && (
+
+ این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب
+ دیگری نیز دارد.
+
+ )}
+
+ {/* star holder */}
+ {star && (
+
+
+ -
+ {/* */}
+
+ -
+ {/* */}
+
+ -
+ {/* */}
+
+ -
+ {/* */}
+
+ -
+ {/* */}
+
+
+
+ 39
+
+
+ )}
+ {/* price holder */}
+
+ {/* price */}
+
+
+
قیمت
+ {discountPrice && (
+
+ 145تومان
+
+ )}
+
+
+ 145.000تومان
+
+
+ {/* add to cart */}
+
+
+ {/* tag holder */}
+ {productTags && (
+
+
+
+
+
+ )}
+
+
+ {/* product items4 */}
+
+ {/* item1 */}
+
+ {/*star img holder*/}
+
+ {discountPricePercent && (
+
+ )}
+ {likeBtn && (
+
+
+
+ )}
+ {discount && (
+
+
+
+ )}
+ {/* img Holder */}
+
+
+
+ {/* select Color */}
+ {colors && (
+
+
+ -
+ {/* */}
+
+ -
+ {/* */}
+
+ -
+ {/* */}
+
+ -
+ {/* */}
+
+
+
+ )}
+
+ {/* content holder */}
+
+
+ نسخه چاپی علموم تجربه هفتم
+
+ {productContent && (
+
+ این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب
+ دیگری نیز دارد.
+
+ )}
+
+ {/* star holder */}
+ {star && (
+
+
+ -
+ {/* */}
+
+ -
+ {/* */}
+
+ -
+ {/* */}
+
+ -
+ {/* */}
+
+ -
+ {/* */}
+
+
+
+ 39
+
+
+ )}
+ {/* price holder */}
+
+ {/* price */}
+
+
+
قیمت
+ {discountPrice && (
+
+ 145تومان
+
+ )}
+
+
+ 145.000تومان
+
+
+ {/* add to cart */}
+
+
+ {/* tag holder */}
+ {productTags && (
+
+
+
+
+
+ )}
+
+
+ {/* product items5 */}
+
+ {/* item1 */}
+
+ {/*star img holder*/}
+
+ {discountPricePercent && (
+
+ )}
+ {likeBtn && (
+
+
+
+ )}
+ {discount && (
+
+
+
+ )}
+ {/* img Holder */}
+
+
+
+ {/* select Color */}
+ {colors && (
+
+
+ -
+ {/* */}
+
+ -
+ {/* */}
+
+ -
+ {/* */}
+
+ -
+ {/* */}
+
+
+
+ )}
+
+ {/* content holder */}
+
+
+ نسخه چاپی علموم تجربه هفتم
+
+ {productContent && (
+
+ این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب
+ دیگری نیز دارد.
+
+ )}
+
+ {/* star holder */}
+ {star && (
+
+
+ -
+ {/* */}
+
+ -
+ {/* */}
+
+ -
+ {/* */}
+
+ -
+ {/* */}
+
+ -
+ {/* */}
+
+
+
+ 39
+
+
+ )}
+ {/* price holder */}
+
+ {/* price */}
+
+
+
قیمت
+ {discountPrice && (
+
+ 145تومان
+
+ )}
+
+
+ 145.000تومان
+
+
+ {/* add to cart */}
+
+
+ {/* tag holder */}
+ {productTags && (
+
+
+
+
+
+ )}
+
+
+
+
+ );
+};
+
+export default ProductDesign;
+
+ProductDesign.defaultProps = {
+ colors: true,
+ likeBtn: true,
+ discount: true,
+ discountPricePercent: true,
+ discountPrice: true,
+ productContent: true,
+ star: true,
+ productTags: true,
+ priceDirection: "flex-row",
+ productTitleAlignment: "text-justify",
+};
diff --git a/src/components/productDesign/ProductDesign.scss b/src/components/productDesign/ProductDesign.scss
new file mode 100644
index 0000000..abc697d
--- /dev/null
+++ b/src/components/productDesign/ProductDesign.scss
@@ -0,0 +1,42 @@
+.product-items-holder {
+ @apply w-full flex flex-wrap items-center justify-around my-10 px-4;
+}
+
+.product-item {
+ @apply w-full sm:w-60 md:w-72 mx-1 rounded-lg shadow-sm border p-2 my-3;
+}
+
+.discountPriceBtn {
+ @apply bg-discountPriceBg absolute left-2 top-4 rounded-md px-2 py-1;
+}
+
+.likeBtnBg {
+ @apply bg-likeBtnBg absolute left-2 top-10 rounded-md p-1;
+}
+
+.discountBtn {
+ @apply absolute left-2 top-20 rounded-md;
+}
+.dicountPriceNum {
+ @apply text-discountPriceTitle font-bold text-xs;
+}
+
+.productTitle {
+ @apply text-productTitle leading-4 text-base 2xl:text-lg;
+}
+
+.productContent {
+ @apply text-justify text-productContent mt-2 text-sm leading-6;
+}
+
+.addToCart {
+ @apply rounded-2xl px-2 py-3 border text-xs text-productPrice;
+}
+
+.product-price-num {
+ @apply text-sm text-productPrice font-semibold;
+}
+
+.product-tag {
+ @apply rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs;
+}
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index ec2585e..0000000
--- a/src/index.css
+++ /dev/null
@@ -1,13 +0,0 @@
-body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
-}
diff --git a/src/index.js b/src/index.js
index ef2edf8..f173967 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,17 +1,14 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.scss";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
ReactDOM.render(
,
- document.getElementById('root')
+ document.getElementById("root")
);
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
diff --git a/src/index.scss b/src/index.scss
new file mode 100644
index 0000000..bf2ea19
--- /dev/null
+++ b/src/index.scss
@@ -0,0 +1,16 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import "./components/productDesign/ProductDesign.scss";
+
+@font-face {
+ font-family: "iransans-medium";
+ src: url(./assets/fonts/iransans/ttf/IRANSansWeb_Medium.ttf);
+}
+
+body {
+ font-family: iransans-medium;
+ direction: rtl;
+ background-color: #f5f5f5;
+}
diff --git a/src/logo.svg b/src/logo.svg
deleted file mode 100644
index 9dfc1c0..0000000
--- a/src/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..e6987e6
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,30 @@
+module.exports = {
+ content: ["./src/**/*.{js,jsx,ts,tsx}"],
+ theme: {
+ extend: {},
+ textColor: (theme) => ({
+ ...theme("colors"),
+ discountPriceTitle: "#4ACA53",
+ productTitle: "#246E8A",
+ productContent: "#707070",
+ productStar: "#F7FF00",
+ productPrice: "#132F52",
+ productBorderBtn: "FFF3F3",
+ productTag: "#38A1B6",
+ borderColor: "#dbdbdb",
+ selectColor1: "#924EEB",
+ selectColor2: "#89ECFF",
+ selectColor3: "#FC5353",
+ selectColor4: "#FCF653",
+ }),
+ backgroundColor: (theme) => ({
+ ...theme("colors"),
+ productTagBg: "#E1FAFF",
+ likeBtnBg: "#FFF3F3",
+ discountPriceBg: "#F0FFF1",
+ counterBg: "#66B1EB",
+ incrementDecrementBg: "#2E7AB5",
+ }),
+ },
+ plugins: [],
+};