https://littlebirdelectronics.com.au/

html littlebirdelectronics.com.au collected 2026-09-25 14:07:44 UTC 253,761 bytes, 2,692 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en" class=" h-full scroll-smooth">
3<head>
4  <meta name="viewport" content="width=device-width,initial-scale=1">
5

5<script>
6    (function () {
7      var query = window.matchMedia("(prefers-color-scheme: dark)")
8      var apply = function () { document.documentElement.classList.toggle("dark", query.matches) }
9      apply()
10      query.addEventListener("change", apply)
11    })()
12  </script>

12
13
14    <link rel="ai-catalog" href="/.well-known/ai-catalog.json" type="application/ai-catalog+json">
15    <link rel="llms-txt" href="/llms.txt" type="text/markdown">
16    <meta name="facebook-domain-verification" content="58jbwwldbmcc3pmlcsbue4srsb6fp7">
17    <meta name="msvalidate.01" content="AD1720C9C30512032BBC271E6E59C736">
18    <link rel="preconnect" href="https://www.googletagmanager.com">
19    <link rel="preconnect" href="https://www.google.com">
20

20<script>
21      (function () {
22        var LOADER = 'script[src^="https://www.googletagmanager.com/gtag/js"]';
23        if (document.querySelector(LOADER) || window.__lbGtagArmed) return;
24        window.__lbGtagArmed = true;
25        var inject = function () {
26          if (document.querySelector(LOADER)) return;
27          var s = document.createElement("script");
28          s.async = true;
29          s.src = "https://www.googletagmanager.com/gtag/js?id=AW-980577593";
30          document.head.appendChild(s);
31        };
32        if (document.readyState === "complete") inject();
33        else addEventListener("load", inject, {once: true});
34      })();
35    </script>

35
36

36<script>
37

vendor: 139 bytes, lines 37-40

37window.dataLayer = window.dataLayer || [];
38    function gtag(){dataLayer.push(arguments);}
39    gtag('js', new Date());
40    gtag('config', '

40AW-980577593

vendor: 6 bytes, lines 40-41

40');
41

41</script>

41
42
43    <title>Australiaâs STEM &amp; Maker Electronics Store | Little Bird Electronics</title>
44<meta name="title" content="Australiaâs STEM &amp; Maker Electronics Store | Little Bird Electronics">
45<meta name="description" content="Australia&#39;s leading electronics retailer for makers and educators. Shop maker kits, sensors, single-board computers, and STEM education products. Fast shippingâ¦">
46<meta property="og:type" content="website">
47<meta property="og:url" content="https://littlebirdelectronics.com.au/">
48<meta property="og:title" content="Australiaâs STEM &amp; Maker Electronics Store | Little Bird Electronics">
49<meta property="og:description" content="Australia&#39;s leading electronics retailer for makers and educators. Shop maker kits, sensors, single-board computers, and STEM education products. Fast shippingâ¦">
50<meta property="og:image" content="https://littlebirdelectronics.com.au/assets/opengraph-9310268e.png">
51<meta name="twitter:card" content="summary_large_image">
52<meta name="twitter:site" content="@lbhq">
53<meta name="twitter:title" content="Australiaâs STEM &amp; Maker Electronics Store | Little Bird Electronics">
54<meta name="twitter:description" content="Australia&#39;s leading electronics retailer for makers and educators. Shop maker kits, sensors, single-board computers, and STEM education products. Fast shippingâ¦">
55<meta name="twitter:image" content="https://littlebirdelectronics.com.au/assets/opengraph-9310268e.png">
56  <link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
57<link rel="apple-touch-icon" href="/apple-touch-icon.png">
58<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#2d89ef">
59<link rel="manifest" href="/site.webmanifest">
60<meta name="msapplication-TileColor" content="#ffffff">
61<meta name="msapplication-TileImage" content="/mstile-150x150.png">
62<meta name="msapplication-config" content="/browserconfig.xml">
63<meta name="application-name" content="Little Bird Electronics">
64
65<meta name="mobile-web-app-capable" content="yes">
66<link rel="canonical" href="https://littlebirdelectronics.com.au/">
67
68
69
70<meta name="csrf-param" content="authenticity_token" />
71<meta name="csrf-token" content="DTxanq9mjiocZcXLUARe-BZrumpBlVsMnYieouY-LarKNXQVjv-PilvalyH8TGPh0VJiJAFkTaJFvC3yFjucmA" />
72
73<meta name="viewport" content="width=device-width, initial-scale=1">
74

75<script type="importmap" data-turbo-track="reload">{
76  "imports": {
77    "controllers/hw_combobox_controller": "/assets/hotwire_combobox.esm-4f9dbfdf.js",
78    "application": "/assets/application-f556c526.js",
79    "admin": "/assets/admin-ccbc4be4.js",
80    "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
81    "three/addons/controls/OrbitControls.js": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js",
82    "three/addons/environments/RoomEnvironment.js": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/environments/RoomEnvironment.js",
83    "@hotwired/stimulus": "/assets/stimulus-d59b3b7f.js",
84    "@hotwired/stimulus-loading": "/assets/stimulus-loading-1fc53fe7.js",
85    "@hotwired/turbo-rails": "/assets/turbo.min-9fd88cd5.js",
86    "@rails/actiontext": "/assets/actiontext.esm-c376325e.js",
87    "@rails/actioncable": "/assets/actioncable.esm-e0ec9819.js",
88    "@rails/activestorage": "/assets/activestorage.esm-81bb34bc.js",
89    "lexxy": "/assets/lexxy-ae116412.js",
90    "stimulus_grid": "/assets/stimulus_grid-268f685c.js",
91    "leaflet": "https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet-src.esm.js",
92    "asciinema-player": "https://cdn.jsdelivr.net/npm/[email protected]/+esm",
93    "fritzing-web": "/assets/fritzing-web-51eaab1f.js",
94    "howler": "/assets/howler-5ee30483.js",
95    "@hotwired/hotwire-native-bridge": "/assets/@hotwired--hotwire-native-bridge-489bc31d.js",
96    "clipboard": "/assets/clipboard-c5e1a52b.js",
97    "local-time": "/assets/local-time.es2017-esm-6e8a38c5.js",
98    "tailwindcss-stimulus-components": "/assets/tailwindcss-stimulus-components-ab09c6a0.js",
99    "@floating-ui/dom": "/assets/@floating-ui--dom-0c5799a4.js",
100    "@floating-ui/core": "/assets/@floating-ui--core-39414196.js",
101    "@floating-ui/utils": "/assets/@floating-ui--utils-e7cf7fe6.js",
102    "@floating-ui/utils/dom": "/assets/@floating-ui--utils--dom-cabcc9ef.js",
103    "streaming-markdown": "/assets/streaming-markdown-f3239cfc.js",
104    "swiper": "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.mjs",
105    "sortablejs": "https://cdn.jsdelivr.net/npm/[email protected]/modular/sortable.esm.js",
106    "pdfjs-dist": "/assets/pdfjs-dist-bf627bc5.js",
107    "static-player-ui": "/assets/static-player-ui-97644826.js",
108    "channels/consumer": "/assets/channels/consumer-303bcbdf.js",
109    "channels": "/assets/channels/index-f1d69946.js",
110    "controllers/accounts_controller": "/assets/controllers/accounts_controller-11a276a2.js",
111    "controllers/application": "/assets/controllers/application-72078497.js",
112    "controllers/autogrow_controller": "/assets/controllers/autogrow_controller-52fe45af.js",
113    "controllers/books/asciinema_controller": "/assets/controllers/books/asciinema_controller-ac684a88.js",
114    "controllers/books/chapter_controller": "/assets/controllers/books/chapter_controller-3bb37e91.js",
115    "controllers/books/reader_controller": "/assets/controllers/books/reader_controller-ca782f44.js",
116    "controllers/books/voice_controller": "/assets/controllers/books/voice_controller-1a57c5bd.js",
117    "controllers/braintree/dropin_controller": "/assets/controllers/braintree/dropin_controller-3d055198.js",
118    "controllers/braintree/paypal_controller": "/assets/controllers/braintree/paypal_controller-f2e55280.js",
119    "controllers/bridge/form_controller": "/assets/controllers/bridge/form_controller-af9e5b31.js",
120    "controllers/bridge/menu_button_controller": "/assets/controllers/bridge/menu_button_controller-3dbc4bac.js",
121    "controllers/bridge/notification_badge_controller": "/assets/controllers/bridge/notification_badge_controller-60b5ca1f.js",
122    "controllers/bridge/notification_token_controller": "/assets/controllers/bridge/notification_token_controller-d9ee7a12.js",
123    "controllers/bridge/sign_out_controller": "/assets/controllers/bridge/sign_out_controller-e3b504f4.js",
124    "controllers/bulk_controller": "/assets/controllers/bulk_controller-f3a52670.js",
125    "controllers/calculator_form_controller": "/assets/controllers/calculator_form_controller-d27ca8d8.js",
126    "controllers/clipboard_controller": "/assets/controllers/clipboard_controller-6c259b1c.js",
127    "controllers/community/chat_controller": "/assets/controllers/community/chat_controller-874dcda8.js",
128    "controllers/community/copy_controller": "/assets/controllers/community/copy_controller-7e46f4f7.js",
129    "controllers/community/slash_controller": "/assets/controllers/community/slash_controller-6964a380.js",
130    "controllers/community/sounds_controller": "/assets/controllers/community/sounds_controller-2293075c.js",
131    "controllers/courses/accordion_controller": "/assets/controllers/courses/accordion_controller-c876402e.js",
132    "controllers/courses/check_controller": "/assets/controllers/courses/check_controller-4f49042c.js",
133    "controllers/courses/code_highlight_controller": "/assets/controllers/courses/code_highlight_controller-54b5cf87.js",
134    "controllers/courses/embed_player_controller": "/assets/controllers/courses/embed_player_controller-1a70f007.js",
135    "controllers/courses/hardware_bridge_controller": "/assets/controllers/courses/hardware_bridge_controller-ec707938.js",
136    "controllers/courses/lesson_complete_controller": "/assets/controllers/courses/lesson_complete_controller-486d9b73.js",
137    "controllers/courses/lesson_controller": "/assets/controllers/courses/lesson_controller-0964d738.js",
138    "controllers/courses/tutor_controller": "/assets/controllers/courses/tutor_controller-bad5447a.js",
139    "controllers/courses/widget_controller": "/assets/controllers/courses/widget_controller-867513ff.js",
140    "controllers/curator_task_controller": "/assets/controllers/curator_task_controller-2a85b70d.js",
141    "controllers/curriculum/syllabus_toggle_controller": "/assets/controllers/curriculum/syllabus_toggle_controller-841d0f56.js",
142    "controllers/ecommerce/accessories_controller": "/assets/controllers/ecommerce/accessories_controller-23c77053.js",
143    "controllers/ecommerce/account_menu_controller": "/assets/controllers/ecommerce/account_menu_controller-8c885feb.js",
144    "controllers/ecommerce/address_autocomplete_controller": "/assets/controllers/ecommerce/address_autocomplete_controller-3035b98b.js",
145    "controllers/ecommerce/address_label_controller": "/assets/controllers/ecommerce/address_label_controller-eb10d2fb.js",
146    "controllers/ecommerce/address_prefill_controller": "/assets/controllers/ecommerce/address_prefill_controller-ecb062a3.js",
147    "controllers/ecommerce/admin_order_item_picker_controller": "/assets/controllers/ecommerce/admin_order_item_picker_controller-1b57a89e.js",
148    "controllers/ecommerce/admin_shortcut_controller": "/assets/controllers/ecommerce/admin_shortcut_controller-933799bc.js",
149    "controllers/ecommerce/ai_image_field_controller": "/assets/controllers/ecommerce/ai_image_field_controller-eb4965a2.js",
150    "controllers/ecommerce/ai_search_polling_controller": "/assets/controllers/ecommerce/ai_search_polling_controller-76277634.js",
151    "controllers/ecommerce/ai_summary_tracking_controller": "/assets/controllers/ecommerce/ai_summary_tracking_controller-4414ee97.js",
152    "controllers/ecommerce/alternative_shipping_link_controller": "/assets/controllers/ecommerce/alternative_shipping_link_controller-858b3186.js",
153    "controllers/ecommerce/assembly_player_controller": "/assets/controllers/ecommerce/assembly_player_controller-827cf04e.js",
154    "controllers/ecommerce/auspost_session_capture_controller": "/assets/controllers/ecommerce/auspost_session_capture_controller-64bba703.js",
155    "controllers/ecommerce/auto_scroll_controller": "/assets/controllers/ecommerce/auto_scroll_controller-c3ca922b.js",
156    "controllers/ecommerce/avatar_picker_controller": "/assets/controllers/ecommerce/avatar_picker_controller-16fceb47.js",
157    "controllers/ecommerce/calculator_frame_controller": "/assets/controllers/ecommerce/calculator_frame_controller-1f0f89a7.js",
158    "controllers/ecommerce/cart_bounce_controller": "/assets/controllers/ecommerce/cart_bounce_controller-0f84c242.js",
159    "controllers/ecommerce/cart_controller": "/assets/controllers/ecommerce/cart_controller-fcad2e18.js",
160    "controllers/ecommerce/cart_prompt_controller": "/assets/controllers/ecommerce/cart_prompt_controller-6d1458cf.js",
161    "controllers/ecommerce/cart_quantity_controller": "/assets/controllers/ecommerce/cart_quantity_controller-c23035ba.js",
162    "controllers/ecommerce/cart_shipping_estimate_controller": "/assets/controllers/ecommerce/cart_shipping_estimate_controller-74f8b119.js",
163    "controllers/ecommerce/cascade_menu_controller": "/assets/controllers/ecommerce/cascade_menu_controller-1433cd49.js",
164    "controllers/ecommerce/cast_controller": "/assets/controllers/ecommerce/cast_controller-eb0b35fd.js",
165    "controllers/ecommerce/cast_editor_controller": "/assets/controllers/ecommerce/cast_editor_controller-fb27fac9.js",
166    "controllers/ecommerce/cast_import_controller": "/assets/controllers/ecommerce/cast_import_controller-7f5b51b7.js",
167    "controllers/ecommerce/chat_form_controller": "/assets/controllers/ecommerce/chat_form_controller-58b093c8.js",
168    "controllers/ecommerce/chat_widget_controller": "/assets/controllers/ecommerce/chat_widget_controller-95f5a43c.js",
169    "controllers/ecommerce/checkout_complete_controller": "/assets/controllers/ecommerce/checkout_complete_controller-1d4ddd8e.js",
170    "controllers/ecommerce/checkout_controller": "/assets/controllers/ecommerce/checkout_controller-948bb301.js",
171    "controllers/ecommerce/cli_mode_controller": "/assets/controllers/ecommerce/cli_mode_controller-4b2b1049.js",
172    "controllers/ecommerce/code_sample_controller": "/assets/controllers/ecommerce/code_sample_controller-1c3a529e.js",
173    "controllers/ecommerce/collection_delivery_controller": "/assets/controllers/ecommerce/collection_delivery_controller-c48c26c2.js",
174    "controllers/ecommerce/combo_search_controller": "/assets/controllers/ecommerce/combo_search_controller-c05265d2.js",
175    "controllers/ecommerce/content_schedule_form_controller": "/assets/controllers/ecommerce/content_schedule_form_controller-3864686d.js",
176    "controllers/ecommerce/copy_link_controller": "/assets/controllers/ecommerce/copy_link_controller-4b93caf4.js",
177    "controllers/ecommerce/copy_markdown_controller": "/assets/controllers/ecommerce/copy_markdown_controller-1c27fd5a.js",
178    "controllers/ecommerce/copy_text_controller": "/assets/controllers/ecommerce/copy_text_controller-e7cc6d65.js",
179    "controllers/ecommerce/delivery_date_controller": "/assets/controllers/ecommerce/delivery_date_controller-b2a5da3f.js",
180    "controllers/ecommerce/disclosure_controller": "/assets/controllers/ecommerce/disclosure_controller-d7f3bacf.js",
181    "controllers/ecommerce/discount_code_controller": "/assets/controllers/ecommerce/discount_code_controller-4ebfee0a.js",
182    "controllers/ecommerce/dispatch_countdown_controller": "/assets/controllers/ecommerce/dispatch_countdown_controller-e92a68f7.js",
183    "controllers/ecommerce/email_blocks_controller": "/assets/controllers/ecommerce/email_blocks_controller-2901a762.js",
184    "controllers/ecommerce/expandable_text_controller": "/assets/controllers/ecommerce/expandable_text_controller-4726936a.js",
185    "controllers/ecommerce/facet_toggle_controller": "/assets/controllers/ecommerce/facet_toggle_controller-1ae57039.js",
186    "controllers/ecommerce/file_drop_controller": "/assets/controllers/ecommerce/file_drop_controller-7dea4d19.js",
187    "controllers/ecommerce/fritzing_controller": "/assets/controllers/ecommerce/fritzing_controller-5d0a9d11.js",
188    "controllers/ecommerce/gopeople_map_controller": "/assets/controllers/ecommerce/gopeople_map_controller-20a34f85.js",
189    "controllers/ecommerce/gtag_controller": "/assets/controllers/ecommerce/gtag_controller-c2cc32f9.js",
190    "controllers/ecommerce/guide_cast_controller": "/assets/controllers/ecommerce/guide_cast_controller-5b640df5.js",
191    "controllers/ecommerce/guide_media_controller": "/assets/controllers/ecommerce/guide_media_controller-c13fd060.js",
192    "controllers/ecommerce/help_search_controller": "/assets/controllers/ecommerce/help_search_controller-6820f362.js",
193    "controllers/ecommerce/hover_card_controller": "/assets/controllers/ecommerce/hover_card_controller-08b85624.js",
194    "controllers/ecommerce/icon_preview_controller": "/assets/controllers/ecommerce/icon_preview_controller-6862f757.js",
195    "controllers/ecommerce/image_gallery_controller": "/assets/controllers/ecommerce/image_gallery_controller-1f4b9c41.js",
196    "controllers/ecommerce/image_swiper_controller": "/assets/controllers/ecommerce/image_swiper_controller-a8652bb7.js",
197    "controllers/ecommerce/image_upload_controller": "/assets/controllers/ecommerce/image_upload_controller-9c5b3417.js",
198    "controllers/ecommerce/inline_confirm_controller": "/assets/controllers/ecommerce/inline_confirm_controller-88b0d367.js",
199    "controllers/ecommerce/kit_variant_selector_controller": "/assets/controllers/ecommerce/kit_variant_selector_controller-4d93ff91.js",
200    "controllers/ecommerce/lead_time_tip_controller": "/assets/controllers/ecommerce/lead_time_tip_controller-82186a4d.js",
201    "controllers/ecommerce/lead_times_controller": "/assets/controllers/ecommerce/lead_times_controller-2be1bfff.js",
202    "controllers/ecommerce/lightbox_controller": "/assets/controllers/ecommerce/lightbox_controller-0fe3b546.js",
203    "controllers/ecommerce/live_search_controller": "/assets/controllers/ecommerce/live_search_controller-b

2036a4b7b2.js",
204    "controllers/ecommerce/marketing/campaign_editor_controller": "/assets/controllers/ecommerce/marketing/campaign_editor_controller-05d34823.js",
205    "controllers/ecommerce/marketing/product_picker_controller": "/assets/controllers/ecommerce/marketing/product_picker_controller-73c3dec5.js",
206    "controllers/ecommerce/mcp_reveal_controller": "/assets/controllers/ecommerce/mcp_reveal_controller-b2852608.js",
207    "controllers/ecommerce/mobile_menu_controller": "/assets/controllers/ecommerce/mobile_menu_controller-521edd1b.js",
208    "controllers/ecommerce/order_payment_controller": "/assets/controllers/ecommerce/order_payment_controller-cd056900.js",
209    "controllers/ecommerce/order_qty_controller": "/assets/controllers/ecommerce/order_qty_controller-fc0a399d.js",
210    "controllers/ecommerce/order_shipping_editor_controller": "/assets/controllers/ecommerce/order_shipping_editor_controller-fbca79ca.js",
211    "controllers/ecommerce/order_upsell_controller": "/assets/controllers/ecommerce/order_upsell_controller-5a30265a.js",
212    "controllers/ecommerce/organisation_application_controller": "/assets/controllers/ecommerce/organisation_application_controller-fba3496e.js",
213    "controllers/ecommerce/passkey_controller": "/assets/controllers/ecommerce/passkey_controller-b982b6c2.js",
214    "controllers/ecommerce/paypal_buttons_controller": "/assets/controllers/ecommerce/paypal_buttons_controller-aac768c2.js",
215    "controllers/ecommerce/paypal_loader": "/assets/controllers/ecommerce/paypal_loader-6ee75676.js",
216    "controllers/ecommerce/price_range_controller": "/assets/controllers/ecommerce/price_range_controller-9f562796.js",
217    "controllers/ecommerce/product_chat_controller": "/assets/controllers/ecommerce/product_chat_controller-326fc765.js",
218    "controllers/ecommerce/product_compare_controller": "/assets/controllers/ecommerce/product_compare_controller-eae1beaf.js",
219    "controllers/ecommerce/project_list_ai_controller": "/assets/controllers/ecommerce/project_list_ai_controller-bdb23404.js",
220    "controllers/ecommerce/purchase_order_billing_controller": "/assets/controllers/ecommerce/purchase_order_billing_controller-df5d8426.js",
221    "controllers/ecommerce/purchase_order_form_controller": "/assets/controllers/ecommerce/purchase_order_form_controller-6f360425.js",
222    "controllers/ecommerce/purchase_order_invoicee_controller": "/assets/controllers/ecommerce/purchase_order_invoicee_controller-8ee587fe.js",
223    "controllers/ecommerce/purchase_order_poll_controller": "/assets/controllers/ecommerce/purchase_order_poll_controller-85fc0d5d.js",
224    "controllers/ecommerce/quantity_controller": "/assets/controllers/ecommerce/quantity_controller-57eb31cf.js",
225    "controllers/ecommerce/question_answer_controller": "/assets/controllers/ecommerce/question_answer_controller-582e34a9.js",
226    "controllers/ecommerce/quote_details_controller": "/assets/controllers/ecommerce/quote_details_controller-bc96365a.js",
227    "controllers/ecommerce/quote_drawer_controller": "/assets/controllers/ecommerce/quote_drawer_controller-5ac90a18.js",
228    "controllers/ecommerce/quote_request_form_controller": "/assets/controllers/ecommerce/quote_request_form_controller-1e5a046a.js",
229    "controllers/ecommerce/quote_trigger_controller": "/assets/controllers/ecommerce/quote_trigger_controller-06dd4281.js",
230    "controllers/ecommerce/remove_collect_controller": "/assets/controllers/ecommerce/remove_collect_controller-18bea4a2.js",
231    "controllers/ecommerce/review_moderation_controller": "/assets/controllers/ecommerce/review_moderation_controller-b4d37a29.js",
232    "controllers/ecommerce/review_reply_controller": "/assets/controllers/ecommerce/review_reply_controller-f5bd0d21.js",
233    "controllers/ecommerce/review_suggestions_controller": "/assets/controllers/ecommerce/review_suggestions_controller-6024df21.js",
234    "controllers/ecommerce/review_vote_controller": "/assets/controllers/ecommerce/review_vote_controller-dd675bb0.js",
235    "controllers/ecommerce/rib_controller": "/assets/controllers/ecommerce/rib_controller-92ba2974.js",
236    "controllers/ecommerce/search_suggest_controller": "/assets/controllers/ecommerce/search_suggest_controller-ed0f9ff6.js",
237    "controllers/ecommerce/search_tabs_controller": "/assets/controllers/ecommerce/search_tabs_controller-ce965b56.js",
238    "controllers/ecommerce/star_rating_controller": "/assets/controllers/ecommerce/star_rating_controller-7c73908d.js",
239    "controllers/ecommerce/static_player_controller": "/assets/controllers/ecommerce/static_player_controller-ef5fd3e0.js",
240    "controllers/ecommerce/step_form_controller": "/assets/controllers/ecommerce/step_form_controller-7a30e23b.js",
241    "controllers/ecommerce/step_gallery_controller": "/assets/controllers/ecommerce/step_gallery_controller-a2135937.js",
242    "controllers/ecommerce/streaming_markdown_controller": "/assets/controllers/ecommerce/streaming_markdown_controller-b889a399.js",
243    "controllers/ecommerce/stripe_card_controller": "/assets/controllers/ecommerce/stripe_card_controller-27f62f3e.js",
244    "controllers/ecommerce/stripe_loader": "/assets/controllers/ecommerce/stripe_loader-008bb2ca.js",
245    "controllers/ecommerce/submit_on_change_controller": "/assets/controllers/ecommerce/submit_on_change_controller-ea3342b5.js",
246    "controllers/ecommerce/suggestion_link_form_controller": "/assets/controllers/ecommerce/suggestion_link_form_controller-98ef54b2.js",
247    "controllers/ecommerce/ultrasearch_controller": "/assets/controllers/ecommerce/ultrasearch_controller-c0e627c7.js",
248    "controllers/ecommerce/variant_selector_controller": "/assets/controllers/ecommerce/variant_selector_controller-6516dcb8.js",
249    "controllers/ecommerce/verification_controller": "/assets/controllers/ecommerce/verification_controller-28b0bcc0.js",
250    "controllers/ecommerce/video_frame_scrubber_controller": "/assets/controllers/ecommerce/video_frame_scrubber_controller-a01312bc.js",
251    "controllers/ecommerce/view_toggle_controller": "/assets/controllers/ecommerce/view_toggle_controller-357d3f2c.js",
252    "controllers": "/assets/controllers/index-707715fe.js",
253    "controllers/inline_edit_controller": "/assets/controllers/inline_edit_controller-b4f0b43b.js",
254    "controllers/nested_form_controller": "/assets/controllers/nested_form_controller-f2290dc3.js",
255    "controllers/notifications_controller": "/assets/controllers/notifications_controller-2bd5f42f.js",
256    "controllers/paddle/billing_controller": "/assets/controllers/paddle/billing_controller-9d922ac8.js",
257    "controllers/paddle/classic_controller": "/assets/controllers/paddle/classic_controller-c223895c.js",
258    "controllers/pdf_viewer_controller": "/assets/controllers/pdf_viewer_controller-e98a447a.js",
259    "controllers/platform_block_controller": "/assets/controllers/platform_block_controller-bcb8b75d.js",
260    "controllers/platform_editor_controller": "/assets/controllers/platform_editor_controller-222571d7.js",
261    "controllers/pricing_controller": "/assets/controllers/pricing_controller-087c7c89.js",
262    "controllers/proposed_products_bulk_controller": "/assets/controllers/proposed_products_bulk_controller-953d50f3.js",
263    "controllers/reorder_variant_controller": "/assets/controllers/reorder_variant_controller-edc15fa2.js",
264    "controllers/share_controller": "/assets/controllers/share_controller-162f9e9e.js",
265    "controllers/sortable_controller": "/assets/controllers/sortable_controller-51127e97.js",
266    "controllers/stripe/embedded_checkout_controller": "/assets/controllers/stripe/embedded_checkout_controller-588a65f0.js",
267    "controllers/theme_controller": "/assets/controllers/theme_controller-fbc6adda.js",
268    "controllers/tooltip_controller": "/assets/controllers/tooltip_controller-7a8350d2.js",
269    "controllers/traffic_map_controller": "/assets/controllers/traffic_map_controller-8286d8d6.js",
270    "controllers/traffic_time_controller": "/assets/controllers/traffic_time_controller-31e907b7.js",
271    "controllers/typeahead_controller": "/assets/controllers/typeahead_controller-2

2711790530.js",
272    "controllers/unfurl_link_controller": "/assets/controllers/unfurl_link_controller-afca6d29.js",
273    "admin_controllers/admin_voice_agent_controller": "/assets/admin_controllers/admin_voice_agent_controller-8a762a14.js",
274    "admin_controllers/ecommerce/admin_embed_steps_controller": "/assets/admin_controllers/ecommerce/admin_embed_steps_controller-ef2db49f.js",
275    "admin_controllers/ecommerce/admin_funnel_graph_controller": "/assets/admin_controllers/ecommerce/admin_funnel_graph_controller-440f53f5.js",
276    "admin_controllers/ecommerce/admin_refund_composer_controller": "/assets/admin_controllers/ecommerce/admin_refund_composer_controller-f2ba6523.js",
277    "admin_controllers/ecommerce/admin_search_controller": "/assets/admin_controllers/ecommerce/admin_search_controller-a21147ac.js",
278    "admin_controllers/ecommerce/admin_sidebar_controller": "/assets/admin_controllers/ecommerce/admin_sidebar_controller-afe0b94d.js",
279    "admin_controllers/ecommerce/admin_traffic_heartbeat_controller": "/assets/admin_controllers/ecommerce/admin_traffic_heartbeat_controller-25cdf1e2.js",
280    "admin_controllers/ecommerce/admin_transactional_tabs_controller": "/assets/admin_controllers/ecommerce/admin_transactional_tabs_controller-deb99231.js",
281    "admin_controllers/ecommerce/cancel_order_controller": "/assets/admin_controllers/ecommerce/cancel_order_controller-4148dbfc.js",
282    "admin_controllers/ecommerce/date_preset_controller": "/assets/admin_controllers/ecommerce/date_preset_controller-8b7f73f1.js",
283    "admin_controllers/ecommerce/dialog_controller": "/assets/admin_controllers/ecommerce/dialog_controller-29d2b0d9.js",
284    "admin_controllers/ecommerce/manual_review_form_controller": "/assets/admin_controllers/ecommerce/manual_review_form_controller-c5357163.js",
285    "admin_controllers/ecommerce/networks_grid_controller": "/assets/admin_controllers/ecommerce/networks_grid_controller-28631743.js",
286    "admin_controllers": "/assets/admin_controllers/index-f20a9dd6.js",
287    "src/admin/funnel_graph": "/assets/src/admin/funnel_graph-052d927d.js",
288    "src/cast/clips": "/assets/src/cast/clips-2d042287.js",
289    "src/cast": "/assets/src/cast/index-f7fb5e80.js",
290    "src/cast/player": "/assets/src/cast/player-595b6a5c.js",
291    "src/cast/renderer": "/assets/src/cast/renderer-a1c3feb9.js",
292    "src/cast/styles": "/assets/src/cast/styles-ed482857.js",
293    "src/cast/timestamp": "/assets/src/cast/timestamp-6b5c0230.js",
294    "src/cast/videos": "/assets/src/cast/videos-b091fc53.js",
295    "src/cast/vt": "/assets/src/cast/vt-da5cb69d.js",
296    "src/circuit3d/assembly_checks": "/assets/src/circuit3d/assembly_checks-770e5df0.js",
297    "src/circuit3d/assembly_rig": "/assets/src/circuit3d/assembly_rig-b4641726.js",
298    "src/circuit3d/attach": "/assets/src/circuit3d/attach-53ccecae.js",
299    "src/circuit3d/bench_supply": "/assets/src/circuit3d/bench_supply-c84549a5.js",
300    "src/circuit3d/breadboard_seating": "/assets/src/circuit3d/breadboard_seating-b2102840.js",
301    "src/circuit3d/breadboard_teaching": "/assets/src/circuit3d/breadboard_teaching-252bad2a.js",
302    "src/circuit3d/button_motion": "/assets/src/circuit3d/button_motion-4372b916.js",
303    "src/circuit3d/circuit_checks": "/assets/src/circuit3d/circuit_checks-2e4711ba.js",
304    "src/circuit3d/component_collisions": "/assets/src/circuit3d/component_collisions-02f2ef55.js",
305    "src/circuit3d/component_footprints": "/assets/src/circuit3d/component_footprints-11cde6cf.js",
306    "src/circuit3d/component_info": "/assets/src/circuit3d/component_info-10e59f7f.js",
307    "src/circuit3d/component_outputs": "/assets/src/circuit3d/component_outputs-1d8bca82.js",
308    "src/circuit3d/component_teaching": "/assets/src/circuit3d/component_teaching-287cfa04.js",
309    "src/circuit3d/connection_shots": "/assets/src/circuit3d/connection_shots-1db83128.js",
310    "src/circuit3d/connection_teaching": "/assets/src/circuit3d/connection_teaching-d3a3f1ce.js",
311    "src/circuit3d/connector_catalog": "/assets/src/circuit3d/connector_catalog-d3f2c842.js",
312    "src/circuit3d/connector_mating": "/assets/src/circuit3d/connector_mating-3cee8803.js",
313    "src/circuit3d/connector_models": "/assets/src/circuit3d/connector_models-5b0ce3ac.js",
314    "src/circuit3d/crack_code_demo": "/assets/src/circuit3d/crack_code_demo-5bfa1fc2.js",
315    "src/circuit3d/crack_code_shield": "/assets/src/circuit3d/crack_code_shield-92dfc7ef.js",
316    "src/circuit3d/dht11": "/assets/src/circuit3d/dht11-7b2cb957.js",
317    "src/circuit3d/electrical_flow": "/assets/src/circuit3d/electrical_flow-f6ed5286.js",
318    "src/circuit3d/embed_loading": "/assets/src/circuit3d/embed_loading-4889dd3d.js",
319    "src/circuit3d/explorer": "/assets/src/circuit3d/explorer-ec39f0be.js",
320    "src/circuit3d/geometry": "/assets/src/circuit3d/geometry-60818192.js",
321    "src/circuit3d/jumper_connectors": "/assets/src/circuit3d/jumper_connectors-b19e1cde.js",
322    "src/circuit3d/kit_accessories": "/assets/src/circuit3d/kit_accessories-4badb1d5.js",
323    "src/circuit3d/kit_models": "/assets/src/circuit3d/kit_models-1312b30b.js",
324    "src/circuit3d/label_anchor": "/assets/src/circuit3d/label_anchor-928a147b.js",
325    "src/circuit3d/learning_kit_models": "/assets/src/circuit3d/learning_kit_models-bd86b726.js",
326    "src/circuit3d/lighting": "/assets/src/circuit3d/lighting-a27096c1.js",
327    "src/circuit3d/little_bird_logo": "/assets/src/circuit3d/little_bird_logo-401650b8.js",
328    "src/circuit3d/microbit": "/assets/src/circuit3d/microbit-2ab33a1b.js",
329    "src/circuit3d/microbit_gpio_breakout": "/assets/src/circuit3d/microbit_gpio_breakout-6932bb0b.js",
330    "src/circuit3d/microbit_gpio_demo": "/assets/src/circuit3d/microbit_gpio_demo-284d8e13.js",
331    "src/circuit3d/narration_callouts": "/assets/src/circuit3d/narration_callouts-a3ead121.js",
332    "src/circuit3d/output_state": "/assets/src/circuit3d/output_state-b12d53fe.js",
333    "src/circuit3d/parts": "/assets/src/circuit3d/parts-807cb663.js",
334    "src/circuit3d/pcb_geometry": "/assets/src/circuit3d/pcb_geometry-820a74b7.js",
335    "src/circuit3d/pico2w": "/assets/src/circuit3d/pico2w-86746f9e.js",
336    "src/circuit3d/pico2w_demo": "/assets/src/circuit3d/pico2w_demo-72a3b721.js",
337    "src/circuit3d/pin_labels": "/assets/src/circuit3d/pin_labels-10daf1e6.js",
338    "src/circuit3d/pin_readouts": "/assets/src/circuit3d/pin_readouts-c31ccb05.js",
339    "src/circuit3d/playback": "/assets/src/circuit3d/playback-18ef6648.js",

340    "src/circuit3d/player": "/assets/src/circuit3d/player-4be4a3b0.js",
341    "src/circuit3d/player_camera": "/assets/src/circuit3d/player_camera-61fc71e6.js",
342    "src/circuit3d/player_readouts": "/assets/src/circuit3d/player_readouts-3b22e5ec.js",
343    "src/circuit3d/player_window": "/assets/src/circuit3d/player_window-b0fe07b9.js",
344    "src/circuit3d/potentiometer_controls": "/assets/src/circuit3d/potentiometer_controls-be4792c6.js",
345    "src/circuit3d/potentiometer_explainer": "/assets/src/circuit3d/potentiometer_explainer-f1bf3c05.js",
346    "src/circuit3d/render_scheduler": "/assets/src/circuit3d/render_scheduler-6f8fd675.js",
347    "src/circuit3d/studio": "/assets/src/circuit3d/studio-c2eb57c5.js",
348    "src/circuit3d/studio_catalog": "/assets/src/circuit3d/studio_catalog-a9e0ad05.js",
349    "src/circuit3d/studio_demos": "/assets/src/circuit3d/studio_demos-75505fc5.js",
350    "src/circuit3d/studio_document": "/assets/src/circuit3d/studio_document-9d5140da.js",
351    "src/circuit3d/studio_icons": "/assets/src/circuit3d/studio_icons-0de5e0cf.js",
352    "src/circuit3d/studio_layout": "/assets/src/circuit3d/studio_layout-095e8379.js",
353    "src/circuit3d/studio_motion": "/assets/src/circuit3d/studio_motion-5ad453ea.js",
354    "src/circuit3d/studio_scene": "/assets/src/circuit3d/studio_scene-b0a8a9b4.js",
355    "src/circuit3d/studio_shortcuts": "/assets/src/circuit3d/studio_shortcuts-05ae9f7e.js",
356    "src/circuit3d/studio_timing": "/assets/src/circuit3d/studio_timing-6d55d294.js",
357    "src/circuit3d/studio_uno_demos": "/assets/src/circuit3d/studio_uno_demos-d4bb4b72.js",
358    "src/circuit3d/teaching_shots": "/assets/src/circuit3d/teaching_shots-871f295c.js",
359    "src/circuit3d/textures": "/assets/src/circuit3d/textures-ba9b62ee.js",
360    "src/circuit3d/traffic_light": "/assets/src/circuit3d/traffic_light-4af17355.js",
361    "src/circuit3d/uno": "/assets/src/circuit3d/uno-d4e8e259.js",
362    "src/circuit3d/usb_micro_b": "/assets/src/circuit3d/usb_micro_b-2b4227f9.js",
363    "src/circuit3d/view": "/assets/src/circuit3d/view-444af8b5.js",
364    "src/circuit3d/voltage_wave": "/assets/src/circuit3d/voltage_wave-c20c9da2.js",
365    "src/circuit3d/wire_routing": "/assets/src/circuit3d/wire_routing-d347477a.js",
366    "src/circuit3d/wires": "/assets/src/circuit3d/wires-783c6ad3.js",
367    "src/circuit3d/workbench_grid": "/assets/src/circuit3d/workbench_grid-5cfa8293.js",
368    "src/confirm": "/assets/src/confirm-11170262.js",
369    "src/direct_uploads": "/assets/src/direct_uploads-4eaca289.js",
370    "src/guide_media/cues": "/assets/src/guide_media/cues-cdd417e8.js",
371    "src/guide_media/howler_audio": "/assets/src/guide_media/howler_audio-4cf6f3f8.js",
372    "src/guide_media/narration": "/assets/src/guide_media/narration-9fc89284.js",
373    "src": "/assets/src/index-a07bfae1.js",
374    "src/lazysrc": "/assets/src/lazysrc-b829c4ae.js",
375    "src/lowercase_email_inputs": "/assets/src/lowercase_email_inputs-5432de83.js",
376    "src/turbo_streams": "/assets/src/turbo_streams-a7579a8b.js",
377    "src/webmcp": "/assets/src/webmcp-94a25c7b.js"
378  }
379}</script>

379
380<link rel="modulepreload" href="/assets/application-f556c526.js">
381<link rel="modulepreload" href="/assets/stimulus-d59b3b7f.js">
382<link rel="modulepreload" href="/assets/stimulus-loading-1fc53fe7.js">
383<link rel="modulepreload" href="/assets/turbo.min-9fd88cd5.js">
384<link rel="modulepreload" href="/assets/actiontext.esm-c376325e.js">
385<link rel="modulepreload" href="/assets/actioncable.esm-e0ec9819.js">
386<link rel="modulepreload" href="/assets/activestorage.esm-81bb34bc.js">
387<link rel="modulepreload" href="/assets/@hotwired--hotwire-native-bridge-489bc31d.js">
388<link rel="modulepreload" href="/assets/local-time.es2017-esm-6e8a38c5.js">
389<link rel="modulepreload" href="/assets/tailwindcss-stimulus-components-ab09c6a0.js">
390<link rel="modulepreload" href="/assets/channels/consumer-303bcbdf.js">
391<link rel="modulepreload" href="/assets/channels/index-f1d69946.js">
392<link rel="modulepreload" href="/assets/src/confirm-11170262.js">
393<link rel="modulepreload" href="/assets/src/direct_uploads-4eaca289.js">
394<link rel="modulepreload" href="/assets/src/index-a07bfae1.js">
395<link rel="modulepreload" href="/assets/src/lazysrc-b829c4ae.js">
396<link rel="modulepreload" href="/assets/src/lowercase_email_inputs-5432de83.js">
397<link rel="modulepreload" href="/assets/src/turbo_streams-a7579a8b.js">
398<link rel="modulepreload" href="/assets/src/webmcp-94a25c7b.js">

399<script type="module">import "application"</script>

399
400<link rel="stylesheet" href="/assets/tailwind-d833b0d0.css" media="all" data-turbo-track="reload" />
401
402
403
404
405
406<link rel="preload" as="font" type="font/woff2" crossorigin
407      href="/assets/inter/InterVariable-latin-4402b849.woff2">
408<style>
409  @font-face {
410    font-family: InterVariable;
411    font-style: normal;
412    font-weight: 400 900;
413    font-display: swap;
414    src: url("/assets/inter/InterVariable-latin-4402b849.woff2") format("woff2");
415    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+2264-2265, U+2713, U+FEFF, U+FFFD;
416  }
417  @font-face {
418    font-family: InterVariable;
419    font-style: normal;
420    font-weight: 400 900;
421    font-display: swap;
422    src: url("/assets/inter/InterVariable-latin-ext-d6fb5648.woff2") format("woff2");
423    unicode-range: U+0100-02AF, U+0304-0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
424  }
425  @font-face {
426    font-family: InterVariable;
427    font-style: normal;
428    font-weight: 400 900;
429    font-display: swap;
430    src: url("/assets/inter/InterVariable-symbols-c133af34.woff2") format("woff2");
431    unicode-range: U+0370-03FF, U+2070-209F, U+20A0-20CF, U+2100-214F, U+2126;
432  }
433  @font-face {
434    font-family: InterVariable;
435    font-style: italic;
436    font-weight: 400 900;
437    font-display: swap;
438    src: url("/assets/inter/InterVariable-Italic-latin-a5ec96fa.woff2") format("woff2");
439    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+2264-2265, U+2713, U+FEFF, U+FFFD;
440  }
441  @font-face {
442    font-family: InterVariable;
443    font-style: italic;
444    font-weight: 400 900;
445    font-display: swap;
446    src: url("/assets/inter/InterVariable-Italic-latin-ext-bce394e3.woff2") format("woff2");
447    unicode-range: U+0100-02AF, U+0304-0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
448  }
449  @font-face {
450    font-family: InterVariable;
451    font-style: italic;
452    font-weight: 400 900;
453    font-display: swap;
454    src: url("/assets/inter/InterVariable-Italic-symbols-19ef9575.woff2") format("woff2");
455    unicode-range: U+0370-03FF, U+2070-209F, U+20A0-20CF, U+2100-214F, U+2126;
456  }
457
458  @font-face {
459    font-family: Inter;
460    font-style: normal;
461    font-weight: 400 900;
462    font-display: swap;
463    src: url("/assets/inter/InterVariable-latin-4402b849.woff2") format("woff2");
464    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+2264-2265, U+2713, U+FEFF, U+FFFD;
465  }
466  @font-face {
467    font-family: Inter;
468    font-style: italic;
469    font-weight: 400 900;
470    font-display: swap;
471    src: url("/assets/inter/InterVariable-Italic-latin-a5ec96fa.woff2") format("woff2");
472    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+2264-2265, U+2713, U+FEFF, U+FFFD;
473  }
474  @font-face {
475    font-family: &quot;Inter var&quot;;
476    font-style: normal;
477    font-weight: 400 900;
478    font-display: swap;
479    src: url("/assets/inter/InterVariable-latin-4402b849.woff2") format("woff2");
480    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+2264-2265, U+2713, U+FEFF, U+FFFD;
481  }
482  @font-face {
483    font-family: &quot;Inter var&quot;;
484    font-style: italic;
485    font-weight: 400 900;
486    font-display: swap;
487    src: url("/assets/inter/InterVariable-Italic-latin-a5ec96fa.woff2") format("woff2");
488    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+2264-2265, U+2713, U+FEFF, U+FFFD;
489  }
490</style>
491
492
493
494
495
496    
497

497<script type="application/ld+json">
498[{"@context":"https://schema.org","@type":"Organization","name":"Little Bird Electronics","legalName":"Little Bird Electronics Pty Ltd","url":"https://littlebirdelectronics.com.au/","logo":"https://littlebirdelectronics.com.au/assets/little-bird-logo-e4ef2bca.svg","contactPoint":{"@type":"ContactPoint","telephone":"+61-1300-240-817","contactType":"customer service","email":"[email protected]","areaServed":"AU","availableLanguage":"English"},"address":{"@type":"PostalAddress","streetAddress":"Unit 13, 8-12 Leighton Place","addressLocality":"Hornsby","addressRegion":"NSW","postalCode":"2077","addressCountry":"AU"},"sameAs":["https://x.com/lbhq"]},{"@context":"https://schema.org","@type":"WebSite","name":"Little Bird Electronics","url":"https://littlebirdelectronics.com.au/","potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://littlebirdelectronics.com.au/products?q={search_term_string}"},"query-input":"required name=search_term_string"}}]
499</script>

