---
title: Hero Section with bottom image
category: Marketing
paid: false
isActive: true
ltr: {"svelte":{"svelteTail":[{"code":"<section>\n    <div class=\"max-w-screen-xl mx-auto px-4 py-28 gap-12 text-gray-600 md:px-8\">\n        <div class=\"space-y-5 max-w-4xl mx-auto text-center\">\n            <h1 class=\"text-sm text-indigo-600 font-medium\">\n                Build products for everyone\n            </h1>\n            <h2 class=\"text-4xl text-gray-800 font-extrabold mx-auto md:text-5xl\">\n                Design your projects faster with  <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-[#4F46E5] to-[#E114E5]\">the largest figma UI kit</span>\n            </h2>\n            <p class=\"max-w-2xl mx-auto\">\n                Sed ut perspiciatis unde omnis iste natus voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae.\n            </p>\n            <div class=\"items-center justify-center gap-x-3 space-y-3 sm:flex sm:space-y-0\">\n                <a href=\"javascript:void(0)\" class=\"block py-2 px-4 text-white font-medium bg-indigo-600 duration-150 hover:bg-indigo-500 active:bg-indigo-700 rounded-lg shadow-lg hover:shadow-none\">\n                    Browse courses\n                </a>\n                <a href=\"javascript:void(0)\" class=\"block py-2 px-4 text-gray-700 hover:text-gray-500 font-medium duration-150 active:bg-gray-100 border rounded-lg\">\n                    Get access\n                </a>\n            </div>\n        </div>\n        <div class=\"mt-14\">\n            <img src=\"https://raw.githubusercontent.com/sidiDev/remote-assets/main/Safari%20(Big%20Sur)%20-%20Light.png\" class=\"w-full shadow-lg rounded-lg border\" alt=\"\" />\n        </div>\n    </div>\n</section>","label":"App.svelte"}]},"react":{"jsxTail":[{"label":"App.jsx","code":"export default () => {\n    return (\n        <section>\n            <div className=\"max-w-screen-xl mx-auto px-4 py-28 gap-12 text-gray-600 md:px-8\">\n                <div className=\"space-y-5 max-w-4xl mx-auto text-center\">\n                    <h1 className=\"text-sm text-indigo-600 font-medium\">\n                        Build products for everyone\n                    </h1>\n                    <h2 className=\"text-4xl text-gray-800 font-extrabold mx-auto md:text-5xl\">\n                        Design your projects faster with  <span className=\"text-transparent bg-clip-text bg-gradient-to-r from-[#4F46E5] to-[#E114E5]\">the largest figma UI kit</span>\n                    </h2>\n                    <p className=\"max-w-2xl mx-auto\">\n                        Sed ut perspiciatis unde omnis iste natus voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae.\n                    </p>\n                    <div className=\"items-center justify-center gap-x-3 space-y-3 sm:flex sm:space-y-0\">\n                        <a href=\"javascript:void(0)\" className=\"block py-2 px-4 text-white font-medium bg-indigo-600 duration-150 hover:bg-indigo-500 active:bg-indigo-700 rounded-lg shadow-lg hover:shadow-none\">\n                            Browse courses\n                        </a>\n                        <a href=\"javascript:void(0)\" className=\"block py-2 px-4 text-gray-700 hover:text-gray-500 font-medium duration-150 active:bg-gray-100 border rounded-lg\">\n                            Get access\n                        </a>\n                    </div>\n                </div>\n                <div className=\"mt-14\">\n                    <img src=\"https://raw.githubusercontent.com/sidiDev/remote-assets/main/Safari%20(Big%20Sur)%20-%20Light.png\" className=\"w-full shadow-lg rounded-lg border\" alt=\"\" />\n                </div>\n            </div>\n        </section>\n    )\n}"}],"jsxCss":[]},"vue":{"vueTail":[{"label":"App.svelte","code":"<template>\n  <section>\n    <div class=\"max-w-screen-xl mx-auto px-4 py-28 gap-12 text-gray-600 md:px-8\">\n        <div class=\"space-y-5 max-w-4xl mx-auto text-center\">\n            <h1 class=\"text-sm text-indigo-600 font-medium\">\n                Build products for everyone\n            </h1>\n            <h2 class=\"text-4xl text-gray-800 font-extrabold mx-auto md:text-5xl\">\n                Design your projects faster with  <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-[#4F46E5] to-[#E114E5]\">the largest figma UI kit</span>\n            </h2>\n            <p class=\"max-w-2xl mx-auto\">\n                Sed ut perspiciatis unde omnis iste natus voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae.\n            </p>\n            <div class=\"items-center justify-center gap-x-3 space-y-3 sm:flex sm:space-y-0\">\n                <a href=\"javascript:void(0)\" class=\"block py-2 px-4 text-white font-medium bg-indigo-600 duration-150 hover:bg-indigo-500 active:bg-indigo-700 rounded-lg shadow-lg hover:shadow-none\">\n                    Browse courses\n                </a>\n                <a href=\"javascript:void(0)\" class=\"block py-2 px-4 text-gray-700 hover:text-gray-500 font-medium duration-150 active:bg-gray-100 border rounded-lg\">\n                    Get access\n                </a>\n            </div>\n        </div>\n        <div class=\"mt-14\">\n            <img src=\"https://raw.githubusercontent.com/sidiDev/remote-assets/main/Safari%20(Big%20Sur)%20-%20Light.png\" class=\"w-full shadow-lg rounded-lg border\" alt=\"\" />\n        </div>\n    </div>\n  </section>\n</template>"}],"vueCss":[]},"preview":"function App() {\n    return (\n        <section>\n            <div className=\"max-w-screen-xl mx-auto px-4 py-28 gap-12 text-gray-600 md:px-8\">\n                <div className=\"space-y-5 max-w-4xl mx-auto text-center\">\n                    <h1 className=\"text-sm text-indigo-600 font-medium\">\n                        Build products for everyone\n                    </h1>\n                    <h2 className=\"text-4xl text-gray-800 font-extrabold mx-auto md:text-5xl\">\n                        Design your projects faster with  <span className=\"text-transparent bg-clip-text bg-gradient-to-r from-[#4F46E5] to-[#E114E5]\">the largest figma UI kit</span>\n                    </h2>\n                    <p className=\"max-w-2xl mx-auto\">\n                        Sed ut perspiciatis unde omnis iste natus voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae.\n                    </p>\n                    <div className=\"items-center justify-center gap-x-3 space-y-3 sm:flex sm:space-y-0\">\n                        <a href=\"javascript:void(0)\" className=\"block py-2 px-4 text-white font-medium bg-indigo-600 duration-150 hover:bg-indigo-500 active:bg-indigo-700 rounded-lg shadow-lg hover:shadow-none\">\n                            Browse courses\n                        </a>\n                        <a href=\"javascript:void(0)\" className=\"block py-2 px-4 text-gray-700 hover:text-gray-500 font-medium duration-150 active:bg-gray-100 border rounded-lg\">\n                            Get access\n                        </a>\n                    </div>\n                </div>\n                <div className=\"mt-14\">\n                    <img src=\"https://raw.githubusercontent.com/sidiDev/remote-assets/main/Safari%20(Big%20Sur)%20-%20Light.png\" className=\"w-full shadow-lg rounded-lg border\" alt=\"\" />\n                </div>\n            </div>\n        </section>\n    )\n}","html":{"htmlTail":[{"code":"<section>\n    <div class=\"max-w-screen-xl mx-auto px-4 py-28 gap-12 text-gray-600 md:px-8\">\n        <div class=\"space-y-5 max-w-4xl mx-auto text-center\">\n            <h1 class=\"text-sm text-indigo-600 font-medium\">\n                Build products for everyone\n            </h1>\n            <h2 class=\"text-4xl text-gray-800 font-extrabold mx-auto md:text-5xl\">\n                Design your projects faster with  <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-[#4F46E5] to-[#E114E5]\">the largest figma UI kit</span>\n            </h2>\n            <p class=\"max-w-2xl mx-auto\">\n                Sed ut perspiciatis unde omnis iste natus voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae.\n            </p>\n            <div class=\"items-center justify-center gap-x-3 space-y-3 sm:flex sm:space-y-0\">\n                <a href=\"javascript:void(0)\" class=\"block py-2 px-4 text-white font-medium bg-indigo-600 duration-150 hover:bg-indigo-500 active:bg-indigo-700 rounded-lg shadow-lg hover:shadow-none\">\n                    Browse courses\n                </a>\n                <a href=\"javascript:void(0)\" class=\"block py-2 px-4 text-gray-700 hover:text-gray-500 font-medium duration-150 active:bg-gray-100 border rounded-lg\">\n                    Get access\n                </a>\n            </div>\n        </div>\n        <div class=\"mt-14\">\n            <img src=\"https://raw.githubusercontent.com/sidiDev/remote-assets/main/Safari%20(Big%20Sur)%20-%20Light.png\" class=\"w-full shadow-lg rounded-lg border\" alt=\"\" />\n        </div>\n    </div>\n</section>","label":"index.html"}]}}
slug: /heroes
id: 710053f8-34ec-41cd-8ce0-e5fdc83c631d
created_at: 1670150011753
---

<FUIHeroSectionWithBottomImage />