diff --git a/data/products.json b/data/products.json index 0ad20f5..2492312 100644 --- a/data/products.json +++ b/data/products.json @@ -6,7 +6,9 @@ "desc": "description 1", "category": "youth", "date": "12-03-2013", - "price": 10 + "price": 10, + "comprimes": "30 comprimes", + "image": "https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80" }, { "id": 2, @@ -14,7 +16,9 @@ "desc": "description 1", "category": "sport", "date": "12-03-2013", - "price": 20 + "price": 20, + "comprimes": "30 comprimes", + "image": "https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80" }, { "id": 3, @@ -22,7 +26,9 @@ "desc": "description 1", "category": "sport", "date": "12-03-2013", - "price": 30 + "price": 30, + "comprimes": "30 comprimes", + "image": "https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80" }, { "id": 4, @@ -30,7 +36,9 @@ "desc": "description 1", "category": "sport", "date": "12-03-2013", - "price": 40 + "price": 40, + "comprimes": "30 comprimes", + "image": "https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80" }, { "id": 5, @@ -38,7 +46,9 @@ "desc": "description 1", "category": "war", "date": "12-03-2013", - "price": 50 + "price": 50, + "comprimes": "30 comprimes", + "image": "https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80" }, { "id": 6, @@ -46,7 +56,9 @@ "desc": "description 1", "category": "health", "date": "12-03-2013", - "price": 60 + "price": 60, + "comprimes": "30 comprimes", + "image": "https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80" }, { "id": 7, @@ -54,7 +66,9 @@ "desc": "description 1", "category": "health", "date": "12-03-2013", - "price": 70 + "price": 70, + "comprimes": "30 comprimes", + "image": "https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80" }, { "id": 8, @@ -62,7 +76,9 @@ "desc": "description 1", "category": "health", "date": "12-03-2013", - "price": 80 + "price": 80, + "comprimes": "30 comprimes", + "image": "https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80" }, { "id": 9, @@ -70,7 +86,9 @@ "desc": "description 1", "category": "politic", "date": "12-03-2013", - "price": 90 + "price": 90, + "comprimes": "30 comprimes", + "image": "https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80" }, { "id": 10, @@ -78,7 +96,9 @@ "desc": "description 1", "category": "politic", "date": "12-03-2013", - "price": 100 + "price": 100, + "comprimes": "30 comprimes", + "image": "https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80" } ], "blogs": [ @@ -86,22 +106,19 @@ "title": "Blog title", "publish date": "01-01-1970", "content": "Lorem ipsum dolor sit amet, ", - "category": "beauty", "image": "https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80" }, { "title": "Blog title 2", "publish date": "01-01-1970", "content": "Lorem ipsum dolor sit amet, ", - "category": "health", "image": "https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80" }, { "title": "Blog title 3", "publish date": "01-01-1970", "content": "Lorem ipsum dolor sit amet, ", - "category": "beauty", - "image": "/photo.png" + "image": "https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80" } ] } diff --git a/pages/about.js b/pages/about.js index 8e27d9d..84bcb99 100644 --- a/pages/about.js +++ b/pages/about.js @@ -1,15 +1,8 @@ -import { FeaturesAsymmetrical, FeaturesCards } from "@/src/components/aboutComp"; +import { FeaturesAsymmetrical} from "@/src/components/aboutComp"; const About = () => { return (
- {/* - // carousel - // card text - // card text - // contact us button - - */}
); diff --git a/pages/blogs.js b/pages/blogs.js index 46b7290..4b2c8ac 100644 --- a/pages/blogs.js +++ b/pages/blogs.js @@ -5,16 +5,6 @@ const Blogs = ({ blogs }) => {
- {/*pass blogs here */} - {/*this will be removed*/} - {blogs && - blogs.map((blog) => { - return ( -
-

{JSON.stringify(blog)}

-
- ); - })}
); diff --git a/pages/index.js b/pages/index.js index 218c9c5..a1b9096 100644 --- a/pages/index.js +++ b/pages/index.js @@ -3,12 +3,19 @@ import { HeroText } from "@/src/components/indexComponents/indAbout"; import { HeroImageBackground } from "@/src/components/indexComponents/indProd"; import { StatsGridIcons } from "@/src/components/indexComponents/indStats"; import Head from "next/head.js"; -import { Button, Group } from '@mantine/core'; +import { Button, Group,createStyles } from '@mantine/core'; import Link from "next/link"; export default function Home() { - + const useStyles = createStyles((theme) => ({ + Button: { + backgroundImage: `linear-gradient(135deg, ${theme.colors.teal[9]} 0%, ${ + theme.colors.teal[4] + } 100%)`, + }, +})) + const { classes } = useStyles(); return ( <> @@ -32,7 +39,7 @@ export default function Home() {
- diff --git a/pages/products/index.js b/pages/products/index.js index d80700a..4898eef 100644 --- a/pages/products/index.js +++ b/pages/products/index.js @@ -1,9 +1,32 @@ -import Link from "next/link"; import { useState } from "react"; +import { Grid, Center} from "@mantine/core"; +import { BadgeCard } from "@/src/components/productsComponents/mainProd"; const Events = ({ productsList }) => { const [products, setProducts] = useState(productsList); + const styles= { + select: { + backgroundColor: "transparet", + padding: "10px", + marginBottom: "10px", + display: "inline", + marginLeft: "10px", + fontWeight: "600", + }, + option: { + fontWeight: "600", + }, + title: { + display: "inline", + fontWeight: "bold", + fontSize: "18px" + }, + wrapper: { + margin: "0 15px" + } + } + async function handleChange(e) { const category = e.target.value; if (category != "All") { @@ -15,32 +38,30 @@ const Events = ({ productsList }) => { } return (
-

categories

- + + + + + + - -

Products:

-
+
+ {products && products.map((product) => { return ( -
-

{JSON.stringify(product)}

-

- - {" "} - -

-
+ + + ); })} -
+
); }; diff --git a/src/components/aboutComp.js b/src/components/aboutComp.js index 04fede4..de16cfe 100644 --- a/src/components/aboutComp.js +++ b/src/components/aboutComp.js @@ -1,6 +1,6 @@ import { createStyles, Text, SimpleGrid, Container, rem,Group, Badge, Title } from '@mantine/core'; -import { IconTruck, IconCertificate, IconCoin } from '@tabler/icons-react'; +import {IconMessage ,IconTruck, IconCertificate, IconCoin } from '@tabler/icons-react'; const useStyles = createStyles((theme) => ({ feature: { @@ -25,12 +25,15 @@ const useStyles = createStyles((theme) => ({ }, icon: { - color: theme.fn.variant({ variant: 'light', color: theme.primaryColor }).color, + color: theme.colors.teal[9] }, title: { color: theme.colorScheme === 'dark' ? theme.white : theme.black, }, + Badge: { + backgroundImage: `linear-gradient(135deg, ${theme.colors.teal[9]} 0%, ${ theme.colors.teal[4] } 100%)` + } })); @@ -62,6 +65,12 @@ const mockdata = [ description: 'As electricity builds up inside its body, it becomes more aggressive. One theory is that the electricity.', }, + { + icon: IconMessage, + title: 'Fast customer support', + description: + 'As electricity builds up inside its body, it becomes more aggressive. One theory is that the electricity.', + }, { icon: IconCertificate, title: 'Best Quality Product', @@ -82,9 +91,11 @@ export function FeaturesAsymmetrical() { return ( - - - Best company ever + + INTERNATIONAL AMB + + + Best Health and Beauty Products diff --git a/src/components/contactCom.js b/src/components/contactCom.js index 46e4c96..4a9f617 100644 --- a/src/components/contactCom.js +++ b/src/components/contactCom.js @@ -1,7 +1,15 @@ -import { TextInput, Textarea, SimpleGrid, Group, Title, Button, Text } from '@mantine/core'; +import { TextInput, Textarea, SimpleGrid, Group, Title, Button, createStyles } from '@mantine/core'; import { useForm } from '@mantine/form'; export function GetInTouchSimple() { +const useStyles = createStyles((theme) => ({ + Button: { + backgroundImage: `linear-gradient(135deg, ${theme.colors.teal[9]} 0%, ${ + theme.colors.teal[4] + } 100%)`, + }, +})) + const form = useForm({ initialValues: { name: '', @@ -16,6 +24,7 @@ export function GetInTouchSimple() { }, }); + const { classes } = useStyles(); return ( <> <input type="hidden" name="_template" value="table" /> <Group position="center" mt="xl"> - <Button type="submit" size="md"> + <Button type="submit" size="md" className={classes.Button}> <button type="submit" style={{border: "none", backgroundColor: "transparent",textDecoration: "none", fontWeight: "bold", color: "white"}}>Send Message</button> </Button> </Group> diff --git a/src/components/contactIcons.js b/src/components/contactIcons.js new file mode 100644 index 0000000..4784afb --- /dev/null +++ b/src/components/contactIcons.js @@ -0,0 +1,94 @@ +import { createStyles, ThemeIcon, Text, SimpleGrid, Box, Stack } from '@mantine/core'; +import { IconSun, IconPhone, IconMapPin, IconAt } from '@tabler/icons-react'; + + + +const useStyles = createStyles((theme, { variant }) => ({ + wrapper: { + display: 'flex', + alignItems: 'center', + color: theme.white, + }, + + icon: { + marginRight: theme.spacing.md, + backgroundImage: + variant === 'gradient' + ? `linear-gradient(135deg, ${theme.colors.teal[9]} 0%, ${ + theme.colors.teal[4] + } 100%)` + : 'none', + backgroundColor: 'transparent', + }, + + title: { + color: variant === 'gradient' ? theme.colors.gray[6] : theme.colors[theme.primaryColor][0], + }, + + description: { + color: variant === 'gradient' ? theme.black : theme.white, + }, +})); + + +function ContactIcon({ + icon: Icon, + title, + description, + variant = 'gradient', + className, + ...others +}) { + const { classes, cx } = useStyles({ variant }); + return ( + <div className={cx(classes.wrapper, className)} {...others}> + {variant === 'gradient' ? ( + <ThemeIcon size={40} radius="md" className={classes.icon}> + <Icon size="1.5rem" /> + </ThemeIcon> + ) : ( + <Box mr="md"> + <Icon size="1.5rem" /> + </Box> + )} + + <div> + <Text size="xs" className={classes.title}> + {title} + </Text> + <Text className={classes.description}>{description}</Text> + </div> + </div> + ); +} + + +const MOCKDATA = [ + { title: 'Email', description: 'Internationalamb31@gmail.com', icon: IconAt }, + { title: 'Phone', description: '+213 770 481 549', icon: IconPhone }, + { title: 'Address', description: 'Cité bouamama N 209 T, Oran', icon: IconMapPin }, + + { title: 'Working hours', description: '8 a.m. – 11 p.m.', icon: IconSun }, +]; + +export function ContactIconsList({ data = MOCKDATA, variant }) { + const items = data.map((item, index) => <ContactIcon key={index} variant={variant} {...item} />); + return <Stack>{items}</Stack>; +} + +export function ContactIcons() { + return ( + <SimpleGrid cols={1} breakpoints={[{ maxWidth: 755, cols: 1 }]}> + <Box + sx={(theme) => ({ + padding: theme.spacing.md, + borderRadius: theme.radius.md, + backgroundColor: theme.white, + })} + > + <ContactIconsList /> + </Box> + + </SimpleGrid> + ); +} \ No newline at end of file diff --git a/src/components/foot.js b/src/components/foot.js index 6bc7088..3c05bd8 100644 --- a/src/components/foot.js +++ b/src/components/foot.js @@ -1,48 +1,109 @@ -import { createStyles, Avatar, Text, Group } from '@mantine/core'; -import { IconPhoneCall, IconAt } from '@tabler/icons-react'; +import { + createStyles, + Title, + Container, + rem, +} from '@mantine/core'; +import { ContactIcons} from './contactIcons'; const useStyles = createStyles((theme) => ({ - icon: { - color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5], + wrapper: { + paddingTop: theme.spacing.md, }, - name: { + header: { + height: rem(400), + boxSizing: 'border-box', + backgroundImage: `linear-gradient(135deg, ${theme.colors.teal[9]} 0%, ${ + theme.colors.teal[4] + } 100%)`, + backgroundSize: 'cover', + display: 'flex', + alignItems: 'flex-end', + justifyContent: 'space-between', + position: 'relative', + padding: `calc(${theme.spacing.xs} * 1.5) calc(${theme.spacing.xl} * 2)`, + borderRadius: theme.radius.lg, + marginBottom: theme.spacing.lg, + + [theme.fn.smallerThan(1080)]: { + height: 'auto', + flexDirection: 'column-reverse', + alignItems: 'initial', + padding: theme.spacing.xl, + }, + }, + + title: { + color: theme.white, + position: 'relative', + zIndex: 1, + fontSize: rem(46), + fontWeight: 800, + letterSpacing: rem(-0.5), + fontFamily: `Greycliff CF, ${theme.fontFamily}`, + + [theme.fn.smallerThan(1080)]: { + fontSize: rem(22), + textAlign: 'center', + marginTop: theme.spacing.xl, + }, + }, + + titleOverlay: { + zIndex: 0, + position: 'absolute', + color: theme.white, + fontWeight: 900, + opacity: 0.1, + fontSize: rem(320), + lineHeight: 1, + top: rem(10), + left: rem(32), + pointerEvents: 'none', fontFamily: `Greycliff CF, ${theme.fontFamily}`, + + [theme.fn.smallerThan(1080)]: { + display: 'none', + }, }, + + contact: { + padding: `calc(${theme.spacing.xl} * 1.5)`, + backgroundColor: theme.white, + borderRadius: theme.radius.lg, + boxShadow: theme.shadows.md, + + [theme.fn.smallerThan(1080)]: { + padding: theme.spacing.xl, + }, + }, + + contactTitle: { + color: theme.black, + marginBottom: theme.spacing.xl, + lineHeight: 1, + }, + })); -export function UserInfoIcons({ avatar, name, title, phone, email }) { +export function FaqWithHeader() { const { classes } = useStyles(); + return ( - <div> - <Group noWrap> - <Avatar src={avatar} size={80} radius="md" /> - <div> - <Text fz="xs" tt="uppercase" fw={700} c="dimmed"> - {title} - </Text> - - <Text fz="lg" fw={500} className={classes.name}> - {name} - </Text> - - <Group noWrap spacing={10} mt={3}> - <IconAt stroke={1.5} size="1rem" className={classes.icon} /> - <Text fz="xs" c="dimmed"> - {email} - </Text> - </Group> - - <Group noWrap spacing={10} mt={5}> - <IconPhoneCall stroke={1.5} size="1rem" className={classes.icon} /> - <Text fz="xs" c="dimmed"> - {phone} - </Text> - </Group> + <Container className={classes.wrapper} size="lg"> + <div className={classes.header}> + <Title className={classes.title}>INTERNATIONAL AMB + + AMB + +
+
- - + + + ); } \ No newline at end of file diff --git a/src/components/footer.js b/src/components/footer.js index 2bbd2a6..f7ba598 100644 --- a/src/components/footer.js +++ b/src/components/footer.js @@ -1,9 +1,8 @@ -import styles from "@/styles/Home.module.css"; -import { UserInfoIcons } from "./foot"; +import { FaqWithHeader } from "./foot"; const Footer = () => { - return