499
500
501  <link rel="alternate" type="application/atom+xml" title="New Products" href="https://littlebirdelectronics.com.au/products.atom">
502  <link rel="alternate" type="application/activity+json" href="/activitypub/actor">
503  
504  
505</head>
506<body class="h-full flex flex-col bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100 antialiased"
507  data-controller="ecommerce--lightbox">
508  <div class="sr-only focus-within:not-sr-only focus-within:fixed focus-within:top-2 focus-within:left-2 focus-within:z-[100] focus-within:max-w-md focus-within:rounded-lg focus-within:bg-gray-900 focus-within:px-4 focus-within:py-3 focus-within:text-sm focus-within:text-white focus-within:shadow-lg">
509    AI agents &amp; screen readers: for a machine-readable, text-only catalogue,
510      start at <a href="/llms.txt" class="font-semibold underline">/llms.txt</a>.
511    Products are available as Markdown
512    (<a href="/products.md" class="underline">/products.md</a>, <code>/products/{handle}.md</code>)
513    and JSON
514    (<a href="/products.json" class="underline">/products.json</a>, <code>/products/{handle}.json</code>).
515  </div>
516
517      <div data-controller="ecommerce--gtag"
518       data-ecommerce--gtag-events-value="[{&quot;name&quot;:&quot;page_view&quot;,&quot;params&quot;:{}}]"
519       data-ecommerce--gtag-user-data-value="{}"
520       hidden></div>
521
522
523
524
525
526
527  <div class="bg-brand-600 dark:bg-brand-900 text-sm py-2 px-4 border-b border-brand-500">
528    <div class="mx-auto max-w-7xl flex items-center justify-between">
529      <div class="flex items-center gap-5">
530        <a href="tel:1300240817" class="flex items-center gap-2 text-white hover:text-gray-200 transition-colors">
531          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" /></svg>
532          <span class="font-semibold">1300 240 817</span>
533        </a>
534        <a href="mailto:[email protected]" class="hidden sm:flex items-center gap-2 text-white hover:text-gray-200 transition-colors">
535          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" /></svg>
536          <span>[email protected]</span>
537        </a>
538      </div>
539    </div>
540  </div>
541
542  <header class="sticky top-0 z-40 bg-brand-400 dark:bg-brand-800 border-b border-brand-500 dark:border-brand-700" data-controller="ecommerce--mobile-menu">
543    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
544      <div class="flex h-16 items-center gap-x-3 lg:gap-x-6">
545
546        <div class="flex lg:hidden">
547          <button type="button" data-action="ecommerce--mobile-menu#open" class="-ml-2 rounded-md p-2 text-white/80 hover:text-white hover:bg-white/10 transition-colors" aria-label="Open menu">
548            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" /></svg>
549          </button>
550        </div>
551
552        <div class="flex-shrink-0 min-w-0">
553            <a class="flex items-center hover:opacity-90 transition-opacity" href="/">
554              <img class="h-8 w-auto max-w-[120px] object-contain object-left sm:hidden" alt="Little Bird Electronics" draggable="false" src="/assets/little-bird-narrow-logo-91b9e624.svg" />
555              <img class="hidden sm:block h-10 w-[210px] lg:h-12 lg:w-[240px] object-contain" alt="Little Bird Electronics" draggable="false" width="240" height="48" src="/assets/little-bird-wide-logo-a0615984.svg" />
556</a>        </div>
557
558        <form action="/products" method="get" data-turbo="false"
559              class="flex-1 min-w-0 hidden sm:block relative"
560              data-controller="ecommerce--search-suggest"
561              data-ecommerce--search-suggest-url-value="/products/suggest"
562              data-ecommerce--search-suggest-search-url-value="/products"
563              onsubmit="var s=this.querySelector('[name=_scope]'); this.action = s.value || '/products'; s.disabled = true;">
564          <div class="flex items-stretch rounded-md overflow-hidden shadow-sm ring-1 ring-black/10 focus-within:ring-2 focus-within:ring-gold-500 bg-white">
565            <div class="relative flex items-center bg-gray-100 hover:bg-gray-200 border-r border-gray-200">
566              <select name="_scope" aria-label="Search scope"
567                      data-ecommerce--search-suggest-target="scope"
568                      data-action="change->ecommerce--search-suggest#onScopeChange"
569                      class="appearance-none bg-transparent bg-none pl-3 pr-7 py-2 text-xs font-medium text-gray-700 border-0 focus:outline-none focus:ring-0 focus:border-0 cursor-pointer">
570                  <option value="/products" data-scope="all">All</option>
571                  <option value="/products" data-scope="products">Products</option>
572                  <option value="/blogs/news" data-scope="blog">News</option>
573                  <option value="/products" data-scope="education">Education</option>
574                  <option value="/help" data-scope="help">Help</option>
575                  <option value="/products" data-scope="pages">Pages</option>
576              </select>
577              <svg class="pointer-events-none absolute right-2 h-3 w-3 text-gray-500" viewB

577ox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" /></svg>
578            </div>
579            <input type="text" name="q" placeholder="Search Little Bird Electronics" autocomplete="off"
580                   aria-label="Search"
581                   data-ecommerce--search-suggest-target="input"
582                   data-action="input->ecommerce--search-suggest#onInput focus->ecommerce--search-suggest#onFocus keydown->ecommerce--search-suggest#onKeydown"
583                   class="flex-1 min-w-0 px-3 py-2 text-sm touch:text-base text-gray-900 placeholder-gray-500 bg-white border-0 focus:outline-none focus:ring-0 focus:border-0">
584            <button type="button" data-ecommerce--search-suggest-target="clear" data-action="ecommerce--search-suggest#clear" class="hidden px-2 text-gray-400 hover:text-gray-700" aria-label="Clear">
585              <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
586            </button>
587            <button type="submit" class="flex items-center justify-center px-4 bg-gold-500 hover:bg-gold-600 text-white transition-colors" aria-label="Search">
588              <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" /></svg>
589            </button>
590          </div>
591          <div data-ecommerce--search-suggest-target="panel" class="hidden absolute left-0 right-0 top-full mt-1 z-[70] bg-white dark:bg-gray-900 rounded-md shadow-xl ring-1 ring-black/10 dark:ring-white/10 max-h-[70vh] overflow-y-auto"></div>
592        </form>
593
594        <div class="flex items-center gap-x-1 sm:gap-x-2 lg:gap-x-4 flex-shrink-0 ml-auto">
595          <a class="md:hidden flex items-center justify-center rounded-md p-2 text-white/90 hover:text-white hover:bg-white/10 transition-colors" aria-label="Account" href="/account/login">
596            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
597</a>
598            <a class="hidden md:flex flex-col leading-tight rounded-md px-2 py-1 text-white/90 hover:text-white hover:bg-white/10 transition-colors" href="/account/login">
599              <span class="text-[11px]">Hello, sign in</span>
600              <span class="text-sm font-bold">Account &amp; Lists</span>
601</a>
602
603          <a class="relative flex items-end rounded-md px-2 py-1 text-white/90 hover:text-white hover:bg-white/10 transition-colors group" aria-label="Shopping cart" data-controller="ecommerce--cart-bounce" href="/cart">
604            <div class="relative">
605              <svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007Z" /></svg>
606              <turbo-frame id="cart_count">
607              </turbo-frame>
608            </div>
609            <span class="hidden lg:inline ml-1 text-sm font-bold">Cart</span>
610</a>        </div>
611      </div>
612
613      <div class="sm:hidden pb-3 -mt-1 px-4">
614        <form action="/products" method="get" data-turbo="false"
615              class="relative"
616              data-controller="ecommerce--search-suggest"
617              data-ecommerce--search-suggest-url-value="/products/suggest"
618              data-ecommerce--search-suggest-search-url-value="/products">
619          <div class="flex items-stretch rounded-md overflow-hidden shadow-sm ring-1 ring-black/10 focus-within:ring-2 focus-within:ring-gold-500 bg-white">
620            <input type="text" name="q" placeholder="Search Little Bird Electronics" autocomplete="off"
621                   aria-label="Search"
622                   data-ecommerce--search-suggest-target="input"
623                   data-action="input->ecommerce--search-suggest#onInput focus->

