Skip to content

Azsuramina/AzureAssent

BranchesTags

Repository files navigation

Azurassent Website

Consciousness Consulting Through Narrative Architecture

A complete, professional website for Azurassent - featuring cosmic-organic design, interactive tools, and comprehensive service presentation.

📁 File Structure

azurassent-website/
├── index.html              # Homepage with hero, services overview, interactive tools
├── services.html           # Detailed service offerings across 3 tiers
├── about.html              # Founder story and philosophy
├── contact.html            # Contact options, booking, inquiry form
├── resources.html          # Coming soon page with newsletter signup
├── styles.css              # Global styles and base components
├── services-styles.css     # Service page specific styles
├── about-styles.css        # About page specific styles
├── contact-styles.css      # Contact page specific styles
├── resources-styles.css    # Resources page specific styles
├── scripts.js              # Global JavaScript (navigation, ROI calculator, diagnostic)
├── contact-scripts.js      # Contact form validation and handling
├── resources-scripts.js    # Newsletter subscription handling
└── README.md              # This file

🎨 Design Features

Color Palette

  • Primary: Deep azure/midnight blue (#1a237e to #0d47a1)
  • Accent: Luminous azure/sky blue (#42a5f5 to #64b5f6)
  • Supporting: Deep purples, gold accents
  • Background: Rich darks (#0a0e27, #12162d)
  • Text: Crisp whites and light grays

Typography

  • Headers: Cormorant Garamond (serif - mystical, elegant)
  • Body: Inter (sans-serif - clean, readable)

Visual Style

  • Cosmic-organic hybrid aesthetic
  • Subtle animations and parallax effects
  • Dark theme with luminous accents
  • Sacred geometry elements
  • Professional mysticism throughout

🔧 Interactive Tools

1. ROI Calculator

Location: Homepage (index.html#roi-calculator-section)

Helps potential clients understand potential return on brand strategy investment.

How it works:

  • Slider input for investment amount ($750 - $10,000+)
  • Real-time calculation of potential returns
  • Based on industry research (Harvard Business Review, Forbes, BCG)
  • Includes required disclaimer

Customization: Edit scripts.js function updateROICalculation() to adjust multipliers.

2. Story Coherence Diagnostic

Location: Homepage (index.html#story-diagnostic)

8-question interactive assessment revealing narrative friction points.

How it works:

  • Multiple choice questions about brand clarity, team alignment, etc.
  • Calculates coherence score (0-100)
  • Identifies primary breakdown point
  • Reveals "accidental archetype"
  • Provides quick-win action
  • Recommends appropriate service

Customization: Edit scripts.js array diagnosticQuestions to modify questions. Edit analyzeDiagnostic() function to adjust scoring logic.

📧 Email Integration

Contact Form

File: contact.html

To integrate with your backend:

  1. Update the form action in contact-scripts.js:
fetch('YOUR_BACKEND_URL/api/contact', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(data)
})
  1. Popular options:
    • Formspree: Simple form backend (https://formspree.io)
    • Netlify Forms: Built-in if hosting on Netlify
    • Custom backend: Node.js/Express, Python/Flask, etc.

Newsletter Signup

File: resources.html

To integrate with email service:

  1. Update the subscription handler in resources-scripts.js:
fetch('YOUR_EMAIL_SERVICE_API/subscribe', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({ email: email })
})
  1. Popular email services:
    • Mailchimp: Full-featured email marketing
    • ConvertKit: Creator-focused
    • Buttondown: Simple newsletter service
    • Substack: Newsletter platform

📅 Calendly Integration

Location: contact.html (booking section)

To integrate Calendly:

  1. Replace the placeholder in contact.html with:
<!-- Calendly inline widget begin -->
<div class="calendly-inline-widget" 
     data-url="https://calendly.com/YOUR-USERNAME/discovery-call" 
     style="min-width:320px;height:630px;">
</div>
<script type="text/javascript" 
        src="https://assets.calendly.com/assets/external/widget.js" 
        async>
</script>
<!-- Calendly inline widget end -->

  1. Get your Calendly URL:

    • Log into Calendly
    • Create or select your event type
    • Copy the scheduling link
    • Replace YOUR-USERNAME/discovery-call in the code above

  2. Style customization:

    • Add ?hide_event_type_details=1 to hide event details
    • Add ?hide_gdpr_banner=1 to hide GDPR banner
    • Add ?background_color=0a0e27&text_color=f5f5f5&primary_color=42a5f5 for dark theme

🚀 Deployment

Option 1: Netlify (Recommended)

  1. Push code to GitHub repository
  2. Connect repository to Netlify
  3. Deploy settings:
    • Build command: (none needed - static site)
    • Publish directory: /
  4. Custom domain setup in Netlify DNS settings

Option 2: Vercel

  1. Import GitHub repository to Vercel
  2. Deploy as static site
  3. Add custom domain in settings

Option 3: Traditional Hosting

  1. Upload all files to web host via FTP
  2. Ensure file structure is maintained
  3. Point domain to hosting directory

Option 4: GitHub Pages

  1. Push to GitHub repository
  2. Enable GitHub Pages in repo settings
  3. Select branch and folder
  4. Access via username.github.io/repository-name

🔍 SEO Optimization

Already Implemented

  • ✅ Meta descriptions on all pages
  • ✅ Keyword-rich content
  • ✅ Semantic HTML structure
  • ✅ Alt text placeholders for images
  • ✅ Mobile responsive design
  • ✅ Fast load times (minimal external scripts)

To Complete

  1. Add Google Analytics:

    <!-- Add before </head> on all pages -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

  2. Create sitemap.xml:

    <?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url><loc>https://azurassent.com/</loc><priority>1.0</priority></url>
  <url><loc>https://azurassent.com/services.html</loc><priority>0.9</priority></url>
  <url><loc>https://azurassent.com/about.html</loc><priority>0.8</priority></url>
  <url><loc>https://azurassent.com/contact.html</loc><priority>0.9</priority></url>
  <url><loc>https://azurassent.com/resources.html</loc><priority>0.7</priority></url>
</urlset>

  3. Add robots.txt:

    User-agent: *
Allow: /
Sitemap: https://azurassent.com/sitemap.xml

  4. Submit to search engines:

    • Google Search Console
    • Bing Webmaster Tools

🎯 Customization Guide

Changing Colors

Edit CSS variables in styles.css:

:root {
    --deep-azure: #1a237e;
    --luminous-azure: #42a5f5;
    --cosmic-gold: #ffd700;
    /* etc. */
}

Updating Content

  1. Services: Edit services.html - all service descriptions are in plain HTML
  2. About/Philosophy: Edit about.html - update founder story and principles
  3. Contact Info: Update email address in all files (search for hello@azurassent.com)

Adding Images

  1. Create an images/ folder
  2. Add your images (cosmic portraits, logos, etc.)
  3. Update image references in HTML: 
    <img src="images/cosmic-portrait.jpg" alt="Aszuramina portrait">

Modifying Service Pricing

Update pricing in:

  • index.html (services overview section)
  • services.html (all tier sections)
  • Both files should match for consistency

📱 Mobile Responsiveness

All pages are fully responsive with breakpoints:

  • Desktop: 968px and above
  • Tablet: 640px - 968px
  • Mobile: Below 640px

Test on multiple devices or use browser developer tools.

♿ Accessibility

Implemented Features

  • ✅ Semantic HTML5 elements
  • ✅ ARIA labels on interactive elements
  • ✅ Keyboard navigation support
  • ✅ Focus states on all interactive elements
  • ✅ Sufficient color contrast (WCAG AA compliant)
  • ✅ Screen reader friendly structure

To Test

  1. Use screen reader (NVDA, JAWS, or VoiceOver)
  2. Navigate with keyboard only (Tab, Enter, Esc)
  3. Run accessibility audit (Lighthouse in Chrome DevTools)

🐛 Troubleshooting

Fonts Not Loading

  • Check internet connection (fonts load from Google Fonts CDN)
  • Fallback fonts will display if CDN is unavailable

Interactive Tools Not Working

  • Check browser console for JavaScript errors
  • Ensure scripts.js is loading (check Network tab in DevTools)
  • Clear browser cache

Forms Not Submitting

  • Check contact-scripts.js and resources-scripts.js
  • Verify backend integration is complete
  • Check browser console for errors

Styling Issues

  • Clear browser cache
  • Check CSS file paths in HTML
  • Verify no CSS syntax errors (use W3C validator)

📊 Performance Optimization

Current Optimizations

  • Minimal external scripts (only Google Fonts)
  • Optimized CSS (no unused styles)
  • Efficient JavaScript (vanilla JS, no frameworks)
  • Lazy loading ready (add to images as needed)

Further Optimization

  1. Compress images: Use WebP format, optimize file sizes
  2. Minify CSS/JS: Use build tools before production
  3. Enable caching: Configure server headers
  4. CDN: Use content delivery network for static assets

🔐 Security Considerations

For Production

  1. HTTPS: Ensure SSL certificate is installed
  2. Form validation: Server-side validation required (currently client-side only)
  3. Rate limiting: Implement on contact/newsletter forms
  4. CSRF protection: Add tokens to forms if using custom backend
  5. Content Security Policy: Add CSP headers

📞 Support & Maintenance

Regular Updates

  • Review and update service offerings
  • Keep pricing current
  • Add case studies to resources page when ready
  • Monitor contact form submissions
  • Update newsletter subscribers

Browser Compatibility

Tested and compatible with:

  • Chrome/Edge (Chromium) 90+
  • Firefox 88+
  • Safari 14+
  • Mobile browsers (iOS Safari, Chrome Mobile)

📝 License & Credits

Built for: Azurassent (Shiloh Cureton / Aszuramina)

Design System:

  • Typography: Google Fonts (Cormorant Garamond, Inter)
  • Icons: Unicode symbols
  • Colors: Custom cosmic-organic palette

Code:

  • Pure HTML5, CSS3, Vanilla JavaScript
  • No frameworks or libraries (except Google Fonts)
  • Fully customizable and maintainable

🎓 Next Steps

  1. Customize Content:

    • Replace placeholder email addresses
    • Add actual Calendly integration
    • Update any remaining placeholder text

  2. Add Images:

    • Create cosmic portrait for founder section
    • Add any brand imagery or icons
    • Optimize for web (compress, resize)

  3. Backend Integration:

    • Set up contact form backend
    • Integrate newsletter service
    • Add analytics tracking

  4. Deploy:

    • Choose hosting platform
    • Configure custom domain
    • Test all functionality

  5. Launch:

    • Submit to search engines
    • Share on social media
    • Start driving traffic

🖤✨💙

Give permission to what you already are.

For questions or support with this website, contact the developer or refer to this documentation.

Website Version: 1.0
Last Updated: 2024
Status: Ready for deployment

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages