desing page

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@material-ui/core": "^4.11.3",
+    "material-ui-icons": "^1.0.0-beta.36",
     "next": "^10.0.5",
     "next-compose-plugins": "^2.2.1",
     "next-optimized-images": "^2.6.2",

src/components/footer/footer.data.js

@@ -1,7 +1,7 @@
 import facebook from 'assets/images/icons/facebook.png';
 import twitter from 'assets/images/icons/twitter.png';
-import github from 'assets/images/icons/github.png';
-import dribbble from 'assets/images/icons/dribbble.png';
+import instagram from 'assets/images/icons/instagram.png'
+import { IoLogoInstagram } from 'react-icons/io';
 
 export const menuItems = [
   {
@@ -14,15 +14,19 @@ export const menuItems = [
       },
       {
         path: '#!',
+        label: 'Thamrin Business Partner',
+      },
+      {
+        path: '#!',
         label: 'Thamrin Founder',
       },
       {
         path: '#!',
-        label: 'Why Us',
+        label: 'Thamrin Profile',
       },
       {
         path: '#!',
-        label: 'Blog',
+        label: 'Thamrin Gallery',
       },
     ],
   },
@@ -91,7 +95,7 @@ export const menuItems = [
     title: 'Connect',
     items: [
       {
-        path: '#!',
+        path: 'https://material-ui.com/api/container/',
         icon: facebook,
         label: 'Facebook',
       },
@@ -102,13 +106,8 @@ export const menuItems = [
       },
       {
         path: '#!',
-        icon: github,
-        label: 'Github',
-      },
-      {
-        path: '#!',
-        icon: dribbble,
-        label: 'Dribbble',
+        icon: instagram,
+        label: 'Instagram',
       },
     ],
   },

src/components/footer/footer.js

@@ -1,11 +1,12 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx, Box, Text, Container } from 'theme-ui';
+import { jsx, Box, Text, Container, Image } from 'theme-ui';
 import Logo from 'components/logo';
 import { Link } from 'components/link';
 import Widget from './widget';
 import { menuItems } from './footer.data';
 import { rgba } from 'polished';
