website new page creation

[ViaSocket-Git]

No description provided.

[windsurf-bot]

Other comments (37)

• src/app/components/new-home/FeaturesBanner.js (248-249) The images in the IntegrationsVisual component have empty alt attributes (`alt=""`). Consider adding descriptive alt text for better accessibility.
• src/app/components/new-home/FooterNew.js (205-205) The HTML entity `&` is being escaped twice in the footer text. This will display as the literal '&' instead of '&'.

                  Privacy, Terms and Data Retention & Deletion Policy
  

• src/app/components/new-home/FooterNew.js (224-230) There are two different Privacy Policy links in the footer (one in the copyright section and another in the 'crafted by' section). This is confusing for users and may lead to inconsistent information if they point to different pages.
• src/app/components/new-home/ReviewsGrid.js (25-108) All review dates in the `reviews` array are set to 2025, which is in the future. Consider updating these to realistic past dates to maintain credibility of the testimonials.
• src/app/components/new-home/HeroContainerNew.js (338-346) The "Start Automating" button is missing functionality. Add an onClick handler or convert it to a link with an href attribute to make it functional.
• src/app/components/new-home/HeroContainerNew.js (348-382) The "Watch 2-minute overview" button lacks functionality. Add an onClick handler to open a video modal or navigate to a video page.
• src/app/components/new-home/VisualShowcase.js (394-399) The carousel implementation lacks proper accessibility attributes. Consider adding appropriate ARIA roles and focus management:

  <div
    className="relative w-full"
    style={{ height: "clamp(540px, 44vw, 840px)" }}
    onMouseEnter={() => setIsHovered(true)}
    onMouseLeave={() => setIsHovered(false)}
    role="region"
    aria-label="Category showcase carousel"
  >
  

  Also, consider adding aria-current="true" to the active category button and implementing proper focus management when navigating with arrow keys.

• src/app/components/new-home/VisualShowcase.js (467-475) The 'Use this template' button lacks proper accessibility attributes and doesn't have an action. Consider adding proper button attributes:

  <button
    className="px-0 py-0 text-[13px] flex items-center gap-1.5 cursor-pointer transition duration-150 hover:opacity-70 hover:scale-[1.03] active:scale-[0.97]"
    style={{
      background: "none",
      color: "#0a0a0a",
      border: "none",
      fontWeight: 600,
      letterSpacing: "-0.1px",
    }}
    aria-label="Use this template"
    onClick={() => { /* Add your action here */ }}
  >
  

• src/app/components/new-home/VisualShowcase.js (505-513) The 'Browse all templates' link has an empty href attribute (`href="#"`), which is not recommended for accessibility. If this is meant to navigate to a page, provide a proper URL. If it's meant to trigger an action, consider using a button element instead:

  <button
    className="text-[14px] flex items-center gap-2 w-fit cursor-pointer px-5 py-2.5 rounded-full transition duration-150 hover:scale-[1.03] active:scale-[0.97]"
    style={{
      background: "#0a0a0a",
      color: "#ffffff",
      fontWeight: 600,
      border: "1.5px solid #0a0a0a",
    }}
    onMouseEnter={(e) => {
      e.currentTarget.style.background = "#000000";
    }}
    onMouseLeave={(e) => {
      e.currentTarget.style.background = "#0a0a0a";
    }}
    onClick={() => { /* Add your action here */ }}
  >
  

• src/app/components/new-home/LiveWorkflowCanvas.js (40-53) The `animationSequence` useMemo is missing a dependency. When accessing nested properties like `flow.condition.branches[0].steps`, you should ensure proper dependency tracking or use optional chaining to prevent errors if the structure changes.

    const animationSequence = useMemo(() => {
      const seq = [];
      seq.push(flow.trigger.id);
      flow.steps.forEach((s) => seq.push(s.id));
      if (flow.condition?.branches?.[0]?.steps) {
        seq.push("__if__");
        flow.condition.branches[0].steps.forEach((s) => seq.push(s.id));
      }
      if (flow.postSteps) {
        seq.push("__continue__");
        flow.postSteps.forEach((s) => seq.push(s.id));
      }
      return seq;
    }, [flow]);
  

