Contact

12 |

13 | Say Hello. If you want to extend some info, do not hesitate to 14 | fill this form, we love to say ‘Hello Mate’. 15 |

16 |

17 |

18 | 19 |

20 |

21 |

22 |

23 |

24 | 29 |

30 |

31 |

32 |

33 | 38 |

39 |

40 |

41 |

42 | 47 |

48 |

49 |

50 |

51 |

56 |                     </div>
57 |                   </div>
58 |                   <div className="col-12 text-center">
59 |                     <button type="submit" className="btn mt-5">
60 |                       Send Message
61 |                     </button>
62 |                   </div>
63 |                 </form>
64 |               </div>
65 |             </div>
66 |           </div>
67 |         </div>
68 |       </div>
69 |     </>
70 |   );
71 | };
72 | 
73 | export default Contact;
74 |

--------------------------------------------------------------------------------
/src/pages/HomePage.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Banner from "../components/Banner";
 3 | import Body from "../components/Body";
 4 | import "../App.scss";
 5 | 
 6 | const Home = () => {
 7 |   return (
 8 |     <>
 9 |       <Banner />
10 |       <Body />
11 |     </>
12 |   );
13 | };
14 | 
15 | export default Home;
16 |

--------------------------------------------------------------------------------
/src/pages/OurTeam.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react";
 2 | import { connect } from "react-redux";
 3 | import ImageContentHover from "react-image-hover";
 4 | 
 5 | class OurTeam extends Component {
 6 |   render() {
 7 |     return (
 8 |       <>
 9 |         <section className="team section-title mt-5 text-white text-center">
10 |           <div className="container">
11 |             <div className="row align-items-center">
12 |               <div className="col-md-7 mx-auto">
13 |                 <div className="team-title mb-5 mt-5">
14 |                   <h1 className="title-font title-font-size">Our team</h1>
15 |                   <p className="title-text mt-4 mb-4 title-font-2">
16 |                     Great work, great people.
17 |                   </p>
18 |                 </div>
19 |               </div>
20 |             </div>
21 |             <div className="row align-items-center">
22 |               {this.props.persons.map((person) => (
23 |                 // show portfoilo boxes by mapping the array of images
24 |                 <div className="col-lg-4 col-md-6 col-sm-6" key={person.id}>
25 |                   <div className="portfolio-thumb">
26 |                     <ImageContentHover
27 |                       className="center-block"
28 |                       image={person.image}
29 |                       content={{
30 |                         title: [person.name],
31 |                         body: [person.position],
32 |                       }}
33 |                       effect="fadeIn"
34 |                     />
35 |                   </div>
36 |                   <div className="person-info mb-5">
37 |                     <p className="person-name title-font-2"> {person.name} </p>
38 |                     <p className="person-position title-font-2">
39 |                       {" "}
40 |                       {person.position}{" "}
41 |                     </p>
42 |                   </div>
43 |                 </div>
44 |               ))}
45 |             </div>
46 |           </div>
47 |         </section>
48 |       </>
49 |     );
50 |   }
51 | }
52 | 
53 | const mapStateToProps = (state) => {
54 |   return {
55 |     persons: state.team,
56 |   };
57 | };
58 | 
59 | export default connect(mapStateToProps)(OurTeam);
60 |

--------------------------------------------------------------------------------
/src/pages/PortfolioDetail.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { connect } from "react-redux";
 3 | import DetailComponent from "../components/PortfolioDetailComponent";
 4 | import LetsWork from "../components/LetsWorkTogether";
 5 | 
 6 | const PortfolioDetail = (props) => {
 7 |   return (
 8 |     <>
 9 |       <DetailComponent item={props.item} />
10 |       <LetsWork />
11 |     </>
12 |   );
13 | };
14 | 
15 | const mapStateToProps = (state, props) => {
16 |   // display the work detail who match with clicked image by checking id
17 |   const item = state.works.find((item) => item.id === +props.match.params.id);
18 | 
19 |   return { item };
20 | };
21 | 
22 | export default connect(mapStateToProps, null)(PortfolioDetail);
23 |

