feat: 🎸 images optimized to webp

ecommerce-store-website/src/base/nft-data-store.js

@@ -18,7 +18,7 @@ export default [
 				ref: "stl-bayc",
 				metaUrl: "https://gateway.pinata.cloud/ipfs/QmXdnWNa2CaRCUa4jMTirmkVJkygr2LtnccSuDY3yXrvVm/bayc_1013.json",
 				ipfs: "https://gateway.pinata.cloud/ipfs/QmWiozg1axUSpVowzdTvb5vq7pZyERvAFcTeT8qTojq6qe",
-				imagePath: "/nfts/tokens/images/BAYC_1013.png",
+				imagePath: "/nfts/tokens/images/BAYC_1013.webp",
 				name: "#1013",
 				id: "1013",
 				description: "stl demo nft"
@@ -44,7 +44,7 @@ export default [
 				ref: "stl-wow",
 				metaUrl: "https://gateway.pinata.cloud/ipfs/QmUPQTm834uSNo951vh466wJ1Wh5ofSpRBwYRhyYqKfGMW",
 				ipfs: "https://gateway.pinata.cloud/ipfs/",
-				imagePath: '/nfts/stl-wow-4636.png',
+				imagePath: '/nfts/stl-wow-4636.webp',
 				name: "WoW #4636",
 				id: "wow_4636",
 				description: "stl demo nft"
@@ -53,7 +53,7 @@ export default [
 				ref: "stl-wow",
 				metaUrl: "https://gateway.pinata.cloud/ipfs/QmQz59bHkB1U4AyZzCKhGvzAbjkWApJQ27ouZ4Bhngeb2T",
 				ipfs: "https://gateway.pinata.cloud/ipfs/",
-				imagePath: '/nfts/stl-wow-9211.png',
+				imagePath: '/nfts/stl-wow-9211.webp',
 				name: "WoW #9211",
 				id: "wow_9211",
 				description: "stl demo nft"
@@ -79,7 +79,7 @@ export default [
 				ref: "stl-riot-racer",
 				metaUrl: "https://gateway.pinata.cloud/ipfs/QmStVYUYb3CtNV2BoQp8JiHqkR8sJWWzq1KvRKPUoTVBgv",
 				ipfs: "https://gateway.pinata.cloud/ipfs/QmdFox1wfNvLSZAodKn1YKhRn3DzYjWpCKq2UncpV1fTSJ",
-				imagePath: '/nfts/stl-rr-airbender.png',
+				imagePath: '/nfts/stl-rr-airbender.webp',
 				name: "STL Airbender",
 				id: "air_bender",
 				description: "stl demo nft"
@@ -88,7 +88,7 @@ export default [
 				ref: "stl-riot-racer",
 				metaUrl: "https://gateway.pinata.cloud/ipfs/QmQpcGRAP19Q8BkQueUcmWoWxwjZ31Cvat8p7fa3Xr8213",
 				ipfs: "https://gateway.pinata.cloud/ipfs/QmQmBW5HVNw5tLzRKtrjNmbvmWVKrMduoepFfbDHWw3tS5",
-				imagePath: '/nfts/stl-rr-aurora.png',
+				imagePath: '/nfts/stl-rr-aurora.webp',
 				name: "STL Aurora",
 				id: "air_aurora",
 				description: "stl demo nft"

ecommerce-store-website/src/ui/sections/demos/demos.js

@@ -31,21 +31,21 @@ export default function Demos({ className, headline, currentDemo }) {
 			)}
 			<div className={ clsx( 'grid -mbn6', { '-g-max-8 -g-cols-2': currentDemo, '-g-cols-3': !currentDemo } ) }>
 				{ currentDemo !== 'music-and-events' && (
-					<Card className="-mb6" image="/images/music-and-events-thumbnail.jpg">
+					<Card className="-mb6" image="/images/music-and-events-thumbnail.webp">
 						<Headline className="f5 -my0 -f-family-rubik" type="h2">Music & Events</Headline>
 						<p className="f7 -mb4">Uses: BAYC Token</p>
 						<Button href="/demo/music-and-events" element="a">{ buttonCopy }</Button>
 					</Card>
 				)}
 				{ currentDemo !== 'fashion' && (
-					<Card className="-mb6" image="/images/fashion-thumbnail.jpg">
+					<Card className="-mb6" image="/images/fashion-thumbnail.webp">
 						<Headline className="f5 -my0 -f-family-rubik" type="h2">Fashion</Headline>
 						<p className="f7 -mb4">Uses: WoW Token</p>
 						<Button href="/demo/fashion" element="a">{ buttonCopy }</Button>
 					</Card>
 				)}
 				{ currentDemo !== 'automotive' && (
-					<Card className="-mb6" image="/images/automotive-thumbnail.jpg">
+					<Card className="-mb6" image="/images/automotive-thumbnail.webp">
 						<Headline className="f5 -my0 -f-family-rubik" type="h2">Automotive</Headline>
 						<p className="f7 -mb4">Uses: Riot Racers Token</p>
 						<Button href="/demo/automotive" element="a">{ buttonCopy }</Button>

ecommerce-store-website/src/ui/views/demo/automotive/automotive-view.js

@@ -24,12 +24,12 @@ export default function AutomotiveView() {
 	};
 
 	const vehicles = [
-		{ image: { src: '/images/lambo-vehicle.jpg', height: 282, width: 594 }, title: 'Lamborghini', description: 'Rare Aventador LP780-4 ‘22', price: 550, salePrice: 500 },
-		{ image: { src: '/images/porsch-vehicle.jpg', height: 282, width: 594 } , title: 'Porche', description: '911 GT3 RS Limited Edition ‘20', price: 290, salePrice: 250 },
-		{ image: { src: '/images/lambo-urus-vehicle.jpg', height: 282, width: 594 } , title: 'Lamborghini Urus Esteso 19', description: 'Limited Edition Urus Esteso ‘19', price: 450, salePrice: 400 },
-		{ image: { src: '/images/mercedes-vehicle.jpg', height: 282, width: 594 } , title: 'Mercedes', description: 'AMG GT Night Edition ‘21', price: 320, salePrice: 270 },
-		{ image: { src: '/images/ferrari-vehicle.jpg', height: 282, width: 594 } , title: 'Ferrari', description: 'Vulcan ‘21', price: 310, salePrice: 260 },
-		{ image: { src: '/images/aston-martin-vehicle.jpg', height: 282, width: 594 } , title: 'Aston Martin', description: 'Vulcan ‘21', price: 550, salePrice: 500 },
+		{ image: { src: '/images/lambo-vehicle.webp', height: 282, width: 594 }, title: 'Lamborghini', description: 'Rare Aventador LP780-4 ‘22', price: 550, salePrice: 500 },
+		{ image: { src: '/images/porsch-vehicle.webp', height: 282, width: 594 } , title: 'Porche', description: '911 GT3 RS Limited Edition ‘20', price: 290, salePrice: 250 },
+		{ image: { src: '/images/lambo-urus-vehicle.webp', height: 282, width: 594 } , title: 'Lamborghini Urus Esteso 19', description: 'Limited Edition Urus Esteso ‘19', price: 450, salePrice: 400 },
+		{ image: { src: '/images/mercedes-vehicle.webp', height: 282, width: 594 } , title: 'Mercedes', description: 'AMG GT Night Edition ‘21', price: 320, salePrice: 270 },
+		{ image: { src: '/images/ferrari-vehicle.webp', height: 282, width: 594 } , title: 'Ferrari', description: 'Vulcan ‘21', price: 310, salePrice: 260 },
+		{ image: { src: '/images/aston-martin-vehicle.webp', height: 282, width: 594 } , title: 'Aston Martin', description: 'Vulcan ‘21', price: 550, salePrice: 500 },
 	]
 
 	const { tokens: selectedTokens, chainId } = useContext(TokenContext);
@@ -44,11 +44,11 @@ export default function AutomotiveView() {
 					<Nav.Item>Vehicles</Nav.Item>
 				</Nav>
 			</DemoHeader>
-			<DemoHero className={ styles[ 'v-automotive_hero' ] } image="/images/automotive-bg.jpg">
+			<DemoHero className={ styles[ 'v-automotive_hero' ] } image="/images/automotive-bg.webp">
 				<div className="grid -g-cols-1 -g-max-10">
 					<div>
 						<div className={ styles[ 'v-automotive_hero-logo' ] }>
-							<Image src="/images/topgear-and-riot.png" alt="Top Gear and Riot" height={ 72 } width={ 594 } />
+							<Image src="/images/topgear-and-riot.webp" alt="Top Gear and Riot" height={ 72 } width={ 594 } />
 						</div>
 						<div className="-g-max-6">
 							<h2 className="-mt3">Exclusive track day experience with Top Gear.</h2>
@@ -65,8 +65,8 @@ export default function AutomotiveView() {
 						<div className="grid -g-cols-1 -g-max-10 -mb6">
 							<Banner
 								className="-style-rounded -t-light-purple"
-								image="/images/automotive-bg.jpg"
-								overlayImage="/images/topgear-and-riot.png"
+								image="/images/automotive-bg.webp"
+								overlayImage="/images/topgear-and-riot.webp"
 								headline="Book your exclusive track day now"
 								text="Enjoy your once in a lifetime experience as a Riot Racer NFT holder!"
 								selectedTokens={selectedTokens}
@@ -81,11 +81,11 @@ export default function AutomotiveView() {
 				<div className="grid -g-cols-3 -g-max-10">
 					<div className={ clsx( styles[ 'v-automotive_aside' ], '-hide-s' ) }>
 						<h4 className="f7">Pickup Location</h4>
-						<Image className={ styles[ 'v-automotive_aside-image' ] } src="/images/location-input.png" alt="Input example of selected pickup location" height={ 84 } width={ 490 } />
+						<Image className={ styles[ 'v-automotive_aside-image' ] } src="/images/location-input.webp" alt="Input example of selected pickup location" height={ 84 } width={ 490 } />
 						<h4 className="f7">Drop-off Location</h4>
-						<Image className={ styles[ 'v-automotive_aside-image' ] } src="/images/location-input.png" alt="Input example of selected drop-off location" height={ 84 } width={ 490 } />
+						<Image className={ styles[ 'v-automotive_aside-image' ] } src="/images/location-input.webp" alt="Input example of selected drop-off location" height={ 84 } width={ 490 } />
 						<h4 className="f7">Select Dates</h4>
-						<Image className={ styles[ 'v-automotive_aside-image' ] } src="/images/calendar.png" alt="Calender example of selected rental dates" height={ 497 } width={ 498 } />
+						<Image className={ styles[ 'v-automotive_aside-image' ] } src="/images/calendar.webp" alt="Calender example of selected rental dates" height={ 497 } width={ 498 } />
 						<div className="-va-center">
 							<h4 className="f7">Age of primary driver</h4>
 							<Tag className={ styles[ 'v-automotive_aside-tag' ] }>32</Tag>
@@ -113,12 +113,12 @@ export default function AutomotiveView() {
 				className="-py0"
 				headline="Manufacturers"
 				logos={[
-					{ src: '/images/porsch.png', height: 154, width: 306, alt: 'Porsh', id: 'porsh' },
-					{ src: '/images/mercedes.png', height: 190, width: 196, alt: 'Mercedes', id: 'mercedes' },
-					{ src: '/images/lambo.png', height: 188, width: 164, alt: 'Lamborghini', id: 'lambo' },
-					{ src: '/images/aston-martin.jpg', height: 182, width: 340, alt: 'Aston Martin', id: 'aston-martin' },
-					{ src: '/images/ferrari.jpg', height: 186, width: 117, alt: 'Ferrari', id: 'ferrari', className: '-hide-s' },
-					{ src: '/images/range-rover.png', height: 134, width: 304, alt: 'Range Rover', id: 'range-rover', className: '-hide-s' },
+					{ src: '/images/porsch.webp', height: 154, width: 306, alt: 'Porsh', id: 'porsh' },
+					{ src: '/images/mercedes.webp', height: 190, width: 196, alt: 'Mercedes', id: 'mercedes' },
+					{ src: '/images/lambo.webp', height: 188, width: 164, alt: 'Lamborghini', id: 'lambo' },
+					{ src: '/images/aston-martin.webp', height: 182, width: 340, alt: 'Aston Martin', id: 'aston-martin' },
+					{ src: '/images/ferrari.webp', height: 186, width: 117, alt: 'Ferrari', id: 'ferrari', className: '-hide-s' },
+					{ src: '/images/range-rover.webp', height: 134, width: 304, alt: 'Range Rover', id: 'range-rover', className: '-hide-s' },
 				]}
 			/>
 			<Demos currentDemo="automotive" headline="More demo Shops" />

ecommerce-store-website/src/ui/views/demo/fashion/fashion-view.js

@@ -24,18 +24,18 @@ export default function Fashion() {
 	};
 
 	const exclusiveProducts = [
-		{ image: { src: '/images/fashion-exclusive-1.jpg', height: 686, width: 594 }, title: 'Jimmy Choo Mugler Knee Sandal', description: 'Gold Liquid Metal Leather Sandals with Gold Chain Fringes', price: 3700.00 },
-		{ image: { src: '/images/fashion-exclusive-2.jpg', height: 686, width: 594 }, title: 'Jimmy Choo Micro Bon Bon', description: 'Black Smooth Nappa Mini Bag', price: 1149.99 },
-		{ image: { src: '/images/fashion-exclusive-3.jpg', height: 686, width: 594 }, title: 'Jimmy Choo Azia 95', description: 'Malibu Liquid Metal Leather Sandals', price: 1295.00 },
+		{ image: { src: '/images/fashion-exclusive-1.webp', height: 686, width: 594 }, title: 'Jimmy Choo Mugler Knee Sandal', description: 'Gold Liquid Metal Leather Sandals with Gold Chain Fringes', price: 3700.00 },
+		{ image: { src: '/images/fashion-exclusive-2.webp', height: 686, width: 594 }, title: 'Jimmy Choo Micro Bon Bon', description: 'Black Smooth Nappa Mini Bag', price: 1149.99 },
+		{ image: { src: '/images/fashion-exclusive-3.webp', height: 686, width: 594 }, title: 'Jimmy Choo Azia 95', description: 'Malibu Liquid Metal Leather Sandals', price: 1295.00 },
 	];
 
 	const products = [
-		{ image: { src: '/images/fashion-item-1.jpg', height: 686, width: 594 }, title: 'Statement - Lili Midi Dress', description: 'Dress like you do in your wildest dreams in the Lilly Midi Dress.', price: 119.99, salePrice: 79.99 },
-		{ image: { src: '/images/fashion-item-2.jpg', height: 686, width: 594 }, title: 'Real Vibes - Wrap Garden Dress', description: 'A gorgeous spring event dress, this Red Gardens Dress from Real Vibes is an event essential', price: 190.00, salePrice: 119.99 },
-		{ image: { src: '/images/fashion-item-3.jpg', height: 686, width: 594 }, title: 'Ask Judy - Coat', description: 'Beat the chill without sacrificing style is this Black wool blend detailed coat.', price: 139.99, salePrice: 89.99 },
-		{ image: { src: '/images/fashion-item-4.jpg', height: 686, width: 594 }, title: 'Lux Looks - Teal Dress', description: 'This teal modern design; delivers a simplified, well-made look for an audience who craves a relaxed coastal lifestyle.', price: 239.99, salePrice: 159.99 },
-		{ image: { src: '/images/fashion-item-5.jpg', height: 686, width: 594 }, title: 'Statement - Two-piece Outfit', description: 'This piece black outfit for a casual occasion or pair with heels for a more sophisticated look.', price: 179.00, salePrice: 109.99 },
-		{ image: { src: '/images/fashion-item-6.jpg', height: 686, width: 594 }, title: 'Surfer Girl - Straw Hat', description: 'Complete your summer style with the Sonny Hand Knotted Straw Hat by Surfer Girl.', price: 49.99, salePrice: 19.99 },
+		{ image: { src: '/images/fashion-item-1.webp', height: 686, width: 594 }, title: 'Statement - Lili Midi Dress', description: 'Dress like you do in your wildest dreams in the Lilly Midi Dress.', price: 119.99, salePrice: 79.99 },
+		{ image: { src: '/images/fashion-item-2.webp', height: 686, width: 594 }, title: 'Real Vibes - Wrap Garden Dress', description: 'A gorgeous spring event dress, this Red Gardens Dress from Real Vibes is an event essential', price: 190.00, salePrice: 119.99 },
+		{ image: { src: '/images/fashion-item-3.webp', height: 686, width: 594 }, title: 'Ask Judy - Coat', description: 'Beat the chill without sacrificing style is this Black wool blend detailed coat.', price: 139.99, salePrice: 89.99 },
+		{ image: { src: '/images/fashion-item-4.webp', height: 686, width: 594 }, title: 'Lux Looks - Teal Dress', description: 'This teal modern design; delivers a simplified, well-made look for an audience who craves a relaxed coastal lifestyle.', price: 239.99, salePrice: 159.99 },
+		{ image: { src: '/images/fashion-item-5.webp', height: 686, width: 594 }, title: 'Statement - Two-piece Outfit', description: 'This piece black outfit for a casual occasion or pair with heels for a more sophisticated look.', price: 179.00, salePrice: 109.99 },
+		{ image: { src: '/images/fashion-item-6.webp', height: 686, width: 594 }, title: 'Surfer Girl - Straw Hat', description: 'Complete your summer style with the Sonny Hand Knotted Straw Hat by Surfer Girl.', price: 49.99, salePrice: 19.99 },
 	];
 
 	// const selectedTokens = useStore( s => s.selectedTokens );
@@ -57,11 +57,11 @@ export default function Fashion() {
 					<Nav.Item>Vintage</Nav.Item>
 				</Nav>
 			</DemoHeader>
-			<DemoHero className={ clsx( styles[ 'v-fashion_hero' ] ) } image="/images/fashion-bg.jpg">
+			<DemoHero className={ clsx( styles[ 'v-fashion_hero' ] ) } image="/images/fashion-bg.webp">
 				<div className="grid -g-cols-3 -g-max-10">
 					<div className="-g-cols-fill-2">
 						<div className={ styles[ 'v-fashion_hero-logo' ] }>
-							<Image src="/images/jimmy-choo-wow.png" height={ 70 } width={ 658 } />
+							<Image src="/images/jimmy-choo-wow.webp" height={ 70 } width={ 658 } />
 						</div>
 						<div className="-g-max-5">
 							<h2 className="-mt5">Exclusive Jimmy Choo early access for WOW NFT Holders</h2>
@@ -70,7 +70,7 @@ export default function Fashion() {
 						</div>
 					</div>
 					<div className="-hide-s">
-						<Image className={ styles[ 'v-fashion_hero-image' ] } src="/images/jimmy-choo-shoes.png" width={ 756 } height={ 750 } alt="Jimmy Choo shoes" />
+						<Image className={ styles[ 'v-fashion_hero-image' ] } src="/images/jimmy-choo-shoes.webp" width={ 756 } height={ 750 } alt="Jimmy Choo shoes" />
 					</div>
 				</div>
 			</DemoHero>
@@ -81,7 +81,7 @@ export default function Fashion() {
 					<section className={ clsx( styles[ 'v-fashion_promotion' ], 'section -ps -t-purple' ) }>
 						<div className={ clsx( styles[ 'v-fashion_promotion-description' ], 'grid -g-cols-2 -g-max-10 -mb6' ) }>
 							<h2 className="f4">Exclusive Jimmy Choo early access for WOW NFT Holders</h2>
-							<Image className={ styles[ 'v-fashion_promotion-image' ] } src="/images/wow.jpg" alt="World of Women" height={ 260 } width={ 696 } />
+							<Image className={ styles[ 'v-fashion_promotion-image' ] } src="/images/wow.webp" alt="World of Women" height={ 260 } width={ 696 } />
 						</div>
 						<div className="grid -g-cols-3 -g-max-10">
 							{ exclusiveProducts && exclusiveProducts.map( ( product, i ) => (
@@ -106,12 +106,12 @@ export default function Fashion() {
 				className="-t-light -pt0"
 				headline="Brands"
 				logos={[
-					{ src: '/images/jimmy-choo.png', height: 144, width: 144, alt: 'Jimmy Choo', id: 'jimmy-choo' },
-					{ src: '/images/chanel.png', height: 172, width: 230, alt: 'Chanel', id: 'chanel' },
-					{ src: '/images/bvlgari.png', height: 50, width: 312, alt: 'Bvlgari', id: 'bvlgari' },
-					{ src: '/images/dg.png', height: 92, width: 196, alt: 'Dolce & Gabbana', id: 'dolce' },
-					{ src: '/images/prada.png', height: 180, width: 236, alt: 'Prada', id: 'prada' },
-					{ src: '/images/louis-vuitton.png', height: 106, width: 432, alt: 'Louis Vuitton', id: 'louis-vuitton' },
+					{ src: '/images/jimmy-choo.webp', height: 144, width: 144, alt: 'Jimmy Choo', id: 'jimmy-choo' },
+					{ src: '/images/chanel.webp', height: 172, width: 230, alt: 'Chanel', id: 'chanel' },
+					{ src: '/images/bvlgari.webp', height: 50, width: 312, alt: 'Bvlgari', id: 'bvlgari' },
+					{ src: '/images/dg.webp', height: 92, width: 196, alt: 'Dolce & Gabbana', id: 'dolce' },
+					{ src: '/images/prada.webp', height: 180, width: 236, alt: 'Prada', id: 'prada' },
+					{ src: '/images/louis-vuitton.webp', height: 106, width: 432, alt: 'Louis Vuitton', id: 'louis-vuitton' },
 				]}
 			/>
 			<Demos currentDemo="fashion" headline="More demo Shops" />