623ecommerce--search-suggest#onFocus keydown->ecommerce--search-suggest#onKeydown"
624                   class="flex-1 min-w-0 px-3 py-2.5 text-sm touch:text-base text-gray-900 placeholder-gray-500 bg-white border-0 focus:outline-none focus:ring-0">
625            <button type="button" data-ecommerce--search-suggest-target="clear" data-action="ecommerce--search-suggest#clear" class="hidden px-2 text-gray-400 hover:text-gray-700" aria-label="Clear">
626              <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
627            </button>
628            <button type="submit" class="flex items-center justify-center px-4 bg-gold-500 hover:bg-gold-600 text-white transition-colors" aria-label="Search">
629              <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" /></svg>
630            </button>
631          </div>
632          <div data-ecommerce--search-suggest-target="panel" class="hidden absolute left-0 right-0 top-full mt-1 z-[70] bg-white dark:bg-gray-900 rounded-md shadow-xl ring-1 ring-black/10 dark:ring-white/10 max-h-[70vh] overflow-y-auto"></div>
633        </form>
634      </div>
635    </div>
636
637    <nav class="hidden lg:block bg-brand-500/40 dark:bg-brand-900/60 border-t border-white/10" aria-label="Main navigation">
638      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
639        <div class="flex h-10 items-center gap-x-5 text-sm font-medium text-white [&_a]:text-white [&_a:hover]:text-white">
640          <a class="inline-flex items-center gap-x-1.5 hover:text-white hover:bg-white/10 px-2 py-1 rounded transition-colors" href="/collections">
641            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" /></svg>
642            All
643</a>
644          <a class="hover:text-white hover:bg-white/10 px-2 py-1 rounded transition-colors whitespace-nowrap" href="/blogs/news">News</a>
645
646          <div class="relative" data-controller="dropdown">
647            <button type="button" data-action="dropdown#toggle click@window->dropdown#hide" class="inline-flex items-center gap-x-1 hover:text-white transition-colors">
648              Shop
649              <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" /></svg>
650            </button>
651            <div data-dropdown-target="menu" class="hidden absolute left-0 z-[60] mt-2 w-48 origin-top-left rounded-lg bg-white dark:bg-gray-800 py-2 shadow-xl ring-1 ring-black/10 dark:ring-white/10 [&_a]:!text-gray-700 dark:[&_a]:!text-gray-300 [&_a:hover]:!text-gray-900 dark:[&_a:hover]:!text-white">
652              <a class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white" href="/collections">All Products</a>
653              <a class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white" href="/products?sort=newest">New Products</a>
654              <a class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white" href="/collections/special-deals">Deals</a>
655              <div class="border-t border-gray-100 dark:border-gray-700 my-1"></div>
656              <a class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white" href="/platforms">Platforms</a>
657              <a class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white" href="/brands">Brands</a>
658              <a class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white" href="/collections">Collections</a>
659              <div class="border-t border-gray-100 dark:border-gray-700 my-1"></div>
660              <a class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white" href="/projects">Projects</a>
661            </div>
662          </div>
663
664          <div class="relative" data-controller="dropdown">
665            <button type="button" data-action="dropdown#toggle click@window->dropdown#hide" class="inline-flex items-center gap-x-1 hover:text-white transition-colors">
666              Resources
667              <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" /></svg>
668            </button>
669            <div data-dropdown-target="menu" class="hidden absolute left-0 z-[60] mt-2 w-48 origin-top-left rounded-lg bg-white dark:bg-gray-800 py-2 shadow-xl ring-1 ring-black/10 dark:ring-white/10 [&_a]:!text-gray-700 dark:[&_a]:!text-gray-300 [&_a:hover]:!text-gray-900 dark:[&_a:hover]:!text-white">
670              <a class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white" href="/guides">Buying Guides</a>
671              <a class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white" href="/calculators">Calculators</a>
672              <a class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white" href="/projects">Projects</a>
673              <a class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white" href="/open-source">Open Source</a>
674              <div class="border-t border-gray-100 dark:border-gray-700 my-1"></div>
675              <a class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white" href="/courses">Courses</a>
676              <a class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white" href="/curriculum">Curriculum</a>
677              <div class="border-t border-gray-100 dark:border-gray-700 my-1"></div>
678              <a class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white" href="/english">English IDE</a>
679            </div>
680          </div>
681
682          <a class="hover:text-white hover:bg-white/10 px-2 py-1 rounded transition-colors whitespace-nowrap" href="/education">Education</a>
683          <a class="hover:text-white hover:bg-white/10 px-2 py-1 rounded transition-colors whitespace-nowrap" href="/community">Community</a>
684          <a class="hover:text-white hover:bg-white/10 px-2 py-1 rounded transition-colors whitespace-nowrap" href="/help">Help</a>
685          <a class="hover:text-white hover:bg-white/10 px-2 py-1 rounded transition-colors whitespace-nowrap" href="/contact">Contact</a>
686          <a class="hover:text-white hover:bg-white/10 px-2 py-1 rounded transition-colors whitespace-nowrap" href="/ai">AI</a>
687        </div>
688      </div>
689    </nav>
690
691    <div data-ecommerce--mobile-menu-target="backdrop" data-action="click->

691ecommerce--mobile-menu#closeOnBackdrop" class="fixed inset-0 z-40 bg-black/40 backdrop-blur-sm opacity-0 pointer-events-none transition-opacity duration-300 lg:hidden"></div>
692
693    <div data-ecommerce--mobile-menu-target="drawer" class="fixed inset-y-0 left-0 z-50 w-full max-w-xs bg-white dark:bg-gray-900 shadow-2xl transform -translate-x-full transition-transform duration-300 ease-in-out lg:hidden">
694      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-200 dark:border-gray-800">
695        <span class="text-lg font-bold text-gray-900 dark:text-white">Store</span>
696        <button type="button" data-action="ecommerce--mobile-menu#close" class="rounded-md p-2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" aria-label="Close menu">
697          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
698        </button>
699      </div>
700      <nav class="px-5 pt-6 pb-32 space-y-1 bg-white dark:bg-gray-900 overflow-y-auto max-h-[calc(100vh-65px)] overscroll-contain" aria-label="Mobile navigation">
701        <p class="px-3 pt-1 pb-2 text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">Shop</p>
702        <a class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-base font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" href="/collections">
703          <svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z" /></svg>
704          All Products
705</a>        <a class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-base font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" href="/products?sort=newest">
706          <svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
707          New Products
708</a>        <a class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-base font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" href="/collections/special-deals">
709          <svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6Z" /></svg>
710          Deals
711</a>        <a class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-base font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" href="/platforms">
712          <svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5M4.5 15.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 0 0 2.25-2.25V6.75a2.25 2.25 0 0 0-2.25-2.25H6.75A2.25 2.25 0 0 0 4.5 6.75v10.5a2.25 2.25 0 0 0 2.25 2.25Z" /></svg>
713          Platforms
714</a>        <a class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-base font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" href="/brands">
715          <svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6Z" /></svg>
716          Brands
717</a>        <a class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-base font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" href="/collections">
718          <svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 6.878V6a2.25 2.25 0 0 1 2.25-2.25h7.5A2.25 2.25 0 0 1 18 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 0 0 4.5 9v.878m13.5-3A2.25 2.25 0 0 1 19.5 9v.878m-13.5-3h13.5m-13.5 0A2.25 2.25 0 0 0 3 9.878V18a2.25 2.25 0 0 0 2.25 2.25h13.5A2.25 2.25 0 0 0 21 18V9.878a2.25 2.25 0 0 0-1.5-2.878" /></svg>
719          Collections
720</a>        <a class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-base font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" href="/projects">
721          <svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17 17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437 1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008Z" /></svg>
722          Projects
723</a>        <div class="border-t border-gray-200 dark:border-gray-800 my-4"></div>
724        <a class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-base font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" href="/blogs/news">
725          <svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 0 1-2.25 2.25M16.5 7.5V18a2.25 2.25 0 0 0 2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 0 0 2.25 2.25h13.5M6 7.5h3v3H6V7.5Z" /></svg>
726          News
727</a>        <a class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-base font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" href="/education">
728          <svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" /></svg>
729          Education
730</a>        <div class="border-t border-gray-200 dark:border-gray-800 my-4"></div>
731        <p class="px-3 pt-1 pb-2 text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">Resources</p>
732        <a class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-base font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" href="/guides">
733          <svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" /></svg>
734          Buying Guides
735</a>        <a class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-base font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" href="/calculators">
736          <svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 15.75V18m-7.5-6.75h.008v.008H8.25v-.008Zm0 2.25h.008v.008H8.25V13.5Zm0 2.25h.008v.008H8.25v-.008Zm0 2.25h.008v.008H8.25V18Zm2.498-6.75h.007v.008h-.007v-.008Zm0 2.25h.007v.008h-.007V13.5Zm0 2.25h.007v.008h-.007v-.008Zm0 2.25h.007v.008h-.007V18Zm2.504-6.75h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V13.5Zm0 2.25h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V18Zm2.498-6.75h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V13.5ZM8.25 6h7.5v2.25h-7.5V6ZM12 2.25c-1.892 0-3.758.11-5.593.322C5.307 2.7 4.5 3.65 4.5 4.757V19.5a2.25 2.25 0 0 0 2.25 2.25h10.5a2.25 2.25 0 0 0 2.25-2.25V4.757c0-1.108-.806-2.057-1.907-2.185A48.507 48.507 0 0 0 12 2.25Z" /></svg>
737          Calculators
738</a>        <a class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-base font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" href="/open-source">

739          <svg class="h-5 w-5 text-gray-400" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path></svg>
740          Open Source
741</a>        <a class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-base font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" href="/courses">
742          <svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" /></svg>
743          Courses
744</a>        <a class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-base font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" href="/curriculum">
745          <svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" /></svg>
746          Curriculum
747</a>        <a class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-base font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" href="/english">
748          <svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5" /></svg>
749          English IDE
750</a>        <div class="border-t border-gray-200 dark:border-gray-800 my-4"></div>
751        <a class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-base font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" href="/community">
752          <svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" /></svg>
753          Community
754</a>        <a class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-base font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" href="/help">
755          <svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" /></svg>
756          Help
757</a>        <a class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-base font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" href="/contact">
758          <svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.625 9.75a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 0 1 .778-.332 48.294 48.294 0 0 0 5.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.

758123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z" /></svg>
759          Contact
760</a>        <a class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-base font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" href="/ai">
761          <svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 0 0-2.455 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z" /></svg>
762          AI
763</a>        <div class="border-t border-gray-200 dark:border-gray-800 my-4"></div>
764        <a class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-base font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" href="/cart">
765          <svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" /></svg>
766          Cart
767</a>        <div class="border-t border-gray-200 dark:border-gray-800 my-4"></div>
768          <a class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-base font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" href="/account/login">
769            <svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
770            Sign In
771</a>      </nav>
772    </div>
773  </header>
774
775
776
777  <main class="flex-1 bg-white dark:bg-gray-950">
778      
779
780<section class="relative overflow-hidden bg-brand-700">
781  <div class="absolute inset-0">
782    <img class="h-full w-full object-cover object-center" alt="" draggable="false" fetchpriority="high" style="background-image: url(&#39;/assets/mads-front-page-c134fc4b.webp&#39;); background-size: cover; background-position: center;" src="/assets/mads-front-page-c134fc4b.webp" />
783    <div class="absolute inset-0 bg-gradient-to-r from-brand-900/80 via-brand-800/60 to-transparent"></div>
784  </div>
785
786  <div class="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-20 sm:py-28 lg:py-36">
787    <div class="max-w-2xl">
788      <p class="inline-flex items-center gap-2 rounded-full bg-white/10 border border-white/20 px-4 py-1.5 text-sm font-medium text-white/90 mb-6 backdrop-blur-sm">
789        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" /></svg>
790        Australian Owned &amp; Operated
791      </p>
792      <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-white leading-[1.1] drop-shadow-lg">
793        Maker &amp;

793 STEM Electronics
794        <span class="text-transparent bg-clip-text bg-gradient-to-r from-gold-500 to-gold-400">by Little Bird</span>
795      </h1>
796      <p class="mt-6 text-lg sm:text-xl text-white/90 leading-relaxed max-w-xl drop-shadow-md">
797        Australia's home of Maker and STEAM electronics hardware. Components, kits and tools for schools, universities, hobbyists, and professionals.
798      </p>
799      <div class="mt-8 flex flex-col sm:flex-row items-start gap-3">
800        <a class="inline-flex items-center gap-2 rounded-xl bg-gold-500 px-6 py-3.5 text-base font-semibold text-white shadow-lg shadow-gold-500/25 hover:bg-gold-400 hover:shadow-gold-500/40 active:scale-[0.98] transition-all" href="/collections">
801          Shop All Products
802          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" /></svg>
803</a>        <a class="inline-flex items-center gap-2 rounded-xl border-2 border-white/20 bg-white/5 backdrop-blur-sm px-6 py-3.5 text-base font-semibold text-white hover:bg-white/10 hover:border-white/30 transition-all" href="/education">
804          Education Orders
805</a>      </div>
806    </div>
807  </div>
808</section>
809
810<section class="bg-white dark:bg-gray-950 border-b border-gray-200 dark:border-gray-800">
811  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-8 sm:py-10">
812    <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
813      <div class="flex flex-col sm:flex-row items-center sm:items-start gap-3 text-center sm:text-left">
814        <div class="flex-shrink-0 flex items-center justify-center h-11 w-11 rounded-xl bg-brand-50 dark:bg-brand-950/50">
815          <svg class="h-6 w-6 text-brand-600 dark:text-brand-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 18.75a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 0 1-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 0 0-3.213-9.193 2.056 2.056 0 0 0-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 0 0-10.026 0 1.106 1.106 0 0 0-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12" /></svg>
816        </div>
817        <div>
818          <p class="text-sm font-semibold text-gray-900 dark:text-white">Fast Shipping</p>
819          <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Australia Post Express & Standard</p>
820        </div>
821      </div>
822
823      <div class="flex flex-col sm:flex-row items-center sm:items-start gap-3 text-center sm:text-left">
824        <div class="flex-shrink-0 flex items-center justify-center h-11 w-11 rounded-xl bg-brand-50 dark:bg-brand-950/50">
825          <svg class="h-6 w-6 text-brand-600 dark:text-brand-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z" /></svg>
826        </div>
827        <div>
828          <p class="text-sm font-semibold text-gray-900 dark:text-white">Australian Owned</p>
829          <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Based in Sydney, serving all of AU</p>
830        </div>
831      </div>
832
833      <div class="flex flex-col sm:flex-row items-center sm:items-start gap-3 text-center sm:text-left">
834        <div class="flex-shrink-0 flex items-center justify-center h-11 w-11 rounded-xl bg-brand-50 dark:bg-brand-950/50">
835          <svg class="h-6 w-6 text-brand-600 dark:text-brand-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" /></svg>
836        </div>
837        <div>
838          <p class="text-sm font-semibold text-gray-900 dark:text-white">Phone Support</p>
839          <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Call 1300 240 817 Mon-Fri</p>
840        </div>
841      </div>
842
843      <div class="flex flex-col sm:flex-row items-center sm:items-start gap-3 text-center sm:text-left">
844        <div class="flex-shrink-0 flex items-center justify-center h-11 w-11 rounded-xl bg-brand-50 dark:bg-brand-950/50">
845          <svg class="h-6 w-6 text-brand-600 dark:text-brand-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" /></svg>
846        </div>
847        <div>
848          <p class="text-sm font-semibold text-gray-900 dark:text-white">Education Pricing</p>
849          <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Special rates for schools & unis</p>
850        </div>
851      </div>
852    </div>
853  </div>
854</section>
855
856  <section class="bg-white dark:bg-gray-950 py-14 sm:py-16">
857    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
858      
859  <div>
860    <div class="mb-6 sm:mb-8">
861      <h2 class="text-2xl sm:text-3xl font-bold tracking-tight text-gray-900 dark:text-white">Most popular</h2>
862        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">What Little Bird customers are buying this month</p>
863    </div>
864
865    <ol aria-label="Most popular"
866        class="list-none flex gap-4 overflow-x-auto snap-x snap-mandatory pb-3 -mx-4 px-4 scroll-px-4
867               sm:gap-5
868               lg:grid lg:grid-cols-5 lg:gap-6 lg:overflow-visible lg:pb-0 lg:mx-0 lg:px-0 lg:scroll-px-0">
869        <li class="snap-start shrink-0 w-40 sm:w-48 lg:w-auto">
870          <a class="group relative flex h-full flex-col" data-turbo-frame="_top" href="/products/heatsink-kit-for-raspberry-pi-4b-purple">
871            <div class="relative aspect-square overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800 ring-1 ring-gray-200/50 dark:ring-gray-700/50">
872                <img class="h-full w-full object-cover transition-transform duration-500 ease-out group-hover:scale-105" alt="Heatsink Kit for Raspberry Pi 4B Purple" loading="lazy" width="400" height="400" src="/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkCusxJIghwdXIGOwBUSSIMYmxvYl9pZAY7AEY=--c71e12c3fef3e3b493edd2c91e6fa47cb090af11/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQKQAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--7ac1464f840979a0fbadf7166c435cc8fec8cbc3/image_4362cfdc-86be-4729-9410-1

8725cead1c3ebd.jpg" />
873
874                <span class="absolute top-2.5 left-2.5 inline-flex h-7 min-w-7 items-center justify-center rounded-full px-2 text-xs font-bold tabular-nums shadow-sm bg-[#FFD814] text-gray-900"
875                      aria-hidden="true">
876                  1
877                </span>
878
879                <div class="absolute top-2.5 right-2.5">
880                  <span class="inline-flex items-center rounded-full bg-red-500 px-2 py-0.5 text-[11px] font-bold text-white shadow-sm">Sale</span>
881                </div>
882            </div>
883
884            <div class="mt-3 flex flex-col gap-1">
885                <p class="text-[11px] font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider truncate">Little Bird</p>
886              <h3 class="text-sm font-medium text-gray-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors line-clamp-2 leading-snug">
887                <span class="sr-only">Number 1 best seller: </span>Heatsink Kit for Raspberry Pi 4B Purple
888              </h3>
889              <div class="flex items-center gap-2 mt-0.5">
890                  <span class="text-sm font-bold text-red-600 dark:text-red-400">$0.35</span>
891                  <span class="text-xs text-gray-400 line-through">$2.95</span>
892              </div>
893            </div>
894</a>        </li>
895        <li class="snap-start shrink-0 w-40 sm:w-48 lg:w-auto">
896          <a class="group relative flex h-full flex-col" data-turbo-frame="_top" href="/products/elecfreaks-high-speed-building-blocks-motor">
897            <div class="relative aspect-square overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800 ring-1 ring-gray-200/50 dark:ring-gray-700/50">
898                <img class="h-full w-full object-cover transition-transform duration-500 ease-out group-hover:scale-105" alt="ELECFREAKS High-Speed Building Blocks Motor" loading="lazy" width="400" height="400" src="/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkCFxdJIghwdXIGOwBUSSIMYmxvYl9pZAY7AEY=--a2f46f3866f05c886e07e2ebf732492caa1a0785/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQKQAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--7ac1464f840979a0fbadf7166c435cc8fec8cbc3/image_81c1cfbc-1876-4c86-9ade-b7a0686c0ad3.webp" />
899
900                <span class="absolute top-2.5 left-2.5 inline-flex h-7 min-w-7 items-center justify-center rounded-full px-2 text-xs font-bold tabular-nums shadow-sm bg-[#FFD814] text-gray-900"
901                      aria-hidden="true">
902                  2
903                </span>
904
905            </div>
906
907            <div class="mt-3 flex flex-col gap-1">
908                <p class="text-[11px] font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider truncate">ElecFreaks</p>
909              <h3 class="text-sm font-medium text-gray-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors line-clamp-2 leading-snug">
910                <span class="sr-only">Number 2 best seller: </span>ELECFREAKS High-Speed Building Blocks Motor
911              </h3>
912              <div class="flex items-center gap-2 mt-0.5">
913                  <span class="text-sm font-semibold text-gray-900 dark:text-white">$11.30</span>
914              </div>
915            </div>
916</a>        </li>
917        <li class="snap-start shrink-0 w-40 sm:w-48 lg:w-auto">
918          <a class="group relative flex h-full flex-col" data-turbo-frame="_top" href="/products/micro-bit-battery-holder-2xaaa-jst-ph">
919            <div class="relative aspect-square overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800 ring-1 ring-gray-200/50 dark:ring-gray-700/50">
920                <img class="h-full w-full object-cover transition-transform duration-500 ease-out group-hover:scale-105" alt="micro:bit Battery Holder - 2xAAA (JST-PH)" loading="lazy" width="400" height="400" src="/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkCI%2F9JIghwdXIGOwBUSSIMYmxvYl9pZAY7AEY=--aab41d8b3ee49894da4cc5de7f83740828ad7b4d/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQKQAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--7ac1464f840979a0fbadf7166c435cc8fec8cbc3/1

9205101-micro-bit_Battery_Holder_-_2xAAA__JST-PH_-01.jpg" />
921
922                <span class="absolute top-2.5 left-2.5 inline-flex h-7 min-w-7 items-center justify-center rounded-full px-2 text-xs font-bold tabular-nums shadow-sm bg-[#FFD814] text-gray-900"
923                      aria-hidden="true">
924                  3
925                </span>
926
927                <div class="absolute top-2.5 right-2.5">
928                  <span class="inline-flex items-center rounded-full bg-red-500 px-2 py-0.5 text-[11px] font-bold text-white shadow-sm">Sale</span>
929                </div>
930            </div>
931
932            <div class="mt-3 flex flex-col gap-1">
933                <p class="text-[11px] font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider truncate">SparkFun</p>
934              <h3 class="text-sm font-medium text-gray-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors line-clamp-2 leading-snug">
935                <span class="sr-only">Number 3 best seller: </span>micro:bit Battery Holder - 2xAAA (JST-PH)
936              </h3>
937              <div class="flex items-center gap-2 mt-0.5">
938                  <span class="text-sm font-bold text-red-600 dark:text-red-400">$2.00</span>
939                  <span class="text-xs text-gray-400 line-through">$4.20</span>
940              </div>
941            </div>
942</a>        </li>
943        <li class="snap-start shrink-0 w-40 sm:w-48 lg:w-auto">
944          <a class="group relative flex h-full flex-col" data-turbo-frame="_top" href="/products/barrel-jack-adapter-usb-to-5-5mm">
945            <div class="relative aspect-square overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800 ring-1 ring-gray-200/50 dark:ring-gray-700/50">
946                <img class="h-full w-full object-cover transition-transform duration-500 ease-out group-hover:scale-105" alt="Barrel Jack Adapter - USB to 5.5mm" loading="lazy" width="400" height="400" src="/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkDchEBSSIIcHVyBjsAVEkiDGJsb2JfaWQGOwBG--0eb299b3015df5561daf37f0690bbb503ce8c306/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQKQAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--7ac1464f840979a0fbadf7166c435cc8fec8cbc3/08639-01.jpg" />
947
948                <span class="absolute top-2.5 left-2.5 inline-flex h-7 min-w-7 items-center justify-center rounded-full px-2 text-xs font-bold tabular-nums shadow-sm bg-white/90 text-gray-700 ring-1 ring-gray-200 dark:bg-gray-900/85 dark:text-gray-200 dark:ring-gray-700"
949                      aria-hidden="true">
950                  4
951                </span>
952
953            </div>
954
955            <div class="mt-3 flex flex-col gap-1">
956                <p class="text-[11px] font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider truncate">SparkFun</p>
957              <h3 class="text-sm font-medium text-gray-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors line-clamp-2 leading-snug">
958                <span class="sr-only">Number 4 best seller: </span>Barrel Jack Adapter - USB to 5.5mm
959              </h3>
960              <div class="flex items-center gap-2 mt-0.5">
961                  <span class="text-sm font-semibold text-gray-900 dark:text-white">$9.00</span>
962              </div>
963            </div>
964</a>        </li>
965        <li class="snap-start shrink-0 w-40 sm:w-48 lg:w-auto">
966          <a class="group relative flex h-full flex-col" data-turbo-frame="_top" href="/products/0-1-2-54mm-crimp-connector-housing-1x3-pin-25-pack">
967            <div class="relative aspect-square overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800 ring-1 ring-gray-200/50 dark:ring-gray-700/50">
968                <img class="h-full w-full object-cover transition-transform duration-500 ease-out group-hover:scale-105" alt="0.1&quot; (2.54mm) Crimp Connector Housing: 1x3-Pin 25-Pack" loading="lazy" width="400" height="400" src="/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkCwLFJIghwdXIGOwBUSSIMYmxvYl9pZAY7AEY=--5fb9a3cbd93b90ff8902ef7e8c8201601663fb30/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQKQAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--7ac1464f840979a0fbadf7166c435cc8fec8cbc3/image_3c0dfb9f-34d4-41a0-a212-d33ca6a5a60e.jpg" />
969

970                <span class="absolute top-2.5 left-2.5 inline-flex h-7 min-w-7 items-center justify-center rounded-full px-2 text-xs font-bold tabular-nums shadow-sm bg-white/90 text-gray-700 ring-1 ring-gray-200 dark:bg-gray-900/85 dark:text-gray-200 dark:ring-gray-700"
971                      aria-hidden="true">
972                  5
973                </span>
974
975                <div class="absolute top-2.5 right-2.5">
976                  <span class="inline-flex items-center rounded-full bg-red-500 px-2 py-0.5 text-[11px] font-bold text-white shadow-sm">Sale</span>
977                </div>
978            </div>
979
980            <div class="mt-3 flex flex-col gap-1">
981                <p class="text-[11px] font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider truncate">Pololu</p>
982              <h3 class="text-sm font-medium text-gray-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors line-clamp-2 leading-snug">
983                <span class="sr-only">Number 5 best seller: </span>0.1&quot; (2.54mm) Crimp Connector Housing: 1x3-Pin 25-Pack
984              </h3>
985              <div class="flex items-center gap-2 mt-0.5">
986                  <span class="text-sm font-bold text-red-600 dark:text-red-400">$0.35</span>
987                  <span class="text-xs text-gray-400 line-through">$4.00</span>
988              </div>
989            </div>
990</a>        </li>
991        <li class="snap-start shrink-0 w-40 sm:w-48 lg:w-auto">
992          <a class="group relative flex h-full flex-col" data-turbo-frame="_top" href="/products/schottky-diode">
993            <div class="relative aspect-square overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800 ring-1 ring-gray-200/50 dark:ring-gray-700/50">
994                <img class="h-full w-full object-cover transition-transform duration-500 ease-out group-hover:scale-105" alt="Schottky Diode" loading="lazy" width="400" height="400" src="/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkDQggBSSIIcHVyBjsAVEkiDGJsb2JfaWQGOwBG--6cef32b89041adfcf7aa691245570cd56df9b342/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQKQAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--7ac1464f840979a0fbadf7166c435cc8fec8cbc3/10926-01b.jpg" />
995
996                <span class="absolute top-2.5 left-2.5 inline-flex h-7 min-w-7 items-center justify-center rounded-full px-2 text-xs font-bold tabular-nums shadow-sm bg-white/90 text-gray-700 ring-1 ring-gray-200 dark:bg-gray-900/85 dark:text-gray-200 dark:ring-gray-700"
997                      aria-hidden="true">
998                  6
999                </span>
1000
1001            </div>
1002
1003            <div class="mt-3 flex flex-col gap-1">
1004                <p class="text-[11px] font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider truncate">SparkFun</p>
1005              <h3 class="text-sm font-medium text-gray-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors line-clamp-2 leading-snug">
1006                <span class="sr-only">Number 6 best seller: </span>Schottky Diode
1007              </h3>
1008              <div class="flex items-center gap-2 mt-0.5">
1009                  <span class="text-sm font-semibold text-gray-900 dark:text-white">$0.60</span>
1010              </div>
1011            </div>
1012</a>        </li>
1013        <li class="snap-start shrink-0 w-40 sm:w-48 lg:w-auto">
1014          <a class="group relative flex h-full flex-col" data-turbo-frame="_top" href="/products/esp32-c3-mini-development-board-based-on-esp32-c3fn4-single-core-processor-160mhz-running-frequency-2-4ghz-wi-fi-bluetooth-5">
1015            <div class="relative aspect-square overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800 ring-1 ring-gray-200/50 dark:ring-gray-700/50">
1016                <img class="h-full w-full object-cover transition-transform duration-500 ease-out group-hover:scale-105" alt="ESP32-C3 Mini Development Board, Based on ESP32-C3FN4 Single-core Processor, 160MHz Running Frequency, 2.4GHz Wi-Fi &amp; Bluetooth 5" loading="lazy" width="400" height="400" src="/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkC5xZJIghwdXIGOwBUSSIMYmxvYl9pZAY7AEY=--33efe8622ac56625a28d4f31d4c36d8f123bb866/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQKQAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--7ac1464f840979a0fbadf7166c435cc8fec8cbc3/image_b374d9a0-6436-4a17-ba17-ce74af95ed8d.jpg" />
1017

