website for Grab N Go Mart

[shiva1837]

Motivation

• Provide a conversion-focused, mobile-first marketing site that increases walk-ins and encourages tap-to-call for Grab N Go Mart.
• Present a premium, minimal brand experience with the requested palette, typography direction, and concise persuasive copy to position the store as the neighborhood go-to.
• Include local SEO and structured data so the site targets local intent and surfaces accurate store details for customers and search engines.

Description

• Added a new site under grab-n-go-mart-site/ containing index.html, styles.css, and script.js with the full page structure and assets.
• Built all conversion sections: hero with primary CTA (Call Now) and secondary CTA (Get Directions), trust row, about, products (category cards), differentiators, testimonials, location/store info with map placeholder, final CTA band, footer, and a sticky mobile CTA bar.
• Implemented local SEO and schema: page title, meta description, and ConvenienceStore JSON-LD including name, telephone, address, opening hours, and aggregate rating.
• Implemented responsive, mobile-first CSS with the requested color palette, rounded cards, soft shadows, subtle hover effects, typography choices, and a small script to populate the current year in the footer.

Testing

• Ran node --check grab-n-go-mart-site/script.js to validate the small client script and it completed successfully.
• Verified files were created and inspected line counts with wc -l grab-n-go-mart-site/index.html grab-n-go-mart-site/styles.css grab-n-go-mart-site/script.js, which succeeded.
• Confirmed basic smoke inspection of the generated HTML and CSS by opening the files in the workspace (manual visual render not executed in this environment).

---

Codex Task

[Copilot]

Pull request overview

Adds a standalone, mobile-first marketing microsite for Grab N Go Mart under grab-n-go-mart-site/, including conversion-focused sections and basic local SEO/structured data.

Changes:

• Created a single-page marketing site (index.html) with CTAs, sections, and JSON-LD ConvenienceStore schema.
• Added mobile-first styling (styles.css) including layout grids, cards, and a sticky mobile CTA bar.
• Added a small client script (script.js) to populate the current year in the footer.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 6 comments.

File	Description
grab-n-go-mart-site/index.html	Page structure, CTAs, local SEO meta, and JSON-LD structured data.
grab-n-go-mart-site/styles.css	Core theme tokens and responsive/mobile-first layout + components.
grab-n-go-mart-site/script.js	Footer year injection.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

scroll-behavior: smooth can be problematic for users who prefer reduced motion. Add a @media (prefers-reduced-motion: reduce) override to disable smooth scrolling (and ideally also reduce/disable transform transitions/animations) to improve accessibility.

Suggested change

	@media (prefers-reduced-motion: reduce) {
	html {
	scroll-behavior: auto !important;
	}
	*, *::before, *::after {
	animation: none !important;
	transition: none !important;
	}
	}

[shiva1837]

@copilot apply changes based on the comments in this thread

[Copilot]

@copilot apply changes based on the comments in this thread

Applied all 6 review suggestions in commit f9c1acf:

• JSON-LD types (index.html:51-52): ratingValue and reviewCount are now numeric; added bestRating: 5 and worstRating: 1.
• map-placeholder ARIA (index.html:191): Removed conflicting role="img"; aria-label remains.
• Link underlines (styles.css:55): Added a:hover/a:focus-visible { text-decoration: underline } for WCAG 1.4.1, scoped text-decoration: none to button-like links (.btn, .brand, .sticky-cta a).
• Button focus ring (styles.css:110-114): Added outline: 3px solid var(--accent); outline-offset: 3px on .btn:focus-visible for a clear keyboard focus indicator.
• Reduced motion (styles.css:19): Added @media (prefers-reduced-motion: reduce) that resets scroll-behavior: auto and disables all transitions/animations.
• Fallback year (index.html:223): <span id="year">2024</span> now shows 2024 without JS, and the script updates it when available.