Contact Details

0import React from "react";
1
2const PhoneIcon = ({ className }) => {
3  return (
4    <svg
5      className={className}
6      aria-hidden="true"
7      viewBox="0 0 24 24"
8      xmlns="http://www.w3.org/2000/svg"
9    >
10      <path d="M1.5 4.5a3 3 0 013-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 01-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 006.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 011.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 01-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5z" />
11    </svg>
12  );
13};
14
15const MailIcon = ({ className }) => {
16  return (
17    <svg
18      className={className}
19      aria-hidden="true"
20      viewBox="0 0 24 24"
21      xmlns="http://www.w3.org/2000/svg"
22    >
23      <path d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z" />
24      <path d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z" />
25    </svg>
26  );
27};
28
29const ChatIcon = ({ className }) => {
30  return (
31    <svg
32      className={className}
33      aria-hidden="true"
34      viewBox="0 0 24 24"
35      xmlns="http://www.w3.org/2000/svg"
36    >
37      <path
38        fillRule="evenodd"
39        d="M4.848 2.771A49.144 49.144 0 0112 2.25c2.43 0 4.817.178 7.152.52 1.978.292 3.348 2.024 3.348 3.97v6.02c0 1.946-1.37 3.678-3.348 3.97a48.901 48.901 0 01-3.476.383.39.39 0 00-.297.17l-2.755 4.133a.75.75 0 01-1.248 0l-2.755-4.133a.39.39 0 00-.297-.17 48.9 48.9 0 01-3.476-.384c-1.978-.29-3.348-2.024-3.348-3.97V6.741c0-1.946 1.37-3.68 3.348-3.97zM6.75 8.25a.75.75 0 01.75-.75h9a.75.75 0 010 1.5h-9a.75.75 0 01-.75-.75zm.75 2.25a.75.75 0 000 1.5H12a.75.75 0 000-1.5H7.5z"
40        clipRule="evenodd"
41      />
42    </svg>
43  );
44};
45
46const data = {
47  title: "Connect with Us",
48  paragraph:
49    "We believe that great things are achieved through collaboration. At Jettwave, we invite you to connect with us and let's embark on a journey to create something extraordinary together.",
50
51  items: [
52    {
53      name: "Reach Us By Email",
54      contactInfo: "[email protected]",
55      Icon: PhoneIcon,
56    },
57    {
58      name: "Email Assistance",
59      contactInfo: "+1 (555) 987-6543",
60      Icon: MailIcon,
61    },
62    {
63      name: "Text Us Directly",
64      contactInfo: "+1 (555) 123-4567",
65      Icon: ChatIcon,
66    },
67  ],
68};
69
70export function ContactDetails1() {
71  return (
72    <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">
73      <div className="rounded-3xl bg-slate-800 px-8 py-12 sm:p-14">
74        <div className="mx-auto mb-12 max-w-3xl text-center">
75          <h2 className="mb-4 text-3xl sm:text-4xl font-extrabold tracking-tight text-slate-50 [text-wrap:balance]">
76            {data.title}
77          </h2>
78          <p className="text-base sm:text-lg text-slate-400 [text-wrap:balance]">
79            {data.paragraph}
80          </p>
81        </div>
82        <div className="mx-auto grid max-w-5xl grid-cols-1 gap-x-8 gap-y-12 lg:grid-cols-3">
83          {data.items.map(({ name, contactInfo, Icon }, index: number) => {
84            return (
85              <div key={index} className="flex flex-col items-center gap-y-5">
86                <div className="m-[3px] h-12 w-12 shrink-0 overflow-hidden rounded-xl border border-sky-600 bg-slate-800 p-2.5 ring-[3px] ring-sky-900">
87                  <Icon className="h-full w-full fill-sky-400" />
88                </div>
89                <div className="text-center">
90                  <p className="mb-1 text-lg font-bold text-slate-100 [text-wrap:balance] first-letter:uppercase">
91                    {name}
92                  </p>
93                  <address className="break-words text-base font-medium not-italic text-sky-400">
94                    {contactInfo}
95                  </address>
96                </div>
97              </div>
98            );
99          })}
100        </div>
101      </div>
102    </div>
103  );
104}
105

