{"id":30232362,"url":"https://github.com/dihprogramador/salao-bella-mulher","last_synced_at":"2025-08-14T23:57:49.528Z","repository":{"id":304427693,"uuid":"1018590675","full_name":"dihprogramador/salao-bella-mulher","owner":"dihprogramador","description":"Site institucional moderno e responsivo para o salão de beleza fictício Bella Mulher, desenvolvido com Angular, TypeScript e SCSS, com foco em estética, usabilidade e identidade visual.","archived":false,"fork":false,"pushed_at":"2025-08-14T00:59:16.000Z","size":9760,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-14T02:37:55.759Z","etag":null,"topics":["angular","embla-carousel","hairsalon","scss","template","typescript","website"],"latest_commit_sha":null,"homepage":"https://bella-mulher.netlify.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dihprogramador.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-12T15:37:25.000Z","updated_at":"2025-08-14T00:59:19.000Z","dependencies_parsed_at":"2025-08-01T03:41:33.136Z","dependency_job_id":"54156ba7-eb54-4335-8a81-b50d8a6e75ca","html_url":"https://github.com/dihprogramador/salao-bella-mulher","commit_stats":null,"previous_names":["dihcoder/salao-bella-mulher","dihprogramador/salao-bella-mulher"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dihprogramador/salao-bella-mulher","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dihprogramador%2Fsalao-bella-mulher","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dihprogramador%2Fsalao-bella-mulher/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dihprogramador%2Fsalao-bella-mulher/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dihprogramador%2Fsalao-bella-mulher/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dihprogramador","download_url":"https://codeload.github.com/dihprogramador/salao-bella-mulher/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dihprogramador%2Fsalao-bella-mulher/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270500676,"owners_count":24595163,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-14T02:00:10.309Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","embla-carousel","hairsalon","scss","template","typescript","website"],"created_at":"2025-08-14T23:57:14.004Z","updated_at":"2025-08-14T23:57:49.517Z","avatar_url":"https://github.com/dihprogramador.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e 📘 Este README também está disponível em [Português 🇧🇷](./README.pt-br.md)\n\n# 💇‍♀️ Bella Mulher – Institutional Website\n\nA modern and responsive institutional website for the **Bella Mulher** beauty salon, built with **Angular**, **TypeScript**, and **SCSS**, focusing on aesthetics, usability, and strong brand identity.\n\n\u003e 🌐 Live demo available at: [https://bella-mulher.netlify.app](https://bella-mulher.netlify.app)\n\n\u003cbr/\u003e\n\n![Bella Mulher Preview](website-preview.png)\n\n---\n\n## ✨ Features\n\n- 🌟 Image carousel with **parallax** effect\n- 🧭 Header with interactive navigation and active section highlighting\n- ⏰ Dynamically rendered opening hours\n- 💅 Highlighted services with icons and pricing\n- 💬 Testimonial section with image and styled quote box\n- 🎥 Institutional video in a floating modal\n- 📬 Footer with useful links, social icons, and newsletter form\n\n---\n\n## 🧠 Tech Stack\n\n| Technology     | Purpose                            |\n|----------------|------------------------------------|\n| Angular        | SPA framework (Standalone Components) |\n| TypeScript     | Type-safe logic and development     |\n| SCSS           | Modular and responsive styling      |\n| Embla Carousel | Animated slider with event support  |\n| HTML5/CSS3     | Semantic structure and layout       |\n\n---\n\n## 🗂️ Project Structure\n\n```\n\nsrc/\n├── app/\n│   ├── components/\n│   │   ├── carousel/\n│   │   ├── featured-services/\n│   │   ├── footer/\n│   │   ├── header/\n│   │   ├── hero/\n│   │   ├── opening-hours/\n│   │   ├── testimonial-section/\n│   │   └── video-highlight/\n│   ├── services/\n│   │   └── scroll.service.ts\n│   ├── app.component.html\n│   ├── app.component.scss\n│   ├── app.component.ts\n│   ├── app.config.ts\n│   └── app.routes.ts\n├── index.html\n├── main.ts\n└── styles.scss\n\n````\n\n---\n\n## 🧩 Implemented Components\n\n### ✅ `HeaderComponent`\n- Sticky header with smooth navigation through page sections.\n- Highlights the currently active menu item.\n- Responsive hamburger menu with `aria-expanded` and `.mobile-visible`.\n- Social icons with `hover` animation.\n\n### ✅ `HeroComponent`\n- Large stylized title using `clamp()` and a classic serif font.\n- Integrates `CarouselComponent` as a dynamic background with depth effect.\n- Call-to-action button: **Book Now!**\n\n### ✅ `CarouselComponent`\n- Uses **Embla Carousel** for auto-sliding and smooth transitions.\n- Manual prev/next buttons for user control.\n- **Parallax effect** based on the browser's `scrollY`.\n\n### ✅ `OpeningHoursComponent`\n- Three-column layout: intro text, central image, and dynamic schedule.\n- Hours rendered with `*ngFor`, highlighting closed days.\n- Central image includes `hover: scale(1.1)` animation.\n\n### ✅ `FeaturedServicesComponent`\n- Service cards with SVG icons, descriptions, and formatted BRL prices.\n- Flexible and responsive grid with `hover` transitions.\n\n### ✅ `TestimonialSectionComponent`\n- Testimonial box over a client image with styled quotation and author.\n- Responsive layout adapts for smaller screens with media queries.\n- Elegant typography and subtle shadows for emphasis.\n\n### ✅ `VideoHighlightComponent`\n- Video banner with play button.\n- Embedded YouTube video in modal (`iframe`).\n- Controlled using `ngIf`, `DomSanitizer`, and click events.\n\n### ✅ `FooterComponent`\n- Three main columns: About, Quick Links, and Newsletter form.\n- Email input and send button styled for clarity.\n- Bottom section with copyright and social links.\n\n---\n\n## 🧮 Utility Services\n\n### 🧩 `ScrollService`\n- Singleton service (`providedIn: 'root'`) with `throttle()` method to limit execution rate — useful for effects like parallax or scroll tracking.\n\n---\n\n## 🛠️ Getting Started\n\n### Prerequisites\n\n- Node.js (v19+)\n- Angular CLI (v19+ recommended)\n\n### Steps\n\n```bash\n# Clone the repository\ngit clone https://github.com/dihcoder/salao-bella-mulher.git\n\n# Enter the project folder\ncd salao-bella-mulher\n\n# Install dependencies\nnpm install\n\n# Run locally\nng serve\n````\n\nVisit `http://localhost:4200/` to see the site in action.\n\n---\n\n## 💡 Possible Future Improvements\n\n* Integration with a real booking form (Firebase or Supabase)\n* SEO and social sharing metadata\n* Lazy loading of images and videos\n* Multi-language support (i18n)\n\n---\n\n## 👨‍💻 Author\n\nDeveloped with ❤️ by **Diego Silva**\n\n\u003e *Aspiring web developer passionate about design and digital experiences.*\n\n[![LinkedIn](https://img.shields.io/badge/-LinkedIn-blue?style=flat-square\\\u0026logo=linkedin)](https://linkedin.com/in/diego-md)\n[![Portfolio](https://img.shields.io/badge/-Portfolio-black?style=flat-square\\\u0026logo=firefox-browser)](https://dihcoder.github.io/personal-website/)\n\n---\n\n## 📄 License\n\nThis project is licensed under the **MIT License**. See the `LICENSE` file for more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdihprogramador%2Fsalao-bella-mulher","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdihprogramador%2Fsalao-bella-mulher","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdihprogramador%2Fsalao-bella-mulher/lists"}