Conversation
…alian - Implemented new landing page components: Hero, Services, Pricing, and CTA. - Added translations for English and Italian languages, including navigation, hero section, services, pricing plans, and footer. - Created new Astro pages for English and Italian versions of the landing page. - Enhanced the pricing section with detailed plans and features. - Introduced a services section highlighting the Bastion SOCaaS offering.
…Services - Implemented Cta component with animations and translations for English and Italian. - Created Hero component featuring a dynamic background and scroll animations. - Developed Plans component to display different service plans with animations and translations. - Added Pricing component to showcase flexible pricing plans with detailed features. - Introduced Services component highlighting cybersecurity solutions and their features.
- Replaced existing components with new sections: VideoSection, SecuritySection, MonitoringSection, ComparisonSection, Pricing, FAQSection, ReservationSection, and Cta. - Added ComparisonSection to highlight cost comparison between traditional SOC and Bastion SOCaaS. - Introduced FAQSection to address common queries about SOCaaS. - Implemented MonitoringSection to emphasize 24/7 monitoring capabilities. - Created ReservationSection for booking introductory calls with the security team. - Developed SecuritySection to outline the importance of security and potential risks without proper measures. - Added VideoSection for a visual introduction to Bastion's services.
…o sections - Deleted the Cta and Services components to streamline the codebase. - Refactored the Pricing component to utilize centralized translations and improved layout. - Enhanced the VideoSection component with new animations and background effects. - Updated translations to include new keys for navigation and video sections. - Adjusted layout components to pass locale for improved internationalization.
…rove UI consistency - Moved FAQ, Monitoring, Reservation, and Security sections to use translations from a centralized file. - Updated FAQ section to include background animations and improved layout. - Enhanced Monitoring section with new background animations and adjusted spacing. - Refined Reservation section layout and animations for better user experience. - Improved Security section with new background effects and consistent icon usage. - Adjusted text sizes and spacing across all sections for better readability and responsiveness.
…nd optimizing layout
…d readability and performance
…ew background elements; update translations and add video asset
… components; streamline section layouts
…internationalization support
… improved localization; add Services and Blog translations
…sh and Italian pages; update descriptions and titles for better clarity
…; enhance localization for English and Italian pages
… localization - Updated MonitoringSection, Pricing, ReservationSection, SecuritySection, ServicesHero, ServicesSection, and VideoSection to include overflow-hidden for better layout control. - Enhanced translations for various sections, including monitoring, pricing, and services, to improve clarity and consistency. - Replaced hardcoded strings with translation keys for better localization support. - Adjusted background components to include z-index for proper layering. - Improved button and label texts for better user experience.
…erstanding of SOCaaS and service offerings
…nslation entries for clarity and consistency
…g, and pricing sections; enhance translation entries for consistency
…gle behavior and aria attributes
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
8 issues found across 29 files
Confidence score: 3/5
- There is some meaningful regression risk before merge:
src/components/react/landing/hero.tsxusesMath.random()during render (high confidence), which can cause SSR/client hydration mismatches and visible instability. - A few medium-severity, user-facing issues are concrete and likely to affect behavior: malformed
backgroundImagestyling insrc/components/react/landing/services-hero.tsx, redirect history handling insrc/pages/index.astro, andaria-disablednot actually preventing navigation insrc/components/react/landing/services-section.tsx. - Accessibility concerns are also present (reduced-motion handling in
src/components/react/landing/pricing.tsxand missing FAQ state attributes insrc/components/react/landing/faq-section.tsx), which raises risk for affected users even if core flows still work. - Pay close attention to
src/components/react/landing/hero.tsx,src/components/react/landing/services-hero.tsx,src/pages/index.astro, andsrc/components/react/landing/services-section.tsx- these contain the highest-impact rendering/navigation issues.
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="src/components/react/landing/services-hero.tsx">
<violation number="1" location="src/components/react/landing/services-hero.tsx:81">
P2: The inline style is malformed: `backgroundImage` contains broken CSS and includes `size` instead of using a separate `backgroundSize` property.</violation>
</file>
<file name="src/pages/index.astro">
<violation number="1" location="src/pages/index.astro:24">
P2: Use `window.location.replace(...)` for this automatic redirect so the root page does not remain in browser history and trap back navigation.</violation>
</file>
<file name="src/components/react/landing/security-section.tsx">
<violation number="1" location="src/components/react/landing/security-section.tsx:154">
P3: `items-top` is not a valid Tailwind class; use `items-start` so the icon and text are consistently top-aligned.</violation>
</file>
<file name="src/components/react/landing/pricing.tsx">
<violation number="1" location="src/components/react/landing/pricing.tsx:56">
P2: Continuous transform animations ignore reduced-motion user preferences. Gate looping/transform animation with `useReducedMotion` (or a MotionConfig reduced-motion policy) to avoid accessibility issues for motion-sensitive users.</violation>
</file>
<file name="src/components/react/landing/faq-section.tsx">
<violation number="1" location="src/components/react/landing/faq-section.tsx:43">
P3: Add `aria-expanded` (and ideally `aria-controls` tied to the panel) so screen readers can announce the open/closed state of each FAQ item.</violation>
</file>
<file name="src/components/react/landing/services-section.tsx">
<violation number="1" location="src/components/react/landing/services-section.tsx:178">
P2: `aria-disabled` alone does not disable anchor navigation; prevent click behavior when `comingSoon` is true.</violation>
</file>
<file name="src/components/react/landing/hero.tsx">
<violation number="1" location="src/components/react/landing/hero.tsx:15">
P1: Avoid `Math.random()` in render for SSR-hydrated output; use deterministic values so server and client initial render match.</violation>
<violation number="2" location="src/components/react/landing/hero.tsx:195">
P3: This visible label is hardcoded in English; make it locale-dependent to keep the hero fully translated.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
| function ParticleField() { | ||
| const particles = Array.from({ length: 15 }, (_, i) => ({ | ||
| id: i, | ||
| x: Math.random() * 100, |
There was a problem hiding this comment.
P1: Avoid Math.random() in render for SSR-hydrated output; use deterministic values so server and client initial render match.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At src/components/react/landing/hero.tsx, line 15:
<comment>Avoid `Math.random()` in render for SSR-hydrated output; use deterministic values so server and client initial render match.</comment>
<file context>
@@ -0,0 +1,203 @@
+function ParticleField() {
+ const particles = Array.from({ length: 15 }, (_, i) => ({
+ id: i,
+ x: Math.random() * 100,
+ delay: Math.random() * 5,
+ duration: Math.random() * 8 + 8,
</file context>
| <script is:inline> | ||
| const lang = navigator.language || navigator.userLanguage || "en"; | ||
| const locale = lang.startsWith("it") ? "/it/" : "/en/"; | ||
| window.location.href = locale; |
There was a problem hiding this comment.
P2: Use window.location.replace(...) for this automatic redirect so the root page does not remain in browser history and trap back navigation.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At src/pages/index.astro, line 24:
<comment>Use `window.location.replace(...)` for this automatic redirect so the root page does not remain in browser history and trap back navigation.</comment>
<file context>
@@ -1,439 +1,30 @@
+ <script is:inline>
+ const lang = navigator.language || navigator.userLanguage || "en";
+ const locale = lang.startsWith("it") ? "/it/" : "/en/";
+ window.location.href = locale;
+ </script>
+</head>
</file context>
Suggested change
| window.location.href = locale; | |
| window.location.replace(locale); |
| }} | ||
| transition={{ | ||
| duration: 15, | ||
| repeat: Infinity, |
There was a problem hiding this comment.
P2: Continuous transform animations ignore reduced-motion user preferences. Gate looping/transform animation with useReducedMotion (or a MotionConfig reduced-motion policy) to avoid accessibility issues for motion-sensitive users.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At src/components/react/landing/pricing.tsx, line 56:
<comment>Continuous transform animations ignore reduced-motion user preferences. Gate looping/transform animation with `useReducedMotion` (or a MotionConfig reduced-motion policy) to avoid accessibility issues for motion-sensitive users.</comment>
<file context>
@@ -0,0 +1,281 @@
+ }}
+ transition={{
+ duration: 15,
+ repeat: Infinity,
+ ease: `easeInOut`,
+ }}
</file context>
| variants={itemVariants} | ||
| className="border border-neutral-200 rounded-xl" | ||
| > | ||
| <button |
There was a problem hiding this comment.
P3: Add aria-expanded (and ideally aria-controls tied to the panel) so screen readers can announce the open/closed state of each FAQ item.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At src/components/react/landing/faq-section.tsx, line 43:
<comment>Add `aria-expanded` (and ideally `aria-controls` tied to the panel) so screen readers can announce the open/closed state of each FAQ item.</comment>
<file context>
@@ -0,0 +1,115 @@
+ variants={itemVariants}
+ className="border border-neutral-200 rounded-xl"
+ >
+ <button
+ onClick={onToggle}
+ className="w-full flex items-center justify-between p-4 md:p-5 text-left hover:bg-neutral-50 transition-colors"
</file context>
| transition={{ repeat: Infinity, duration: 1.8, ease: "easeInOut" }} | ||
| className="flex flex-col items-center gap-2" | ||
| > | ||
| <span className="text-xs font-medium text-neutral-400 uppercase tracking-widest">Scroll</span> |
There was a problem hiding this comment.
P3: This visible label is hardcoded in English; make it locale-dependent to keep the hero fully translated.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At src/components/react/landing/hero.tsx, line 195:
<comment>This visible label is hardcoded in English; make it locale-dependent to keep the hero fully translated.</comment>
<file context>
@@ -0,0 +1,203 @@
+ transition={{ repeat: Infinity, duration: 1.8, ease: "easeInOut" }}
+ className="flex flex-col items-center gap-2"
+ >
+ <span className="text-xs font-medium text-neutral-400 uppercase tracking-widest">Scroll</span>
+ <div className="w-6 h-10 rounded-full border-2 border-neutral-300 flex items-start justify-center p-1.5">
+ <motion.div className="w-1 h-2 bg-neutral-400 rounded-full" />
</file context>
…t; enhance consistency in animations and styles
…nent; improve consistency in structure and styling
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by cubic
Revamped the marketing site with localized landing and services pages (EN/IT) powered by new animated React sections and a centralized i18n system. Updated dependencies, improved mobile menu accessibility, and fixed root redirect to locale pages.
New Features
/en,/it,/en/services,/it/services.src/lib/i18n/translations.ts) and passedlocalevia layout, header, and footer.Refactors
astro/zod; removed SVGOremoveScriptElement; added.opencodeto.gitignore.@astrojs/mdx,@astrojs/react,@astrojs/check,@astrojs/rss,@astrojs/sitemap,@headlessui/react,@expressive-code/*,@panzoom/panzoom,@playform/*).ServicesHero/ServicesSectionanimations and code style for consistency.Written for commit 137c816. Summary will update on new commits.