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 (
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
+
); } 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 && ( +
+

+ 23% +

+
+ )} + {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 && ( +
+

+ 23% +

+
+ )} + {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 && ( +
+

+ 23% +

+
+ )} + {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 && ( +
+

+ 23% +

+
+ )} + {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 && ( +
+

+ 23% +

+
+ )} + {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: [], +};