Main

package.json

@@ -1,16 +1,28 @@
 {
-  "name": "landingpage-react-template",
-  "private": true,
+  "name": "react-floating-whatsapp",
+  "version": "1.0.0",
+  "description": "Simple react component for adding a floating WhatsApp button to your project.",
+  "keywords": [
+    "react-component",
+    "floating-watsapp-button ",
+    "react-typescript",
+    "whatsapp-button",
+    "whatsapp"
+  ],
+  "main": "src/index.tsx",
   "dependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
-    "emailjs-com": "^2.6.4",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-scripts": "^5.0.1",
+    "emailjs-com": "^3.2.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-floating-whatsapp": "^5.0.8",
+    "react-scripts": "5.0.1",
     "smooth-scroll": "^16.1.3"
   },
+  "devDependencies": {
+    "@types/react": "17.0.0",
+    "@types/react-dom": "17.0.0",
+    "typescript": "4.1.3"
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",

public/css/nivo-lightbox/default.css

@@ -13,7 +13,7 @@
     box-sizing: initial !important;
  }
 .nivo-lightbox-theme-default.nivo-lightbox-overlay { 
-	background: #666;
+	background: #b89080;
 	background: rgba(0,0,0,0.6); 
 }
 .nivo-lightbox-theme-default .nivo-lightbox-content.nivo-lightbox-loading { background: url(loading.gif) no-repeat 50% 50%; }

public/css/style.css