0import React from "react";
1
2const PhoneIcon = ({ className }) => {
3  return (
4    <svg
5      className={className}
6      aria-hidden="true"
7      viewBox="0 0 24 24"
8      xmlns="http://www.w3.org/2000/svg"
9    >
10      <path d="M1.5 4.5a3 3 0 013-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 01-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 006.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 011.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 01-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5z" />
11    </svg>
12  );
13};
14
15const MailIcon = ({ className }) => {
16  return (
17    <svg
18      className={className}
19      aria-hidden="true"
20      viewBox="0 0 24 24"
21      xmlns="http://www.w3.org/2000/svg"
22    >
23      <path
24        fillRule="evenodd"
25        clipRule="evenodd"
26        d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z"
27      />
28      <path
29        fillRule="evenodd"
30        clipRule="evenodd"
31        d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z"
32      />
33    </svg>
34  );
35};
36
37const PinIcon = ({ className }) => {
38  return (
39    <svg
40      className={className}
41      aria-hidden="true"
42      viewBox="0 0 24 24"
43      xmlns="http://www.w3.org/2000/svg"
44    >
45      <path
46        fillRule="evenodd"
47        clipRule="evenodd"
48        d="M11.54 22.351l.07.04.028.016a.76.76 0 00.723 0l.028-.015.071-.041a16.975 16.975 0 001.144-.742 19.58 19.58 0 002.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 00-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 002.682 2.282 16.975 16.975 0 001.145.742zM12 13.5a3 3 0 100-6 3 3 0 000 6z"
49      />
50    </svg>
51  );
52};
53
54const data = [
55  {
56    name: "Call Us",
57    description:
58      "Speak with one of our knowledgeable representatives over the phone.",
59    contactInfo: "+1 (555) 987-6543",
60    Icon: PhoneIcon,
61  },
62  {
63    name: "Email Us",
64    description: "Drop us an email and we'll respond promptly within 24 hours.",
65    contactInfo: "[email protected]",
66    Icon: MailIcon,
67  },
68  {
69    name: "Visit Us",
70    description: "We invite you to visit our state-of-the-art headquarters at:",
71    contactInfo: "789 Tech Avenue, Innovation City, USA",
72    Icon: PinIcon,
73  },
74];
75
76export function ContactDetails2() {
77  return (
78    <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">
79      <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
80        {data.map(({ name, description, contactInfo, Icon }, index: number) => {
81          return (
82            <div
83              key={index}
84              className="mx-auto flex w-full flex-col gap-y-5 rounded-3xl border border-slate-200 bg-white p-6 ring-4 ring-slate-50 max-lg:max-w-md"
85            >
86              <div className="m-[3px] h-12 w-12 shrink-0 overflow-hidden rounded-xl  border border-sky-200 bg-white p-2.5 ring-[3px] ring-sky-100">
87                <Icon className="h-full w-full fill-sky-600" />
88              </div>
89              <div className="flex grow flex-col justify-between gap-y-2">
90                <div>
91                  <p className="mb-1 text-lg font-bold text-slate-900 first-letter:uppercase">
92                    {name}
93                  </p>
94                  <p className="text-base text-slate-600">{description}</p>
95                </div>
96                <address className="break-words text-base font-medium not-italic text-sky-600">
97                  {contactInfo}
98                </address>
99              </div>
100            </div>
101          );
102        })}
103      </div>
104    </div>
105  );
106}
107