1018                <span class="absolute top-2.5 left-2.5 inline-flex h-7 min-w-7 items-center justify-center rounded-full px-2 text-xs font-bold tabular-nums shadow-sm bg-white/90 text-gray-700 ring-1 ring-gray-200 dark:bg-gray-900/85 dark:text-gray-200 dark:ring-gray-700"
1019                      aria-hidden="true">
1020                  7
1021                </span>
1022
1023            </div>
1024
1025            <div class="mt-3 flex flex-col gap-1">
1026                <p class="text-[11px] font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider truncate">Waveshare</p>
1027              <h3 class="text-sm font-medium text-gray-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors line-clamp-2 leading-snug">
1028                <span class="sr-only">Number 7 best seller: </span>ESP32-C3 Mini Development Board, Based on ESP32-C3FN4 Single-core Processor, 160MHz Running Frequency, 2.4GHz Wi-Fi &amp; Bluetooth 5
1029              </h3>
1030              <div class="flex items-center gap-2 mt-0.5">
1031                  <span class="text-sm font-semibold text-gray-900 dark:text-white">$6.20</span>
1032              </div>
1033            </div>
1034</a>        </li>
1035        <li class="snap-start shrink-0 w-40 sm:w-48 lg:w-auto">
1036          <a class="group relative flex h-full flex-col" data-turbo-frame="_top" href="/products/little-bird-lorikeet-ws2812b-rainbow-board">
1037            <div class="relative aspect-square overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800 ring-1 ring-gray-200/50 dark:ring-gray-700/50">
1038                <img class="h-full w-full object-cover transition-transform duration-500 ease-out group-hover:scale-105" alt="Little Bird Lorikeet WS2812B Rainbow Board" loading="lazy" width="400" height="400" src="/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkC58xJIghwdXIGOwBUSSIMYmxvYl9pZAY7AEY=--fe7d5b2025e43db6298207d08b3cfe771be89424/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQKQAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--7ac1464f840979a0fbadf7166c435cc8fec8cbc3/image_8627575c-58f6-4f64-ba26-85e080945072.png" />
1039
1040                <span class="absolute top-2.5 left-2.5 inline-flex h-7 min-w-7 items-center justify-center rounded-full px-2 text-xs font-bold tabular-nums shadow-sm bg-white/90 text-gray-700 ring-1 ring-gray-200 dark:bg-gray-900/85 dark:text-gray-200 dark:ring-gray-700"
1041                      aria-hidden="true">
1042                  8
1043                </span>
1044
1045                <div class="absolute top-2.5 right-2.5">
1046                  <span class="inline-flex items-center rounded-full bg-red-500 px-2 py-0.5 text-[11px] font-bold text-white shadow-sm">Sale</span>
1047                </div>
1048            </div>
1049
1050            <div class="mt-3 flex flex-col gap-1">
1051                <p class="text-[11px] font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider truncate">Little Bird</p>
1052              <h3 class="text-sm font-medium text-gray-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors line-clamp-2 leading-snug">
1053                <span class="sr-only">Number 8 best seller: </span>Little Bird Lorikeet WS2812B Rainbow Board
1054              </h3>
1055              <div class="flex items-center gap-2 mt-0.5">
1056                  <span class="text-sm font-bold text-red-600 dark:text-red-400">$2.00</span>
1057                  <span class="text-xs text-gray-400 line-through">$6.25</span>
1058              </div>
1059            </div>
1060</a>        </li>
1061        <li class="snap-start shrink-0 w-40 sm:w-48 lg:w-auto">
1062          <a class="group relative flex h-full flex-col" data-turbo-frame="_top" href="/products/vl53l0x-time-of-flight-tof-laser-ranging-sensor-gy-530">
1063            <div class="relative aspect-square overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800 ring-1 ring-gray-200/50 dark:ring-gray-700/50">
1064                <img class="h-full w-full object-cover transition-transform duration-500 ease-out group-hover:scale-105" alt="VL53L0X Time-of-Flight (ToF) Laser Ranging Sensor - GY-530" loading="lazy" width="400" height="400" src="/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkCbQ9JIghwdXIGOwBUSSIMYmxvYl9pZAY7AEY=--29914781fa692b0bf5bb05c2a6984a05867e1fcb/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQKQAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--7ac1464f840979a0fbadf7166c435cc8fec8cbc3/image_e5bc90d4-d4fe-42d7-aedc-b767b02353f8.png" />
1065

1066                <span class="absolute top-2.5 left-2.5 inline-flex h-7 min-w-7 items-center justify-center rounded-full px-2 text-xs font-bold tabular-nums shadow-sm bg-white/90 text-gray-700 ring-1 ring-gray-200 dark:bg-gray-900/85 dark:text-gray-200 dark:ring-gray-700"
1067                      aria-hidden="true">
1068                  9
1069                </span>
1070
1071            </div>
1072
1073            <div class="mt-3 flex flex-col gap-1">
1074                <p class="text-[11px] font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider truncate">Little Bird</p>
1075              <h3 class="text-sm font-medium text-gray-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors line-clamp-2 leading-snug">
1076                <span class="sr-only">Number 9 best seller: </span>VL53L0X Time-of-Flight (ToF) Laser Ranging Sensor - GY-530
1077              </h3>
1078              <div class="flex items-center gap-2 mt-0.5">
1079                  <span class="text-sm font-semibold text-gray-900 dark:text-white">$3.30</span>
1080              </div>
1081            </div>
1082</a>        </li>
1083        <li class="snap-start shrink-0 w-40 sm:w-48 lg:w-auto">
1084          <a class="group relative flex h-full flex-col" data-turbo-frame="_top" href="/products/2aa-battery-holder-with-cover-and-switch-and-large-size-alligator">
1085            <div class="relative aspect-square overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800 ring-1 ring-gray-200/50 dark:ring-gray-700/50">
1086                <img class="h-full w-full object-cover transition-transform duration-500 ease-out group-hover:scale-105" alt="2AA Battery Holder with Cover and Switch and Large size Alligator" loading="lazy" width="400" height="400" src="/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkCYhRJIghwdXIGOwBUSSIMYmxvYl9pZAY7AEY=--7298c19576fc78ff30f81cfed68ebdbe1e14af43/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQKQAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--7ac1464f840979a0fbadf7166c435cc8fec8cbc3/image_748cf1cd-0344-459b-8f64-0644228350e0.jpg" />
1087
1088                <span class="absolute top-2.5 left-2.5 inline-flex h-7 min-w-7 items-center justify-center rounded-full px-2 text-xs font-bold tabular-nums shadow-sm bg-white/90 text-gray-700 ring-1 ring-gray-200 dark:bg-gray-900/85 dark:text-gray-200 dark:ring-gray-700"
1089                      aria-hidden="true">
1090                  10
1091                </span>
1092
1093            </div>
1094
1095            <div class="mt-3 flex flex-col gap-1">
1096                <p class="text-[11px] font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider truncate">Little Bird</p>
1097              <h3 class="text-sm font-medium text-gray-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors line-clamp-2 leading-snug">
1098                <span class="sr-only">Number 10 best seller: </span>2AA Battery Holder with Cover and Switch and Large size Alligator
1099              </h3>
1100              <div class="flex items-center gap-2 mt-0.5">
1101                  <span class="text-sm font-semibold text-gray-900 dark:text-white">$1.70</span>
1102              </div>
1103            </div>
1104</a>        </li>
1105    </ol>
1106  </div>
1107
1108    </div>
1109  </section>
1110
1111  <section class="bg-white dark:bg-gray-950 py-16 sm:py-20">
1112    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
1113      <div class="flex items-end justify-between mb-8 sm:mb-10">
1114        <div>
1115          <h2 class="text-2xl sm:text-3xl font-bold tracking-tight text-gray-900 dark:text-white">What's New!</h2>
1116          <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">The latest arrivals in our store</p>
1117        </div>
1118        <a class="hidden sm:inline-flex items-center gap-1.5 text-sm font-semibold text-brand-700 dark:text-brand-400 hover:text-brand-600 dark:hover:text-brand-300 transition-colors" href="/products?sort=newest">
1119          View all
1120          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" /></svg>
1121</a>      </div>
1122
1123      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-6">
1124          <a class="group relative flex flex-col" href="/products/digital-thermal-thermistor-temperature-sensor-module">
1125            <div class="relative aspect-square overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800 ring-1 ring-gray-200/50 dark:ring-gray-700/50">
1126                <div class="h-full w-full bg-cover bg-center transition-transform duration-500 ease-out group-hover:scale-105"
1127                  style="background-image: url('/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkD%2FFkFSSIIcHVyBjsAVEkiDGJsb2JfaWQGOwBG--72e71ef46da930c31d29a9d65365df346552974c/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQKQAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--7ac1464f840979a0fbadf7166c435cc8fec8cbc3/image.png')"
1128                  role="img"
1129                  aria-label="Digital Thermal Thermistor Temperature Sensor Module">
1130                </div>
1131
1132
1133              <div class="hidden sm:flex absolute inset-x-3 bottom-3 opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300">

1134                <span class="flex-1 inline-flex items-center justify-center rounded-lg bg-white/90 dark:bg-gray-900/90 backdrop-blur-sm px-4 py-2.5 text-sm font-semibold text-gray-900 dark:text-white shadow-lg ring-1 ring-gray-200/50 dark:ring-gray-700/50 hover:bg-white dark:hover:bg-gray-900 transition-colors">
1135                  View product
1136                </span>
1137              </div>
1138            </div>
1139
1140            <div class="mt-3 flex flex-col gap-1">
1141                <p class="text-[11px] font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider">Little Bird</p>
1142              <h3 class="text-sm font-medium text-gray-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors line-clamp-2 leading-snug">Digital Thermal Thermistor Temperature Sensor Module</h3>
1143              <div class="flex items-center gap-2 mt-0.5">
1144                  <span class="text-sm font-semibold text-gray-900 dark:text-white">$2.35</span>
1145              </div>
1146            </div>
1147</a>          <a class="group relative flex flex-col" href="/products/solder-flux-pen-12ml">
1148            <div class="relative aspect-square overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800 ring-1 ring-gray-200/50 dark:ring-gray-700/50">
1149                <div class="h-full w-full bg-cover bg-center transition-transform duration-500 ease-out group-hover:scale-105"
1150                  style="background-image: url('/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkD+VkFSSIIcHVyBjsAVEkiDGJsb2JfaWQGOwBG--6c72913b113e57484e95e205520102c98033ff3f/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQKQAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--7ac1464f840979a0fbadf7166c435cc8fec8cbc3/image.jpg')"
1151                  role="img"
1152                  aria-label="Solder Flux Pen 12ml">
1153                </div>
1154
1155
1156              <div class="hidden sm:flex absolute inset-x-3 bottom-3 opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300">
1157                <span class="flex-1 inline-flex items-center justify-center rounded-lg bg-white/90 dark:bg-gray-900/90 backdrop-blur-sm px-4 py-2.5 text-sm font-semibold text-gray-900 dark:text-white shadow-lg ring-1 ring-gray-200/50 dark:ring-gray-700/50 hover:bg-white dark:hover:bg-gray-900 transition-colors">
1158                  View product
1159                </span>
1160              </div>
1161            </div>
1162
1163            <div class="mt-3 flex flex-col gap-1">
1164              <h3 class="text-sm font-medium text-gray-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors line-clamp-2 leading-snug">Solder Flux Pen 12ml</h3>
1165              <div class="flex items-center gap-2 mt-0.5">
1166                  <span class="text-sm font-semibold text-gray-900 dark:text-white">$14.40</span>
1167              </div>
1168            </div>
1169</a>          <a class="group relative flex flex-col" href="/products/0-71mm-12g-lead-free-solder-tube">
1170            <div class="relative aspect-square overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800 ring-1 ring-gray-200/50 dark:ring-gray-700/50">
1171                <div class="h-full w-full bg-cover bg-center transition-transform duration-500 ease-out group-hover:scale-105"
1172                  style="background-image: url('/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkDn1kFSSIIcHVyBjsAVEkiDGJsb2JfaWQGOwBG--b702444efb4f97f4381d9d1763bfe6caa8a66f88/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQKQAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--7ac1464f840979a0fbadf7166c435cc8fec8cbc3/image.jpg')"
1173                  role="img"
1174                  aria-label="0.71mm 12g Lead Free Solder Tube">
1175                </div>
1176
1177
1178              <div class="hidden sm:flex absolute inset-x-3 bottom-3 opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300">

1179                <span class="flex-1 inline-flex items-center justify-center rounded-lg bg-white/90 dark:bg-gray-900/90 backdrop-blur-sm px-4 py-2.5 text-sm font-semibold text-gray-900 dark:text-white shadow-lg ring-1 ring-gray-200/50 dark:ring-gray-700/50 hover:bg-white dark:hover:bg-gray-900 transition-colors">
1180                  View product
1181                </span>
1182              </div>
1183            </div>
1184
1185            <div class="mt-3 flex flex-col gap-1">
1186              <h3 class="text-sm font-medium text-gray-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors line-clamp-2 leading-snug">0.71mm 12g Lead Free Solder Tube</h3>
1187              <div class="flex items-center gap-2 mt-0.5">
1188                  <span class="text-sm font-semibold text-gray-900 dark:text-white">$3.55</span>
1189              </div>
1190            </div>
1191</a>          <a class="group relative flex flex-col" href="/products/electronic-components-basic-starter-kit-1500pcs">
1192            <div class="relative aspect-square overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800 ring-1 ring-gray-200/50 dark:ring-gray-700/50">
1193                <div class="h-full w-full bg-cover bg-center transition-transform duration-500 ease-out group-hover:scale-105"
1194                  style="background-image: url('/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkDnFkFSSIIcHVyBjsAVEkiDGJsb2JfaWQGOwBG--2894f9c10605978b2ffff6e1c96eae809f5a28e3/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQKQAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--7ac1464f840979a0fbadf7166c435cc8fec8cbc3/image.png')"
1195                  role="img"
1196                  aria-label="Electronic Components Basic Starter Kit ">
1197                </div>
1198
1199
1200              <div class="hidden sm:flex absolute inset-x-3 bottom-3 opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300">
1201                <span class="flex-1 inline-flex items-center justify-center rounded-lg bg-white/90 dark:bg-gray-900/90 backdrop-blur-sm px-4 py-2.5 text-sm font-semibold text-gray-900 dark:text-white shadow-lg ring-1 ring-gray-200/50 dark:ring-gray-700/50 hover:bg-white dark:hover:bg-gray-900 transition-colors">
1202                  View product
1203                </span>
1204              </div>
1205            </div>
1206
1207            <div class="mt-3 flex flex-col gap-1">
1208                <p class="text-[11px] font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider">Little Bird</p>
1209              <h3 class="text-sm font-medium text-gray-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors line-clamp-2 leading-snug">Electronic Components Basic Starter Kit </h3>
1210              <div class="flex items-center gap-2 mt-0.5">
1211                  <span class="text-sm font-semibold text-gray-900 dark:text-white">$28.80</span>
1212              </div>
1213            </div>
1214</a>          <a class="group relative flex flex-col" href="/products/256gb-ssd">
1215            <div class="relative aspect-square overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800 ring-1 ring-gray-200/50 dark:ring-gray-700/50">
1216                <div class="h-full w-full bg-cover bg-center transition-transform duration-500 ease-out group-hover:scale-105"
1217                  style="background-image: url('/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkDclkFSSIIcHVyBjsAVEkiDGJsb2JfaWQGOwBG--ae1ea237763ed25606354684a7de3a3fb6ad1eea/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQKQAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--7ac1464f840979a0fbadf7166c435cc8fec8cbc3/image.JPG')"
1218                  role="img"
1219                  aria-label="256GB SSD">
1220                </div>
1221
1222
1223              <div class="hidden sm:flex absolute inset-x-3 bottom-3 opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300">

1224                <span class="flex-1 inline-flex items-center justify-center rounded-lg bg-white/90 dark:bg-gray-900/90 backdrop-blur-sm px-4 py-2.5 text-sm font-semibold text-gray-900 dark:text-white shadow-lg ring-1 ring-gray-200/50 dark:ring-gray-700/50 hover:bg-white dark:hover:bg-gray-900 transition-colors">
1225                  View product
1226                </span>
1227              </div>
1228            </div>
1229
1230            <div class="mt-3 flex flex-col gap-1">
1231                <p class="text-[11px] font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider">Little Bird</p>
1232              <h3 class="text-sm font-medium text-gray-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors line-clamp-2 leading-snug">256GB SSD</h3>
1233              <div class="flex items-center gap-2 mt-0.5">
1234                  <span class="text-sm font-semibold text-gray-900 dark:text-white">$139.00</span>
1235              </div>
1236            </div>
1237</a>          <a class="group relative flex flex-col" href="/products/100-1-micro-metal-gearmotor-hp-6v">
1238            <div class="relative aspect-square overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800 ring-1 ring-gray-200/50 dark:ring-gray-700/50">
1239                <div class="h-full w-full bg-cover bg-center transition-transform duration-500 ease-out group-hover:scale-105"
1240                  style="background-image: url('/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkD8MYESSIIcHVyBjsAVEkiDGJsb2JfaWQGOwBG--4545cb9af0adbdcd7c1f6af3c33117053779bc72/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQKQAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--7ac1464f840979a0fbadf7166c435cc8fec8cbc3/image.jpg')"
1241                  role="img"
1242                  aria-label="100:1 Micro Metal Gearmotor HP 6V">
1243                </div>
1244
1245
1246              <div class="hidden sm:flex absolute inset-x-3 bottom-3 opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300">
1247                <span class="flex-1 inline-flex items-center justify-center rounded-lg bg-white/90 dark:bg-gray-900/90 backdrop-blur-sm px-4 py-2.5 text-sm font-semibold text-gray-900 dark:text-white shadow-lg ring-1 ring-gray-200/50 dark:ring-gray-700/50 hover:bg-white dark:hover:bg-gray-900 transition-colors">
1248                  View product
1249                </span>
1250              </div>
1251            </div>
1252
1253            <div class="mt-3 flex flex-col gap-1">
1254                <p class="text-[11px] font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider">Pololu</p>
1255              <h3 class="text-sm font-medium text-gray-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors line-clamp-2 leading-snug">100:1 Micro Metal Gearmotor HP 6V</h3>
1256              <div class="flex items-center gap-2 mt-0.5">
1257                  <span class="text-sm font-semibold text-gray-900 dark:text-white">$27.30</span>
1258              </div>
1259            </div>
1260</a>          <a class="group relative flex flex-col" href="/products/microsd-card-64gb-a2-unprogrammed-x">
1261            <div class="relative aspect-square overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800 ring-1 ring-gray-200/50 dark:ring-gray-700/50">
1262                <div class="h-full w-full bg-cover bg-center transition-transform duration-500 ease-out group-hover:scale-105"
1263                  style="background-image: url('/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkD6cYESSIIcHVyBjsAVEkiDGJsb2JfaWQGOwBG--5512a8918b0a4a99245872bbfdc33cae31262c4f/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQKQAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--7ac1464f840979a0fbadf7166c435cc8fec8cbc3/Screenshot%202026-09-16%20at%205.24.21%E2%80%AFpm.png')"
1264                  role="img"
1265                  aria-label="Raspberry Pi microSD Card 64GB A2 â Unprogrammed">
1266                </div>
1267
1268
1269              <div class="hidden sm:flex absolute inset-x-3 bottom-3 opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300">

1270                <span class="flex-1 inline-flex items-center justify-center rounded-lg bg-white/90 dark:bg-gray-900/90 backdrop-blur-sm px-4 py-2.5 text-sm font-semibold text-gray-900 dark:text-white shadow-lg ring-1 ring-gray-200/50 dark:ring-gray-700/50 hover:bg-white dark:hover:bg-gray-900 transition-colors">
1271                  View product
1272                </span>
1273              </div>
1274            </div>
1275
1276            <div class="mt-3 flex flex-col gap-1">
1277                <p class="text-[11px] font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider">Raspberry Pi Ltd</p>
1278              <h3 class="text-sm font-medium text-gray-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors line-clamp-2 leading-snug">Raspberry Pi microSD Card 64GB A2 â Unprogrammed</h3>
1279              <div class="flex items-center gap-2 mt-0.5">
1280                  <span class="text-sm font-semibold text-gray-900 dark:text-white">$52.00</span>
1281              </div>
1282            </div>
1283</a>          <a class="group relative flex flex-col" href="/products/atmega128rfa1-development-board">
1284            <div class="relative aspect-square overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800 ring-1 ring-gray-200/50 dark:ring-gray-700/50">
1285                <div class="h-full w-full bg-cover bg-center transition-transform duration-500 ease-out group-hover:scale-105"
1286                  style="background-image: url('/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkDccYESSIIcHVyBjsAVEkiDGJsb2JfaWQGOwBG--3db0f2adb7ec1e5e8889fa8f0c8e3a58f809a10f/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQKQAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--7ac1464f840979a0fbadf7166c435cc8fec8cbc3/DEV-11197.jpg')"
1287                  role="img"
1288                  aria-label="ATmega128RFA1 Development Board">
1289                </div>
1290
1291
1292              <div class="hidden sm:flex absolute inset-x-3 bottom-3 opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300">
1293                <span class="flex-1 inline-flex items-center justify-center rounded-lg bg-white/90 dark:bg-gray-900/90 backdrop-blur-sm px-4 py-2.5 text-sm font-semibold text-gray-900 dark:text-white shadow-lg ring-1 ring-gray-200/50 dark:ring-gray-700/50 hover:bg-white dark:hover:bg-gray-900 transition-colors">
1294                  View product
1295                </span>
1296              </div>
1297            </div>
1298
1299            <div class="mt-3 flex flex-col gap-1">
1300                <p class="text-[11px] font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider">SparkFun</p>
1301              <h3 class="text-sm font-medium text-gray-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors line-clamp-2 leading-snug">ATmega128RFA1 Development Board</h3>
1302              <div class="flex items-center gap-2 mt-0.5">
1303                  <span class="text-sm font-semibold text-gray-900 dark:text-white">$67.40</span>
1304              </div>
1305            </div>
1306</a>      </div>
1307
1308      <div class="mt-10 text-center">
1309        <a class="inline-flex items-center gap-2 rounded-xl border-2 border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-6 py-3 text-sm font-semibold text-gray-900 dark:text-white hover:border-gray-300 dark:hover:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 transition-all" href="/products">
1310          Browse All Products
1311          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" /></svg>
1312</a>      </div>
1313    </div>
1314  </section>
1315
1316<section class="bg-white dark:bg-gray-950 py-12 sm:py-16">
1317  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
1318    <a class="group block relative overflow-hidden rounded-2xl" href="/platforms/raspberry-pi-computers">
1319      <div class="absolute inset-0 bg-gradient-to-r from-[#C51A4A] via-[#A3153D] to-[#7B1036]"></div>
1320      <div class="absolute inset-0 opacity-[0.06]">
1321        <svg class="absolute inset-0 h-full w-full" xmlns="http://www.w3.org/2000/svg">
1322          <defs>
1323            <pattern id="rpi-circuit" width="60" height="60" patternUnits="userSpaceOnUse">
1324              <path d="M30 0v20M0 30h20M40 30h20M30 40v20" stroke="white" stroke-width="1" fill="none" />
1325              <circle cx="30" cy="30" r="3" fill="white" />
1326              <circle cx="30" cy="20" r="1.5" fill="white" />
1327              <circle cx="20" cy="30" r="1.5" fill="white" />
1328              <circle cx="40" cy="30" r="1.5" fill="white" />
1329              <circle cx="30" cy="40" r="1.5" fill="white" />
1330            </pattern>
1331          </defs>
1332          <rect width="100%" height="100%" fill="url(#rpi-circuit)" />
1333        </svg>
1334      </div>
1335
1336      <div class="relative flex flex-col lg:flex-row items-center gap-8 p-8 sm:p-10 lg:p-12">
1337        <div class="flex-1 min-w-0">
1338          <h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-white">Raspberry Pi</h2>
1339          <p class="mt-3 text-base sm:text-lg text-white/80 leading-relaxed max-w-xl">
1340            Australia's largest range of Raspberry Pi computers, microcontrollers, and accessories. From the Pi 5 and Pi 500+ to the Pico&nbsp;2&nbsp;W and AI&nbsp;HAT+ &mdash; we stock the full lineup.
1341          </p>
1342          <div class="flex flex-wrap gap-2 mt-5">

1343              <span class="inline-flex items-center rounded-full bg-white/15 px-3 py-1 text-xs font-medium text-white/90">Pi 5</span>
1344              <span class="inline-flex items-center rounded-full bg-white/15 px-3 py-1 text-xs font-medium text-white/90">Pi 500+</span>
1345              <span class="inline-flex items-center rounded-full bg-white/15 px-3 py-1 text-xs font-medium text-white/90">Pico 2 W</span>
1346              <span class="inline-flex items-center rounded-full bg-white/15 px-3 py-1 text-xs font-medium text-white/90">AI HAT+</span>
1347              <span class="inline-flex items-center rounded-full bg-white/15 px-3 py-1 text-xs font-medium text-white/90">CM5</span>
1348              <span class="inline-flex items-center rounded-full bg-white/15 px-3 py-1 text-xs font-medium text-white/90">Camera Module 3</span>
1349              <span class="inline-flex items-center rounded-full bg-white/15 px-3 py-1 text-xs font-medium text-white/90">Touch Display 2</span>
1350              <span class="inline-flex items-center rounded-full bg-white/15 px-3 py-1 text-xs font-medium text-white/90">Zero 2 W</span>
1351          </div>
1352          <div class="mt-6">
1353            <span class="inline-flex items-center gap-2 rounded-xl bg-white px-6 py-3 text-sm font-semibold text-[#C51A4A] shadow-lg group-hover:bg-gray-50 group-hover:shadow-xl transition-all">
1354              Shop Raspberry Pi
1355              <svg class="h-4 w-4 group-hover:translate-x-0.5 transition-transform" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" /></svg>
1356            </span>
1357          </div>
1358        </div>
1359
1360        <div class="flex-shrink-0 hidden lg:grid grid-cols-2 gap-3 w-72">
1361            <div class="rounded-xl bg-white/10 backdrop-blur-sm p-4 hover:bg-white/15 transition-colors">
1362              <svg class="h-5 w-5 text-white/70 mb-2" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5M4.5 15.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 0 0 2.25-2.25V6.75a2.25 2.25 0 0 0-2.25-2.25H6.75A2.25 2.25 0 0 0 4.5 6.75v10.5a2.25 2.25 0 0 0 2.25 2.25Zm.75-12h9v9h-9v-9Z" /></svg>
1363              <p class="text-sm font-semibold text-white">Computers</p>
1364              <p class="text-[11px] text-white/60 mt-0.5">Pi 5, Pi 500+, Zero 2 W</p>
1365            </div>
1366            <div class="rounded-xl bg-white/10 backdrop-blur-sm p-4 hover:bg-white/15 transition-colors">
1367              <svg class="h-5 w-5 text-white/70 mb-2" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M2

