Skip to content

Commit 7bb5813

Browse files
mrtnzlmlmrtnzlml
committed
update
1 parent 1f03190 commit 7bb5813

File tree

3 files changed

+167
-2
lines changed

3 files changed

+167
-2
lines changed

‎src/components/QuizComponent.module.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
.container {
22
border: 1px solid #e5e7eb;
33
border-radius: 8px;
4-
padding: 24px;
5-
margin: 24px 0;
4+
padding: 1.5rem;
5+
margin: 1.5rem 0;
66
background-color: #f9fafb;
77
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
88
}

‎src/components/SolutionArchitectCTA.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import React from 'react';
2+
import styles from './SolutionArchitectCTA.module.css';
3+
4+
const userData = {
5+
name: 'Martin Zlámal',
6+
title: 'Solution Architect',
7+
imageUrl: 'https://github.com/mrtnzlml.png',
8+
description:
9+
"My role as your Solution Architect is centered on one thing: your success. For some, it's about unlocking new ARR. For others, it's about getting rid of the old pesky system that is holding you back. Either way, I'm here to help. I thrive on diving into complex challenges and translating your vision into a robust, scalable reality. Partner with me to design a strategic blueprint that not only solves your immediate problems but also unlocks new opportunities and maximizes the value of your technology investment.",
10+
linkedinUrl: 'https://www.linkedin.com/in/mrtnzlml',
11+
};
12+
13+
/**
14+
* ## Usage
15+
*
16+
* Import it at the top of your MDX file:
17+
*
18+
* import SolutionArchitectCTA from '@site/src/components/SolutionArchitectCTA';
19+
*
20+
* Then, you can use it in your content like this:
21+
*
22+
* <SolutionArchitectCTA />
23+
*/
24+
export default function SolutionArchitectCTA() {
25+
return (
26+
<div className={styles.ctaContainer}>
27+
<div className={styles.imageContainer}>
28+
{/* Profile Picture */}
29+
<img
30+
src={userData.imageUrl}
31+
alt={`Profile picture of ${userData.name}`}
32+
className={styles.profileImage}
33+
onError={(e) => {
34+
e.target.onerror = null;
35+
e.target.src = 'https://placehold.co/400x400/cccccc/ffffff?text=Profile';
36+
}}
37+
/>
38+
39+
{/* Call to Action Button */}
40+
<div className={styles.buttonContainer}>
41+
<a
42+
href={userData.linkedinUrl}
43+
target="_blank"
44+
rel="noopener noreferrer"
45+
className={styles.ctaButton}
46+
>
47+
<svg
48+
className={styles.linkedinIcon}
49+
xmlns="http://www.w3.org/2000/svg"
50+
viewBox="0 0 448 512"
51+
fill="currentColor"
52+
>
53+
<path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 53.79-54.3c29.7 0 53.79 24.2 53.79 54.3.01 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z" />
54+
</svg>
55+
<span>Connect on LinkedIn</span>
56+
</a>
57+
</div>
58+
</div>
59+
60+
{/* Content Section */}
61+
<div className={styles.textContainer}>
62+
<h2 className={styles.title}>Need a Solution Architect?</h2>
63+
<p className={styles.description}>{userData.description}</p>
64+
</div>
65+
</div>
66+
);
67+
}

‎src/components/SolutionArchitectCTA.module.css‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
.ctaContainer {
2+
border-radius: 8px;
3+
border: 1px solid #e5e7eb;
4+
background-color: #f9fafb;
5+
padding: 2rem;
6+
margin: 1.5rem 0;
7+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
8+
display: flex;
9+
flex-direction: row;
10+
align-items: start;
11+
gap: 1.5rem;
12+
}
13+
14+
.imageContainer {
15+
display: flex;
16+
flex-direction: column;
17+
align-items: center;
18+
gap: 1.5rem;
19+
}
20+
21+
.profileImage {
22+
height: 10rem;
23+
width: 10rem;
24+
border-radius: 9999px; /* rounded-full */
25+
object-fit: cover;
26+
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.3),
27+
0 4px 6px -1px rgb(0 0 0 / 0.1),
28+
0 2px 4px -2px rgb(0 0 0 / 0.1); /* ring-4 ring-indigo-500/30 and shadow-md */
29+
}
30+
31+
.textContainer {
32+
flex: 1 1 0%;
33+
text-align: left;
34+
}
35+
36+
.title {
37+
font-size: 1.5rem;
38+
line-height: 2rem;
39+
font-weight: 700;
40+
color: #1e293b;
41+
}
42+
43+
.description {
44+
margin-top: 0.5rem;
45+
font-size: 1.125rem;
46+
line-height: 1.75rem;
47+
color: #475569;
48+
}
49+
50+
.buttonContainer {
51+
flex-shrink: 0;
52+
}
53+
54+
.ctaButton {
55+
display: inline-flex;
56+
align-items: center;
57+
justify-content: center;
58+
gap: 0.75rem;
59+
border-radius: 0.5rem;
60+
background-color: #4f46e5;
61+
padding: 0.75rem 1.5rem;
62+
font-weight: 600;
63+
color: white;
64+
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1),
65+
0 2px 4px -2px rgb(0 0 0 / 0.1);
66+
transition: all 0.3s ease-in-out;
67+
text-decoration: none;
68+
border: none;
69+
cursor: pointer;
70+
}
71+
72+
.ctaButton:hover {
73+
color: white;
74+
background-color: #4338ca;
75+
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
76+
0 4px 6px -4px rgb(0 0 0 / 0.1);
77+
}
78+
79+
.linkedinIcon {
80+
height: 1.25rem; /* h-5 */
81+
width: 1.25rem; /* w-5 */
82+
transition: transform 0.3s ease-in-out;
83+
}
84+
85+
/* Dark Mode Styles */
86+
[data-theme='dark'] .ctaContainer {
87+
background-color: #262626;
88+
border-color: #4d4d4d;
89+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.12);
90+
}
91+
92+
[data-theme='dark'] .title {
93+
color: #f1f5f9;
94+
}
95+
96+
[data-theme='dark'] .description {
97+
color: #cbd5e1;
98+
}

0 commit comments

Comments
 (0)