diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css index 4dbb8f041..a7475fd9e 100644 --- a/components/product/ProductCard/ProductCard.module.css +++ b/components/product/ProductCard/ProductCard.module.css @@ -1,5 +1,5 @@ .root { - @apply relative w-full p-6 box-border overflow-hidden; + @apply relative w-full p-6 box-border overflow-hidden bg-no-repeat bg-center bg-cover transition ease-linear; } .productTitle { @@ -7,7 +7,7 @@ max-width: calc(100% - 50px); @screen lg { - @apply text-xl; + @apply text-2xl; } } @@ -16,5 +16,5 @@ } .wishlistButton { - @apply w-14 h-14 flex items-center justify-center bg-white text-black font-semibold inline-block text-sm leading-6; + @apply w-14 h-14 flex items-center justify-center bg-white text-black font-semibold inline-block text-sm leading-6 cursor-pointer; } diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx index f47630dc1..352292f9c 100644 --- a/components/product/ProductCard/ProductCard.tsx +++ b/components/product/ProductCard/ProductCard.tsx @@ -2,10 +2,11 @@ import cn from 'classnames' import s from './ProductCard.module.css' import { FC } from 'react' import { Heart } from '@components/icon' +import { url } from 'inspector' interface Props { className?: string children?: any - productData: ProductData + node: ProductData } interface ProductData { @@ -14,12 +15,18 @@ interface ProductData { prices: any } -const ProductCard: FC = ({ className, productData }) => { +const ProductCard: FC = ({ className, node: productData }) => { const rootClassName = cn(s.root, className) return ( -
- {/* Overlay */} +
@@ -35,13 +42,6 @@ const ProductCard: FC = ({ className, productData }) => {
- - {/*
*/} - {/* */} - {/*
*/}
) } diff --git a/components/ui/Container/Container.module.css b/components/ui/Container/Container.module.css index 0db8285ef..c16930f28 100644 --- a/components/ui/Container/Container.module.css +++ b/components/ui/Container/Container.module.css @@ -1,5 +1,5 @@ .root { - @apply mx-auto px-2; + @apply mx-auto max-w-screen-xl mx-auto px-6 sm:px-4 lg:px-10; display: inherit; max-width: 1440px; } diff --git a/components/ui/Hero/Hero.module.css b/components/ui/Hero/Hero.module.css new file mode 100644 index 000000000..ee88ea18e --- /dev/null +++ b/components/ui/Hero/Hero.module.css @@ -0,0 +1,3 @@ +.root { + @apply bg-black py-12; +} diff --git a/components/ui/Hero/Hero.tsx b/components/ui/Hero/Hero.tsx new file mode 100644 index 000000000..d5df6b1d5 --- /dev/null +++ b/components/ui/Hero/Hero.tsx @@ -0,0 +1,27 @@ +import cn from 'classnames' +import React, { FC } from 'react' +import s from './Hero.module.css' +import { Container } from '@components/ui' +interface Props { + className?: string + headline: string + description: string +} + +const Hero: FC = ({ headline, description, className }) => { + const rootClassName = cn(s.root, className) + return ( +
+ +
+

+ {headline} +

+

{description}

+
+
+
+ ) +} + +export default Hero diff --git a/components/ui/Hero/index.ts b/components/ui/Hero/index.ts new file mode 100644 index 000000000..b08fa5ac8 --- /dev/null +++ b/components/ui/Hero/index.ts @@ -0,0 +1 @@ +export { default } from './Hero' diff --git a/components/ui/Marquee/Marquee.module.css b/components/ui/Marquee/Marquee.module.css index 57f63bede..0d8fad7b6 100644 --- a/components/ui/Marquee/Marquee.module.css +++ b/components/ui/Marquee/Marquee.module.css @@ -1,5 +1,5 @@ .root { - @apply bg-white py-10 flex flex-row w-full; + @apply bg-white py-10 w-full relative flex flex-row; } .primary { diff --git a/components/ui/Marquee/Marquee.tsx b/components/ui/Marquee/Marquee.tsx index 8986ccf3c..8ed18242e 100644 --- a/components/ui/Marquee/Marquee.tsx +++ b/components/ui/Marquee/Marquee.tsx @@ -1,6 +1,7 @@ import cn from 'classnames' import s from './Marquee.module.css' import { FC } from 'react' +import Ticker from 'react-ticker' interface Props { className?: string @@ -12,7 +13,7 @@ interface Props { const DefaultWrapper: FC = ({ children }) =>
{children}
// DEFAULT PRODUCT WRAPPER -const Marquee: FC = ({ +const M: FC = ({ className = '', items, wrapper: Component = DefaultWrapper, @@ -26,13 +27,22 @@ const Marquee: FC = ({ }, className ) + + const flickityOptions = { + initialIndex: 2, + } + return ( -
- {items.map((p: any) => ( - - ))} -
+ + {({ index }) => ( +
+ {items.map((p: any) => ( + + ))} +
+ )} +
) } -export default Marquee +export default M diff --git a/components/ui/index.ts b/components/ui/index.ts index ee34f5658..a5a097c62 100644 --- a/components/ui/index.ts +++ b/components/ui/index.ts @@ -4,3 +4,4 @@ export { default as Sidebar } from './Sidebar' export { default as Logo } from './Logo' export { default as Grid } from './Grid' export { default as Marquee } from './Marquee' +export { default as Hero } from './Hero' diff --git a/package.json b/package.json index 49e51fe5b..0a4bae0f4 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "postcss-nesting": "^7.0.1", "react": "^16.13.1", "react-dom": "^16.13.1", + "react-ticker": "^1.2.2", "swr": "^0.3.3" }, "devDependencies": { diff --git a/pages/index.tsx b/pages/index.tsx index 966add239..a975794d0 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,7 +1,8 @@ import { GetStaticPropsContext, InferGetStaticPropsType } from 'next' import getAllProducts from '@lib/bigcommerce/api/operations/get-all-products' import { Layout } from '@components/core' -import { Grid, Marquee } from '@components/ui' +import { Grid, Marquee, Hero } from '@components/ui' +import { ProductCard } from '@components/product' export async function getStaticProps({ preview }: GetStaticPropsContext) { const { products } = await getAllProducts() @@ -15,22 +16,24 @@ export default function Home({ }: InferGetStaticPropsType) { return ( <> - + ( -
- - +
+
+ +
+ {p.node.name}
)} /> - + )} /> -
-

A very long title with a nice description

+ +
+
+ ALL CATEGORIES ACCESSORIES BAGS CLOTHING SHOES ALL DESIGNERS 032c 1017 + ALYX 9SM 11 by Boris Bidjan Saberi 132 5. ISSEY MIYAKE 3.1 Phillip Lim + 424 99% IS A-COLD-WALL* A.P.C. AAPE by A Bathing Ape Acne Studios + ACRONYM adidas Originals adidas Originals x Pharrell Williams Affix + AGR Ahluwalia Aimé Leon Dore Alan Crocetti Alexander McQueen All Blues + Ambush AMI Alexandre Mattiussi Amiri Andersson Bell Ann Demeulemeester + Aries Article No. Asics Awake NY Axel Arigato Balenciaga Balmain Bao + Bao Issey Miyake BAPE Barena Bather BEAMS PLUS Belstaff Benjamin Edgar + Bianca Saunders Billionaire Boys Club Blackmerle Bless Bleue Burnham + Bode Boris Bidjan Saberi Boss both Bottega Veneta Brain Dead Brioni + Burberry C.P. Company C2H4 Calvin Klein Underwear Canada Goose + Carhartt Work In Progress Carlota Barrera Carne Bollente Casablanca + Castañer CDLP Charles Jeffrey Loverboy Chemist Creations Chin Teo + Christian Louboutin Clarks Originals Coach 1941 Comme des Garçons + Homme Comme des Garçons Homme Deux Comme des Garçons Homme Plus Comme + des Garçons Play Comme des Garçons Shirt Comme des Garçons Wallets + Common Projects Converse Cornerstone Côte & Ciel Craig Green Cutler + And Gross Daniel W. Fletcher Dear Letterman Diesel Diesel Red Tag Dion + Lee Dior Homme District Vision Dita Dolce & Gabbana Double Rainbouu + Doublet Dr. Martens Drake's Dries Van Noten Dsquared2 Dunhill Eastpak + Eastwood Danso Eidos Emanuele Bicocchi Enfants Riches Déprimés + Ermenegildo Zegna Essentials Etro Études Eytys Fear of God Fendi Feng + Chen Wang Frame FREI-MUT Frenckenberger Fumito Ganryu Garrett Leight + GCDS Georges Wendell Giorgio Armani Giuseppe Zanotti Givenchy GmbH + Golden Goose Goodfight GR10K Greg Lauren Grey Ant Gucci Guidi Haider + Ackermann Han Kjobenhavn Harmony Harris Wharf London Hatton Labs + Helmut Lang Herno Heron Preston Hoka One One Homme Plissé Issey Miyake + Hugo Human Recreational Services Husbands IN GOLD WE TRUST PARIS + Innerraum Isabel Benenato Isabel Marant Issey Miyake Men Jacquemus + JACQUES Jan-Jan Van Essche JERIH Jil Sander John Elliott + Johnlawrencesullivan Julius Junghans Junya Watanabe Juun.J JW Anderson + Kanuk Kara Kassl Editions Keenkee Kenzo Kiko Kostadinov Ksubi Kuboraum + Lacoste Landlord Lanvin Le Gramme Lemaire Levi's Levi's Made & Crafted + Levi's Vintage Clothing Loewe Ludovic de Saint Sernin Mackage Maison + Kitsuné Maison Margiela Malibu Sandals Marc Jacobs Marcelo Burlon + County of Milan Marine Serre Marni Marsèll Martin Asbjorn Martine Ali + Martine Rose Master & Dynamic Master-Piece Co mastermind WORLD Matsuda + Maximum Henry MCQ McQ Alexander McQueen Miharayasuhiro MISBHV Missoni + Molly Goddard Moncler Moncler Genius Moncler Grenoble Moschino Moussy + Vintage Mowalola Mr & Mrs Italy MSGM Mugler Museum of Peace & Quiet + Mykita N.Hoolywood Naked & Famous Denim NAMESAKE Nanamica Nanushka + Needles Neighborhood Neil Barrett New Balance Nicholas Daley Nike ACG + Noah NYC nonnative Noon Goons Norse Projects Nudie Jeans OAMC + Off-White Officine Creative Officine Générale Oliver Peoples Oliver + Peoples The Row Opening Ceremony Our Legacy Paco Rabanne Palm Angels + Parajumpers Paul Smith Pearls Before Swine Perks and Mini Persol + Phipps Polo Ralph Lauren Port Tanger PS by Paul Smith Pyer Moss R13 + RAEN Raf Simons rag & bone Random Identities Ray-Ban Re/Done Reebok + Classics RETROSUPERFUTURE Rhude Rick Owens Rick Owens Drkshdw ROA + Robert Geller Rochambeau S.R. STUDIO. LA. CA. Sacai Saint Laurent + Salomon Salvatore Ferragamo Sankuanz Sasquatchfabrix. Satisfy + Saturdays NYC Saul Nash Sean Suen Second/Layer Shinola Sies Marjan + Snow Peak Solid Homme Song for the Mute St-Henri Stay Made Stella + McCartney Stolen Girlfriends Club Stone Island Stone Island Shadow + Project Stüssy Stutterheim Suicoke Sulvam Sunflower Sunspel + SWEETLIMEJUICE TAKAHIROMIYASHITA TheSoloist. Tekla Telfar The Elder + Statesman The North Face The Row The Very Warm The Viridi-anne Thom + Browne Tibi Tiger of Sweden Tiger of Sweden Jeans Toga Virilis Tom + Ford Tom Wood Toogood Ugo Cacciatori Undercover Valentino Vans + Veilance Versace Versace Jeans Couture Versace Underwear VETEMENTS VIP + Visvim VIU Vyner Articles WACKO MARIA We11done Wood Wood Wooyoungmi + WWW.WILLSHOTT Xander Zhou Y-3 Y/Project Yohji Yamamoto Yves Salomon + Yves Salomon - Army Z Zegna +
) diff --git a/yarn.lock b/yarn.lock index 58b4345ec..eb9bfedcc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3072,6 +3072,11 @@ des.js@^1.0.0: inherits "^2.0.1" minimalistic-assert "^1.0.0" +desandro-matches-selector@^2.0.0: + version "2.0.2" + resolved "https://registry.yarnpkg.com/desandro-matches-selector/-/desandro-matches-selector-2.0.2.tgz#717beed4dc13e7d8f3762f707a6d58a6774218e1" + integrity sha1-cXvu1NwT59jzdi9wem1YpndCGOE= + detect-indent@^6.0.0: version "6.0.0" resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.0.0.tgz#0abd0f549f69fc6659a254fe96786186b6f528fd" @@ -3385,6 +3390,11 @@ esutils@^2.0.2: resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64" integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g== +ev-emitter@^1.0.0, ev-emitter@^1.0.1, ev-emitter@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/ev-emitter/-/ev-emitter-1.1.1.tgz#8f18b0ce5c76a5d18017f71c0a795c65b9138f2a" + integrity sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q== + event-target-shim@^5.0.0: version "5.0.1" resolved "https://registry.yarnpkg.com/event-target-shim/-/event-target-shim-5.0.1.tgz#5d4d3ebdf9583d63a5333ce2deb7480ab2b05789" @@ -3602,11 +3612,30 @@ find-up@^4.0.0, find-up@^4.1.0: locate-path "^5.0.0" path-exists "^4.0.0" +fizzy-ui-utils@^2.0.7: + version "2.0.7" + resolved "https://registry.yarnpkg.com/fizzy-ui-utils/-/fizzy-ui-utils-2.0.7.tgz#7df45dcc4eb374a08b65d39bb9a4beedf7330505" + integrity sha512-CZXDVXQ1If3/r8s0T+v+qVeMshhfcuq0rqIFgJnrtd+Bu8GmDmqMjntjUePypVtjHXKJ6V4sw9zeyox34n9aCg== + dependencies: + desandro-matches-selector "^2.0.0" + flatten@^1.0.2: version "1.0.3" resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.3.tgz#c1283ac9f27b368abc1e36d1ff7b04501a30356b" integrity sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg== +flickity@^2.2.1: + version "2.2.1" + resolved "https://registry.yarnpkg.com/flickity/-/flickity-2.2.1.tgz#81126e3d656cb54577358a5f959ffdbda088e670" + integrity sha512-fCZJGNqabgDrIhaUBqt2ydE8c5V6iiB3KQAf6dH3Z45MoDUm7g6+uZmteN0aLV9pzVItNqCbfOJQjsJM/rHuSA== + dependencies: + desandro-matches-selector "^2.0.0" + ev-emitter "^1.1.1" + fizzy-ui-utils "^2.0.7" + get-size "^2.0.3" + unidragger "^2.3.0" + unipointer "^2.3.0" + for-in@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80" @@ -3701,6 +3730,11 @@ get-caller-file@^2.0.1, get-caller-file@^2.0.5: resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e" integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg== +get-size@^2.0.3: + version "2.0.3" + resolved "https://registry.yarnpkg.com/get-size/-/get-size-2.0.3.tgz#54a1d0256b20ea7ac646516756202769941ad2ef" + integrity sha512-lXNzT/h/dTjTxRbm9BXb+SGxxzkm97h/PCIKtlN/CBCxxmkkIVV21udumMS93MuVTDX583gqc94v3RjuHmI+2Q== + get-stream@^4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-4.1.0.tgz#c1b255575f3dc21d59bfc79cd3d2b46b1c3a54b5" @@ -4019,6 +4053,13 @@ ignore@^5.1.4: resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57" integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw== +imagesloaded@^4.1.4: + version "4.1.4" + resolved "https://registry.yarnpkg.com/imagesloaded/-/imagesloaded-4.1.4.tgz#1376efcd162bb768c34c3727ac89cc04051f3cc7" + integrity sha512-ltiBVcYpc/TYTF5nolkMNsnREHW+ICvfQ3Yla2Sgr71YFwQ86bDwV9hgpFhFtrGPuwEx5+LqOHIrdXBdoWwwsA== + dependencies: + ev-emitter "^1.0.0" + immutable@~3.7.6: version "3.7.6" resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.7.6.tgz#13b4d3cb12befa15482a26fe1b2ebae640071e4b" @@ -5961,7 +6002,7 @@ promise@^7.1.1: dependencies: asap "~2.0.3" -prop-types@15.7.2, prop-types@^15.6.2: +prop-types@15.7.2, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -6055,16 +6096,35 @@ react-dom@^16.13.1: prop-types "^15.6.2" scheduler "^0.19.1" +react-flickity-component@^3.5.0: + version "3.5.0" + resolved "https://registry.yarnpkg.com/react-flickity-component/-/react-flickity-component-3.5.0.tgz#cc4d5ae2dcd8a37c3b95775946d7f4ae7843ea1a" + integrity sha512-79REAm9HRT7R+ksLA1kqzPqlntrzD7JBortIAKRoC36/BgXBfzOOF99tCGvptZvew0bMrHTkEzsFv9iSfW6wbA== + dependencies: + fbjs "^1.0.0" + imagesloaded "^4.1.4" + prop-types "^15.7.2" + react-is@16.13.1, react-is@^16.8.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +react-marquee-slider@^1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/react-marquee-slider/-/react-marquee-slider-1.1.2.tgz#a3df0201d17ee7b20627944c7efd8af78522bc6d" + integrity sha512-Fjkwphr+vYqR4yJ9adv0rJgFsKeb5/kx35lA5gVdPFiBDno6r/nHVRg/gdGVLp/SF4dHwoJwZBwa4mKTOpHnqQ== + react-refresh@0.8.3: version "0.8.3" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f" integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg== +react-ticker@^1.2.2: + version "1.2.2" + resolved "https://registry.yarnpkg.com/react-ticker/-/react-ticker-1.2.2.tgz#12cda5ff8266c6fe90ffcd8c58e12ba1596ddf24" + integrity sha512-PXUujoPJvajxwOfosuuujlrBUrjgGp4FB4haWFOI25ujhMppW4SuLkiOdQ9AylrWN3yTHWdk2kbQWe3n9SjFGA== + react@^16.13.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e" @@ -7109,6 +7169,13 @@ unicode-property-aliases-ecmascript@^1.0.4: resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz#dd57a99f6207bedff4628abefb94c50db941c8f4" integrity sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg== +unidragger@^2.3.0: + version "2.3.1" + resolved "https://registry.yarnpkg.com/unidragger/-/unidragger-2.3.1.tgz#2e8c34feff61affa96dc895234ddfc1ea4ec7515" + integrity sha512-u+IgG7AG0MXJTKcdzAIYxCm+W5FcnA9M28203Awl6jIcE3/+9OtEyUX4Wv64y7XNKEVRKPot52IV4V6x7FlF5Q== + dependencies: + unipointer "^2.3.0" + union-value@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.1.tgz#0b6fe7b835aecda61c6ea4d4f02c14221e109847" @@ -7119,6 +7186,13 @@ union-value@^1.0.0: is-extendable "^0.1.1" set-value "^2.0.1" +unipointer@^2.3.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/unipointer/-/unipointer-2.3.0.tgz#ba0dc462ce31c2a88e80810e19c3bae0ce47ed9f" + integrity sha512-m85sAoELCZhogI1owtJV3Dva7GxkHk2lI7A0otw3o0OwCuC/Q9gi7ehddigEYIAYbhkqNdri+dU1QQkrcBvirQ== + dependencies: + ev-emitter "^1.0.1" + uniq@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"