• src/app/components/new-home/LiveWorkflowCanvas.js (79-82) The cleanup function in the animation useEffect doesn't reset the idx variable, which could lead to unexpected behavior if the component unmounts after the animation completes but before the next cycle starts.
• src/app/components/new-home/HeroContainerNew.js (492-507) Add aria-labels to navigation buttons to improve accessibility for screen readers.

                            <button
                              onClick={handlePrev}
                              className="w-7 h-7 rounded-lg flex items-center justify-center transition-all duration-200"
                              style={{
                                backgroundColor: t.navBtnBg,
                                border: `1px solid ${t.navBtnBorder}`,
                              }}
                              onMouseEnter={(e) => {
                                e.currentTarget.style.backgroundColor = t.navBtnBgHover;
                                e.currentTarget.style.borderColor = t.navBtnBorderHover;
                              }}
                              onMouseLeave={(e) => {
                                e.currentTarget.style.backgroundColor = t.navBtnBg;
                                e.currentTarget.style.borderColor = t.navBtnBorder;
                              }}
                              disabled={isTransitioning}
                              aria-label="Previous use case"
                            >
  

• src/app/components/new-home/HeroContainerNew.js (511-526) Add aria-label to the next button for better accessibility.

                            <button
                              onClick={handleNext}
                              className="w-7 h-7 rounded-lg flex items-center justify-center transition-all duration-200"
                              style={{
                                backgroundColor: t.navBtnBg,
                                border: `1px solid ${t.navBtnBorder}`,
                              }}
                              onMouseEnter={(e) => {
                                e.currentTarget.style.backgroundColor = t.navBtnBgHover;
                                e.currentTarget.style.borderColor = t.navBtnBorderHover;
                              }}
                              onMouseLeave={(e) => {
                                e.currentTarget.style.backgroundColor = t.navBtnBg;
                                e.currentTarget.style.borderColor = t.navBtnBorder;
                              }}
                              disabled={isTransitioning}
                              aria-label="Next use case"
                            >
  

