diff --git a/src/components/BlogPage/Blog/Blog.jsx b/src/components/Blog/Blog.jsx similarity index 95% rename from src/components/BlogPage/Blog/Blog.jsx rename to src/components/Blog/Blog.jsx index ae7dcb9..19b3ad8 100644 --- a/src/components/BlogPage/Blog/Blog.jsx +++ b/src/components/Blog/Blog.jsx @@ -1,6 +1,6 @@ import { Link } from 'react-router-dom'; -import Label from '../../../components/Label/Label'; -import calendar from '../../../img/HomePage/Blog/calendar.svg'; +import Label from '../../components/Label/Label'; +import calendar from '../../img/HomePage/Blog/calendar.svg'; export default function Blog({ events }) { const elements = events.map( diff --git a/src/components/BlogPage/Blog/Blog.styled.jsx b/src/components/Blog/Blog.styled.jsx similarity index 100% rename from src/components/BlogPage/Blog/Blog.styled.jsx rename to src/components/Blog/Blog.styled.jsx diff --git a/src/components/BlogPage/index.jsx b/src/components/BlogPage/index.jsx index 6336676..a724866 100644 --- a/src/components/BlogPage/index.jsx +++ b/src/components/BlogPage/index.jsx @@ -1,4 +1,4 @@ import Banner from './Banner/Banner'; -import Blog from './Blog/Blog'; +import Blog from '../Blog/Blog'; export { Banner, Blog }; diff --git a/src/components/HomePage/Blog/Blog.jsx b/src/components/HomePage/Blog/Blog.jsx deleted file mode 100644 index 5c0027b..0000000 --- a/src/components/HomePage/Blog/Blog.jsx +++ /dev/null @@ -1,107 +0,0 @@ -import { Link } from 'react-router-dom'; - -import Label from '../../../components/Label/Label'; -import LinkButton from '../../LinkButton/LinkButton'; - -import bg1 from '../../../img/HomePage/Blog/bg1.jpg'; -import bg2 from '../../../img/HomePage/Blog/bg2.jpg'; -import bg3 from '../../../img/HomePage/Blog/bg3.jpg'; - -import calendar from '../../../img/HomePage/Blog/calendar.svg'; - -const events = [ - { - title: 'Inland freight a worthy solution for your business', - img: bg1, - date: { day: '08', month: 'September' }, - text: 'We are dedicated in creating added value for our customers by implementing modern technology in our work. ', - textList: ['Urgent transport solutions', 'Reliable & experienced staffs'], - href: '/blog/details', - }, - { - title: 'How technology can help redraw the supply chain map', - img: bg2, - date: { day: '12', month: 'September' }, - text: 'We are dedicated in creating added value for our customers by implementing modern technology in our work. ', - textList: ['Urgent transport solutions', 'Reliable & experienced staffs'], - href: '/blog/details', - }, - - { - title: 'Five things you should have ready for your broker', - img: bg3, - date: { day: '25', month: 'September' }, - text: 'We are dedicated in creating added value for our customers by implementing modern technology in our work. ', - textList: ['Urgent transport solutions', 'Reliable & experienced staffs'], - href: '/blog/details', - }, -]; - -export default function Blog() { - const elements = events.map( - ({ title, img, date: { day, month }, text, textList, href }) => ( -
  • -
    - - Read More - -
    -
    -
    - calendar -
    -

    - {day} -

    -

    - {month} -

    -
    -
    - - {title} - -

    - {text} -

    - -
    -
    • - ) - ); - - return ( -
    -
    -
    -
    - ); -} diff --git a/src/components/HomePage/Choos/Choos.jsx b/src/components/HomePage/Choos/Choos.jsx index 48b6107..53d04f6 100644 --- a/src/components/HomePage/Choos/Choos.jsx +++ b/src/components/HomePage/Choos/Choos.jsx @@ -1,91 +1,63 @@ -import { - StyledContainer, - StyledImageSide, - StyledImageContainer, - StyledLabel, - StyledLabelIcon, - StyledLabelText, - StyledContentSide, - StyledContentContainer, - StyledContentTitile, - StyledContentText, - StyledIconsContainer, - StyledIconsColumn, - StyledIconsItem, - StyledIcon, - StyledIconText, -} from './Choos.styled'; import Label from '../../../components/Label/Label'; -// import icons -import box from '../../../img/icons/box_round.png'; -import world from '../../../img/icons/world_round.png'; -import clock from '../../../img/icons/clock_round.png'; -import ship from '../../../img/icons/ship_round.png'; -import handfree from '../../../img/icons/handfree_round.png'; -import money from '../../../img/icons/money_round.png'; +import bg from '../../../img/HomePage/Choose/banner.jpg'; +import icon from '../../../img/HomePage/Choose/icon.svg'; + +export default function Choos({ chooses }) { + const elements = chooses.map(({ id, label, img }) => ( +
  • +
    +

    + {label} +

    +
    • + )); -export default function Choos() { return ( - - - - - - +
    +
    +
    +
    +
    +

    Moving your products across borders - - - - - - +

    +
    +
    +
    +
    + <>
    +
    ); } diff --git a/src/components/HomePage/Choos/Choos.styled.jsx b/src/components/HomePage/Choos/Choos.styled.jsx deleted file mode 100644 index 06b285e..0000000 --- a/src/components/HomePage/Choos/Choos.styled.jsx +++ /dev/null @@ -1,127 +0,0 @@ -import styled from 'styled-components'; -import bg from '../../../img/HomePage/Choose/banner.jpg'; -import icon from '../../../img/HomePage/Choose/icon.svg'; - -export const StyledContainer = styled.div` - width: 100%; - height: 897px; - background-color: #f4f4f4; - display: flex; - justify-content: center; -`; - -export const StyledImageSide = styled.div` - height: 100%; - width: 50%; - background-color: #091242; -`; - -export const StyledImageContainer = styled.div` - width: 929px; - height: 610px; - margin-top: 142px; - margin-left: 140px; - background-image: url(${bg}); - position: relative; -`; - -export const StyledLabel = styled.div` - width: 417px; - position: absolute; - left: 220px; - bottom: 0; - display: flex; - align-items: center; - gap: 21px; - padding: 30px 33px 30px 33px; - background: linear-gradient( - 94deg, - #ffb629 -1.21%, - #ffda56 58.66%, - #ffd7a6 116.84% - ); -`; - -export const StyledLabelIcon = styled.div` - width: 65px; - height: 80px; - background-image: url(${icon}); -`; - -export const StyledLabelText = styled.p` - color: #1c1f35; - font-family: Rubik; - font-size: 25px; - font-style: normal; - font-weight: 400; - line-height: normal; - width: 259px; -`; - -export const StyledContentSide = styled.div` - height: 100%; - width: 50%; - padding-top: 200px; - padding-left: 192px; -`; - -export const StyledContentContainer = styled.div` - display: flex; - flex-direction: column; - width: 553px; -`; - -export const StyledContentTitile = styled.h3` - width: 438px; - margin-top: 12px; - margin-bottom: 18px; - color: #1c1f35; - font-family: Rubik; - font-size: 35px; - font-style: normal; - font-weight: 600; - line-height: normal; -`; - -export const StyledContentText = styled.p` - width: 486px; - margin-bottom: 61px; - color: #666c89; - font-family: Krub; - font-size: 16px; - font-style: normal; - font-weight: 500; - line-height: 151.523%; -`; - -export const StyledIconsContainer = styled.div` - display: flex; - gap: 72px; -`; - -export const StyledIconsColumn = styled.div` - display: flex; - flex-direction: column; - gap: 20px; -`; - -export const StyledIconsItem = styled.div` - display: flex; - align-items: center; - gap: 12px; -`; - -export const StyledIcon = styled.div` - width: 63px; - height: 63px; - background-image: url(${props => props.bg}); -`; - -export const StyledIconText = styled.p` - color: #1c1f35; - font-family: Rubik; - font-size: 20px; - font-style: normal; - font-weight: 400; - line-height: normal; -`; diff --git a/src/components/HomePage/index.jsx b/src/components/HomePage/index.jsx index 3b53c12..eb574e8 100644 --- a/src/components/HomePage/index.jsx +++ b/src/components/HomePage/index.jsx @@ -6,7 +6,7 @@ import Testimonial from '../Testimonial/Testimonial'; import Choos from './Choos/Choos'; import Team from '../Team/Team'; import Contact from './Contact/Contact'; -import Blog from './Blog/Blog'; +import Blog from '../Blog/Blog'; import PreFooterBanner from './PreFooterBanner/PreFooterBanner'; export { diff --git a/src/data/blogData.jsx b/src/data/blogData.jsx index 134f8e5..9009b16 100644 --- a/src/data/blogData.jsx +++ b/src/data/blogData.jsx @@ -4,7 +4,35 @@ import bg3 from '../img/HomePage/Blog/bg3.jpg'; import bg4 from '../img/BlogPage/img4.jpg'; import bg5 from '../img/BlogPage/img5.jpg'; -const events = [ +const homePageEvents = [ + { + title: 'Inland freight a worthy solution for your business', + img: bg1, + date: { day: '08', month: 'March' }, + text: 'We are dedicated in creating added value for our customers by implementing modern technology in our work. ', + textList: ['Urgent transport solutions', 'Reliable & experienced staffs'], + href: '/blog/details', + }, + { + title: 'How technology can help redraw the supply chain map', + img: bg2, + date: { day: '12', month: 'March' }, + text: 'We are dedicated in creating added value for our customers by implementing modern technology in our work. ', + textList: ['Urgent transport solutions', 'Reliable & experienced staffs'], + href: '/blog/details', + }, + + { + title: 'Five things you should have ready for your broker', + img: bg3, + date: { day: '25', month: 'March' }, + text: 'We are dedicated in creating added value for our customers by implementing modern technology in our work. ', + textList: ['Urgent transport solutions', 'Reliable & experienced staffs'], + href: '/blog/details', + }, +]; + +const blogPageEvents = [ { title: 'Inland freight a worthy solution for your business', img: bg1, @@ -50,4 +78,4 @@ const events = [ }, ]; -export default events; +export { blogPageEvents, homePageEvents }; diff --git a/src/data/choosData.jsx b/src/data/choosData.jsx new file mode 100644 index 0000000..2392f36 --- /dev/null +++ b/src/data/choosData.jsx @@ -0,0 +1,17 @@ +import box from '../img/icons/box_round.png'; +import world from '../img/icons/world_round.png'; +import clock from '../img/icons/clock_round.png'; +import ship from '../img/icons/ship_round.png'; +import handfree from '../img/icons/handfree_round.png'; +import money from '../img/icons/money_round.png'; + +const homePageChooses = [ + { id: 1, label: 'Safe Package', img: box }, + { id: 2, label: 'Ship Everyware', img: ship }, + { id: 3, label: 'Global Tracking', img: world }, + { id: 4, label: '24/7 Support', img: handfree }, + { id: 5, label: 'In Time Delivery', img: clock }, + { id: 6, label: 'Transparant Pricing', img: money }, +]; + +export default homePageChooses; diff --git a/src/pages/BlogPage/BlogPage.jsx b/src/pages/BlogPage/BlogPage.jsx index 0c14a88..5684022 100644 --- a/src/pages/BlogPage/BlogPage.jsx +++ b/src/pages/BlogPage/BlogPage.jsx @@ -1,11 +1,11 @@ import { Banner, Blog } from '../../components/BlogPage'; -import events from '../../data/blogData'; +import { blogPageEvents } from '../../data/blogData'; export default function BlogPage() { return ( <> - + ); } diff --git a/src/pages/HomePage/HomePage.jsx b/src/pages/HomePage/HomePage.jsx index 1f4d190..75e56cc 100644 --- a/src/pages/HomePage/HomePage.jsx +++ b/src/pages/HomePage/HomePage.jsx @@ -14,9 +14,11 @@ import { //data import { cards } from '../../data/teamData'; +import { homePageEvents } from '../../data/blogData'; import users from '../../data/testimonialData'; import projectCards from '../../data/projectData'; import services from '../../data/servicesData'; +import homePageChooses from '../../data/choosData'; export default function HomePage() { return ( @@ -26,10 +28,10 @@ export default function HomePage() { - + - + );