diff --git a/sass/homeassistant/_homeassistant.scss b/sass/homeassistant/_homeassistant.scss index c57729fa2e2..4125fdd06d5 100644 --- a/sass/homeassistant/_homeassistant.scss +++ b/sass/homeassistant/_homeassistant.scss @@ -20,6 +20,7 @@ @import "plugins/integration_alert"; @import "base/sidebar"; +@import "aside/buy_dialog"; @import "aside/recent_posts"; @import "aside/github"; @import "aside/pinboard"; diff --git a/sass/homeassistant/aside/_buy_dialog.scss b/sass/homeassistant/aside/_buy_dialog.scss new file mode 100644 index 00000000000..b332365be81 --- /dev/null +++ b/sass/homeassistant/aside/_buy_dialog.scss @@ -0,0 +1,219 @@ +// More specificity +#landingpage .page-content .content { + .ha-buy-dialog { + background: rgba(0, 0, 0, 0.4); + display: none; + inset: 0; + padding: 40px; + place-items: center; + position: fixed; + z-index: 1200; + + &.open { + display: flex; + flex-direction: column; + } + + &-inner { + background-color: #ffffff; + border-radius: 8px; + display: grid; + gap: 20px; + max-width: 624px; + padding: 20px; + width: 100%; + overflow: hidden; + } + + &-header { + align-items: center; + display: flex; + + .product-name { + flex-grow: 1; + font-size: 20px; + + @media (min-width: 704px) { + font-size: 28px; + } + } + + .close { + align-items: center; + cursor: pointer; + display: flex; + flex-shrink: 0; + } + } + + &-content { + display: flex; + flex-direction: column; + gap: 20px; + max-height: 100%; + overflow: hidden; + + @media (min-width: 704px) { + flex-direction: row; + } + } + + &-sidebar { + background-color: #F0F0F3; + border-radius: 8px; + min-width: 140px; + padding: 12px; + + &-label { + font-size: 14px; + font-weight: 700; + padding-bottom: 8px; + } + + &-tabs { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 4px; + + @media (min-width: 704px) { + flex-direction: column; + flex-wrap: nowrap; + } + } + + &-tab { + background-color: transparent; + border-radius: 4px; + color: #4F606E; + cursor: pointer; + flex-basis: 40%; + flex-grow: 1; + font-size: 16px; + padding: 8px; + text-align: center; + transition: background-color 0.1s; + user-select: none; + + @media (min-width: 704px) { + flex-basis: unset; + text-align: left; + } + + &:hover { + background-color: #e1e1e1; + } + + &.active { + background-color: #FCFCFF; + color: #000; + pointer-events: none; + } + } + } + + &-tab { + &-content-wrapper { + flex-grow: 1; + height: 100%; + max-height: 475px; + overflow-y: auto; + } + + &-content { + display: none; + flex-direction: column; + gap: 32px; + + &.active { + display: flex; + } + } + } + + &-distributor { + &-countries { + display: flex; + flex-direction: column; + gap: 18px; + } + + &-country { + &-name { + align-items: center; + display: flex; + font-size: 14px; + font-weight: 700; + gap: 10px; + padding-bottom: 12px; + } + + &-flag { + border-radius: 0; + height: 8px; + } + + $letters: "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; + @for $i from 1 through 26 { + $letter: str-slice($letters, $i, $i); + + &[data-sort="#{$letter}"] { + order: $i; + } + } + } + + &-items { + display: flex; + flex-wrap: wrap; + gap: 8px; + justify-content: center; + + @media (min-width: 704px) { + gap: 20px; + justify-content: flex-start; + max-width: 400px; + } + } + + &-item { + border: 1px solid #F0F0F3; + border-radius: 8px; + display: flex; + flex-direction: column; + gap: 8px; + height: 60px; + padding: 4px 16px; + place-items: center; + text-align: center; + text-decoration: none; + transition: background-color 0.1s; + width: 120px; + + span { + color: #4F606E; + font-size: 10px; + height: 14px; + line-height: 1; + overflow: hidden; + white-space: nowrap; + } + + &:hover { + background-color: #F0F0F3; + } + } + + &-logo { + border: unset; + border-radius: 0; + box-shadow: unset; + flex-grow: 1; + height: 100%; + max-height: 50px; + object-fit: contain; + overflow: hidden; + } + } + } +} \ No newline at end of file diff --git a/source/_data/products.yml b/source/_data/products.yml new file mode 100644 index 00000000000..b72fb446bdf --- /dev/null +++ b/source/_data/products.yml @@ -0,0 +1,449 @@ +# Flags rendered via https://flagpedia.net/ +# ship_from accepts ISO 3166 country code +green: + name: "Home Assistant Green" + distributors: + # America + - name: Amazon US + ship_from: US + ship_to: America + url: https://www.amazon.com/dp/B0CXVKSG19?maas=maas_adg_BB51722E249D328CABB2F6DF1F8976CC_afap_abs&ref_=aa_maas&tag=maas + logo: /images/distributors/amazon.webp + - name: ameriDroid + ship_from: US + ship_to: America + url: https://ameridroid.com/products/home-assistant-green + logo: /images/distributors/ameridroid.webp + - name: CloudFree + ship_from: US + ship_to: America + url: https://cloudfree.shop/product/home-assistant-green/ + logo: /images/distributors/cloudfree.webp + # Asia + - name: Seeed Studio + ship_from: China + ship_to: Asia + url: https://www.seeedstudio.com/Home-Assistant-Green-p-5792.html + logo: /images/distributors/seeed-studio.webp + # Australia + - name: Oz Smart Things + ship_from: Australia + ship_to: Australia + url: https://www.ozsmartthings.com.au/products/home-assistant-green-smart-hub + logo: /images/distributors/oz-smart-things.webp + - name: Smart Guys + ship_from: Australia + ship_to: Australia + url: https://smartguys.com.au/home-assistant-green.html + logo: /images/distributors/smart-guys.webp + - name: SmartHome + ship_from: Australia + ship_to: Australia + url: https://www.smarthome.com.au/product/home-assistant-green/ + logo: /images/distributors/smarthome.webp + # Europe + - name: Alza.cz + ship_from: Czechia + ship_to: Europe + url: https://www.alza.cz/home-assistant-green-d7998187.htm + logo: /images/distributors/alza-cz.webp + - name: Botland + ship_from: Poland + ship_to: Europe + url: https://botland.com.pl/centralki-i-bramki-sieciowe/24319-home-assistant-green-inteligentna-centralka-nabu-casa-nc-green-1175-794677011758.html + logo: /images/distributors/botland.webp + - name: DinamoTech + ship_from: Italy + ship_to: Europe + url: https://dinamotech.it/products/home-assistant-green + logo: /images/distributors/dinamo-tech.webp + - name: Domadoo + ship_from: France + ship_to: Europe + url: https://www.domadoo.fr/fr/box-domotique/7046-nabu-casa-box-domotique-home-assistant-green-0794677011758.html + logo: /images/distributors/domadoo.jpg + - name: Everything Smart Technology + ship_from: UK + ship_to: Europe + url: https://shop.everythingsmart.io/products/home-assistant-green + logo: /images/distributors/est.webp + - name: eWeLink device store + ship_from: Hungary + ship_to: Europe + url: https://ewelinkstore.com/product/home-assistant-green-hub/ + logo: /images/distributors/ewelink.png + - name: HAshop + ship_from: Netherlands + ship_to: Europe + url: https://www.hashop.nl/Home-Assistant-Green + logo: /images/distributors/ha-shop.webp + - name: ROBBshop + ship_from: Netherlands + ship_to: Europe + url: https://www.robbshop.nl/home-assistant-green-smart-hub + logo: /images/distributors/robb.webp + - name: Kjell + ship_from: Norway + ship_to: Europe + url: https://www.kjell.com/no/produkter/smarte-hjem/kontroller/nabu-casa-home-assistant-green-p88430 + logo: /images/distributors/kjell-company.webp + - name: Mauser + ship_from: Portugal + ship_to: Europe + url: https://mauser.pt/catalog/product_info.php?products_id=095-3152 + logo: /images/distributors/mauser.png + - name: mediarath + ship_from: Germany + ship_to: Europe + url: https://mediarath.de/products/home-assistant-green-smart-home-hub-2x-usb-gigabit-lan-hmdi-microsd-slot + logo: /images/distributors/mediarath.de.webp + - name: m.nu + ship_from: Sweden + ship_to: Europe + url: https://en.m.nu/controllers-smart-hubs/home-assistant-green + logo: /images/distributors/m-nu.webp + - name: OkosOtthon Bolt + ship_from: Hungary + ship_to: Europe + url: https://okosotthon.bolt.hu/webaruhaz/termek/home-assistant-green-hub/ + logo: /images/distributors/okosotthon.png + - name: Pi-Shop.ch + ship_from: Switzerland + ship_to: Europe + url: https://www.pi-shop.ch/home-assistant-green + logo: /images/distributors/pi-shop.webp + - name: Pimoroni + ship_from: UK + ship_to: Europe + url: https://shop.pimoroni.com/products/home-assistant-green + logo: /images/distributors/pimoroni.webp + - name: RaspberryPi.dk + ship_from: Denmark + ship_to: Europe + url: https://raspberrypi.dk/en/product/home-assistant-green/ + logo: /images/distributors/RaspberryPi-dk.webp + - name: Seeed Studio + ship_from: Germany + ship_to: Europe + url: https://www.seeedstudio.com/Home-Assistant-Green-p-5792.html + logo: /images/distributors/seeed-studio.webp + - name: SmarterHOME + ship_from: Slovakia + ship_to: Europe + url: https://smarterhome.sk/sk/centralne-jednotky/home-assistant-green-smart-home-hub-1490.html + logo: /images/distributors/smarter-home.png + - name: Swiss-Domotique + ship_from: Switzerland + ship_to: Europe + url: https://shop.swiss-domotique.ch/smarthome-hub/2295-nabu-casa-home-assistant-green.html + logo: /images/distributors/swiss-domotique.webp + - name: The Pi Hut + ship_from: UK + ship_to: Europe + url: https://thepihut.com/products/home-assistant-green + logo: /images/distributors/pi-hut.webp + - name: Webhallen + ship_from: Sweden + ship_to: Europe + url: https://www.webhallen.com/se/product/364271-Nabu-Casa-Home-Assistant-Green + logo: /images/distributors/webhallen.webp + - name: WIFIShop + ship_from: Romania + ship_to: Europe + url: https://www.wifishop.ro/en/homeassistant/home-assistant-green.html + logo: /images/distributors/wifishop.webp +yellow: + name: "Home Assistant Yellow" + distributors: + # America + - name: ameriDroid + ship_from: US + ship_to: America + url: https://ameridroid.com/products/home-assistant-yellow + logo: /images/distributors/ameridroid.webp + - name: CloudFree + ship_from: US + ship_to: America + url: https://cloudfree.shop/product/home-assistant-yellow/ + logo: /images/distributors/cloudfree.webp + - name: Seeed Studio + ship_from: US + ship_to: America + url: https://www.seeedstudio.com/Home-Assistant-Yellow-Kit-with-selectable-CM4.html + logo: /images/distributors/seeed-studio.webp + # Asia + - name: Seeed Studio + ship_from: China + ship_to: Asia + url: https://www.seeedstudio.com/Home-Assistant-Yellow-Kit-with-selectable-CM4.html + logo: /images/distributors/seeed-studio.webp + # Europe + - name: Botland + ship_from: Poland + ship_to: Europe + url: https://botland.com.pl/centralki-i-bramki-sieciowe/24698-home-assistant-yellow-standard-kit-inteligenta-centralka-zigbee-thread-nabu-casa-yellow-kit-std-794677011741.html + logo: /images/distributors/botland.webp + - name: Mauser + ship_from: Portugal + ship_to: Europe + url: https://mauser.pt/catalog/product_info.php?products_id=095-3150 + logo: /images/distributors/mauser.png + - name: Pi-Shop.ch + ship_from: Switzerland + ship_to: Europe + url: https://www.pi-shop.ch/home-assistant-yellow-kit-with-power-supply-cm4-not-included + logo: /images/distributors/pi-shop.webp + - name: RaspberryPi.dk + ship_from: Denmark + ship_to: Europe + url: https://raspberrypi.dk/en/product/home-assistant-yellow/ + logo: /images/distributors/RaspberryPi-dk.webp + - name: Seeed Studio + ship_from: Germany + ship_to: Europe + url: https://www.seeedstudio.com/Home-Assistant-Yellow-Kit-with-selectable-CM4.html + logo: /images/distributors/seeed-studio.webp + - name: The Pi Hut + ship_from: UK + ship_to: Europe + url: https://thepihut.com/products/home-assistant-yellow + logo: /images/distributors/pi-hut.webp +zbt-1: + name: "Home Assistant Connect ZBT-1" + distributors: + # America + - name: ameriDroid + ship_from: US + ship_to: America + url: https://ameridroid.com/products/skyconnect + logo: /images/distributors/ameridroid.webp + - name: CloudFree + ship_from: US + ship_to: America + url: https://cloudfree.shop/product/home-assistant-skyconnect/ + logo: /images/distributors/cloudfree.webp + - name: Seeed Studio + ship_from: US + ship_to: America + url: https://www.seeedstudio.com/Home-Assistant-SkyConnect-p-5479.html + logo: /images/distributors/seeed-studio.webp + # Asia + - name: Seeed Studio + ship_from: China + ship_to: Asia + url: https://www.seeedstudio.com/Home-Assistant-SkyConnect-p-5479.html + logo: /images/distributors/seeed-studio.webp + # Australia + - name: Smart Guys + ship_from: Australia + ship_to: Australia + url: https://smartguys.com.au/home-assistant-skyconnect.html + logo: /images/distributors/smart-guys.webp + # Europe + - name: Alza.cz + ship_from: Czech Republic + ship_to: Europe + url: https://www.alza.cz/home-assistant-skyconnect-usb-hub-d7815713.htm + logo: /images/distributors/alza-cz.webp + - name: Botland + ship_from: Poland + ship_to: Europe + url: https://botland.com.pl/centralki-i-bramki-sieciowe/22759-home-assistant-skyconnect-usb-stick-zgodny-z-zigbeematterthread-794677011635.html + logo: /images/distributors/botland.webp + - name: DinamoTech + ship_from: Italy + ship_to: Europe + url: https://dinamotech.it/products/home-assistant-connect-zbt-1 + logo: /images/distributors/dinamo-tech.webp + - name: Domadoo + ship_from: France + ship_to: Europe + url: https://www.domadoo.fr/fr/box-domotique/6938-dongle-usb-zigbee-30-sky-connect-pour-home-assistant-nabu-casa-0794677011635.html + logo: /images/distributors/domadoo.jpg + - name: Everything Smart Technology + ship_from: UK + ship_to: Europe + url: https://shop.everythingsmart.io/products/home-assistant-skyconnect + logo: /images/distributors/est.webp + - name: eWeLink device store + ship_from: Hungary + ship_to: Europe + url: https://ewelinkstore.com/product/home-assistant-connect-zbt-1-a-zigbee-thread-matter-usb-stick/ + logo: /images/distributors/ewelink.png + - name: HAshop + ship_from: Netherlands + ship_to: Europe + url: https://www.hashop.nl/Home-Assistant-SkyConnect + logo: /images/distributors/ha-shop.webp + - name: Kjell + ship_from: Norway + ship_to: Europe + url: https://www.kjell.com/no/produkter/smarte-hjem/kontroller/nabu-casa-home-assistant-skyconnect-p88431 + logo: /images/distributors/kjell-company.webp + - name: Mauser + ship_from: Portugal + ship_to: Europe + url: https://mauser.pt/catalog/product_info.php?products_id=095-1222 + logo: /images/distributors/mauser.png + - name: mediarath + ship_from: Germany + ship_to: Europe + url: https://mediarath.de/products/home-assistant-connect-zbt-1-zigbee-thread-matter-usb-stick-fur-home-assistant-skyconnect + logo: /images/distributors/mediarath.de.webp + - name: m.nu + ship_from: Sweden + ship_to: Europe + url: https://en.m.nu/zigbee/controllers-zigbee/home-assistant-skyconnect-zigbee-matter-thread + logo: /images/distributors/m-nu.webp + - name: OkosOtthon Bolt + ship_from: Hungary + ship_to: Europe + url: https://okosotthon.bolt.hu/webaruhaz/termek/home-assistant-connect-zbt-1-zigbee-thread-matter-usb-kulcs/ + logo: /images/distributors/okosotthon.png + - name: Pimoroni + ship_from: UK + ship_to: Europe + url: https://shop.pimoroni.com/products/home-assistant-connect-zbt-1 + logo: /images/distributors/pimoroni.webp + - name: RaspberryPi.dk + ship_from: Denmark + ship_to: Europe + url: https://raspberrypi.dk/en/product/home-assistant-skyconnect/ + logo: /images/distributors/RaspberryPi-dk.webp + - name: Robbshop + ship_from: Netherlands + ship_to: Europe + url: https://www.robbshop.nl/home-assistant-skyconnect-zigbee-en-thread-usb + logo: /images/distributors/robb.webp + - name: Seeed Studio + ship_from: Germany + ship_to: Europe + url: https://www.seeedstudio.com/Home-Assistant-SkyConnect-p-5479.html + logo: /images/distributors/seeed-studio.webp + - name: SmarterHOME + ship_from: Slovakia + ship_to: Europe + url: https://smarterhome.sk/sk/zwave-pc-adaptery/home-assistant-connect-zbt-1-zigbee-a-thread-usb-adapter-1646.html + logo: /images/distributors/smarter-home.png + - name: Swiss-Domotique + ship_from: Switzerland + ship_to: Europe + url: https://shop.swiss-domotique.ch/de/smarthome-zentrale/2118-nabu-casa-home-assistant-skyconnect.html + logo: /images/distributors/swiss-domotique.webp + - name: The Pi Hut + ship_from: UK + ship_to: Europe + url: https://thepihut.com/collections/latest-raspberry-pi-products/products/home-assistant-skyconnect + logo: /images/distributors/pi-hut.webp + - name: Webhallen + ship_from: Sweden + ship_to: Europe + url: https://www.webhallen.com/se/product/357205-Home-Assistant-SkyConnect-ZigbeeMatterThread + logo: /images/distributors/webhallen.webp + - name: WIFIShop + ship_from: Romania + ship_to: Europe + url: https://www.wifishop.ro/en/homeassistant/home-assistant-skyconnect.html + logo: /images/distributors/wifishop.webp +voice-pe: + name: "Home Assistant Voice Preview Edition" + distributors: + # America + - name: ameriDroid + ship_from: US + ship_to: America + url: https://ameridroid.com/products/home-assistant-voice-preview-edition/ + logo: /images/distributors/ameridroid.webp + - name: CloudFree + ship_from: US + ship_to: America + url: https://cloudfree.shop/product/home-assistant-voice-preview-edition/ + logo: /images/distributors/cloudfree.webp + - name: Seeed Studio + ship_from: US + ship_to: America + url: https://www.seeedstudio.com/Home-Assistant-Voice-p-6998.html + logo: /images/distributors/seeed-studio.webp + # Asia + - name: Seeed Studio + ship_from: China + ship_to: Asia + url: https://www.seeedstudio.com/Home-Assistant-Voice-p-6998.html + logo: /images/distributors/seeed-studio.webp + # Australia + - name: OZ Smart Things + ship_from: Australia + ship_to: Australia + url: https://www.ozsmartthings.com.au/products/ha-voice-preview-edition + logo: /images/distributors/oz-smart-things.webp + - name: Smart Guys + ship_from: Australia + ship_to: Australia + url: https://smartguys.com.au/product/home-assistant-voice-preview-edition/ + logo: /images/distributors/smart-guys.webp + # Europe + - name: Alza.cz + ship_from: Czechia + ship_to: Europe + url: https://www.alza.cz/home-assistant-voice-preview-edition-d12741248.htm + logo: /images/distributors/alza-cz.webp + - name: RaspberryPi.dk + ship_from: Denmark + ship_to: Europe + url: https://raspberrypi.dk/en/product/home-assistant-voice-preview-edition/ + logo: /images/distributors/RaspberryPi-dk.webp + - name: Domadoo + ship_from: France + ship_to: Europe + url: https://www.domadoo.fr/fr/box-domotique/7558-nabu-casa-home-assistant-voice-preview-edition-0860011789727.html + logo: /images/distributors/domadoo.jpg + - name: Mediarath + ship_from: Germany + ship_to: Europe + url: https://mediarath.de/products/home-assistant-voice-preview-edition-open-source-privacy-focused-voice-assistant-with-esphome + logo: /images/distributors/mediarath.de.webp + - name: Seeed Studio + ship_from: Germany + ship_to: Europe + url: https://www.seeedstudio.com/Home-Assistant-Voice-p-6998.html + logo: /images/distributors/seeed-studio.webp + - name: Dinamotech + ship_from: Italy + ship_to: Europe + url: https://dinamotech.it/products/home-assistant-voice + logo: /images/distributors/dinamo-tech.webp + - name: Botland + ship_from: Poland + ship_to: Europe + url: https://botland.com.pl/asystenci-glosowi/25872-home-assistant-voice-preview-edition-asystent-glosowy-860011789727.html + logo: /images/distributors/botland.webp + - name: Mauser.pt + ship_from: Portugal + ship_to: Europe + url: https://mauser.pt/catalog/product_info.php?products_id=095-4747 + logo: /images/distributors/mauser.png + - name: SmarterHOME + ship_from: Slovakia + ship_to: Europe + url: https://smarterhome.sk/sk/hlasovi-asistenti/home-assistant-voice-preview-edition-1714.html + logo: /images/distributors/smarter-home.png + - name: Webhallen + ship_from: Sweden + ship_to: Europe + url: https://www.webhallen.com/377166 + logo: /images/distributors/webhallen.webp + - name: Swiss-Domotique + ship_from: Switzerland + ship_to: Europe + url: https://shop.swiss-domotique.ch/de/sound/2667-nabu-casa-home-assistant-voice-preview-edition.html + logo: /images/distributors/swiss-domotique.webp + - name: The Pi Hut + ship_from: UK + ship_to: Europe + url: https://thepihut.com/products/home-assistant-voice-preview-edition + logo: /images/distributors/pi-hut.webp + - name: Everything Smart Technology + ship_from: UK + ship_to: Europe + url: https://shop.everythingsmart.io/products/home-assistant-voice-preview-edition + logo: /images/distributors/est.webp \ No newline at end of file diff --git a/source/_includes/custom/buy-dialog.html b/source/_includes/custom/buy-dialog.html new file mode 100644 index 00000000000..09dd8245391 --- /dev/null +++ b/source/_includes/custom/buy-dialog.html @@ -0,0 +1,138 @@ +{% if include.product and site.data.products[include.product] %} + {% assign product = site.data.products[include.product] %} + {% assign distributor_regions = product.distributors | group_by: 'ship_to' %} +{% endif %} + +