13670.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" /></svg>
1368              <p class="text-sm font-semibold text-white">Pico &amp; RP2350</p>
1369              <p class="text-[11px] text-white/60 mt-0.5">Pico 2, Pico 2 W</p>
1370            </div>
1371            <div class="rounded-xl bg-white/10 backdrop-blur-sm p-4 hover:bg-white/15 transition-colors">
1372              <svg class="h-5 w-5 text-white/70 mb-2" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z" /></svg>
1373              <p class="text-sm font-semibold text-white">AI &amp; Cameras</p>
1374              <p class="text-[11px] text-white/60 mt-0.5">AI HAT+, Camera Module 3</p>
1375            </div>
1376            <div class="rounded-xl bg-white/10 backdrop-blur-sm p-4 hover:bg-white/15 transition-colors">
1377              <svg class="h-5 w-5 text-white/70 mb-2" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6.429 9.75 2.25 12l4.179 2.25m0-4.5 5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0 4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0-5.571 3-5.571-3" /></svg>
1378              <p class="text-sm font-semibold text-white">HATs &amp; Displays</p>
1379              <p class="text-[11px] text-white/60 mt-0.5">M.2 HAT+, Touch Display 2</p>
1380            </div>
1381        </div>
1382      </div>
1383</a>  </div>
1384</section>
1385
1386<section class="bg-gray-50 dark:bg-gray-900/50 py-12 sm:py-16">
1387  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
1388    <a class="group block relative overflow-hidden rounded-2xl" href="/collections/meshtastic">
1389      <div class="absolute inset-0 bg-gradient-to-r from-[#2D8F4E] via-[#3BA55D] to-[#67EA94]"></div>
1390      <div class="absolute inset-0 opacity-[0.06]">
1391        <svg class="absolute inset-0 h-full w-full" xmlns="http://www.w3.org/2000/svg">
1392          <defs>
1393            <pattern id="mesh-net" width="50" height="50" patternUnits="userSpaceOnUse">
1394              <circle cx="25" cy="25" r="2" fill="white" />
1395              <circle cx="0" cy="0" r="2" fill="white" />
1396              <circle cx="50" cy="0" r="2" fill="white" />
1397              <circle cx="0" cy="50" r="2" fill="white" />
1398              <circle cx="50" cy="50" r="2" fill="white" />
1399              <line x1="25" y1="25" x2="0" y2="0" stroke="white" stroke-width="0.5" />
1400              <line x1="25" y1="25" x2="50" y2="0" stroke="white" stroke-width="0.5" />
1401              <line x1="25" y1="25" x2="0" y2="50" stroke="white" stroke-width="0.5" />
1402              <line x1="25" y1="25" x2="50" y2="50" stroke="white" stroke-width="0.5" />
1403            </pattern>
1404          </defs>
1405          <rect width="100%" height="100%" fill="url(#mesh-net)" />
1406        </svg>
1407      </div>
1408
1409      <div class="relative flex flex-col lg:flex-row items-center gap-8 p-8 sm:p-10 lg:p-12">
1410        <div class="flex-1 min-w-0">
1411          <h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-white">Meshtastic</h2>
1412          <p class="mt-3 text-base sm:text-lg text-white/80 leading-relaxed max-w-xl">
1413            Off-grid mesh networking powered by LoRa. Send messages, share GPS locations, and build decentralised communication networks &mdash; no internet or cell service required.
1414          </p>
1415          <div class="flex flex-wrap gap-2 mt-5">
1416              <span class="inline-flex items-center rounded-full bg-white/15 px-3 py-1 text-xs font-medium text-white/90">LoRa Devices</span>
1417              <span class="inline-flex items-center rounded-full bg-white/15 px-3 py-1 text-xs font-medium text-white/90">T-Beam</span>

1418              <span class="inline-flex items-center rounded-full bg-white/15 px-3 py-1 text-xs font-medium text-white/90">T-Echo</span>
1419              <span class="inline-flex items-center rounded-full bg-white/15 px-3 py-1 text-xs font-medium text-white/90">Heltec Boards</span>
1420              <span class="inline-flex items-center rounded-full bg-white/15 px-3 py-1 text-xs font-medium text-white/90">Antennas</span>
1421              <span class="inline-flex items-center rounded-full bg-white/15 px-3 py-1 text-xs font-medium text-white/90">Cases</span>
1422              <span class="inline-flex items-center rounded-full bg-white/15 px-3 py-1 text-xs font-medium text-white/90">Solar Power</span>
1423              <span class="inline-flex items-center rounded-full bg-white/15 px-3 py-1 text-xs font-medium text-white/90">Starter Kits</span>
1424          </div>
1425          <div class="mt-6">
1426            <span class="inline-flex items-center gap-2 rounded-xl bg-white px-6 py-3 text-sm font-semibold text-[#2D8F4E] shadow-lg group-hover:bg-gray-50 group-hover:shadow-xl transition-all">
1427              Shop Meshtastic
1428              <svg class="h-4 w-4 group-hover:translate-x-0.5 transition-transform" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" /></svg>
1429            </span>
1430          </div>
1431        </div>
1432
1433        <div class="flex-shrink-0 hidden lg:grid grid-cols-2 gap-3 w-72">
1434            <div class="rounded-xl bg-white/10 backdrop-blur-sm p-4 hover:bg-white/15 transition-colors">
1435              <svg class="h-5 w-5 text-white/70 mb-2" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.288 15.038a5.25 5.25 0 0 1 7.424 0M5.106 11.856c3.807-3.808 9.98-3.808 13.788 0M1.924 8.674c5.565-5.565 14.587-5.565 20.152 0M12.53 18.22l-.53.53-.53-.53a.75.75 0 0 1 1.06 0Z" /></svg>
1436              <p class="text-sm font-semibold text-white">LoRa Devices</p>
1437              <p class="text-[11px] text-white/60 mt-0.5">T-Beam, T-Echo, Heltec</p>
1438            </div>
1439            <div class="rounded-xl bg-white/10 backdrop-blur-sm p-4 hover:bg-white/15 transition-colors">
1440              <svg class="h-5 w-5 text-white/70 mb-2" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.348 14.652a3.75 3.75 0 0 1 0-5.304m5.304 0a3.75 3.75 0 0 1 0 5.304m-7.425 2.121a6.75 6.75 0 0 1 0-9.546m9.546 0a6.75 6.75 0 0 1 0 9.546M5.106 18.894c-3.808-3.807-3.808-9.98 0-13.788m13.788 0c3.808 3.808 3.808 9.98 0 13.788M12 12h.008v.008H12V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" /></svg>
1441              <p class="text-sm font-semibold text-white">Antennas</p>
1442              <p class="text-[11px] text-white/60 mt-0.5">Omnidirectional, Yagi</p>
1443            </div>
1444            <div class="rounded-xl bg-white/10 backdrop-blur-sm p-4 hover:bg-white/15 transition-colors">
1445              <svg class="h-5 w-5 text-white/70 mb-2" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z" /></svg>
1446              <p class="text-sm font-semibold text-white">Accessories</p>
1447              <p class="text-[11px] text-white/60 mt-0.5">Cases, solar, batteries</p>
1448            </div>
1449            <div class="rounded-xl bg-white/10 backdrop-blur-sm p-4 hover:bg-white/15 transition-colors">
1450              <svg class="h-5 w-5 text-white/70 mb-2" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21 11.25v8.25a1.5 1.5 0 0 1-1.5 1.5H5.25a1.5 1.5 0 0 1-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 1 0 9.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1 1 14.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z" /></svg>
1451              <p class="text-sm font-semibold text-white">Starter Kits</p>
1452              <p class="text-[11px] text-white/60 mt-0.5">Everything to get started</p>
1453            </div>
1454        </div>
1455      </div>
1456</a>  </div>
1457</section>
1458
1459<section class="bg-white dark:bg-gray-950 py-12 sm:py-16">
1460  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
1461    <a class="group block relative overflow-hidden rounded-2xl" href="/collections/digital-technologies">
1462      <div class="absolute inset-0 bg-gradient-to-r from-[#1E40AF] via-[#3B82F6] to-[#06B6D4]"></div>
1463      <div class="absolute inset-0 opacity-[0.06]">
1464        <svg class="absolute inset-0 h-full w-full" xmlns="http://www.w3.org/2000/svg">
1465          <defs>
1466            <pattern id="dt-grid" width="40" height="40" patternUnits="userSpaceOnUse">
1467              <path d="M0 20h40M20 0v40" stroke="white" stroke-width="0.5" fill="none" />
1468              <circle cx="20" cy="20" r="2" fill="white" />
1469            </pattern>
1470          </defs>
1471          <rect width="100%" height="100%" fill="url(#dt-grid)" />
1472        </svg>
1473      </div>
1474
1475      <div class="relative flex flex-col lg:flex-row items-center gap-8 p-8 sm:p-10 lg:p-12">
1476        <div class="flex-1 min-w-0">

1477          <span class="inline-flex items-center rounded-full bg-white/15 border border-white/20 px-3 py-1 text-xs font-medium text-white/90 mb-4">For Schools &amp; Educators</span>
1478          <h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-white">Digital Technologies</h2>
1479          <p class="mt-3 text-base sm:text-lg text-white/80 leading-relaxed max-w-xl">
1480            Curriculum-aligned resources for teaching Digital Technologies &mdash; robotics, coding, 3D&nbsp;printing, drones, circuitry, and makerspace equipment for Australian schools.
1481          </p>
1482          <div class="flex flex-wrap gap-2 mt-5">
1483              <span class="inline-flex items-center rounded-full bg-white/15 px-3 py-1 text-xs font-medium text-white/90">Robotics &amp; Coding</span>
1484              <span class="inline-flex items-center rounded-full bg-white/15 px-3 py-1 text-xs font-medium text-white/90">3D Printing</span>
1485              <span class="inline-flex items-center rounded-full bg-white/15 px-3 py-1 text-xs font-medium text-white/90">Drones</span>
1486              <span class="inline-flex items-center rounded-full bg-white/15 px-3 py-1 text-xs font-medium text-white/90">Circuitry &amp; IOT</span>
1487              <span class="inline-flex items-center rounded-full bg-white/15 px-3 py-1 text-xs font-medium text-white/90">Media Production</span>
1488              <span class="inline-flex items-center rounded-full bg-white/15 px-3 py-1 text-xs font-medium text-white/90">Makerspace</span>
1489          </div>
1490          <div class="mt-6">
1491            <span class="inline-flex items-center gap-2 rounded-xl bg-white px-6 py-3 text-sm font-semibold text-[#1E40AF] shadow-lg group-hover:bg-gray-50 group-hover:shadow-xl transition-all">
1492              Browse Catalogue
1493              <svg class="h-4 w-4 group-hover:translate-x-0.5 transition-transform" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" /></svg>
1494            </span>
1495          </div>
1496        </div>
1497
1498        <div class="flex-shrink-0 hidden lg:grid grid-cols-2 gap-3 w-72">
1499            <div class="rounded-xl bg-white/10 backdrop-blur-sm p-4 hover:bg-white/15 transition-colors">
1500              <svg class="h-5 w-5 text-white/70 mb-2" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5M4.5 15.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 0 0 2.25-2.25V6.75a2.25 2.25 0 0 0-2.25-2.25H6.75A2.25 2.25 0 0 0 4.5 6.75v10.5a2.25 2.25 0 0 0 2.25 2.25Z" /></svg>
1501              <p class="text-sm font-semibold text-white">Robotics</p>
1502              <p class="text-[11px] text-white/60 mt-0.5">Bee-Bot, Sphero, Edison</p>
1503            </div>
1504            <div class="rounded-xl bg-white/10 backdrop-blur-sm p-4 hover:bg-white/15 transition-colors">
1505              <svg class="h-5 w-5 text-white/70 mb-2" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" /></svg>
1506              <p class="text-sm font-semibold text-white">3D Printing</p>
1507              <p class="text-[11px] text-white/60 mt-0.5">Printers, filaments, parts</p>
1508            </div>
1509            <div class="rounded-xl bg-white/10 backdrop-blur-sm p-4 hover:bg-white/15 transition-colors">
1510              <svg class="h-5 w-5 text-white/70 mb-2" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z" /></svg>
1511              <p class="text-sm font-semibold text-white">Circuitry</p>
1512              <p class="text-[11px] text-white/60 mt-0.5">Kits, components, IoT</p>
1513            </div>
1514            <div class="rounded-xl bg-white/10 backdrop-blur-sm p-4 hover:bg-white/15 transition-colors">
1515              <svg class="h-5 w-5 text-white/70 mb-2" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17 17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437 1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008Z" /></svg>
1516              <p class="text-sm font-semibold text-white">Makerspace</p>
1517              <p class="text-[11px] text-white/60 mt-0.5">Tools &amp; equipment</p>
1518            </div>
1519        </div>
1520      </div>
1521</a>  </div>
1522</section>
1523
1524<section class="bg-white dark:bg-gray-950 py-16 sm:py-20">

1525  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
1526    <div class="text-center mb-10 sm:mb-12">
1527      <h2 class="text-2xl sm:text-3xl font-bold tracking-tight text-gray-900 dark:text-white">Shop by Platform</h2>
1528      <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Australia's widest range of maker &amp; education electronics</p>
1529    </div>
1530
1531
1532    <div class="grid grid-cols-1 md:grid-cols-3 gap-5 sm:gap-6 mb-5 sm:mb-6">
1533        <a class="group relative overflow-hidden rounded-2xl min-h-[260px]" href="/platforms/raspberry-pi-computers">
1534          <div class="absolute inset-0 bg-gradient-to-br from-[#C51A4A] to-[#7B1036] transition-all duration-300 group-hover:scale-105"></div>
1535          <div class="absolute inset-0 opacity-[0.07]">
1536            <svg class="absolute inset-0 h-full w-full" xmlns="http://www.w3.org/2000/svg">
1537              <defs>
1538                <pattern id="platform-dots-raspberry-pi-computers" width="16" height="16" patternUnits="userSpaceOnUse">
1539                  <circle cx="2" cy="2" r="1" fill="white" />
1540                </pattern>
1541              </defs>
1542              <rect width="100%" height="100%" fill="url(#platform-dots-raspberry-pi-computers)" />
1543            </svg>
1544          </div>
1545          <div class="relative h-full flex flex-col justify-between p-6 sm:p-7">
1546            <div>
1547              <h3 class="text-xl sm:text-2xl font-bold text-white">Raspberry Pi</h3>
1548              <p class="mt-2 text-sm text-white/80 leading-relaxed line-clamp-3">Pi 5, Pi 500+, AI HAT+, Camera Module 3, Touch Display 2, Compute Module 5, and the full range of accessories.</p>
1549            </div>
1550            <div class="mt-5">
1551              <div class="flex flex-wrap gap-1.5 mb-4">
1552                  <span class="inline-flex items-center rounded-full bg-white/15 px-2.5 py-0.5 text-[11px] font-medium text-white/90">Pi 5 &amp; Pi 500+</span>
1553                  <span class="inline-flex items-center rounded-full bg-white/15 px-2.5 py-0.5 text-[11px] font-medium text-white/90">AI HAT+</span>
1554                  <span class="inline-flex items-center rounded-full bg-white/15 px-2.5 py-0.5 text-[11px] font-medium text-white/90">Cameras &amp; Displays</span>
1555                  <span class="inline-flex items-center rounded-full bg-white/15 px-2.5 py-0.5 text-[11px] font-medium text-white/90">Cases &amp; Kits</span>
1556              </div>
1557              <span class="inline-flex items-center gap-1.5 text-sm font-semibold text-white group-hover:gap-2.5 transition-all">
1558                Shop Raspberry Pi
1559                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" /></svg>
1560              </span>
1561            </div>
1562          </div>
1563</a>        <a class="group relative overflow-hidden rounded-2xl min-h-[260px]" href="/platforms/arduino">
1564          <div class="absolute inset-0 bg-gradient-to-br from-[#00979D] to-[#006B6F] transition-all duration-300 group-hover:scale-105"></div>
1565          <div class="absolute inset-0 opacity-[0.07]">
1566            <svg class="absolute inset-0 h-full w-full" xmlns="http://www.w3.org/2000/svg">
1567              <defs>
1568                <pattern id="platform-dots-arduino" width="16" height="16" patternUnits="userSpaceOnUse">
1569                  <circle cx="2" cy="2" r="1" fill="white" />
1570                </pattern>
1571              </defs>
1572              <rect width="100%" height="100%" fill="url(#platform-dots-arduino)" />
1573            </svg>
1574          </div>
1575          <div class="relative h-full flex flex-col justify-between p-6 sm:p-7">
1576            <div>
1577              <h3 class="text-xl sm:text-2xl font-bold text-white">Arduino</h3>
1578              <p class="mt-2 text-sm text-white/80 leading-relaxed line-clamp-3">Official boards, shields, kits, and compatible accessories. The open-source platform that started the maker movement.</p>
1579            </div>
1580            <div class="mt-5">
1581              <div class="flex flex-wrap gap-1.5 mb-4">
1582                  <span class="inline-flex items-center rounded-full bg-white/15 px-2.5 py-0.5 text-[11px] font-medium text-white/90">Uno, Mega &amp; Nano</span>

1583                  <span class="inline-flex items-center rounded-full bg-white/15 px-2.5 py-0.5 text-[11px] font-medium text-white/90">Shields &amp; Modules</span>
1584                  <span class="inline-flex items-center rounded-full bg-white/15 px-2.5 py-0.5 text-[11px] font-medium text-white/90">Starter Kits</span>
1585                  <span class="inline-flex items-center rounded-full bg-white/15 px-2.5 py-0.5 text-[11px] font-medium text-white/90">Sensors &amp; Actuators</span>
1586              </div>
1587              <span class="inline-flex items-center gap-1.5 text-sm font-semibold text-white group-hover:gap-2.5 transition-all">
1588                Shop Arduino
1589                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" /></svg>
1590              </span>
1591            </div>
1592          </div>
1593</a>        <a class="group relative overflow-hidden rounded-2xl min-h-[260px]" href="/platforms/micro-bit">
1594          <div class="absolute inset-0 bg-gradient-to-br from-[#6DC849] to-[#3E8428] transition-all duration-300 group-hover:scale-105"></div>
1595          <div class="absolute inset-0 opacity-[0.07]">
1596            <svg class="absolute inset-0 h-full w-full" xmlns="http://www.w3.org/2000/svg">
1597              <defs>
1598                <pattern id="platform-dots-micro-bit" width="16" height="16" patternUnits="userSpaceOnUse">
1599                  <circle cx="2" cy="2" r="1" fill="white" />
1600                </pattern>
1601              </defs>
1602              <rect width="100%" height="100%" fill="url(#platform-dots-micro-bit)" />
1603            </svg>
1604          </div>
1605          <div class="relative h-full flex flex-col justify-between p-6 sm:p-7">
1606            <div>
1607              <h3 class="text-xl sm:text-2xl font-bold text-white">micro:bit</h3>
1608              <p class="mt-2 text-sm text-white/80 leading-relaxed line-clamp-3">BBC micro:bit boards, expansion kits, and classroom packs. The go-to platform for teaching coding in Australian schools.</p>
1609            </div>
1610            <div class="mt-5">
1611              <div class="flex flex-wrap gap-1.5 mb-4">
1612                  <span class="inline-flex items-center rounded-full bg-white/15 px-2.5 py-0.5 text-[11px] font-medium text-white/90">micro:bit v2</span>
1613                  <span class="inline-flex items-center rounded-full bg-white/15 px-2.5 py-0.5 text-[11px] font-medium text-white/90">Expansion Boards</span>
1614                  <span class="inline-flex items-center rounded-full bg-white/15 px-2.5 py-0.5 text-[11px] font-medium text-white/90">Classroom Packs</span>
1615                  <span class="inline-flex items-center rounded-full bg-white/15 px-2.5 py-0.5 text-[11px] font-medium text-white/90">STEM Projects</span>
1616              </div>
1617              <span class="inline-flex items-center gap-1.5 text-sm font-semibold text-white group-hover:gap-2.5 transition-all">
1618                Shop micro:bit
1619                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" /></svg>
1620              </span>
1621            </div>
1622          </div>
1623</a>    </div>
1624
1625    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-

16255 sm:gap-6">
1626        <a class="group relative overflow-hidden rounded-2xl" href="/collections/robotics">
1627          <div class="absolute inset-0 bg-gradient-to-br from-brand-600 to-brand-800 transition-all duration-300 group-hover:scale-105"></div>
1628          <div class="relative flex flex-col p-6">
1629            <h3 class="text-lg font-bold text-white">Robotics</h3>
1630            <p class="mt-1.5 text-sm text-white/75 leading-relaxed line-clamp-2">Robot kits, motors, servos, chassis, and everything you need to build autonomous machines and programmable robots.</p>
1631            <div class="flex flex-wrap gap-1.5 mt-4 mb-4">
1632                <span class="inline-flex items-center rounded-full bg-white/15 px-2.5 py-0.5 text-[11px] font-medium text-white/90">Robot Kits</span>
1633                <span class="inline-flex items-center rounded-full bg-white/15 px-2.5 py-0.5 text-[11px] font-medium text-white/90">Motors &amp; Servos</span>
1634                <span class="inline-flex items-center rounded-full bg-white/15 px-2.5 py-0.5 text-[11px] font-medium text-white/90">Wheels &amp; Chassis</span>
1635                <span class="inline-flex items-center rounded-full bg-white/15 px-2.5 py-0.5 text-[11px] font-medium text-white/90">Controllers</span>
1636            </div>
1637            <span class="inline-flex items-center gap-1.5 text-sm font-semibold text-white group-hover:gap-2.5 transition-all">
1638              Shop Robotics
1639              <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" /></svg>
1640            </span>
1641          </div>
1642</a>        <a class="group relative overflow-hidden rounded-2xl" href="/collections/e-textiles">
1643          <div class="absolute inset-0 bg-gradient-to-br from-[#9B59B6] to-[#6C3483] transition-all duration-300 group-hover:scale-105"></div>
1644          <div class="relative flex flex-col p-6">
1645            <h3 class="text-lg font-bold text-white">E-Textiles</h3>
1646            <p class="mt-1.5 text-sm text-white/75 leading-relaxed line-clamp-2">Wearable electronics, conductive thread, LilyPad boards, and sewable components for fashion-meets-tech projects.</p>
1647            <div class="flex flex-wrap gap-1.5 mt-4 mb-4">
1648                <span class="inline-flex items-center rounded-full bg-white/15 px-2.5 py-0.5 text-[11px] font-medium text-white/90">LilyPad Boards</span>
1649                <span class="inline-flex items-center rounded-full bg-white/15 px-2.5 py-0.5 text-[11px] font-medium text-white/90">Conductive Thread</span>
1650                <span class="inline-flex items-center rounded-full bg-white/15 px-2.5 py-0.5 text-[11px] font-medium text-white/90">Sewable LEDs</span>
1651                <span class="inline-flex items-center rounded-full bg-white/15 px-2.5 py-0.5 text-[11px] font-medium text-white/90">Wearable Sensors</span>
1652            </div>
1653            <span class="inline-flex items-center gap-1.5 text-sm font-semibold text-white group-hover:gap-2.5 transition-all">
1654              Shop E-Textiles
1655              <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" /></svg>
1656            </span>
1657          </div>
1658</a>        <a class="group relative overflow-hidden rounded-2xl" href="/platforms/esp32">
1659          <div class="absolute inset-0 bg-gradient-to-br from-[#E74C3C] to-[#A93226] transition-all duration-300 group-hover:scale-105"></div>
1660          <div class="relative flex flex-col p-6">
1661            <h3 class="text-lg font-bold text-white">ESP32 &amp; IoT</h3>
1662            <p class="mt-1.5 text-sm text-white/75 leading-relaxed line-clamp-2">ESP32 and ESP8266 development boards, WiFi and Bluetooth modules for connected projects and Internet of Things.</p>
1663            <div class="flex flex-wrap gap-1.5 mt-4 mb-4">
1664                <span class="inline-flex items-center rounded-full bg-white/15 px-2.5 py-0.5 text-[11px] font-medium text-white/90">ESP32 Boards</span>

1665                <span class="inline-flex items-center rounded-full bg-white/15 px-2.5 py-0.5 text-[11px] font-medium text-white/90">ESP8266 Modules</span>
1666                <span class="inline-flex items-center rounded-full bg-white/15 px-2.5 py-0.5 text-[11px] font-medium text-white/90">WiFi &amp; Bluetooth</span>
1667                <span class="inline-flex items-center rounded-full bg-white/15 px-2.5 py-0.5 text-[11px] font-medium text-white/90">IoT Sensors</span>
1668            </div>
1669            <span class="inline-flex items-center gap-1.5 text-sm font-semibold text-white group-hover:gap-2.5 transition-all">
1670              Shop ESP32 &amp; IoT
1671              <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" /></svg>
1672            </span>
1673          </div>
1674</a>        <a class="group relative overflow-hidden rounded-2xl" href="/platforms/meshtastic">
1675          <div class="absolute inset-0 bg-gradient-to-br from-[#67EA94] to-[#2D8F4E] transition-all duration-300 group-hover:scale-105"></div>
1676          <div class="relative flex flex-col p-6">
1677            <h3 class="text-lg font-bold text-white">Meshtastic</h3>
1678            <p class="mt-1.5 text-sm text-white/75 leading-relaxed line-clamp-2">LoRa mesh networking devices for off-grid communication. No internet, no cell service required &amp;mdash; build your own decentralised network.</p>
1679            <div class="flex flex-wrap gap-1.5 mt-4 mb-4">
1680                <span class="inline-flex items-center rounded-full bg-white/15 px-2.5 py-0.5 text-[11px] font-medium text-white/90">LoRa Devices</span>
1681                <span class="inline-flex items-center rounded-full bg-white/15 px-2.5 py-0.5 text-[11px] font-medium text-white/90">Mesh Nodes</span>
1682                <span class="inline-flex items-center rounded-full bg-white/15 px-2.5 py-0.5 text-[11px] font-medium text-white/90">Antennas</span>
1683                <span class="inline-flex items-center rounded-full bg-white/15 px-2.5 py-0.5 text-[11px] font-medium text-white/90">Starter Kits</span>
1684            </div>
1685            <span class="inline-flex items-center gap-1.5 text-sm font-semibold text-white group-hover:gap-2.5 transition-all">
1686              Shop Meshtastic
1687              <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" /></svg>
1688            </span>
1689          </div>
1690</a>    </div>
1691  </div>
1692</section>
1693
1694  <section class="bg-gray-50 dark:bg-gray-900/50 py-16 sm:py-20">
1695    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
1696      <div class="flex items-end justify-between mb-8 sm:mb-10">
1697        <div>
1698          <h2 class="text-2xl sm:text-3xl font-bold tracking-tight text-gray-900 dark:text-white">Shop by Category</h2>
1699          <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Browse our collections</p>
1700        </div>
1701        <a class="hidden sm:inline-flex items-center gap-1.5 text-sm font-semibold text-brand-700 dark:text-brand-400 hover:text-brand-600 dark:hover:text-brand-300 transition-colors" href="/collections">
1702          View all
1703          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" /></svg>
1704</a>      </div>
1705
1706
1707      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 mb-4 sm:mb-6">
1708          <a class="group relative overflow-hidden rounded-2xl min-h-[220px] sm:min-h-[280px]" href="/collections/sensors-input">
1709              <div class="absolute inset-0 bg-cover bg-center transition-transform duration-500 ease-out group-hover:scale-105"
1710                style="background-image: url('/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkB7UkiCHB1cgY7AFRJIgxibG9iX2lkBjsARg==--bbf85427d635bed4f726ef021a44a4be9dae6fc7/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpArwCaQKQAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--3de17b