0import React from "react";
1
2const PhoneIcon = ({ className }) => {
3  return (
4    <svg
5      className={className}
6      aria-hidden="true"
7      viewBox="0 0 24 24"
8      xmlns="http://www.w3.org/2000/svg"
9    >
10      <path d="M1.5 4.5a3 3 0 013-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 01-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 006.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 011.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 01-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5z" />
11    </svg>
12  );
13};
14
15const MailIcon = ({ className }) => {
16  return (
17    <svg
18      className={className}
19      aria-hidden="true"
20      viewBox="0 0 24 24"
21      xmlns="http://www.w3.org/2000/svg"
22    >
23      <path d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z" />
24      <path d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z" />
25    </svg>
26  );
27};
28
29const PinIcon = ({ className }) => {
30  return (
31    <svg
32      className={className}
33      aria-hidden="true"
34      viewBox="0 0 24 24"
35      xmlns="http://www.w3.org/2000/svg"
36    >
37      <path
38        fillRule="evenodd"
39        d="M11.54 22.351l.07.04.028.016a.76.76 0 00.723 0l.028-.015.071-.041a16.975 16.975 0 001.144-.742 19.58 19.58 0 002.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 00-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 002.682 2.282 16.975 16.975 0 001.145.742zM12 13.5a3 3 0 100-6 3 3 0 000 6z"
40        clipRule="evenodd"
41      />
42    </svg>
43  );
44};
45
46const data = {
47  subHeading: "Contact Information",
48  title: "Get in touch with us",
49  paragraph:
50    "Speak with one of our knowledgeable representatives over the phone or drop us an email. You can also visit our office located at 789 Tech Avenue, Innovation City, USA. We look forward to hearing from you!",
51  image: {
52    src: "https://images.unsplash.com/photo-1478860409698-8707f313ee8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80",
53    alt: "",
54  },
55  items: [
56    {
57      name: "Phone Support",
58      contactInfo: "+1 (555) 987-6543",
59      Icon: PhoneIcon,
60    },
61    {
62      name: "Email Assistance",
63      contactInfo: "[email protected]",
64      Icon: MailIcon,
65    },
66    {
67      name: "Visit Us",
68      contactInfo: "789 Tech Avenue, Innovation City, USA",
69      Icon: PinIcon,
70    },
71  ],
72};
73
74export function ContactDetails3() {
75  return (
76    <div className="relative isolate overflow-x-hidden pb-12">
77      <div className="absolute inset-x-0 bottom-0 -z-10 h-[384px] w-screen bg-slate-800" />
78      <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">
79        <div className="mx-auto mb-12 max-w-3xl text-center">
80          <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">
81            {data.subHeading}
82          </p>
83          <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">
84            {data.title}
85          </h2>
86          <p className="text-lg text-slate-600 [text-wrap:balance]">
87            {data.paragraph}
88          </p>
89        </div>
90        <div className="mx-auto mb-12 grid max-w-5xl grid-cols-1 gap-x-8 gap-y-12 lg:grid-cols-3">
91          {data.items.map(({ name, contactInfo, Icon }, index: number) => {
92            return (
93              <div key={index} className="flex flex-col items-center gap-y-5">
94                <div className="m-[3px] h-12 w-12 shrink-0 overflow-hidden rounded-xl border border-sky-200 bg-white p-2.5 ring-[3px] ring-sky-100">
95                  <Icon className="h-full w-full fill-sky-600" />
96                </div>
97
98                <div className="text-center">
99                  <p className="mb-1 text-lg font-bold text-slate-900 [text-wrap:balance] first-letter:uppercase">
100                    {name}
101                  </p>
102                  <address className="break-words text-base font-medium not-italic text-sky-600">
103                    {contactInfo}
104                  </address>
105                </div>
106              </div>
107            );
108          })}
109        </div>
110        <div className="h-[576px] w-full overflow-hidden rounded-3xl">
111          <img
112            src={data.image.src}
113            alt={data.image.alt}
114            onError={(e) => {
115              const image = e.target as HTMLImageElement;
116              image.src = "onerrorimg";
117            }}
118            className="h-full w-full object-cover"
119          />
120        </div>
121      </div>
122    </div>
123  );
124}
125

