sotreus and extension pages for both mobile and web

src/app/extension/page.jsx

@@ -0,0 +1,36 @@
+import CustomBtn from "@/components/CustomBtn";
+import FeatureItem from "@/components/extension/FeatureItem";
+import Hero from "@/components/extension/HeroExt";
+import { ExtFeatures } from "@/utils/data";
+import Image from "next/image";
+import React from "react";
+
+const Index = () => {
+  return (
+    <div className='py-[20vh] flex items-center flex-col'>
+      <Hero />
+      <section className='w-full flex flex-col py-[12vh] items-center h-max'>
+        <h2 className='text-cta w-full mb-[6vh] text-center text-2xl font-medium md:text-4xl'>
+          Features
+        </h2>
+        {ExtFeatures.map((item, index) => {
+          return <FeatureItem item={item} key={index.toString()} />;
+        })}
+      </section>
+      <section className='w-[90%] mt-[5%] lg:mt-[10%] space-y-[5vh] lg:pace-y-[10vh] flex flex-col items-center justify-center h-[542px] bg-cover bg-[url(/images/extension/install_bg.svg)] bg-no-repeat lg:h-[724px]'>
+        <h2 className='text-2xl text-white font-semibold md:text-6xl  '>
+          NetSepio Browser Extension
+        </h2>
+        <p className='bg-gradient-to-r from-primary to-[#3185FC] from-0% via-90% to-100% via-[#91A6FF] bg-clip-text text-transparent font- text-lg lg:text-3xl'>
+          Don't just browse the web—browse it better.
+        </p>
+        <CustomBtn
+          title='Install now'
+          width='w-[140px] bg-white lg:w-[191px]'
+        />
+      </section>
+    </div>
+  );
+};
+
+export default Index;

src/app/layout.jsx

@@ -4,7 +4,7 @@ import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
 
 const roboto = Roboto({
-  subsets: ["latin"],
+  subsets: ["greek"],
   weight: ["100", "300", "400", "500", "700"],
 });
 

src/app/sotreus/page.jsx