--------------------------------------------------------------------------------
/src/pages/Services.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import LetsWork from "../components/LetsWorkTogether";
  3 | 
  4 | // service icons
  5 | import icon1 from "../img/services/instaicon.png";
  6 | import mail from "../img/services/mail.png";
  7 | import seo from "../img/services/seo.png";
  8 | import content from "../img/services/content.png";
  9 | import share from "../img/services/share.png";
 10 | import web from "../img/services/web.png";
 11 | 
 12 | const Services = () => {
 13 |   const serviceIcons = [
 14 |     {
 15 |       id: "1",
 16 |       title: "Instagram Engagement Campaign",
 17 |       image: icon1,
 18 |       description:
 19 |         "Our Instagram engagement campaign will have your Instagram account come alive. ",
 20 |     },
 21 |     {
 22 |       id: "2",
 23 |       title: "Email Marketing",
 24 |       image: mail,
 25 |       description:
 26 |         "Stay top of mind with one of the most creative email marketing campaigns.",
 27 |     },
 28 |     {
 29 |       id: "3",
 30 |       title: "Search Engine Optimization",
 31 |       image: seo,
 32 |       description:
 33 |         "Rank in the top of search engines. Local SEO, link building, and more",
 34 |     },
 35 |     {
 36 |       id: "4",
 37 |       title: "Content Marketing Services",
 38 |       image: content,
 39 |       description:
 40 |         "We can be your company voice with quality content. Our writing team will give your brand the voice it needs to stick out.",
 41 |     },
 42 |     {
 43 |       id: "5",
 44 |       title: "Social Media Paid Advertising",
 45 |       image: share,
 46 |       description:
 47 |         "From brand awareness campaigns to lead funnels, we have got the tools to create the right ads for your business. ",
 48 |     },
 49 |     {
 50 |       id: "6",
 51 |       title: "Web Design & Development",
 52 |       image: web,
 53 |       description:
 54 |         "Our web design and development services include everything from graphic design to UX.",
 55 |     },
 56 |   ];
 57 | 
 58 |   return (
 59 |     <>
 60 |       <div className="services section-title mt-5">
 61 |         <div className="container text-white">
 62 |           <div className="row align-items-center">
 63 |             <div className="col-md-7 mx-auto">
 64 |               <div className="services-title mb-5 mt-5">
 65 |                 <h1 className="title-font title-font-size">Services</h1>
 66 |                 <p className="title-text mt-4 mb-4 title-font-2">
 67 |                   Our services are built for your business needs
 68 |                 </p>
 69 |               </div>
 70 |             </div>
 71 |           </div>
 72 |           <div className="row align-items-center">
 73 |             {serviceIcons.map((service) => (
 74 |               <div className="col-12 col-lg-6" key={service.id}>
 75 |                 <div className="service-boxes">
 76 |                   <div className="service-icon">
 77 |                     <img
 78 |                       className="service-icon-img mb-3"
 79 |                       src={service.image}
 80 |                       alt="instagram"
 81 |                     />
 82 |                   </div>
 83 |                   <div className="service-info-title">
 84 |                     <h3 className="service-name title-font-2">
 85 |                       {service.title}
 86 |                     </h3>
 87 |                   </div>
 88 |                   <div className="service-info">
 89 |                     <p className="service-description text-left title-font-2 mt-3">
 90 |                       {service.description}
 91 |                     </p>
 92 |                   </div>
 93 |                 </div>
 94 |               </div>
 95 |             ))}
 96 |           </div>
 97 |         </div>
 98 |       </div>
 99 | 
100 |       <LetsWork />
101 |     </>
102 |   );
103 | };
104 | 
105 | export default Services;
106 |

--------------------------------------------------------------------------------
/src/pages/Works.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Portfolio from "../components/Portfolio";
 3 | 
 4 | const Works = () => {
 5 |   return (
 6 |     <>
 7 |       <Portfolio />
 8 |     </>
 9 |   );
10 | };
11 | 
12 | export default Works;
13 |

--------------------------------------------------------------------------------
/src/reducers/reducer.js:
--------------------------------------------------------------------------------
 1 | import { works } from '../data/works';
 2 | import { team } from '../data/team';
 3 | 
 4 | const initialState = {
 5 |     works: works,
 6 |     team: team
 7 | };
 8 | 
 9 | const Reducer = (state = initialState) => {
10 |     return state;
11 | };
12 | 
13 | export default Reducer;