0import React from "react";
1
2const PhoneIcon = ({ className }) => {
3  return (
4    <svg
5      className={className}
6      aria-hidden="true"
7      viewBox="0 0 24 24"
8      xmlns="http://www.w3.org/2000/svg"
9    >
10      <path d="M1.5 4.5a3 3 0 013-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 01-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 006.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 011.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 01-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5z" />
11    </svg>
12  );
13};
14
15const MailIcon = ({ className }) => {
16  return (
17    <svg
18      className={className}
19      aria-hidden="true"
20      viewBox="0 0 24 24"
21      xmlns="http://www.w3.org/2000/svg"
22    >
23      <path d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z" />
24      <path d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z" />
25    </svg>
26  );
27};
28
29const PinIcon = ({ className }) => {
30  return (
31    <svg
32      className={className}
33      aria-hidden="true"
34      viewBox="0 0 24 24"
35      xmlns="http://www.w3.org/2000/svg"
36    >
37      <path
38        fillRule="evenodd"
39        d="M11.54 22.351l.07.04.028.016a.76.76 0 00.723 0l.028-.015.071-.041a16.975 16.975 0 001.144-.742 19.58 19.58 0 002.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 00-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 002.682 2.282 16.975 16.975 0 001.145.742zM12 13.5a3 3 0 100-6 3 3 0 000 6z"
40        clipRule="evenodd"
41      />
42    </svg>
43  );
44};
45
46const data = {
47  subHeading: "Reach Out to Us",
48  title: "Connect with Jettwave",
49  paragraph:
50    "Have any questions or need assistance? Feel free to give us a call at +1 (555) 987-6543 or send us an email at [email protected]. Our dedicated team is here to help you achieve your goals.",
51  image: {
52    src: "https://cdn.dribbble.com/users/464226/screenshots/15919822/media/8d2d318bb1cfa0bd961069ea9e1ae303.png?resize=800x600&vertical=center",
53    alt: "",
54  },
55  items: [
56    {
57      name: "Call Us",
58      description:
59        "Our friendly team is available Monday through Friday, from 9am to 5pm EST.",
60      contactInfo: "+1 (555) 987-6543",
61      Icon: PhoneIcon,
62    },
63    {
64      name: "Email Us",
65      description:
66        "Drop us an email, and we'll provide a prompt response within 24 hours.",
67      contactInfo: "[email protected]",
68      Icon: MailIcon,
69    },
70    {
71      name: "Visit Us",
72      description:
73        "We would be delighted to welcome you! Our office is conveniently located at:",
74      contactInfo: "789 Tech Avenue, Innovation City, USA",
75      Icon: PinIcon,
76    },
77  ],
78};
79
80export function ContactDetails4() {
81  return (
82    <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">
83      <div className="mb-12 max-w-3xl">
84        <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">
85          {data.subHeading}
86        </p>
87        <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">
88          {data.title}
89        </h2>
90        <p className="text-lg text-slate-600 [text-wrap:balance]">
91          {data.paragraph}
92        </p>
93      </div>
94      <div className="flex gap-x-20 gap-y-12 max-lg:flex-col">
95        <div className="shrink-0 space-y-12 lg:max-w-md">
96          {data.items.map(
97            ({ name, description, contactInfo, Icon }, index: number) => {
98              return (
99                <div key={index} className="flex gap-x-5">
100                  <div className="m-[3px] h-12 w-12 shrink-0 overflow-hidden rounded-xl border border-sky-200 bg-white p-2.5 ring-[3px] ring-sky-100">
101                    <Icon className="h-full w-full fill-sky-600" />
102                  </div>
103                  <div>
104                    <p className="mb-1 text-lg font-bold text-slate-900 first-letter:uppercase">
105                      {name}
106                    </p>
107                    <p className="mb-2 text-base text-slate-600">
108                      {description}
109                    </p>
110                    <address className="break-words text-base font-medium not-italic text-sky-600">
111                      {contactInfo}
112                    </address>
113                  </div>
114                </div>
115              );
116            }
117          )}
118        </div>
119        <div className="relative w-full max-lg:h-96">
120          <div className="h-full w-full overflow-hidden rounded-3xl border border-sky-200 ring-4 ring-sky-100 lg:absolute lg:inset-0">
121            <img
122              src={data.image.src}
123              alt={data.image.alt}
124              onError={(e) => {
125                const image = e.target as HTMLImageElement;
126                image.src = "onerrorimg";
127              }}
128              className="h-full w-full object-cover"
129            />
130          </div>
131        </div>
132      </div>
133    </div>
134  );
135}
136

