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 ( + + hero image + + + {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', };