--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
  1 | // This optional code is used to register a service worker.
  2 | // register() is not called by default.
  3 | 
  4 | // This lets the app load faster on subsequent visits in production, and gives
  5 | // it offline capabilities. However, it also means that developers (and users)
  6 | // will only see deployed updates on subsequent visits to a page, after all the
  7 | // existing tabs open on the page have been closed, since previously cached
  8 | // resources are updated in the background.
  9 | 
 10 | // To learn more about the benefits of this model and instructions on how to
 11 | // opt-in, read https://bit.ly/CRA-PWA
 12 | 
 13 | const isLocalhost = Boolean(
 14 |   window.location.hostname === "localhost" ||
 15 |     // [::1] is the IPv6 localhost address.
 16 |     window.location.hostname === "[::1]" ||
 17 |     // 127.0.0.1/8 is considered localhost for IPv4.
 18 |     window.location.hostname.match(
 19 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 20 |     )
 21 | );
 22 | 
 23 | export function register(config) {
 24 |   if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
 25 |     // The URL constructor is available in all browsers that support SW.
 26 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
 27 |     if (publicUrl.origin !== window.location.origin) {
 28 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 29 |       // from what our page is served on. This might happen if a CDN is used to
 30 |       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 31 |       return;
 32 |     }
 33 | 
 34 |     window.addEventListener("load", () => {
 35 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 36 | 
 37 |       if (isLocalhost) {
 38 |         // This is running on localhost. Let's check if a service worker still exists or not.
 39 |         checkValidServiceWorker(swUrl, config);
 40 | 
 41 |         // Add some additional logging to localhost, pointing developers to the
 42 |         // service worker/PWA documentation.
 43 |         navigator.serviceWorker.ready.then(() => {
 44 |           console.log(
 45 |             "This web app is being served cache-first by a service " +
 46 |               "worker. To learn more, visit https://bit.ly/CRA-PWA"
 47 |           );
 48 |         });
 49 |       } else {
 50 |         // Is not localhost. Just register service worker
 51 |         registerValidSW(swUrl, config);
 52 |       }
 53 |     });
 54 |   }
 55 | }
 56 | 
 57 | function registerValidSW(swUrl, config) {
 58 |   navigator.serviceWorker
 59 |     .register(swUrl)
 60 |     .then((registration) => {
 61 |       registration.onupdatefound = () => {
 62 |         const installingWorker = registration.installing;
 63 |         if (installingWorker == null) {
 64 |           return;
 65 |         }
 66 |         installingWorker.onstatechange = () => {
 67 |           if (installingWorker.state === "installed") {
 68 |             if (navigator.serviceWorker.controller) {
 69 |               // At this point, the updated precached content has been fetched,
 70 |               // but the previous service worker will still serve the older
 71 |               // content until all client tabs are closed.
 72 |               console.log(
 73 |                 "New content is available and will be used when all " +
 74 |                   "tabs for this page are closed. See https://bit.ly/CRA-PWA."
 75 |               );
 76 | 
 77 |               // Execute callback
 78 |               if (config && config.onUpdate) {
 79 |                 config.onUpdate(registration);
 80 |               }
 81 |             } else {
 82 |               // At this point, everything has been precached.
 83 |               // It's the perfect time to display a
 84 |               // "Content is cached for offline use." message.
 85 |               console.log("Content is cached for offline use.");
 86 | 
 87 |               // Execute callback
 88 |               if (config && config.onSuccess) {
 89 |                 config.onSuccess(registration);
 90 |               }
 91 |             }
 92 |           }
 93 |         };
 94 |       };
 95 |     })
 96 |     .catch((error) => {
 97 |       console.error("Error during service worker registration:", error);
 98 |     });
 99 | }
100 | 
101 | function checkValidServiceWorker(swUrl, config) {
102 |   // Check if the service worker can be found. If it can't reload the page.
103 |   fetch(swUrl)
104 |     .then((response) => {
105 |       // Ensure service worker exists, and that we really are getting a JS file.
106 |       const contentType = response.headers.get("content-type");
107 |       if (
108 |         response.status === 404 ||
109 |         (contentType != null && contentType.indexOf("javascript") === -1)
110 |       ) {
111 |         // No service worker found. Probably a different app. Reload the page.
112 |         navigator.serviceWorker.ready.then((registration) => {
113 |           registration.unregister().then(() => {
114 |             window.location.reload();
115 |           });
116 |         });
117 |       } else {
118 |         // Service worker found. Proceed as normal.
119 |         registerValidSW(swUrl, config);
120 |       }
121 |     })
122 |     .catch(() => {
123 |       console.log(
124 |         "No internet connection found. App is running in offline mode."
125 |       );
126 |     });
127 | }
128 | 
129 | export function unregister() {
130 |   if ("serviceWorker" in navigator) {
131 |     navigator.serviceWorker.ready.then((registration) => {
132 |       registration.unregister();
133 |     });
134 |   }
135 | }
136 |

--------------------------------------------------------------------------------

13 | We help your business 14 | grow 15 |

15 | We specialize in telling brand stories 16 |
17 | along the entire customer journey. 18 |

Let's work together

Let's work together

Take a look at our portfolio

{title}

{title}

Info

Contact

13 | We help your business 14 | grow 15 |

15 | We specialize in telling brand stories 16 | 17 | along the entire customer journey. 18 |

Let's work together

Let's work together

Take a look at our portfolio

{title}

{title}

Info

Contact

15 | We specialize in telling brand stories 16 |
17 | along the entire customer journey. 18 |