diff --git a/src/assets/css/main.css b/src/assets/css/main.css index fb3ec3b..2d63d04 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -2319,6 +2319,14 @@ p { background-repeat: no-repeat; background-size: auto; } + +.appie-service-area.features-section{ + background: #fff; + position: relative; + background-position: 92% 100%; + background-repeat: no-repeat; + background-size: auto; +} .appie-service-area.appie-service-3-area { background: none; } @@ -2786,26 +2794,33 @@ p { color: #2b70fa; margin-bottom: 8px; } + +.appie-features-content { + background: #eef1f6; + border-radius: 6px; + padding: 20px; +} + .appie-features-content .title { - font-size: 44px; - line-height: 54px; + font-size: 20px; + line-height: 24px; margin-bottom: 10px; } @media only screen and (min-width: 992px) and (max-width: 1200px) { .appie-features-content .title { - font-size: 36px; - line-height: 44px; + font-size: 18px; + line-height: 24px; } } @media (max-width: 767px) { .appie-features-content .title { - font-size: 30px; - line-height: 40px; + font-size: 18px; + line-height: 24px; } } .appie-features-content p { - font-size: 18px; - line-height: 28px; + font-size: 16px; + line-height: 20px; padding-bottom: 30px; } @@ -2936,13 +2951,13 @@ p { @media only screen and (min-width: 768px) and (max-width: 991px) { .appie-features-thumb { text-align: center; - margin-top: 50px; + margin-top: 10px; } } @media (max-width: 767px) { .appie-features-thumb { text-align: center; - margin-top: 50px; + margin-top: 10px; } } diff --git a/src/assets/images/account-thumb.png b/src/assets/images/account-thumb.png new file mode 100644 index 0000000..d2d1215 Binary files /dev/null and b/src/assets/images/account-thumb.png differ diff --git a/src/assets/images/free_account.png b/src/assets/images/free_account.png index bd8a6db..1bbc828 100644 Binary files a/src/assets/images/free_account.png and b/src/assets/images/free_account.png differ diff --git a/src/assets/images/get_paid.png b/src/assets/images/get_paid.png index 188869e..24cfb09 100644 Binary files a/src/assets/images/get_paid.png and b/src/assets/images/get_paid.png differ diff --git a/src/assets/images/getpaid-thumb.png b/src/assets/images/getpaid-thumb.png new file mode 100644 index 0000000..401d6c6 Binary files /dev/null and b/src/assets/images/getpaid-thumb.png differ diff --git a/src/assets/images/market-thumb.png b/src/assets/images/market-thumb.png new file mode 100644 index 0000000..9e25e7d Binary files /dev/null and b/src/assets/images/market-thumb.png differ diff --git a/src/assets/images/market_place.png b/src/assets/images/market_place.png index a9a36ee..2d4e3fa 100644 Binary files a/src/assets/images/market_place.png and b/src/assets/images/market_place.png differ diff --git a/src/assets/images/task-thumb.png b/src/assets/images/task-thumb.png new file mode 100644 index 0000000..2e7ff48 Binary files /dev/null and b/src/assets/images/task-thumb.png differ diff --git a/src/assets/images/task.png b/src/assets/images/task.png index cef3701..aa89930 100644 Binary files a/src/assets/images/task.png and b/src/assets/images/task.png differ diff --git a/src/components/HomeOne/FeaturesHomeOne.js b/src/components/HomeOne/FeaturesHomeOne.js index 167b354..3a8e1d4 100644 --- a/src/components/HomeOne/FeaturesHomeOne.js +++ b/src/components/HomeOne/FeaturesHomeOne.js @@ -9,234 +9,135 @@ import marketPlace from '../../assets/images/market_place.png'; import task from '../../assets/images/task.png'; import getPaid from '../../assets/images/get_paid.png'; -import shapeSix from '../../assets/images/shape/shape-6.png'; -import shapeSeven from '../../assets/images/shape/shape-7.png'; -import shapeEight from '../../assets/images/shape/shape-8.png'; +import taskThumbnail from '../../assets/images/task-thumb.png' +import marketThumbnail from '../../assets/images/market-thumb.png' +import getPaidThumbnail from '../../assets/images/getpaid-thumb.png' +import accountThumbnail from '../../assets/images/account-thumb.png' + + import getConfig from './../../Config/config' function FeaturesHomeOne({ className }) { var site = getConfig()[0]; - const [tab, setTab] = useState('setting'); - const handleClick = (e, value) => { - e.preventDefault(); - setTab(value); - }; return ( -
+
-
-
-
-
- handleClick(e, 'setting')} - className={`nav-link ${tab === 'setting' ? 'active' : ''}`} - id="v-pills-home-tab" - data-toggle="pill" - href="#v-pills-home" - role="tab" - aria-controls="v-pills-home" - aria-selected="true" - > - Free Account - - handleClick(e, 'report')} - className={`nav-link ${tab === 'report' ? 'active' : ''}`} - id="v-pills-profile-tab" - data-toggle="pill" - href="#v-pills-profile" - role="tab" - aria-controls="v-pills-profile" - aria-selected="false" - > - Marketplace - - handleClick(e, 'notice')} - className={`nav-link ${tab === 'notice' ? 'active' : ''}`} - id="v-pills-messages-tab" - data-toggle="pill" - href="#v-pills-messages" - role="tab" - aria-controls="v-pills-messages" - aria-selected="false" - > - Complete Task - - handleClick(e, 'app')} - className={`nav-link ${tab === 'app' ? 'active' : ''}`} - id="v-pills-settings-tab" - data-toggle="pill" - href="#v-pills-settings" - role="tab" - aria-controls="v-pills-settings" - aria-selected="false" - > - Get Paid - +
+
+
+
+ image thumbnail
+ +

