Vite Prompts

Build a Duolingo landing page clone using Vite (vanilla JS, no framework). The page has the following sections in order: FONTS Primary font: Nunito from Google Fonts (weights: 400, 500, 600, 700, 800, 900) Display/heading font: Feather Bold from https://db.onlinewebfonts.com/c/14936bb7a4b6575fd2eee80a3ab52cc2?family=Feather+Bold CSS font stack fallback: 'Nunito', 'DIN Round Pro', -apple-system, BlinkMacSystemFont, sans-serif CSS VARIABLES --green: rgb(88, 204, 2) --dark-blue: rgb(16, 15, 62) --blue: rgb(28, 176, 246) --gray-text: rgb(75, 75, 75) --gray-light: rgb(119, 119, 119) --border-color: rgb(229, 229, 229) --nav-text: rgb(175, 175, 175) --footer-green: #4EC604 --footer-header: rgb(215, 255, 184) --footer-link: rgb(165, 237, 110) VIDEOS (HLS via hls.js) All videos use HLS streaming via hls.js loaded from CDN: https://cdn.jsdelivr.net/npm/hls.js@1.5.7 Videos are lazy-loaded using IntersectionObserver with 200px rootMargin. Each video is initialized only once. When out of viewport, videos pause. When back in viewport, they resume. HLS is configured with capLevelToPlayerSize: false, startLevel: -1, abrEwmaDefaultEstimate: 50000000, maxBufferLength: 60, maxMaxBufferLength: 120. On MANIFEST_PARSED, force the highest quality level. Video sources (all .m3u8 HLS streams from Mux): Hero video (heroVideo): https://stream.mux.com/ze00dOwsh5muXXj01EWSfdilcHjcGqlznBuFR5GEYlZe00.m3u8 Section 2 - "free. fun. effective." (section2Video): https://stream.mux.com/fZLc8HBCvnnsJ1Z021CzK00VDsaM2G01QaApokgnLiil6Q.m3u8 Section 3 - Super Duolingo (section3Video): https://stream.mux.com/JYOLW4tkLJJL4hOKcazRgJqjaV00AfQvh2Nca701vxUao.m3u8 Learn Anywhere background (learnAnywhereVideo): https://stream.mux.com/6xLBelbJrZGw00K2jPsZtGm8pkftvfezQ8rdAmHL9HoM.m3u8 Section 4 - English Test (section4Video): https://stream.mux.com/eEVujEMKUUknKhmJ6vtVeHuRtzS51401CFZM6pFp8yj00.m3u8 CTA bottom video (ctaVideo): https://stream.mux.com/1RSKj01UjpjdbxtOEtuQ01t1O00fqI5QQbn7mTW7UiTBy8.m3u8 All <video> elements have: autoplay muted loop playsinline. SECTION 1: FIXED NAVIGATION BAR Fixed to top, z-index 2, white background, bottom border 1px solid rgb(229,229,229) Inner container: max-width 1440px, centered, height 70px, padding 0 24px, flex space-between Left: Duolingo logo link to https://www.duolingo.com/, logo image: https://d35aaqx5ub95lt.cloudfront.net/images/splash/f92d5f2f7d56636846861c458c0d0b6c.svg (179x42px) Right: "Site language: English" button with dropdown arrow icon https://d35aaqx5ub95lt.cloudfront.net/images/splash/c6eae48dd48246c89e415b89f9e55282.svg (14x14px), text is uppercase, font-weight 700, color rgb(175,175,175), font-size 16px Favicon: https://d35aaqx5ub95lt.cloudfront.net/vendor/avatars/duo_original.svg SECTION 2: HERO Flex row, centered, gap 80px, padding 48px 80px, max-width 1200px, flex:1 to fill remaining header height Header wraps nav + hero + lang-nav, has padding-top 70px (for fixed nav), min-height 100vh Left column: Video (424x424px, aspect-ratio 1, object-fit contain, border-radius 16px, white background) Right column:h1: "The free, fun, and effective way to learn a language!" - color rgb(75,75,75), font-size 32px, max-width 400px, text-align center, line-height 1.3 "Get started" button: green (rgb(88,204,2)), white text, height 50px, border-radius 12px, uppercase, font-weight 700, font-size 16px, full width, box-shadow 0 4px 0 #61B800, links to /register "I ALREADY HAVE AN ACCOUNT" button: transparent bg, blue text (rgb(28,176,246)), 2px border #CFCFCF, height 50px, border-radius 12px, box-shadow 0 4px 0 #CFCFCF Buttons container: max-width 330px, gap 12px, margin-top 40px on desktop (768px+) SECTION 3: LANGUAGE NAVIGATION BAR Full width, bordered top and bottom with 2px solid rgb(229,229,229) Grid: 14px 1fr 14px, gap 30px, height 74px, max-width 1056px Left/right: chevron SVG arrows (14x14px, stroke #afafaf). Right arrow rotated 180deg. Clickable - scrolls the list by 300px Center: horizontal scrolling list (overflow-x auto, hidden scrollbar), gap 24px Each language item: flex row, flag image (36x27.77px) + uppercase text (16px, font-weight 700, color rgb(119,119,119)), gap 6px, padding 4px, border-radius 8px, hover bg rgba(0,0,0,0.05) 38 languages total with their respective CloudFront flag SVG URLs (all from http://d35aaqx5ub95lt.cloudfront.net/vendor/):English: bbe17e16aa4a106032d8e3521eaed13e.svg Spanish: 59a90a2cedd48b751a8fd22014768fd7.svg French: 482fda142ee4abd728ebf4ccce5d3307.svg German: c71db846ffab7e0a74bc6971e34ad82e.svg Italian: 635a09df9323279d39934a991edd4510.svg Portuguese: 27d253ae1272917fc9f4a79459aacd53.svg Math: 395c8a6ee9783610b578b02fda405e85.svg Dutch: de945d789e249dcd74333a6996472ef8.svg Japanese: edea4fa18ff3e7d8c0282de3f102aaed.svg Arabic: 9ab6930a263c981b57f9d578ac97cae7.svg Czech: 828bf0fea457d3beaaab3d6c0bfcc975.svg Welsh: f773f1b240623072e48843ecdf90d756.svg Danish: 6af84a7cb8e99ea8a567c2b9c55b9926.svg Greek: 8db373482261397a3159d3f370eed2f3.svg Esperanto: 6de7e4731b2a82a6458268e1a3d67ce4.svg Finnish: b4d0e4f6451f504e1441eb93efdbea5e.svg Irish: ef0bfb96037b127473bd7bcbfde1a6ed.svg Scottish Gaelic: 09eba3135efe8fe93a4662dba813b921.svg Hebrew: f818f545a703ddaa046ca8786e781742.svg Hindi: 73837fa39dbf1bcc4c95a17a58ed0ffb.svg Haitian Creole: 8cb302b44c183c1a8ec3b90caf90d922.svg Hungarian: 2ed8d0a73eab3c9cba0290e2b459684a.svg High Valyrian: 2880099b038848abbfd11104097953ad.svg Hawaiian: 312e21f793c555787d01a45e20ee8191.svg Indonesian: 339c0413e542f19b234971d7740447e7.svg Korean: ec5835ac9f465ff3dad4b1b8725d4314.svg Latin: f7cee6cc09270371b097129faf792c2a.svg Norwegian (Bokmal): 90b37d97edc66e830dc2286279548f67.svg Navajo: bbc8ad0cfe2596d5193376ebdc3e969c.svg Polish: f095084e6ec400e631d62c3d95fefaa2.svg Romanian: 357e13bb10cf86fc06552d563957e2e6.svg Russian: eadd7804652170c33814a89482f1f353.svg Swedish: f578430c9b7ab617c107893afbb501c0.svg Swahili: 335311988405b4354e1b6ae9037c02db.svg Klingon: 76d654213a8282b0ebc25b4f535ee003.svg Turkish: bc80a9518cd6d5af6ae14e8b22b8a1f4.svg Ukrainian: 7c6e12bc57527843082f7f5bb77c9862.svg Vietnamese: 2b077d42185bc45d4896ed55f15c4fea.svg Yiddish: 55bad151fa6a8d9e2376fc9697c671c8.svg Chinese: 9905aa3a86fcb9e351b0b3bfaf04d8b9.svg Zulu: 112e1531d0ac198a9424bd1b0a7166e6.svg SECTION 4: "free. fun. effective." Flex row, centered, gap 102px, padding 96px 80px, max-width 1200px Left: text content (max-width 480px)h2: "free. fun. effective." in Feather Bold, green (var(--green)), font-size 48px, line-height 1.1, white-space nowrap Paragraph: gray (rgb(119,119,119)), 18px, line-height 1.6. Contains link "research shows that it works" to /efficacy in blue, font-weight 700 Full text: "Learning with Duolingo is fun, and research shows that it works! With quick, bite-sized lessons, you'll earn points and unlock new levels while gaining real-world communication skills." Right: 530x530px video container (white bg, border-radius 16px) SECTION 5: GRADIENT BAR + "LEARN ANYTIME, ANYWHERE" Gradient bar: full width, 150px height, linear-gradient(to bottom, #ffffff, #DBF3FF) Section: relative positioned, background #ddf0fa, flex, align-items flex-start, justify center, min-height 100vh, padding 60px 40px 120px, overflow hidden Background video: absolute positioned, covers full section, object-fit cover, z-index 0, background-color #ddf0fa Content (z-index 1):h2: "learn anytime, anywhere" (with <br> between comma and "anywhere"), color rgb(1,45,82), Feather Bold, 48px, line-height 1.15, text-align center Two store buttons side by side (gap 16px):App Store button: Apple icon image https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260405_154356_13de5dda-6dfe-4f54-b3e2-251301254578.png&w=1280&q=85 (28x28px), "Download on the" + "App Store", links to Apple App Store Google Play button: Play icon image https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260405_154325_6e98dcdb-51ba-446a-8c52-2d2f2675a575.png&w=1280&q=85 (28x28px), "Get it on" + "Google Play" Both: white bg, 2px border #CFCFCF, border-radius 12px, padding 10px 20px, box-shadow 0 4px 0 #CFCFCF, hover bg #f0f0f0 Store label: 11px, font-weight 600, color rgb(75,75,75) Store name: 16px, font-weight 700, color rgb(75,75,75) SECTION 6: SUPER DUOLINGO (DARK) Background: #121138, flex row centered, gap 40px, padding 186px 80px Left: 530x530px video (bg matches dark section #121138) Right:Super Duolingo logo (uses <picture> with <source> for SVG): https://d35aaqx5ub95lt.cloudfront.net/images/splash/3a733db6d6873e1a915f70cf72554ce3.svg (source) and https://d35aaqx5ub95lt.cloudfront.net/images/splash/dd7453522d3192d4df06d4652508b8bc.svg (img fallback), 605px wide "Try 1 week free" button: white bg, dark text rgb(0,4,55), height 50px, border-radius 12px, uppercase, font-weight 700, min-width 162px, box-shadow 0 4px 0 #88879F, hover bg #c8f040 SECTION 7: DUOLINGO ENGLISH TEST Same layout as Section 4 but with flex-direction: row-reverse (text on left, video on right... visually reversed) h2: "duolingo english test" (with &nbsp; between english and test), green, Feather Bold, 48px Paragraph: "Our convenient, fast, and affordable English test integrates the latest assessment science and AI -- empowering anyone to accurately test their English where and when they're at their best." Link button: "Certify your English" in blue, uppercase, 16px, font-weight 700, height 50px, border-radius 12px, hover bg rgba(28,176,246,0.08), links to https://englishtest.duolingo.com/en SECTION 8: CTA - "LEARN A LANGUAGE WITH DUOLINGO" Flex row with green side panels (var(--green)) on left and right that grow to fill, aligned to bottom Center column:Top area: flex column centered, padding-top 40px, gap 48px h1: "learn a language with duolingo" in Feather Bold, green, 64px, text-align center, max-width 800px, line-height 1.1 "Get started" green button (same style as hero but with width: auto, padding: 0 32px, margin-bottom: 8px) Full-width video (100vw, white bg) below the CTA content SECTION 9: FOOTER Background: #4EC604, font-weight 700 Grid: 5 columns, gap 24px, padding 96px 64px 64px, max-width 1440px Column headers: color rgb(215,255,184), 20px, font-weight 700 Links: color rgb(165,237,110), 16px, hover opacity 0.8 + underline 5 columns: "About us" (12 links), "Products" (8 links), "Apps" (2 links), "Help and support" (4 links), "Privacy and terms" (4 links) + "Social" sub-header with margin-top 32px (6 links) Divider: 1px solid #A5ED6E Site language section: padding 40px 64px 64px, "Site language:" label + flex-wrap list of 28 language links (14px, color rgb(165,237,110)) RESPONSIVE BREAKPOINTS 1200px and below: Hero: padding 48px 40px, gap 40px Content sections: padding 72px 40px, gap 60px Animation wrapper: 400x400px Footer grid: 3 columns, padding 64px 40px 900px and below: Hero: column direction, padding 32px 24px, gap 32px, video 320px Content sections: column direction, padding 48px 24px, gap 40px, text centered Animation wrapper: 320x320px Dark section: column, padding 80px 24px Learn anywhere: padding 80px 24px, buttons stack vertically (max-width 280px) CTA h1: 48px, green sides hidden, section becomes column Footer: 2 columns, padding 48px 24px Lang nav: padding 0 16px, gap 12px 600px and below: Hero h1: 24px, video 280px Text h2: 32px, paragraph 16px Animation wrapper: 280x280px Dark section: padding 60px 16px Learn anywhere: padding 60px 16px, h2 32px CTA h1: 32px, top padding 32px, gap 32px Footer: single column, gap 32px Lang nav: gap 16px, text 14px, flags 28px Nav language button text hidden