TheOptitechHub/mentorship.html at main · freedompraise/TheOptitechHub · 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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mentorship Program</title>
    <link rel="icon" type="image/png" href="/images/portrait-3.jpg">
    <link rel="stylesheet" href="css/mentorship.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <!-- Navigation -->
    <nav class="navbar navbar-light bg-light">
        <div class="container">
            <a href="index.html" class="btn btn-outline-primary">Back to Home</a>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero-section text-center text-light">
        <div class="container hero-content">
            <div class="text-container">
                <h1 class="display-4">Transform Your Career with Expert Mentorship</h1>
                <p class="lead">Join the Freelancing Mentorship Program or the 30-Day Job Application Challenge and
                    achieve your career goals!</p>
                <div class="cta-buttons">
                    <a href="https://selar.co/m1mft6" class="btn btn-primary btn-lg">Join Mentorship Program</a>
                    <a href="https://selar.co/b9033e" class="btn btn-outline-light btn-lg">Join the Job Challenge</a>
                </div>
            </div>
            <div class="image-container">
                <img src="images/portrait-2.png" alt="Coach Image" class="hero-image">
            </div>
        </div>
    </section>


    <!-- Sliding Images -->
    <!-- <section class="images-carousel py-5">
        <div id="mentorshipImages" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="images/full-1.jpg" class="d-block w-100" alt="Mentor Image 1">
                </div>
                <div class="carousel-item">
                    <img src="images/full-2.jpg" class="d-block w-100" alt="Mentor Image 2">
                </div>
                <div class="carousel-item">
                    <img src="images/full-3.jpg" class="d-block w-100" alt="Mentor Image 3">
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#mentorshipImages" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#mentorshipImages" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    </section> -->

    <!-- Scrolling Testimonials -->
    <section class="scrolling-testimonials py-5">
        <h2 class="text-center">What People Are Saying</h2>
        <p class="text-center text-muted">Click on the images below to view them fully.</p>
        <div class="d-flex justify-content-center flex-wrap testimonial-images">
            <img class="imageModal" src="images/mentorship/1.jpeg" alt="Testimonial 1">
            <img class="imageModal" src="images/mentorship/2.jpeg" alt="Testimonial 2">
            <img class="imageModal" src="images/mentorship/3.jpeg" alt="Testimonial 3">
            <img class="imageModal" src="images/mentorship/4.jpeg" alt="Testimonial 4">
            <img class="imageModal" src="images/mentorship/5.jpeg" alt="Testimonial 5">
            <img class="imageModal" src="images/mentorship/6.jpeg" alt="Testimonial 6">
            <img class="imageModal" src="images/mentorship/7.jpeg" alt="Testimonial 7">
            <img class="imageModal" src="images/mentorship/8.jpeg" alt="Testimonial 8">
            <img class="imageModal" src="images/mentorship/9.jpeg" alt="Testimonial 9">
            <img class="imageModal" src="images/mentorship/10.jpeg" alt="Testimonial 10">
            <img class="imageModal" src="images/mentorship/11.jpeg" alt="Testimonial 11">
            <img class="imageModal" src="images/mentorship/12.jpeg" alt="Testimonial 12">
            <img class="imageModal" src="images/mentorship/13.jpeg" alt="Testimonial 13">
            <img class="imageModal" src="images/mentorship/14.jpeg" alt="Testimonial 14">
            <img class="imageModal" src="images/mentorship/19.jpeg" alt="Testimonial 15">
            <img class="imageModal" src="images/mentorship/16.jpeg" alt="Testimonial 16">
            <img class="imageModal" src="images/mentorship/17.jpeg" alt="Testimonial 17">
            <img class="imageModal" src="images/mentorship/18.jpeg" alt="Testimonial 18">
        </div>
    </section>

    <!-- Screenshots -->
    <section class="screenshots py-5 text-center">
        <h2>Job Offers from Upwork</h2>
        <div class="d-flex justify-content-center flex-wrap">
            <img class="imageModal" src="images/offers/1.jpeg" alt="Upwork Job Offer 1">
            <img class="imageModal" src="images/offers/2.jpeg" alt="Upwork Job Offer 2">
            <!-- <img class="imageModal" src="images/offers/3.jpeg" alt="Upwork Job Offer 3"> -->
        </div>
    </section>

    <!-- Testimonials -->
    <section class="challenge-testimonials py-5 text-center">
        <h2>Success Stories from the 30-Day Challenge</h2>
        <div class="d-flex flex-wrap justify-content-center gap-3">
            <img class="imageModal" src="images/challenge/1.jpeg" alt="Testimonial 1">
            <img class="imageModal" src="images/challenge/2.jpeg" alt="Testimonial 2">
            <img class="imageModal" src="images/challenge/3.jpeg" alt="Testimonial 3">
        </div>
    </section>

    <!-- Praises from Clients -->
    <section class="client-praises py-5 text-center">
        <h2>What Clients Are Saying</h2>
        <div class="d-flex justify-content-center flex-wrap">
            <img class="imageModal" src="images/clients/1.jpeg" alt="Client Praise 1">
            <img class="imageModal" src="images/clients/2.jpeg" alt="Client Praise 2">
            <img class="imageModal" src="images/clients/3.jpeg" alt="Client Praise 3">
            <img class="imageModal" src="images/clients/4.jpeg" alt="Client Praise 4">
            <img class="imageModal" src="images/clients/5.jpeg" alt="Client Praise 5">
            <img class="imageModal" src="images/clients/6.jpeg" alt="Client Praise 6">
            <img class="imageModal" src="images/clients/7.jpeg" alt="Client Praise 7">
        </div>
    </section>


    <!-- Highlights -->
    <section class="highlights py-5">
        <div class="container">
            <h2 class="text-center">Highlights of the Mentorship Program</h2>
            <ul class="text-center">
                <li>Personalized coaching to define your niche and overcome challenges</li>
                <li>Exclusive templates for pitching, proposals, and client communication</li>
                <li>Access to a thriving freelancing community</li>
                <li>Free masterclasses and unlimited learning resources</li>
            </ul>
            <p>Plus, gain access to the 30-Day Job Application Challenge to land your dream role!</p>
        </div>
    </section>

    <!-- Benefits -->
    <section class="benefits py-5 bg-light">
        <div class="container">
            <h2 class="text-center">Benefits of Joining The Challenge</h2>
            <ul class="text-center">
                <li>Step-by-step system to target the right roles</li>
                <li>Write ATS-friendly resumes and personalized cover letters</li>
                <li>Proven strategies for networking and cold emailing</li>
                <li>LinkedIn profile optimization and recruiter visibility</li>
            </ul>
        </div>
    </section>


    <!-- Image Modal -->
    <div class="modal fade" id="imageModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body text-center">
                    <img id="modalImage" class="img-fluid" alt="Expanded Image">
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const modal = new bootstrap.Modal(document.getElementById("imageModal"));
            const modalImage = document.getElementById("modalImage");

            document.querySelectorAll(".testimonial-images img, .screenshots img, .challenge-testimonials img, .client-praises img").forEach(img => {
                img.addEventListener("click", function () {
                    modalImage.src = this.src;
                    modal.show();
                });
            });
        });
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>

</html>