171007eb65026388de30403b631f264e187108/image_c40421a6-45dc-492b-8b25-fda5839250bd.jpg')">
1711              </div>
1712              <div class="absolute inset-0 bg-gradient-to-t from-gray-900/80 via-gray-900/30 to-gray-900/10"></div>
1713            <div class="relative h-full flex flex-col justify-end p-6 sm:p-8">
1714              <h3 class="text-xl sm:text-2xl font-bold text-white">Sensors &amp; Input</h3>
1715                <p class="mt-2 text-sm text-gray-200 line-clamp-2 max-w-md">Explore our extensive range of sensor modules and input devices, stocked locally for fast delivery across Australia. ...</p>
1716              <p class="mt-2 text-xs text-gray-300">908 products</p>
1717            </div>
1718</a>          <a class="group relative overflow-hidden rounded-2xl min-h-[220px] sm:min-h-[280px]" href="/collections/leds">
1719              <div class="absolute inset-0 bg-cover bg-center transition-transform duration-500 ease-out group-hover:scale-105"
1720                style="background-image: url('/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGktSSIIcHVyBjsAVEkiDGJsb2JfaWQGOwBG--86c45604e295c2a803807ba82d19416eb346a7aa/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpArwCaQKQAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--3de17b07eb65026388de30403b631f264e187108/image_a10cf1c4-c743-4ca8-9ddb-43aa230d924f.jpg')">
1721              </div>
1722              <div class="absolute inset-0 bg-gradient-to-t from-gray-900/80 via-gray-900/30 to-gray-900/10"></div>
1723            <div class="relative h-full flex flex-col justify-end p-6 sm:p-8">
1724              <h3 class="text-xl sm:text-2xl font-bold text-white">LEDs</h3>
1725                <p class="mt-2 text-sm text-gray-200 line-clamp-2 max-w-md">Browse our range of LEDs â from through-hole and SMD indicator LEDs to high-power RGB, UV, and IR emitters. Whether y...</p>
1726              <p class="mt-2 text-xs text-gray-300">1018 products</p>
1727            </div>
1728</a>      </div>
1729
1730        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-6">
1731            <a class="group relative overflow-hidden rounded-2xl bg-gray-200 dark:bg-gray-800 aspect-[4/3]" href="/collections/displays">
1732                <div class="absolute inset-0 bg-cover bg-center transition-transform duration-500 ease-out group-hover:scale-105"
1733                  style="background-image: url('/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkB7EkiCHB1cgY7AFRJIgxibG9iX2lkBjsARg==--91a560acf2888129bd8f1ba79ac5081f2daec496/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQIsAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--fe155187d00fea0c735dfc121570c3bd2db5482f/image_12e92841-bbcd-4c27-b7d3-2d378995d6e1.webp')">
1734                </div>
1735              <div class="absolute inset-0 bg-gradient-to-t from-gray-900/80 via-gray-900/20 to-transparent"></div>
1736              <div class="absolute inset-x-0 bottom-0 p-4 sm:p-5">
1737                <h3 class="text-sm sm:text-base font-bold text-white">Displays</h3>
1738                <p class="mt-0.5 text-xs text-gray-300">730 products</p>
1739              </div>
1740</a>            <a class="group relative overflow-hidden rounded-2xl bg-gray-200 dark:bg-gray-800 aspect-[4/3]" href="/collections/motors-dc-stepper-servo">
1741                <div class="absolute inset-0 bg-cover bg-center transition-transform duration-500 ease-out group-hover:scale-105"
1742                  style="background-image: url('/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkCLgJJIghwdXIGOwBUSSIMYmxvYl9pZAY7AEY=--2142e0bb34fc1974d8ac57f646735c92cadaa7df/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQIsAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--fe155187d00fea0c735dfc121570c3bd2db5482f/image_db54a4ad-de8e-457d-82c3-a9692fd0baba.png')">
1743                </div>
1744              <div class="absolute inset-0 bg-gradient-to-t from-gray-900/80 via-gray-900/20 to-transparent"></div>
1745              <div class="absolute inset-x-0 bottom-0 p-4 sm:p-5">
1746                <h3 class="text-sm sm:text-base font-bold text-white">Motors (DC, stepper, servo)</h3>
1747                <p class="mt-0.5 text-xs text-gray-300">383 products</p>
1748              </div>
1749</a>            <a class="group relative overflow-hidden rounded-2xl bg-gray-200 dark:bg-gray-800 aspect-[4/3]" href="/collections/3d-printing">
1750                <div class="absolute inset-0 bg-cover bg-center transition-transform duration-500 ease-out group-hover:scale-105"
1751                  style="background-image: url('/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkCjwdJIghwdXIGOwBUSSIMYmxvYl9pZAY7AEY=--cd8b4b42a1ea1fb026b4207ad7859ff7509c389f/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQIsAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--fe155187d00fea0c735dfc121570c3bd2db5482f/image_6dad1c6a-6279-4bbd-a707-8c06ee1ec382.jpg')">
1752                </div>
1753              <div class="absolute inset-0 bg-gradient-to-t from-gray-900/80 via-gray-900/20 to-transparent"></div>
1754              <div class="absolute inset-x-0 bottom-0 p-4 sm:p-5">
1755                <h3 class="text-sm sm:text-base font-bold text-white">3D Printing</h3>
1756                <p class="mt-0.5 text-xs text-gray-300">65 products</p>
1757              </div>
1758</a>            <a class="group relative overflow-hidden rounded-2xl bg-gray-200 dark:bg-gray-800 aspect-[4/3]" href="/collections/prototyping">
1759                <div class="absolute inset-0 bg-cover bg-center transition-transform duration-500 ease-out group-hover:scale-105"
1760                  style="background-image: url('/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGk4SSIIcHVyBjsAVEkiDGJsb2JfaWQGOwBG--ba324dcbceec033f510d963472ed7f58fa512381/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQIsAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--fe155187d00fea0c735dfc121570c3bd2db5482f/image_8fdb0ba2-845d-4ecf-b37c-a928d76981e6.png')">
1761                </div>
1762              <div class="absolute inset-0 bg-gradient-to-t from-gray-900/80 via-gray-900/20 to-transparent"></div>
1763              <div class="absolute inset-x-0 bottom-0 p-4 sm:p-5">
1764                <h3 class="text-sm sm:text-base font-bold text-white">Prototyping</h3>
1765                <p class="mt-0.5 text-xs text-gray-300">1840 products</p>
1766              </div>
1767</a>            <a class="group relative overflow-hidden rounded-2xl bg-gray-200 dark:bg-gray-800 aspect-[4/3]" href="/collections/tools-equipment">
1768                <div class="absolute inset-0 bg-cover bg-center transition-transform duration-500 ease-out group-hover:scale-105"
1769                  style="background-image: url('/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkC4wFJIghwdXIGOwBUSSIMYmxvYl9pZAY7AEY=--1508e50f6be242b9fde380f3e48edc0ce030397d/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQIsAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--fe155187d00fea0c735dfc121570c3bd2db5482f/image_a464ee22-1f98-4a09-8c0d-a3e7a9f35c57.png')">
1770                </div>
1771              <div class="absolute inset-0 bg-gradient-to-t from-gray-900/80 via-gray-900/20 to-transparent"></div>
1772              <div class="absolute inset-x-0 bottom-0 p-4 sm:p-5">
1773                <h3 class="text-sm sm:text-base font-bold text-white">Tools &amp; Equipment</h3>
1774                <p class="mt-0.5 text-xs text-gray-300">309 products</p>
1775              </div>
1776</a>            <a class="group relative overflow-hidden rounded-2xl bg-gray-200 dark:bg-gray-800 aspect-[4/3]" href="/collections/batteries">
1777                <div class="absolute inset-0 bg-cover bg-center transition-transform duration-500 ease-out group-hover:scale-105"
1778                  style="background-image: url('/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkCrwdJIghwdXIGOwBUSSIMYmxvYl9pZAY7AEY=--2eb4d682f96315be4abe2374dfb1610f21d86be1/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQIsAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--fe155187d00fea0c735dfc121570c3bd2db5482f/image_7a46105f-1a98-4cc2-ab47-c4c5d21ca4d6.jpg')">
1779                </div>
1780              <div class="absolute inset-0 bg-gradient-to-t from-gray-900/80 via-gray-900/20 to-transparent"></div>
1781              <div class="absolute inset-x-0 bottom-0 p-4 sm:p-5">
1782                <h3 class="text-sm sm:text-base font-bold text-white">Batteries</h3>
1783                <p class="mt-0.5 text-xs text-gray-300">195 products</p>
1784              </div>
1785</a>            <a class="group relative overflow-hidden rounded-2xl bg-gray-200 dark:bg-gray-800 aspect-[4/3]" href="/collections/cameras">
1786                <div class="absolute inset-0 bg-cover bg-center transition-transform duration-500 ease-out group-hover:scale-105"
1787                  style="background-image: url('/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkgSSIIcHVyBjsAVEkiDGJsb2JfaWQGOwBG--811d9f2acb005f9ebe4ef0f7ea1aaed85f53a819/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQIsAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--fe155187d00fea0c735dfc121570c3bd2db5482f/image_b9ddf6f9-19ae-4d2b-ab9f-f9f8375e3363.jpg')">
1788                </div>
1789              <div class="absolute inset-0 bg-gradient-to-t from-gray-900/80 via-gray-900/20 to-transparent"></div>
1790              <div class="absolute inset-x-0 bottom-0 p-4 sm:p-5">
1791                <h3 class="text-sm sm:text-base font-bold text-white">Cameras</h3>
1792                <p class="mt-0.5 text-xs text-gray-300">159 products</p>
1793              </div>
1794</a>            <a class="group relative overflow-hidden rounded-2xl bg-gray-200 dark:bg-gray-800 aspect-[4/3]" href="/collections/power-management">
1795                <div class="absolute inset-0 bg-cover bg-center transition-transform duration-500 ease-out group-hover:scale-105"
1796                  style="background-image: url('/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkCgwFJIghwdXIGOwBUSSIMYmxvYl9pZAY7AEY=--3fc3ba8b724303f7830a170ad0b94849950f6c49/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQIsAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--fe155187d00fea0c735dfc121570c3bd2db5482f/image_90a59662-ff8d-4df6-8f7a-c0b003c8f7ca.png')">
1797                </div>
1798              <div class="absolute inset-0 bg-gradient-to-t from-gray-900/80 via-gray-900/20 to-transparent"></div>
1799              <div class="absolute inset-x-0 bottom-0 p-4 sm:p-5">
1800                <h3 class="text-sm sm:text-base font-bold text-white">Power Management</h3>
1801                <p class="mt-0.5 text-xs text-gray-300">393 products</p>
1802              </div>
1803</a>            <a class="group relative overflow-hidden rounded-2xl bg-gray-200 dark:bg-gray-800 aspect-[4/3]" href="/collections/beginners-electronics-kits">
1804                <div class="absolute inset-0 bg-cover bg-center transition-transform duration-500 ease-out group-hover:scale-105"
1805                  style="background-image: url('/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkCFgFJIghwdXIGOwBUSSIMYmxvYl9pZAY7AEY=--04431231521b6677c6d60b65db3e7d585009a0f0/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQIsAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--fe155187d00fea0c735dfc121570c3bd2db5482f/image_a80ef7cb-4f29-4445-9234-e6e3f8fccc84.png')">
1806                </div>
1807              <div class="absolute inset-0 bg-gradient-to-t from-gray-900/80 via-gray-900/20 to-transparent"></div>
1808              <div class="absolute inset-x-0 bottom-0 p-4 sm:p-5">
1809                <h3 class="text-sm sm:text-base font-bold text-white">Beginner&#39;s Electronics Kits</h3>
1810                <p class="mt-0.5 text-xs text-gray-300">127 products</p>
1811              </div>
1812</a>            <a class="group relative overflow-hidden rounded-2xl bg-gray-200 dark:bg-gray-800 aspect-[4/3]" href="/collections/australian-made">
1813                <div class="absolute inset-0 bg-cover bg-center transition-transform duration-500 ease-out group-hover:scale-105"
1814                  style="background-image: url('/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkCIwJJIghwdXIGOwBUSSIMYmxvYl9pZAY7AEY=--e96168c43b0b5d0b1afa23b6073c918bdb1ebbfa/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQIsAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--fe155187d00fea0c735dfc121570c3bd2db5482f/image_e8d3492a-fc69-423a-baf9-a365a706d223.webp')">
1815                </div>
1816              <div class="absolute inset-0 bg-gradient-to-t from-gray-900/80 via-gray-900/20 to-transparent"></div>
1817              <div class="absolute inset-x-0 bottom-0 p-4 sm:p-5">
1818                <h3 class="text-sm sm:text-base font-bold text-white">Australian Made</h3>
1819                <p class="mt-0.5 text-xs text-gray-300">126 products</p>
1820              </div>
1821</a>        </div>
1822
1823      <div class="mt-8 text-center">
1824        <a class="inline-flex items-center gap-2 rounded-xl border-2 border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-6 py-3 text-sm font-semibold text-gray-900 dark:text-white hover:border-gray-300 dark:hover:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 transition-all" href="/collections">
1825          Browse All Collections
1826          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" /></svg>
1827</a>      </div>
1828    </div>
1829  </section>
1830
1831  <section class="bg-gradient-to-b from-amber-50 to-white dark:from-amber-950/20 dark:to-gray-950 py-16 sm:py-20">
1832    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
1833      <div class="flex items-end justify-between mb-8 sm:mb-10">
1834        <div>
1835          <div class="inline-flex items-center gap-2 rounded-full bg-amber-100 dar

1835k:bg-amber-900/40 px-3 py-1 text-xs font-bold text-amber-700 dark:text-amber-300 uppercase tracking-wider mb-3">
1836            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6Z" /></svg>
1837            Special Deals
1838          </div>
1839          <h2 class="text-2xl sm:text-3xl font-bold tracking-tight text-gray-900 dark:text-white">Special Deals</h2>
1840          <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Hand-picked deals just for you</p>
1841        </div>
1842        <a class="hidden sm:inline-flex items-center gap-1.5 text-sm font-semibold text-amber-700 dark:text-amber-400 hover:text-amber-600 dark:hover:text-amber-300 transition-colors" href="/collections/special-deals">
1843          View all deals
1844          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" /></svg>
1845</a>      </div>
1846
1847      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-6">
1848          <a class="group relative flex flex-col" href="/products/zumo-robot-for-arduino-v1-2-assembled-with-75-1-hp-motors">
1849            <div class="relative aspect-square overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800 ring-1 ring-gray-200/50 dark:ring-gray-700/50">
1850                <div class="h-full w-full bg-cover bg-center transition-transform duration-500 ease-out group-hover:scale-105"
1851                  style="background-image: url('/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkCwXtJIghwdXIGOwBUSSIMYmxvYl9pZAY7AEY=--a2e23d20f1491135c3cdc0e92338c2ad6c135459/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQKQAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--7ac1464f840979a0fbadf7166c435cc8fec8cbc3/image_bb896a27-011a-46cb-bb45-97bf0cd8ee95.jpg')"
1852                  role="img"
1853                  aria-label="Zumo Robot for Arduino, v1.2 (Assembled with 75:1 HP Motors)">
1854                </div>
1855
1856              <div class="absolute top-2.5 left-2.5">
1857                <span class="inline-flex items-center gap-1 rounded-full bg-amber-500 px-2.5 py-1 text-xs font-bold text-white shadow-sm">
1858                  <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6Z" /></svg>
1859                  Deal
1860                </span>
1861              </div>
1862
1863                <div class="absolute top-2.5 right-2.5">
1864                  <span class="inline-flex items-center rounded-full bg-red-500 px-2.5 py-1 text-xs font-bold text-white shadow-sm">Sale</span>
1865                </div>
1866
1867              <div class="hidden sm:flex absolute inset-x-3 bottom-3 opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300">
1868                <span class="flex-1 inline-flex items-center justify-center rounded-lg bg-white/90 dark:bg-gray-900/90 backdrop-blur-sm px-4 py-2.5 text-sm font-semibold text-gray-900 dark:text-white shadow-lg ring-1 ring-gray-200/50 dark:ring-gray-700/50 hover:bg-white dark:hover:bg-gray-900 transition-colors">
1869                  View product
1870                </span>
1871              </div>
1872            </div>
1873
1874            <div class="mt-3 flex flex-col gap-1">
1875                <p class="text-[11px] font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider">

1875Pololu</p>
1876              <h3 class="text-sm font-medium text-gray-900 dark:text-white group-hover:text-amber-600 dark:group-hover:text-amber-400 transition-colors line-clamp-2 leading-snug">Zumo Robot for Arduino, v1.2 (Assembled with 75:1 HP Motors)</h3>
1877              <div class="flex items-center gap-2 mt-0.5">
1878                  <span class="text-sm font-bold text-red-600 dark:text-red-400">$129.00</span>
1879                  <span class="text-xs text-gray-400 line-through">$220.00</span>
1880              </div>
1881            </div>
1882</a>          <a class="group relative flex flex-col" href="/products/abs-filament-1-75mm-1kg-roll-pink">
1883            <div class="relative aspect-square overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800 ring-1 ring-gray-200/50 dark:ring-gray-700/50">
1884                <div class="h-full w-full bg-cover bg-center transition-transform duration-500 ease-out group-hover:scale-105"
1885                  style="background-image: url('/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkCVkdJIghwdXIGOwBUSSIMYmxvYl9pZAY7AEY=--325ca2d9c214462721b4cabd04bcad5bc8df3961/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQKQAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--7ac1464f840979a0fbadf7166c435cc8fec8cbc3/image_27ebc41d-0192-4cfa-913d-7cb1f8bcca03.jpg')"
1886                  role="img"
1887                  aria-label="ABS Filament 1.75mm, 1Kg Roll - Pink">
1888                </div>
1889
1890              <div class="absolute top-2.5 left-2.5">
1891                <span class="inline-flex items-center gap-1 rounded-full bg-amber-500 px-2.5 py-1 text-xs font-bold text-white shadow-sm">
1892                  <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6Z" /></svg>
1893                  Deal
1894                </span>
1895              </div>
1896
1897                <div class="absolute top-2.5 right-2.5">
1898                  <span class="inline-flex items-center rounded-full bg-red-500 px-2.5 py-1 text-xs font-bold text-white shadow-sm">Sale</span>
1899                </div>
1900
1901              <div class="hidden sm:flex absolute inset-x-3 bottom-3 opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300">
1902                <span class="flex-1 inline-flex items-center justify-center rounded-lg bg-white/90 dark:bg-gray-900/90 backdrop-blur-sm px-4 py-2.5 text-sm font-semibold text-gray-900 dark:text-white shadow-lg ring-1 ring-gray-200/50 dark:ring-gray-700/50 hover:bg-white dark:hover:bg-gray-900 transition-colors">
1903                  View product
1904                </span>
1905              </div>
1906            </div>
1907
1908            <div class="mt-3 flex flex-col gap-1">
1909                <p class="text-[11px] font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider">Little Bird</p>
1910              <h3 class="text-sm font-medium text-gray-900 dark:text-white group-hover:text-amber-600 dark:group-hover:text-amber-400 transition-colors line-clamp-2 leading-snug">ABS Filament 1.75mm, 1Kg Roll - Pink</h3>
1911              <div class="flex items-center gap-2 mt-0.5">
1912                  <span class="text-sm font-bold text-red-600 dark:text-red-400">$9.00</span>
1913                  <span class="text-xs text-gray-400 line-through">$59.00</span>
1914              </div>
1915            </div>
1916</a>          <a class="group relative flex flex-col" href="/products/little-bird-45-in-1-sensor-kit-for-arduino">
1917            <div class="relative aspect-square overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800 ring-1 ring-gray-200/50 dark:ring-gray-700/50">
1918                <div class="h-full w-full bg-cover bg-center transition-transform duration-500 ease-out group-hover:scale-105"
1919                  style="background-image: url('/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkC3MpJIghwdXIGOwBUSSIMYmxvYl9pZAY7AEY=--c141342e06c846491bfe9c84befb6dcc32fdd144/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQKQAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--7ac1464f840979a0fbadf7166c435cc8fec8cbc3/image_bd1aed01-b09c-4608-a762-115adc6ce2a1.jpg')"
1920                  role="img"
1921                  aria-label="Little Bird 45 in 1 sensor kit for Arduino">
1922                </div>
1923
1924              <div class="absolute top-2.5 left-2.5">

1925                <span class="inline-flex items-center gap-1 rounded-full bg-amber-500 px-2.5 py-1 text-xs font-bold text-white shadow-sm">
1926                  <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6Z" /></svg>
1927                  Deal
1928                </span>
1929              </div>
1930
1931                <div class="absolute top-2.5 right-2.5">
1932                  <span class="inline-flex items-center rounded-full bg-red-500 px-2.5 py-1 text-xs font-bold text-white shadow-sm">Sale</span>
1933                </div>
1934
1935              <div class="hidden sm:flex absolute inset-x-3 bottom-3 opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300">
1936                <span class="flex-1 inline-flex items-center justify-center rounded-lg bg-white/90 dark:bg-gray-900/90 backdrop-blur-sm px-4 py-2.5 text-sm font-semibold text-gray-900 dark:text-white shadow-lg ring-1 ring-gray-200/50 dark:ring-gray-700/50 hover:bg-white dark:hover:bg-gray-900 transition-colors">
1937                  View product
1938                </span>
1939              </div>
1940            </div>
1941
1942            <div class="mt-3 flex flex-col gap-1">
1943                <p class="text-[11px] font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider">Little Bird</p>
1944              <h3 class="text-sm font-medium text-gray-900 dark:text-white group-hover:text-amber-600 dark:group-hover:text-amber-400 transition-colors line-clamp-2 leading-snug">Little Bird 45 in 1 sensor kit for Arduino</h3>
1945              <div class="flex items-center gap-2 mt-0.5">
1946                  <span class="text-sm font-bold text-red-600 dark:text-red-400">$55.00</span>
1947                  <span class="text-xs text-gray-400 line-through">$92.00</span>
1948              </div>
1949            </div>
1950</a>          <a class="group relative flex flex-col" href="/products/7-segment-display-led-blue-1">
1951            <div class="relative aspect-square overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800 ring-1 ring-gray-200/50 dark:ring-gray-700/50">
1952                <div class="h-full w-full bg-cover bg-center transition-transform duration-500 ease-out group-hover:scale-105"
1953                  style="background-image: url('/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkDTWIDSSIIcHVyBjsAVEkiDGJsb2JfaWQGOwBG--72666be9e27c9929f10c5f787c37cd7d4d0090b9/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQKQAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--7ac1464f840979a0fbadf7166c435cc8fec8cbc3/image.png')"
1954                  role="img"
1955                  aria-label="7-Segment Display - LED Blue">
1956                </div>
1957
1958              <div class="absolute top-2.5 left-2.5">
1959                <span class="inline-flex items-center gap-1 rounded-full bg-amber-500 px-2.5 py-1 text-xs font-bold text-white shadow-sm">
1960                  <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6Z" /></svg>
1961                  Deal
1962                </span>
1963              </div>
1964
1965
1966              <div class="hidden sm:flex absolute inset-x-3 bottom-3 opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300">
1967                <span class="flex-1 inline-flex items-center justify-center rounded-lg bg-white/90 dark:bg-gray-900/90 backdrop-blur-sm px-4 py-2.5 text-sm font-semibold text-gray-900 dark:text-white shadow-lg ring-1 ring-gray-200/50 dark:ring-gray-700/50 hover:bg-white dark:hover:bg-gray-900 transition-colors">
1968                  View product
1969                </span>
1970              </div>
1971            </div>
1972
1973            <div class="mt-3 flex flex-col gap-1">
1974              <h3 class="text-sm font-medium text-gray-900 dark:text-white group-hover:text-amber-600 dar

1974k:group-hover:text-amber-400 transition-colors line-clamp-2 leading-snug">7-Segment Display - LED Blue</h3>
1975              <div class="flex items-center gap-2 mt-0.5">
1976                  <span class="text-sm font-semibold text-gray-900 dark:text-white">$1.00</span>
1977              </div>
1978            </div>
1979</a>          <a class="group relative flex flex-col" href="/products/diy-transparent-mini-amplifier-speaker-kit">
1980            <div class="relative aspect-square overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800 ring-1 ring-gray-200/50 dark:ring-gray-700/50">
1981                <div class="h-full w-full bg-cover bg-center transition-transform duration-500 ease-out group-hover:scale-105"
1982                  style="background-image: url('/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkC5GtJIghwdXIGOwBUSSIMYmxvYl9pZAY7AEY=--51c1708bf24d78d3a60b8b346fb7ab243085f57c/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQKQAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--7ac1464f840979a0fbadf7166c435cc8fec8cbc3/image_485430e2-1733-4bcf-ba64-b10634326720.jpg')"
1983                  role="img"
1984                  aria-label="DIY Transparent Mini Amplifier Speaker Kit">
1985                </div>
1986
1987              <div class="absolute top-2.5 left-2.5">
1988                <span class="inline-flex items-center gap-1 rounded-full bg-amber-500 px-2.5 py-1 text-xs font-bold text-white shadow-sm">
1989                  <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6Z" /></svg>
1990                  Deal
1991                </span>
1992              </div>
1993
1994                <div class="absolute top-2.5 right-2.5">
1995                  <span class="inline-flex items-center rounded-full bg-red-500 px-2.5 py-1 text-xs font-bold text-white shadow-sm">Sale</span>
1996                </div>
1997
1998              <div class="hidden sm:flex absolute inset-x-3 bottom-3 opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300">
1999                <span class="flex-1 inline-flex items-center justify-center rounded-lg bg-white/90 dark:bg-gray-900/90 backdrop-blur-sm px-4 py-2.5 text-sm font-semibold text-gray-900 dark:text-white shadow-lg ring-1 ring-gray-200/50 dark:ring-gray-700/50 hover:bg-white dark:hover:bg-gray-900 transition-colors">
2000                  View product
2001                </span>
2002              </div>
2003            </div>
2004
2005            <div class="mt-3 flex flex-col gap-1">
2006                <p class="text-[11px] font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider">Little Bird</p>
2007              <h3 class="text-sm font-medium text-gray-900 dark:text-white group-hover:text-amber-600 dark:group-hover:text-amber-400 transition-colors line-clamp-2 leading-snug">DIY Transparent Mini Amplifier Speaker Kit</h3>
2008              <div class="flex items-center gap-2 mt-0.5">
2009                  <span class="text-sm font-bold text-red-600 dark:text-red-400">$14.95</span>
2010                  <span class="text-xs text-gray-400 line-through">$20.55</span>
2011              </div>
2012            </div>
2013</a>          <a class="group relative flex flex-col" href="/products/usb-rechargeable-led-table-light">
2014            <div class="relative aspect-square overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800 ring-1 ring-gray-200/50 dark:ring-gray-700/50">
2015                <div class="h-full w-full bg-cover bg-center transition-transform duration-500 ease-out group-hover:scale-105"
2016                  style="background-image: url('/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkC2CdJIghwdXIGOwBUSSIMYmxvYl9pZAY7AEY=--7cfcd0fa00b5bf197bd00a7b95f00b5e8051c840/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQKQAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--7ac1464f840979a0fbadf7166c435cc8fec8cbc3/image_7172fefa-52e9-47af-a859-ba2e48626005.png')"
2017                  role="img"
2018                  aria-label="USB Rechargeable LED table light">
2019                </div>
2020
2021              <div class="absolute top-2.5 left-2.5">

