diff --git a/users_microservice/src/main/resources/templates/home/images/acoustic-specialist.jpg b/users_microservice/src/main/resources/templates/home/images/acoustic-specialist.jpg new file mode 100644 index 0000000..0ba3cf5 Binary files /dev/null and b/users_microservice/src/main/resources/templates/home/images/acoustic-specialist.jpg differ diff --git a/users_microservice/src/main/resources/templates/home/images/alex-student.jpg b/users_microservice/src/main/resources/templates/home/images/alex-student.jpg new file mode 100644 index 0000000..f0c2625 Binary files /dev/null and b/users_microservice/src/main/resources/templates/home/images/alex-student.jpg differ diff --git a/users_microservice/src/main/resources/templates/home/images/blues-rock-guitar.jpg b/users_microservice/src/main/resources/templates/home/images/blues-rock-guitar.jpg new file mode 100644 index 0000000..e8b6e58 Binary files /dev/null and b/users_microservice/src/main/resources/templates/home/images/blues-rock-guitar.jpg differ diff --git a/users_microservice/src/main/resources/templates/home/images/david-student.jpg b/users_microservice/src/main/resources/templates/home/images/david-student.jpg new file mode 100644 index 0000000..391e30f Binary files /dev/null and b/users_microservice/src/main/resources/templates/home/images/david-student.jpg differ diff --git a/users_microservice/src/main/resources/templates/home/images/fingerstyle-expert.jpg b/users_microservice/src/main/resources/templates/home/images/fingerstyle-expert.jpg new file mode 100644 index 0000000..540dded Binary files /dev/null and b/users_microservice/src/main/resources/templates/home/images/fingerstyle-expert.jpg differ diff --git a/users_microservice/src/main/resources/templates/home/images/maria-student.jpg b/users_microservice/src/main/resources/templates/home/images/maria-student.jpg new file mode 100644 index 0000000..d5dfd2f Binary files /dev/null and b/users_microservice/src/main/resources/templates/home/images/maria-student.jpg differ diff --git a/users_microservice/src/main/resources/templates/home/images/music-theory-instructor.jpg b/users_microservice/src/main/resources/templates/home/images/music-theory-instructor.jpg new file mode 100644 index 0000000..2f22d28 Binary files /dev/null and b/users_microservice/src/main/resources/templates/home/images/music-theory-instructor.jpg differ diff --git a/users_microservice/src/main/resources/templates/home/index.html b/users_microservice/src/main/resources/templates/home/index.html new file mode 100644 index 0000000..c2d0334 --- /dev/null +++ b/users_microservice/src/main/resources/templates/home/index.html @@ -0,0 +1,398 @@ + + + + + + StringMaster | Learn Guitar Online + + + + + + + + + + + + + +
+
+
+ +

Master guitar with interactive lessons

+

+ Learn at your own pace with our visual fretboard trainer. + From beginner chords to advanced techniques — all in one platform. +

+
+ + GET STARTED → + + + See How It Works + +
+
+
+
50K+
+
Active Students
+
+
+
200+
+
Video Lessons
+
+
+
4.9
+
App Rating
+
+
+
+ + +
+ Alcohol Agent Logo +
+
+
+ + +
+
+
+
Features
+

Everything you need to learn guitar

+

+ Our platform combines visual learning with hands-on practice + to accelerate your guitar journey. +

+
+
+
+
+ + + + + +
+

Interactive Fretboard

+

Visual chord diagrams that show exactly where to place your fingers. Practice anywhere, anytime.

+
+
+
+ + + + + +
+

HD Video Lessons

+

200+ professionally filmed lessons from beginner basics to advanced techniques.

+
+
+
+ + + + + +
+

Progress Tracking

+

Set goals, track your practice time, and watch your skills improve over time.

+
+
+
+ + + + + + +
+

Song Library

+

Learn your favorite songs with tabs, chords, and play-along backing tracks.

+
+
+
+ + + + + + + +
+

AI Feedback

+

Get real-time feedback on your playing through our audio recognition technology.

+
+
+
+ + + + + + +
+

Community

+

Connect with fellow learners, share progress, and get tips from experienced players.

+
+
+
+
+ + +
+
+
+
Pricing
+

Simple, transparent pricing

+

+ Start with a free trial. No credit card required. +

+
+
+ + + +
+
+
+
Starter
+
+ Free +
+
+
+