• src/app/components/new-home/WorkFlowCategories.js (134-135) The 'Explore X Workflows' button uses a hardcoded color (#2563EB) rather than using the current category's color. For visual consistency with the rest of the component, consider using the dynamic color:

                    className="text-white px-6 py-3 rounded-xl text-[14px] font-medium transition-all duration-200 flex items-center gap-2"
                    style={{ 
                      backgroundColor: current.color,
                      boxShadow: `0 0 20px ${current.color}40` 
                    }}
  

• src/app/components/new-home/FAQs.js (7-7) The initial state of `openId` is set to `1`, which means the second FAQ item (index 1) will be open by default. If the intention is to have the first FAQ open initially, this should be set to `0` instead. If no FAQ should be open by default, it should be set to `null`.
• src/app/components/new-home/FeaturesBanner.js (15-15) The `imgTypeform` constant is defined but never used in the component. Consider removing it if not needed.
• src/app/components/new-home/FooterNew.js (151-151) Multiple footer links are using placeholder '#' hrefs. These should be replaced with actual URLs or proper Next.js Link components to prevent page jumps and improve SEO and accessibility.
• src/app/components/new-home/ReviewsGrid.js (245-246) The SVG icon in the 'Read more' section is missing accessibility attributes. Consider adding `aria-hidden="true"` to the SVG or providing appropriate aria labels for better accessibility.
• src/app/new-home/page.js (48-54) Several props are destructured from getHomePageData() but not passed to their respective components. For example, `reviewData`, `securityGridData`, and `footerData` are fetched but not passed to the corresponding components. Consider passing these props to ensure components have the data they need:

        <HeroContainerNew/>
        <CoreCapabilities/>
        <VisualShowcase/>
        <ReviewsGrid reviewData={reviewData}/>
        {faqData?.length > 0 && <FAQs faqData={faqData} />}
        <SecuritySectionNew securityGridData={securityGridData}/>
        <FooterNew footerData={footerData}/>
  

• src/app/new-home/page.js (24-24) The OpenGraph image URL is hardcoded. Consider making this configurable through the metaData object or environment variables to make it easier to update across environments.
• src/app/components/new-home/HeroContainerNew.js (183-188) The handlePrev function should use useCallback for consistency with handleNext and to prevent unnecessary re-renders when the component updates.

    const handlePrev = useCallback(() => {
      if (isTransitioning) return;
      setIsTransitioning(true);
      setCurrentIndex((prev) => (prev - 1 + useCases.length) % useCases.length);
      setTimeout(() => setIsTransitioning(false), 600);
    }, [isTransitioning]);
  

• src/app/components/new-home/LiveWorkflowCanvas.js (512-514) The `flowDot` animation duration is directly calculated from the height, which could make the animation too fast for small connector heights. Consider adding a minimum duration to ensure the animation is visible.

            style={{
              animation: `flowDot ${Math.max(height * 20, 400)}ms ease-out forwards`,
            }}
  

• src/app/components/new-home/WorkFlowCategories.js (78-78) The 'Built for every team' text color is hardcoded to '#2563EB' while the rest of the component uses dynamic colors based on the selected category. Consider using the current category's color for consistency:

            className="text-xs tracking-[0.1em] uppercase mb-5"
            style={{ color: current.color }}
  

• src/app/components/new-home/ReviewsGrid.js (4-7) The component relies on an external service (thingsofbrand.com) for logo images. Consider hosting these assets locally to prevent potential display issues if the external service becomes unavailable.
• src/app/components/new-home/SecuritySectionNew.js (3-4) The image paths are using relative paths which might cause issues in production builds. Consider importing these images or using public URL paths.

  import socBadge from "assets/img/aicpa-soc-badge.webp";
  import isoBadge from "assets/img/iso-certified.webp";
  

  Or if using public folder:

  const socBadge = "/assets/img/aicpa-soc-badge.webp";
  const isoBadge = "/assets/img/iso-certified.webp";
  

• src/app/components/new-home/SecuritySectionNew.js (152-163) Consider moving the animation styles to a CSS file or using styled-components instead of embedding them directly in the JSX. This would improve maintainability and separation of concerns.
• src/app/components/new-home/SecuritySectionNew.js (49-51) There are many hardcoded color values and styles throughout the component. Consider using a theme or design system variables for better consistency and maintainability across the application.
• src/app/components/new-home/SecuritySectionNew.js (84-95) The image elements are missing proper accessibility attributes. While they have alt text, consider adding aria-labels or roles where appropriate for better accessibility compliance.
• src/app/components/new-home/VisualShowcase.js (1-1) The component contains hardcoded text strings that should be externalized for internationalization (i18n) support. Consider extracting strings like "Use this template", "Browse all templates", "When", "Do", etc. into a separate constants file or using an i18n library.
• src/app/components/new-home/HeroContainerNew.js (581-600) Consider hosting logo images locally rather than using external URLs. This prevents potential CORS issues, broken images if external domains change, and improves page load performance.
• src/app/components/new-home/FooterNew.js (65-71) The component heavily relies on inline styles which makes maintenance difficult. Consider moving these styles to Tailwind classes or a CSS module for better maintainability and consistency.
• src/app/components/new-home/FeaturesBanner.js (6-10) Several imported icons (ArrowRight, ChevronRight, AlertCircle, Mail) are not used in the component. Consider removing these unused imports to reduce bundle size.
• src/app/components/new-home/FeaturesBanner.js (26-27) Each quadrant object contains a `description` property that is never used in the rendered component. Consider either using this data or removing it to keep the code clean.
• src/app/components/new-home/FeaturesBanner.js (410-410) The `isTop` variable is defined but never used in the component. Consider removing it if not needed.
• src/app/components/new-home/FooterNew.js (203-203) The copyright year is set to 2026, which is in the future. Consider using the current year or making it dynamic with `new Date().getFullYear()`.

                © {new Date().getFullYear()} viaSocket |{" "}
  

• src/app/components/new-home/WorkFlowCategories.js (157-158) Using array index as React key in the examples.map() loop is an anti-pattern. While it might work for this static content, it's better to use unique identifiers. Since the examples are static strings, consider using the example text itself as the key:

                  {current.examples.map((ex) => (
                    <div key={ex} className="flex items-start gap-2.5">
  

• src/app/components/new-home/FeaturesBanner.js (331-331) The component is exported as `CoreCapabilities` but the file is named `FeaturesBanner.js`. Consider renaming either the file or the component for consistency.

💡 To request another review, post a new comment with "/windsurf-review".

[windsurf-bot]

The component doesn't handle potential out-of-bounds index access. If controlledIndex is provided with a value outside the valid range of the categories array (0-5), it could cause runtime errors when accessing categories[activeIndex]. Consider adding validation to ensure the index is within bounds.

[windsurf-bot]

The LinkButton component is being used on line 227 but it's not imported. This will cause a runtime error when rendering FAQs with links.

[windsurf-bot]

Using href="#" creates an inaccessible link that can cause issues with screen readers and keyboard navigation. If this is meant to be a button that triggers an action rather than navigation, consider using a proper button element instead of an anchor tag, or provide a meaningful href value.