@@ -43,13 +43,13 @@ p.intro {
   line-height: 24px;
 }
 a {
-  color: #608dfd;
+  color: #14A690;
   font-weight: 400;
 }
 a:hover,
 a:focus {
   text-decoration: none;
-  color: #608dfd;
+  color: #82cfc4;
 }
 ul,
 ol {
@@ -66,7 +66,7 @@ hr {
   width: 70px;
   text-align: center;
   position: relative;
-  background: #1e7a46;
+  background: #14A690;
   margin-bottom: 20px;
   border: 0;
 }
@@ -90,7 +90,7 @@ hr {
 #menu.navbar-default .navbar-nav > li > a {
   font-family: "Lato", sans-serif;
   text-transform: uppercase;
-  color: #555;
+  color: #FF6F61;
   font-size: 15px;
   font-weight: 400;
   padding: 8px 2px;
@@ -104,7 +104,7 @@ hr {
   bottom: -1px;
   width: 0;
   height: 2px;
-  background: linear-gradient(to right, #6372ff 0%, #5ca9fb 100%);
+  background: linear-gradient(to right, #14A690 0%, #82cfc4 100%);
   content: "";
   transition: width 0.2s;
 }
@@ -125,7 +125,7 @@ hr {
   bottom: -1px !important;
   width: 100% !important;
   height: 2px !important;
-  background: linear-gradient(to right, #6372ff 0%, #5ca9fb 100%) !important;
+  background: linear-gradient(to right, #14A690 0%, #82cfc4 100%) !important;
   content: "" !important;
   transition: width 0.2s !important;
 }
@@ -135,10 +135,10 @@ hr {
 .navbar-default .navbar-toggle:hover,
 .navbar-default .navbar-toggle:focus {
   background-color: #fff;
-  border-color: #608dfd;
+  border-color: #14A690;
 }
 .navbar-default .navbar-toggle:hover > .icon-bar {
-  background-color: #608dfd;
+  background-color: #14A690;
 }
 .section-title {
   margin-bottom: 70px;
@@ -152,7 +152,7 @@ hr {
 .section-title h2::after {
   position: absolute;
   content: "";
-  background: linear-gradient(to right, #5ca9fb 0%, #6372ff 100%);
+  background: linear-gradient(to right, #14A690 0%, #82cfc4 100%);
   height: 4px;
   width: 60px;
   bottom: 0;
@@ -166,8 +166,8 @@ hr {
   font-family: "Raleway", sans-serif;
   text-transform: uppercase;
   color: #fff;
-  background-color: #5ca9fb;
-  background-image: linear-gradient(to right, #5ca9fb 0%, #6372ff 100%);
+  background-color: #14A690;
+  background-image: linear-gradient(to right, #1ef 0%, #82cfc4 100%);
   padding: 14px 34px;
   letter-spacing: 1px;
   margin: 0;
@@ -184,7 +184,7 @@ hr {
 .btn-custom.active {
   color: #fff;
   background-image: none;
-  background-color: #6372ff;
+  background-color: #82cfc4;
 }
 .btn:active,
 .btn.active {
@@ -208,19 +208,20 @@ a:focus,
   display: table;
   width: 100%;
   padding: 0;
-  background: url(../img/intro-bg.jpg) center center no-repeat;
+  background: url(../img/symmetric.png) center center no-repeat;
   background-color: #e5e5e5;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   -o-background-size: cover;
 }
+
 .intro .overlay {
   background: rgba(0, 0, 0, 0.2);
 }
 .intro h1 {
   font-family: "Raleway", sans-serif;
-  color: #fff;
+  color: #fcfcfc;
   font-size: 82px;
   font-weight: 700;
   text-transform: uppercase;
@@ -229,7 +230,7 @@ a:focus,
 }
 .intro h1 span {
   font-weight: 800;
-  color: #5ca9fb;
+  color: #14A690;
 }
 .intro p {
   color: #fff;
@@ -257,7 +258,7 @@ header .intro-text {
   height: 100px;
   padding: 30px 0;
   border-radius: 50%;
-  background: linear-gradient(to right, #6372ff 0%, #5ca9fb 100%);
+  background: linear-gradient(to right, #14A690 0%, #82cfc4 100%);
   box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.05);
 }
 /* About Section */
@@ -276,7 +277,7 @@ header .intro-text {
 #about h2::after {
   position: absolute;
   content: "";
-  background: linear-gradient(to right, #5ca9fb 0%, #6372ff 100%);
+  background: linear-gradient(to right, #14A690 0%, #82cfc4 100%);
   height: 4px;
   width: 60px;
   bottom: 0;
@@ -310,7 +311,7 @@ header .intro-text {
 /* Services Section */
 #services {
   padding: 100px 0;
-  background: linear-gradient(to right, #6372ff 0%, #5ca9fb 100%);
+  background: linear-gradient(to right, #ff6e6144 0%, #e0c4c154 100%);
   color: #fff;
 }
 #services .service-desc {
@@ -334,7 +335,7 @@ header .intro-text {
   width: 120px;
   height: 120px;
   padding: 40px 0;
-  background: linear-gradient(to right, #6372ff 0%, #5ca9fb 100%);
+  background: linear-gradient(to right, #14A690 0%, #82cfc4 100%);
   border-radius: 50%;
   color: #fff;
   box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.05);
@@ -370,8 +371,8 @@ header .intro-text {
   color: #fff;
   background: linear-gradient(
     to right,
-    rgba(99, 114, 255, 0.8) 0%,
-    rgba(92, 169, 251, 0.8) 100%
+   #14A690 0%,
+    #82cfc4 100%
   );
   padding: 30% 0 0;
   height: 100%;
@@ -460,7 +461,7 @@ header .intro-text {
 /* Contact Section */
 #contact {
   padding: 100px 0 60px;
-  background: linear-gradient(to right, #6372ff 0%, #5ca9fb 100%);
+  background: linear-gradient(to right, #14A690 0%, #82cfc4 100%);
   color: rgba(255, 255, 255, 0.75);
 }
 #contact .section-title {
@@ -580,7 +581,7 @@ label {
   transition: all 0.3s;
 }
 #contact .social i.fa:hover {
-  color: #608dfd;
+  color: #14A690;
   background: #fff;
 }
 /* Footer Section*/
@@ -593,14 +594,31 @@ label {
   font-size: 14px;
 }
 #footer a {
-  color: #608dfd;
+  color: #14A690;
 }
 #footer a:hover {
-  border-bottom: 2px solid #608dfd;
+  border-bottom: 2px solid #14A690;
 }
 
 @media (max-width: 768px) {
   #about img {
     margin: 50px 0;
   }
+
+  .intro {
+    background: url(../img/BannerMobile.png) center center no-repeat;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    background-size: cover;
+    -o-background-size: cover;
+  }
+
+  .intro h1 {
+    font-size: 42px;
+  }
+
+  header .intro-text {
+    padding-top: 250px;
+    padding-bottom: 150px;
+  }
 }

public/img/Logo/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

public/index.html

@@ -1,8 +1,8 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
-  <link rel="apple-touch-icon" href="img/apple-touch-icon.png" />
+  <link rel="shortcut icon" href="img/Logo/favicon.ico" type="image/x-icon" />
+  <link rel="apple-touch-icon" href="img/Logo/apple-touch-icon.png" />
   <link
     rel="apple-touch-icon"
     sizes="72x72"
@@ -39,9 +39,9 @@
     href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700,800,900"
     rel="stylesheet"
   />
-  <title>A React Landing Page Template</title>
+  <title>SYMMETRIC</title>
   <meta name="description" content="" />
-  <meta name="author" content="@Issaafalkattan" />
+  <meta name="autor" content="@anderdev" />
 </head>
 
 <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">

src/App.jsx

@@ -6,8 +6,12 @@ import { About } from "./components/about";
 import { Services } from "./components/services";
 import { Gallery } from "./components/gallery";
 import { Testimonials } from "./components/testimonials";
-import { Team } from "./components/Team";
+
 import { Contact } from "./components/contact";
+import { FloatingWhatsApp } from 'react-floating-whatsapp'
+import "./App.css";
+import dummyAvatar from "./components/assets/uifaces-avatar.jpg";
+
 import JsonData from "./data/data.json";
 import SmoothScroll from "smooth-scroll";
 import "./App.css";
@@ -27,13 +31,23 @@ const App = () => {
     <div>
       <Navigation />
       <Header data={landingPageData.Header} />
-      <Features data={landingPageData.Features} />
       <About data={landingPageData.About} />
+      <Features data={landingPageData.Features} />
       <Services data={landingPageData.Services} />
       <Gallery data={landingPageData.Gallery} />
-      <Testimonials data={landingPageData.Testimonials} />
-      <Team data={landingPageData.Team} />
+      <Testimonials data={landingPageData.Testimonials} />  
+      <FloatingWhatsApp
+          phoneNumber = "558494797413"
+          accountName = "Adriana Magalhães"
+          avatar={dummyAvatar}
+          statusMessage= "Em geral, respondemos dentro de 1 hora."
+          chatMessage = "Olá! Sou Adriana Magalhães! 🤝 Como posso ajudar?"
+          placeholder = "Digite sua mensagem..."
+
+
+      />
       <Contact data={landingPageData.Contact} />
+
     </div>
   );
 };