0import React from "react";
1
2const Triangle = ({ className }) => {
3  return (
4    <svg
5      xmlns="http://www.w3.org/2000/svg"
6      viewBox="0 0 500 500"
7      preserveAspectRatio="none"
8      className={className}
9    >
10      <path d="M500 0H0V500L500 0Z" />
11    </svg>
12  );
13};
14
15export function ContactDetails5() {
16  return (
17    <div className="relative py-12">
18      <div className="absolute inset-0 -z-10 h-1/2 bg-sky-600 max-lg:hidden" />
19      <Triangle
20        className={
21          "absolute inset-0 -z-10 h-1/2 w-full fill-sky-600 sm:h-full lg:hidden"
22        }
23      />
24
25      <div className="mx-auto w-full max-w-md px-8 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">
26        <div className="flex min-h-[224px] justify-between gap-x-12 gap-y-12 rounded-2xl border border-slate-200 bg-white p-12 ring-4 ring-slate-50 max-lg:flex-col lg:items-center lg:p-14">
27          <div className="max-w-3xl">
28            <h2 className="mb-2 text-lg font-semibold text-sky-600">
29              Get in Touch
30            </h2>
31            <p className="mb-6 text-4xl font-bold tracking-tight text-slate-900">
32              Let's Connect and Make Your Brand Shine!
33            </p>
34
35            <address className="break-words text-4xl font-bold not-italic text-slate-600">
36              contact@
37              <br className="sm:hidden" />
38              jettwave.com
39            </address>
40          </div>
41
42          <div className="max-xl:max-w-xs xl:max-w-md">
43            <p className="mb-4 text-xl font-bold capitalize text-slate-900">
44              Visit Our Offices
45            </p>
46
47            <div className="flex gap-x-6 gap-y-4 max-xl:flex-col">
48              <address className="text-base font-semibold not-italic text-sky-600">
49                123 Tech Street, Silicon Valley, CA 12345, USA
50              </address>
51              <address className="text-base font-semibold not-italic text-sky-600">
52                456 Innovation Avenue, Silicon Valley, CA 54321, USA
53              </address>
54            </div>
55          </div>
56        </div>
57      </div>
58    </div>
59  );
60}
61

0import React from "react";
1
2const PhoneIcon = ({ className }) => {
3  return (
4    <svg
5      className={className}
6      aria-hidden="true"
7      viewBox="0 0 24 24"
8      xmlns="http://www.w3.org/2000/svg"
9    >
10      <path d="M1.5 4.5a3 3 0 013-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 01-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 006.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 011.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 01-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5z" />
11    </svg>
12  );
13};
14
15const MailIcon = ({ className }) => {
16  return (
17    <svg
18      className={className}
19      aria-hidden="true"
20      viewBox="0 0 24 24"
21      xmlns="http://www.w3.org/2000/svg"
22    >
23      <path d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z" />
24      <path d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z" />
25    </svg>
26  );
27};
28
29const data = {
30  subHeading: "24/7 Support",
31  title: "Need Assistance? We're Here for You.",
32  paragraph:
33    "Reach out to us anytime, day or night. Our dedicated team is available round the clock to provide you with the support you need. We pride ourselves on delivering exceptional service and are here to assist you with any questions or concerns you may have.",
34
35  items: [
36    {
37      name: "Phone Support",
38      contactInfo: "+1 (555) 987-6543",
39      Icon: PhoneIcon,
40    },
41    {
42      name: "Email Assistance",
43      contactInfo: "[email protected]",
44      Icon: MailIcon,
45    },
46  ],
47};
48
49export function ContactDetails6() {
50  return (
51    <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">
52      <div className="rounded-3xl border border-slate-200 bg-white px-8 py-12 ring-4 ring-slate-50 sm:p-14">
53        <div className="mb-8 max-w-3xl">
54          <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">
55            {data.subHeading}
56          </p>
57          <h2 className="mb-4 text-3xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance] sm:text-4xl">
58            {data.title}
59          </h2>
60          <p className="text-base text-slate-600 [text-wrap:balance] sm:text-lg">
61            {data.paragraph}
62          </p>
63        </div>
64        <div className="flex gap-x-12 gap-y-8 max-lg:flex-wrap">
65          {data.items.map(({ Icon, contactInfo }, index: number) => {
66            return (
67              <div
68                key={index}
69                className="flex min-w-0 items-center gap-x-3 gap-y-4 max-md:flex-wrap"
70              >
71                <div className="m-1 h-10 w-10 shrink-0 overflow-hidden rounded-lg border border-sky-200 bg-white p-2 ring-2 ring-sky-100">
72                  <Icon className="h-full w-full fill-sky-600" />
73                </div>
74                <address className="truncate break-all text-xl font-bold not-italic text-sky-600">
75                  {contactInfo}
76                </address>
77              </div>
78            );
79          })}
80        </div>
81      </div>
82    </div>
83  );
84}
85