2022                <span class="inline-flex items-center gap-1 rounded-full bg-amber-500 px-2.5 py-1 text-xs font-bold text-white shadow-sm">
2023                  <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6Z" /></svg>
2024                  Deal
2025                </span>
2026              </div>
2027
2028                <div class="absolute top-2.5 right-2.5">
2029                  <span class="inline-flex items-center rounded-full bg-red-500 px-2.5 py-1 text-xs font-bold text-white shadow-sm">Sale</span>
2030                </div>
2031
2032              <div class="hidden sm:flex absolute inset-x-3 bottom-3 opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300">
2033                <span class="flex-1 inline-flex items-center justify-center rounded-lg bg-white/90 dark:bg-gray-900/90 backdrop-blur-sm px-4 py-2.5 text-sm font-semibold text-gray-900 dark:text-white shadow-lg ring-1 ring-gray-200/50 dark:ring-gray-700/50 hover:bg-white dark:hover:bg-gray-900 transition-colors">
2034                  View product
2035                </span>
2036              </div>
2037            </div>
2038
2039            <div class="mt-3 flex flex-col gap-1">
2040                <p class="text-[11px] font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider">Little Bird</p>
2041              <h3 class="text-sm font-medium text-gray-900 dark:text-white group-hover:text-amber-600 dark:group-hover:text-amber-400 transition-colors line-clamp-2 leading-snug">USB Rechargeable LED table light</h3>
2042              <div class="flex items-center gap-2 mt-0.5">
2043                  <span class="text-sm font-bold text-red-600 dark:text-red-400">$12.00</span>
2044                  <span class="text-xs text-gray-400 line-through">$29.55</span>
2045              </div>
2046            </div>
2047</a>          <a class="group relative flex flex-col" href="/products/clear-raspberry-pi-zero-case-with-gpio-space">
2048            <div class="relative aspect-square overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800 ring-1 ring-gray-200/50 dark:ring-gray-700/50">
2049                <div class="h-full w-full bg-cover bg-center transition-transform duration-500 ease-out group-hover:scale-105"
2050                  style="background-image: url('/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkCp2lJIghwdXIGOwBUSSIMYmxvYl9pZAY7AEY=--732f2a645764db49013b099185f85fc3080986fe/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQKQAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--7ac1464f840979a0fbadf7166c435cc8fec8cbc3/image_e0df4aef-f708-4f97-b6e9-d4dfcd8cfec3.png')"
2051                  role="img"
2052                  aria-label="Clear Raspberry Pi Zero case with GPIO space">
2053                </div>
2054
2055              <div class="absolute top-2.5 left-2.5">
2056                <span class="inline-flex items-center gap-1 rounded-full bg-amber-500 px-2.5 py-1 text-xs font-bold text-white shadow-sm">
2057                  <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6Z" /></svg>
2058                  Deal
2059                </span>
2060              </div>
2061
2062                <div class="absolute top-2.5 right-2.5">
2063                  <span class="inline-flex items-center rounded-full bg-red-500 px-2.5 py-1 text-xs font-bold text-white shadow-sm">Sale</span>
2064                </div>
2065
2066              <div class="hidden sm:flex absolute inset-x-3 bottom-3 opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300">

2067                <span class="flex-1 inline-flex items-center justify-center rounded-lg bg-white/90 dark:bg-gray-900/90 backdrop-blur-sm px-4 py-2.5 text-sm font-semibold text-gray-900 dark:text-white shadow-lg ring-1 ring-gray-200/50 dark:ring-gray-700/50 hover:bg-white dark:hover:bg-gray-900 transition-colors">
2068                  View product
2069                </span>
2070              </div>
2071            </div>
2072
2073            <div class="mt-3 flex flex-col gap-1">
2074                <p class="text-[11px] font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider">Little Bird</p>
2075              <h3 class="text-sm font-medium text-gray-900 dark:text-white group-hover:text-amber-600 dark:group-hover:text-amber-400 transition-colors line-clamp-2 leading-snug">Clear Raspberry Pi Zero case with GPIO space</h3>
2076              <div class="flex items-center gap-2 mt-0.5">
2077                  <span class="text-sm font-bold text-red-600 dark:text-red-400">$3.65</span>
2078                  <span class="text-xs text-gray-400 line-through">$9.00</span>
2079              </div>
2080            </div>
2081</a>          <a class="group relative flex flex-col" href="/products/makedo-mini-tool">
2082            <div class="relative aspect-square overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800 ring-1 ring-gray-200/50 dark:ring-gray-700/50">
2083                <div class="h-full w-full bg-cover bg-center transition-transform duration-500 ease-out group-hover:scale-105"
2084                  style="background-image: url('/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkCv3BJIghwdXIGOwBUSSIMYmxvYl9pZAY7AEY=--a990d0cd3a6476dfdc539b1e762deaa37e36b298/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQKQAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--7ac1464f840979a0fbadf7166c435cc8fec8cbc3/image_cb17afec-aa16-4d76-9d94-43bafe8e0cab.jpg')"
2085                  role="img"
2086                  aria-label="Makedo MINI-TOOL">
2087                </div>
2088
2089              <div class="absolute top-2.5 left-2.5">
2090                <span class="inline-flex items-center gap-1 rounded-full bg-amber-500 px-2.5 py-1 text-xs font-bold text-white shadow-sm">
2091                  <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6Z" /></svg>
2092                  Deal
2093                </span>
2094              </div>
2095
2096                <div class="absolute top-2.5 right-2.5">
2097                  <span class="inline-flex items-center rounded-full bg-red-500 px-2.5 py-1 text-xs font-bold text-white shadow-sm">Sale</span>
2098                </div>
2099
2100              <div class="hidden sm:flex absolute inset-x-3 bottom-3 opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300">
2101                <span class="flex-1 inline-flex items-center justify-center rounded-lg bg-white/90 dark:bg-gray-900/90 backdrop-blur-sm px-4 py-2.5 text-sm font-semibold text-gray-900 dark:text-white shadow-lg ring-1 ring-gray-200/50 dark:ring-gray-700/50 hover:bg-white dark:hover:bg-gray-900 transition-colors">
2102                  View product
2103                </span>
2104              </div>
2105            </div>
2106
2107            <div class="mt-3 flex flex-col gap-1">
2108                <p class="text-[11px] font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider">Makedo</p>
2109              <h3 class="text-sm font-medium text-gray-900 dark:text-white group-hover:text-amber-600 dark:group-hover:text-amber-400 transition-colors line-clamp-2 leading-snug">Makedo MINI-TOOL</h3>
2110              <div class="flex items-center gap-2 mt-0.5">
2111                  <span class="text-sm font-bold text-red-600 dark:text-red-400">$7.00</span>

2112                  <span class="text-xs text-gray-400 line-through">$14.85</span>
2113              </div>
2114            </div>
2115</a>      </div>
2116
2117      <div class="mt-10 text-center">
2118        <a class="inline-flex items-center gap-2 rounded-xl bg-amber-500 px-6 py-3 text-sm font-semibold text-white shadow-sm hover:bg-amber-400 active:scale-[0.98] transition-all" href="/collections/special-deals">
2119          View All Deals
2120          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" /></svg>
2121</a>      </div>
2122    </div>
2123  </section>
2124
2125  <section class="bg-gradient-to-b from-red-50 to-white dark:from-red-950/20 dark:to-gray-950 py-16 sm:py-20">
2126    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
2127      <div class="flex items-end justify-between mb-8 sm:mb-10">
2128        <div>
2129          <div class="inline-flex items-center gap-2 rounded-full bg-red-100 dark:bg-red-900/40 px-3 py-1 text-xs font-bold text-red-700 dark:text-red-300 uppercase tracking-wider mb-3">
2130            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6Z" /></svg>
2131            On Sale
2132          </div>
2133          <h2 class="text-2xl sm:text-3xl font-bold tracking-tight text-gray-900 dark:text-white">Special Offers</h2>
2134          <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Save on these items while stocks last</p>
2135        </div>
2136      </div>
2137
2138      <div class="grid grid-cols-2 md:grid-cols-4 gap-4 sm:gap-6">
2139          <a class="group relative flex flex-col" href="/products/elecfreaks-micro-bit-nezha-pro-ai-mechanical-power-kit">
2140            <div class="relative aspect-square overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800 ring-1 ring-gray-200/50 dark:ring-gray-700/50">
2141                <div class="h-full w-full bg-cover bg-center transition-transform duration-500 ease-out group-hover:scale-105"
2142                  style="background-image: url('/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkB%2F0kiCHB1cgY7AFRJIgxibG9iX2lkBjsARg==--11bbdf161e1bf15e6de5b9a5e2eb9a1db303454e/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQKQAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--7ac1464f840979a0fbadf7166c435cc8fec8cbc3/image_6b75cef7-bb2e-4152-887e-c6a909a1db59.png')"
2143                  role="img"
2144                  aria-label="ELECFREAKS micro:bit Nezha Pro AI Mechanical Power Kit">
2145                </div>
2146
2147              <div class="absolute top-2.5 left-2.5">
2148                <span class="inline-flex items-center rounded-full bg-red-500 px-2.5 py-1 text-xs font-bold text-white shadow-sm">Sale</span>
2149              </div>
2150            </div>
2151
2152            <div class="mt-3 flex flex-col gap-1">
2153              <h3 class="text-sm font-medium text-gray-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors line-clamp-2 leading-snug">ELECFREAKS micro:bit Nezha Pro AI Mechanical Power Kit</h3>
2154              <div class="flex items-center gap-2 mt-0.5">
2155                <span class="text-sm font-bold text-red-600 dark:text-red-400">$290.45</span>
2156                  <span class="text-xs text-gray-400 line-through">$359.99</span>
2157              </div>
2158            </div>
2159</a>          <a class="group relative flex flex-col" href="/products/little-bird-quadcopter-diy-drone-kit">
2160            <div class="relative aspect-square overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800 ring-1 ring-gray-200/50 dark:ring-gray-700/50">
2161                <div class="h-full w-full bg-cover bg-center transition-transform duration-500 ease-out group-hover:scale-105"
2162                  style="background-image: url('/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkCBAJJIghwdXIGOwBUSSIMYmxvYl9pZAY7AEY=--015097a5b2114b56ff5daccce440d1446e886481/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQKQAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--7ac1464f840979a0fbadf7166c435cc8fec8cbc3/image_3e0fd341-9307-4d3a-afb3-4dac2b688c8c.jpg')"
2163                  role="img"
2164                  aria-label="Little Bird Quadcopter - DIY drone kit">
2165                </div>
2166
2167              <div class="absolute top-2.5 left-2.5">

2168                <span class="inline-flex items-center rounded-full bg-red-500 px-2.5 py-1 text-xs font-bold text-white shadow-sm">Sale</span>
2169              </div>
2170            </div>
2171
2172            <div class="mt-3 flex flex-col gap-1">
2173              <h3 class="text-sm font-medium text-gray-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors line-clamp-2 leading-snug">Little Bird Quadcopter - DIY drone kit</h3>
2174              <div class="flex items-center gap-2 mt-0.5">
2175                <span class="text-sm font-bold text-red-600 dark:text-red-400">$66.95</span>
2176                  <span class="text-xs text-gray-400 line-through">$97.00</span>
2177              </div>
2178            </div>
2179</a>          <a class="group relative flex flex-col" href="/products/hakko-fx-888dx-soldering-station-silver-90w-genuine">
2180            <div class="relative aspect-square overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800 ring-1 ring-gray-200/50 dark:ring-gray-700/50">
2181                <div class="h-full w-full bg-cover bg-center transition-transform duration-500 ease-out group-hover:scale-105"
2182                  style="background-image: url('/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkCZgNJIghwdXIGOwBUSSIMYmxvYl9pZAY7AEY=--2500d201c50abbd84fbeb93a915f64e1eb04c94c/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQKQAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--7ac1464f840979a0fbadf7166c435cc8fec8cbc3/image_e66c79d0-4bd4-4b0d-bee3-3446ef289825.webp')"
2183                  role="img"
2184                  aria-label="Hakko FX-888DX Soldering Station â Silver, 90W (Genuine)">
2185                </div>
2186
2187              <div class="absolute top-2.5 left-2.5">
2188                <span class="inline-flex items-center rounded-full bg-red-500 px-2.5 py-1 text-xs font-bold text-white shadow-sm">Sale</span>
2189              </div>
2190            </div>
2191
2192            <div class="mt-3 flex flex-col gap-1">
2193              <h3 class="text-sm font-medium text-gray-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors line-clamp-2 leading-snug">Hakko FX-888DX Soldering Station â Silver, 90W (Genuine)</h3>
2194              <div class="flex items-center gap-2 mt-0.5">
2195                <span class="text-sm font-bold text-red-600 dark:text-red-400">$307.95</span>
2196                  <span class="text-xs text-gray-400 line-through">$339.00</span>
2197              </div>
2198            </div>
2199</a>          <a class="group relative flex flex-col" href="/products/at-h20-flux-gel-syringe-20g">
2200            <div class="relative aspect-square overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800 ring-1 ring-gray-200/50 dark:ring-gray-700/50">
2201                <div class="h-full w-full bg-cover bg-center transition-transform duration-500 ease-out group-hover:scale-105"
2202                  style="background-image: url('/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkCbANJIghwdXIGOwBUSSIMYmxvYl9pZAY7AEY=--9ccd69935fbf67564a547f445780c7ad61f592db/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsIOgtmb3JtYXQ6CXdlYnA6E3Jlc2l6ZV90b19maWxsWwdpApABaQKQAToKc2F2ZXJ7BzoMcXVhbGl0eWlXOgpzdHJpcFRJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--7ac1464f840979a0fbadf7166c435cc8fec8cbc3/image_197a4685-befc-46ea-8b08-aa11c836f6a9.webp')"
2203                  role="img"
2204                  aria-label="AT-H20 Flux Gel Syringe â 20g">
2205                </div>
2206
2207              <div class="absolute top-2.5 left-2.5">
2208                <span class="inline-flex items-center rounded-full bg-red-500 px-2.5 py-1 text-xs font-bold text-white shadow-sm">Sale</span>
2209              </div>
2210            </div>
2211
2212            <div class="mt-3 flex flex-col gap-1">
2213              <h3 class="text-sm font-medium text-gray-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors line-clamp-2 leading-snug">AT-H20 Flux Gel Syringe â 20g</h3>
2214              <div class="flex items-center gap-2 mt-0.5">

2215                <span class="text-sm font-bold text-red-600 dark:text-red-400">$16.50</span>
2216                  <span class="text-xs text-gray-400 line-through">$19.95</span>
2217              </div>
2218            </div>
2219</a>      </div>
2220    </div>
2221  </section>
2222
2223<section class="bg-gray-50 dark:bg-gray-900/50 py-16 sm:py-20">
2224  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
2225    <div class="rounded-2xl bg-gradient-to-br from-brand-600 to-brand-800 dark:from-brand-700 dark:to-brand-900 overflow-hidden relative">
2226      <div class="absolute inset-0 opacity-10">
2227        <svg class="absolute inset-0 h-full w-full" xmlns="http://www.w3.org/2000/svg">
2228          <defs>
2229            <pattern id="edu-dots" width="20" height="20" patternUnits="userSpaceOnUse">
2230              <circle cx="2" cy="2" r="1" fill="white" />
2231            </pattern>
2232          </defs>
2233          <rect width="100%" height="100%" fill="url(#edu-dots)" />
2234        </svg>
2235      </div>
2236
2237      <div class="relative flex flex-col lg:flex-row items-center gap-8 p-8 sm:p-12 lg:p-16">
2238        <div class="flex-1">
2239          <div class="inline-flex items-center gap-2 rounded-full bg-white/10 px-3 py-1 text-xs font-semibold text-brand-100 uppercase tracking-wider mb-4">
2240            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" /></svg>
2241            For Educators
2242          </div>
2243          <h2 class="text-2xl sm:text-3xl font-bold text-white">Learn About Placing School Orders</h2>
2244          <p class="mt-3 text-base sm:text-lg text-brand-100 leading-relaxed max-w-xl">
2245            Special pricing, Net 30 payment terms, and dedicated support for educational institutions. Order kits for your classroom with purchase orders.
2246          </p>
2247          <div class="mt-6 flex flex-col sm:flex-row gap-3">
2248            <a class="inline-flex items-center justify-center gap-2 rounded-xl bg-white px-6 py-3 text-sm font-semibold text-brand-700 shadow-lg hover:bg-brand-50 active:scale-[0.98] transition-all" href="/education">
2249              See education pricing &amp; PO terms
2250              <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" /></svg>
2251</a>            <a href="mailto:[email protected]" class="inline-flex items-center justify-center gap-2 rounded-xl border-2 border-white/30 px-6 py-3 text-sm font-semibold text-white hover:bg-white/10 transition-all">
2252              <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" /></svg>
2253              Contact Us
2254            </a>
2255          </div>
2256        </div>
2257        <div class="flex-shrink-0 hidden lg:block">
2258          <div class="grid grid-cols-2 gap-4">
2259            <div class="rounded-xl bg-white/10 backdrop-blur-sm p-6 text-center">
2260              <p class="text-3xl font-bold text-white">Net 30</p>
2261              <p class="mt-1 text-sm text-brand-200">Payment Terms</p>
2262            </div>
2263            <div class="rounded-xl bg-white/10 backdrop-blur-sm p-6 text-center">
2264              <p class="text-3xl font-bold text-white">PO</p>
2265              <p class="mt-1 text-sm text-brand-200">Orders Accepted</p>
2266            </div>
2267          </div>
2268        </div>
2269      </div>
2270    </div>
2271  </div>
2272</section>
2273
2274<section class="bg-white dark:bg-gray-950 py-16 sm:py-20">

2275  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
2276    <div class="rounded-2xl bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 p-8 sm:p-12">
2277      <div class="flex flex-col lg:flex-row items-center gap-8">
2278        <div class="flex-1 text-center lg:text-left">
2279          <h2 class="text-2xl sm:text-3xl font-bold tracking-tight text-gray-900 dark:text-white">Stay in the Loop</h2>
2280          <p class="mt-2 text-base text-gray-500 dark:text-gray-400">Subscribe for new product updates, special offers, and maker project ideas.</p>
2281        </div>
2282        <div class="w-full lg:w-auto lg:flex-shrink-0">
2283          <form action="#" method="post" class="flex flex-col sm:flex-row gap-3 w-full lg:w-auto">
2284            <input type="email" name="email" placeholder="Enter your email" required
2285              class="flex-1 min-w-0 lg:min-w-[280px] rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 px-4 py-3 text-sm text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500 transition-colors">
2286            <button type="submit" class="inline-flex items-center justify-center gap-2 rounded-xl bg-gold-500 px-6 py-3 text-sm font-semibold text-white shadow-sm hover:bg-gold-400 active:scale-[0.98] transition-all">
2287              <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" /></svg>
2288              Subscribe
2289            </button>
2290          </form>
2291          <p class="mt-2 text-xs text-gray-400 dark:text-gray-500 text-center sm:text-left">No spam, unsubscribe anytime.</p>
2292        </div>
2293      </div>
2294    </div>
2295  </div>
2296</section>
2297
2298<section class="relative overflow-hidden border-t border-gray-200 dark:border-gray-800 py-16 sm:py-20">
2299  <img src="/assets/bg/sections/cant-find-bg-31236a29.webp" class="absolute inset-0 w-full h-full object-cover" alt="" loading="lazy">
2300  <div class="absolute inset-0 bg-gray-50/80 dark:bg-gray-900/85"></div>
2301  <div class="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
2302    <div class="text-center max-w-2xl mx-auto">
2303      <h2 class="text-2xl sm:text-3xl font-bold tracking-tight text-gray-900 dark:text-white">Can't find what you're looking for?</h2>
2304      <p class="mt-3 text-base text-gray-500 dark:text-gray-400">
2305        Search our full catalog or get in touch and we'll help you find the right components.
2306      </p>
2307      <div class="mt-8 flex flex-col sm:flex-row items-center justify-center gap-3">
2308        <a class="inline-flex items-center gap-2 rounded-xl bg-gold-500 px-6 py-3 text-sm font-semibold text-white shadow-sm hover:bg-gold-400 transition-colors" href="/products?focus=search">
2309          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" /></svg>
2310          Search Products
2311</a>        <a href="tel:1300240817" class="inline-flex items-center gap-2 rounded-xl border-2 border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-6 py-3 text-sm font-semibold text-gray-900 dark:text-white hover:border-gray-300 dark:hover:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 transition-all">
2312          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" /></svg>
2313          Call 1300 240 817
2314        </a>
2315      </div>
2316    </div>
2317  </div>
2318</section>
2319
2320  </main>
2321
2322  <div class="bg-white dark:bg-gray-950">
2323    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-16 sm:py-20">
2324      <div class="rounded-2xl bg-gradient-to-br from-brand-50 to-blue-50 dark:from-brand-950/40 dark:to-blue-950/30 border border-brand-100 dark:border-brand-800/40 overflow-hidden">
2325        <div class="flex flex-col sm:flex-row items-center gap-6 sm:gap-8 p-6 sm:p-8">
2326          <div class="flex-shrink-0">
2327            <img class="h-24 w-24 sm:h-28 sm:w-28 rounded-full object-cover ring-4 ring-white dark:ring-gray-800 shadow-lg" alt="Maddy, co-founder of Little Bird" width="112" height="112" loading="lazy" decoding="async" src="/assets/maddy-founder-8171537a.webp" />
2328          </div>
2329          <div class="text-center sm:text-left flex-1">
2330            <h3 class="text-lg font-bold text-gray-900 dark:text-white">Need help? We're here for you!</h3>
2331            <p class="mt-1.5 text-sm text-gray-600 dark:text-gray-400 leading-relaxed">Hi, I'm Maddy. My team and I are ready to help with your order or any questions.</p>
2332            <div class="mt-3 flex flex-col sm:flex-row items-center sm:items-start gap-2.5">
2333              <a href="mailto:[email protected]" class="inline-flex items-center gap-2 rounded-lg border-2 border-transparent bg-brand-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-brand-500 transition-colors">
2334                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" /></svg>
2335                Email Us
2336              </a>
2337              <a href="tel:1300240817" class="inline-flex items-center gap-2 rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-4 py-2 text-sm font-semibold text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
2338                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" /></svg>
2339                1300 240 817
2340              </a>
2341              <a class="inline-flex items-center gap-2 rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-4 py-2 text-sm font-semibold text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors" href="/help">
2342                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" /></svg>
2343                Browse Help Articles
2344</a>            </div>
2345          </div>
2346        </div>
2347      </div>
2348    </div>
2349  </div>
2350
2351  <footer class="bg-brand-900 text-brand-200 mt-auto">
2352    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12 lg:py-16">
2353      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
2354
2355        <div class="sm:col-span-2 lg:col-span-1">
2356          <div class="flex items-center gap-2 mb-4">
2357              <img class="h-8 w-8 object-contain" alt="Little Bird" width="32" height="32" loading="lazy" decoding="async" src="/assets/white-bird-outline-c

235770ea79b.webp" />
2358              <span class="text-lg font-bold text-white">Little Bird</span>
2359          </div>
2360          <div class="space-y-3">
2361            <a href="tel:1300240817" class="flex items-center gap-2 text-sm text-brand-200 hover:text-white transition-colors">
2362              <svg class="h-4 w-4 text-brand-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" /></svg>
2363              <span class="font-semibold">1300 240 817</span>
2364            </a>
2365            <a href="mailto:[email protected]" class="flex items-center gap-2 text-sm text-brand-300 hover:text-white transition-colors">
2366              <svg class="h-4 w-4 text-brand-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" /></svg>
2367              <span>[email protected]</span>
2368            </a>
2369            <div class="flex items-start gap-2 text-sm text-brand-300">
2370              <svg class="h-4 w-4 text-brand-400 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" /></svg>
2371              <address class="not-italic leading-relaxed">
2372                Unit 13, 8-12 Leighton Place<br>
2373                Hornsby, NSW 2077<br>
2374                Australia
2375              </address>
2376            </div>
2377              <div class="flex items-start gap-2 rounded-lg border border-brand-700/60 bg-brand-800/50 px-3 py-2.5">
2378                <svg class="h-4 w-4 text-brand-400 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" /></svg>
2379                <p class="text-xs text-brand-300 leading-relaxed">
2380                  <span class="font-semibold text-brand-200">Online orders only.</span>
2381                  This address is our despatch warehouse â there's no shopfront, so we can't take
2382                  walk-ins, counter sales or order pickups. Everything we sell ships to you.
2383                  <a class="underline decoration-brand-500 underline-offset-2 hover:text-white transition-colors" href="/help/pickups-and-same-day-delivery">Why?</a>
2384                </p>
2385              </div>
2386          </div>
2387        </div>
2388
2389        <div>
2390          <h3 class="text-sm font-semibold text-white uppercase tracking-wider mb-4">Shop</h3>
2391          <ul class="space-y-3">
2392            <li><a class="text-sm text-brand-300 hover:text-white transition-colors" href="/collections">All Products</a></li>
2393            <li><a class="text-sm text-brand-300 hover:text-white transition-colors" href="/collections/digital-technologies">Digital Technologies</a></li>
2394            <li><a class="text-sm text-brand-300 hover:text-white transition-colors" href="/platforms/raspberry-pi-computers">Raspberry Pi</a></li>
2395            <li><a class="text-sm text-brand-300 hover:text-white transition-colors" href="/platforms/arduino">Arduino</a></li>
2396            <li><a class="text-sm text-brand-300 hover:text-white transition-colors" href="/platforms/micro-bit">micro:bit</a></li>
2397            <li><a class="text-sm text-brand-300 hover:text-white transition-colors" href="/platforms/esp32">ESP32 &amp; IoT</a></li>
2398            <li><a class="text-sm text-brand-300 hover:text-white transition-colors" href="/projects">Project Build Lists</a></li>
2399            <li><a class="text-sm text-brand-300 hover:text-white transition-colors" href="/guides">Buying Guides</a></li>
2400            <li><a class="text-sm text-brand-300 hover:text-white transition-colors" href="/open-source">Open Source</a></li>
2401            <li><a class="text-sm text-brand-300 hover:text-white transition-colors" href="/pages/crack-the-code">Crack the Code</a></li>
2402            <li><a class="text-sm text-brand-300 hover:text-white transition-colors" href="/collections">Collections</a></li>
2403            <li><a class="text-sm text-brand-300 hover:text-white transition-colors" href="/blogs/news">News</a></li>
2404          </ul>
2405        </div>
2406
2407        <div>
2408          <h3 class="text-sm font-semibold text-white uppercase tracking-wider mb-4">Help</h3>
2409          <ul class="space-y-3">
2410            <li><a class="text-sm text-brand-300 hover:text-white transition-colors" href="/help">Help Center</a></li>
2411              <li><a class="text-sm text-brand-300 hover:text-white transition-colors" href="/lead-times">Shipping Lead Times</a></li>
2412            <li><a href="tel:1300240817" class="text-sm text-brand-300 hover:text-white transition-colors">Call 1300 240 817</a></li>
2413            <li><a href="mailto:[email protected]" class="text-sm text-brand-300 hover:text-white transition-colors">Email Support</a></li>
2414              <li><a class="text-sm text-brand-300 hover:text-white transition-colors" href="/education">Education &amp; Government</a></li>
2415              <li><a class="text-sm text-brand-300 hover:text-white transition-colors" href="/education#ordering-guide">POs &amp; Quotes</a></li>
2416            <li><a class="text-sm text-brand-300 hover:text-white transition-colors" href="/purchase-orders/register">