@@ -0,0 +1,104 @@
+"use client";
+import CustomBtn from "@/components/CustomBtn";
+import useFonts from "@/hooks/useFonts";
+import { privacyData, sotreusFeatures } from "@/utils/data";
+import Image from "next/image";
+import React from "react";
+
+const Page = () => {
+  const { galgo } = useFonts();
+  return (
+    <div className='w-full h-full'>
+      <section className='h-screen relative w-full flex flex-col items-center bg-cover gap-5 md:gap-10 md:pt-[20vh] justify-center bg[url(/images/sotreus/privacy.png)]'>
+        <h1 className='uppercase text-3xl  font-[100] md:text-8xl text-white'>
+          Privacy Firewall
+        </h1>
+        <p className='text-sm md:text-2xl md:w-[40%] text-center font-extralight text-white/80'>
+          <span>Sotreus,</span>
+          fast and easy-to-use VPN service protects internet activities from
+          cyber threats and surveillance
+        </p>
+        <div className='w-full h-full absolute top-0 -z-10'>
+          <Image
+            src={"/images/sotreus/privacy.png"}
+            className='object-cover'
+            fill
+            alt='hero'
+          />
+        </div>
+        ;
+      </section>
+      <section className='w-full px-[6vw] pt-[8vh] md:pt-[10vh] bg-primary h-max'>
+        <h2 className='text-white font-medium mb-[8vh] md:mb-[15vh] text-2xl md:text-6xl'>
+          Maximize Security and Performance
+        </h2>
+        <div className='flex flex-col md:flex-row items-center justify-between  md:flex-wrap'>
+          {privacyData.map((item, i) => {
+            return (
+              <div
+                key={i.toString()}
+                className=' relative px-[30px] rounded-[20px] bg-gradient-t-br from-white to-[#11D9C5] w-[82vw] h-[200px]  md:w-[600px] mb-[6vh] md:mb-[8vh] flex flex-col gap-5  justify-between py-[4%] md:h-[367.41px] '
+              >
+                <h3 className='text-white font-medium z-20 text-xl md:text-3xl'>
+                  {item.title}
+                </h3>
+                <p className='text-white w-[85%] md:w-[75%] font-light z-20 text-sm md:text-xl'>
+                  {item.desc}
+                </p>
+                <div className=' w-full  p-5 h-full  absolute top-0 left-0'>
+                  <Image
+                    src={`/images/sotreus/${item.image}`}
+                    alt='bg'
+                    fill
+                    className=' object-contain'
+                  />
+                </div>
+              </div>
+            );
+          })}
+        </div>
+        <h2 className='text-white font-bold mt-[10vh] md:mt-[20vh] mb-[6vh] md:mb-[17vh] text-2xl md:text-6xl'>
+          Features of Sotreus
+        </h2>
+        <div className='flex flex-col   items-center'>
+          {sotreusFeatures.map((item, i) => {
+            return (
+              <div
+                key={i.toString()}
+                className='w-full relative mb-[3vh] md:mb-[10vh] flex flex-col md:flex-row justify-between items-center h-auto md:h-[496px]'
+              >
+                <div className=' w-[360px]  h-[250px] md:w-[810px] md:h-[496px] relative'>
+                  <Image
+                    src={`/images/sotreus/${item.image}`}
+                    alt='bg'
+                    fill
+                    className=' object-fit'
+                  />
+                </div>
+                <div className='h-full flex flex-col justify-center  py-[6%] md:w-[33%]'>
+                  <h3 className='text-white  font-medium mb-[1vh] md:mb-[5vh] text-xl md:text-5xl'>
+                    {item.title}
+                  </h3>
+                  <p className='text-white/60 w-[85%]  font-light text-sm md:text-xl'>
+                    {item.desc}
+                  </p>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </section>
+      <section className='w-full mt-[5%] lg:mt-[10%] space-y-[5vh] lg:space-y-[10vh] flex flex-col items-center justify-center h-[542px] bg-cover bg-[url(/images/sotreus/base.svg)] bg-no-repeat lg:h-screen'>
+        <h2 style={galgo.style} className='text-white  text-4xl md:text-8xl  '>
+          SOTREUS
+        </h2>
+        <p className='text-white uppercase w-[70%] text-3xl lg:text-6xl text-center'>
+          Set up your Dedicated vpn today
+        </p>
+        <CustomBtn title='Try Now' width='w-[140px] bg-white lg:w-[191px]' />
+      </section>
+    </div>
+  );
+};
+
+export default Page;

src/components/Card.jsx

@@ -14,7 +14,7 @@ const Card = ({ item }) => {
         <p className='text-white w-[90%] font-light mt-[35px] mb-[25px] text-sm lg:text-lg'>
           {item.desc}
         </p>
-        {/* <CustomBtn title={item.btn} /> */}
+        <CustomBtn link={item.link} title={item.btn} />
       </div>
       <Image
         src={`/images/${item.image}.png`}

src/components/CustomBtn.jsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 import React from "react";
 
 const CustomBtn = ({
-  title = "Button",
+  title = "Explore",
   width = "w-[80px] lg:w-[170px]",
   link = "/",
 }) => {

src/components/Footer.jsx

@@ -14,7 +14,9 @@ const Footer = () => {
     <div
       style={roboto.style}
       className={`h-max pt-[170px]  w-full flex ${
-        path === "/" ? "bg-cta" : "bg-white"
+        path === "/" || path === "/extension" || path === "/sotreus"
+          ? "bg-cta"
+          : "bg-white"
       } items-end`}
     >
       <div className=' h-[507px]   w-full pt-[102px] rounded-t-[12px]  sm:rounded-t-[50px]  bg-primary '>

src/components/Newsletter.jsx

@@ -17,8 +17,8 @@ const Newsletter = () => {
         </h4>
         <CustomBtn
           link='https://netsepio.substack.com/'
-          width='lg:w-[224px] mr-2 sm:mr-0'
-          title={"Subscribe Our Newsletter"}
+          width='lg:w-[234px] mr-2 sm:mr-0'
+          title={"Subscribe To Our Newsletter"}
         />
       </div>
       <div className='flex flex-col relative h-[70%] sm:h-full  w-[50%]'>

src/components/extension/FeatureItem.jsx

@@ -0,0 +1,30 @@
+import Image from "next/image";
+import React from "react";
+
+const FeatureItem = ({ item }) => {
+  return (
+    <div className='w-[90%] lg:w-[80%] my-[5vh] rounded-lg px-[2%] h-[289px] lg:h-[546px] flex lg:justify-between items-center border-opacity-40 border-white border-2 relative '>
+      <p className='absolute top-[4%] left-[2%] text-white font-thin text-sm  lg:text-lg'>
+        {`0${item?.id}`}
+      </p>
+      <div className='lg:w-[50%] h-full justify-center lg:justify-end  flex flex-col pb-[5%]'>
+        <h2 className='text-white lg:w-[60%] mb-[5%] lg:mb-0 text-xl font-normal md:text-5xl'>
+          {item?.title}
+        </h2>
+        <p className='lg:text-2xl lg:w-[80%] text-sm mt-[5%] lg:mt-[20%] text-white font-light'>
+          {item?.desc}
+        </p>
+      </div>
+      <div className='relative lg:w-[30%] lg:h-[90%]'>
+        <Image
+          className='object-contain'
+          alt='img'
+          fill
+          src={`/images/extension/${item?.img}`}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default FeatureItem;

src/components/extension/HeroExt.jsx

@@ -0,0 +1,31 @@
+import Image from "next/image";
+import React from "react";
+import CustomBtn from "../CustomBtn";
+
+const Hero = () => {
+  return (
+    <div className='h-[80vh] relative flex flex-col py-[5vh] md:py-0 md:flex-row items-center  w-full bg-white'>
+      <div className='absolute left-[0] top-0 w-[140px] lg:w-[237px] h-[125px] lg:h-[216px] bg-[#040A20] rounded-full blur-3xl' />
+      <div className='absolute bottom-0 right-0 md:right-[40%] w-[140px] lg:w-[237px] h-[125px] lg:h-[216px] bg-[#040A20] rounded-full blur-3xl' />
+      <div className='relative md:left-[8%] w-[95vw] md:w-[60vw] h-[65%] md:h-[75%]'>
+        <Image
+          className='object-cover bg-primary lg:bg-transparent lg:border-none border-opacity-30 z-20 border-[0.3px] border-cta rounded-md'
+          src={"/images/extension/hero.png"}
+          fill
+          alt='hero'
+        />
+      </div>
+      <div className='relative bottom-[7%] md:bottom-0 flex flex-col h-[55%] md:h-[90%] w-[100%] md:w-[60%]  items-center md:items-start lg:pl-[13%] pt-[15%] lg:pt-[6%]  bg-primary'>
+        <h2 className='bg-gradient-to-r text-3xl font-semibold md:text-6xl from-[#11D9C5] to-[#91A6FF] bg-clip-text text-transparent'>
+          Browser Extension
+        </h2>
+        <p className='text-white font-thin text-xl lg:text-3xl  pt-[5%] md:pt-[10%] mb-[10%] lg:mb-[20%]'>
+          AI-Powered secure browsing
+        </p>
+        <CustomBtn title='Download now' width='w-[140px] lg:w-[191px]' />
+      </div>
+    </div>
+  );
+};
+
+export default Hero;

src/hooks/useFonts.jsx

@@ -1,12 +1,16 @@
-import { Roboto, Inter } from "next/font/google";
+import { Roboto, Inter, Noto_Sans_Glagolitic as Galgo } from "next/font/google";
 const roboto = Roboto({
   subsets: ["latin"],
   weight: ["100", "300", "400", "500", "700"],
 });
+const galgo = Galgo({
+  subsets: ["glagolitic"],
+  weight: ["400"],
+});
 const inter = Inter({ subsets: ["latin"] });
 
 const useFonts = () => {
-  return { roboto, inter };
+  return { roboto, inter, galgo };
 };
 
 export default useFonts;

src/utils/data.js

@@ -2,6 +2,7 @@ export const cardDetails = [
   {
     image: "pix",
     title: "Browser Extension",
+    link: "extension",
     desc: "Netsepio's browser extension combines a Web 3 crypto wallet with AI, ensuring secure reviews and easy navigation for safer online decisions.",
   },
   {
@@ -12,12 +13,13 @@ export const cardDetails = [
   {
     image: "pix_3",
     title: "Privacy Firewall",
+    link: "sotreus",
     desc: "Fast and easy-to-use VPN service that protects internet activities from cyber threats and surveillance.",
   },
   {
     image: "pix_4",
     title: "DVPN",
-    desc: "Decentralized VPN Service based on the WireGuard VPN Protocol.It is designed to enhance users' privacy, anonymity, and security when using Public VPNs.",
+    desc: "Decentralized VPN Service based on the WireGuard VPN Protocol.It is designed to enhance user privacy, anonymity, and security when using Public VPNs.",
   },
   {
     image: "pix_5",
@@ -27,7 +29,7 @@ export const cardDetails = [
   {
     image: "pix_6",
     title: "Reliable Uptime",
-    desc: "Optimal performance with high-speed connectivity across its decentralized network, minimizing latency and maximizing efficiency.",
+    desc: "Maintaining consistent and reliable access to the internet and services, even in high-demand scenarios.",
   },
 ];
 export const cardDetails2 = [
@@ -47,6 +49,50 @@ export const cardDetails2 = [
     desc: "Freedom to choose their VPN usage, supports open internet access, and builds trust by prioritizing choice and flexibility.",
   },
 ];
+export const privacyData = [
+  {
+    image: "filter.svg",
+    title: "DNS Filtering",
+    desc: "Both AdGuard Home and Pi-Hole offer robust DNS filtering that blocks ads, tracking cookies, and malicious links across the entire network.",
+  },
+  {
+    image: "customize.svg",
+    title: "Customizeable Control",
+    desc: "Administrators can tailor filtering rules, including blacklists and whitelists, to meet specific security and browsing needs.",
+  },
+  {
+    image: "network.svg",
+    title: "Network Level Protection",
+    desc: "Ensures all devices connected to the network are protected from unwanted content and cyber threats, regardless of their operating system or hardware.",
+  },
+  {
+    image: "enhance.svg",
+    title: "Enhanced Network Performance",
+    desc: "Tools block intrusive ads and harmful domains, reducing page load times and saving bandwidth for a smoother, faster browsing experience..",
+  },
+];
+export const sotreusFeatures = [
+  {
+    image: "functionality.svg",
+    title: "Comprehensive Functionality",
+    desc: "It offers APIs that make it easier to set up, configure, and manage your WireGuard VPN, including distributing client files to users. The APIs abstract away much of the complexity of VPN operations.",
+  },
+  {
+    image: "integration.svg",
+    title: "Easy Integration",
+    desc: "Work seamlessly with WireGuard VPN services, allowing users to integrate and manage their VPN networks with ease.",
+  },
+  {
+    image: "deployment.svg",
+    title: "Easy Deployment",
+    desc: "Seamless adaptation to various environments, enabling easy scaling and customization to meet specific needs without disrupting operations.",
+  },
+  {
+    image: "private.svg",
+    title: "Secure and Private",
+    desc: "Built on the secure and privacy-focused WireGuard VPN protocol, ensuring your VPN network remains safe.",
+  },
+];
 export const footerContents = [
   {
     title: "About",
@@ -123,3 +169,24 @@ export const how_we_help = [
     desc: "Elevate Your Crypto Asset Security with VPN and Firewall Services",
   },
 ];
+
+export const ExtFeatures = [
+  {
+    id: 1,
+    img: "ai.png",
+    title: "AI Security Insights,",
+    desc: "Our AI analyzes each website you visit, providing you with real-time security assessments.",
+  },
+  {
+    id: 2,
+    img: "privacy.png",
+    title: "Enhanced User Privacy",
+    desc: "Ensures your browsing privacy by shielding your online activities from trackers and potential data breaches.",
+  },
+  {
+    id: 3,
+    img: "support.png",
+    title: "Decision Support",
+    desc: "Receive concise insights into website reputations and history, enabling you to determine a site's trustworthiness before sharing any personal information.",
+  },
+];