0import React from "react";
1
2const OfficeIcon = ({ className }) => {
3  return (
4    <svg
5      className={className}
6      aria-hidden="true"
7      viewBox="0 0 24 24"
8      xmlns="http://www.w3.org/2000/svg"
9    >
10      <path
11        fillRule="evenodd"
12        d="M4.5 2.25a.75.75 0 000 1.5v16.5h-.75a.75.75 0 000 1.5h16.5a.75.75 0 000-1.5h-.75V3.75a.75.75 0 000-1.5h-15zM9 6a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5H9zm-.75 3.75A.75.75 0 019 9h1.5a.75.75 0 010 1.5H9a.75.75 0 01-.75-.75zM9 12a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5H9zm3.75-5.25A.75.75 0 0113.5 6H15a.75.75 0 010 1.5h-1.5a.75.75 0 01-.75-.75zM13.5 9a.75.75 0 000 1.5H15A.75.75 0 0015 9h-1.5zm-.75 3.75a.75.75 0 01.75-.75H15a.75.75 0 010 1.5h-1.5a.75.75 0 01-.75-.75zM9 19.5v-2.25a.75.75 0 01.75-.75h4.5a.75.75 0 01.75.75v2.25a.75.75 0 01-.75.75h-4.5A.75.75 0 019 19.5z"
13        clipRule="evenodd"
14      />
15    </svg>
16  );
17};
18
19const PinIcon = ({ className }) => {
20  return (
21    <svg
22      className={className}
23      aria-hidden="true"
24      viewBox="0 0 24 24"
25      xmlns="http://www.w3.org/2000/svg"
26    >
27      <path
28        fillRule="evenodd"
29        d="M11.54 22.351l.07.04.028.016a.76.76 0 00.723 0l.028-.015.071-.041a16.975 16.975 0 001.144-.742 19.58 19.58 0 002.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 00-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 002.682 2.282 16.975 16.975 0 001.145.742zM12 13.5a3 3 0 100-6 3 3 0 000 6z"
30        clipRule="evenodd"
31      />
32    </svg>
33  );
34};
35
36const StoreIcon = ({ className }) => {
37  return (
38    <svg
39      className={className}
40      aria-hidden="true"
41      viewBox="0 0 24 24"
42      xmlns="http://www.w3.org/2000/svg"
43    >
44      <path d="M5.223 2.25c-.497 0-.974.198-1.325.55l-1.3 1.298A3.75 3.75 0 007.5 9.75c.627.47 1.406.75 2.25.75.844 0 1.624-.28 2.25-.75.626.47 1.406.75 2.25.75.844 0 1.623-.28 2.25-.75a3.75 3.75 0 004.902-5.652l-1.3-1.299a1.875 1.875 0 00-1.325-.549H5.223z" />
45      <path
46        fillRule="evenodd"
47        d="M3 20.25v-8.755c1.42.674 3.08.673 4.5 0A5.234 5.234 0 009.75 12c.804 0 1.568-.182 2.25-.506a5.234 5.234 0 002.25.506c.804 0 1.567-.182 2.25-.506 1.42.674 3.08.675 4.5.001v8.755h.75a.75.75 0 010 1.5H2.25a.75.75 0 010-1.5H3zm3-6a.75.75 0 01.75-.75h3a.75.75 0 01.75.75v3a.75.75 0 01-.75.75h-3a.75.75 0 01-.75-.75v-3zm8.25-.75a.75.75 0 00-.75.75v5.25c0 .414.336.75.75.75h3a.75.75 0 00.75-.75v-5.25a.75.75 0 00-.75-.75h-3z"
48        clipRule="evenodd"
49      />
50    </svg>
51  );
52};
53
54const data = {
55  subHeading: "Visit Our Locations",
56  title: "Explore Our Various Branches",
57  paragraph:
58    "Discover our multiple locations strategically positioned to serve you better. We provide innovative solutions that revolutionize the industry, delivering tangible benefits to our clients.",
59  image: {
60    src: "https://cdn.dribbble.com/users/1047458/screenshots/12222053/media/709a4b0405b291d0b7e0ca4e3eea5f92.png?resize=1000x750&vertical=center",
61    alt: "",
62  },
63  items: [
64    {
65      name: "Head Office",
66      description: "Mon-Fri, from 9am to 5pm",
67      contactInfo: "456 Main Street, Techville, USA",
68      Icon: OfficeIcon,
69    },
70    {
71      name: "Regional Office",
72      description: "Sat-Sun, from 10am to 8pm",
73      contactInfo: "123 Elm Street, Anytown, USA",
74      Icon: PinIcon,
75    },
76    {
77      name: "Retail Store",
78      description: "Mon-Fri, from 9am to 5pm",
79      contactInfo: "78 Tech Avenue, Innovation, USA",
80      Icon: StoreIcon,
81    },
82  ],
83};
84
85export function ContactDetails7() {
86  return (
87    <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">
88      <div className="mx-auto mb-12 max-w-3xl text-center">
89        <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">
90          {data.subHeading}
91        </p>
92        <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">
93          {data.title}
94        </h2>
95        <p className="text-lg text-slate-600 [text-wrap:balance]">
96          {data.paragraph}
97        </p>
98      </div>
99      <div className="mx-auto max-w-5xl">
100        <div className="mb-12 h-96 w-full overflow-hidden rounded-3xl">
101          <img
102            src={data.image.src}
103            alt={data.image.alt}
104            onError={(e) => {
105              const image = e.target as HTMLImageElement;
106              image.src = "onerrorimg";
107            }}
108            className="h-full w-full object-cover"
109          />
110        </div>
111        <div className="grid grid-cols-1 gap-x-8 gap-y-12 md:grid-cols-3">
112          {data.items.map(
113            ({ name, contactInfo, description, Icon }, index: number) => {
114              return (
115                <div key={index} className="flex flex-col items-center gap-y-5">
116                  <div className="m-[3px] h-12 w-12 shrink-0 overflow-hidden rounded-xl border border-sky-200 bg-white p-2.5 ring-[3px] ring-sky-100">
117                    <Icon className="h-full w-full fill-sky-600" />
118                  </div>
119                  <div className="flex grow flex-col justify-between gap-y-2 text-center">
120                    <div>
121                      <p className="mb-1 text-lg font-bold text-slate-900 first-letter:uppercase">
122                        {name}
123                      </p>
124                      <p className="text-base text-slate-600">{description}</p>
125                    </div>
126                    <address className="break-words text-base font-medium not-italic text-sky-600">
127                      {contactInfo}
128                    </address>
129                  </div>
130                </div>
131              );
132            }
133          )}
134        </div>
135      </div>
136    </div>
137  );
138}
139

