Skip to content

Commit

Permalink
half ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@larbi-ishak
larbi-ishak committed Jul 23, 2023
1 parent a86a75b commit ed772e1
Show file tree
Hide file tree
Showing 15 changed files with 390 additions and 113 deletions.
45 changes: 31 additions & 14 deletions data/products.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,102 +6,119 @@
"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,
"title": "title 2",
"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,
"title": "title 3",
"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,
"title": "title 4",
"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,
"title": "title 5",
"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,
"title": "title 6",
"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,
"title": "title 7",
"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,
"title": "title 8",
"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,
"title": "title 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,
"title": "title 10",
"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": [
{
"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"
}
]
}
9 changes: 1 addition & 8 deletions pages/about.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,8 @@
import { FeaturesAsymmetrical, FeaturesCards } from "@/src/components/aboutComp";
import { FeaturesAsymmetrical} from "@/src/components/aboutComp";

const About = () => {
return (
<div>
{/*
// carousel
// card text
// card text
// contact us button
*/}
<FeaturesAsymmetrical />
</div>
);
Expand Down
10 changes: 0 additions & 10 deletions pages/blogs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,6 @@ const Blogs = ({ blogs }) => {
<div>
<ArticlesCardsGrid mockdata={blogs}/>
<div>
{/*pass blogs here */}
{/*this will be removed*/}
{blogs &&
blogs.map((blog) => {
return (
<div key={blog.title}>
<p>{JSON.stringify(blog)}</p>
</div>
);
})}
</div>
</div>
);
Expand Down
13 changes: 10 additions & 3 deletions pages/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<>
<Head>
Expand All @@ -32,7 +39,7 @@ export default function Home() {
<div style={{justifyContent: "center"}}>
<Link href={"/contact"} style={{textDecoration: "none"}}>
<Group position="center" mt="xl">
<Button type="submit" size="md">
<Button type="submit" size="md" className={classes.Button}>
Contact Us
</Button>
</Group>
Expand Down
63 changes: 42 additions & 21 deletions pages/products/index.js
View file
Original file line number Diff line number Diff line change
@@ -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") {
Expand All @@ -15,32 +38,30 @@ const Events = ({ productsList }) => {
}
return (
<div>
<p>categories</p>
<select onChange={handleChange}>
<option>All</option>
<option>health</option>
<option>youth</option>
<option>politic</option>
<option>war</option>
<option>sport</option>
<Center maw={400} h={100} mx="auto">
<h2 style={{marginTop: "-30px"}}>Products:</h2>
</Center>
<div style={styles.wrapper}>
<p style={styles.title}>Categories:</p>
<select style={styles.select} onChange={handleChange}>
<option style={styles.option}>All</option>
<option style={styles.option}>Health</option>
<option style={styles.option}>Youth</option>
<option style={styles.option}>Politic</option>
<option style={styles.option}>War</option>
<option style={styles.option}>Sport</option>
</select>

<h3>Products:</h3>
<div>
</div>
<Grid >
{products &&
products.map((product) => {
return (
<div key={product.id}>
<p>{JSON.stringify(product)}</p>
<p>
<Link href={`/products/${product.id}`}>
<button>Details</button>{" "}
</Link>
</p>
</div>
<Grid.Col span={4} key={product.id}>
<BadgeCard {...product} />
</Grid.Col>
);
})}
</div>
</Grid>
</div>
);
};
Expand Down
21 changes: 16 additions & 5 deletions src/components/aboutComp.js
View file
Original file line number Diff line number Diff line change
@@ -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: {
Expand All @@ -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%)`
}
}));


Expand Down Expand Up @@ -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',
Expand All @@ -82,9 +91,11 @@ export function FeaturesAsymmetrical() {
return (
<Container mt={30} mb={30} size="lg">
<Group position="center">

<Badge variant="filled" size="lg">
Best company ever
<Title order={1} className={classes.title} ta="center" mt="sm">
INTERNATIONAL AMB
</Title>
<Badge variant="filled" size="lg" style={{marginTop: "25px"}} className={classes.Badge}>
Best Health and Beauty Products
</Badge>
</Group>

Expand Down
13 changes: 11 additions & 2 deletions src/components/contactCom.js
View file
Original file line number Diff line number Diff line change
@@ -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: '',
Expand All @@ -16,6 +24,7 @@ export function GetInTouchSimple() {
},
});

const { classes } = useStyles();
return (
<>
<Title
Expand Down Expand Up @@ -76,7 +85,7 @@ export function GetInTouchSimple() {
<input type="hidden" name="_autoresponse" value="we got your message we will reply to you soon" />
<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>
Expand Down
Loading

0 comments on commit ed772e1

Please sign in to comment.