Perfect for trying out the basics

+
    +
  • 10 beginner lessons
    • +
  • Interactive fretboard
    • +
  • 5 songs with tabs
    • +
  • Community access
    • +
+ Get Started +
+ +
+
Lifetime
+
+ $440 +
+
One-time payment
+
Best value
+

Forever access, no recurring fees

+
    +
  • Everything in Pro
    • +
  • 1-on-1 coaching session
    • +
  • Exclusive masterclasses
    • +
  • Priority support
    • +
  • All future updates
    • +
+ Get Lifetime Access +
+
+
+
+ + +
+
+
+
Instructors
+

Learn from the best

+

+ Our instructors have decades of combined experience and a passion for teaching. +

+
+
+
+
+ Marcus Chen +
+
Marcus Chen
+
Acoustic Specialist
+

15 years teaching, Berklee graduate

+
+
+
+ Sarah Williams +
+
Sarah Williams
+
Fingerstyle Expert
+

YouTube educator, 2M subscribers

+
+
+
+ James Rodriguez +
+
James Rodriguez
+
Blues & Rock
+

Session guitarist, 20+ albums

+
+
+
+ Emily Park +
+
Emily Park
+
Music Theory
+

PhD in Music, award-winning educator

+
+
+
+
+ + +
+
+
+
Testimonials
+

What our students say

+
+
+
+
★★★★★
+

"I've tried several apps, but StringMaster's interactive fretboard finally made chord transitions click for me. Went from zero to playing songs in 3 months!"

+
+
+ Alex Thompson +
+
+
Alex Thompson
+
Beginner, 4 months
+
+
+
+
+
★★★★★
+

"The AI feedback feature is incredible. It's like having a personal instructor available 24/7. My fingerpicking has improved dramatically."

+
+
+ Maria Garcia +
+
+
Maria Garcia
+
Intermediate, 1 year
+
+
+
+
+
★★★★★
+

"Worth every penny. The song library keeps me motivated, and the progress tracking shows exactly how far I've come. Highly recommend!"

+
+
+ David Kim +
+
+
David Kim
+
Pro subscriber, 8 months
+
+
+
+
+
+
+ + +
+
+

Ready to start your guitar journey?

+

Join 50,000+ students learning guitar the modern way. Start your free trial today.