0import React from "react";
1
2const data = [
3  {
4    x: "1742",
5    y: "491",
6    location: "Tokyo, Japan",
7    contactInfo: "4-5-6 Ginza, Chuo-ku",
8  },
9  {
10    x: "252",
11    y: "496",
12    location: "California, USA",
13    contactInfo: "123 Main Street, Los Angeles",
14  },
15  {
16    x: "1064",
17    y: "544",
18    location: "Cairo, Egypt",
19    contactInfo: "12 Nile Street, Zamalek",
20  },
21  {
22    x: "1018",
23    y: "256",
24    location: "Stockholm, Sweden",
25    contactInfo: "18 Gamla Stanvägen, 987 65",
26  },
27  {
28    x: "458",
29    y: "366",
30    location: "Ontario, Canada",
31    contactInfo: "123 Yonge Street, Toronto",
32  },
33  {
34    x: "1788",
35    y: "998",
36    location: "Victoria, Australia",
37    contactInfo: "789 Swanston Street, Melbourne",
38  },
39];
40
41export function ContactDetails8() {
42  return (
43    <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">
44      <div className="mx-auto mb-12 max-w-3xl text-center">
45        <h2 className="mb-2 text-lg font-semibold text-sky-600">
46          Explore Our Locations
47        </h2>
48        <p className="mb-4 text-4xl font-bold tracking-tight text-slate-900">
49          Discover Our Network of Locations
50        </p>
51        <p className="text-lg text-slate-600">
52          Explore our strategically positioned locations, enabling us to deliver
53          valuable solutions. At Jettwave, we are driven by a relentless pursuit
54          of innovation.
55        </p>
56      </div>
57
58      <svg
59        xmlns="http://www.w3.org/2000/svg"
60        xmlnsXlink="http://www.w3.org/1999/xlink"
61        viewBox="0 0 2000 1176"
62        className="mx-auto max-w-4xl"
63      >
64        <image width="2000" height="1176" xlinkHref="/WorldMap.png" />
65        {data.map(({ x, y }, index: number) => {
66          return (
67            <React.Fragment key={index}>
68              <circle
69                cx={x}
70                cy={y}
71                r="60"
72                className="animate-pulse fill-sky-400/25"
73              />
74              <circle
75                cx={x}
76                cy={y}
77                r="35"
78                className="animate-pulse fill-sky-400/50"
79              />
80              <circle cx={x} cy={y} r="15" className="fill-sky-600" />
81            </React.Fragment>
82          );
83        })}
84      </svg>
85
86      <div className="flex max-w-[175px] flex-col items-center gap-y-1.5 rounded-xl bg-slate-50 p-2 shadow-2xl shadow-slate-500/50">
87        <div className={"h-8 w-8 rounded-full bg-sky-600 fill-sky-600"} />
88        <div className="flex flex-col gap-y-1">
89          <p className="text-center text-sm font-semibold text-slate-900 first-letter:uppercase">
90            Ontario, Canada
91          </p>
92          <p className="text-center text-xs font-medium text-slate-600 first-letter:uppercase">
93            100 Smith Street, Oshawa, Unit 100
94          </p>
95        </div>
96      </div>
97    </div>
98  );
99}
100

