about text

This commit is contained in:
CHIEFSOFT\ameye
2024-07-30 08:22:08 -04:00
parent 496977981a
commit 1cab67cafb
3 changed files with 169 additions and 2 deletions
+157
View File
@@ -0,0 +1,157 @@
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 Security from "../assets/images/security.png";
function ServiceItem(props) {
return (
<div
className={`mt-0 p-4 appie-single-service-2 appie-single-service-about item-${props.index} wow animated fadeInUp`}
data-wow-duration="2000ms"
data-wow-delay={`${props.delay}ms`}
style={{ cursor: "default" }}
>
<div className="icon d-flex justify-content-center align-items-center">
<img src={props.image} alt="icon" />
</div>
<h4 className="title">{props.title}</h4>
<p>{props.description}</p>
</div>
);
}
function AboutTextComponent() {
return (
<>
<div className="container">
<div className="row">
<div className="row">
{servicesContent?.map(({ id, ...item }) => (
<div className="col-lg-3 col-md-6">
<ServiceItem index={id} {...item} />
</div>
))}
</div>
</div>
</div>
</>
);
}
export default AboutTextComponent;
const servicesContent = [
{
id: 1,
image: Design,
delay: 200,
title: "Engagement",
description:
"We encourage healthy online activities for individuals, groups, or households.",
},
{
id: 2,
image: Mobility,
delay: 400,
title: "Opportunity",
description:
"We prioritize developing a strong opportunity mindset for our users and teamwork.",
},
{
id: 3,
image: Interactive,
delay: 600,
title: "Modern",
description:
"We endeavor to improve our features to catch up to how we can best serve our users.",
},
{
id: 4,
image: Security,
delay: 600,
title: "Security & Safety",
description:
"Healthy communication and privacy are the foundation of all features now and in the future.",
},
// {
// id: 4,
// image: Mobility,
// delay: 200,
// title: "Social Media Management",
// description:
// "Teach youngsters the art of handling social media profiles for small enterprises, cultivating essential marketing and communication abilities while also generating income. Manage tasks, track responses, and stay connected effortlessly. Experience a true mobile lifestyle with WrenchBoard!",
// },
// {
// id: 5,
// image: Seamless,
// delay: 400,
// title: "Inspiring Future Leaders",
// description:
// "By offering a platform for kids to earn, learn, and contribute, WrenchBoard is nurturing the next generation of entrepreneurs, creators, and leaders. We're sowing the seeds of ambition and self-confidence, preparing them for a brighter future.",
// },
// {
// id: 6,
// image: Privacy,
// delay: 600,
// title: "Privacy",
// description:
// "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.",
// },
];
const servicesContentBAK = [
{
id: 1,
image: Design,
delay: 200,
title: "Unlocking Potential",
description:
"At WrenchBoard, we believe age should never limit one's ability to pursue their passions and generate income. Our platform offers a variety of categories for kids to explore and turn into profitable endeavors, fostering financial awareness and unlocking their potential for a brighter future.",
},
{
id: 2,
image: Approach,
delay: 400,
title: "Growing Money Mindset",
description:
"We prioritize developing a strong money mindset in Kids. WrenchBoard offers a safe and supportive space for kids to explore their passions, learn new skills, and earn money. By instilling the value of hard work, saving, and investing, we aim to empower the next generation to make informed financial decisions and reach their goals.",
},
{
id: 3,
image: Interactive,
delay: 600,
title: "Realtime Notifications",
description:
"Stay up-to-date with WrenchBoard! Our platform keeps you in the loop with convenient alerts and notifications. Choose your preferred method of receiving updates - email, text, or push notifications - and never miss a beat.",
},
{
id: 4,
image: Mobility,
delay: 200,
title: "Social Media Management",
description:
"Teach youngsters the art of handling social media profiles for small enterprises, cultivating essential marketing and communication abilities while also generating income. Manage tasks, track responses, and stay connected effortlessly. Experience a true mobile lifestyle with WrenchBoard!",
},
{
id: 5,
image: Seamless,
delay: 400,
title: "Inspiring Future Leaders",
description:
"By offering a platform for kids to earn, learn, and contribute, WrenchBoard is nurturing the next generation of entrepreneurs, creators, and leaders. We're sowing the seeds of ambition and self-confidence, preparing them for a brighter future.",
},
{
id: 6,
image: Privacy,
delay: 600,
title: "Privacy",
description:
"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.",
},
];
+1 -1
View File
@@ -1,5 +1,5 @@
import React from 'react';
import AboutTextComponent from '../AboutText/AboutText';
import AboutTextComponent from './AboutText';
function ServicesAbout() {
return (
+11 -1
View File
@@ -1,6 +1,11 @@
"use client"
import React from 'react'
import useToggle from '../Hooks/useToggle';
import FooterHomeOne from '../components/FooterHomeOne';
import HeroAbout from './HeroAbout';
import ServicesAbout from './ServicesAbout';
import AboutTextComponent from './AboutText';
import HeaderAbout from './HeaderAbout';
// must be a better way to centralize the style = TEMPORARY USE
import '../assets/css/bootstrap.min.css';
@@ -13,11 +18,16 @@ import '../assets/css/style.css';
function page() {
const [drawer, drawerAction] = useToggle(false);
return (
<>
<div>Abouut us Here</div>
{/* <HeaderAbout drawer={drawer} action={drawerAction.toggle} /> */}
<HeroAbout />
<FooterHomeOne className={undefined} />
<ServicesAbout />
<AboutTextComponent/>
<FooterHomeOne className="appie-footer-about-area" />
</>
)