Merge pull request #16 from xandemon/feat/branding

Rebrand developer-icons and prettify README.md

README.md

@@ -1,10 +1,72 @@
-# Developer Icons
-
-Welcome to **`developer-icons`**, a collection of high-quality, customizable tech icons designed for developers and designers. With full TypeScript support, these icons are perfect for use in any React or Next.js project. Alternatively, download the icons in image formats for your design needs directly from our [official website](https://xandemon.github.io/developer-icons/ "Homepage | Developer Icons").
-
-![Developer Icons Cover Image](/public/cover-image.webp "Developer Icons")
-
-## Features
+<div align="center">
+  <a href="https://xandemon.github.io/developer-icons" target="_blank">
+    <img src="public/logo.png" alt="Developer Icons by xandemon" height="120" />
+  </a>
+  <h1>Developer Icons</h1>
+</div>
+
+<div align="center">
+  <a href="https://astro.build/" target="_blank">
+    <img src="https://img.shields.io/badge/Astro-333333?logo=astro&logoColor=BC52EE" alt="Astro">
+  </a>
+  <a href="https://tailwindcss.com/" target="_blank">
+  <img src="https://img.shields.io/badge/Tailwind_CSS-333?logo=tailwindcss&logoColor=06B6D4&style=flat" alt="Tailwind CSS">
+  </a>
+  <a href="https://www.npmjs.com/package/developer-icons" target="_blank">
+    <img src="https://img.shields.io/npm/dy/developer-icons?logo=npm&logoColor=CB3837&label=Downloads&labelColor=333&color=148ACF&style=flat" alt="Developer-Icons NPM Package Downloads">
+  </a>
+  <a href="https://github.com/xandemon/developer-icons/releases" target="_blank">
+    <img src="https://img.shields.io/npm/v/developer-icons?logo=github&logoColor=fff&label=Release&labelColor=333&color=148ACF&style=flat" alt="Developer-Icons NPM Package Version">
+  </a>
+  <a href="https://github.com/xandemon/developer-icons/stargazers" target="_blank">
+    <img src="https://img.shields.io/github/stars/xandemon/developer-icons?logo=github&logoColor=fff&label=Stars&labelColor=333&color=FFD700&style=flat" alt="Developer-Icons GitHub Stars">
+  </a>
+  <a href="https://github.com/xandemon/developer-icons/blob/main/LICENSE" target="_blank">
+    <img src="https://img.shields.io/github/license/xandemon/developer-icons?logo=github&logoColor=fff&label=License&labelColor=333&color=3EC508&style=flat" alt="Developer-Icons License">
+  </a>
+</div>
+
+<p align="center">
+  <a href="https://xandemon.github.io/developer-icons/">
+    Homepage
+  </a>
+  <span>&nbsp;⬥&nbsp;</span>
+  <a href="https://xandemon.github.io/developer-icons/icons/All">
+    Browse Icons
+  </a>
+  <span>&nbsp;⬥&nbsp;</span>
+  <a href="https://www.npmjs.com/package/developer-icons">
+    NPM Package
+  </a>
+  <span>&nbsp;⬥&nbsp;</span>
+  <a href="https://xandemon.github.io/developer-icons/docs/usageGuide/">
+    Usage
+  </a>
+  <span>&nbsp;⬥&nbsp;</span>
+  <a href="https://xandemon.github.io/developer-icons/docs/contributing/">
+    Contributing
+  </a>
+</p>
+
+<p align="center">
+  <img src="public/cover-image.png" alt="Developer Icons" />
+</p>
+
+Welcome to **`developer-icons`**—a curated set of high-quality, customizable tech icons built for developers and designers. Fully compatible with TypeScript, ideal for React and Next.js, or downloadable from our [official website](https://xandemon.github.io/developer-icons/icons/All "Developer Icons Website") for design projects.
+
+## 🚀 Tech Stack
+
+- [Astro](https://astro.build/) - The web framework for content-driven websites.
+- [React](https://reactjs.org/) - A JavaScript UI library used with Astro.
+- [Tailwind CSS](https://tailwindcss.com/) - A utility-first CSS framework for rapid UI development.
+- [NPM](https://www.npmjs.com/) - The package manager for JavaScript.
+- [Typescript](https://www.typescriptlang.org/) - A statically typed, superset of JavaScript.
+- [Vite](https://vitejs.dev/) - A lightning-fast build tool for an optimized development experience.
+- [Lucide Icons](https://lucide.dev/) - A modern, customizable, open-source icon library.
+- [SVGO](https://github.com/svg/svgo) - A powerful tool for compressing and optimizing SVG files.
+- [SVGSON](https://github.com/svgson/svgson) - A tool to seamlessly convert SVGs to JSON format and back.
+
+## 🌟 Features
 
 - ⚡**Highly optimized:** Icons are optimized for performance and size. They are designed to be as small as possible while maintaining the quality.
 - 🎨**Customizable:** Cusomizations are available for all icons. You can change the size, color, stroke width, and much more.
@@ -15,7 +77,7 @@ Welcome to **`developer-icons`**, a collection of high-quality, customizable tec
 
 Explore more and start using `developer-icons` today to enhance your projects with stunning, customizable icons!
 
-## Installation
+## 📦 Installation
 
 To add the icons to your project, run one of the following commands:
 
@@ -35,7 +97,7 @@ or
 pnpm add developer-icons
 ```
 
-## Usage
+## ⚙️ Usage
 
 Import named icon components from the `developer-icons` package and use them just like any other React component, with props/attributes similar to those of an SVG:
 
@@ -55,11 +117,11 @@ export const YourReactComponent = () => {
 
 In this example, we import `HtmlIcon` and `JavascriptIcon` from the `developer-icons` package and use them within a React component. You can customize the icons by adjusting their `size`, `color`, `style`, and other properties.
 
-## Contributing
+## 🤝 Contributing
 
 We welcome contributions of all kinds, whether you're looking to add new icons, improve existing ones, or enhance the overall project. To get started, refer to our [Contributing Guidelines](https://xandemon.github.io/developer-icons/docs/contributing).
 
-## License
+## 📜 License
 
 Licensed under MIT License and copyrights reserved.
 

docs/src/components/HeroSection.astro

@@ -13,7 +13,9 @@ import { publicBaseUrl } from "@/config";
       <br />
       customizable tech icons
     </p>
-    <p class="text-2xl font-medium opacity-80">Made for the developers.</p>
+    <p class="text-xl text-zinc-500 font-medium opacity-80">
+      No more searching for "<em>transparent</em>" PNGs and SVGs.
+    </p>
     <div class="flex items-center gap-3 pt-4">
       <a href={`${publicBaseUrl}/icons/All`}>
         <Button className="px-5">Browse all icons</Button>
@@ -35,6 +37,6 @@ import { publicBaseUrl } from "@/config";
 
   <img
     src={`${publicBaseUrl}/hero-image.png`}
-    class="rounded-lg w-full h-[350px] max-w-[45%] object-contain shadow-md shadow-zinc-800"
+    class="rounded-lg w-full h-[350px] max-w-[45%] object-cover shadow-lg shadow-zinc-950"
   />
 </div>