Actions

2024-10-22 22:44:24 +03:00
parent d510189905
commit 9a138e53a9
39 changed files with 1050 additions and 19941 deletions
@@ -2,8 +2,11 @@ import * as React from 'react';

 import '../../styles/styles.scss';

-function Badge({tag, isSource}) {
-    return <div className={`badge ${isSource && 'badge--source'}`}>{tag}</div>;
+function Badge({tag, tagObj, isSource, onRemove}) {
+    return <div className={`badge ${isSource && 'badge--source'} ${tagObj && 'badge--filter'}`}>
+        {tag || tagObj.label}
+        {onRemove ? <span onClick={(() => onRemove(tag || tagObj))} /> : null}
+    </div>;
 }

 export default Badge;
@@ -1,12 +1,12 @@
 import * as React from 'react';
 import {Link} from 'gatsby';

-function Breadcrumbs({location, label}) {
+function Breadcrumbs({location}) {
    const paths = location.split('/').filter((i) => i);
    const getBreadcrumbTitle = (name) =>
        name
-            .replace('-', ' ')
-            .replace(/(^\w{1})|(\s+\w{1})/g, (letter) => letter.toUpperCase());
+            .replaceAll('-', ' ')
+            .replaceAll(/(^\w{1})|(\s+\w{1})/g, (letter) => letter.toUpperCase());
    return (
        <nav className="breadcrumb" aria-label="Breadcrumb">
            <ol className="breadcrumb__list">
@@ -26,7 +26,7 @@ function Breadcrumbs({location, label}) {
                                <span className="breadcrumb__separator" aria-hidden="true"/>
                            </>
                        ) : (
-                            <div className="breadcrumb__link">{label}</div>
+                            <div className="breadcrumb__link">{getBreadcrumbTitle(path)}</div>
                        )}
                    </li>
                ))}
