Skip to content

Commit 01d35ba

Browse files
ramkrishnsainiramkrishnsaini
committed
update
1 parent 08e0ef0 commit 01d35ba

1 file changed

Lines changed: 34 additions & 135 deletions

File tree

‎components/WhatsAppFloat.tsx‎

Lines changed: 34 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -1,141 +1,40 @@
1-
'use client';
2-
3-
import { useState } from 'react';
41
import { WHATSAPP_ME_URL } from '@/lib/whatsapp';
52

63
export default function WhatsAppFloat() {
7-
const [open, setOpen] = useState(false);
8-
94
return (
10-
<>
11-
{open && (
12-
<div
13-
style={{
14-
position: 'fixed',
15-
bottom: '90px',
16-
right: '1.5rem',
17-
width: 'min(340px, calc(100vw - 3rem))',
18-
background: 'var(--pts-bg)',
19-
borderRadius: '12px',
20-
boxShadow: '0 8px 32px rgba(0, 0, 0, 0.12)',
21-
padding: '1.5rem',
22-
zIndex: 1000,
23-
border: '1px solid var(--pts-border)',
24-
}}
25-
>
26-
<button
27-
type="button"
28-
onClick={() => setOpen(false)}
29-
style={{
30-
position: 'absolute',
31-
top: '0.75rem',
32-
right: '0.75rem',
33-
background: 'none',
34-
border: 'none',
35-
cursor: 'pointer',
36-
fontSize: '1.2rem',
37-
color: 'var(--pts-text-subtle)',
38-
lineHeight: 1,
39-
}}
40-
aria-label="Close"
41-
>
42-
×
43-
</button>
44-
45-
<h3
46-
style={{
47-
fontSize: '1rem',
48-
fontWeight: 700,
49-
color: 'var(--pts-text)',
50-
marginBottom: '0.75rem',
51-
paddingRight: '1.5rem',
52-
}}
53-
>
54-
Need IT Job or Interview Support? We&apos;re Here to Help!
55-
</h3>
56-
<p style={{ fontSize: '0.875rem', color: 'var(--pts-text-muted)', lineHeight: 1.6, marginBottom: '1rem' }}>
57-
Get instant support for your IT job or interview with our IT job support and interview assistance services
58-
</p>
59-
60-
<div
61-
style={{
62-
background: 'var(--pts-tech-header)',
63-
borderRadius: '6px',
64-
padding: '0.5rem 0.75rem',
65-
marginBottom: '0.75rem',
66-
display: 'inline-block',
67-
fontSize: '0.8rem',
68-
fontWeight: 600,
69-
color: 'var(--pts-forest)',
70-
border: '1px solid var(--pts-border)',
71-
}}
72-
>
73-
Quick Start Available
74-
</div>
75-
76-
<p style={{ fontSize: '0.875rem', color: 'var(--pts-text-muted)', lineHeight: 1.6, marginBottom: '1.25rem' }}>
77-
Our in-house experts can start guiding you immediately with job support, technical assistance, and interview preparation. No waiting, no delays.
78-
</p>
79-
80-
<a
81-
href={WHATSAPP_ME_URL}
82-
target="_blank"
83-
rel="noopener noreferrer"
84-
style={{
85-
display: 'block',
86-
background: '#25D366',
87-
color: '#fff',
88-
textAlign: 'center',
89-
padding: '0.75rem 1rem',
90-
borderRadius: '8px',
91-
fontWeight: 600,
92-
textDecoration: 'none',
93-
marginBottom: '0.75rem',
94-
fontSize: '0.9rem',
95-
}}
96-
>
97-
Chat on WhatsApp Now
98-
</a>
99-
100-
<p style={{ fontSize: '0.75rem', color: 'var(--pts-text-subtle)', textAlign: 'center' }}>
101-
24/7 Available | Secure &amp; Confidential
102-
</p>
103-
</div>
104-
)}
105-
106-
<div className="wa-float-root" style={{ position: 'fixed', bottom: '1.5rem', right: '1.5rem', zIndex: 1000 }}>
107-
<div
108-
style={{
109-
position: 'absolute',
110-
inset: 0,
111-
borderRadius: '50%',
112-
background: '#25D366',
113-
animation: 'wa-pulse 2s ease-out infinite',
114-
}}
115-
/>
116-
<button
117-
type="button"
118-
onClick={() => setOpen(!open)}
119-
style={{
120-
position: 'relative',
121-
width: '56px',
122-
height: '56px',
123-
borderRadius: '50%',
124-
background: '#25D366',
125-
border: 'none',
126-
cursor: 'pointer',
127-
display: 'flex',
128-
alignItems: 'center',
129-
justifyContent: 'center',
130-
boxShadow: '0 4px 16px rgba(37, 211, 102, 0.4)',
131-
}}
132-
aria-label="WhatsApp"
133-
>
134-
<svg width="28" height="28" viewBox="0 0 24 24" fill="white">
135-
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
136-
</svg>
137-
</button>
138-
</div>
139-
</>
5+
<div className="wa-float-root" style={{ position: 'fixed', bottom: '1.5rem', right: '1.5rem', zIndex: 1000 }}>
6+
<div
7+
style={{
8+
position: 'absolute',
9+
inset: 0,
10+
borderRadius: '50%',
11+
background: '#25D366',
12+
animation: 'wa-pulse 2s ease-out infinite',
13+
}}
14+
/>
15+
<a
16+
href={WHATSAPP_ME_URL}
17+
target="_blank"
18+
rel="noopener noreferrer"
19+
style={{
20+
position: 'relative',
21+
width: '56px',
22+
height: '56px',
23+
borderRadius: '50%',
24+
background: '#25D366',
25+
border: 'none',
26+
cursor: 'pointer',
27+
display: 'flex',
28+
alignItems: 'center',
29+
justifyContent: 'center',
30+
boxShadow: '0 4px 16px rgba(37, 211, 102, 0.4)',
31+
}}
32+
aria-label="Chat on WhatsApp"
33+
>
34+
<svg width="28" height="28" viewBox="0 0 24 24" fill="white" aria-hidden>
35+
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
36+
</svg>
37+
</a>
38+
</div>
14039
);
14140
}

0 commit comments

Comments
 (0)