+ Create free account. +

+

+ If you are either currently employed, unemployed or unsatisfied with your job or want extra cash on the side, consider WrenchBoard as a reliable partner to connect you with new opportunities. +

+ + Learn More + +
+
+
-
-
-
-
-
-
- -
-
-
-
- -

- Create free account. -

-

- If you are either currently employed, unemployed or unsatisfied with your job or want extra cash on the side, consider WrenchBoard as a reliable partner to connect you with new opportunities. -

- - Learn More - -
-
-
+
+
+
+ image thumbnail
-
-
-
-
- -
-
-
-
- -

- Browse Marketplace -

-

- WrenchBoard platform connects you with quality service that need articles writing, blog management, photography, product testing research and surveys and more to deliver your project with ease. -

- - Learn More - -
-
-
+ +

+ Browse Marketplace +

+

+ WrenchBoard platform connects you with quality service that need articles writing, blog management, photography, product testing research and surveys and more to deliver your project with ease. +

+ + Learn More + +
+
+ +
+
+
+
+
+ image thumbnail
-
-
-
-
- -
-
-
-
- -

- Complete Task -

-

- Cash in the Pocket with WrenchBoard as a reliable partner to connect you with new opportunities.Track, Organize your Portfolio and Manage your Skills, preferred workgroup and teams efficiently. -

- - Learn More - -
-
-
-
-
-
-
-
- -
-
-
-
- -

- Get Paid -

-

- Get paid Instantly for completed task using WrenchBoard. Achieve your short-term goals or long-term income by Connecting with WrenchBoard. Complete access to your earnings. -

- - Learn More - -
-
-
+ +

+ Complete Task +

+

+ Cash in the Pocket with WrenchBoard as a reliable partner to connect you with new opportunities.Track, Organize your Portfolio and Manage your Skills, preferred workgroup and teams efficiently. +

+ + Learn More + +
+
+ +
+
+
+
+
+ image thumbnail
+ +

+ Get Paid +

+

+ Get paid Instantly for completed task using WrenchBoard. Achieve your short-term goals or long-term income by Connecting with WrenchBoard. Complete access to your earnings. +

+ + Learn More + +
+
+
- +
); }