@@ -0,0 +1,53 @@
+import * as React from 'react';
+import SelectBox from "./SelectBox";
+import {FILTER_TYPES} from "./constants";
+import Badge from "../Badge/Badge";
+
+const _ = require("lodash");
+
+
+function Filter() {
+    const [tags, setTags] = React.useState([]);
+
+    const updateTags = e => {
+        e.every(i => i.value)
+            ? setTags(_.uniqBy([...tags.filter(tag => tag.group !== e[0].group), ...e], 'value'))
+            : setTags(tags.filter(tag => tag.group !== e[0].group))
+    }
+    const removeItem = (e) => {
+        setTags(tags.filter(tag => tag.value !== e.value));
+    }
+
+    const clearFilters = () => {
+        setTags([]);
+    }
+
+    return <div className="filter">
+        <div className="filter__list">
+            {FILTER_TYPES.map((filter, i) => {
+                return <SelectBox
+                    key={i}
+                    options={filter.values}
+                    label={filter.group}
+                    setValuesOutside={updateTags}
+                    tags={tags}
+                />
+            })}
+            <div className="filter__input-wrapper">
+                <input
+                    type="text"
+                    className="filter__input"
+                    placeholder="Search"
+                />
+            </div>
+        </div>
+        {tags.length
+            ? <div className="filter__tags">
+                {tags.map((tag, i) => <Badge tagObj={tag} onRemove={removeItem} key={i}/>)}
+                <span className="filter__tags-close" onClick={clearFilters}>Clear All</span>
+            </div>
+            : null}
+    </div>;
+}
+
+export default Filter;
@@ -0,0 +1,75 @@
+import * as React from 'react';
+import {useEffect} from 'react';
+import Select from "react-dropdown-select";
+
+function SelectBox({options, label = "Select", setValuesOutside, tags}) {
+    const [values, setValues] = React.useState([]);
+    const [opts, setOpts] = React.useState([]);
+
+    useEffect(() => {
+        setOpts(options.map(opt => ({...opt, group: label})));
+    }, [options, label]);
+
+    useEffect(() => {
+        setValues(tags.filter(tag => tag.group === label));
+    }, [tags, label]);
+
+    const customContentRenderer = ({state}) => {
+        return <div
+            className="selectbox__content">{label} {state.values.length ? `(${state.values.length})` : null}</div>
+    }
+
+    const customDropdownRenderer = (s) => {
+        const {state, methods, props} = s;
+        const regexp = new RegExp(state.search, 'i');
+
+        return <div className="selectbox__dropdown">
+            {options.length > 6
+                ? <input type="text"
+                         className="selectbox__input"
+                         value={state.search}
+                         onChange={methods.setSearch}
+                         placeholder="Search"
+                />
+                : null}
+            <div className="selectbox__options">
+                {opts
+                    .filter((item) => regexp.test(item[props.searchBy] || item[props.labelField]))
+                    .map((option) => {
+                        return (
+                            <div
+                                className="selectbox__option"
+                                key={option.value}
+                                onClick={option.disabled ? null : () => methods.addItem(option)}>
+                                <input
+                                    type="checkbox"
+                                    className="selectbox__dropdown-checkbox checkbox"
+                                    onChange={() => state.values.indexOf(option) !== -1 ? methods.addItem(option) : methods.removeItem(null, option, false)}
+                                    checked={state.values.indexOf(option) !== -1}
+                                />
+                                <label className="selectbox__dropdown-label">{option.label}</label>
+                            </div>
+                        );
+                    })}
+                {opts.filter((item) => regexp.test(item[props.searchBy] || item[props.labelField])).length
+                    ? null
+                    : <span className="selectbox__dropdown-label">No Data Found</span>
+                }
+            </div>
+        </div>
+    }
+
+    return <Select
+        className={`selectbox ${values.length ? "selectbox--active" : null}`}
+        options={options}
+        multi={true}
+        values={values}
+        onChange={(values) => {
+            setValuesOutside(values.length ? values.map(item => ({...item, group: label})) : [{group: label}])
+        }}
+        contentRenderer={customContentRenderer}
+        dropdownRenderer={customDropdownRenderer}
+    />
+}
+
+export default SelectBox;
@@ -0,0 +1,193 @@
+export const FILTER_TYPES = [
+    {
+        group: "Type",
+        values: [
+            {
+                value: "Blazers",
+                label: 'Blazers'
+            },
+            {
+                value: 'Blouses',
+                label: 'Blouses'
+            },
+            {
+                value: 'Coats',
+                label: 'Coats'
+            },
+            {
+                value: 'Dresses',
+                label: 'Dresses'
+            },
+            {
+                value: 'Jackets',
+                label: 'Jackets'
+            },
+            {
+                value: 'Jeans',
+                label: 'Jeans'
+            },
+            {
+                value: 'Jumpers & Knitwear',
+                label: 'Jumpers & Knitwear'
+            },
+            {
+                value: 'Jumpsuits',
+                label: 'Jumpsuits'
+            },
+            {
+                value: 'Skirts',
+                label: 'Skirts'
+            },
+            {
+                value: 'Shirts & Topics',
+                label: 'Shirts & Topics'
+            },
+            {
+                value: 'Shorts & Bermudas',
+                label: 'Shorts & Bermudas'
+            },
+            {
+                value: 'Stockings & Tights',
+                label: 'Stockings & Tights'
+            },
+            {
+                value: 'Sweaters',
+                label: 'Sweaters'
+            },
+            {
+                value: 'Trouser Suits & Costumes',
+                label: 'Trouser Suits & Costumes'
+            },
+            {
+                value: 'Trousers',
+                label: 'Trousers'
+            },
+            {
+                value: 'Underwear & Pyjamas',
+                label: 'Underwear & Pyjamas'
+            },
+            {
+                value: 'Waistcoats',
+                label: 'Waistcoats'
+            },
+            {
+                value: 'Maternity Wear',
+                label: 'Maternity Wear'
+            },
+            {
+                value: 'Sportswear',
+                label: 'Sportswear'
+            },
+            {
+                value: 'Home & Loungewear',
+                label: 'Home & Loungewear'
+            }
+        ]
+    },
+    {
+        group: "Customer",
+        values: [
+            {
+                value: 'Gen Alpha',
+                label: 'Gen Alpha'
+            },
+            {
+                value: 'Gen Z',
+                label: 'Gen Z'
+            },
+            {
+                value: 'Generation X',
+                label: 'Generation X'
+            },
+            {
+                value: 'Millennials',
+                label: 'Millennials'
+            }
+        ]
+    },
+    {
+        group: "Market",
+        values: [
+            {
+                value: 'Worldwide',
+                label: 'Worldwide'
+            },
+            {
+                value: 'Europe',
+                label: 'Europe'
+            },
+            {
+                value: 'Germany',
+                label: 'Germany'
+            }
+        ]
+    },
+    {
+        group: "Fit",
+        values: [
+            {
+                value: "Fit",
+                label: 'Fit'
+            }
+        ]
+    },
+    {
+        group: "Brand",
+        values: [
+            {
+                value: 'Brand',
+                label: 'Brand'
+            }
+        ]
+    },
+    {
+        group: "Fabric",
+        values: [
+            {
+                value: 'Cotton',
+                label: 'Cotton'
+            },
+            {
+                value: 'Silk',
+                label: 'Silk'
+            },
+            {
+                value: 'Wool',
+                label: 'Wool'
+            },
+            {
+                value: 'Polyester',
+                label: 'Polyester'
+            },
+            {
+                value: 'Denim',
+                label: 'Denim'
+            },
+            {
+                value: 'Linen',
+                label: 'Linen'
+            }
+        ]
+    },
+    {
+        group: "Season",
+        values: [
+            {
+                value: 'Spring',
+                label: 'Spring'
+            },
+            {
+                value: 'Summer',
+                label: 'Summer'
+            },
+            {
+                value: 'Winter',
+                label: 'Winter'
+            },
+            {
+                value: 'Autumn',
+                label: 'Autumn'
+            }
+        ]
+    }
+]
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import Breadcrumbs from "../Breadcrumbs/Breadcrumbs";
+import Profile from "../Profile/Profile";
+
+import '../../styles/styles.scss';
+
+function Layout({children, breafcrumbs = false}) {
+    return (
+        <main className="layout">
+            {breafcrumbs ?
+                <header className="header">
+                    <Breadcrumbs location={breafcrumbs.pathname}/>
+                    <Profile/>
+                </header>
+                : null}
+            {children}
+        </main>
+    );
+}
+
+export default Layout;
@@ -23,7 +23,7 @@ const ProductCard = ({product, images}) => {
    };

    return (
-        <div className="product-card m-t-48 m-b-48">
+        <div className="product-card m-b-48">
            <div className="product-card__slider">
                <Slider {...settings}>
                    {product.images.map((image, index) => (
@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+function Profile() {
+    return <div className="profile">Profile</div>
+}
+
+export default Profile;
@@ -41,46 +41,42 @@ const SocialMediaTooltips = ({product}) => {
            return {...socialMedia[key], type: key}
        })
        .sort((prev, current) => current.Social_Media_Influence - prev.Social_Media_Influence)
-        .map(smi => {
-            if (smi.found) {
-                return (<div className="tooltip__wrapper" key={smi.Social_Media_Influence + name}>
-                    <div
-                        className={`tooltip__confidence tooltip__confidence--${smi.Social_Media_Influence > SOCIAL_MEDIA_BREAKPOINTS[smi.type] ? "high" : "average"}`}
-                    >
-                        {smi.Social_Media_Influence}
-                    </div>
-                    <div className="tooltip__information"
-                         data-tooltip-id={`${name}-${smi.type}`}
-                    >
-                        i
-                    </div>
-                    <Tooltip className="tooltip"
-                             id={`${name}-${smi.type}`}
-                             style={{
-                                 fontSize: "12px",
-                                 padding: "32px",
-                                 opacity: 1,
-                                 background: "#F0F0F0",
-                                 color: "#484848",
-                                 zIndex: 9999
-                             }}
-                             place="right-end">
-                        <h3 className="tooltip__title">{smi.type}</h3>
-                        {SOCIAL_MEDIA_MATRIX[smi.type]
-                            .map(line => {
-                                return line ? (<div
-                                    className={`tooltip__data tooltip__data--${line}`}
-                                    key={line + name}>
-                                    <div>{line?.replaceAll("_", " ")} </div>
-                                    <div>
-                                        <b>{smi[line].toLocaleString()}{line?.includes("Relative") ? "%" : ""}</b>
-                                    </div>
-                                </div>) : <hr/>
-                            })}
-                    </Tooltip>
-                </div>);
-            }
-        });
+        .map((smi, i) => smi.found ? (<div className="tooltip__wrapper" key={smi.Social_Media_Influence + name + i}>
+            <div
+                className={`tooltip__confidence tooltip__confidence--${smi.Social_Media_Influence > SOCIAL_MEDIA_BREAKPOINTS[smi.type] ? "high" : "average"}`}
+            >
+                {smi.Social_Media_Influence}
+            </div>
+            <div className="tooltip__information"
+                 data-tooltip-id={`${name}-${smi.type}`}
+            >
+                i
+            </div>
+            <Tooltip className="tooltip"
+                     id={`${name}-${smi.type}`}
+                     style={{
+                         fontSize: "12px",
+                         padding: "32px",
+                         opacity: 1,
+                         background: "#F0F0F0",
+                         color: "#484848",
+                         zIndex: 9999
+                     }}
+                     place="right-end">
+                <h3 className="tooltip__title">{smi.type}</h3>
+                {SOCIAL_MEDIA_MATRIX[smi.type]
+                    .map((line, i) => {
+                        return line ? (<div
+                            className={`tooltip__data tooltip__data--${line}`}
+                            key={line + name + i}>
+                            <div>{line?.replaceAll("_", " ")} </div>
+                            <div>
+                                <b>{smi[line].toLocaleString()}{line?.includes("Relative") ? "%" : ""}</b>
+                            </div>
+                        </div>) : <hr/>
+                    })}
+            </Tooltip>
+        </div>) : null);
    return (
        <>
            {getTooltips()}</>
@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+function Tabs({tabs, activeTabIndex = 0, setActiveTabIndex = () => {}}) {
+    const [activeIndex, setActiveIndex] = React.useState(activeTabIndex);
+
+    const setActiveTab = (e) => {
+        setActiveIndex(e);
+        setActiveTabIndex(e);
+    }
+    return <nav className="tabs">
+        {tabs.map((tab, i) => <div
+            key={i+tab.title}
+            className={`tabs__item ${i === activeIndex ? "tabs__item--active" : null}`}
+            onClick={() => setActiveTab(i)}>{tab.title}</div>)}
+    </nav>;
+}
+
+export default Tabs;
@@ -1,115 +1,4 @@
 [
-  {
-    "name": "Casual Long Shirt",
-    "tags": "Casual, Long",
-    "description": "Effortlessly stylish and comfortable, these long shirts are perfect for everyday wear.  They've seen a surge in popularity on social media, with a remarkable 180% increase in reposts on Twitter and a 160% jump in comments on Instagram, making them a popular choice for fashion enthusiasts.",
-    "images": [
-      "4dd5074d31e63021470994c9265ab7cb.jpg",
-      "88e4101d3e4d2e1ddd2a5487a8df3e27.jpg",
-      "9656de311138c38dfe25970279fe26eb.jpg",
-      "65f5dc395334fe598a30dad84eef64e0.jpg",
-      "5521de8fdbef26afc7d8bb560a137401.webp"
-    ],
-    "sources": "aninebing, lindatol_, Fendi, PRADA, Fashionista.com, Vogue Magazine, Acne Studios",
-    "socialMedia": {
-      "Twitter": {
-        "found": true,
-        "Social Media Influence": 8.33,
-        "Tweet Views": 53316.0,
-        "Tweet Reposts": 232.0,
-        "Tweet Quotes": 11.0,
-        "Tweet Likes": 609.0,
-        "Tweet Bookmarks": 15.0,
-        "Tweet Views Relative to Average": -14,
-        "Tweet Reposts Relative to Average": 180,
-        "Tweet Quotes Relative to Average": -30,
-        "Tweet Likes Relative to Average": 88,
-        "Tweet Bookmarks Relative to Average": 1
-      },
-      "Instagram": {
-        "found": true,
-        "Social Media Influence": 12.77,
-        "Post Comments": 41.0,
-        "Post Likes": 6115.0,
-        "Post Comments Relative to Average": 160,
-        "Post Likes Relative to Average": 198
-      }
-    }
-  },
-  {
-    "name": "Striped Casual Shirt",
-    "tags": "Striped, Casual",
-    "description": "Effortlessly stylish and versatile, these striped casual shirts are a wardrobe staple.  With a 44% increase in views on Twitter and a 75% surge in likes on Instagram, these shirts are clearly a hit with fashion enthusiasts.",
-    "images": [
-      "52aad40ac9ffb17f83de18216af367d1.jpg",
-      "f671add5d3613a579b4dd50bb0733872.jpg",
-      "Hikigawa.webp",
-      "d9fd6326f813a8fa4819028dfeb047b7.jpg",
-      "FSLE-Oversized-Blue-Striped-Casual-Blouse-Shirt-Women-Streetwear-Elegant-Button-Up-Shirt-Female-Long-Sleeve.webp"
-    ],
-    "sources": "aninebing, carodaur, heir, lindatol_, rocky_barnes, Fendi, PRADA, Vogue Magazine, Fashionista.com, KENZO",
-    "socialMedia": {
-      "Twitter": {
-        "found": true,
-        "Social Media Influence": 0.64,
-        "Tweet Views": 188015.0,
-        "Tweet Reposts": 329.0,
-        "Tweet Quotes": 11.0,
-        "Tweet Likes": 1195.0,
-        "Tweet Bookmarks": 29.0,
-        "Tweet Views Relative to Average": 44,
-        "Tweet Reposts Relative to Average": 7,
-        "Tweet Quotes Relative to Average": -25,
-        "Tweet Likes Relative to Average": 18,
-        "Tweet Bookmarks Relative to Average": 0
-      },
-      "Instagram": {
-        "found": true,
-        "Social Media Influence": 11.86,
-        "Post Comments": 53.0,
-        "Post Likes": 2697.0,
-        "Post Comments Relative to Average": 57,
-        "Post Likes Relative to Average": 75
-      }
-    }
-  },
-  {
-    "name": "Casual Midi Skirt",
-    "tags": "Casual, Midi",
-    "description": "Effortlessly chic and versatile, this midi skirt is perfect for casual everyday looks. Its flattering silhouette and comfortable fit have resonated with fashion enthusiasts, resulting in a remarkable 284% increase in bookmarks on Twitter, showcasing its popularity among style-conscious individuals.",
-    "images": [
-      "78a0ceda555f73d404ba201355ab4bf3.jpg",
-      "fc8d50c21bd7489651b976bdee4c4ac8.jpg",
-      "bfdf38ece493e8496db53f8c48de9e75.jpg",
-      "fbafefe897b637a7d43d4248c4a5001b.jpg",
-      "81dPkumiz3L_AC_UY1000_.jpg"
-    ],
-    "sources": "Fendi, Vogue Magazine, Burberry, Coach, PRADA, brittanyxavier, jaceyduprie, veronikaheilbrunner",
-    "socialMedia": {
-      "Twitter": {
-        "found": true,
-        "Social Media Influence": 9.74,
-        "Tweet Views": 194393.0,
-        "Tweet Reposts": 1514.0,
-        "Tweet Quotes": 68.0,
-        "Tweet Likes": 4686.0,
-        "Tweet Bookmarks": 168.0,
-        "Tweet Views Relative to Average": 38,
-        "Tweet Reposts Relative to Average": 239,
-        "Tweet Quotes Relative to Average": 131,
-        "Tweet Likes Relative to Average": 217,
-        "Tweet Bookmarks Relative to Average": 284
-      },
-      "Instagram": {
-        "found": true,
-        "Social Media Influence": 0.18,
-        "Post Comments": 26.0,
-        "Post Likes": 707.0,
-        "Post Comments Relative to Average": 12,
-        "Post Likes Relative to Average": -9
-      }
-    }
-  },
  {
    "name": "Casual Dress",
    "tags": "Casual",
@@ -141,10 +30,10 @@
    "tags": "Casual, Relaxed",
    "description": "Super comfortable and stylish, these hoodies are perfect for everyday wear.  They've been a huge hit on Twitter, with a massive 2957% increase in reposts and a 3023% increase in bookmarks compared to the average.  Get ready to relax in style!",
    "images": [
+      "639a2f2e58e6ffdfff87f6bdb8f9f9c9.jpg",
      "10342a0bd0dc9161466a67fc7b94a33d.jpg",
      "a4896b773c816bce6a7c24da45ef658b.jpg",
      "11ca8a3e353c6cc3444a008779b36174.jpg",
-      "714RvzJjoPL_AC_UY1000_.jpg",
      "LTTVQM-Quarter-Zip-Hoodie-Womens-Oversized-Half-Zip-Pullover-Long-Sleeve-Sweatshirt-Casual-Solid-Color-Relaxed-Fit-Tops-with-Pocket-Camel-XL_72c61da0-5346-42db-aff1-62517df50eb0.08683914769cd5913e834050a6b8ee86.avif"
    ],
    "sources": "Michael Kors, Vogue France",
@@ -295,10 +184,10 @@
    "tags": "Oversized, Wool",
    "description": "A classic and timeless piece, this oversized wool suit offers a sophisticated and comfortable look.  The suit's popularity is evident in its impressive social media performance, with a staggering 4058% increase in reposts on Twitter, showcasing its appeal to fashion enthusiasts.",
    "images": [
+      "e7d6c705f7c1cb859afa8b7ae00757ea.jpg",
      "02aa00c9208ffd8496e16b9e5f730945.jpg",
      "76f90b11d0dfe4a4fbf9b37677d07ae6.jpg",
      "f0f421a3d256185d7f145f59fb7cc4a9.jpg",
-      "a0f80b35b36c0c0018fddd5c59e8c6a2.jpg",
      "cf6b5fd2a1a2bd9561f03986d4fcdd3d.jpg"
    ],
    "sources": "HYPEBEAST, SAINT LAURENT",
@@ -412,6 +301,43 @@
      }
    }
  },
+  {
+    "name": "Casual Long Shirt",
+    "tags": "Casual, Long",
+    "description": "Effortlessly stylish and comfortable, these long shirts are perfect for everyday wear.  They've seen a surge in popularity on social media, with a remarkable 180% increase in reposts on Twitter and a 160% jump in comments on Instagram, making them a popular choice for fashion enthusiasts.",
+    "images": [
+      "4dd5074d31e63021470994c9265ab7cb.jpg",
+      "88e4101d3e4d2e1ddd2a5487a8df3e27.jpg",
+      "9656de311138c38dfe25970279fe26eb.jpg",
+      "65f5dc395334fe598a30dad84eef64e0.jpg",
+      "5521de8fdbef26afc7d8bb560a137401.webp"
+    ],
+    "sources": "aninebing, lindatol_, Fendi, PRADA, Fashionista.com, Vogue Magazine, Acne Studios",
+    "socialMedia": {
+      "Twitter": {
+        "found": true,
+        "Social Media Influence": 8.33,
+        "Tweet Views": 53316.0,
+        "Tweet Reposts": 232.0,
+        "Tweet Quotes": 11.0,
+        "Tweet Likes": 609.0,
+        "Tweet Bookmarks": 15.0,
+        "Tweet Views Relative to Average": -14,
+        "Tweet Reposts Relative to Average": 180,
+        "Tweet Quotes Relative to Average": -30,
+        "Tweet Likes Relative to Average": 88,
+        "Tweet Bookmarks Relative to Average": 1
+      },
+      "Instagram": {
+        "found": true,
+        "Social Media Influence": 12.77,
+        "Post Comments": 41.0,
+        "Post Likes": 6115.0,
+        "Post Comments Relative to Average": 160,
+        "Post Likes Relative to Average": 198
+      }
+    }
+  },
  {
    "name": "Relaxed Casual Long Set",
    "tags": "Relaxed, Casual, Long",
@@ -443,11 +369,11 @@
    "tags": "Black, Fitted, Formal",
    "description": "Elegant and sophisticated, these black fitted formal dresses are perfect for special occasions.  With a 192% increase in reposts and a 189% rise in bookmarks on Twitter, these dresses are clearly a popular choice for stylish events.",
    "images": [
-      "d61eea65fa5505b7a641851a014e36bf.jpg",
-      "53f4aa76693158a87d2fc5488ebf94b2.jpg",
-      "36b000e685ca3dbf5bad2546944bb765.jpg",
-      "il_570xN3804692666_3bgx.avif",
-      "61456_BLACK_3_2048x.jpg"
+      "e1338a6dcfb1908b9f4d3465d55a801c (1).jpg",
+      "c24f0c1565a3fd3c93bfd11ac2e83b40.jpg",
+      "a742f2d2988c45b8b462f36f450b31c8.jpg",
+      "400b0754dbf52f7df89cddaf4351b17b.jpg",
+      "99dad65e2324d9f0484d8739b05ed330.jpg"
    ],
    "sources": "Michael Kors, SAINT LAURENT, Fashionista.com, Givenchy, Vogue Magazine",
    "socialMedia": {
@@ -496,6 +422,43 @@
      }
    }
  },
+  {
+    "name": "Striped Casual Shirt",
+    "tags": "Striped, Casual",
+    "description": "Effortlessly stylish and versatile, these striped casual shirts are a wardrobe staple.  With a 44% increase in views on Twitter and a 75% surge in likes on Instagram, these shirts are clearly a hit with fashion enthusiasts.",
+    "images": [
+      "52aad40ac9ffb17f83de18216af367d1.jpg",
+      "f671add5d3613a579b4dd50bb0733872.jpg",
+      "Hikigawa.webp",
+      "d9fd6326f813a8fa4819028dfeb047b7.jpg",
+      "FSLE-Oversized-Blue-Striped-Casual-Blouse-Shirt-Women-Streetwear-Elegant-Button-Up-Shirt-Female-Long-Sleeve.webp"
+    ],
+    "sources": "aninebing, carodaur, heir, lindatol_, rocky_barnes, Fendi, PRADA, Vogue Magazine, Fashionista.com, KENZO",
+    "socialMedia": {
+      "Twitter": {
+        "found": true,
+        "Social Media Influence": 0.64,
+        "Tweet Views": 188015.0,
+        "Tweet Reposts": 329.0,
+        "Tweet Quotes": 11.0,
+        "Tweet Likes": 1195.0,
+        "Tweet Bookmarks": 29.0,
+        "Tweet Views Relative to Average": 44,
+        "Tweet Reposts Relative to Average": 7,
+        "Tweet Quotes Relative to Average": -25,
+        "Tweet Likes Relative to Average": 18,
+        "Tweet Bookmarks Relative to Average": 0
+      },
+      "Instagram": {
+        "found": true,
+        "Social Media Influence": 11.86,
+        "Post Comments": 53.0,
+        "Post Likes": 2697.0,
+        "Post Comments Relative to Average": 57,
+        "Post Likes Relative to Average": 75
+      }
+    }
+  },
  {
    "name": "Black Formal Silk Dress",
    "tags": "Black, Formal, Silk",
@@ -504,7 +467,7 @@
      "808491c55bb618ee10ce059d10d16664.jpg",
      "c3415cd960426232cc678499875993dd.jpg",
      "Ella-Black-Off-Shoulder-Formal-Dress-1_750x.jpg",
-      "08df26ce-6182-42f1-9188-81a8de0bd372c8640bbaf1a957b037364e6d5e02c560.webp",
+      "c586e6853c40655d9597f2ff76d2ffe0.jpg",
      "6f5a929f47bb99cd9feb944bcaec5333.jpg"
    ],
    "sources": "SAINT LAURENT, Givenchy, Vogue Magazine",
@@ -656,6 +619,43 @@
      }
    }
  },
+  {
+    "name": "Casual Midi Skirt",
+    "tags": "Casual, Midi",
+    "description": "Effortlessly chic and versatile, this midi skirt is perfect for casual everyday looks. Its flattering silhouette and comfortable fit have resonated with fashion enthusiasts, resulting in a remarkable 284% increase in bookmarks on Twitter, showcasing its popularity among style-conscious individuals.",
+    "images": [
+      "78a0ceda555f73d404ba201355ab4bf3.jpg",
+      "fc8d50c21bd7489651b976bdee4c4ac8.jpg",
+      "bfdf38ece493e8496db53f8c48de9e75.jpg",
+      "fbafefe897b637a7d43d4248c4a5001b.jpg",
+      "81dPkumiz3L_AC_UY1000_.jpg"
+    ],
+    "sources": "Fendi, Vogue Magazine, Burberry, Coach, PRADA, brittanyxavier, jaceyduprie, veronikaheilbrunner",
+    "socialMedia": {
+      "Twitter": {
+        "found": true,
+        "Social Media Influence": 9.74,
+        "Tweet Views": 194393.0,
+        "Tweet Reposts": 1514.0,
+        "Tweet Quotes": 68.0,
+        "Tweet Likes": 4686.0,
+        "Tweet Bookmarks": 168.0,
+        "Tweet Views Relative to Average": 38,
+        "Tweet Reposts Relative to Average": 239,
+        "Tweet Quotes Relative to Average": 131,
+        "Tweet Likes Relative to Average": 217,
+        "Tweet Bookmarks Relative to Average": 284
+      },
+      "Instagram": {
+        "found": true,
+        "Social Media Influence": 0.18,
+        "Post Comments": 26.0,
+        "Post Likes": 707.0,
+        "Post Comments Relative to Average": 12,
+        "Post Likes Relative to Average": -9
+      }
+    }
+  },
  {
    "name": "Casual Lace Short White Top",
    "tags": "Casual, Lace, Short, White",
@@ -1,4 +1,4 @@
-const getConfidence = (media, breakpoint) => {
+const getConfidence = (media) => {
    const best = Object.values(media)
        .filter((med) => med.found)
        .reduce((prev, current) => {
@@ -1,33 +1,48 @@
 import * as React from 'react';
-import { Link } from 'gatsby';
+import {Link} from 'gatsby';
+import Layout from "../../components/Layout/Layout";

 import '../../styles/styles.scss';

 function Home() {
-  return (
-    <main>
-      <h1>Insights</h1>
-      <p className="text-container p-b-56">
-        Upcoming fashion insights, enabling you to make informed procurement and
-        manufacturing decisions that align with consumer preferences and market
-        demands
-      </p>
-      <div className="center p-b-56">
-        <Link
-          to="/insights/"
-          className="button button__primary"
-          style={{ pointerEvents: 'none' }}
-        >
-          Women’s Fashion
-        </Link>
-      </div>
-      <div className="box center p-b-80">
-        <Link to="/insights/" className="button button__secondary m-t-80">
-          Generate Insights
-        </Link>
-      </div>
-    </main>
-  );
+    return (
+        <Layout>
+            <h1>Insights</h1>
+            <p className="text-container p-b-56">
+                Upcoming fashion insights, enabling you to make informed procurement and
+                manufacturing decisions that align with consumer preferences and market
+                demands
+            </p>
+            <div className="center p-b-56 flex flex--center flex--gap-32">
+                <Link
+                    to="/insights/"
+                    className="button button__primary"
+                    style={{pointerEvents: 'none'}}
+                >
+                    Men’s Fashion
+                </Link>
+                <Link
+                    to="/insights/"
+                    className="button button__primary"
+                    style={{pointerEvents: 'none'}}
+                >
+                    Women’s Fashion
+                </Link>
+                <Link
+                    to="/insights/"
+                    className="button button__primary"
+                    style={{pointerEvents: 'none'}}
+                >
+                    Kid’s Fashion
+                </Link>
+            </div>
+            <div className="box center p-b-80">
+                <Link to="/insights/" className="button button__secondary m-t-80">
+                    Generate Insights
+                </Link>
+            </div>
+        </Layout>
+    );
 }

 export default Home;
@@ -1,28 +1,63 @@
 import * as React from "react";
 import {graphql, Link} from "gatsby";
-import Breadcrumbs from "../../components/Breadcrumbs/Breadcrumbs";
 import Listing from "../../components/Listing/Listing";
+import Layout from "../../components/Layout/Layout";
+import Tabs from "../../components/Tabs/Tabs";
+import Filter from "../../components/Filter/Filter";
+
+const TABS = [
+    {
+        title: "Clothing"
+    },
+    {
+        title: "Shoes"
+    },
+    {
+        title: "Accessories"
+    }
+]

 const List = ({data, location}) => {
    const products = data.allDataJson.nodes;
    const images = data.allImageSharp.nodes;

    return (
-        <main>
-            <Breadcrumbs location={location.pathname} label="Insights"/>
+        <Layout breafcrumbs={location}>
            <h1>Insights</h1>
            <p className="text-container m-b-56">
                Upcoming fashion insights, enabling you to make informed procurement and
                manufacturing decisions that align with consumer preferences and market
                demands
            </p>
-            <div className="center">
-                <Link to="/insights/" className="button button__primary active">
+            <div className="center flex flex--center flex--gap-32">
+                <Link
+                    to="/insights/"
+                    className="button button__primary active"
+                    style={{pointerEvents: 'none'}}
+                >
+                    Men’s Fashion
+                </Link>
+                <Link
+                    to="/insights/"
+                    className="button button__primary"
+                    style={{pointerEvents: 'none'}}
+                >
                    Women’s Fashion
                </Link>
+                <Link
+                    to="/insights/"
+                    className="button button__primary active"
+                    style={{pointerEvents: 'none'}}
+                >
+                    Kid’s Fashion
+                </Link>
            </div>
+            <div className="center flex flex--center flex--gap-32">
+                <Tabs tabs={TABS} activeTabIndex={0} />
+            </div>
+            <Filter />
            <Listing products={products} images={images}/>
-        </main>
+        </Layout>
    );
 };
 export const query = graphql`
@@ -1,3 +1,6 @@
+@use '../fonts/poppins';
+@use '../fonts/volkhov';
+
 .badge {
  @extend .poppins-medium;
  height: 25px;
@@ -16,4 +19,25 @@
  &--source {
    background: #EEE7F7;
  }
+
+  &--filter {
+    background: #FFF;
+    height: 30px;
+    line-height: 30px;
+    border: none;
+    font-size: 14px;
+    font-weight: 300;
+  }
+
+  span {
+    cursor: pointer;
+    padding-left: 6px;
+    background-image: url('data:image/svg+xml,<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.78735 1.67461C8.90453 1.79176 8.90452 1.98168 8.78735 2.09882L2.09664 8.78784C1.97947 8.90499 1.7895 8.90499 1.67232 8.78784L1.21213 8.32776C1.09495 8.21062 1.09495 8.02069 1.21213 7.90355L7.90284 1.21453C8.02001 1.09739 8.20998 1.09739 8.32716 1.21453L8.78735 1.67461Z" fill="%23484848"/><path d="M8.32788 8.78521C8.21071 8.90235 8.02074 8.90235 7.90356 8.78521L1.21285 2.09619C1.09568 1.97905 1.09568 1.78912 1.21285 1.67198L1.67305 1.2119C1.79022 1.09476 1.98019 1.09476 2.09737 1.2119L8.78808 7.90092C8.90525 8.01806 8.90525 8.20799 8.78808 8.32513L8.32788 8.78521Z" fill="%23484848"/></svg>');
+    background-position: center center;
+    background-repeat: no-repeat;
+    height: 30px;
+    width: 24px;
+    display: inline-block;
+    vertical-align: middle;
+  }
 }
@@ -1,6 +1,4 @@
 .breadcrumb {
-  position: absolute;
-  top: 0;

  &__list {

@@ -1,4 +1,4 @@
-@import '../fonts/poppins';
+@use '../fonts/poppins';

 .button {
  @extend .poppins-regular;
@@ -19,6 +19,7 @@
    &:hover, &.active {
      border-color: transparent;
      background: #fafafa;
+      color: #8A8A8A;
    }

    &.active {
@@ -7,13 +7,16 @@
    position: relative;
    padding-left: 28px;
    font-weight: 500;
-    color: #8A8A8A;
+    //color: #8A8A8A;
+    color: #000;
+    cursor: pointer;

    &:before {
      content: "";
-      //border: 1px solid #484848;
+      border: 1px solid #D9D9D9;
      border-radius: 4px;
      //box-shadow: 0 1px 3px 0 rgba(43, 33, 30, 0.08);
+      background: #fff;
      width: 16px;
      height: 16px;
      display: inline-block;
@@ -40,8 +43,8 @@
        height: 16px;
        display: inline-block;
        position: absolute;
-        top: 2px;
-        left: 0;
+        top: 3px;
+        left: 1px;
      }
    }
  }
@@ -1,3 +1,6 @@
+@use "../mixins/media-queries.scss";
+@use "../helpers/space.scss";
+
 :root {
  --rt-opacity: 1 !important;
 }
@@ -9,11 +12,11 @@ body {
  max-width: 100%;
  margin: 0 auto;

-  @include lg {
+  @include media-queries.lg {
    padding: 120px 20px;
  }

-  @include xl {
+  @include media-queries.xl {
    max-width: 1280px;
    margin: 0 auto;
  }
@@ -23,7 +26,7 @@ main {
  position: relative;
  padding-top: 70px;

-  @include lg {
+  @include media-queries.lg {
    padding-top: 30px;
  }
 }
@@ -0,0 +1,47 @@
+@use "../mixins/media-queries";
+
+.filter {
+  padding: 16px;
+  background: #FAFAFA;
+  margin: 0 0 38px 0;
+  display: none;
+
+  @include media-queries.xl {
+    display: block;
+  }
+
+  &__list {
+    display: flex;
+    gap: 12px;
+  }
+
+  &__input-wrapper {
+    flex: 1 0 auto;
+    text-align: right;
+  }
+
+  &__input {
+    min-width: 300px;
+    border: 1px solid #d9d9d9;
+    border-radius: 3px;
+    height: 25px;
+    padding-left: 28px;
+    line-height: 29px;
+    background-repeat: no-repeat;
+    background-position: 6px center;
+    background-image: url('data:image/svg+xml,<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="7.5" cy="8" r="6" stroke="%23484848"/><path d="M15.1521 16.199C15.0349 16.3162 14.8874 16.3586 14.8225 16.2937L11.1181 12.5902C11.0532 12.5254 11.0956 12.3778 11.2128 12.2607L11.673 11.8006C11.7901 11.6835 11.9377 11.6411 12.0026 11.7059L15.707 15.4094C15.7719 15.4743 15.7295 15.6218 15.6123 15.7389L15.1521 16.199Z" fill="%23484848"/></svg>');
+  }
+
+  &__tags {
+    margin-top: 12px;
+
+    &-close {
+      background-image: url('data:image/svg+xml,<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_590_526)"><path d="M16.0088 8.5C16.0088 12.9183 12.4271 16.5 8.00879 16.5C3.59051 16.5 0.00878906 12.9183 0.00878906 8.5C0.00878906 4.08172 3.59051 0.5 8.00879 0.5C12.4271 0.5 16.0088 4.08172 16.0088 8.5Z" fill="black"/><path d="M11.7874 5.17461C11.9045 5.29176 11.9045 5.48168 11.7874 5.59882L5.09664 12.2878C4.97947 12.405 4.7895 12.405 4.67232 12.2878L4.21213 11.8278C4.09495 11.7106 4.09495 11.5207 4.21213 11.4036L10.9028 4.71453C11.02 4.59739 11.21 4.59739 11.3272 4.71453L11.7874 5.17461Z" fill="white"/><path d="M11.3279 12.2852C11.2107 12.4024 11.0207 12.4024 10.9036 12.2852L4.21285 5.59619C4.09568 5.47905 4.09568 5.28912 4.21285 5.17198L4.67305 4.7119C4.79022 4.59476 4.98019 4.59476 5.09737 4.7119L11.7881 11.4009C11.9053 11.5181 11.9053 11.708 11.7881 11.8251L11.3279 12.2852Z" fill="white"/></g><defs><clipPath id="clip0_590_526"><rect width="16" height="16" fill="white" transform="translate(0 0.5)"/></clipPath></defs></svg>');
+      background-repeat: no-repeat;
+      background-position: left;
+      padding-left: 22px;
+      cursor: pointer;
+      font-size: 14px;
+    }
+  }
+}
@@ -0,0 +1,27 @@
+.header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.profile {
+  font-size: 12px;
+  color: #000;
+  padding-right: 12px;
+  position: relative;
+
+  &:after {
+    content: "";
+    top: 2px;
+    right: 0;
+    position: absolute;
+    transform: rotate(135deg);
+    width: 5px;
+    height: 5px;
+    display: inline-block;
+    vertical-align: middle;
+    border-top: 1px solid #000;
+    border-right: 1px solid #000;
+    color: transparent;
+  }
+}
@@ -1,10 +1,13 @@
+@use "../mixins/media-queries";
+@use '../fonts/poppins';
+@use '../fonts/volkhov';
+
 .product-card {
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.06);
  border-radius: 10px;
-  //overflow: hidden;
  position: relative;

-  @include lg {
+  @include media-queries.lg {
    display: flex;
    height: 260px;
  }
@@ -1,7 +1,11 @@
+@use "../mixins/media-queries";
+@use '../fonts/poppins';
+@use '../fonts/volkhov';
+
 .product {
  position: relative;

-  @include lg {
+  @include media-queries.lg {
    display: flex;
    gap: 65px;
    height: 640px;
@@ -10,7 +14,7 @@

  &__slider {

-    @include lg {
+    @include media-queries.lg {
      flex: 1 1 auto;
      max-width: 800px;
    }
@@ -29,7 +33,7 @@
        }
      }

-      @include lg {
+      @include media-queries.lg {
        border: 1px solid #D9D9D9;
        padding: 38px 32px;

@@ -44,7 +48,7 @@
    &--mobile {
      border: none;

-      @include lg {
+      @include media-queries.lg {
        display: none;
      }
    }
@@ -95,11 +99,11 @@
    height: 550px;
    width: auto;

-    @include sm {
+    @include media-queries.sm {
      height: 580px;
    }

-    @include lg {
+    @include media-queries.lg {
      position: relative;
      height: 640px;
      width: 640px;
@@ -110,11 +114,11 @@
    border: 1px solid rgba(217, 217, 217, 1);
    height: 480px;

-    @include lg {
+    @include media-queries.lg {
      width: 480px;
    }

-    @include md {
+    @include media-queries.md {
      margin-right: 98px;
      height: 640px;
    }
@@ -125,7 +129,7 @@
    margin-top: 20px;
    bottom: 0;

-    @include md {
+    @include media-queries.md {
      top: 0;
      right: 0;
      width: 94px;
@@ -140,17 +144,17 @@
      width: 15%;
      height: 50px;

-      @include sm {
+      @include media-queries.sm {
        height: 80px;
      }

-      @include md {
+      @include media-queries.md {
        width: 94px;
        height: 114px;
        margin: 0;
      }

-      @include lg {
+      @include media-queries.lg {
        margin-bottom: 15px;
      }

@@ -20,7 +20,6 @@ time, mark, audio, video {
  padding: 0;
  border: 0;
  font-size: 100%;
-  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
 }
@@ -45,7 +44,6 @@ blockquote, q {

 blockquote:before, blockquote:after,
 q:before, q:after {
-  content: '';
  content: none;
 }

@@ -0,0 +1,64 @@
+.selectbox {
+  border-radius: 3px !important;
+  min-height: 29px !important;
+  border-color: #D9D9D9;
+
+  &__input {
+    width: 100%;
+    border: 1px solid #d9d9d9;
+    border-radius: 3px;
+    height: 29px;
+    margin: 12px 0;
+    padding-left: 28px;
+    line-height: 29px;
+    background-repeat: no-repeat;
+    background-position: 6px center;
+    background-image: url('data:image/svg+xml,<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="7.5" cy="8" r="6" stroke="%23484848"/><path d="M15.1521 16.199C15.0349 16.3162 14.8874 16.3586 14.8225 16.2937L11.1181 12.5902C11.0532 12.5254 11.0956 12.3778 11.2128 12.2607L11.673 11.8006C11.7901 11.6835 11.9377 11.6411 12.0026 11.7059L15.707 15.4094C15.7719 15.4743 15.7295 15.6218 15.6123 15.7389L15.1521 16.199Z" fill="%23484848"/></svg>');
+  }
+
+  &--active {
+    border-color: #000;
+  }
+
+  &__content {
+    font-size: 14px;
+  }
+
+  &__dropdown {
+
+    &-label {
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+
+      &:before {
+        top: 0 !important;
+      }
+      &:after {
+        top: 0 !important;
+      }
+    }
+  }
+
+  &__option {
+    height: 22px;
+    cursor: pointer;
+    margin: 12px 0;
+  }
+
+  &__options {
+    max-height: 250px;
+    overflow: auto;
+  }
+}
+
+.react-dropdown-select-dropdown {
+  width: 240px !important;
+  padding: 12px 22px !important;
+  top: 29px !important;
+  box-shadow: none !important;
+  border: none !important;
+  background: #f0f0f0 !important;
+  max-height: unset !important;
+  overflow: unset !important;
+}
@@ -1,8 +1,10 @@
+@use "../mixins/media-queries";
+
 .slick-slider {
  width: 100%;
  overflow: hidden;

-  @include lg {
+  @include media-queries.lg {
    height: 260px;
    width: 620px;
  }
@@ -0,0 +1,27 @@
+@use "../mixins/media-queries";
+
+.tabs {
+  display: flex;
+  margin-top: 18px;
+  margin-bottom: 38px;
+
+  &__item {
+    height: 40px;
+    line-height: 40px;
+    padding: 0 26px;
+    color: #8A8A8A;
+    border-bottom: 1px solid #8A8A8A;
+    cursor: pointer;
+    font-size: 14px;
+
+    @include media-queries.md {
+      font-size: unset;
+    }
+
+    &--active {
+      color: #000;
+      border-bottom: 2px solid #000;
+
+    }
+  }
+}
@@ -1,3 +1,6 @@
+@use '../fonts/poppins';
+@use '../fonts/volkhov';
+
 .tooltip {
  &__data {
    display: flex;
@@ -1,6 +1,6 @@
-@import '../fonts/poppins';
-@import '../fonts/volkhov';
-@import '../helpers/space';
+@use '../fonts/poppins';
+@use '../fonts/volkhov';
+@use '../helpers/space';

 body {
  @extend .poppins-regular;
@@ -1,13 +1,14 @@
+@use "sass:string";
 $spaceamounts: (12, 24, 36, 48, 56, 60, 72, 16, 32, 64, 80, 96, 148);
 $sides: (top, bottom, left, right);

@each $space in $spaceamounts {
  @each $side in $sides {
-    .m-#{str-slice($side, 0, 1)}-#{$space} {
+    .m-#{string.slice($side, 0, 1)}-#{$space} {
      margin-#{$side}: #{$space}px !important;
    }

-    .p-#{str-slice($side, 0, 1)}-#{$space} {
+    .p-#{string.slice($side, 0, 1)}-#{$space} {
      padding-#{$side}: #{$space}px !important;
    }
  }
@@ -16,3 +17,18 @@ $sides: (top, bottom, left, right);
 .center {
  text-align: center;
 }
+
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+
+  &--center {
+    justify-content: center;
+  }
+
+  @each $space in $spaceamounts {
+    &--gap-#{$space} {
+      gap: #{$space}px;
+    }
+  }
+}
@@ -1,4 +1,7 @@
-@import "../variables/breakpoints";
+$screen-sm-min: 576px;
+$screen-md-min: 768px;
+$screen-lg-min: 992px;
+$screen-xl-min: 1200px;

@mixin sm {
  @media (min-width: #{$screen-sm-min}) {
@@ -1,15 +1,25 @@
-@import "./mixins/media-queries";
+@use "mixins/media-queries";
+
+@use "helpers/space.scss";
+
+@use "fonts/poppins.scss";
+@use "fonts/volkhov.scss";
+
+@use "components/reset.scss";
+@use "components/common.scss";
+@use "components/checkbox.scss";
+@use "components/badge.scss";
+@use "components/tooltip.scss";
+@use "components/button.scss";
+@use "components/breadcrumb.scss";
+@use "components/slick.scss";
+@use "components/product.scss";
+@use "components/product-card.scss";
+@use "components/typography.scss";
+@use "components/box.scss";
+@use "components/selectbox.scss";
+@use "components/tabs.scss";
+@use "components/filter.scss";
+@use "components/layout.scss";
+

-@import "./components/reset.scss";
-@import "./components/common.scss";
-@import "./components/checkbox.scss";
-@import "./components/badge.scss";
-@import "./components/tooltip.scss";
-@import "./components/button.scss";
-@import "./components/breadcrumb.scss";
-@import "./components/slick.scss";
-@import "./components/product.scss";
-@import "./components/product-card.scss";
-@import "./components/typography.scss";
-@import "./components/box.scss";
-@import "./helpers/space.scss";
@@ -4,12 +4,12 @@ import {graphql} from 'gatsby';
 import {GatsbyImage} from 'gatsby-plugin-image';

 import Badge from '../../components/Badge/Badge';
-import Breadcrumbs from '../../components/Breadcrumbs/Breadcrumbs';
 import SocialMediaTooltips from "../../components/SocialMediaTooltips/SocialMediaTooltips";
 import getConfidence from '../../helpers/getConfidence';

 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
+import Layout from "../../components/Layout/Layout";

 function ProductPage({location, pageContext, data}) {
    const settings = {
@@ -39,8 +39,7 @@ function ProductPage({location, pageContext, data}) {
    const {name, tags, sources, description, socialMedia} = pageContext.data;

    return (
-        <main>
-            <Breadcrumbs location={location.pathname} label={name}/>
+        <Layout breafcrumbs={location}>
            <div className="product">
                <div className="product__data product__data--mobile">
                    <h1 className="product__title">{name}</h1>
@@ -101,7 +100,7 @@ function ProductPage({location, pageContext, data}) {
                    </ul>
                </div>
            </div>
-        </main>
+        </Layout>
    );
 }