diff --git a/apps/lynkr/landing/components/FeatureSection/FeatureCard.tsx b/apps/lynkr/landing/components/FeatureSection/FeatureCard.tsx
new file mode 100644
index 00000000..cf0edf36
--- /dev/null
+++ b/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 (
+
+
+
+
+ {data.title}
+
+ {data.description}
+
+ );
+}
diff --git a/apps/lynkr/landing/components/FeatureSection/FeatureSection.tsx b/apps/lynkr/landing/components/FeatureSection/FeatureSection.tsx
new file mode 100644
index 00000000..739a5b34
--- /dev/null
+++ b/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 (
+
+
+ {formatMessage({ id: "featureHeadline" })}
+
+
+ {formatMessage({ id: "featureSubtitle" })}
+
+
+
+ {featuresData.map((item, key) => (
+
+ ))}
+
+
+ );
+}
diff --git a/apps/lynkr/landing/pages/index.tsx b/apps/lynkr/landing/pages/index.tsx
index 998337c2..2ca37f78 100644
--- a/apps/lynkr/landing/pages/index.tsx
+++ b/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 (
@@ -21,6 +22,12 @@ export function Index() {
+
+
+
+
+
+
);
}
diff --git a/apps/lynkr/landing/public/feature_bg.png b/apps/lynkr/landing/public/feature_bg.png
new file mode 100644
index 00000000..9bf744f7
Binary files /dev/null and b/apps/lynkr/landing/public/feature_bg.png differ
diff --git a/apps/lynkr/landing/public/icons/features_icons1.png b/apps/lynkr/landing/public/icons/features_icons1.png
new file mode 100644
index 00000000..12f2aa2d
Binary files /dev/null and b/apps/lynkr/landing/public/icons/features_icons1.png differ
diff --git a/apps/lynkr/landing/public/icons/features_icons2.png b/apps/lynkr/landing/public/icons/features_icons2.png
new file mode 100644
index 00000000..3f0bd8f0
Binary files /dev/null and b/apps/lynkr/landing/public/icons/features_icons2.png differ
diff --git a/apps/lynkr/landing/public/icons/features_icons3.png b/apps/lynkr/landing/public/icons/features_icons3.png
new file mode 100644
index 00000000..3eef0062
Binary files /dev/null and b/apps/lynkr/landing/public/icons/features_icons3.png differ
diff --git a/apps/lynkr/landing/public/icons/features_icons4.png b/apps/lynkr/landing/public/icons/features_icons4.png
new file mode 100644
index 00000000..d1290561
Binary files /dev/null and b/apps/lynkr/landing/public/icons/features_icons4.png differ
diff --git a/libs/theme/src/languages/en-us/website.ts b/libs/theme/src/languages/en-us/website.ts
index 910d9ae7..f58f518c 100644
--- a/libs/theme/src/languages/en-us/website.ts
+++ b/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"
+
};
diff --git a/libs/theme/src/languages/fr/website.ts b/libs/theme/src/languages/fr/website.ts
index 8812565b..2cbb16a7 100644
--- a/libs/theme/src/languages/fr/website.ts
+++ b/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',
};