Init
This commit is contained in:
Dmytro Tkachenko
@@ -0,0 +1,9 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import '../../styles/styles.scss';
|
||||
|
||||
function Badge({tag, isSource}) {
|
||||
return <div className={`badge ${isSource && 'badge--source'}`}>{tag}</div>;
|
||||
}
|
||||
|
||||
export default Badge;
|
||||
@@ -0,0 +1,38 @@
|
||||
import * as React from 'react';
|
||||
import {Link} from 'gatsby';
|
||||
|
||||
function Breadcrumbs({location, label}) {
|
||||
const paths = location.split('/').filter((i) => i);
|
||||
const getBreadcrumbTitle = (name) =>
|
||||
name
|
||||
.replace('-', ' ')
|
||||
.replace(/(^\w{1})|(\s+\w{1})/g, (letter) => letter.toUpperCase());
|
||||
return (
|
||||
<nav className="breadcrumb" aria-label="Breadcrumb">
|
||||
<ol className="breadcrumb__list">
|
||||
<li className="breadcrumb__item">
|
||||
<Link className="breadcrumb__link" to="/">
|
||||
Home
|
||||
</Link>
|
||||
<span className="breadcrumb__separator" aria-hidden="true"/>
|
||||
</li>
|
||||
{paths.map((path, i) => (
|
||||
<li key={i} className="breadcrumb__item">
|
||||
{paths.length > i + 1 ? (
|
||||
<>
|
||||
<Link className="breadcrumb__link" to={`/${path}`}>
|
||||
{getBreadcrumbTitle(path)}
|
||||
</Link>
|
||||
<span className="breadcrumb__separator" aria-hidden="true"/>
|
||||
</>
|
||||
) : (
|
||||
<div className="breadcrumb__link">{label}</div>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
export default Breadcrumbs;
|
||||
@@ -0,0 +1,36 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import ProductCard from '../ProductCard/ProductCard';
|
||||
|
||||
import '../../styles/styles.scss';
|
||||
|
||||
function Listing({ products, images }) {
|
||||
const [page, setPage] = React.useState(1);
|
||||
const loadMore = () => {
|
||||
setPage(page + 1);
|
||||
};
|
||||
|
||||
const getImages = (i) =>
|
||||
images.filter((image) => i.includes(image.fluid.originalName));
|
||||
|
||||
return (
|
||||
<div className="listing">
|
||||
{products.slice(0, page * 2).map((product, i) => (
|
||||
<ProductCard
|
||||
product={product}
|
||||
key={i}
|
||||
images={getImages(product.images)}
|
||||
/>
|
||||
))}
|
||||
<div className="center m-b-64">
|
||||
{products.length > page * 2 ? (
|
||||
<button className="button button__secondary" onClick={loadMore}>
|
||||
View More
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Listing;
|
||||
@@ -0,0 +1,53 @@
|
||||
import * as React from 'react';
|
||||
import Slider from 'react-slick';
|
||||
import {navigate} from 'gatsby';
|
||||
import {GatsbyImage} from 'gatsby-plugin-image';
|
||||
import Badge from '../Badge/Badge';
|
||||
import SocialMediaTooltips from "../SocialMediaTooltips/SocialMediaTooltips";
|
||||
|
||||
import 'slick-carousel/slick/slick.css';
|
||||
import 'slick-carousel/slick/slick-theme.css';
|
||||
import '../../styles/styles.scss';
|
||||
|
||||
const ProductCard = ({product, images}) => {
|
||||
const settings = {
|
||||
dots: false,
|
||||
infinite: false,
|
||||
speed: 500,
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 1,
|
||||
};
|
||||
|
||||
const doClick = () => {
|
||||
navigate(`/insights/${product.name.replaceAll(' ', '-').toLowerCase()}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="product-card m-t-48 m-b-48">
|
||||
<div className="product-card__slider">
|
||||
<Slider {...settings}>
|
||||
{product.images.map((image, index) => (
|
||||
<GatsbyImage
|
||||
key={index}
|
||||
image={images[index]?.gatsbyImageData}
|
||||
alt={product.name}
|
||||
/>
|
||||
))}
|
||||
</Slider>
|
||||
</div>
|
||||
<div className="product-card__data">
|
||||
<h2 onClick={doClick}>{product.name}</h2>
|
||||
<p className="product-card__subtitle">Current Signal</p>
|
||||
{product.tags.split(",").map((tag) => (
|
||||
<Badge tag={tag} key={tag}></Badge>
|
||||
))}
|
||||
<div className="product-card__confidence-container"><SocialMediaTooltips product={product}/></div>
|
||||
<div className="product-card__information" onClick={doClick}>
|
||||
i
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductCard;
|
||||
@@ -0,0 +1,91 @@
|
||||
import React from 'react';
|
||||
|
||||
import {Tooltip} from "react-tooltip";
|
||||
import '../../styles/styles.scss';
|
||||
|
||||
const SOCIAL_MEDIA_BREAKPOINTS = {
|
||||
Twitter: 11.06,
|
||||
Instagram: 11.93
|
||||
}
|
||||
|
||||
const SOCIAL_MEDIA_MATRIX = {
|
||||
Twitter: [
|
||||
'Social_Media_Influence',
|
||||
null,
|
||||
'Tweet_Views_Relative_to_Average',
|
||||
'Tweet_Reposts_Relative_to_Average',
|
||||
'Tweet_Quotes_Relative_to_Average',
|
||||
'Tweet_Likes_Relative_to_Average',
|
||||
'Tweet_Bookmarks_Relative_to_Average',
|
||||
null,
|
||||
'Tweet_Views',
|
||||
'Tweet_Reposts',
|
||||
'Tweet_Quotes',
|
||||
'Tweet_Likes',
|
||||
'Tweet_Bookmarks',
|
||||
],
|
||||
Instagram: [
|
||||
"Social_Media_Influence",
|
||||
null,
|
||||
"Post_Comments_Relative_to_Average",
|
||||
"Post_Likes_Relative_to_Average",
|
||||
null,
|
||||
"Post_Comments",
|
||||
"Post_Likes",
|
||||
]
|
||||
}
|
||||
const SocialMediaTooltips = ({product}) => {
|
||||
const {socialMedia, name} = product;
|
||||
const getTooltips = () => Object.keys(socialMedia)
|
||||
.map(key => {
|
||||
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>);
|
||||
}
|
||||
});
|
||||
return (
|
||||
<>
|
||||
{getTooltips()}</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
export default SocialMediaTooltips;
|
||||
@@ -0,0 +1,795 @@
|
||||
[
|
||||
{
|
||||
"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",
|
||||
"description": "Effortless and stylish, these casual dresses are perfect for everyday wear. They've seen a surge in popularity on Instagram, with a 30% increase in comments and a 32% rise in likes compared to average performance.",
|
||||
"images": [
|
||||
"6c8c25c3585c513fdcbaaeabff4f63f1.jpg",
|
||||
"cddd01b8fdf433b8323b016ec22eefb0.jpg",
|
||||
"418664880527680dd24903fb91b1edfe.jpg",
|
||||
"210bac95188300c901ccc2f9f6ac959b.jpg",
|
||||
"1e7e687cc7b704fb29f41502e7debab6.jpg"
|
||||
],
|
||||
"sources": "alexandralapp, jessicawang, brittanyxavier, sofievalkiers, carodaur",
|
||||
"socialMedia": {
|
||||
"Twitter": {
|
||||
"found": false
|
||||
},
|
||||
"Instagram": {
|
||||
"found": true,
|
||||
"Social Media Influence": 21.11,
|
||||
"Post Comments": 57.0,
|
||||
"Post Likes": 3468.0,
|
||||
"Post Comments Relative to Average": 30,
|
||||
"Post Likes Relative to Average": 32
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Casual Relaxed Hoodie",
|
||||
"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": [
|
||||
"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",
|
||||
"socialMedia": {
|
||||
"Twitter": {
|
||||
"found": true,
|
||||
"Social Media Influence": 16.66,
|
||||
"Tweet Views": 31267.0,
|
||||
"Tweet Reposts": 1022.0,
|
||||
"Tweet Quotes": 10.0,
|
||||
"Tweet Likes": 2346.0,
|
||||
"Tweet Bookmarks": 61.0,
|
||||
"Tweet Views Relative to Average": 1636,
|
||||
"Tweet Reposts Relative to Average": 2957,
|
||||
"Tweet Quotes Relative to Average": 2184,
|
||||
"Tweet Likes Relative to Average": 2683,
|
||||
"Tweet Bookmarks Relative to Average": 3023
|
||||
},
|
||||
"Instagram": {
|
||||
"found": false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Long Relaxed Hoodie",
|
||||
"tags": "Long, Relaxed",
|
||||
"description": "A comfortable and stylish long hoodie, perfect for layering or wearing on its own. This bucket has seen incredible engagement on Twitter, with a whopping 2943% increase in reposts and a 2997% increase in bookmarks compared to the average, making it a popular choice for fashion enthusiasts.",
|
||||
"images": [
|
||||
"c12705635963f923de655466dbae97e2.jpg",
|
||||
"16b0139512edb733fbe0831038844dbe.jpg",
|
||||
"essentials-green-relaxed-hoodie.jpg",
|
||||
"51ZcbfHF2aL_AC_UY1000_.jpg",
|
||||
"61CXldy7QNL_AC_UY1000_.jpg"
|
||||
],
|
||||
"sources": "HYPEBEAST, Michael Kors",
|
||||
"socialMedia": {
|
||||
"Twitter": {
|
||||
"found": true,
|
||||
"Social Media Influence": 16.52,
|
||||
"Tweet Views": 29008.0,
|
||||
"Tweet Reposts": 1021.0,
|
||||
"Tweet Quotes": 10.0,
|
||||
"Tweet Likes": 2340.0,
|
||||
"Tweet Bookmarks": 60.0,
|
||||
"Tweet Views Relative to Average": 1595,
|
||||
"Tweet Reposts Relative to Average": 2943,
|
||||
"Tweet Quotes Relative to Average": 2184,
|
||||
"Tweet Likes Relative to Average": 2666,
|
||||
"Tweet Bookmarks Relative to Average": 2997
|
||||
},
|
||||
"Instagram": {
|
||||
"found": false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Black Midi Dress",
|
||||
"tags": "Black, Midi",
|
||||
"description": "A classic and versatile piece, the black midi dress is a timeless wardrobe staple. This style has seen a surge in popularity, with Twitter engagement soaring - a whopping 273% increase in quotes and 228% more bookmarks than average. ",
|
||||
"images": [
|
||||
"411wiRAnajL_AC_SX679_.jpg",
|
||||
"SFDRSS1666-1.jpg",
|
||||
"2024-Black-Korean-Vintage-Hepburn.webp",
|
||||
"American-Tall-Women-Sleeveless-Knot-Front-Dress-Black-front.jpg",
|
||||
"366e0bbdcd9df41e9db8bbf5a8a6599b.jpg"
|
||||
],
|
||||
"sources": "SAINT LAURENT, Vogue France, Vogue Magazine, Michael Kors, Fashionista.com",
|
||||
"socialMedia": {
|
||||
"Twitter": {
|
||||
"found": true,
|
||||
"Social Media Influence": 15.53,
|
||||
"Tweet Views": 76068.0,
|
||||
"Tweet Reposts": 718.0,
|
||||
"Tweet Quotes": 22.0,
|
||||
"Tweet Likes": 1870.0,
|
||||
"Tweet Bookmarks": 48.0,
|
||||
"Tweet Views Relative to Average": 180,
|
||||
"Tweet Reposts Relative to Average": 160,
|
||||
"Tweet Quotes Relative to Average": 273,
|
||||
"Tweet Likes Relative to Average": 185,
|
||||
"Tweet Bookmarks Relative to Average": 228
|
||||
},
|
||||
"Instagram": {
|
||||
"found": false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Striped Vintage Tights",
|
||||
"tags": "Striped, Vintage",
|
||||
"description": "A stylish blend of retro and modern, these striped vintage tights offer a unique and eye-catching look. Their popularity is evident on Instagram, with a staggering 711% increase in comments and an 85% rise in likes compared to average performance.",
|
||||
"images": [
|
||||
"0f68e87faf90599847cb90ac47e553b0.jpg",
|
||||
"c097d029ae89b9a349bde0fe8a5c186c.jpg",
|
||||
"fd535e3c6b314fdb9da9aa8bb57dbc2a.jpg",
|
||||
"4a5f56e2ae6336b9afb4cc00a4af3760.jpg",
|
||||
"598211bd466543da6a94597676bbadb7.jpg"
|
||||
],
|
||||
"sources": "veronikaheilbrunner",
|
||||
"socialMedia": {
|
||||
"Twitter": {
|
||||
"found": false
|
||||
},
|
||||
"Instagram": {
|
||||
"found": true,
|
||||
"Social Media Influence": 14.21,
|
||||
"Post Comments": 120.0,
|
||||
"Post Likes": 419.0,
|
||||
"Post Comments Relative to Average": 711,
|
||||
"Post Likes Relative to Average": 85
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Oversized Printed Cotton Shirt",
|
||||
"tags": "Oversized, Printed, Cotton",
|
||||
"description": "Oversized printed cotton shirts are a popular choice, boasting a remarkable 4072% increase in reposts on Twitter. These shirts offer a comfortable and stylish option, featuring a variety of prints and designs to suit different tastes.",
|
||||
"images": [
|
||||
"4b82944bf7f5c146d615f3dfa2bc932a.jpg",
|
||||
"fe6bf3f0554b6ca2b36d647c10c04184.jpg",
|
||||
"bcb4ebcbc33c3fa27eb07eaf91216b53.jpg",
|
||||
"6c0803c45b830a961c3b59cd1c6c02c6.jpg",
|
||||
"c694fc1aeb7dbddc03137a7bd096f874.jpg"
|
||||
],
|
||||
"sources": "HYPEBEAST, Vogue Magazine",
|
||||
"socialMedia": {
|
||||
"Twitter": {
|
||||
"found": true,
|
||||
"Social Media Influence": 13.97,
|
||||
"Tweet Views": 67300.0,
|
||||
"Tweet Reposts": 1873.0,
|
||||
"Tweet Quotes": 21.0,
|
||||
"Tweet Likes": 5162.0,
|
||||
"Tweet Bookmarks": 115.0,
|
||||
"Tweet Views Relative to Average": 301,
|
||||
"Tweet Reposts Relative to Average": 4072,
|
||||
"Tweet Quotes Relative to Average": 503,
|
||||
"Tweet Likes Relative to Average": 2332,
|
||||
"Tweet Bookmarks Relative to Average": 989
|
||||
},
|
||||
"Instagram": {
|
||||
"found": false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Oversized Wool Suit",
|
||||
"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": [
|
||||
"02aa00c9208ffd8496e16b9e5f730945.jpg",
|
||||
"76f90b11d0dfe4a4fbf9b37677d07ae6.jpg",
|
||||
"f0f421a3d256185d7f145f59fb7cc4a9.jpg",
|
||||
"a0f80b35b36c0c0018fddd5c59e8c6a2.jpg",
|
||||
"cf6b5fd2a1a2bd9561f03986d4fcdd3d.jpg"
|
||||
],
|
||||
"sources": "HYPEBEAST, SAINT LAURENT",
|
||||
"socialMedia": {
|
||||
"Twitter": {
|
||||
"found": true,
|
||||
"Social Media Influence": 13.89,
|
||||
"Tweet Views": 78600.0,
|
||||
"Tweet Reposts": 1905.0,
|
||||
"Tweet Quotes": 24.0,
|
||||
"Tweet Likes": 5305.0,
|
||||
"Tweet Bookmarks": 117.0,
|
||||
"Tweet Views Relative to Average": 277,
|
||||
"Tweet Reposts Relative to Average": 4058,
|
||||
"Tweet Quotes Relative to Average": 517,
|
||||
"Tweet Likes Relative to Average": 2321,
|
||||
"Tweet Bookmarks Relative to Average": 978
|
||||
},
|
||||
"Instagram": {
|
||||
"found": false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Blue & White Cotton Casual Relaxed Striped Long Shirt",
|
||||
"tags": "Blue, White, Cotton, Casual, Striped, Long",
|
||||
"description": "Effortlessly stylish and comfortable, these striped cotton shirts are a wardrobe staple. Featuring a relaxed fit and a classic blue and white color scheme, these shirts have seen a surge in popularity on Instagram, with a 430% increase in likes and a 337% increase in comments compared to average performance.",
|
||||
"images": [
|
||||
"fdc35844d4ddd5a557126559f95ef0d0.jpg",
|
||||
"3d4acf62a0f30be3931fbe1e072f37e3.jpg",
|
||||
"6a04a9035771ee27e8f5e5b90a444057.jpg",
|
||||
"4181fa5ec07755b6d1c914f8d4027303.jpg",
|
||||
"06f9a4b9c705dddf1e3c2604e52637be.jpg"
|
||||
],
|
||||
"sources": "aninebing",
|
||||
"socialMedia": {
|
||||
"Twitter": {
|
||||
"found": false
|
||||
},
|
||||
"Instagram": {
|
||||
"found": true,
|
||||
"Social Media Influence": 13.69,
|
||||
"Post Comments": 39.0,
|
||||
"Post Likes": 6767.0,
|
||||
"Post Comments Relative to Average": 337,
|
||||
"Post Likes Relative to Average": 430
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Formal Double-Breasted Suit",
|
||||
"tags": "Formal, Double-Breasted",
|
||||
"description": "A classic and sophisticated choice for formal occasions, this double-breasted suit exudes timeless elegance. Its sharp tailoring and structured silhouette make it a powerful statement piece, and its popularity is evident in its impressive performance on Twitter, with a staggering 1985% increase in reposts and a 1116% surge in likes compared to average metrics.",
|
||||
"images": [
|
||||
"hockerty_light_blue_womens_outfit_influencer_amateur_photo_fo_8077d81c-d293-452d-ae6b-c53b34436b33_1.jpg",
|
||||
"s-l1200.jpg",
|
||||
"Women_Dark_Green_Pantsuit_Plaid_Pants.jpg",
|
||||
"s-l1200 (1).jpg",
|
||||
"ae75c3ae8b87049ee96a0a04abe444ba.jpg"
|
||||
],
|
||||
"sources": "SAINT LAURENT, HYPEBEAST, Vogue Italia",
|
||||
"socialMedia": {
|
||||
"Twitter": {
|
||||
"found": true,
|
||||
"Social Media Influence": 13.33,
|
||||
"Tweet Views": 39834.0,
|
||||
"Tweet Reposts": 953.0,
|
||||
"Tweet Quotes": 12.0,
|
||||
"Tweet Likes": 2655.0,
|
||||
"Tweet Bookmarks": 58.0,
|
||||
"Tweet Views Relative to Average": 97,
|
||||
"Tweet Reposts Relative to Average": 1985,
|
||||
"Tweet Quotes Relative to Average": 224,
|
||||
"Tweet Likes Relative to Average": 1116,
|
||||
"Tweet Bookmarks Relative to Average": 439
|
||||
},
|
||||
"Instagram": {
|
||||
"found": false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Beige Casual Long Shirt",
|
||||
"tags": "Beige, Casual, Long",
|
||||
"description": "Effortlessly stylish and versatile, these beige long shirts offer a relaxed yet chic look for any occasion. Their popularity is evident in the impressive social media engagement, with a staggering 881% increase in likes and 342% increase in bookmarks on Twitter, making them a top choice for fashion enthusiasts.",
|
||||
"images": [
|
||||
"64132c918e5ce170ce2d64b44474f911.jpg",
|
||||
"e215f9a12e02770c8f9c52b3f5873da0.jpg",
|
||||
"e83aab356f6569818829d8ca7095fc33.jpg",
|
||||
"4d70442ff09e356bae07ad778bae9224.jpg",
|
||||
"f06ecce6fe8bd2414a079ebb27afd07f.jpg"
|
||||
],
|
||||
"sources": "Fendi, HYPEBEAST, Vogue Magazine",
|
||||
"socialMedia": {
|
||||
"Twitter": {
|
||||
"found": true,
|
||||
"Social Media Influence": 13.27,
|
||||
"Tweet Views": 225880.0,
|
||||
"Tweet Reposts": 772.0,
|
||||
"Tweet Quotes": 9.0,
|
||||
"Tweet Likes": 2198.0,
|
||||
"Tweet Bookmarks": 50.0,
|
||||
"Tweet Views Relative to Average": 122,
|
||||
"Tweet Reposts Relative to Average": 1575,
|
||||
"Tweet Quotes Relative to Average": 144,
|
||||
"Tweet Likes Relative to Average": 881,
|
||||
"Tweet Bookmarks Relative to Average": 342
|
||||
},
|
||||
"Instagram": {
|
||||
"found": false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Relaxed Casual Long Set",
|
||||
"tags": "Relaxed, Casual, Long",
|
||||
"description": "Effortlessly stylish and comfortable, these relaxed long sets are perfect for a casual yet chic look. They've seen a surge in popularity on Instagram, with a 173% increase in comments and a 183% rise in likes, making them a top choice for fashion enthusiasts.",
|
||||
"images": [
|
||||
"926ea00e21a7bf90ea34e45ea3ca8367.jpg",
|
||||
"397fc723b13b483c9c59c44ecc112c32.jpg",
|
||||
"f679eb7e700f75ee2f03282ce3eeb3b9.jpg",
|
||||
"762827f443876b4cf174d0324d871374.jpg",
|
||||
"b9d0b528d254401ff460463b3c8e7b71.jpg"
|
||||
],
|
||||
"sources": "ariellecharnas, jessicawang",
|
||||
"socialMedia": {
|
||||
"Twitter": {
|
||||
"found": false
|
||||
},
|
||||
"Instagram": {
|
||||
"found": true,
|
||||
"Social Media Influence": 12.71,
|
||||
"Post Comments": 42.0,
|
||||
"Post Likes": 2821.0,
|
||||
"Post Comments Relative to Average": 173,
|
||||
"Post Likes Relative to Average": 183
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Black Fitted Formal Dress",
|
||||
"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"
|
||||
],
|
||||
"sources": "Michael Kors, SAINT LAURENT, Fashionista.com, Givenchy, Vogue Magazine",
|
||||
"socialMedia": {
|
||||
"Twitter": {
|
||||
"found": true,
|
||||
"Social Media Influence": 12.3,
|
||||
"Tweet Views": 92892.0,
|
||||
"Tweet Reposts": 500.0,
|
||||
"Tweet Quotes": 16.0,
|
||||
"Tweet Likes": 1399.0,
|
||||
"Tweet Bookmarks": 33.0,
|
||||
"Tweet Views Relative to Average": 252,
|
||||
"Tweet Reposts Relative to Average": 192,
|
||||
"Tweet Quotes Relative to Average": 156,
|
||||
"Tweet Likes Relative to Average": 183,
|
||||
"Tweet Bookmarks Relative to Average": 189
|
||||
},
|
||||
"Instagram": {
|
||||
"found": false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Casual Chic Comfy Cozy Grey Long Set",
|
||||
"tags": "Casual, Chic, Comfy, Cozy, Grey, Long",
|
||||
"description": "Effortlessly chic and comfortable, these grey lounge sets are perfect for relaxing at home or running errands. They've seen a surge in popularity on Instagram, with a 318% increase in comments and a 355% increase in likes, proving their appeal to fashion-conscious individuals seeking both style and comfort.",
|
||||
"images": [
|
||||
"55ada084877a6115c31e631da288a82c.jpg",
|
||||
"a6827fad8d0794b56d7e605298145980.jpg",
|
||||
"f3e0554895c326313afba44e86ccd062.jpg",
|
||||
"1e39a461c0803192cb7e279410e8f440.jpg",
|
||||
"6cfa0845685e24f1230c269da9e7bef0.jpg"
|
||||
],
|
||||
"sources": "ariellecharnas",
|
||||
"socialMedia": {
|
||||
"Twitter": {
|
||||
"found": false
|
||||
},
|
||||
"Instagram": {
|
||||
"found": true,
|
||||
"Social Media Influence": 12.01,
|
||||
"Post Comments": 33.0,
|
||||
"Post Likes": 5223.0,
|
||||
"Post Comments Relative to Average": 318,
|
||||
"Post Likes Relative to Average": 355
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Black Formal Silk Dress",
|
||||
"tags": "Black, Formal, Silk",
|
||||
"description": "A sophisticated and elegant black silk dress, perfect for formal occasions. This timeless piece has garnered significant attention on Twitter, with a remarkable 582% increase in quotes and a 487% rise in likes compared to average performance, making it a popular choice for stylish events.",
|
||||
"images": [
|
||||
"808491c55bb618ee10ce059d10d16664.jpg",
|
||||
"c3415cd960426232cc678499875993dd.jpg",
|
||||
"Ella-Black-Off-Shoulder-Formal-Dress-1_750x.jpg",
|
||||
"08df26ce-6182-42f1-9188-81a8de0bd372c8640bbaf1a957b037364e6d5e02c560.webp",
|
||||
"6f5a929f47bb99cd9feb944bcaec5333.jpg"
|
||||
],
|
||||
"sources": "SAINT LAURENT, Givenchy, Vogue Magazine",
|
||||
"socialMedia": {
|
||||
"Twitter": {
|
||||
"found": true,
|
||||
"Social Media Influence": 11.06,
|
||||
"Tweet Views": 104554.0,
|
||||
"Tweet Reposts": 1257.0,
|
||||
"Tweet Quotes": 32.0,
|
||||
"Tweet Likes": 3155.0,
|
||||
"Tweet Bookmarks": 68.0,
|
||||
"Tweet Views Relative to Average": 389,
|
||||
"Tweet Reposts Relative to Average": 528,
|
||||
"Tweet Quotes Relative to Average": 582,
|
||||
"Tweet Likes Relative to Average": 487,
|
||||
"Tweet Bookmarks Relative to Average": 414
|
||||
},
|
||||
"Instagram": {
|
||||
"found": false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Pleated Skirt",
|
||||
"tags": "Pleated",
|
||||
"description": "A collection of stylish pleated skirts, featuring a variety of lengths and fabrics. These skirts have seen a surge in popularity on Twitter, with a remarkable 1233% increase in bookmarks and 892% increase in likes compared to average performance, making them a must-have for fashion enthusiasts.",
|
||||
"images": [
|
||||
"79653bdb7a34aa82d2a9728ef3afbd43.jpg",
|
||||
"PIKADINGNIS-Vintage-Brown-Woolen-Mini-Skirt-Women-Korean-High-Waist-Pleated-Skirts-School-Girl-Uniform-Y2K-All-Match-Jk-Short-Skirt_d98a5da7-2ed5-464a-87f0-762db599626b.98252a8dad2f1fe050c1823a73170650.webp",
|
||||
"zoom_0-1709223803.jpg",
|
||||
"61vj0tzBiJL_AC_UY1000_.jpg",
|
||||
"Customized-New-Arrival-Women-Fashion.webp"
|
||||
],
|
||||
"sources": "Fendi, Burberry",
|
||||
"socialMedia": {
|
||||
"Twitter": {
|
||||
"found": true,
|
||||
"Social Media Influence": 10.45,
|
||||
"Tweet Views": 532550.0,
|
||||
"Tweet Reposts": 3774.0,
|
||||
"Tweet Quotes": 153.0,
|
||||
"Tweet Likes": 12597.0,
|
||||
"Tweet Bookmarks": 507.0,
|
||||
"Tweet Views Relative to Average": 187,
|
||||
"Tweet Reposts Relative to Average": 1008,
|
||||
"Tweet Quotes Relative to Average": 660,
|
||||
"Tweet Likes Relative to Average": 892,
|
||||
"Tweet Bookmarks Relative to Average": 1233
|
||||
},
|
||||
"Instagram": {
|
||||
"found": false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Casual Bomber Jacket",
|
||||
"tags": "Casual, Bomber",
|
||||
"description": "A versatile and stylish bomber jacket perfect for casual wear. This jacket has seen incredible engagement on Twitter, with a staggering 1644% increase in bookmarks and 1362% increase in reposts compared to average performance, making it a popular choice for fashion enthusiasts.",
|
||||
"images": [
|
||||
"8c6f08afde7597605486d9aabe36f380.jpg",
|
||||
"2ea9822e95be6e590172f1ebb56405e9.jpg",
|
||||
"c3caab8842adc1669c16997870ec727e.jpg",
|
||||
"eebd1424bff50fb05f6f5c5b24f9f05e.jpg",
|
||||
"GUEST_9d868e26-4c95-4fc0-ba60-0d5f729f072c.avif"
|
||||
],
|
||||
"sources": "Fendi, HYPEBEAST, VERSACE",
|
||||
"socialMedia": {
|
||||
"Twitter": {
|
||||
"found": true,
|
||||
"Social Media Influence": 10.33,
|
||||
"Tweet Views": 342948.0,
|
||||
"Tweet Reposts": 4886.0,
|
||||
"Tweet Quotes": 176.0,
|
||||
"Tweet Likes": 16314.0,
|
||||
"Tweet Bookmarks": 649.0,
|
||||
"Tweet Views Relative to Average": 149,
|
||||
"Tweet Reposts Relative to Average": 1362,
|
||||
"Tweet Quotes Relative to Average": 856,
|
||||
"Tweet Likes Relative to Average": 1207,
|
||||
"Tweet Bookmarks Relative to Average": 1644
|
||||
},
|
||||
"Instagram": {
|
||||
"found": false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Streetwear Bomber Jacket",
|
||||
"tags": "Streetwear, Bomber",
|
||||
"description": "A stylish and versatile streetwear bomber jacket, perfect for adding a touch of urban cool to any outfit. This jacket has seen incredible engagement on Twitter, with a staggering 1644% increase in bookmarks and 1362% rise in reposts compared to average performance, making it a highly sought-after piece for fashion enthusiasts.",
|
||||
"images": [
|
||||
"1_f99d64f9-1791-4c09-9ebf-0b0739c34e9d.jpg",
|
||||
"e052d4bbbc05e13965c51f7270fc1fff.jpg",
|
||||
"61y391U2BpL_AC_UY1000_.jpg",
|
||||
"61NBZkJtgXL_AC_UY1000_.jpg",
|
||||
"S48d8081e9d0243e094d9446089394befq.avif"
|
||||
],
|
||||
"sources": "Fendi, HYPEBEAST, VERSACE",
|
||||
"socialMedia": {
|
||||
"Twitter": {
|
||||
"found": true,
|
||||
"Social Media Influence": 10.33,
|
||||
"Tweet Views": 342948.0,
|
||||
"Tweet Reposts": 4886.0,
|
||||
"Tweet Quotes": 176.0,
|
||||
"Tweet Likes": 16314.0,
|
||||
"Tweet Bookmarks": 649.0,
|
||||
"Tweet Views Relative to Average": 149,
|
||||
"Tweet Reposts Relative to Average": 1362,
|
||||
"Tweet Quotes Relative to Average": 856,
|
||||
"Tweet Likes Relative to Average": 1207,
|
||||
"Tweet Bookmarks Relative to Average": 1644
|
||||
},
|
||||
"Instagram": {
|
||||
"found": false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Casual Black Midi Skirt",
|
||||
"tags": "Casual, Black, Midi",
|
||||
"description": "A versatile and stylish black midi skirt, perfect for casual occasions. This skirt has seen incredible engagement on Twitter, with a whopping 1216% increase in bookmarks and 885% more likes than average, making it a popular choice for fashion enthusiasts.",
|
||||
"images": [
|
||||
"8d001243e5f77125215f8f5c1216bb9f.jpg",
|
||||
"718533f504b0814b795cf78e014960fc.jpg",
|
||||
"dca2a01cd3c0612e5d37597bb93a7711.jpg",
|
||||
"fd1d4602963b840e92515daf77516b6c.jpg",
|
||||
"13eb48670bd6423057ad54ca8afdb359.jpg"
|
||||
],
|
||||
"sources": "Fendi, Michael Kors, Vogue Magazine",
|
||||
"socialMedia": {
|
||||
"Twitter": {
|
||||
"found": true,
|
||||
"Social Media Influence": 10.08,
|
||||
"Tweet Views": 257997.0,
|
||||
"Tweet Reposts": 3670.0,
|
||||
"Tweet Quotes": 130.0,
|
||||
"Tweet Likes": 12216.0,
|
||||
"Tweet Bookmarks": 487.0,
|
||||
"Tweet Views Relative to Average": 100,
|
||||
"Tweet Reposts Relative to Average": 1006,
|
||||
"Tweet Quotes Relative to Average": 596,
|
||||
"Tweet Likes Relative to Average": 885,
|
||||
"Tweet Bookmarks Relative to Average": 1216
|
||||
},
|
||||
"Instagram": {
|
||||
"found": false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Casual Lace Short White Top",
|
||||
"tags": "Casual, Lace, Short, White",
|
||||
"description": "Effortlessly chic and versatile, this white lace top is a wardrobe essential. Featuring delicate lace detailing and a casual silhouette, it's perfect for both everyday wear and special occasions. The top has seen a significant surge in popularity on Instagram, with a 466% increase in likes and a 58% rise in comments compared to average performance.",
|
||||
"images": [
|
||||
"d845a7ff2fb462900ed42fb3983172c4.jpg",
|
||||
"7f0830ae3c4608ee41df2c92c62d6a43.jpg",
|
||||
"4b9c357607e753da4f6e3e840f6e2814.jpg",
|
||||
"fb85c48efa73bcabf96d343701ec7e73.jpg",
|
||||
"c4659a6246633698bcf5cea58cdcad64.jpg"
|
||||
],
|
||||
"sources": "clara.berry",
|
||||
"socialMedia": {
|
||||
"Twitter": {
|
||||
"found": false
|
||||
},
|
||||
"Instagram": {
|
||||
"found": true,
|
||||
"Social Media Influence": 9.36,
|
||||
"Post Comments": 116.0,
|
||||
"Post Likes": 16172.0,
|
||||
"Post Comments Relative to Average": 58,
|
||||
"Post Likes Relative to Average": 466
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Effortless Summer White Dress",
|
||||
"tags": "Effortless, Summer, White",
|
||||
"description": "Flowing white dresses perfect for warm weather, offering a breezy and chic look. These dresses have seen a surge in popularity on Instagram, with a 252% increase in comments and a 204% rise in likes compared to average performance, making them a must-have for summer style.",
|
||||
"images": [
|
||||
"e31d8d4f8881cbe74ac70335d1c704ca.jpg",
|
||||
"29df71b77b3d94644d9204c6a58b95af.jpg",
|
||||
"e20aeadb740a33b5bdfc7b6d254a4081.jpg",
|
||||
"e3aa7a97db3910b41bba397e24611bcc.jpg",
|
||||
"1e448b21501647a44bc0132018826d4f.jpg"
|
||||
],
|
||||
"sources": "brittanyxavier",
|
||||
"socialMedia": {
|
||||
"Twitter": {
|
||||
"found": false
|
||||
},
|
||||
"Instagram": {
|
||||
"found": true,
|
||||
"Social Media Influence": 8.15,
|
||||
"Post Comments": 22.0,
|
||||
"Post Likes": 419.0,
|
||||
"Post Comments Relative to Average": 252,
|
||||
"Post Likes Relative to Average": 204
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Balloon Cotton Mini Oversized Relaxed White Dress",
|
||||
"tags": "Balloon, Cotton, Mini, Oversized, Relaxed, White",
|
||||
"description": "A comfortable white dress with a relaxed, oversized fit and a charming balloon silhouette. This mini dress has garnered significant attention on Instagram, boasting a 252% increase in comments and a 204% rise in likes compared to average performance, making it a popular choice for effortless style.",
|
||||
"images": [
|
||||
"4adfe85ee8e413e99e2c9aacf5debeea.jpg",
|
||||
"b19a307a1e3eb4a3c4f12a5fecf89042.jpg",
|
||||
"8b7ae1c05641524ed2f7a52326b5fd26.jpg",
|
||||
"c6beeccdb0700aa4e778d0dafd7a4ded.jpg",
|
||||
"4f3ef57efadcb290e7ef89d3c1fbd67b.jpg"
|
||||
],
|
||||
"sources": "brittanyxavier",
|
||||
"socialMedia": {
|
||||
"Twitter": {
|
||||
"found": false
|
||||
},
|
||||
"Instagram": {
|
||||
"found": true,
|
||||
"Social Media Influence": 8.15,
|
||||
"Post Comments": 22.0,
|
||||
"Post Likes": 419.0,
|
||||
"Post Comments Relative to Average": 252,
|
||||
"Post Likes Relative to Average": 204
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Relaxed jacket",
|
||||
"tags": "Relaxed",
|
||||
"description": "Effortlessly stylish and comfortable, these jackets are perfect for a casual yet chic look. With a remarkable 70% increase in bookmarks and a 51% rise in reposts on Twitter, these jackets are clearly a hit with fashion enthusiasts.",
|
||||
"images": [
|
||||
"0b4ab45fb3378a4c708879a8f0b9fad5.jpg",
|
||||
"wf2wht7425_white_a_1024x.jpg",
|
||||
"goods_01_456089.avif",
|
||||
"ugc_stylehint_uq_uk_photo_230331_1068682_r-1000-1333.png",
|
||||
"vngoods_30_469775.avif"
|
||||
],
|
||||
"sources": "PRADA, Burberry, Fendi, HYPEBEAST, Vogue Magazine",
|
||||
"socialMedia": {
|
||||
"Twitter": {
|
||||
"found": true,
|
||||
"Social Media Influence": 7.73,
|
||||
"Tweet Views": 122347.0,
|
||||
"Tweet Reposts": 953.0,
|
||||
"Tweet Quotes": 55.0,
|
||||
"Tweet Likes": 2206.0,
|
||||
"Tweet Bookmarks": 93.0,
|
||||
"Tweet Views Relative to Average": 4,
|
||||
"Tweet Reposts Relative to Average": 51,
|
||||
"Tweet Quotes Relative to Average": 47,
|
||||
"Tweet Likes Relative to Average": 36,
|
||||
"Tweet Bookmarks Relative to Average": 70
|
||||
},
|
||||
"Instagram": {
|
||||
"found": false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Casual Relaxed White Dress",
|
||||
"tags": "Casual, Relaxed, White",
|
||||
"description": "Effortless and chic, these white dresses are perfect for a relaxed yet stylish look. They've seen a surge in popularity on Instagram, with a 51% increase in likes and a 25% boost in comments, proving their appeal to fashion enthusiasts.",
|
||||
"images": [
|
||||
"b7a87f877ec0af661b93fe9e80a9de47.jpg",
|
||||
"ea3d6e53f206f37025ff234af4210eef.jpg",
|
||||
"d9ec8399a2ea00aabd2f4297f9b5d4b9.jpg",
|
||||
"ed99f9e73e5210723e68621c5304b5e8.jpg",
|
||||
"8c08f98b6ca497b9adf0cf8b07649446.jpg"
|
||||
],
|
||||
"sources": "jessicawang, alexandralapp, brittanyxavier, sofievalkiers",
|
||||
"socialMedia": {
|
||||
"Twitter": {
|
||||
"found": false
|
||||
},
|
||||
"Instagram": {
|
||||
"found": true,
|
||||
"Social Media Influence": 6.8,
|
||||
"Post Comments": 31.0,
|
||||
"Post Likes": 1955.0,
|
||||
"Post Comments Relative to Average": 25,
|
||||
"Post Likes Relative to Average": 51
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,11 @@
|
||||
const getConfidence = (media, breakpoint) => {
|
||||
const best = Object.values(media)
|
||||
.filter((med) => med.found)
|
||||
.reduce((prev, current) => {
|
||||
return prev.metric > current.metric ? prev : current;
|
||||
});
|
||||
|
||||
return best.confidence;
|
||||
};
|
||||
|
||||
export default getConfidence;
|
||||
@@ -0,0 +1,52 @@
|
||||
import * as React from 'react';
|
||||
import { Link } from 'gatsby';
|
||||
|
||||
const pageStyles = {
|
||||
color: '#232129',
|
||||
padding: '96px',
|
||||
fontFamily: '-apple-system, Roboto, sans-serif, serif',
|
||||
};
|
||||
const headingStyles = {
|
||||
marginTop: 0,
|
||||
marginBottom: 64,
|
||||
maxWidth: 320,
|
||||
};
|
||||
|
||||
const paragraphStyles = {
|
||||
marginBottom: 48,
|
||||
};
|
||||
const codeStyles = {
|
||||
color: '#8A6534',
|
||||
padding: 4,
|
||||
backgroundColor: '#FFF4DB',
|
||||
fontSize: '1.25rem',
|
||||
borderRadius: 4,
|
||||
};
|
||||
|
||||
function NotFoundPage() {
|
||||
return (
|
||||
<main style={pageStyles}>
|
||||
<h1 style={headingStyles}>Page not found</h1>
|
||||
<p style={paragraphStyles}>
|
||||
Sorry 😔, we couldn’t find what you were looking for.
|
||||
<br />
|
||||
{process.env.NODE_ENV === 'development' ? (
|
||||
<>
|
||||
<br />
|
||||
Try creating a page in <code style={codeStyles}>src/pages/</code>
|
||||
.
|
||||
<br />
|
||||
</>
|
||||
) : null}
|
||||
<br />
|
||||
<Link to="/">Go home</Link>.
|
||||
</p>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
export default NotFoundPage;
|
||||
|
||||
export function Head() {
|
||||
return <title>Not found</title>;
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import * as React from 'react';
|
||||
import { Link } from 'gatsby';
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
export default Home;
|
||||
@@ -0,0 +1,78 @@
|
||||
import * as React from "react";
|
||||
import {graphql, Link} from "gatsby";
|
||||
import Breadcrumbs from "../../components/Breadcrumbs/Breadcrumbs";
|
||||
import Listing from "../../components/Listing/Listing";
|
||||
|
||||
const List = ({data, location}) => {
|
||||
const products = data.allDataJson.nodes;
|
||||
const images = data.allImageSharp.nodes;
|
||||
|
||||
return (
|
||||
<main>
|
||||
<Breadcrumbs location={location.pathname} label="Insights"/>
|
||||
<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">
|
||||
Women’s Fashion
|
||||
</Link>
|
||||
</div>
|
||||
<Listing products={products} images={images}/>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
export const query = graphql`
|
||||
query {
|
||||
allDataJson {
|
||||
nodes {
|
||||
name
|
||||
images
|
||||
tags
|
||||
description
|
||||
socialMedia {
|
||||
Twitter {
|
||||
Social_Media_Influence
|
||||
Tweet_Bookmarks
|
||||
Tweet_Bookmarks_Relative_to_Average
|
||||
Tweet_Likes
|
||||
Tweet_Likes_Relative_to_Average
|
||||
Tweet_Quotes
|
||||
Tweet_Quotes_Relative_to_Average
|
||||
Tweet_Reposts
|
||||
Tweet_Reposts_Relative_to_Average
|
||||
Tweet_Views
|
||||
Tweet_Views_Relative_to_Average
|
||||
found
|
||||
}
|
||||
Instagram {
|
||||
Post_Comments
|
||||
Post_Comments_Relative_to_Average
|
||||
Post_Likes
|
||||
Post_Likes_Relative_to_Average
|
||||
Social_Media_Influence
|
||||
found
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
allImageSharp(sort: { original: { src: ASC } }) {
|
||||
nodes {
|
||||
gatsbyImageData(
|
||||
width: 400
|
||||
height: 500
|
||||
placeholder: BLURRED
|
||||
transformOptions: { cropFocus: CENTER, fit: COVER }
|
||||
)
|
||||
fluid {
|
||||
originalName
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default List;
|
||||
@@ -0,0 +1,19 @@
|
||||
.badge {
|
||||
@extend .poppins-medium;
|
||||
height: 25px;
|
||||
line-height: 24px;
|
||||
border-radius: 4px;
|
||||
padding: 0 6px;
|
||||
border: .5px solid #D9D9D9;
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
background-color: #FAFAFA;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #484848;
|
||||
margin-bottom: 5px;
|
||||
|
||||
&--source {
|
||||
background: #EEE7F7;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
.box {
|
||||
box-shadow: 0 40px 90px rgba(0, 0, 0, 0.06);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
.breadcrumb {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
&__list {
|
||||
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
|
||||
&__link {
|
||||
font-size: 12px;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&__separator {
|
||||
transform: rotate(45deg);
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
border-top: 1px solid #000;
|
||||
border-right: 1px solid #000;
|
||||
margin: 0 16px;
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
@import '../fonts/poppins';
|
||||
|
||||
.button {
|
||||
@extend .poppins-regular;
|
||||
height: 56px;
|
||||
line-height: 52px;
|
||||
border-radius: 10px;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
min-width: 200px;
|
||||
cursor: pointer;
|
||||
border: 2px solid #000;
|
||||
|
||||
&__primary {
|
||||
color: #000;
|
||||
transition: all .3s ease;
|
||||
|
||||
&:hover, &.active {
|
||||
border-color: transparent;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
&.active {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__secondary {
|
||||
color: #FFF;
|
||||
background-color: #000;
|
||||
transition: all .3s ease;
|
||||
box-shadow: 0 20px 35px 0 rgba(0, 0, 0, 0.15);
|
||||
display: inline-block;
|
||||
|
||||
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
background: #444;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
.checkbox {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
margin: 0;
|
||||
|
||||
+ label {
|
||||
position: relative;
|
||||
padding-left: 28px;
|
||||
font-weight: 500;
|
||||
color: #8A8A8A;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
//border: 1px solid #484848;
|
||||
border-radius: 4px;
|
||||
//box-shadow: 0 1px 3px 0 rgba(43, 33, 30, 0.08);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ label {
|
||||
color: #484848;
|
||||
|
||||
&:before {
|
||||
background: #484848;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
background-image: url('data:image/svg+xml,%3Csvg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M11.1382 0.195262C11.3985 0.455612 11.3985 0.877722 11.1382 1.13807L4.47149 7.80474C4.21114 8.06509 3.78903 8.06509 3.52868 7.80474L0.86201 5.13807C0.601661 4.87772 0.601661 4.45561 0.86201 4.19526C1.12236 3.93491 1.54447 3.93491 1.80482 4.19526L4.00008 6.39052L10.1953 0.195262C10.4557 -0.0650874 10.8778 -0.0650874 11.1382 0.195262Z" fill="%23FFF"/%3E%3C/svg%3E');
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
:root {
|
||||
--rt-opacity: 1 !important;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 20px;
|
||||
font-size: 16px;
|
||||
overflow: auto;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
|
||||
@include lg {
|
||||
padding: 120px 20px;
|
||||
}
|
||||
|
||||
@include xl {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
position: relative;
|
||||
padding-top: 70px;
|
||||
|
||||
@include lg {
|
||||
padding-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.text-container {
|
||||
margin: 0 auto;
|
||||
max-width: 735px;
|
||||
color: #8A8A8A;
|
||||
text-align: center;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.skip-to-content-link {
|
||||
left: 50%;
|
||||
top: -10%;
|
||||
position: absolute;
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
.product-card {
|
||||
box-shadow: 0 40px 90px rgba(0, 0, 0, 0.06);
|
||||
border-radius: 10px;
|
||||
//overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
@include lg {
|
||||
display: flex;
|
||||
height: 260px;
|
||||
}
|
||||
|
||||
&__data {
|
||||
flex: 1 1 auto;
|
||||
padding: 42px 42px 90px 42px;
|
||||
position: relative;
|
||||
|
||||
h2 {
|
||||
cursor: pointer;
|
||||
padding-right: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #8A8A8A;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
&__information {
|
||||
@extend .volkhov-bold-italic;
|
||||
font-size: 20px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: #000;
|
||||
position: absolute;
|
||||
top: 42px;
|
||||
right: 42px;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__confidence {
|
||||
&-container {
|
||||
position: absolute;
|
||||
bottom: 42px;
|
||||
left: 42px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,162 @@
|
||||
.product {
|
||||
position: relative;
|
||||
|
||||
@include lg {
|
||||
display: flex;
|
||||
gap: 65px;
|
||||
height: 640px;
|
||||
margin-top: 90px;
|
||||
}
|
||||
|
||||
&__slider {
|
||||
|
||||
@include lg {
|
||||
flex: 1 1 auto;
|
||||
max-width: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
&__data {
|
||||
position: relative;
|
||||
|
||||
&--desktop {
|
||||
flex: 0 1 460px;
|
||||
padding: 38px 0;
|
||||
|
||||
.product {
|
||||
&__title, &__subtitle, &__confidence {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include lg {
|
||||
border: 1px solid #D9D9D9;
|
||||
padding: 38px 32px;
|
||||
|
||||
.product {
|
||||
&__title, &__subtitle, &__confidence {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--mobile {
|
||||
border: none;
|
||||
|
||||
@include lg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
@extend .poppins-medium;
|
||||
font-size: 30px;
|
||||
text-align: left;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #8A8A8A;
|
||||
}
|
||||
|
||||
&__badge-list {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
&__description {
|
||||
@extend .poppins-medium;
|
||||
font-size: 12px;
|
||||
margin: 16px 0;
|
||||
line-height: 26px;
|
||||
color: #484848;
|
||||
|
||||
}
|
||||
|
||||
&__confidence {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #8A8A8A;
|
||||
margin-bottom: 28px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__media {
|
||||
&-item {
|
||||
line-height: 36px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-slider {
|
||||
height: 550px;
|
||||
width: auto;
|
||||
|
||||
@include sm {
|
||||
height: 580px;
|
||||
}
|
||||
|
||||
@include lg {
|
||||
position: relative;
|
||||
height: 640px;
|
||||
width: 640px;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-list {
|
||||
border: 1px solid rgba(217, 217, 217, 1);
|
||||
height: 480px;
|
||||
|
||||
@include lg {
|
||||
width: 480px;
|
||||
}
|
||||
|
||||
@include md {
|
||||
margin-right: 98px;
|
||||
height: 640px;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-dots {
|
||||
position: relative;
|
||||
margin-top: 20px;
|
||||
bottom: 0;
|
||||
|
||||
@include md {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 94px;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
overflow: hidden;
|
||||
margin: 0 5px;
|
||||
border: 1px solid rgba(217, 217, 217, 1);
|
||||
width: 15%;
|
||||
height: 50px;
|
||||
|
||||
@include sm {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
@include md {
|
||||
width: 94px;
|
||||
height: 114px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@include lg {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
&.slick-active {
|
||||
border: 2px solid rgba(0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
*/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
.slick-slider {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
@include lg {
|
||||
height: 260px;
|
||||
width: 620px;
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
right: 30px;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-bottom: 2px solid #000;
|
||||
border-right: 2px solid #000;
|
||||
display: block;
|
||||
position: relative;
|
||||
left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-prev {
|
||||
left: 30px;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
transform: rotate(-135deg);
|
||||
border-top: 2px solid #000;
|
||||
border-right: 2px solid #000;
|
||||
display: block;
|
||||
position: relative;
|
||||
left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-prev, .slick-next {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 50%;
|
||||
|
||||
&:hover, &:focus, &:active {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
.tooltip {
|
||||
&__data {
|
||||
display: flex;
|
||||
line-height: 26px;
|
||||
|
||||
div {
|
||||
&:first-child {
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
b {
|
||||
@extend .poppins-semibold;
|
||||
}
|
||||
}
|
||||
|
||||
&--Social_Media_Influence {
|
||||
@extend .poppins-semibold;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid #D9D9D9;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
display: inline-block;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
//margin-bottom: 6px;
|
||||
}
|
||||
|
||||
&__information {
|
||||
@extend .volkhov-bold-italic;
|
||||
border-radius: 50%;
|
||||
top: 42px;
|
||||
right: 42px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background-color: #FAFAFA;
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
font-size: 12px;
|
||||
color: #484848;
|
||||
line-height: 18px;
|
||||
margin-left: 8px;
|
||||
border: .5px solid #D9D9D9;
|
||||
}
|
||||
|
||||
&__confidence {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #8A8A8A;
|
||||
text-transform: capitalize;
|
||||
display: inline-block;
|
||||
margin-top: 15px;
|
||||
|
||||
&--high, &--average, &--low {
|
||||
&:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
vertical-align: bottom;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&--high {
|
||||
&:before {
|
||||
background: #70E9C7;
|
||||
}
|
||||
}
|
||||
|
||||
&--average {
|
||||
&:before {
|
||||
background: #EADF3D;
|
||||
}
|
||||
}
|
||||
|
||||
&--low {
|
||||
&:before {
|
||||
background: #EA653D;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
@import '../fonts/poppins';
|
||||
@import '../fonts/volkhov';
|
||||
@import '../helpers/space';
|
||||
|
||||
body {
|
||||
@extend .poppins-regular;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@extend .volkhov-regular;
|
||||
font-size: 40px;
|
||||
text-align: center;
|
||||
color: #484848;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@extend .poppins-medium;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@extend .poppins-medium;
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
.poppins-regular {
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.poppins-medium {
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.poppins-semibold {
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.poppins-bold {
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
.volkhov-regular {
|
||||
font-family: "Volkhov", serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.volkhov-bold-italic {
|
||||
font-family: "Volkhov", serif;
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
$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} {
|
||||
margin-#{$side}: #{$space}px !important;
|
||||
}
|
||||
|
||||
.p-#{str-slice($side, 0, 1)}-#{$space} {
|
||||
padding-#{$side}: #{$space}px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
@import "../variables/breakpoints";
|
||||
|
||||
@mixin sm {
|
||||
@media (min-width: #{$screen-sm-min}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin md {
|
||||
@media (min-width: #{$screen-md-min}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lg {
|
||||
@media (min-width: #{$screen-lg-min}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin xl {
|
||||
@media (min-width: #{$screen-xl-min}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
@import "./mixins/media-queries";
|
||||
|
||||
@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";
|
||||
@@ -0,0 +1,4 @@
|
||||
$screen-sm-min: 576px;
|
||||
$screen-md-min: 768px;
|
||||
$screen-lg-min: 992px;
|
||||
$screen-xl-min: 1200px;
|
||||
@@ -0,0 +1,129 @@
|
||||
import * as React from 'react';
|
||||
import Slider from 'react-slick';
|
||||
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';
|
||||
|
||||
function ProductPage({location, pageContext, data}) {
|
||||
const settings = {
|
||||
customPaging(i) {
|
||||
return (
|
||||
<a>
|
||||
<GatsbyImage
|
||||
image={images[i].gatsbyImageData}
|
||||
alt={`${name} image thumb ${i}`}
|
||||
/>
|
||||
</a>
|
||||
);
|
||||
},
|
||||
dots: true,
|
||||
infinite: false,
|
||||
speed: 500,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
nextArrow: <></>,
|
||||
prevArrow: <></>,
|
||||
};
|
||||
|
||||
const images = data.allImageSharp.nodes;
|
||||
|
||||
const MEDIA_LIST = ['TalkWalker', 'Twitter', 'Instagram', 'Google Search'];
|
||||
|
||||
const {name, tags, sources, description, socialMedia} = pageContext.data;
|
||||
|
||||
return (
|
||||
<main>
|
||||
<Breadcrumbs location={location.pathname} label={name}/>
|
||||
<div className="product">
|
||||
<div className="product__data product__data--mobile">
|
||||
<h1 className="product__title">{name}</h1>
|
||||
<p className="product__subtitle">Current Trend</p>
|
||||
<div
|
||||
className={`product__confidence product__confidence--${getConfidence(socialMedia)}`}
|
||||
>
|
||||
<SocialMediaTooltips product={pageContext.data}/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="product__slider">
|
||||
<Slider {...settings}>
|
||||
{images.map((image, index) => (
|
||||
<GatsbyImage
|
||||
key={index}
|
||||
image={image.gatsbyImageData}
|
||||
alt={`${name} image ${index}`}
|
||||
/>
|
||||
))}
|
||||
</Slider>
|
||||
</div>
|
||||
<div className="product__data product__data--desktop">
|
||||
<h1 className="product__title">{name}</h1>
|
||||
<p className="product__subtitle">Current Signal</p>
|
||||
<div
|
||||
className={`product__confidence product__confidence--${getConfidence(socialMedia)}`}
|
||||
>
|
||||
<SocialMediaTooltips product={pageContext.data}/>
|
||||
</div>
|
||||
<div className="product__badge-list">
|
||||
{tags.split(",").map((tag, index) => (
|
||||
<Badge tag={tag} key={`badge_${index}`}/>
|
||||
))}
|
||||
</div>
|
||||
<div className="product__badge-list">
|
||||
|
||||
{sources.split(",").map((source, index) => (
|
||||
<Badge tag={source} key={`badge_${index}`} isSource={true}/>
|
||||
))}
|
||||
</div>
|
||||
<p className="product__description">{description}</p>
|
||||
<ul className="product__media">
|
||||
{MEDIA_LIST
|
||||
.sort((prev, current) => socialMedia[current] ? socialMedia[current]?.Social_Media_Influence - socialMedia[prev]?.Social_Media_Influence : -1)
|
||||
.map((media, index) => (
|
||||
<li className="product__media-item" key={`media_${index}`}>
|
||||
<input
|
||||
id={media.replace(' ', '')}
|
||||
type="checkbox"
|
||||
checked={socialMedia[media]?.found}
|
||||
className="checkbox"
|
||||
disabled
|
||||
/>
|
||||
<label
|
||||
htmlFor={media.replace(' ', '')}>{media}</label>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProductPage;
|
||||
|
||||
export const query = graphql`
|
||||
query ProductImages($images: [String]) {
|
||||
allImageSharp(
|
||||
sort: { original: { src: ASC } }
|
||||
filter: { fluid: { originalName: { in: $images } } }
|
||||
) {
|
||||
nodes {
|
||||
gatsbyImageData(
|
||||
width: 600
|
||||
height: 800
|
||||
placeholder: BLURRED
|
||||
transformOptions: { cropFocus: CENTER, fit: COVER }
|
||||
)
|
||||
fluid {
|
||||
originalName
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
Reference in New Issue
Block a user