Revamp landing page styling and layout

[MrFruitDude]

Summary

• rebuild the homepage with a new hero, services highlights, partnership story, lifecycle overview, and testimonials for a premium studio feel
• introduce a refreshed design system with gradients, glass surfaces, button styles, and layout utilities shared across the site
• update the navigation header and footer with gradient branding, expanded links, calls to action, and a newsletter prompt

Testing

• bundle exec jekyll build (fails: bundler could not find jekyll in the current environment)
• bundle install (fails: lockfile requires bundler 1.17.2 which is incompatible with Ruby 3.4 because it calls String#untaint)

---

https://chatgpt.com/codex/tasks/task_e_68c8525a2e008326ab13e0cd4e914d25

[gemini-code-assist]

Summary of Changes

Hello @MrFruitDude, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request delivers a substantial visual and structural overhaul to the website's core pages, specifically the landing page, header, and footer. The changes introduce a modern, sophisticated design language and enhance user engagement through improved navigation and content presentation, aligning the site with a 'human + AI product studio' feel.

Highlights

• Landing Page Redesign: The main landing page (index.md) has been completely rebuilt with new sections including a hero, services highlights, a partnership story, a lifecycle overview, and testimonials, aiming for a premium studio aesthetic.
• Refreshed Design System: A new design system has been introduced, utilizing gradients, glass surfaces, updated button styles, and layout utilities, all managed through a comprehensive update to main.scss.
• Navigation and Footer Enhancements: The navigation header and footer have been significantly updated with new branding elements, expanded links, clear calls to action, and a newsletter prompt in the footer.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request delivers a major and impressive visual overhaul for the landing page, header, and footer. The new design system is modern, well-structured, and leverages CSS custom properties effectively. The updated content and layout create a much more professional and engaging user experience. My feedback focuses on a few opportunities to enhance semantic HTML, improve accessibility, and ensure long-term CSS maintainability. Overall, this is a fantastic step forward for the project's frontend.

[gemini-code-assist]

Using <br> tags for vertical spacing is not a best practice for semantics or maintainability. The parent div already has the space-y-2 Tailwind utility, which will correctly space the links if they are block-level elements. Making the links block elements is a more robust solution.

Suggested change

	<a href="{{ '/about/' | relative_url }}">About Nova</a><br>
	<a href="{{ '/services/' | relative_url }}">Services</a><br>
	<a href="{{ '/contact/' | relative_url }}">Contact</a>
	<a href="{{ '/about/' | relative_url }}" class="block">About Nova</a>
	<a href="{{ '/services/' | relative_url }}" class="block">Services</a>
	<a href="{{ '/contact/' | relative_url }}" class="block">Contact</a>

[gemini-code-assist]

Similar to the other link list in the footer, using <br> tags for spacing should be avoided. Making the links block-level elements will work with the parent's space-y-2 class and improve the code's structure and semantics.

Suggested change

	<a href="{{ '/faq/' | relative_url }}">FAQs</a><br>
	<a href="{{ '/apps/' | relative_url }}">App Gallery</a><br>
	<a href="{{ '/deploy-to-github/' | relative_url }}">Deploy to GitHub</a>
	<a href="{{ '/faq/' | relative_url }}" class="block">FAQs</a>
	<a href="{{ '/apps/' | relative_url }}" class="block">App Gallery</a>
	<a href="{{ '/deploy-to-github/' | relative_url }}" class="block">Deploy to GitHub</a>

[gemini-code-assist]

For better accessibility, the mobile menu toggle button should have aria-controls and aria-expanded attributes. This helps screen reader users understand the button's function and the state of the menu.

1. Add aria-controls="mobile-menu" and aria-expanded="false" to the <button>.
2. Add aria-hidden="true" to the SVG icon, as its purpose is decorative.
3. Update the corresponding JavaScript (lines 52-56) to toggle the aria-expanded attribute's value between true and false on click, in sync with the menu's visibility.

Suggested change

	<button id="menu-toggle" type="button" class="md:hidden inline-flex items-center justify-center rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-gray-100 hover:text-white focus:outline-none focus:ring-2 focus:ring-sky-400/50">
	<span class="sr-only">Toggle navigation</span>
	<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
	</svg>
	</button>
	<button id="menu-toggle" type="button" class="md:hidden inline-flex items-center justify-center rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-gray-100 hover:text-white focus:outline-none focus:ring-2 focus:ring-sky-400/50" aria-controls="mobile-menu" aria-expanded="false">
	<span class="sr-only">Toggle navigation</span>
	<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
	</svg>
	</button>

[gemini-code-assist]

To complete the accessibility improvement for the menu toggle, please update this click handler to manage the aria-expanded attribute. This communicates the state of the mobile menu (expanded or collapsed) to assistive technologies.

Suggested change

	menuToggle.addEventListener('click', function() {
	mobileMenu.classList.toggle('hidden');
	});
	menuToggle.addEventListener('click', function() {
	mobileMenu.classList.toggle('hidden');
	const isExpanded = menuToggle.getAttribute('aria-expanded') === 'true';
	menuToggle.setAttribute('aria-expanded', !isExpanded);
	});

[gemini-code-assist]

The z-index values are hardcoded as magic numbers throughout the stylesheet (e.g., -2, -3, 1, 50). This can make managing stacking contexts difficult and error-prone as the project grows.

Consider defining a z-index scale using CSS custom properties in the :root block. This creates a single source of truth for your layering system.

Example:

:root {
  /* ... other variables */
  --z-deep-background: -10;
  --z-background: -1;
  --z-default: 1;
  --z-header: 50;
  --z-modal: 100;
}

Then you can use them like z-index: var(--z-background);.

[gemini-code-assist]

This block of legacy utilities suggests an incomplete migration to the new design system. Keeping this code can lead to CSS bloat, maintenance challenges, and design inconsistencies across the site.

If these styles are no longer in use, they should be removed. If they are still required for other pages, it would be beneficial to create a follow-up ticket to migrate those pages and eventually remove this legacy code.

[gemini-code-assist]

For semantic correctness, testimonial quotes should be wrapped in <blockquote> tags rather than just <p> tags. This helps search engines and assistive technologies understand the content as a quotation. This comment also applies to the other testimonials.

Suggested change

	<p>“Nova redefined how our care teams collaborate. Workshops turned into tangible features in record time, and the AI concierge we launched now handles thousands of requests while feeling deeply human.”</p>
	<blockquote><p>“Nova redefined how our care teams collaborate. Workshops turned into tangible features in record time, and the AI concierge we launched now handles thousands of requests while feeling deeply human.”</p></blockquote>