Feature/lynkr landing feature section

apps/lynkr/landing/components/FeatureSection/FeatureCard.tsx

@@ -0,0 +1,45 @@
+import { Typography, Card } from "@mui/material";
+import React from "react";
+import { Icon } from "@iconify/react";
+import globe from "@iconify/icons-fluent/globe-48-regular";
+import Image from "next/image";
+import { useIntl } from "react-intl";
+import { IFeature } from "./FeatureSection";
+
+export default function FeatureCard({ data }: { data: IFeature }) {
+  const image = `/icons/${data.image}.png`;
+
+  const { formatMessage } = useIntl();
+
+  return (
+    <Card
+      variant="outlined"
+      sx={{
+        minHeight: 400,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        rowGap: "20px",
+        marginX: "10px",
+
+        justifyItems: "center",
+        backgroundColor: "#FAFAFD"
+      }}
+    >
+      <Image src={image} alt="hero image" width={50} height={50} />
+
+      <Typography
+        sx={{
+          fontWeight: "500",
+          fontSize: "20px",
+          lineHeight: "24px",
+          wordWrap: "break-word"
+        }}
+      >
+        {data.title}
+      </Typography>
+      <Typography sx={{ textAlign: "center" }}>{data.description}</Typography>
+    </Card>
+  );
+}

apps/lynkr/landing/components/FeatureSection/FeatureSection.tsx

@@ -0,0 +1,94 @@
+import { Box, Typography } from "@mui/material";
+import React from "react";
+import FeatureCard from "./FeatureCard";
+import { useTheme } from "@glom/theme";
+import { useIntl } from "react-intl";
+
+export interface IFeature {
+  title: string;
+  image: string;
+  description: string;
+}
+
+export default function FeatureSection() {
+  const theme = useTheme();
+
+  const { formatMessage } = useIntl();
+
+  const featuresData: IFeature[] = [
+    {
+      title: "Manage Bundles",
+      image: "features_icons1",
+      description:
+        "Apps that have the power to transform workflows, improve client relationships, boost your productivity."
+    },
+    {
+      title: "Stats",
+      image: "features_icons2",
+      description:
+        "Apps that have the power to transform workflows, improve client relationships, boost your productivity."
+    },
+    {
+      title: "Buy bundles",
+      image: "features_icons3",
+      description:
+        "Apps that have the power to transform workflows, improve client relationships, boost your productivity."
+    },
+    {
+      title: "Simple & Powerful",
+      image: "features_icons4",
+      description:
+        "Apps that have the power to transform workflows, improve client relationships, boost your productivity."
+    }
+  ];
+
+  return (
+    <Box
+      sx={{
+        background: "url('feature_bg.png')",
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "100% 70%",
+        backgroundSize: "100% 20%",
+        paddingTop: "54px",
+        paddingBottom: "16px"
+      }}
+    >
+      <Typography
+        className="title-landing-page"
+        textAlign="center"
+        sx={{
+          color: {
+            desktop: theme.common.titleActive,
+            mobile: "black"
+          }
+        }}
+      >
+        {formatMessage({ id: "featureHeadline" })}
+      </Typography>
+      <Typography
+        className="p1--space"
+        textAlign="center"
+        sx={{ mt: "10px", paddingX: "5px" }}
+      >
+        {formatMessage({ id: "featureSubtitle" })}
+      </Typography>
+
+      <Box
+        sx={{
+          rowGap: "16px",
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fit , minmax(300px, 1fr))",
+          marginTop: "48px",
+          justifyContent: "space-around",
+          // flexWrap: "wrap",
+          maxWidth: "80%",
+          marginX: "auto"
+        }}
+      >
+        {featuresData.map((item, key) => (
+          <FeatureCard data={item} key={key} />
+        ))}
+      </Box>
+    </Box>
+  );
+}

apps/lynkr/landing/pages/index.tsx

@@ -1,15 +1,16 @@
-import { AppBar, Box, Button, Typography } from '@mui/material';
-import Navbar, { ElevationScroll } from '../components/Navbar/Navbar';
-import { useTheme } from '@glom/theme';
-import HeroSection from '../components/HeroSection/HeroSection';
+import { AppBar, Box, Button, Typography } from "@mui/material";
+import Navbar, { ElevationScroll } from "../components/Navbar/Navbar";
+import { useTheme } from "@glom/theme";
+import HeroSection from "../components/HeroSection/HeroSection";
+import FeatureSection from "../components/FeatureSection/FeatureSection";
 
 export function Index() {
   const theme = useTheme();
   return (
     <Box
       sx={{
-        height: '100%',
-        backgroundColor: theme.common.offWhite,
+        height: "100%",
+        backgroundColor: theme.common.offWhite
       }}
     >
       <ElevationScroll>
@@ -21,6 +22,12 @@ export function Index() {
         <HeroSection />
       </Box>
 
+
+      <Box component="section" id="features" sx={{ pt: 10.5 }}>
+        <FeatureSection />
+      </Box>
+
+
     </Box>
   );
 }

libs/theme/src/languages/en-us/website.ts

@@ -327,4 +327,8 @@ export const website = {
   projectHeadline: 'Sell Internet Over WiFi With No Hassles Or Complications',
   projectSubtitle:
     'Manage your bundles, sell your internet, disconnect unpaid clients, receive your money without dealing with tickets and client complications',
+
+  featureHeadline: 'Feature',
+  featureSubtitle:" Get Answers to frequently asked question . Get Answers to frequently asked question .  Get Answers to frequently asked question .  Get Answers to fequently"
+
 };

libs/theme/src/languages/fr/website.ts

@@ -343,4 +343,8 @@ export const website = {
     "Vendre de l'Internet par WiFi sans problème ni complication",
   projectSubtitle:
     'Gérez vos forfaits, vendez votre internet, déconnectez les clients impayés, recevez votre argent sans avoir à gérer les tickets et les complications des clients',
+
+  featureHeadline: 'Fonctionnalite',
+  featureSubtitle:
+    'Obtenir des réponses aux questions fréquemment posées . Obtenir des réponses aux questions fréquemment',
 };