2416Order by Purchase Order</a></li>
2417            <li><a class="text-sm text-brand-300 hover:text-white transition-colors" href="/details">Business Details</a></li>
2418            <li><a class="text-sm text-brand-300 hover:text-white transition-colors" href="/brand">Brand Assets</a></li>
2419                <li><a class="text-sm text-brand-300 hover:text-white transition-colors" href="/pages/faq">FAQ</a></li>
2420                <li><a class="text-sm text-brand-300 hover:text-white transition-colors" href="/pages/shipping-policy">Shipping Policy</a></li>
2421                <li><a class="text-sm text-brand-300 hover:text-white transition-colors" href="/pages/returns-exchanges">Returns &amp; Exchanges</a></li>
2422          </ul>
2423        </div>
2424
2425        <div>
2426          <h3 class="text-sm font-semibold text-white uppercase tracking-wider mb-4">Open Web</h3>
2427          <ul class="space-y-3 mb-6">
2428            <li><a class="text-sm text-brand-300 hover:text-white transition-colors" href="/open-web">Open Web Initiative</a></li>
2429            <li><a href="/.well-known/webfinger?resource=acct:[email protected]" class="text-sm text-brand-300 hover:text-white transition-colors">ActivityPub / Fediverse</a></li>
2430            <li><a class="text-sm text-brand-300 hover:text-white transition-colors" href="/products.atom">Atom Feed</a></li>
2431            <li><a class="text-sm text-brand-300 hover:text-white transition-colors" href="/public-api/v1/openapi.json">Public API</a></li>
2432              <li><a href="/llms.txt" class="text-sm text-brand-300 hover:text-white transition-colors">llms.txt</a></li>
2433            <li><a href="/humans.txt" class="text-sm text-brand-300 hover:text-white transition-colors">humans.txt</a></li>
2434          </ul>
2435
2436            <h3 class="text-sm font-semibold text-white uppercase tracking-wider mb-4">Follow Us</h3>
2437            <div class="flex items-center gap-4">
2438                <a href="https://x.com/lbhq" target="_blank" rel="noopener noreferrer" class="text-brand-300 hover:text-white transition-colors" aria-label="X (Twitter)">
2439                  <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" /></svg>
2440                </a>
2441            </div>
2442          <div class="mt-6">
2443            <p class="text-xs text-brand-400">Subscribe to our newsletter for updates and exclusive offers.</p>
2444          </div>
2445        </div>
2446
2447      </div>
2448    </div>
2449
2450    <div class="border-t border-brand-800">
2451      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-6">
2452        <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
2453          <div class="text-xs text-brand-300/70 text-center sm:text-left space-y-1">
2454            <p>&copy; 2026 Little Bird Electronics Pty Ltd. All rights reserved.</p>
2455            <p>ABN: 15 634 521 449 &middot; All prices are in AUD and include GST.</p>
2456            <p>Made with &hearts; from Sydney, Australia</p>
2457          </div>
2458          <div class="flex items-center gap-3">
2459            <div class="flex items-center gap-2">
2460              
2461<svg class="h-8 w-auto rounded shadow-sm" viewBox="0 0 780 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Visa">
2462  <rect width="780" height="500" rx="40" fill="#1A1F71" />
2463  <path d="M293.2 348.73l33.36-195.76h53.34l-33.38 195.76H293.2zm246.11-191.54c-10.57-3.98-27.17-8.22-47.89-8.22-52.72 0-89.87 26.6-90.16 64.63-.27 28.14 26.48 43.83 46.69 53.18 20.74 9.57 27.7 15.71 27.61 24.27-.14 13.11-16.56 19.1-31.89 19.1-21.32 0-32.66-2.96-50.16-10.27l-6.88-3.11-7.49 43.87c12.46 5.46 35.5 10.2 59.42 10.45 56.06 0 92.44-26.24 92.82-66.88.19-22.28-14-39.22-44.73-53.19-18.63-9.06-30.05-15.1-29.95-24.27 0-8.14 9.66-16.83 30.54-16.83 17.43-.28 30.06 3.53 39.89 7.49l4.78 2.26 7.24-42.48zm139.0-4.22h-41.23c-12.77 0-22.33 3.49-27.94 16.22l-79.25 179.54h56.02s9.16-24.13 11.23-29.42l68.33.08c1.6 6.86 6.5 29.34 6.5 29.34h49.5l-43.16-195.76zm-65.84 126.41c4.4-11.3 21.26-54.81 21.26-54.81-.31.52 4.38-11.33 7.07-18.69l3.6 16.88s10.22 46.73 12.36 56.62h-44.29zM248.75 152.97l-52.24 133.6-5.58-27.15c-9.72-31.27-39.99-65.15-73.87-82.12l47.79 171.35 56.42-.06 83.94-195.62h-56.46z" fill="#fff" />
2464  <path d="M146.92 152.97H60.88l-.68 4.07c66.94 16.2 111.18 55.37 129.52 102.4l-18.68-89.88c-3.23-12.36-12.6-16.08-24.12-16.59z" fill="#F9A533" />
2465</svg>
2466
2467<svg class="h-8 w-auto rounded shadow-sm" viewBox="0 0 780 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Mastercard">
2468  <rect width="780" height="500" rx="40" fill="#fff" stroke="#D9D9D9" stroke-width="3" />
2469  <circle cx="310" cy="250" r="140" fill="#EB001B" />
2470  <circle cx="470" cy="250" r="140" fill="#F79E1B" />
2471  <path fill-rule="evenodd" clip-rule="evenodd" d="M390 369.27A139.24 139.24 0 00450 250a139.24 139.24 0 00-60-119.27A139.24 139.24 0 00330 250a139.24 139.24 0 0060 119.27z" fill="#FF5F00" />
2472</svg>
2473
2474<svg class="h-8 w-auto rounded shadow-sm" viewBox="0 0 780 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="American Express">
2475  <rect width="780" height="500" rx="40" fill="#006FCF" />
2476  <rect x="30" y="30" width="720" height="440" rx="20" fill="none" stroke="#fff" stroke-width="16" stroke-opacity="0.35" />
2477  <text x="390" y="298" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="150" font-weight="700" letter-spacing="6" fill="#fff">AMEX</text>
2478</svg>
2479
2480  <svg class="h-8 w-auto rounded shadow-sm" viewBox="0 0 780 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="PayPal">
2481    <rect width="780" height="500" rx="40" fill="#fff" stroke="#D9D9D9" stroke-width="3" />
2482    <text x="390" y="298" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="140" font-weight="700"><tspan fill="#253B80">Pay</tspan><tspan fill="#179BD7">Pal</tspan></text>
2483  </svg>
2484
2485  <svg class="h-8 w-auto rounded shadow-sm" viewBox="0 0 1200 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Purchase Order">
2486    <rect width="1200" height="500" rx="40" fill="#4B92DB" />
2487    <text x="600" y="290" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="140" font-weight="700" fill="#fff">Purchase Order</text>
2488  </svg>
2489
2490            </div>
2491          </div>
2492        </div>
2493      </div>
2494    </div>
2495

2495<script type="application/ld+json">
2496    [{"@context":"https://schema.org","@type":["LocalBusiness","Store","ElectronicsStore"],"@id":"https://littlebirdelectronics.com.au/#organization","name":"Little Bird Electronics","legalName":"Little Bird Electronics Pty Ltd","image":"https://littlebirdelectronics.com.au/assets/little-bird-logo-e4ef2bca.svg","logo":"https://littlebirdelectronics.com.au/assets/little-bird-logo-e4ef2bca.svg","telephone":"+61-1300-240-817","email":"[email protected]","url":"https://littlebirdelectronics.com.au/","sameAs":["https://x.com/lbhq"],"address":{"@type":"PostalAddress","streetAddress":"Unit 13, 8-12 Leighton Place","addressLocality":"Hornsby","addressRegion":"NSW","postalCode":"2077","addressCountry":"AU"},"priceRange":"$$","currenciesAccepted":"AUD","paymentAccepted":"Credit Card, Purchase Order, Bank Transfer","areaServed":{"@type":"Country","name":"Australia"},"taxID":"15 634 521 449"},{"@context":"https://schema.org","@type":"WebSite","@id":"https://littlebirdelectronics.com.au/#website","name":"Little Bird Electronics","url":"https://littlebirdelectronics.com.au/","potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://littlebirdelectronics.com.au/products?q={search_term_string}"},"query-input":"required name=search_term_string"}}]
2497    </script>

2497
2498  </footer>
2499
2500  <div id="cart_prompt"></div>
2501
2502
2503  <div data-controller="ecommerce--cli-mode">
2504    <button
2505      data-action="click->ecommerce--cli-mode#toggle"
2506      class="fixed bottom-4 right-4 z-40 w-8 h-8 flex items-center justify-center rounded-full text-gray-400/20 hover:text-cyan-400 hover:bg-gray-900/80 hover:shadow-[0_0_15px_rgba(0,255,255,0.3)] transition-all duration-500 cursor-pointer select-none"
2507      title="Ï" aria-label="Toggle CLI mode"><span class="text-lg font-serif">Ï</span></button>
2508
2509    <div data-ecommerce--cli-mode-target="overlay" class="hidden fixed inset-0 z-50" id="cli-tui-overlay" aria-hidden="true">
2510      <style>
2511        #cli-tui-overlay{font-family:'JetBrains Mono','SF Mono','Fira Code',ui-monospace,monospace;font-size:13px;background:#0a0e12;color:#6ea8a8;}
2512        #cli-tui-overlay::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,255,213,0.012) 2px,rgba(0,255,213,0.012) 4px);}
2513        #cli-tui-overlay::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9998;background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,0.45) 100%);}
2514        #cli-tui-overlay *{box-sizing:border-box;}
2515        .tui-shell{display:flex;flex-direction:column;height:100vh;position:relative;z-index:1;}
2516        .tui-hdr{display:flex;justify-content:space-between;align-items:center;padding:6px 16px;border-bottom:1px solid #0f3b3b;background:rgba(0,255,213,0.02);flex-shrink:0;}
2517        .tui-logo{font-weight:900;font-size:14px;color:#00ffd5;letter-spacing:5px;text-shadow:0 0 15px rgba(0,255,213,0.4);}
2518        .tui-logo em{font-style:normal;color:#ff2d95;}
2519        .tui-hdr-r{display:flex;gap:20px;font-size:10px;color:#1a3a3a;letter-spacing:2px;text-transform:uppercase;}
2520        .tui-hdr-r .live{color:#00ffd5;animation:tui-pulse 2s infinite;}
2521        @keyframes tui-pulse{0%,100%{opacity:1}50%{opacity:.3}}
2522        .tui-tabs{display:flex;border-bottom:1px solid #0f3b3b;flex-shrink:0;font-size:11px;letter-spacing:1px;}
2523        .tui-tab{padding:5px 18px;color:#1a3a3a;cursor:pointer;border-right:1px solid #0f3b3b;position:relative;}
2524        .tui-tab.active{color:#00ffd5;background:rgba(0,255,213,0.04);}
2525        .tui-tab.active::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;background:#00ffd5;}
2526        .tui-tab .key{color:#ff2d95;font-weight:700;}
2527        .tui-main{flex:1;display:flex;overflow:hidden;}
2528        .tui-list{flex:1;overflow-y:auto;border-right:1px solid #0f3b3b;display:flex;flex-direction:column;}
2529        .tui-list::-webkit-scrollbar{width:3px;}.tui-list::-webkit-scrollbar-thumb{background:#0f3b3b;}
2530        .tui-list-hdr{display:flex;padding:6px 12px;font-size:10px;color:#1a3a3a;border-bottom:1px solid #0f3b3b;letter-spacing:1px;text-transform:uppercase;flex-shrink:0;position:sticky;top:0;background:#0a0e12;z-index:2;}
2531        .tui-sortable{cursor:pointer;transition:color .15s;}.tui-sortable:hover{color:#00ffd5;}
2532        .tui-col-idx{width:30px;}.tui-col-sku{width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.tui-col-name{flex:1;}.tui-col-local{width:50px;text-align:center;font-size:10px;}.tui-col-supplier{width:50px;text-align:center;font-size:10px;}.tui-col-price{width:90px;text-align:right;}.tui-col-stock{width:90px;text-align:left;}
2533        .tui-row{display:flex;padding:5px 12px;font-size:12px;border-bottom:1px solid rgba(15,59,59,0.3);cursor:pointer;transition:background .08s;flex-shrink:0;position:relative;}
2534        .tui-row:hover{background:rgba(0,255,213,0.02);}
2535        .tui-row.selected{background:rgba(0,255,213,0.06);color:#c0fff0;}
2536        .tui-row.selected::before{content:'â¸';position:absolute;left:3px;color:#00ffd5;text-shadow:0 0 8px #00ffd5;}
2537        .tui-row .tui-col-idx{color:#1a3a3a;font-size:10px;padding-top:1px;}
2538        .tui-row .tui-col-name{color:#c0fff0;}
2539        .tui-row .tui-col-price{color:#00ffd5;font-weight:700;text-align:right;}
2540        .tui-row .tui-col-stock{font-size:10px;text-transform:uppercase;letter-spacing:1px;}
2541        .tui-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:4px;vertical-align:middle;}
2542        .tui-dot.in{background:#00ffaa;box-shadow:0 0 5px #00ffaa;}.tui-dot.avail{background:#ffe156;box-shadow:0 0 5px #ffe156;}.tui-dot.out{background:#ff2d95;box-shadow:0 0 5px #ff2d95;}
2543        .tui-right{width:40%;display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;}
2544        .tui-detail{padding:16px;border-bottom:1px solid #0f3b3b;flex-shrink:0;overflow-y:auto;max-height:55vh;}
2545        .tui-detail::-webkit-scrollbar{width:3px;}.tui-detail::-webkit-scrollbar-thumb{background:#0f3b3b;}
2546        .tui-detail .d-img-box{width:100%;height:260px;background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#080c10;border:1px solid #0f3b3b;margin-bottom:10px;position:relative;filter:saturate(0) brightness(0.7) contrast(1.4) sepia(1) hue-rotate(140deg);}
2547        .tui-detail .d-img-wrap{position:relative;margin-bottom:10px;}
2548        .tui-detail .d-img-wrap::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,255,213,0.05) 2px,rgba(0,255,213,0.05) 4px);pointer-events:none;}
2549        .tui-detail .d-sku{font-size:10px;

2549color:#1a3a3a;letter-spacing:2px;margin-bottom:4px;}
2550        .tui-detail .d-name{font-size:15px;color:#e8fffa;margin-bottom:6px;}
2551        .tui-detail .d-price{font-size:20px;font-weight:900;color:#00ffd5;text-shadow:0 0 15px rgba(0,255,213,0.4);margin-bottom:6px;}
2552        .tui-detail .d-price .cur{font-size:12px;opacity:.6;}
2553        .tui-detail .d-vendor{font-size:10px;color:#1a3a3a;letter-spacing:1px;margin-bottom:8px;}
2554        .tui-detail .d-desc{font-size:11px;color:#6ea8a8;line-height:1.5;margin-bottom:12px;}
2555        .tui-detail-actions{display:flex;gap:8px;}
2556        .tui-dbtn{padding:6px 14px;font-family:inherit;font-size:11px;cursor:pointer;letter-spacing:1px;border:1px solid;background:none;transition:all .15s;}
2557        .tui-dbtn.primary{border-color:#00ffd5;color:#00ffd5;}.tui-dbtn.primary:hover{background:#00ffd5;color:#000;box-shadow:0 0 15px rgba(0,255,213,.3);}
2558        .tui-dbtn.secondary{border-color:#1a3a3a;color:#6ea8a8;}
2559        .tui-cart-row{display:flex;align-items:center;padding:5px 12px;font-size:12px;border-bottom:1px solid rgba(15,59,59,.3);position:relative;}
2560        .tui-cart-row.selected{background:rgba(0,255,213,0.06);color:#c0fff0;}
2561        .tui-cart-row.selected::before{content:'â¸';position:absolute;left:3px;color:#00ffd5;text-shadow:0 0 8px #00ffd5;}
2562        .tui-cart-row .c-name{flex:1;color:#c0fff0;}.tui-cart-row .c-variant{width:120px;color:#1a3a3a;font-size:10px;}.tui-cart-row .c-sku{width:80px;text-align:center;color:#1a3a3a;font-size:10px;}.tui-cart-row .c-qty{width:50px;text-align:center;color:#6ea8a8;}.tui-cart-row .c-unit{width:90px;text-align:right;color:#1a3a3a;font-size:10px;}.tui-cart-row .c-price{width:90px;text-align:right;color:#00ffd5;font-weight:700;}
2563        .tui-cart-empty{text-align:center;color:#1a3a3a;padding:60px 0;font-size:12px;letter-spacing:2px;}
2564        .tui-cart-footer{border-top:1px solid #0f3b3b;padding:8px 12px;flex-shrink:0;}
2565        .tui-cf-line{display:flex;justify-content:space-between;font-size:10px;margin-bottom:3px;color:#1a3a3a;}
2566        .tui-cf-total{display:flex;justify-content:space-between;font-size:13px;font-weight:900;color:#00ffd5;padding-top:6px;border-top:1px solid #0f3b3b;margin-top:6px;text-shadow:0 0 10px rgba(0,255,213,.3);}
2567        .tui-terminal{border-top:1px solid #0f3b3b;padding:6px 12px;max-height:100px;overflow-y:auto;font-size:11px;background:rgba(0,0,0,.3);flex-shrink:0;}
2568        .tui-terminal::-webkit-scrollbar{width:3px;}.tui-terminal::-webkit-scrollbar-thumb{background:#0f3b3b;}
2569        .tui-t-line{margin-bottom:1px;}.tui-t-line .tp{color:#ff2d95;}.tui-t-line .ok{color:#00ffd5;}.tui-t-line .wr{color:#ffe156;}.tui-t-line .inf{color:#1a3a3a;}
2570        .tui-cmdbar{display:flex;align-items:center;padding:5px 12px;border-top:1px solid #0f3b3b;flex-shrink:0;background:rgba(0,255,213,.01);}
2571        .tui-mode{font-size:10px;padding:2px 8px;margin-right:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;}
2572        .tui-mode.normal{background:#00ffd5;color:#000;}.tui-mode.search{background:#ffe156;color:#000;}.tui-mode.command{background:#ff2d95;color:#fff;}
2573        .tui-cmd-input{background:none;border:none;color:#c0fff0;font-family:inherit;font-size:12px;flex:1;outline:none;caret-color:#00ffd5;}
2574        .tui-cmd-input::placeholder{color:#1a3a3a;}
2575        .tui-footer{display:flex;justify-content:center;gap:16px;padding:4px 12px;font-size:10px;color:#1a3a3a;border-top:1px solid #0f3b3b;flex-shrink:0;letter-spacing:1px;}
2576        .tui-footer .fk{color:#00ffd5;}
2577        .tui-toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.9);background:#0d1117;border:1px solid #00ffd5;padding:12px 24px;font-size:13px;color:#00ffd5;box-shadow:0 0 30px rgba(0,255,213,.2);z-index:9500;opacity:0;transition:all .2s;pointer-events:none;font-weight:700;letter-spacing:2px;}
2578        .tui-toast.show{opacity:1;transform:translate(-50%,-50%) scale(1);}
2579        .tui-help-overlay{position:fixed;inset:0;background:rgba(10,14,18,.92);z-index:9000;display:none;justify-content:center;align-items:center;}
2580        .tui-help-overlay.show{display:flex;}
2581        .tui-help-box{background:#0d1117;border:1px solid #00ffd5;padding:24px 32px;max-width:520px;width:90%;box-shadow:0 0 40px rgba(0,255,213,.15);}
2582        .tui-help-box h2{font-size:13px;color:#00ffd5;letter-spacing:4px;margin-bottom:16px;text-transform:uppercase;font-weight:900;}
2583        .tui-help-grid{display:grid;grid-template-columns:100px 1fr;gap:4px 16px;font-size:12px;}
2584        .tui-help-grid .hk{color:#00ffd5;font-weight:700;}.tui-help-grid .hd{color:#6ea8a8;}
2585        .tui-help-close{margin-top:16px;font-size:10px;

2585color:#1a3a3a;text-align:center;}
2586      </style>
2587
2588      <div class="tui-shell">
2589        <div class="tui-hdr">
2590          <div class="tui-logo">LITTLEBIRD<em>//</em>STORE</div>
2591          <div class="tui-hdr-r">
2592            <span class="live">â ONLINE</span>
2593            <span>SYD-AU</span>
2594            <span data-ecommerce--cli-mode-target="clock">00:00:00</span>
2595          </div>
2596        </div>
2597
2598        <div class="tui-tabs" data-ecommerce--cli-mode-target="tabs">
2599          <div class="tui-tab active" data-tab="browse"><span class="key">1</span> BROWSE</div>
2600          <div class="tui-tab" data-tab="cart"><span class="key">3</span> CART</div>
2601        </div>
2602
2603        <div class="tui-main" data-ecommerce--cli-mode-target="browsePanel">
2604          <div class="tui-list" data-ecommerce--cli-mode-target="list">
2605            <div class="tui-list-hdr">
2606              <span class="tui-col-idx">#</span>
2607              <span class="tui-col-sku">SKU</span>
2608              <span class="tui-col-name">PRODUCT</span>
2609              <span class="tui-col-local tui-sortable" data-action="click->ecommerce--cli-mode#sortByLocal">LOCAL</span>
2610              <span class="tui-col-supplier tui-sortable" data-action="click->ecommerce--cli-mode#sortBySupplier">SUPP</span>
2611              <span class="tui-col-stock">STATUS</span>
2612              <span class="tui-col-price tui-sortable" data-action="click->ecommerce--cli-mode#sortByPrice">PRICE</span>
2613            </div>
2614            <div data-ecommerce--cli-mode-target="rows"></div>
2615          </div>
2616          <div class="tui-right">
2617            <div class="tui-detail" data-ecommerce--cli-mode-target="detail"></div>
2618          </div>
2619        </div>
2620
2621        <div class="tui-main" data-ecommerce--cli-mode-target="cartPanel" style="display:none;">
2622          <div style="flex:1;display:flex;flex-direction:column;overflow:hidden;">
2623            <div class="tui-list-hdr">
2624              <span class="tui-col-idx">#</span>
2625              <span class="tui-col-name">PRODUCT</span>
2626              <span style="width:120px;">VARIANT</span>
2627              <span style="width:80px;text-align:center;">SKU</span>
2628              <span style="width:50px;text-align:center;">QTY</span>
2629              <span style="width:90px;text-align:right;">UNIT</span>
2630              <span style="width:90px;text-align:right;">TOTAL</span>
2631            </div>
2632            <div data-ecommerce--cli-mode-target="cartRows" style="flex:1;overflow-y:auto;"></div>
2633            <div class="tui-cart-footer">
2634              <div class="tui-cf-line"><span>Subtotal (inc GST)</span><span data-ecommerce--cli-mode-target="subtotal">$0.00</span></div>
2635              <div class="tui-cf-line"><span>GST (included)</span><span data-ecommerce--cli-mode-target="gst">$0.00</span></div>
2636              <div class="tui-cf-total"><span>TOTAL</span><span data-ecommerce--cli-mode-target="total">$0.00</span></div>
2637            </div>
2638          </div>
2639        </div>
2640
2641        <div class="tui-terminal" data-ecommerce--cli-mode-target="terminal"></div>
2642
2643        <div class="tui-cmdbar">
2644          <div class="tui-mode normal" data-ecommerce--cli-mode-target="modeBadge">NORMAL</div>
2645          <input class="tui-cmd-input" data-ecommerce--cli-mode-target="cmdInput" data-action="input->ecommerce--cli-mode#onCmdInput keydown->ecommerce--cli-mode#onCmdKeydown" placeholder="" autocomplete="off" autocorrect="off" spellcheck="false" readonly>
2646        </div>
2647
2648        <div class="tui-footer">
2649          <span><span class="fk">j/k</span> navigate</span>
2650          <span><span class="fk">Enter</span> open product</span>
2651          <span><span class="fk">a</span> add to cart</span>
2652          <span><span class="fk">/</span> search</span>
2653          <span><span class="fk">:</span> command</span>
2654          <span><span class="fk">?</span> help</span>
2655          <span><span class="fk">u</span> toggle unavail</span>
2656          <span><span class="fk">c</span> checkout</span>
2657          <span><span class="fk">Esc</span> back/close</span>
2658        </div>
2659      </div>
2660
2661      <div class="tui-help-overlay" data-ecommerce--cli-mode-target="helpOverlay">
2662        <div class="tui-help-box">
2663          <h2>âº Keybindings</h2>
2664          <div class="tui-help-grid">

2665            <span class="hk">j / â</span><span class="hd">Move selection down</span>
2666            <span class="hk">k / â</span><span class="hd">Move selection up</span>
2667            <span class="hk">g</span><span class="hd">Jump to first item</span>
2668            <span class="hk">G</span><span class="hd">Jump to last item</span>
2669            <span class="hk">a</span><span class="hd">Add selected to cart</span>
2670            <span class="hk">o</span><span class="hd">Open in new browser tab</span>
2671            <span class="hk">u</span><span class="hd">Toggle unavailable products</span>
2672            <span class="hk">Backspace</span><span class="hd">Remove 1 qty (cart tab)</span>
2673            <span class="hk">X</span><span class="hd">Clear entire cart</span>
2674            <span class="hk">c</span><span class="hd">Checkout</span>
2675            <span class="hk">/</span><span class="hd">Search products</span>
2676            <span class="hk">Esc</span><span class="hd">Back / cancel / close</span>
2677            <span class="hk">:</span><span class="hd">Command mode</span>
2678            <span class="hk">?</span><span class="hd">Toggle this help</span>
2679            <span class="hk">1-3</span><span class="hd">Switch tabs</span>
2680          </div>
2681          <div class="tui-help-close">Press <span style="color:#00ffd5">?</span> or <span style="color:#00ffd5">Esc</span> to close</div>
2682        </div>
2683      </div>
2684
2685      <div class="tui-toast" data-ecommerce--cli-mode-target="toast"></div>
2686    </div>
2687  </div>
2688
2689  
2690
2691</body>
2692</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.