+import logo from 'assets/images/White.png';
 
 export default function Footer() {
   return (
@@ -14,7 +15,7 @@ export default function Footer() {
         <Box sx={styles.footerTopInner}>
           <Box sx={styles.about}>
             <Box sx={styles.logo}>
-              <Logo />
+              <Image src={logo}/>
             </Box>
             <Box sx={styles.terms}>
               <Link path="#!">Terms of use</Link>

src/components/header/header.data.js

@@ -13,11 +13,11 @@ export default [
   },
   {
     path: 'why-us',
-    label: 'Why Us',
+    label: 'About Us',
   },
   {
     path: 'blog',
-    label: 'Blog',
+    label: 'Gallery',
   },
   {
     path: '',

src/components/header/header.js

@@ -1,13 +1,13 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx, Box, Container, Button } from 'theme-ui';
+import { jsx, Box, Container, Button, Image } from 'theme-ui';
 import Sticky from 'react-stickynode';
 import Logo from 'components/logo';
 import { NavLink } from 'components/link';
 import { DrawerProvider } from 'contexts/drawer/drawer-provider';
 import NavbarDrawer from './navbar-drawer';
 import menuItems from './header.data';
-import Image from 'assets/images/White.png'
+import logo from 'assets/images/White.png'
 export default function Header() {
   return (
     <DrawerProvider>
@@ -16,8 +16,7 @@ export default function Header() {
           <Box as="header" sx={styles.header}>
             <Container>
               <Box sx={styles.headerInner}>
-                <Logo sx={styles.logo} />
-                {/* <Image src={Image} /> */}
+                <Image src={logo} style={{width:"250px"}} />
                 <Box as="nav" sx={styles.navbar} className="navbar">
                   <Box as="ul" sx={styles.navList}>
                     {menuItems.map(({ path, label }, i) => (

src/pages/index.js

@@ -7,9 +7,9 @@ import Services from 'sections/services';
 import Testimonials from 'sections/business-partner';
 import OurTeam from 'sections/our-team';
 import OtherServices from 'sections/core-value';
-import WhyUs from 'sections/why-us';
+import WhyUs from 'sections/about-us';
 import SubscribeUs from 'sections/subscribe-us';
-import Blog from 'sections/blog';
+import Blog from 'sections/gallery';
 
 export default function IndexPage() {
   return (

src/sections/why-us.js → src/sections/about-us.js

@@ -2,6 +2,7 @@
 /** @jsx jsx */
 import { jsx, Box, Container, Heading, Text, Image } from 'theme-ui';
 import Tabs, { TabPane } from 'rc-tabs';
+import SectionHeading from 'components/section-heading';
 import { RiCheckboxCircleFill } from 'react-icons/ri';
 import { rgba } from 'polished';
 import { LearnMore } from 'components/link';
@@ -10,52 +11,79 @@ import tabImage1 from 'assets/images/tab-illustration-1.png';
 const data = [
   {
     id: 1,
-    tabTitle: 'Why you choose our service?',
-    title: `We will turn your idea in the successful business model framework`,
-    description: `Get your tests delivered at let home collect sample from the victory of the managements that supplies best design system guidelines ever.`,
-    moreLink: '#explore-more',
+    tabTitle: 'Visi & Misi',
+    title: `Visi`,
+    description: `Berdampak bagi masyarakat melalui SDM yang dimiliki, pelayanan prima & pengembangan usaha secara berkelanjutan dengan membangun perusahaan yang terpercaya & memiliki reputasi yang baik`,
+    title1: `Misi`,
+    // moreLink: '#explore-more',
     image: tabImage1,
-    list: [
-      'Medical and vision',
-      'Life insurance',
-      'HSAs and FSAs',
-      'Commuter benefits',
+    list1: [
+      '1. Melayani 21,7 juta pelanggan di tahun 2022',
     ],
-  },
-  {
-    id: 2,
-    tabTitle: 'What’s our business promise?',
-    title: `We will turn your idea in the successful business model framework`,
-    description: `Get your tests delivered at let home collect sample from the victory of the managements that supplies best design system guidelines ever.`,
-    moreLink: '#explore-more',
-    image: tabImage1,
-    list: [
-      'Medical and vision',
-      'Life insurance',
-      'HSAs and FSAs',
-      'Commuter benefits',
+    list2: [
+      '2. Mengembangkan pemimpin yang sukses',
     ],
-  },
-  {
-    id: 3,
-    tabTitle: 'What’s our role model plan?',
-    title: `We will turn your idea in the successful business model framework`,
-    description: `Get your tests delivered at let home collect sample from the victory of the managements that supplies best design system guidelines ever.`,
-    moreLink: '#explore-more',
-    image: tabImage1,
-    list: [
-      'Medical and vision',
-      'Life insurance',
-      'HSAs and FSAs',
-      'Commuter benefits',
+    list3: [
+      '3. Mengelola proses administrasi yang simple & excellent',
+    ],
+    list4: [
+      '4. Mendukung continuous improvement',
     ],
   },
+  // {
+  //   id: 2,
+  //   tabTitle: 'Sejarah Perusahaan',
+  //   title: `We will turn your idea in the successful business model framework`,
+  //   description: `Get your tests delivered at let home collect sample from the victory of the managements that supplies best design system guidelines ever.`,
+  //   moreLink: '#explore-more',
+  //   image: tabImage1,
+  //   list: [
+  //     'Medical and vision',
+  //     'Life insurance',
+  //     'HSAs and FSAs',
+  //     'Commuter benefits',
+  //   ],
+  // },
+  // {
+  //   id: 3,
+  //   tabTitle: 'Profile Perusahaan',
+  //   title: `We will turn your idea in the successful business model framework`,
+  //   description: `Get your tests delivered at let home collect sample from the victory of the managements that supplies best design system guidelines ever.`,
+  //   moreLink: '#explore-more',
+  //   image: tabImage1,
+  //   list: [
+  //     'Medical and vision',
+  //     'Life insurance',
+  //     'HSAs and FSAs',
+  //     'Commuter benefits',
+  //   ],
+  // },
+  // {
+  //   id: 4,
+  //   tabTitle: 'Struktur Perusahaan',
+  //   title: `We will turn your idea in the successful business model framework`,
+  //   title1: `We will turn your idea in the successful business model framework`,
+  //   description: `Get your tests delivered at let home collect sample from the victory of the managements that supplies best design system guidelines ever.`,
+  //   moreLink: '#explore-more',
+  //   image: tabImage1,
+  //   list: [
+  //     'Medical and vision',
+  //     'Life insurance',
+  //     'HSAs and FSAs',
+  //     'Commuter benefits',
+  //   ],
+  // },
+
 ];
 
 const WhyUs = () => {
   return (
     <Box as="section" id="why-us" sx={styles.section}>
       <Container>
+        <SectionHeading
+          sx={styles.heading}
+          title="Thamrin Group Profile"
+        />
         <Tabs sx={styles.tabs} animated={{ tabPane: true }}>
           {data?.map((item) => (
             <TabPane
@@ -66,22 +94,23 @@ const WhyUs = () => {
                 <Heading>{item.title}</Heading>
                 <Text as="p" sx={styles.description}>
                   {item.description}
+                </Text><br></br>
+                <Heading>{item.title1}</Heading>
+                <Text as="p" sx={styles.description}>
+                  {item.list1}
+                </Text>
+                <Text as="p" sx={styles.description}>
+                  {item.list2}
+                </Text>
+                <Text as="p" sx={styles.description}>
+                  {item.list3}
+                </Text>
+                <Text as="p" sx={styles.description}>
+                  {item.list4}
                 </Text>
-                <Box sx={styles.list}>
-                  {item.list.map((item, i) => (
-                    <Box key={i} className="list-item">
-                      <RiCheckboxCircleFill
-                        color="#3FDBB1"
-                        size="20px"
-                        sx={{ mr: 2 }}
-                      />
-                      <span>{item}</span>
-                    </Box>
-                  ))}
-                </Box>
-                <Box sx={styles.learnMore}>
+                {/* <Box sx={styles.learnMore}>
                   <LearnMore path={item.moreLink} label="Explore more" />
-                </Box>
+                </Box> */}
               </Box>
               <Box sx={styles.illustration}>
                 <Image src={item.image} alt="illustration" />

src/sections/blog.js

@@ -1,87 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { jsx, Box, Container } from 'theme-ui';
-import Masonry from 'react-masonry-component';
-import SectionHeading from 'components/section-heading';
-import BlogPost from 'components/cards/blog-post';
-import thumb1 from 'assets/images/blog/1.png';
-import thumb2 from 'assets/images/blog/2.png';
-import thumb3 from 'assets/images/blog/3.png';
-import thumb4 from 'assets/images/blog/4.png';
-
-const data = [
-  {
-    id: 1,
-    slug: '#how-to',
-    thumbnail: thumb1,
-    showDescription: true,
-    title: `How to work with prototype design with adobe xd featuring tools`,
-    description: `The 2019 Innovation by Design Awards honor the designers and businesses solving the problems of today and tomorrow. It is one of the most sought-after design`,
-  },
-  {
-    id: 2,
-    slug: '#how-to',
-    thumbnail: null,
-    showDescription: false,
-    title: `Anti bias receives honorable gift mention at Fast Company’s most Innovation by Design Awards`,
-    description: `The 2019 Innovation by Design Awards honor the designers and businesses solving the problems of today and tomorrow. It is one of the most sought-after design`,
-  },
-  {
-    id: 3,
-    slug: '#how-to',
-    thumbnail: thumb3,
-    showDescription: false,
-    title: `Multiple task wireframing with team management perform better`,
-    description: `The 2019 Innovation by Design Awards honor the designers and businesses solving the problems of today and tomorrow. It is one of the most sought-after design`,
-  },
-  {
-    id: 4,
-    slug: '#how-to',
-    thumbnail: thumb2,
-    showDescription: true,
-    title: `Multiple art board prototype with Figma`,
-    description: `Beyond launched anti bias, a Chrome extension that replaces LinkedIn profile photos`,
-  },
-  {
-    id: 5,
-    slug: '#how-to',
-    thumbnail: thumb4,
-    showDescription: false,
-    title: `Team presentation with latest user interface & experience reach more`,
-    description: `The 2019 Innovation by Design Awards honor the designers and businesses solving the problems of today and tomorrow. It is one of the most sought-after design`,
-  },
-];
-
-const masonryOptions = { originTop: true };
-
-const Blog = () => {
-  return (
-    <Box as="section" id="blog" sx={styles.section}>
-      <Container>
-        <SectionHeading
-          sx={styles.heading}
-          title="Popular blog post we update everyday"
-          description="Focus only on the meaning, we take care of the design. As soon as the meeting end you can export in one click."
-        />
-        <Masonry options={masonryOptions} sx={styles.postContainer}>
-          {data?.map((post) => (
-            <BlogPost key={post.id} post={post} />
-          ))}
-        </Masonry>
-      </Container>
-    </Box>
-  );
-};
-
-export default Blog;
-
-const styles = {
-  section: {
-    pt: [8, null, null, 9, null, 11],
-    pb: [8, null, null, 9, null, 11],
-    position: 'relative',
-  },
-  heading: {
-    mb: [6, 6, 7, 11],
-  },
-};

src/sections/business-partner.js

@@ -2,25 +2,25 @@
 /** @jsx jsx */
 import { jsx, Box, Container, Image, Text } from 'theme-ui';
 import SectionHeading from 'components/section-heading';
-import Tabs, { TabPane } from 'rc-tabs';
 import { rgba } from 'polished';
 import quote from 'assets/images/icons/quote.png';
 import yamaha from 'assets/images/logos/yamaha.png';
 import suzuki from 'assets/images/logos/suzuki.png';
-import hino from 'assets/images/logos/hino.png';
 import mercedes from 'assets/images/logos/mercedes.png';
-import dribbble from 'assets/images/logos/dribbble.png';
-import React from 'react';
+import hino from 'assets/images/logos/hino.png';
+import honda from 'assets/images/logos/honda.png';
+import pim from 'assets/images/logos/pim.png';
+import emilia from 'assets/images/logos/emilia.png';
+import bpr from 'assets/images/logos/bpr.png';
+import snapy from 'assets/images/logos/snapy.png';
+import homes from 'assets/images/logos/homes.png';
+import regis from 'assets/images/logos/regis.png';
+import citra from 'assets/images/logos/cmas.png';
 import { makeStyles } from '@material-ui/core/styles';
-import Card from '@material-ui/core/Card';
-import CardActionArea from '@material-ui/core/CardActionArea';
-import CardActions from '@material-ui/core/CardActions';
-import CardContent from '@material-ui/core/CardContent';
-import CardMedia from '@material-ui/core/CardMedia';
+import Grid from '@material-ui/core/Grid';
 import Button from '@material-ui/core/Button';
-import Typography from '@material-ui/core/Typography';
+import Icon from '@material-ui/core/Icon';
 import Paper from '@material-ui/core/Paper';
-import Grid from '@material-ui/core/Grid';
 
 const useStyles = makeStyles({
   root: {
@@ -36,9 +36,250 @@ const Testimonials = () => {
       <Container>
         <SectionHeading
           sx={styles.heading}
-          title="Our Business Partner"
+          title="Thamrin Group Business Partner"
         />
-        
+        <Grid container spacing={3}>
+          <Grid item xs={12} sm={6} style={{padding:"50px"}}>
+            <div align="center"><br></br><br></br>
+              <Image src={yamaha}/>
+            </div>
+          </Grid>
+          <Grid item xs={12} sm={6} style={{padding:"50px"}}>
+            <div align="center">
+              <Image src={suzuki} style={{height:"200px"}}/>
+            </div>
+          </Grid>
+          <Grid container spacing={3}>
+            <Grid item xs={12} sm={6}>
+              <div align="center">
+                <Button
+                  variant="contained"
+                  color="primary"
+                  size="large"
+                  className={classes.button}
+                  href="https://yamaha.thamrin.co.id/"
+                  target="_blank"
+                >
+                  Open For More Information
+                </Button>
+              </div>
+            </Grid>
+            <Grid item xs={12} sm={6}>
+              <div align="center">
+                <Button
+                  variant="contained"
+                  color="primary"
+                  size="large"
+                  className={classes.button}
+                  href="https://yamaha.thamrin.co.id/"
+                  target="_blank"
+                >
+                  Open For More Information
+                </Button>
+              </div>
+            </Grid>
+          </Grid>
+          <Grid item xs={12} sm={6} style={{padding:"50px"}}>
+            <div align="center"><br></br><br></br>
+              <Image src={mercedes}/>
+            </div>
+          </Grid>
+          <Grid item xs={12} sm={6} style={{padding:"50px"}}>
+            <div align="center">
+              <Image src={hino} style={{height:"200px"}}/>
+            </div>
+          </Grid>
+          <Grid container spacing={3}>
+            <Grid item xs={12} sm={6}>
+              <div align="center">
+                <Button
+                  variant="contained"
+                  color="primary"
+                  size="large"
+                  className={classes.button}
+                  href="https://www.thamrin.mercedes-benz.co.id/en/desktop/passenger-cars.html"
+                  target="_blank"
+                >
+                  Open For More Information
+                </Button>
+              </div>
+            </Grid>
+            <Grid item xs={12} sm={6}>
+              <div align="center">
+                <Button
+                  variant="contained"
+                  color="primary"
+                  size="large"
+                  className={classes.button}
+                  href="https://www.instagram.com/hinoclm/"
+                  target="_blank"
+                >
+                  Open For More Information
+                </Button>
+              </div>
+            </Grid>
+          </Grid>
+          <Grid item xs={12} sm={6} style={{padding:"50px"}}>
+            <div align="center"><br></br><br></br>
+              <Image src={homes}/>
+            </div>
+          </Grid>
+          <Grid item xs={12} sm={6} style={{padding:"50px"}}>
+            <div align="center">
+              <Image src={honda} style={{height:"200px"}}/>
+            </div>
+          </Grid>
+          <Grid container spacing={3}>
+            <Grid item xs={12} sm={6}>
+              <div align="center">
+                <Button
+                  variant="contained"
+                  color="primary"
+                  size="large"
+                  className={classes.button}
+                  href="http://homes.thamrin.xyz/"
+                  target="_blank"
+                >
+                  Open For More Information
+                </Button>
+              </div>
+            </Grid>
+            <Grid item xs={12} sm={6}>
+              <div align="center">
+                <Button
+                  variant="contained"
+                  color="primary"
+                  size="large"
+                  className={classes.button}
+                  href="https://www.instagram.com/jambi.honda/"
+                  target="_blank"
+                >
+                  Open For More Information
+                </Button>
+              </div>
+            </Grid>
+          </Grid>
+          <Grid item xs={12} sm={6} style={{padding:"50px"}}>
+            <div align="center"><br></br><br></br>
+              <Image src={pim}/>
+            </div>
+          </Grid>
+          <Grid item xs={12} sm={6} style={{padding:"50px"}}>
+            <div align="center"><br></br><br></br>
+              <Image src={emilia}/>
+            </div>
+          </Grid>
+          <Grid container spacing={3}>
+            <Grid item xs={12} sm={6}>
+              <div align="center">
+                <Button
+                  variant="contained"
+                  color="primary"
+                  size="large"
+                  className={classes.button}
+                  href="https://www.instagram.com/palembangindahmall/"
+                  target="_blank"
+                >
+                  Open For More Information
+                </Button>
+              </div>
+            </Grid>
+            <Grid item xs={12} sm={6}>
+              <div align="center">
+                <Button
+                  variant="contained"
+                  color="primary"
+                  size="large"
+                  className={classes.button}
+                  href="http://www.emilia-hotel.com/"
+                  target="_blank"
+                >
+                  Open For More Information
+                </Button>
+              </div>
+            </Grid>
+          </Grid>
+          <Grid item xs={12} sm={6} style={{padding:"50px"}}>
+            <div align="center"><br></br><br></br>
+              <Image src={bpr}/>
+            </div>
+          </Grid>
+          <Grid item xs={12} sm={6} style={{padding:"50px"}}>
+            <div align="center"><br></br>
+              <Image src={snapy}/>
+            </div>
+          </Grid>
+          <Grid container spacing={3}>
+            <Grid item xs={12} sm={6}>
+              <div align="center">
+                <Button
+                  variant="contained"
+                  color="primary"
+                  size="large"
+                  className={classes.button}
+                  href="http://bprberkatsejati.com/"
+                  target="_blank"
+                >
+                  Open For More Information
+                </Button>
+              </div>
+            </Grid>
+            <Grid item xs={12} sm={6}>
+              <div align="center">
+                <Button
+                  variant="contained"
+                  color="primary"
+                  size="large"
+                  className={classes.button}
+                  href="https://yamaha.thamrin.co.id/"
+                  target="_blank"
+                >
+                  Open For More Information
+                </Button>
+              </div>
+            </Grid>
+          </Grid>
+          <Grid item xs={12} sm={6} style={{padding:"50px"}}>
+            <div align="center"><br></br>
+              <Image src={regis}/>
+            </div>
+          </Grid>
+          <Grid item xs={12} sm={6} style={{padding:"50px"}}>
+            <div align="center"><br></br><br></br><br></br><br></br>
+              <Image src={citra}/>
+            </div>
+          </Grid>
+          <Grid container spacing={3}>
+            <Grid item xs={12} sm={6}>
+              <div align="center">
+                <Button
+                  variant="contained"
+                  color="primary"
+                  size="large"
+                  className={classes.button}
+                  href="https://yamaha.thamrin.co.id/"
+                  target="_blank"
+                >
+                  Open For More Information
+                </Button>
+              </div>
+            </Grid>
+            <Grid item xs={12} sm={6}>
+              <div align="center">
+                <Button
+                  variant="contained"
+                  color="primary"
+                  size="large"
+                  className={classes.button}
+                  href="https://yamaha.thamrin.co.id/"
+                  target="_blank"
+                >
+                  Open For More Information
+                </Button>
+              </div>
+            </Grid>
+          </Grid>
+        </Grid>
       </Container>
     </Box>
   );
@@ -121,4 +362,4 @@ const styles = {
       borderRadius: 5,
     },
   },
-};
+};

src/sections/gallery.js

@@ -0,0 +1,155 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx, Box, Container } from 'theme-ui';
+import Masonry from 'react-masonry-component';
+import SectionHeading from 'components/section-heading';
+import BlogPost from 'components/cards/blog-post';
+import thumb1 from 'assets/images/blog/1.jpg';
+import thumb2 from 'assets/images/blog/2.jpg';
+import thumb3 from 'assets/images/blog/3.jpg';
+import thumb4 from 'assets/images/blog/4.jpg';
+import thumb5 from 'assets/images/blog/5.jpg';
+import thumb6 from 'assets/images/blog/6.jpg';
+import thumb7 from 'assets/images/blog/7.jpg';
+import thumb8 from 'assets/images/blog/8.jpg';
+import thumb9 from 'assets/images/blog/9.jpg';
+
+const data = [
+  {
+    id: 1,
+    slug: '#how-to',
+    thumbnail: thumb1,
+    showDescription: true,
+    // title: `How to work with prototype design with adobe xd featuring tools`,
+    // description: `The 2019 Innovation by Design Awards honor the designers and businesses solving the problems of today and tomorrow. It is one of the most sought-after design`,
+  },
+  {
+    id: 1,
+    slug: '#how-to',
+    thumbnail: thumb2,
+    showDescription: true,
+    // title: `How to work with prototype design with adobe xd featuring tools`,
+    // description: `The 2019 Innovation by Design Awards honor the designers and businesses solving the problems of today and tomorrow. It is one of the most sought-after design`,
+  },
+  {
+    id: 1,
+    slug: '#how-to',
+    thumbnail: thumb3,
+    showDescription: true,
+    // title: `How to work with prototype design with adobe xd featuring tools`,
+    // description: `The 2019 Innovation by Design Awards honor the designers and businesses solving the problems of today and tomorrow. It is one of the most sought-after design`,
+  },
+  {
+    id: 1,
+    slug: '#how-to',
+    thumbnail: thumb4,
+    showDescription: true,
+    // title: `How to work with prototype design with adobe xd featuring tools`,
+    // description: `The 2019 Innovation by Design Awards honor the designers and businesses solving the problems of today and tomorrow. It is one of the most sought-after design`,
+  },
+  {
+    id: 1,
+    slug: '#how-to',
+    thumbnail: thumb5,
+    showDescription: true,
+    // title: `How to work with prototype design with adobe xd featuring tools`,
+    // description: `The 2019 Innovation by Design Awards honor the designers and businesses solving the problems of today and tomorrow. It is one of the most sought-after design`,
+  },
+  {
+    id: 1,
+    slug: '#how-to',
+    thumbnail: thumb6,
+    showDescription: true,
+    // title: `How to work with prototype design with adobe xd featuring tools`,
+    // description: `The 2019 Innovation by Design Awards honor the designers and businesses solving the problems of today and tomorrow. It is one of the most sought-after design`,
+  },
+  {
+    id: 1,
+    slug: '#how-to',
+    thumbnail: thumb7,
+    showDescription: true,
+    // title: `How to work with prototype design with adobe xd featuring tools`,
+    // description: `The 2019 Innovation by Design Awards honor the designers and businesses solving the problems of today and tomorrow. It is one of the most sought-after design`,
+  },
+  {
+    id: 1,
+    slug: '#how-to',
+    thumbnail: thumb8,
+    showDescription: true,
+    // title: `How to work with prototype design with adobe xd featuring tools`,
+    // description: `The 2019 Innovation by Design Awards honor the designers and businesses solving the problems of today and tomorrow. It is one of the most sought-after design`,
+  },
+  {
+    id: 1,
+    slug: '#how-to',
+    thumbnail: thumb9,
+    showDescription: true,
+    // title: `How to work with prototype design with adobe xd featuring tools`,
+    // description: `The 2019 Innovation by Design Awards honor the designers and businesses solving the problems of today and tomorrow. It is one of the most sought-after design`,
+  },
+  // {
+  //   id: 2,
+  //   slug: '#how-to',
+  //   thumbnail: null,
+  //   showDescription: false,
+  //   title: `Anti bias receives honorable gift mention at Fast Company’s most Innovation by Design Awards`,
+  //   description: `The 2019 Innovation by Design Awards honor the designers and businesses solving the problems of today and tomorrow. It is one of the most sought-after design`,
+  // },
+  // {
+  //   id: 3,
+  //   slug: '#how-to',
+  //   thumbnail: thumb3,
+  //   showDescription: false,
+  //   title: `Multiple task wireframing with team management perform better`,
+  //   description: `The 2019 Innovation by Design Awards honor the designers and businesses solving the problems of today and tomorrow. It is one of the most sought-after design`,
+  // },
+  // {
+  //   id: 4,
+  //   slug: '#how-to',
+  //   thumbnail: thumb2,
+  //   showDescription: true,
+  //   title: `Multiple art board prototype with Figma`,
+  //   description: `Beyond launched anti bias, a Chrome extension that replaces LinkedIn profile photos`,
+  // },
+  // {
+  //   id: 5,
+  //   slug: '#how-to',
+  //   thumbnail: thumb4,
+  //   showDescription: false,
+  //   title: `Team presentation with latest user interface & experience reach more`,
+  //   description: `The 2019 Innovation by Design Awards honor the designers and businesses solving the problems of today and tomorrow. It is one of the most sought-after design`,
+  // },
+];
+
+const masonryOptions = { originTop: true };
+
+const Blog = () => {
+  return (
+    <Box as="section" id="blog" sx={styles.section}>
+      <Container>
+        <SectionHeading
+          sx={styles.heading}
+          title="Thamrin Group Gallery"
+        />
+        <Masonry options={masonryOptions} sx={styles.postContainer}>
+          {data?.map((post) => (
+            <BlogPost key={post.id} post={post} />
+          ))}
+        </Masonry>
+      </Container>
+    </Box>
+  );
+};
+
+export default Blog;
+
+const styles = {
+  section: {
+    pt: [8, null, null, 9, null, 11],
+    pb: [8, null, null, 9, null, 11],
+    position: 'relative',
+  },
+  heading: {
+    mb: [6, 6, 7, 11],
+  },
+};

yarn.lock

@@ -895,6 +895,11 @@ arrify@^1.0.1:
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
   integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=
 
+asap@~2.0.3:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
+  integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
+
 asn1.js@^5.2.0:
   version "5.4.1"
   resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-5.4.1.tgz#11a980b84ebb91781ce35b0fdc2ee294e3783f07"
@@ -1362,6 +1367,11 @@ chalk@^4.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+change-emitter@^0.1.2:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/change-emitter/-/change-emitter-0.1.6.tgz#e8b2fe3d7f1ab7d69a32199aff91ea6931409515"
+  integrity sha1-6LL+PX8at9aaMhma/5HqaTFAlRU=
+
 chokidar@3.5.1:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a"
@@ -1520,6 +1530,11 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
+core-js@^1.0.0:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
+  integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=
+
 core-js@^3.6.5:
   version "3.9.1"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.9.1.tgz#cec8de593db8eb2a85ffb0dbdeb312cb6e5460ae"
@@ -2033,7 +2048,7 @@ emojis-list@^3.0.0:
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
   integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
 
-encoding@0.1.13:
+encoding@0.1.13, encoding@^0.1.11:
   version "0.1.13"
   resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.13.tgz#56574afdd791f54a8e9b2785c0582a2d26210fa9"
   integrity sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==
@@ -2419,6 +2434,19 @@ fast-levenshtein@^2.0.6:
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
 
+fbjs@^0.8.1:
+  version "0.8.17"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
+  integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.18"
+
 fd-slicer@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.1.0.tgz#25c7c89cb1f9077f8891bbe61d8f390eae256f1e"
@@ -2925,6 +2953,11 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
+hoist-non-react-statics@^2.3.1:
+  version "2.5.5"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
+  integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
+
 hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
@@ -3360,7 +3393,7 @@ is-retry-allowed@^1.0.0, is-retry-allowed@^1.1.0:
   resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz#d778488bd0a4666a3be8a1482b9f2baafedea8b4"
   integrity sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg==
 
-is-stream@^1.0.0, is-stream@^1.1.0:
+is-stream@^1.0.0, is-stream@^1.0.1, is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
   integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
@@ -3432,6 +3465,14 @@ isobject@^3.0.0, isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
+isomorphic-fetch@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
+  integrity sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=
+  dependencies:
+    node-fetch "^1.0.1"
+    whatwg-fetch ">=0.10.0"
+
 isurl@^1.0.0-alpha5:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isurl/-/isurl-1.0.0.tgz#b27f4f49f3cdaa3ea44a0a5b7f3462e6edc39d67"
@@ -3693,7 +3734,7 @@ longest@^1.0.0:
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
   integrity sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=
 
-loose-envify@^1.1.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -3789,6 +3830,13 @@ matcher@^4.0.0:
   dependencies:
     escape-string-regexp "^4.0.0"
 
+material-ui-icons@^1.0.0-beta.36:
+  version "1.0.0-beta.36"
+  resolved "https://registry.yarnpkg.com/material-ui-icons/-/material-ui-icons-1.0.0-beta.36.tgz#86390a61f4c83f718eaba77ccce575834f2cf2a8"
+  integrity sha512-7rS6b2EV5QXCB/gTi/Ac9Wbxd+h9EZv1Td3rLLJe4IER8mVHRgdqZccB3EsjW2DrJ7opdY1+8X3/vyrS7CQNpg==
+  dependencies:
+    recompose "^0.26.0"
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -4076,6 +4124,14 @@ node-fetch@2.6.1:
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
   integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
 
+node-fetch@^1.0.1:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
+  integrity sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==
+  dependencies:
+    encoding "^0.1.11"
+    is-stream "^1.0.1"
+
 node-html-parser@1.4.9:
   version "1.4.9"
   resolved "https://registry.yarnpkg.com/node-html-parser/-/node-html-parser-1.4.9.tgz#3c8f6cac46479fae5800725edb532e9ae8fd816c"
@@ -4657,6 +4713,13 @@ progress@^2.0.0:
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 
+promise@^7.1.1:
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
+  integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
+  dependencies:
+    asap "~2.0.3"
+
 prop-types@15.7.2, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
@@ -4998,6 +5061,16 @@ readdirp@~3.5.0:
   dependencies:
     picomatch "^2.2.1"
 
+recompose@^0.26.0:
+  version "0.26.0"
+  resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.26.0.tgz#9babff039cb72ba5bd17366d55d7232fbdfb2d30"
+  integrity sha512-KwOu6ztO0mN5vy3+zDcc45lgnaUoaQse/a5yLVqtzTK13czSWnFGmXbQVmnoMgDkI5POd1EwIKSbjU1V7xdZog==
+  dependencies:
+    change-emitter "^0.1.2"
+    fbjs "^0.8.1"
+    hoist-non-react-statics "^2.3.1"
+    symbol-observable "^1.0.4"
+
 redent@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"
@@ -5197,7 +5270,7 @@ set-value@^2.0.0, set-value@^2.0.1:
     is-plain-object "^2.0.3"
     split-string "^3.0.1"
 
-setimmediate@^1.0.4:
+setimmediate@^1.0.4, setimmediate@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
   integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
@@ -5719,7 +5792,7 @@ swiper@^6.4.5:
     dom7 "^3.0.0"
     ssr-window "^3.0.0"
 
-symbol-observable@1.2.0:
+symbol-observable@1.2.0, symbol-observable@^1.0.4:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
   integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
@@ -5916,6 +5989,11 @@ type-fest@^0.8.1:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
   integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
 
+ua-parser-js@^0.7.18:
+  version "0.7.26"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.26.tgz#b3731860e241419abd5b542b1a0881070d92e0ce"
+  integrity sha512-VwIvGlFNmpKbjzRt51jpbbFTrKIEgGHxIwA8Y69K1Bqc6bTIV7TaGGABOkghSFQWsLmcRB4drGvpfv9z2szqoQ==
+
 unbox-primitive@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471"
@@ -6099,6 +6177,11 @@ webidl-conversions@^4.0.2:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
   integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
 
+whatwg-fetch@>=0.10.0:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz#dced24f37f2624ed0281725d51d0e2e3fe677f8c"
+  integrity sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==
+
 whatwg-url@^7.0.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-7.1.0.tgz#c2c492f1eca612988efd3d2266be1b9fc6170d06"