qanalytics/quantum-impact-nexus

1class CustomHero extends HTMLElement {2    connectedCallback() {3        this.attachShadow({ mode: 'open' });4        this.shadowRoot.innerHTML = `5            <style>6                :host {7                    display: block;8                }9                .hero {10                    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://qanalytics.org/wp-content/uploads/2024/01/qanalytics-homepage-hero.jpg');11                    background-size: cover;12                    background-position: center;13                    color: white;14                    padding: 8rem 2rem;15                    text-align: center;16                    position: relative;17                    overflow: hidden;18                    min-height: 80vh;19                    display: flex;20                    align-items: center;21                    justify-content: center;22                }23.hero-content {24                    max-width: 800px;25                    margin: 0 auto;26                    position: relative;27                    z-index: 2;28                }29                30                .hero h1 {31                    font-size: 3rem;32                    font-weight: 800;33                    margin-bottom: 1.5rem;34                    line-height: 1.2;35                }36                37                .hero p {38                    font-size: 1.25rem;39                    margin-bottom: 2rem;40                    opacity: 0.9;41                    max-width: 600px;42                    margin-left: auto;43                    margin-right: auto;44                }45                46                .hero-button {47                    display: inline-block;48                    background-color: white;49                    color: #4f46e5;50                    padding: 0.75rem 2rem;51                    border-radius: 9999px;52                    font-weight: 600;53                    text-decoration: none;54                    transition: transform 0.2s, box-shadow 0.2s;55                }56                57                .hero-button:hover {58                    transform: translateY(-2px);59                    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);60                }61                62                .hero-pattern {63                    position: absolute;64                    top: 0;65                    left: 0;66                    width: 100%;67                    height: 100%;68                    opacity: 0.1;69                    background-image: radial-gradient(#ffffff 1px, transparent 1px);70                    background-size: 20px 20px;71                }72                73                @media (max-width: 768px) {74                    .hero {75                        padding: 4rem 1rem;76                    }77                    78                    .hero h1 {79                        font-size: 2.25rem;80                    }81                    82                    .hero p {83                        font-size: 1rem;84                    }85                }86            </style>87            <div class="hero">88                <div class="hero-pattern"></div>89                <div class="hero-content">90                    <h1>Bridging Science and Economics for Impact</h1>91                    <p>We develop proprietary research, analytics and investment solutions to facilitate the emergence of a profound, impactful, regenerative, and secure social economy.</p>92                    <a href="#about" class="hero-button">Discover More</a>93                </div>94            </div>95        `;96    }97}98 99customElements.define('custom-hero', CustomHero);