+ GET STARTED → +
+
+ + + + + + + \ No newline at end of file diff --git a/users_microservice/src/main/resources/templates/home/templatemo-606-string-master.css b/users_microservice/src/main/resources/templates/home/templatemo-606-string-master.css new file mode 100644 index 0000000..771268b --- /dev/null +++ b/users_microservice/src/main/resources/templates/home/templatemo-606-string-master.css @@ -0,0 +1,1391 @@ +@charset "utf-8"; +/* CSS Document + +TemplateMo 606 String Master + +https://templatemo.com/tm-606-string-master + +*/ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + --bg-dark: darkblue; + --bg-card: seagreen; + --bg-elevated: #242424; + --accent: #f59e0b; + --accent-light: #fbbf24; + --accent-dark: #d97706; + --text-primary: orange; + --text-secondary: azure; + --text-muted: White; + --border: #2e2e2e; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: 'Space Grotesk', sans-serif; + background: var(--bg-white); + color: var(--text-primary); + line-height: 1.6; +} + +/* Navigation */ +nav { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1000; + background: rgba(13, 13, 13, 0.9); + backdrop-filter: blur(20px); + border-bottom: 1px solid var(--border); +} + +.nav-container { + max-width: 1200px; + margin: 0 auto; + padding: 1rem 2rem; + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + font-size: 1.5rem; + font-weight: 700; + color: var(--text-primary); + text-decoration: none; + display: flex; + align-items: center; + gap: 0.5rem; + + +} + +.logo-img{ +width: 110px; + height: 110px; + display: inline-block; + +} +.logo-img2{ +width: 750px; + height: 750px; + display: inline-block; + +} + +.logo-icon { + width: 32px; + height: 32px; + background: var(--accent); + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; +} + +.nav-links { + display: flex; + gap: 2rem; + list-style: none; +} + +.nav-links a { + color: burlywood; + text-decoration: none; + font-size: 0.95rem; + font-weight: 500; + transition: color 0.2s; +} + +.nav-links a:hover { + color: var(--accent); +} + +.nav-cta { + background: var(--accent); + color: white; + padding: 0.6rem 1.5rem; + border-radius: 8px; + text-decoration: none; + font-weight: 600; + font-size: 0.9rem; + transition: all 0.2s; +} + +.nav-cta span { + display: inline; + background: transparent; + padding: 0; +} + +.nav-cta:hover { + background: var(--accent-light); + transform: translateY(-1px); +} + +/* Hero Section */ +.hero { + /* min-height: 100vh; */ + /* Uncomment for full-screen hero */ + display: flex; + align-items: center; + padding: 8rem 2rem 4rem; + position: relative; + overflow: hidden; +} + +.hero::before { + content: ''; + position: absolute; + top: -50%; + right: -20%; + width: 80%; + height: 150%; + background: radial-gradient(ellipse, rgba(245, 158, 11, 0.08) 0%, transparent 70%); + pointer-events: none; +} + +.hero-container { + max-width: 1200px; + margin: 0 auto; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: center; +} + +.hero-content { + position: relative; + z-index: 1; +} + +.hero-badge { + display: inline-flex; + align-items: center; + gap: 0.5rem; + background: var(--bg-card); + border: 1px solid var(--border); + padding: 0.5rem 1rem; + border-radius: 100px; + font-size: 0.85rem; + color: var(--text-secondary); + margin-bottom: 1.5rem; +} + +.hero-badge span { + color: var(--accent); +} + +.hero h1 { + font-size: clamp(2.5rem, 5vw, 4rem); + font-weight: 700; + line-height: 1.1; + margin-bottom: 1.5rem; + letter-spacing: -0.02em; + color: green; + +} + +.hero h1 .highlight { + color: var(--accent); +} + +.hero-description { + font-size: 1.15rem; + color: var(--text-secondary); + margin-bottom: 2rem; + max-width: 480px; + color: black; + +} + +.hero-buttons { + display: flex; + gap: 1rem; + margin-bottom: 3rem; +} + +.btn-primary { + background: var(--accent); + color: white; + padding: 1rem 2rem; + border-radius: 10px; + text-decoration: none; + font-weight: 600; + display: inline-flex; + align-items: center; + gap: 0.5rem; + transition: all 0.2s; +} + +.btn-primary:hover { + background: var(--accent-light); + transform: translateY(-2px); + box-shadow: 0 10px 30px rgba(245, 158, 11, 0.3); +} + +.btn-secondary { + background: transparent; + color: var(--text-primary); + padding: 1rem 2rem; + border-radius: 10px; + text-decoration: none; + font-weight: 600; + border: 1px solid var(--border); + transition: all 0.2s; +} + +.btn-secondary:hover { + border-color: var(--text-secondary); + background: var(--bg-card); +} + +.hero-stats { + display: flex; + gap: 3rem; +} + +.stat { + text-align: left; +} + +.stat-value { + font-size: 2rem; + font-weight: 700; + color: var(--text-primary); +} + +.stat-label { + font-size: 0.85rem; + color: var(--text-muted); +} + +/* Guitar Section */ +.guitar-wrapper { + position: relative; + z-index: 1; +} + +.guitar-card { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 20px; + padding: 1.5rem; + box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5); +} + +.guitar-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1rem; + padding-bottom: 1rem; + border-bottom: 1px solid var(--border); +} + +.guitar-title { + font-size: 0.9rem; + font-weight: 600; + color: var(--text-secondary); +} + +.guitar-controls { + display: flex; + gap: 0.5rem; +} + +.chord-btn { + background: var(--bg-elevated); + border: 1px solid var(--border); + color: var(--text-primary); + padding: 0.4rem 0.8rem; + border-radius: 6px; + font-size: 0.8rem; + font-family: inherit; + font-weight: 500; + cursor: pointer; + transition: all 0.15s; +} + +.chord-btn:hover { + background: var(--accent); + color: var(--bg-dark); + border-color: var(--accent); +} + +.chord-btn.active { + background: var(--accent); + color: var(--bg-dark); + border-color: var(--accent); +} + +/* Mini Guitar Fretboard */ +.guitar-neck { + position: relative; + overflow: hidden; + border-radius: 8px; +} + +.fretboard { + background: + repeating-linear-gradient(90deg, + transparent 0px, + rgba(60, 30, 20, 0.15) 1px, + transparent 2px, + transparent 6px), + linear-gradient(180deg, + #3d2517 0%, + #2a1810 20%, + #1f120b 50%, + #2a1810 80%, + #3d2517 100%); + border-radius: 6px; + border: 3px solid #1a0f08; + border-top: none; +} + +.nut { + height: 10px; + background: linear-gradient(180deg, + #f5f5dc 0%, + #d4cba8 50%, + #c9c098 100%); + border-radius: 6px 6px 0 0; +} + +.fretboard-grid { + display: grid; + grid-template-columns: repeat(8, 1fr); + grid-template-rows: repeat(6, 32px); + position: relative; +} + +.string-labels { + position: absolute; + left: -28px; + top: 0; + height: calc(6 * 32px); + display: flex; + flex-direction: column; +} + +.string-label { + height: 32px; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.7rem; + color: var(--text-muted); + font-weight: 500; +} + +.fret { + position: relative; + border-right: 2px solid #c0a080; + border-bottom: 1px solid rgba(200, 200, 200, 0.4); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: background 0.1s; +} + +.fret:hover { + background: rgba(245, 158, 11, 0.15); +} + +.fret::after { + content: ''; + position: absolute; + left: 0; + right: 0; + top: 50%; + transform: translateY(-50%); + pointer-events: none; +} + +/* String thickness - thicker for lower strings */ +.fret[data-string="0"]::after { + height: 1px; + background: linear-gradient(90deg, + rgba(200, 180, 160, 0.4), + rgba(240, 220, 200, 0.7), + rgba(200, 180, 160, 0.4)); +} + +.fret[data-string="1"]::after { + height: 1px; + background: linear-gradient(90deg, + rgba(200, 180, 160, 0.4), + rgba(240, 220, 200, 0.7), + rgba(200, 180, 160, 0.4)); +} + +.fret[data-string="2"]::after { + height: 2px; + background: linear-gradient(90deg, + rgba(190, 170, 150, 0.5), + rgba(230, 210, 190, 0.8), + rgba(190, 170, 150, 0.5)); +} + +.fret[data-string="3"]::after { + height: 2px; + background: linear-gradient(90deg, + rgba(180, 160, 140, 0.5), + rgba(220, 200, 180, 0.8), + rgba(180, 160, 140, 0.5)); +} + +.fret[data-string="4"]::after { + height: 3px; + background: linear-gradient(90deg, + rgba(160, 140, 120, 0.5), + rgba(200, 180, 160, 0.85), + rgba(160, 140, 120, 0.5)); + box-shadow: 0 0 2px rgba(200, 180, 160, 0.3); +} + +.fret[data-string="5"]::after { + height: 4px; + background: linear-gradient(90deg, + rgba(150, 130, 110, 0.5), + rgba(190, 170, 150, 0.9), + rgba(150, 130, 110, 0.5)); + box-shadow: 0 0 3px rgba(190, 170, 150, 0.4); +} + +.note-marker { + width: 18px; + height: 18px; + background: var(--accent); + border-radius: 50%; + display: none; + align-items: center; + justify-content: center; + font-size: 0.5rem; + font-weight: 700; + color: var(--bg-dark); + z-index: 2; + box-shadow: 0 2px 8px rgba(245, 158, 11, 0.5); +} + +.note-marker.show { + display: flex; +} + +.note-marker.playing { + animation: notePulse 0.3s ease; +} + +@keyframes notePulse { + 0% { + transform: scale(1); + } + + 50% { + transform: scale(1.3); + } + + 100% { + transform: scale(1); + } +} + +.fret-marker { + position: absolute; + width: 8px; + height: 8px; + background: rgba(255, 255, 255, 0.15); + border-radius: 50%; + pointer-events: none; +} + +.guitar-footer { + margin-top: 1rem; + padding-top: 1rem; + border-top: 1px solid var(--border); + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.guitar-footer-row { + display: flex; + justify-content: space-between; + align-items: center; +} + +.guitar-hint { + font-size: 0.75rem; + color: var(--text-muted); +} + +.footer-controls { + display: flex; + align-items: center; + gap: 1rem; +} + +.clear-btn { + background: var(--bg-elevated); + border: 1px solid var(--border); + color: var(--text-secondary); + padding: 0.3rem 0.6rem; + border-radius: 5px; + font-size: 0.7rem; + font-family: inherit; + cursor: pointer; + transition: all 0.15s; +} + +.clear-btn:hover { + background: var(--border); + color: var(--text-primary); +} + +.sound-toggle { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.8rem; + color: var(--text-secondary); +} + +.toggle-switch { + width: 36px; + height: 20px; + background: var(--bg-elevated); + border-radius: 10px; + position: relative; + cursor: pointer; + transition: background 0.2s; +} + +.toggle-switch.active { + background: var(--accent); +} + +.toggle-switch::after { + content: ''; + position: absolute; + width: 16px; + height: 16px; + background: var(--text-primary); + border-radius: 50%; + top: 2px; + left: 2px; + transition: transform 0.2s; +} + +.toggle-switch.active::after { + transform: translateX(16px); +} + +/* Song Player */ +.song-player { + display: flex; + align-items: center; + gap: 0.75rem; + background: var(--bg-elevated); + border-radius: 8px; + padding: 0.5rem 0.75rem; +} + +.play-btn { + width: 32px; + height: 32px; + background: var(--accent); + border: none; + border-radius: 50%; + color: var(--bg-dark); + font-size: 0.9rem; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.15s; + flex-shrink: 0; +} + +.play-btn:hover { + background: var(--accent-light); + transform: scale(1.05); +} + +.play-btn.playing { + background: var(--accent-dark); +} + +.song-info { + flex: 1; + min-width: 0; +} + +.song-title { + font-size: 0.75rem; + font-weight: 600; + color: var(--text-primary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.song-progress { + width: 100%; + height: 3px; + background: var(--border); + border-radius: 2px; + margin-top: 4px; + overflow: hidden; +} + +.song-progress-bar { + height: 100%; + background: var(--accent); + width: 0%; + transition: width 0.1s linear; +} + +.song-select { + background: var(--bg-dark); + border: 1px solid var(--border); + color: var(--text-secondary); + padding: 0.3rem 0.5rem; + border-radius: 5px; + font-size: 0.7rem; + font-family: inherit; + cursor: pointer; +} + +.song-select:focus { + outline: none; + border-color: var(--accent); +} + +/* Features Section */ +.features { + padding: 6rem 2rem; + background: var(--bg-card); +} + +.section-container { + max-width: 1200px; + margin: 0 auto; +} + +.section-header { + text-align: center; + margin-bottom: 4rem; +} + +.section-label { + font-size: 0.85rem; + color: var(--accent); + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.1em; + margin-bottom: 1rem; +} + +.section-title { + font-size: clamp(2rem, 4vw, 3rem); + font-weight: 700; + margin-bottom: 1rem; + letter-spacing: -0.02em; +} + +.section-description { + font-size: 1.1rem; + color: black; + max-width: 600px; + margin: 0 auto; +} + +.features-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 2rem; +} + +.feature-card { + background: var(--bg-dark); + border: 1px solid var(--border); + border-radius: 16px; + padding: 2rem; + transition: all 0.3s; +} + +.feature-card:hover { + border-color: var(--accent); + transform: translateY(-4px); +} + +.feature-icon { + width: 56px; + height: 56px; + background: var(--bg-elevated); + border-radius: 14px; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 1.5rem; + color: var(--accent); + transition: all 0.3s; +} + +.feature-card:hover .feature-icon { + background: var(--accent); + color: var(--bg-dark); +} + +.feature-card h3 { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.75rem; +} + +.feature-card p { + color: var(--text-secondary); + font-size: 0.95rem; +} + +/* Pricing Section */ +.pricing { + padding: 6rem 2rem; +} + +.billing-toggle { + display: flex; + justify-content: center; + align-items: center; + gap: 0.5rem; + margin-bottom: 3rem; + background: var(--bg-card); + padding: 0.5rem; + border-radius: 12px; + width: fit-content; + margin-left: auto; + margin-right: auto; + border: 1px solid var(--border); +} + +.billing-option { + padding: 0.75rem 1.5rem; + border-radius: 8px; + font-size: 0.9rem; + font-weight: 500; + color: var(--text-secondary); + cursor: pointer; + transition: all 0.2s; + position: relative; + background: transparent; + border: none; + font-family: inherit; +} + +.billing-option:hover { + color: var(--text-primary); +} + +.billing-option.active { + background: var(--accent); + color: var(--bg-dark); +} + +.billing-option .discount-badge { + position: absolute; + top: -8px; + right: -8px; + background: #22c55e; + color: #fff; + font-size: 0.65rem; + font-weight: 700; + padding: 0.2rem 0.4rem; + border-radius: 4px; +} + +.pricing-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 2rem; +} + +.pricing-card { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 20px; + padding: 2.5rem; + position: relative; + transition: all 0.3s; +} + +.pricing-card:hover { + transform: translateY(-4px); +} + +.pricing-card.featured { + border-color: var(--accent); + box-shadow: 0 0 40px rgba(245, 158, 11, 0.15); +} + +.pricing-card.featured::before { + content: 'Most Popular'; + position: absolute; + top: -12px; + left: 50%; + transform: translateX(-50%); + background: var(--accent); + color: var(--bg-dark); + padding: 0.3rem 1rem; + border-radius: 100px; + font-size: 0.75rem; + font-weight: 600; +} + +.pricing-name { + font-size: 1.1rem; + font-weight: 600; + color: var(--text-secondary); + margin-bottom: 0.5rem; +} + +.pricing-price { + font-size: 3rem; + font-weight: 700; + margin-bottom: 0.25rem; + display: flex; + align-items: baseline; + gap: 0.25rem; +} + +.pricing-price .currency { + font-size: 1.5rem; + font-weight: 600; +} + +.pricing-price .period { + font-size: 1rem; + font-weight: 400; + color: var(--text-muted); +} + +.pricing-billed { + font-size: 0.85rem; + color: var(--text-muted); + margin-bottom: 0.5rem; + min-height: 1.2rem; +} + +.pricing-savings { + display: inline-block; + background: rgba(34, 197, 94, 0.15); + color: #22c55e; + font-size: 0.8rem; + font-weight: 600; + padding: 0.25rem 0.75rem; + border-radius: 100px; + margin-bottom: 1rem; + min-height: 1.5rem; +} + +.pricing-savings:empty { + visibility: hidden; +} + +.pricing-description { + color: var(--text-muted); + font-size: 0.9rem; + margin-bottom: 2rem; + padding-bottom: 2rem; + border-bottom: 1px solid var(--border); +} + +.pricing-features { + list-style: none; + margin-bottom: 2rem; +} + +.pricing-features li { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.5rem 0; + color: var(--text-secondary); + font-size: 0.95rem; +} + +.pricing-features li::before { + content: '✓'; + color: var(--accent); + font-weight: 700; +} + +.pricing-btn { + display: block; + text-align: center; + padding: 1rem; + border-radius: 10px; + text-decoration: none; + font-weight: 600; + transition: all 0.2s; +} + +.pricing-card .pricing-btn { + background: var(--bg-elevated); + color: var(--text-primary); + border: 1px solid var(--border); +} + +.pricing-card .pricing-btn:hover { + background: var(--text-primary); + color: var(--bg-dark); +} + +.pricing-card.featured .pricing-btn { + background: var(--accent); + color: var(--bg-dark); + border: none; +} + +.pricing-card.featured .pricing-btn:hover { + background: var(--accent-light); +} + +/* Instructors Section */ +.instructors { + padding: 6rem 2rem; + background: var(--bg-card); +} + +.instructors-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 2rem; +} + +.instructor-card { + text-align: center; +} + +.instructor-image { + width: 160px; + height: 160px; + border-radius: 50%; + margin: 0 auto 1.5rem; + border: 4px solid var(--border); + transition: all 0.3s; + overflow: hidden; + background: var(--bg-elevated); +} + +.instructor-image img { + width: 100%; + height: 100%; + object-fit: cover; + filter: grayscale(20%); + transition: filter 0.3s; +} + +.instructor-card:hover .instructor-image { + border-color: var(--accent); + box-shadow: 0 0 20px rgba(245, 158, 11, 0.3); +} + +.instructor-card:hover .instructor-image img { + filter: grayscale(0%); +} + +.instructor-name { + font-size: 1.1rem; + font-weight: 600; + margin-bottom: 0.25rem; +} + +.instructor-role { + color: var(--accent); + font-size: 0.85rem; + font-weight: 500; + margin-bottom: 0.5rem; +} + +.instructor-bio { + color: var(--text-muted); + font-size: 0.85rem; +} + +/* Testimonials */ +.testimonials { + padding: 6rem 2rem; +} + +.testimonials-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 2rem; +} + +.testimonial-card { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 16px; + padding: 2rem; +} + +.testimonial-stars { + color: var(--accent); + font-size: 1rem; + margin-bottom: 1rem; +} + +.testimonial-text { + color: var(--text-secondary); + font-size: 1rem; + line-height: 1.7; + margin-bottom: 1.5rem; +} + +.testimonial-author { + display: flex; + align-items: center; + gap: 1rem; +} + +.testimonial-avatar { + width: 64px; + height: 64px; + border-radius: 50%; + overflow: hidden; + flex-shrink: 0; +} + +.testimonial-avatar img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.testimonial-name { + font-weight: 600; + font-size: 0.95rem; +} + +.testimonial-title { + color: var(--text-muted); + font-size: 0.8rem; +} + +/* CTA Section */ +.cta { + padding: 6rem 2rem; + background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-dark) 100%); + text-align: center; + position: relative; + overflow: hidden; +} + +.cta::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 600px; + height: 600px; + background: black; + pointer-events: none; +} + +.cta-content { + position: relative; + z-index: 1; +} + +.cta h2 { + font-size: clamp(2rem, 4vw, 3rem); + font-weight: 700; + margin-bottom: 1rem; +} + +.cta p { + color: var(--text-secondary); + font-size: 1.1rem; + margin-bottom: 2rem; + max-width: 500px; + margin-left: auto; + margin-right: auto; +} + +/* Footer */ +footer { + padding: 4rem 2rem 2rem; + border-top: 1px solid var(--border); +} + +.footer-container { + max-width: 1200px; + margin: 0 auto; +} + +.footer-grid { + display: grid; + grid-template-columns: 2fr 1fr 1fr 1fr; + gap: 3rem; + margin-bottom: 3rem; +} + +.footer-brand p { + color: var(--text-muted); + font-size: 0.9rem; + margin-top: 1rem; + max-width: 280px; +} + +.footer-title { + font-size: 0.85rem; + font-weight: 600; + color: var(--text-secondary); + text-transform: uppercase; + letter-spacing: 0.05em; + margin-bottom: 1.5rem; +} + +.footer-links { + list-style: none; +} + +.footer-links li { + margin-bottom: 0.75rem; +} + +.footer-links a { + color: var(--text-muted); + text-decoration: none; + font-size: 0.9rem; + transition: color 0.2s; +} + +.footer-links a:hover { + color: var(--accent); +} + +.footer-bottom { + padding-top: 2rem; + border-top: 1px solid var(--border); + display: flex; + justify-content: space-between; + align-items: center; + font-size: 0.85rem; + color: var(--text-muted); +} + +.footer-bottom a { + color: var(--accent); + text-decoration: none; + transition: color 0.2s; +} + +.footer-bottom a:hover { + color: var(--accent-light); +} + +/* Mobile Menu */ +.mobile-menu-btn { + display: none; + background: none; + border: none; + color: var(--text-primary); + font-size: 1.5rem; + cursor: pointer; +} + +/* Responsive */ +@media (max-width: 1024px) { + .hero-container { + grid-template-columns: 1fr; + text-align: center; + } + + .hero-content { + order: 1; + } + + .guitar-wrapper { + order: 0; + max-width: 500px; + margin: 0 auto; + } + + .hero-description { + margin: 0 auto 2rem; + } + + .hero-buttons { + justify-content: center; + } + + .hero-stats { + justify-content: center; + } + + .features-grid, + .pricing-grid, + .testimonials-grid { + grid-template-columns: 1fr; + max-width: 500px; + margin: 0 auto; + } + + .billing-toggle { + flex-wrap: wrap; + justify-content: center; + } + + .billing-option { + padding: 0.6rem 1.2rem; + font-size: 0.85rem; + } + + .instructors-grid { + grid-template-columns: repeat(2, 1fr); + } + + .footer-grid { + grid-template-columns: 1fr 1fr; + } +} + +@media (max-width: 880px) { + + .nav-links, + .nav-cta { + display: none; + } + + .mobile-menu-btn { + display: block; + } + + /* Mobile Menu */ + .nav-links.active { + display: flex; + flex-direction: column; + position: absolute; + top: 100%; + left: 0; + right: 0; + background: rgba(13, 13, 13, 0.98); + backdrop-filter: blur(20px); + padding: 0.5rem 0 0 0; + gap: 0; + } + + .nav-links.active li { + border-bottom: 1px solid var(--border); + } + + .nav-links.active li:last-child { + border-bottom: none; + } + + .nav-links.active a { + display: block; + padding: 1.35rem 2rem; + font-size: 1.1rem; + } + + .nav-cta.active { + display: block; + position: absolute; + top: 100%; + left: 0; + right: 0; + text-align: center; + background: var(--bg-dark); + padding: 1.5rem 2rem; + border-top: 1px solid var(--border); + } + + .nav-cta.active span { + display: block; + background: var(--accent); + color: var(--bg-dark); + padding: 1rem; + border-radius: 8px; + font-weight: 600; + } + + .hero { + padding: 6rem 1rem 3rem; + } + + .hero h1 { + font-size: 2rem; + } + + .hero-buttons { + flex-direction: column; + } + + .hero-stats { + flex-direction: column; + gap: 1.5rem; + } + + .stat { + text-align: center; + } + + .guitar-card { + padding: 1rem; + } + + .fretboard-grid { + grid-template-rows: repeat(6, 28px); + } + + .string-labels { + height: calc(6 * 28px); + left: -24px; + } + + .string-label { + height: 28px; + font-size: 0.6rem; + } + + .note-marker { + width: 14px; + height: 14px; + font-size: 0.4rem; + } + + .instructors-grid { + grid-template-columns: 1fr; + } + + .footer-grid { + grid-template-columns: 1fr; + text-align: center; + } + + .footer-brand p { + margin: 1rem auto; + } + + .footer-bottom { + flex-direction: column; + gap: 1rem; + text-align: center; + } +} \ No newline at end of file diff --git a/users_microservice/src/main/resources/templates/home/templatemo-606-string-scripts.js b/users_microservice/src/main/resources/templates/home/templatemo-606-string-scripts.js new file mode 100644 index 0000000..b0c0755 --- /dev/null +++ b/users_microservice/src/main/resources/templates/home/templatemo-606-string-scripts.js @@ -0,0 +1,83 @@ +// Mobile menu toggle +const mobileMenuBtn = document.querySelector('.mobile-menu-btn'); +const navLinks = document.querySelector('.nav-links'); +const navCta = document.querySelector('.nav-cta'); + +mobileMenuBtn.addEventListener('click', () => { + const isOpen = navLinks.classList.toggle('active'); + navCta.classList.toggle('active', isOpen); + mobileMenuBtn.textContent = isOpen ? '✕' : '☰'; + + // Dynamically position CTA below nav-links + if (isOpen) { + setTimeout(() => { + const navLinksHeight = navLinks.offsetHeight; + navCta.style.top = `calc(100% + ${navLinksHeight}px)`; + }, 10); + } +}); + +// Close mobile menu when clicking a link +navLinks.querySelectorAll('a').forEach(link => { + link.addEventListener('click', () => { + navLinks.classList.remove('active'); + navCta.classList.remove('active'); + mobileMenuBtn.textContent = '☰'; + }); +}); + +// Pricing toggle +const PRICING = { + monthly: { + price: 30, + period: '/mo', + billed: '', + savings: '' + }, + quarterly: { + price: 25.50, + period: '/mo', + billed: 'Billed $76.50 every 3 months', + savings: 'Save 15%' + }, + yearly: { + price: 21, + period: '/mo', + billed: 'Billed $252 per year', + savings: 'Save 30%' + } +}; + +function updatePricing(billing) { + const plan = PRICING[billing]; + + // Update active button + document.querySelectorAll('.billing-option').forEach(btn => { + btn.classList.toggle('active', btn.dataset.billing === billing); + }); + + // Update price display + const priceEl = document.getElementById('proPrice'); + const billedEl = document.getElementById('proBilled'); + const savingsEl = document.getElementById('proSavings'); + + // Animate price change + priceEl.style.opacity = '0'; + priceEl.style.transform = 'translateY(-10px)'; + + setTimeout(() => { + priceEl.textContent = plan.price % 1 === 0 ? plan.price : plan.price.toFixed(2); + billedEl.textContent = plan.billed; + savingsEl.textContent = plan.savings; + + priceEl.style.opacity = '1'; + priceEl.style.transform = 'translateY(0)'; + }, 150); +} + +document.querySelectorAll('.billing-option').forEach(btn => { + btn.addEventListener('click', () => updatePricing(btn.dataset.billing)); +}); + +// Add transition to price element +document.getElementById('proPrice').style.transition = 'all 0.15s ease'; \ No newline at end of file