diff --git a/src/assets/icons/ar.png b/src/assets/icons/ar.png new file mode 100644 index 0000000..452902e Binary files /dev/null and b/src/assets/icons/ar.png differ diff --git a/src/assets/icons/download.png b/src/assets/icons/download.png new file mode 100644 index 0000000..ee86982 Binary files /dev/null and b/src/assets/icons/download.png differ diff --git a/src/assets/images/object__footer.svg b/src/assets/images/object__footer.svg new file mode 100644 index 0000000..9e1b5c6 --- /dev/null +++ b/src/assets/images/object__footer.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/types/images.d.ts b/src/types/images.d.ts index 5836bda..a189d4d 100644 --- a/src/types/images.d.ts +++ b/src/types/images.d.ts @@ -1,3 +1,4 @@ declare module '*.jpg'; declare module '*.jpeg'; -declare module '*.png'; \ No newline at end of file +declare module '*.png'; +declare module '*.svg'; \ No newline at end of file diff --git a/src/views/Home/AppDownload/index.scss b/src/views/Home/AppDownload/index.scss index 6fa10aa..7ba7699 100644 --- a/src/views/Home/AppDownload/index.scss +++ b/src/views/Home/AppDownload/index.scss @@ -3,14 +3,56 @@ margin: 0px auto; padding: 30px 0px; color: white; + background : url(../../../assets/images/object__footer.svg) no-repeat; + background-size : 100% 100%; + background-position : 0px 0px; h1{ font-family: numeralBold; } + &__figure{ + &--screen{ + width: 220px; + height: 185px; + border-top: 12px solid black; + border-right: 12px solid black; + border-left: 12px solid black; + border-top-left-radius: 30px; + border-top-right-radius: 30px; + background-color: #E3E3E3; + } + &--details{ + width: 320px; + padding: 10px; + background-color: black; + border-radius: 10px; + h2,p{ + margin: 0px; + margin-right: 5px; + } + h2{ + color: white; + font-family: numeralBold; + margin-bottom: 5px; + } + p{ + color: #FFD70F; + font-family: numeralLight; + } + } + } } @media screen and (min-width: 1441px) { .app-download{ max-width: 1250px; + &__figure{ + h2{ + font-size: 16px; + } + p{ + font-size: 13px; + } + } } } @@ -21,8 +63,16 @@ font-size: calc(100vw / 40); line-height: 2em; } - img{ - height: 60px; + &__figure{ + h2{ + font-size: calc(100vw / 120); + } + p{ + font-size: calc(100vw / 150); + } + img{ + width: 40px; + } } } diff --git a/src/views/Home/AppDownload/index.tsx b/src/views/Home/AppDownload/index.tsx index c3285a5..4edf281 100644 --- a/src/views/Home/AppDownload/index.tsx +++ b/src/views/Home/AppDownload/index.tsx @@ -1,12 +1,26 @@ import React from 'react' -import bazar from '../../../assets/images/bazar.png'; +import ar from '../../../assets/icons/ar.png'; +import download from '../../../assets/icons/download.png'; import './index.scss'; export default function AppDownload() { return (

اینجا جایگاه یک
متن ویژه است که باید در این
قسمت قرار بگیرد.

- +
+
+
+
+
+ {'واقعیت +
+

دانلود اپلیکیشن اندرویدی

+

به راحتی آب خوردن از کافه بازار و گوناگون

+
+
+ دانلود +
+
) }