SafeTrust Footer Implementation

[JosueBrenes]

Issue Summary

Implement the SafeTrust footer with navigation links, newsletter subscription, and social media links using shadcn/ui components.

Type of Issue

• Bug
• Feature Request
• Documentation
• Performance
• Security
• Other

Expected Behavior

Required shadcn/ui Components

1. Input
2. Button
3. Separator
4. Container
5. Typography

Footer Structure

Left Section

• Logo: SafeTrust (with blue square icon)
• Newsletter Subscription:
  • Input field placeholder: "Enter your email"
  • Subscribe button

Navigation Sections

1. Product

   • About
   • Features
   • Pricing
   • Integrations
   • FAQs

2. Company

   • Our Story
   • Team
   • Careers
   • Press
   • Contact Us

3. Resources

   • Blog
   • Documentation
   • Help Center
   • Security
   • API

4. Legal

   • Terms of Service
   • Privacy Policy
   • Cookie Policy
   • Acceptable Use
   • Refund Policy

Bottom Section

• Copyright text: "© 2025 SafeTrust. All rights reserved."
• Social Media Links:
  • Twitter
  • LinkedIn
  • GitHub
  • YouTube

Design Requirements

• Background: Black (#000000)
• Text Colors:
  • Primary: White
  • Secondary: Gray
  • Links: Light gray with hover state
• Primary Button Color: #4C6FFF
• Input field: Dark theme styled
• Responsive layout
• Proper spacing between sections

Responsive Behavior

• Desktop: Full grid layout
• Tablet: 2-column grid
• Mobile: Single column stack
• Newsletter input should be full width on mobile

Accessibility Requirements

• Proper heading structure
• ARIA labels for forms
• Keyboard navigation
• Focus states for interactive elements
• Semantic HTML structure
• Proper link descriptions

Newsletter Form Requirements

• Email validation
• Error states
• Success confirmation
• Loading state
• Proper form submission handling

Contributing Guidelines

Follow:

• Contributing Guide
• Git Guidelines

Additional Notes

• Implement form validation
• Add hover states for links
• Ensure responsive behavior
• Add proper spacing
• Implement error handling
• Add loading states
• Consider implementing dark/light mode toggle
• Ensure all links are working properly
• Add proper meta tags

SEO Considerations

• Semantic HTML
• Proper link structure
• Meaningful alt text
• Mobile responsiveness
• Proper heading hierarchy

Performance Considerations

• Optimize icon loading
• Minimize CSS
• Proper lazy loading
• Optimize font loading
• Monitor performance metrics

Make sure to follow the Git Guidelines for Atomic Commits and read Contributing Guide

The Pull request needs to have the format mentioned below in the Git Guideline

• Contributing Guide
• Git Guidelines

[SudiptaPaul-31]

Would love to work on this issue

[wugalde19]

Hi SafeTrust team,
I’m William from Costa Rica 🇨🇷 and I'm a member of the Dojo Coding community.
I am interested in contributing to this issue. I have over 8 years of experience as a Full-Stack engineer in several technologies (including the ones used on this project Typescript/JS)

Profiles:
https://app.onlydust.com/u/wugalde19
https://github.com/wugalde19

After reading and understanding what has been described in the issue summary, here’s how I’d approach the creation of the Footer section (BTW, I had to implement this a few days ago in another site so have it fresh in my mind how to do it).
Create the Footer component (decorated version of a shadcn/ui Container component). The container will render the content organized using a Grid. It will have to be organized carefully to make it look nice on mobile devices as well.
Each section will have its own properties or even be its own component (like LogoSection, NavigationLinksSection, BottomSection). This component will have the logic to handle dark theme, follow colors and typography requirements
I’ll implement the “subscribe to newsletter form” but it’s logic (unless it’s already implemented), will be mocked but if implemented, then I’ll handle the form submission and of course handle errors and run email validations.
Add Accessibility requirements
Check responsiveness

I’ll be reaching out to maintainers If any blocker or question arises while I work on it

Please let me know if this approach sounds good to you

Thanks.

[kimcascante]

Hello! I’m Kim Cascante, a member of Dojo Coding ⛩️
With experience in React, Typescript, Javascript, and Next.js, here’s my approach for this issue:

1. Review design and requirements.
2. Implement layout with shadcn/ui components, ensuring responsiveness and accessibility.
3. Validate newsletter form.
4. Submit a well-documented Pull Request following Git guidelines.

Excited to apply my skills and learn from this experience and contribute to this project for the first time!

[kimcascante]

@JosueBrenes Thank you for the opportunity, I will work on this soon, and I will let you know :)