update

src/App.js

@@ -12,6 +12,7 @@ import BlogDesign5 from "./components/Blogs/design5/BlogDesign5";
 import BlogDesign6 from "./components/Blogs/design6/BlogDesign6";
 import HeaderDesign1 from "./components/Header/desgin1/HeaderDesign1";
 import VodProductDesign from "./components/vodProductDesign/VodProductDesign";
+import ContactInfoSection from "./components/contactInfoSection/ContactInfoSection";
 
 function App() {
   return (
@@ -22,13 +23,14 @@ function App() {
       {/* <ButtonDesign /> */}
       {/* <ProductTags /> */}
       {/* <CounterDesign /> */}
-      <BlogDesign1 />
+      {/* <BlogDesign1 /> */}
       {/* <BlogDesign2 /> */}
       {/* <BlogDesign3 /> */}
       {/* <BlogDesign4 /> */}
       {/* <BlogDesign5 /> */}
-      <BlogDesign6 />
+      {/* <BlogDesign6 /> */}
       {/* <HeaderDesign1 /> */}
+      <ContactInfoSection />
     </div>
   );
 }

src/assets/icons/light-blue-line.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="38.827" height="36.827" viewBox="0 0 38.827 36.827">
+  <line id="Line_336" data-name="Line 336" x1="36" y2="34" transform="translate(1.414 1.414)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-width="2" opacity="0.36"/>
+</svg>

src/assets/icons/light-green-line.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="78.814" height="64.814" viewBox="0 0 78.814 64.814">
+  <line id="Line_334" data-name="Line 334" x1="76" y2="62" transform="translate(1.407 1.407)" fill="none" stroke="#0dfa4c" stroke-linecap="round" stroke-width="2" opacity="0.36"/>
+</svg>

src/components/contactInfoSection/ContactInfoSection.js

@@ -0,0 +1,40 @@
+import React from "react";
+
+import customerSupport from "../../assets/icons/customer-support.png";
+import lightGreenLine from "../../assets/icons/light-green-line.svg";
+import lightBlueLine from "../../assets/icons/light-blue-line.svg";
+
+const ContactInfoSection = () => {
+  return (
+    <section className="bg-midGrayBgColor relative flex flex-col sm:flex-row items-center justify-center p-4">
+      {/* line */}
+      <img
+        src={lightBlueLine}
+        alt=""
+        className="hidden sm:block absolute right-72"
+      />
+      {/* middle content */}
+      <img src={customerSupport} alt="" className="w-20 cursor-pointer" />
+      <p className="mr-0 sm:mr-10 mt-5 sm:mt-0 text-sm text-darkCrimsonTextColor leading-6">
+        <span className="text-lightBlueTextColor2">7 </span>
+        روز هفته
+        <span className="text-lightBlueTextColor2"> 24 </span>
+        ساعته
+        <br />
+        منتظر شنیدن صدای گرمتان هستیم
+      </p>
+      <div className="mr-0 sm:mr-10 mt-5 sm:mt-0">
+        <p className="text-sm text-darkCrimsonTextColor">021654412</p>
+        <p className="text-sm text-darkCrimsonTextColor">info@danovin.ir</p>
+      </div>
+      {/* line */}
+      <img
+        src={lightGreenLine}
+        alt=""
+        className="hidden sm:block absolute left-72"
+      />
+    </section>
+  );
+};
+
+export default ContactInfoSection;

tailwind.config.js

@@ -24,6 +24,7 @@ module.exports = {
       lightGreenTextColor: "#5DCE06",
       lightPurpleTextColor: "#A680FF",
       lightBlueTextColor: "#06BACE",
+      lightBlueTextColor2: "#196EC0",
       darkBlueTextColor: "#0615CE",
       darkBlueTextColor2: "#235A90",
       darkRedTextColor: "#CE3B06",