pepewebtech-website/index.html at master · webdevjosue/pepewebtech-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
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
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="PepeWebTech - AI-powered web development for small businesses. Fast, affordable, modern websites.">
    <meta name="keywords" content="web development, website design, small business, AI, affordable websites, Southern California">
    <title>PepeWebTech | AI-Powered Web Development</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/mobile-fixes.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <script>
        (function() {
            var stored = localStorage.getItem('theme');
            var prefersLight = window.matchMedia('(prefers-color-scheme: light)').matches;
            var theme = stored || (prefersLight ? 'light' : 'dark');
            document.documentElement.setAttribute('data-theme', theme);
        })();
    </script>
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar">
        <div class="nav-backdrop"></div>
        <div class="container">
            <a href="/" class="logo">
                <span class="logo-text">PepeWebTech</span>
            </a>
            <button class="mobile-menu-btn" aria-label="Toggle menu">
                <span></span>
                <span></span>
                <span></span>
            </button>
            <ul class="nav-links">
                <button class="nav-close" aria-label="Close menu">✕</button>
                <li><a href="services/">Services</a></li>
                <li><a href="pricing/">Pricing</a></li>
                <li><a href="about/">About</a></li>
                <li><a href="blog/">Blog</a></li>
                <li><button class="desktop-theme-toggle" aria-label="Toggle theme">🌙</button></li>
                <li><a href="contact/" class="btn btn-primary">Get Started</a></li>
                <li><button class="mobile-theme-toggle" aria-label="Toggle theme">🌙</button></li>
            </ul>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero">
        <div class="container">
            <div class="hero-content">
                <span class="badge">⚡ AI-Powered Development</span>
                <h1>Build Your Website <span class="gradient-text">4x Faster</span></h1>
                <p class="hero-subtitle">Modern websites for small businesses. Powered by AI, delivered in days, not weeks. Starting at $1,500.</p>
                <div class="hero-cta">
                    <a href="contact/" class="btn btn-primary btn-lg">Start Your Project</a>
                    <a href="pricing/" class="btn btn-outline btn-lg">View Pricing</a>
                </div>
                <div class="hero-stats">
                    <div class="stat">
                        <span class="stat-number">50+</span>
                        <span class="stat-label">Projects Delivered</span>
                    </div>
                    <div class="stat">
                        <span class="stat-number">4x</span>
                        <span class="stat-label">Faster Delivery</span>
                    </div>
                    <div class="stat">
                        <span class="stat-number">50%</span>
                        <span class="stat-label">Lower Cost</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="hero-bg"></div>
    </section>

    <!-- Services Preview -->
    <section class="services section-alt">
        <div class="container">
            <div class="section-header">
                <span class="section-tag">What We Do</span>
                <h2>Services Built for Small Business</h2>
                <p>Everything you need to establish your online presence</p>
            </div>
            <div class="services-grid">
                <div class="service-card">
                    <div class="service-icon">🚀</div>
                    <h3>Landing Pages</h3>
                    <p>Single-page sites designed to convert visitors into customers. Perfect for launching new products or services.</p>
                    <span class="service-price">From $1,500</span>
                </div>
                <div class="service-card">
                    <div class="service-icon">💼</div>
                    <h3>Business Websites</h3>
                    <p>Professional multi-page websites with all the features your business needs. Blog, contact forms, and more.</p>
                    <span class="service-price">From $3,000</span>
                </div>
                <div class="service-card">
                    <div class="service-icon">🛒</div>
                    <h3>E-Commerce</h3>
                    <p>Online stores with payment processing, inventory management, and everything you need to sell online.</p>
                    <span class="service-price">From $5,000</span>
                </div>
            </div>
            <div class="text-center mt-8">
                <a href="services/" class="btn btn-outline">View All Services →</a>
            </div>
        </div>
    </section>

    <!-- Why Us Section -->
    <section class="why-us">
        <div class="container">
            <div class="section-header">
                <span class="section-tag">Why PepeWebTech</span>
                <h2>The AI Advantage</h2>
                <p>We use cutting-edge AI tools to deliver better results, faster</p>
            </div>
            <div class="features-grid">
                <div class="feature">
                    <div class="feature-icon">⚡</div>
                    <h3>4x Faster</h3>
                    <p>AI-assisted development means we build in days what others take weeks to complete.</p>
                </div>
                <div class="feature">
                    <div class="feature-icon">💰</div>
                    <h3>50% Cheaper</h3>
                    <p>Efficiency savings passed directly to you. Enterprise quality at small business prices.</p>
                </div>
                <div class="feature">
                    <div class="feature-icon">📱</div>
                    <h3>Mobile-First</h3>
                    <p>Every site is built mobile-responsive from day one. No extra cost, no compromises.</p>
                </div>
                <div class="feature">
                    <div class="feature-icon">🔒</div>
                    <h3>Secure Hosting</h3>
                    <p>Free SSL, automatic backups, and enterprise-grade security included at no extra charge.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Blog Preview -->
    <section class="blog-preview section-alt">
        <div class="container">
            <div class="section-header">
                <span class="section-tag">Blog</span>
                <h2>Latest Insights</h2>
                <p>Tips, guides, and industry news for small businesses</p>
            </div>
            <div class="blog-grid">
                <article class="blog-card">
                    <div class="blog-image">
                        <span class="blog-category">Guide</span>
                    </div>
                    <div class="blog-content">
                        <span class="blog-date">Mar 21, 2026</span>
                        <h3><a href="blog/posts/2026-03-21-ai-video-content-marketing-2026-guide.html">AI Video Generation: Create Professional Marketing Content in Minutes</a></h3>
                        <p>AI video generation tools are transforming marketing for small businesses. Learn how to create professional video content in minutes.</p>
                        <a href="blog/posts/2026-03-21-ai-video-content-marketing-2026-guide.html" class="read-more">Read More →</a>
                    </div>
                </article>
                <article class="blog-card">
                    <div class="blog-image">
                        <span class="blog-category">News</span>
                    </div>
                    <div class="blog-content">
                        <span class="blog-date">Mar 20, 2026</span>
                        <h3><a href="blog/posts/2026-03-20-ai-startups-venture-capital-trend.html">AI Startups Are Eating the Venture Industry</a></h3>
                        <p>AI startups accounted for 41% of venture capital in 2025. What this means for your business strategy.</p>
                        <a href="blog/posts/2026-03-20-ai-startups-venture-capital-trend.html" class="read-more">Read More →</a>
                    </div>
                </article>
                <article class="blog-card">
                    <div class="blog-image">
                        <span class="blog-category">Tips</span>
                    </div>
                    <div class="blog-content">
                        <span class="blog-date">Mar 20, 2026</span>
                        <h3><a href="blog/posts/2026-03-20-ai-bot-traffic-web-infrastructure-small-business-guide.html">AI Bots Will Outnumber Humans Online by 2027</a></h3>
                        <p>What small businesses need to know about managing web traffic and hosting costs in the age of AI agents.</p>
                        <a href="blog/posts/2026-03-20-ai-bot-traffic-web-infrastructure-small-business-guide.html" class="read-more">Read More →</a>
                    </div>
                </article>
            </div>
            <div class="text-center mt-8">
                <a href="blog/" class="btn btn-outline">View All Posts →</a>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="cta-section">
        <div class="container text-center">
            <h2>Ready to Build Your Website?</h2>
            <p style="color: var(--text-secondary); margin: 1rem 0 2rem; max-width: 500px; margin-left: auto; margin-right: auto;">Get a free consultation and quote. No commitment required.</p>
            <a href="contact/" class="btn btn-primary btn-lg">Start Your Project</a>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-brand">
                    <a href="/" class="logo">
                        <span class="logo-text">PepeWebTech</span>
                    </a>
                    <p>AI-powered web development for small businesses.</p>
                </div>
                <div class="footer-links">
                    <div class="footer-column">
                        <h4>Services</h4>
                        <ul>
                            <li><a href="services/">Landing Pages</a></li>
                            <li><a href="services/">Business Sites</a></li>
                            <li><a href="services/">E-Commerce</a></li>
                            <li><a href="services/">Maintenance</a></li>
                        </ul>
                    </div>
                    <div class="footer-column">
                        <h4>Company</h4>
                        <ul>
                            <li><a href="about/">About</a></li>
                            <li><a href="blog/">Blog</a></li>
                            <li><a href="contact/">Contact</a></li>
                        </ul>
                    </div>
                    <div class="footer-column">
                        <h4>Connect</h4>
                        <ul>
                            <li><a href="mailto:info@pepewebtech.com">Email</a></li>
                            <li><a href="#">Twitter</a></li>
                            <li><a href="#">LinkedIn</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2026 Josue Zazueta LLC. All rights reserved.</p>
                <p>PepeWebTech is a service of Josue Zazueta LLC</p>
            </div>
        </div>
    </footer>

    <script src="js/main.js"></script>
</body>
</html>