From e695720809882df008309521de00459fa1c1bd85 Mon Sep 17 00:00:00 2001 From: "DESKTOP-OHCS5QE\\Works ChiefSoft" Date: Tue, 29 Aug 2023 08:13:32 -0400 Subject: [PATCH] About-text component --- src/assets/css/main.css | 17 ++++ src/components/AboutText/AboutText.js | 130 ++++++++++++++++++++++++ src/components/AboutUs/ServicesAbout.js | 110 +------------------- src/components/AboutUs/index.js | 2 + 4 files changed, 151 insertions(+), 108 deletions(-) create mode 100644 src/components/AboutText/AboutText.js diff --git a/src/assets/css/main.css b/src/assets/css/main.css index aadad1b..3e208fa 100755 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -113,6 +113,23 @@ p { color: #505056; margin: 0px; } +.designed-title { + font-size: 24px; + font-weight: 700; + margin-bottom: 10px; + margin-top: 30px; + padding-bottom: 7px; + text-align: center; + text-shadow: 3px 4px 10px rgba(0,0,0,.3); +} + +.designed-description { + font-size: 20px; + line-height: 28px; + font-weight: 400; + color: #505056; + text-align: center; +} .bg_cover { background-position: center center; diff --git a/src/components/AboutText/AboutText.js b/src/components/AboutText/AboutText.js new file mode 100644 index 0000000..6689918 --- /dev/null +++ b/src/components/AboutText/AboutText.js @@ -0,0 +1,130 @@ + import React from 'react'; + + import Design from '../../assets/images/design.png' + import Approach from '../../assets/images/approach.png' + import Interactive from '../../assets/images/interactive.png' + import Mobility from '../../assets/images/mobility-approach.png' + import Privacy from '../../assets/images/privacy.png' + import Seamless from '../../assets/images/seamless.png' + + + function AboutTextComponent () { + + return ( + <> +
+
+
+
+
+ Design Icon +
+

Carefully designed

+

+ Wrenchboard focuses on your needs and desires. + Your success is our priority, driving us to listen and adapt to your feedback. + We're dedicated to enhancing our products for your convenience. It's all about you, not us.

+
+
+ + + +
+
+
+ + Approach Icon +
+

Modern Approach

+

+ Our commitment is delivering a top-tier solution for you. + Our aim: an intuitive, user-friendly product that continually evolves. + By focusing on you, we'll surpass expectations and make a real impact.

+
+
+ +
+
+
+ + Interactive Icon +
+

User Interactive

+

+ WrenchBoard keeps you engaged with diverse features. + Email alerts guarantee you're always in the loop. + Get updates your way: email, text, or push notifications . + We've got you covered.

+
+
+ +
+
+
+ Mobility Icon +
+

Mobility Approach

+

+ WrenchBoard's tools unite devices for seamless organization and productivity anywhere. + Manage tasks, track responses, and stay connected effortlessly. + Experience a true mobile lifestyle with WrenchBoard!

+
+
+ +
+
+
+ + Seamless Icon +
+

Seamless Sync

+

+ WrenchBoard simplifies cross-platform activity management. + Our features sync seamlessly on desktop, tablet, and phone, ensuring organization and productivity. + No more app hopping . WrenchBoard streamlines the process.

+
+
+ +
+
+
+ + Privacy Icon +
+

Privacy

+

+ Your privacy matters. WrenchBoard works without data sharing, ensuring your information stays secure. + Manage tasks across platforms confidently, enjoying a unified experience that respects your privacy.

+
+
+
+
+ + ); + }; + + export default AboutTextComponent; diff --git a/src/components/AboutUs/ServicesAbout.js b/src/components/AboutUs/ServicesAbout.js index 04a967e..1a78dd6 100644 --- a/src/components/AboutUs/ServicesAbout.js +++ b/src/components/AboutUs/ServicesAbout.js @@ -1,14 +1,5 @@ import React from 'react'; - -import Design from '../../assets/images/design.png' -import Approach from '../../assets/images/approach.png' -import Interactive from '../../assets/images/interactive.png' -import Mobility from '../../assets/images/mobility-approach.png' -import Privacy from '../../assets/images/privacy.png' -import Seamless from '../../assets/images/seamless.png' - - - +import AboutTextComponent from '../AboutText/AboutText'; function ServicesAbout() { @@ -24,104 +15,7 @@ function ServicesAbout() { -
-
-
-
- {/*
- -
*/} - -
-

Carefully designed

-

Wrenchboard focuses on your needs and desires. Your success is our priority, driving us to listen and adapt to your feedback. We're dedicated to enhancing our products for your convenience. It's all about you, not us.

-
-
-
-
-
- {/*
- -
*/} - -
-

Modern Approach

-

Our commitment is delivering a top-tier solution for you. Our aim: an intuitive, user-friendly product that continually evolves. By focusing on you, we'll surpass expectations and make a real impact.

-
-
-
-
-
- {/*
- -
*/} - -
-

User Interactive

-

WrenchBoard keeps you engaged with diverse features. Email alerts guarantee you're always in the loop. Get updates your way: email, text, or push notifications . We've got you covered.

-
-
-
-
-
- {/*
- -
*/} - -
-

Mobility Approach

-

WrenchBoard's tools unite devices for seamless organization and productivity anywhere. Manage tasks, track responses, and stay connected effortlessly. Experience a true mobile lifestyle with WrenchBoard!

-
-
-
-
-
- {/*
- -
*/} - -
-

Seamless Sync

-

WrenchBoard simplifies cross-platform activity management. Our features sync seamlessly on desktop, tablet, and phone, ensuring organization and productivity. No more app hopping . WrenchBoard streamlines the process.

-
-
-
-
-
- {/*
- -
*/} - -
-

Privacy

-

Your privacy matters. WrenchBoard works without data sharing, ensuring your information stays secure. Manage tasks across platforms confidently, enjoying a unified experience that respects your privacy.

-
-
-
+ diff --git a/src/components/AboutUs/index.js b/src/components/AboutUs/index.js index 5da6a4a..44da08d 100644 --- a/src/components/AboutUs/index.js +++ b/src/components/AboutUs/index.js @@ -10,6 +10,7 @@ import HeroAbout from './HeroAbout'; import ServicesAbout from './ServicesAbout'; import TeamAbout from './TeamAbout'; import StickyHeaderNav from '../StickyHeader/StickyHeaderNav'; +import AboutTextComponent from '../AboutText/AboutText'; function AboutUs() { const [drawer, drawerAction] = useToggle(false); @@ -23,6 +24,7 @@ function AboutUs() { {/* */} {/* */} +