56kcloud-website/apps/www/src/components/ui/organisms/footer/index.tsx at 04a3f641c7749529a18a90131053ef22c54488ca · acp-io/56kcloud-website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
import {Dictionary} from '@/models/dictionary.model'
import {LinkProps, SocialLinks} from '@/models/link.model'
import {Service} from '@/models/service.model'
import {Solution} from '@/models/solution.model'
import Button from '../../atoms/button'
import Linkedin from '../../svgs/logos/linkedin'
import Logo from '../../svgs/logos/56k'
import NewsletterForm from '@/components/ui/organisms/footer/newsletter-form'
import X from '../../svgs/logos/x'

export type FooterProps = {
  dictionary: Dictionary
  text: string
  solutions: Array<Pick<Solution, 'title' | 'slug'>>
  services: Array<Pick<Service, 'title' | 'slug'>>
}

export default function Footer(props: FooterProps) {
  const companyLinks: Array<LinkProps> = [
    {text: props.dictionary.about, link: '/about'},
    {text: props.dictionary.blog, link: '/blog'}
  ]

  const socialLinks: Array<SocialLinks> = [
    {
      text: 'X',
      link: 'https://x.com/56kcloud',
      icon: X
    },
    {
      text: 'Linkedin',
      link: 'https://www.linkedin.com/company/56kcloud',
      icon: Linkedin
    }
  ]

  return (
    <footer aria-labelledby='footer-heading'>
      <h2
        id='footer-heading'
        className='sr-only'
      >
        Footer
      </h2>
      <div className='px-6 pt-20 pb-8 mx-auto max-w-7xl lg:px-8 lg:pt-[104px]'>
        <div className='flex flex-col gap-y-[72px] xl:flex-row xl:justify-between'>
          <div className='max-w-full space-y-8 xl:max-w-sm'>
            <Logo className='h-5 text-white' />
            <p className='text-sm leading-[26px] text-slate-400 font-light'>{props.text}</p>
            <div className='flex items-center space-x-6'>
              {socialLinks.map((item) => (
                <Button
                  key={item.text}
                  asChild
                  tone='secondary'
                  variant='link'
                >
                  <a
                    href={item.link}
                    target='_blank'
                  >
                    <span className='sr-only'>{item.text}</span>
                    <item.icon
                      className='w-5 h-5 text-slate-400'
                      aria-hidden='true'
                    />
                  </a>
                </Button>
              ))}
            </div>
          </div>
          <div className='flex flex-col gap-12 md:flex-row md:justify-between md:gap-28'>
            <div>
              <h3 className='text-sm font-normal text-white capitalize'>{props.dictionary.services}</h3>
              <ul
                role='list'
                className='mt-6 space-y-4'
              >
                {props.services.map((item) => (
                  <li key={item.slug}>
                    <Button
                      asChild
                      tone='slate'
                      variant='link'
                      className='font-light text-slate-400'
                    >
                      <a
                        href={`/services/${item.slug}`}
                        className='text-sm leading-6 text-gray-300 hover:text-white'
                      >
                        {item.title}
                      </a>
                    </Button>
                  </li>
                ))}
              </ul>
            </div>
            <div>
              <h3 className='text-sm font-normal text-white capitalize'>{props.dictionary.solutions}</h3>
              <ul
                role='list'
                className='mt-6 space-y-4'
              >
                {props.solutions.map((item) => (
                  <li key={item.slug}>
                    <Button
                      asChild
                      tone='slate'
                      variant='link'
                      className='font-light text-slate-400'
                    >
                      <a href={`/solutions/${item.slug}`}>{item.title}</a>
                    </Button>
                  </li>
                ))}
              </ul>
            </div>
            <div>
              <h3 className='text-sm font-normal text-white capitalize'>{props.dictionary.company}</h3>
              <ul
                role='list'
                className='mt-6 space-y-4'
              >
                {companyLinks.map((item) => (
                  <li key={item.text}>
                    <Button
                      key={item.text}
                      asChild
                      tone='slate'
                      variant='link'
                    >
                      <a href={item.link}>{item.text}</a>
                    </Button>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
        <NewsletterForm dictionary={props.dictionary} />
        <div className='pt-8 mt-10 border-t border-slate-800'>
          <p className='text-xs font-light text-slate-400'>&copy; 56K.Cloud 2023 – All rights reserved.</p>
        </div>
      </div>
    </footer>
  )
}