47 lines
1.8 KiB
TypeScript
47 lines
1.8 KiB
TypeScript
import React from "react";
|
|
import { Box, Typography, Grid, Card, CardMedia } from "@mui/material";
|
|
import brandimage from "../../../brandimage.jpg"
|
|
|
|
const brands = [
|
|
{ name: "Hockey India", img: brandimage },
|
|
{ name: "J. Hampstead", img: brandimage },
|
|
{ name: "Tim Hortons", img: brandimage },
|
|
{ name: "Brand 4", img: brandimage },
|
|
{ name: "Brand 5", img: brandimage },
|
|
{ name: "Brand 6", img: brandimage },
|
|
{ name: "Hockey India", img: brandimage },
|
|
{ name: "J. Hampstead", img: brandimage },
|
|
{ name: "Tim Hortons", img: brandimage },
|
|
|
|
];
|
|
|
|
const TopBrands = () => {
|
|
return (
|
|
<Box sx={{ backgroundColor: "#16110f", py: 6, textAlign: "center" }}>
|
|
<Typography variant="h4" sx={{ color: "white", display: "inline-block", pb: 1 }}>
|
|
TOP <span style={{ fontWeight: "bold" }}>BRANDS</span>
|
|
</Typography>
|
|
<Typography sx={{ color: "#A0A0A0", maxWidth: "1200px", mx: "auto", mt: 2, lineHeight: 1.9 }}>
|
|
Here's a look at the clients we've worked with. If you'd like to work with the
|
|
best digital agency too, we'd love to hear from you. Drop us a line and we'll
|
|
look forward to brewing something fresh for you!
|
|
</Typography>
|
|
<Grid container spacing={2} justifyContent="center" sx={{ mt: 9 }}>
|
|
{brands.map((brand, index) => (
|
|
<Grid item xs={12} sm={6} md={4} key={index}>
|
|
<Card sx={{ backgroundColor: "#EAEAEA", p: 2, display: "flex", justifyContent: "center", maxWidth: "320px", mx: "auto" }}>
|
|
<CardMedia
|
|
component="img"
|
|
src={brand.img}
|
|
alt={brand.name}
|
|
sx={{ maxWidth: "100%", objectFit: "contain" }}
|
|
/>
|
|
</Card>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default TopBrands; |