0import React from "react";
1
2const PinIcon = ({ className }) => {
3  return (
4    <svg
5      className={className}
6      aria-hidden="true"
7      viewBox="0 0 24 24"
8      xmlns="http://www.w3.org/2000/svg"
9    >
10      <path
11        fillRule="evenodd"
12        clipRule="evenodd"
13        d="M11.54 22.351l.07.04.028.016a.76.76 0 00.723 0l.028-.015.071-.041a16.975 16.975 0 001.144-.742 19.58 19.58 0 002.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 00-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 002.682 2.282 16.975 16.975 0 001.145.742zM12 13.5a3 3 0 100-6 3 3 0 000 6z"
14      />
15    </svg>
16  );
17};
18
19const data = [
20  {
21    name: "Italy",
22    contactInfo: "789 Tech Avenue, Innovation City, Italy",
23    Icon: PinIcon,
24  },
25  {
26    name: "France",
27    contactInfo: "456 Main Street, Techville, France",
28    Icon: PinIcon,
29  },
30];
31
32export function ContactDetails9() {
33  return (
34    <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">
35      <div className="mb-12 flex justify-between gap-x-12 gap-y-12 max-lg:flex-col lg:items-center">
36        <div className="max-w-3xl">
37          <h2 className="mb-2 text-lg font-semibold text-sky-600">
38            Contact Us
39          </h2>
40          <p className="mb-4 text-4xl font-bold tracking-tight text-slate-900">
41            Reach Out to Us
42          </p>
43          <p className="text-lg text-slate-600">
44            For any inquiries or assistance, feel free to contact us. We are
45            committed to delivering innovative solutions and revolutionizing
46            front-end data to provide sustainable benefits to our clients.
47          </p>
48        </div>
49
50        <div className="flex w-full gap-x-12 gap-y-6 max-lg:flex-col lg:max-w-sm lg:flex-col">
51          {data.map(({ Icon, name, contactInfo }, index: number) => {
52            return (
53              <div key={index} className="flex w-full gap-x-6">
54                <Icon className="h-10 w-10 flex-shrink-0 rounded-lg bg-sky-600 fill-slate-100 p-2.5" />
55                <div>
56                  <h3 className="mb-2 text-xl font-bold capitalize text-slate-900">
57                    {name}
58                  </h3>
59                  <address className="break-words text-base not-italic text-slate-600">
60                    {contactInfo}
61                  </address>
62                </div>
63              </div>
64            );
65          })}
66        </div>
67      </div>
68
69      <div className="relative mx-auto w-full overflow-hidden rounded-3xl">
70        <img
71          src="https://images.unsplash.com/photo-1553009043-706fe04b071f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1634&q=80"
72          className="h-[512px] w-full bg-sky-100 object-cover"
73        />
74        <div className="absolute inset-0 bg-sky-600 mix-blend-color backdrop-brightness-50" />
75      </div>
76    </div>
77  );
78}
79