Compare commits

...

1 Commits

Author SHA1 Message Date
victorAnumudu e2463ac6af use case and blog page added 2024-08-02 17:14:41 +01:00
6 changed files with 368 additions and 6 deletions
+23 -2
View File
@@ -1,5 +1,9 @@
import React from 'react'
import FooterHomeOne from '../components/FooterHomeOne';
import HeroNews from '../components/News/HeroNews';
import BackToTop from '../components/BackToTop';
import ServiceNav from '../components/navigation/ServiceNav';
import Blogs from '../components/News/Blogs';
// must be a better way to centralize the style = TEMPORARY USE
import '../assets/css/bootstrap.min.css';
@@ -14,8 +18,25 @@ import '../assets/css/style.css';
function page() {
return (
<>
<div>Bog Here</div>
<FooterHomeOne className={undefined} />
<ServiceNav />
<HeroNews
title="Blogs"
breadcrumb={[
{ link: "/", title: "Home" },
{ link: "/blog", title: "Blogs" },
]}
/>
<section className="blogpage-section">
<div className="container">
<div className="row">
<div className="col-12">
<Blogs pathname='/blog' />
</div>
</div>
</div>
</section>
<FooterHomeOne className='' />
<BackToTop className='' />
</>
)
+55
View File
@@ -0,0 +1,55 @@
import React from 'react'
import frame from '../assets/images/use-case-side-main.png'; //about-frame.png'
import screen from '../assets/images/use-case-side-extra.png'; //about-screen.png'
import Image from 'next/image';
const AboutApp = ({ video, dark }) => {
return (
<>
<section className="row_am about_app_section _">
<div className="container">
<div className="row modern_ui_section">
<div className="col-lg-6">
<div className="about_img" data-aos="fade-in" data-aos-duration="1500">
<div className="frame_img">
<Image width='100%' height='auto' className="w-100 moving_position_animatin" src={frame} alt="image" />
</div>
<div className="screen_img">
<Image width='100%' height='auto' className="w-100 moving_animation" src={screen} alt="image" />
</div>
</div>
</div>
<div className="col-lg-6">
<div className="about_text">
<div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
<h2>Motivate & Organize <br /> <span>Rewards</span></h2>
<p>
With a planned reward, the parent can introduce the family to earning and start financial education early.
</p>
</div>
<ul className="design_block">
<li data-aos="fade-up" data-aos-duration="1500">
<h4>Goals Completed</h4>
<p>Motivate with rewards for goals completed, passing the exam, finishing chores, and learning new skills. </p>
</li>
<li data-aos="fade-up" data-aos-duration="1500">
<h4>Connect Family</h4>
<p>It takes a village to raise a kid and share good news and encouragement from the more prominent family. Connect family to the achievements to boost encouragement. </p>
</li>
<li data-aos="fade-up" data-aos-duration="1500">
<h4>Find any Task </h4>
<p>Make more, connect to the marketplace, and earn from appropriate tasks.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
</>
)
}
export default AboutApp
+202
View File
@@ -0,0 +1,202 @@
"use client"
import React, {useState} from 'react';
import ContactData from '../Services/ContactData';
function Forms() {
const [formDetails, setFormDetails] = useState({
first_name: '',
last_name: '',
email: '',
subject: '',
phone_number: '',
action: 1001,
message: '',
channel: 'WEB',
terms_conditions: false
})
const validForm = formDetails.first_name && formDetails.last_name && formDetails.email && formDetails.phone_number && formDetails.subject && formDetails.message
const handleChange = ({target:{name, value}}) => {
setFormDetails(prev => ({...prev, [name]:value}))
}
const [requestStatus, setRequestStatus] = useState({loading:false, status:false, msg:''})
function handleSubmit(e) {
e.preventDefault()
setRequestStatus({loading:true, status:false, msg:''})
if(!validForm){
setRequestStatus({loading:false, status:false, msg:'please, fill all fields'})
setTimeout(()=>{
setRequestStatus({loading:false, status:false, msg:''})
},3000)
return
}
delete formDetails.terms_conditions
ContactData(formDetails).then(res =>{
if(res?.data?.result != '100'){
setRequestStatus({loading:false, status:false, msg:'failed to send message'})
setTimeout(()=>{
setRequestStatus({loading:false, status:false, msg:''})
},3000)
return
}
setRequestStatus({loading:false, status:true, msg:'message Sent'})
setTimeout(()=>{
setRequestStatus({loading:false, status:false, msg:''})
setFormDetails({
first_name: '',
last_name: '',
email: '',
subject: '',
phone_number: '',
action: 1001,
message: '',
channel: 'WEB',
terms_conditions: false
})
},3000)
}).catch(err => {
setRequestStatus({loading:false, status:false, msg:'failed something went wrong'})
setTimeout(()=>{
setRequestStatus({loading:false, status:false, msg:''})
},3000)
});
}
return (
<>
<section className="contact-section">
<div className="container">
<div className="row">
<div className="col-md-4">
<div className="contact--info-area">
<h3>Get in touch</h3>
<p>Looking for help? Fill the form and start a new discussion.</p>
<div className="single-info">
<h5>Headquaters</h5>
<p>
<i className="fal fa-home"></i>
{process.env.NEXT_PUBLIC_SUPPORT_US_ADDRESS}
</p>
</div>
<div className="single-info">
<h5>Phone</h5>
<p>
<i className="fal fa-phone"></i>
{process.env.NEXT_PUBLIC_SUPPORT_PHONE}
<br />
</p>
</div>
<div className="single-info">
<h5>Support</h5>
<p>
<i className="fal fa-envelope"></i>
{process.env.NEXT_PUBLIC_SUPPORT_EMAIL}
</p>
</div>
<div className="ab-social">
<h5>Follow Us</h5>
<a className="fac" href={process.env.NEXT_PUBLIC_FACEBOOK_LINK}>
<i className="fab fa-facebook-f"></i>
</a>
<a className="twi" href={process.env.NEXT_PUBLIC_TWITTER_LINK}>
{/* <i className="fab fa-twitter"></i> */}
<i className="fab fa-x-twitter" />
</a>
<a className="you" href="#">
<i className="fab fa-youtube"></i>
</a>
<a className="lin" href={process.env.NEXT_PUBLIC_LINKEDIN_LINK}>
<i className="fab fa-linkedin-in"></i>
</a>
</div>
</div>
</div>
<div className="col-md-8">
<div className="contact-form">
<h4>Lets Connect</h4>
<form onSubmit={handleSubmit} className="row">
<div className="col-md-6">
<input type="text" name="first_name" placeholder="First Name" maxLength={15} onChange={handleChange} value={formDetails.first_name} />
</div>
<div className="col-md-6">
<input type="text" name="last_name" placeholder="Last Name" maxLength={15} onChange={handleChange} value={formDetails.last_name} />
</div>
<div className="col-md-6">
<input
type="email"
name="email"
placeholder="Email Address"
maxLength={35}
onChange={handleChange}
value={formDetails.email}
/>
</div>
<div className="col-md-6">
<input
type="number"
name="phone_number"
placeholder="Phone Number"
maxLength={15}
onChange={handleChange}
value={formDetails.phone_number}
/>
</div>
<div className="col-md-12">
<input type="text" name="subject" placeholder="Subject" maxLength={35} value={formDetails.subject} onChange={handleChange} />
</div>
<div className="col-md-12">
<textarea
name="message"
placeholder="How can we help?"
onChange={handleChange}
value={formDetails.message}
></textarea>
</div>
<div className="col-md-6">
<div className="condition-check">
<input id="terms-conditions" name="terms_conditions" type="checkbox" value={formDetails.terms_conditions} onChange={handleChange} />
<label htmlFor="terms-conditions">
I agree to the <a href="#">Terms & Conditions</a>
</label>
</div>
</div>
<div className="col-md-6 text-right">
<input
type="submit"
value={ requestStatus.loading ? 'Sending...' : 'Send Message'}
disabled={requestStatus.loading}
className={`${!validForm ? 'opacity-25' : 'opacity-100'}`}
/>
</div>
{/* <div className="p-2 col-12">
{requestStatus.msg &&
}
</div> */}
<p className={`p-1 w-100 text-center ${requestStatus.status ? 'text-success' : 'text-danger'}`}>{requestStatus.msg}</p>
</form>
</div>
</div>
</div>
</div>
</section>
<div className="bisylms-map">
<iframe
title="map"
src="https://maps.google.com/maps?width=720&amp;height=600&amp;hl=en&amp;coord=33.8573837,-84.4766235&amp;q=Cumberland+Pkwy+SE,+Atlanta,+GA+30339&amp;ie=UTF8&amp;t=p&amp;z=16&amp;iwloc=B&amp;output=embed"
></iframe>
</div>
</>
);
}
export default Forms;
+15 -2
View File
@@ -1,5 +1,9 @@
import React from 'react'
import FooterHomeOne from '../components/FooterHomeOne';
import BackToTop from '../components/BackToTop';
import HeroNews from '../components/News/HeroNews';
import ServiceNav from '../components/navigation/ServiceNav';
import Forms from './Forms'
// must be a better way to centralize the style = TEMPORARY USE
import '../assets/css/bootstrap.min.css';
@@ -14,8 +18,17 @@ import '../assets/css/style.css';
function page() {
return (
<>
<div>Contact us Here</div>
<FooterHomeOne className={undefined} />
<ServiceNav />
<HeroNews
title="Contact us"
breadcrumb={[
{ link: '/', title: 'home' },
{ link: '/contact', title: 'Contact' },
]}
/>
<Forms />
<FooterHomeOne className='' />
<BackToTop className='' />
</>
)
+47
View File
@@ -0,0 +1,47 @@
import React from 'react';
import blogImg1 from '../assets/images/blog/1.jpg';
import UseCaseData from '../Services/UseCaseData';
import Image from 'next/image';
import Link from 'next/link';
function UseCase() {
var UseCaseDataResult = UseCaseData();
return (
<>
<div className="row">
{
UseCaseDataResult.map((i, index )=> {
var blgImg = i.meta_value != null ? "/images/" + i.meta_value : blogImg1;
return (
<div key={index} className="col-12 col-md-6 col-lg-4">
<div className="post-item-1">
{<img src={blgImg} alt={i.title} />}
<div className="b-post-details">
<h3>
<Link href={process.env.NEXT_PUBLIC_DASH_URL_LOGIN}>
{i.title}
</Link>
</h3>
<Link className="read-more" href={process.env.NEXT_PUBLIC_DASH_URL_LOGIN}>
Learn more<i className="fal fa-arrow-right"></i>
</Link>
</div>
</div>
</div>
)
})
}
</div>
</>
);
}
export default UseCase;
+26 -2
View File
@@ -1,5 +1,10 @@
import React from 'react'
import FooterHomeOne from '../components/FooterHomeOne';
import BackToTop from '../components/BackToTop';
import HeroNews from '../components/News/HeroNews';
import ServiceNav from '../components/navigation/ServiceNav';
import AboutApp from '../components/AboutApp'
import UseCase from './UseCase'
// must be a better way to centralize the style = TEMPORARY USE
import '../assets/css/bootstrap.min.css';
@@ -14,8 +19,27 @@ import '../assets/css/style.css';
function page() {
return (
<>
<div>use Case Here</div>
<FooterHomeOne className={undefined} />
<ServiceNav />
<HeroNews
title="Use Cases"
breadcrumb={[
{ link: '/', title: 'Home' },
{ link: '/use-cases', title: 'Use Cases' },
]}
/>
<AboutApp video='' dark='' />
<section className="blogpage-section">
<div className="container">
<div className="row">
{/* <div className="col-lg-12 col-md-7">
<UseCase />
</div> */}
<UseCase />
</div>
</div>
</section>
<FooterHomeOne className='' />
<BackToTop className='' />
</>
)