ui change

next.config.mjs

@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: "export",
-  // images: { unoptimized: true },
+  images: { unoptimized: true },
 };
 
 export default nextConfig;

src/app/globals.css

@@ -49,4 +49,7 @@ body {
   .features-card {
     background: radial-gradient(600px 400px at 70% 58%,#11d9c526,transparent 100%);
 ;
-}
+}
+.bg-gradient1 {
+  background: linear-gradient(360deg, rgba(17, 217, 197, 0.3) 0%, rgba(9, 84, 91, 0.486) 52%, rgba(39, 188, 252, 0.3) 100%);
+}

src/app/page.jsx

@@ -7,6 +7,7 @@ import Mission from "@/components/Mission";
 import Newsletter from "@/components/Newsletter";
 import Reviews from "@/components/Reviews";
 import Socials from "@/components/Socials";
+import SubscribePage from "@/components/Subcribe";
 import WinSection from "@/components/WinSection";
 import { cardDetails } from "@/utils/data";
 import Image from "next/image";
@@ -67,7 +68,8 @@ export default function Home() {
           />
         </section>
         <DownloadNow />
-        <Socials />
+        {/* <Socials /> */}
+        <SubscribePage/>
         <Newsletter />
       </main>
     </>

src/components/Card.jsx

@@ -4,13 +4,12 @@ import Image from "next/image";
 
 const Card = ({ item }) => {
   return (
-    <div
-      className={` lg:w-[49.5%] my-[.25%] h-[486.7px] relative  border-white `}
-    >
-      <div className='flex absolute w-full h-full flex-col  justify-center items-start pl-[12%] z-50'>
-        <h3 className='text-white text-3xl lg:text-[62px] font-semibold'>
-          {item.title}
-        </h3>
+    <div className={`lg:w-[49.5%] my-[.25%] h-[486.7px] relative border-white`}>
+      <div className='flex absolute w-full h-full flex-col justify-center items-start pl-[12%] z-50'>
+        <h3
+          className='text-white text-3xl lg:text-[62px] font-semibold  '
+          dangerouslySetInnerHTML={{ __html: item.title }}
+        ></h3>
         <p className='text-white w-[90%] font-light mt-[35px] mb-[25px] text-sm lg:text-lg'>
           {item.desc}
         </p>

src/components/Footer.jsx

@@ -13,64 +13,110 @@ const Footer = () => {
   return (
     <div
       style={roboto.style}
-      className=' h-[507px] mt-[3%]  w-full pt-[102px] rounded-t-[12px]  sm:rounded-t-[50px]  bg-gradient-to-t from-primary/40 to-cta/40 '
+      className=" h-[507px] mt-[3%]  w-full pt-[102px] rounded-t-[12px]  sm:rounded-t-[50px]  bg-gradient-to-t from-primary/40 to-cta/40 "
     >
-      <footer className='w-[85%] relative mx-auto border-b border-cta border-opacity-30 pb-[30px]  justify-between flex-col gap-8 sm:gap-0  flex lg:flex-row'>
-        <div className='flex w-max relative bottom-3 flex-col'>
-          <Link href={"/"} className='flex items-center'>
+      <footer className="w-[85%] relative mx-auto border-b border-cta border-opacity-30 pb-[30px]  justify-between flex-col gap-8 sm:gap-0  flex lg:flex-row">
+        <div className="flex w-max relative bottom-3 flex-col ">
+          <Link href={"/"} className="flex items-center">
             <Image
               src={"/images/logo.svg"}
               width={56}
               height={56}
-              alt='Logo '
+              alt="Logo "
             />
             <Image
               src={"/images/netsepio.svg"}
               width={104.27}
               height={32}
-              alt='Netsepio'
+              alt="Netsepio"
             />
           </Link>
-          <p className='text-[20px] mt-[22px] sm:mt-[55px] text-white w-[280px] font-light'>
+          <p className="text-[20px] mt-[22px] sm:mt-[55px] text-white w-[280px] font-light">
             AI DePIN CyberSecurity which Protects Online Presence
           </p>
         </div>
 
         {footerContents.map((item, index) => {
           return <FooterItem key={index.toString()} item={item} />;
         })}
-        <div className='flex ml-4 flex-col'>
-          <h4 className=' text-white text-[22px] mb-[49px]'>{"Others"}</h4>
-          <div className='flex relative right-[6px] gap-1'>
+        <div className="flex ml-4 flex-col">
+          <h4 className=" text-white text-[22px] mb-[49px]">{"Others"}</h4>
+          <div className="flex relative right-[6px] gap-3 pl-2">
             <Link
-              target='_blank'
-              className='hover:scale-110 duration-150'
+              target="_blank"
+              className="hover:scale-110 duration-150"
               href={"https://t.me/NetSepio?boost "}
             >
               <Image
                 src={"/images/tele_green.svg"}
                 width={50}
                 height={50}
-                className='object-cover'
-                alt='telegram'
+                className="object-cover"
+                alt="telegram"
               />
             </Link>
             <Link
-              target='_blank'
-              className='hover:scale-110 duration-150'
+              target="_blank"
+              className="hover:scale-110 duration-150"
               href={"https://github.com/Netsepio"}
             >
               <Image
                 src={"/images/git_green.svg"}
                 width={50}
-                className='object-cover'
+                className="object-cover"
                 height={50}
-                alt='github'
+                alt="github"
+              />
+            </Link>
+
+            {/* //discord */}
+            <Link
+              target="_blank"
+              className="hover:scale-110 duration-150"
+              href={"https://discordapp.com/invite/5uaFhNpRF6"}
+            >
+              <Image
+                src={"/images/discord_green.svg"}
+                width={65}
+                className="object-cover"
+                height={10}
+                alt="discord"
+              />
+            </Link>
+          </div>
+          <div className="flex relative right-[6px] ">
+            {/* linkedin */}
+            <Link
+              target="_blank"
+              className="hover:scale-110 duration-150"
+              href={"https://www.linkedin.com/company/netsepio/ "}
+            >
+              <Image
+                src={"/images/linkedIn_green.svg"}
+                width={70}
+                height={70}
+                className="object-cover"
+                alt="linkedin"
+              />
+            </Link>
+
+            {/* twitter */}
+            <Link
+              target="_blank"
+              className="hover:scale-110 duration-150"
+              href={"https://x.com/netsepio "}
+            >
+              <Image
+                src={"/images/twitter_green.svg"}
+                width={70}
+                height={50}
+                className="object-cover"
+                alt="twitter"
               />
             </Link>
           </div>
         </div>
-        <p className='text-cta absolute left-0 -bottom-10 text-sm'>
+        <p className="text-cta absolute left-0 -bottom-10 text-sm">
           © 2024 - NetSepio. All rights reserved.
         </p>
       </footer>

src/components/Newsletter.jsx

@@ -8,7 +8,7 @@ const Newsletter = () => {
   return (
     <div
       style={roboto.style}
-      className='w-full h-[694px] mt-[5%] flex flex-row-reverse  justify-between items-center gap-10'
+      className='w-[90%] h-[694px] mt-[5%] flex flex-row-reverse  justify-between items-center gap-10'
     >
       <div className='flex pl-[0%] sm:pl-[5%] flex-col  w-[50%]'>
         <h4 className=' text-2xl lg:text-[42px] flex mb-[36px] flex-col leading-tight text-white'>
@@ -21,7 +21,7 @@ const Newsletter = () => {
           title={"Subscribe To Our Newsletter"}
         />
       </div>
-      <div className='flex flex-col relative h-[70%] sm:h-full  w-[50%]'>
+      <div className='flex flex-col relative h-[70%] sm:h-[80%] w-[40%] ml-10'>
         <Image
           src={"/images/newsletter.jpg"}
           className='object-cover'

src/components/Subcribe.jsx

@@ -0,0 +1,45 @@
+import React from "react";
+import CustomBtn from "./CustomBtn";
+import useFonts from "@/hooks/useFonts";
+import Image from "next/image";
+import "../app/globals.css";
+const SubscribePage = () => {
+  const { roboto } = useFonts();
+  return (
+    <div className=" my-20 ">
+      <div
+        style={roboto.style}
+        className="w-[1258px] h-[500px] px-[80px] flex flex-row-reverse  justify-between items-center gap-10 bg-gradient1 
+      rounded-[40px]"
+      >
+        <div className="flex pl-[0%] sm:pl-[5%] flex-col  w-[40%] items-end">
+          <CustomBtn
+            link="https://netsepio.substack.com/"
+            width="lg:w-[234px]  sm:mr-0"
+            title={"Subscribe"}
+          />
+        </div>
+        <div className="flex flex-col relative h-[40%] sm:h-[50%]  w-[35%] ">
+          <Image
+            src={"/images/subscribepage1.jpeg"}
+            className="object-cover rounded-[20px]"
+            fill
+            priority
+            alt="phone"
+          />
+        </div>
+        <div className="flex flex-col relative h-[40%] sm:h-[50%]  w-[55%]">
+          <Image
+            src={"/images/subscribepage2.jpeg"}
+            className="object-cover rounded-[40px]"
+            fill
+            priority
+            alt="phone"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SubscribePage;

src/utils/data.js

@@ -32,15 +32,15 @@ export const cardDetails = [
   },
   {
     image: "pix_6",
-    title: "Reliable Uptime",
+    title: "Reliable Uptime,<br/><br/> Fast connectivity",
     link: "/",
     button: "Learn more",
-    desc: "Maintaining consistent and reliable access to the internet and services, even in high-demand scenarios.",
+    desc: "Netsepio ensures optimal performance with high-speed connectivity across its decentralized network, minimizing latency and maximizing efficiency while maintaining consistent and reliable access to the internet and services, even in high-demand scenarios.",
   },
   {
     image: "pix_5",
-    title: "Fast Connectivity",
-    desc: "Optimal performance with high-speed connectivity across its decentralized network, minimizing latency and maximizing efficiency",
+    title: "Mobile App",
+    desc: "Secure your online activity with our blockchain VPN app, utilizing NFTs for robust privacy and decentralization.",
   },
 ];
 export const cardDetails2 = [