File size: 14,460 Bytes
950bce1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ea70790
 
 
 
 
 
 
 
f21f777
 
ea70790
 
 
950bce1
 
e97945d
950bce1
e97945d
950bce1
e97945d
950bce1
 
e97945d
950bce1
e97945d
950bce1
 
f21f777
950bce1
 
e97945d
 
950bce1
 
 
 
 
e97945d
 
950bce1
 
 
 
 
 
 
 
e97945d
 
950bce1
 
 
 
 
 
 
 
e97945d
 
950bce1
 
 
 
 
 
 
 
 
e97945d
 
950bce1
 
 
e97945d
 
950bce1
 
 
e97945d
 
950bce1
 
 
e97945d
 
950bce1
 
 
e97945d
 
950bce1
 
 
e97945d
 
950bce1
 
 
e97945d
 
950bce1
 
 
e97945d
950bce1
e97945d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
950bce1
 
 
e97945d
f21f777
e97945d
2750d05
 
 
 
 
 
 
 
e97945d
2750d05
 
 
 
 
 
 
 
 
 
 
 
 
 
 
e97945d
 
 
 
 
 
 
 
 
2750d05
e97945d
2750d05
 
 
 
e97945d
2750d05
 
f21f777
2750d05
f21f777
950bce1
 
f21f777
950bce1
 
 
 
 
 
 
 
 
 
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beck-Publishing - Building Software, Systems, and Platforms That Actually Work</title>
    <meta name="description" content="Beck-Publishing specializes in custom software development, SaaS platforms, AI-driven applications, and security-focused infrastructure. Hire a top-tier developer for your next project.">
    <meta name="keywords" content="custom software development, SaaS, web applications, AI systems, security architecture, automation, publishing platforms, hire developer">
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
</head>
<body class="bg-gray-900 text-gray-100">
    <custom-navbar></custom-navbar>
    
    <main>
        <!-- Hero Section -->
        <section class="relative min-h-screen flex items-center justify-center px-4">
            <div class="absolute inset-0 z-0">
                <img src="https://huggingface.co/spaces/dbeck22/beckpublishing-secure-code-crafters/resolve/main/images/beck-publishing-logo.png" 
                     alt="Beck-Publishing Hero Image" 
                     class="w-full h-full object-cover opacity-20">
                <div class="absolute inset-0 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 opacity-90"></div>
            </div>
            <div class="text-center max-w-4xl mx-auto relative z-10">
                <img src="https://huggingface.co/spaces/dbeck22/beckpublishing-secure-code-crafters/resolve/main/images/beck-publishing-logo.png" 
                     alt="Beck-Publishing Logo" 
                     class="w-96 h-96 mx-auto mb-8 object-contain">
<h1 class="text-4xl md:text-6xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">
                    Building Software, Platforms and Systems that Solve Real-World Problems
                </h1>
                <p class="text-xl md:text-2xl text-gray-300 mb-10">
                    Beck-Publishing delivers elite custom software development, SaaS solutions, and security-first infrastructure that solve real business challenges for demanding clients.
                </p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
                    <a href="/hire.html" class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-8 rounded-lg transition duration-300 transform hover:scale-105">
                        Solve My Problem
                    </a>
                    <a href="/projects.html" class="border border-gray-600 hover:border-blue-500 text-gray-300 hover:text-blue-400 font-semibold py-3 px-8 rounded-lg transition duration-300">
                        See Solutions
                    </a>
</div>
            </div>
        </section>
<!-- Featured Projects -->
        <section class="py-20 px-4 bg-gray-800">
            <div class="max-w-6xl mx-auto">
                <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">Real-World Solutions</h2>
<div class="grid md:grid-cols-3 gap-8">
                    <div class="bg-gray-700 rounded-xl p-6 hover:bg-gray-600 transition duration-300">
                        <div class="mb-4">
                            <i data-feather="shield" class="text-blue-400 h-12 w-12"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2">YouCantSeeMeVPN</h3>
                        <p class="text-gray-300 mb-4">Solving privacy concerns with military-grade encryption and zero-log policy for secure internet access.</p>
<a href="#" class="text-blue-400 hover:text-blue-300 font-medium inline-flex items-center">
                            Learn more <i data-feather="arrow-right" class="ml-2 h-4 w-4"></i>
                        </a>
                    </div>
                    <div class="bg-gray-700 rounded-xl p-6 hover:bg-gray-600 transition duration-300">
                        <div class="mb-4">
                            <i data-feather="alert-triangle" class="text-red-400 h-12 w-12"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2">ExtinguisherTracker</h3>
                        <p class="text-gray-300 mb-4">Solving fire safety compliance challenges with IoT-powered real-time monitoring and automated tracking.</p>
<a href="#" class="text-blue-400 hover:text-blue-300 font-medium inline-flex items-center">
                            Learn more <i data-feather="arrow-right" class="ml-2 h-4 w-4"></i>
                        </a>
                    </div>
                    <div class="bg-gray-700 rounded-xl p-6 hover:bg-gray-600 transition duration-300">
                        <div class="mb-4">
                            <i data-feather="book-open" class="text-green-400 h-12 w-12"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2">Custom Publishing</h3>
                        <p class="text-gray-300 mb-4">Solving content distribution challenges with end-to-end digital publishing platforms for authors and publishers.</p>
<a href="#" class="text-blue-400 hover:text-blue-300 font-medium inline-flex items-center">
                            Learn more <i data-feather="arrow-right" class="ml-2 h-4 w-4"></i>
                        </a>
                    </div>
                </div>
            </div>
        </section>
        <!-- Services Preview -->
        <section class="py-20 px-4 bg-gray-900">
            <div class="max-w-6xl mx-auto">
                <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">Problem-Solving Services</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <div class="bg-gray-800 p-6 rounded-lg">
                        <i data-feather="code" class="h-8 w-8 text-blue-400 mb-4"></i>
                        <h3 class="text-xl font-bold mb-2">Custom Software</h3>
                        <p class="text-gray-400">Solving unique business challenges with tailored solutions</p>
</div>
                    <div class="bg-gray-800 p-6 rounded-lg">
                        <i data-feather="cloud" class="h-8 w-8 text-purple-400 mb-4"></i>
                        <h3 class="text-xl font-bold mb-2">SaaS Platforms</h3>
                        <p class="text-gray-400">Solving scalability challenges with subscription-based applications</p>
</div>
                    <div class="bg-gray-800 p-6 rounded-lg">
                        <i data-feather="cpu" class="h-8 w-8 text-green-400 mb-4"></i>
                        <h3 class="text-xl font-bold mb-2">AI Systems</h3>
                        <p class="text-gray-400">Solving complex problems with intelligent automation and machine learning</p>
</div>
                    <div class="bg-gray-800 p-6 rounded-lg">
                        <i data-feather="shield" class="h-8 w-8 text-red-400 mb-4"></i>
                        <h3 class="text-xl font-bold mb-2">Security Architecture</h3>
                        <p class="text-gray-400">Solving security vulnerabilities with fortified infrastructure</p>
</div>
                    <div class="bg-gray-800 p-6 rounded-lg">
                        <i data-feather="refresh-cw" class="h-8 w-8 text-yellow-400 mb-4"></i>
                        <h3 class="text-xl font-bold mb-2">Automation</h3>
                        <p class="text-gray-400">Solving inefficiency with workflow optimization and process automation</p>
</div>
                    <div class="bg-gray-800 p-6 rounded-lg">
                        <i data-feather="book" class="h-8 w-8 text-indigo-400 mb-4"></i>
                        <h3 class="text-xl font-bold mb-2">Publishing Platforms</h3>
                        <p class="text-gray-400">Solving content management challenges with digital distribution systems</p>
</div>
                </div>
                <div class="text-center mt-12">
                    <a href="/services.html" class="inline-flex items-center text-blue-400 hover:text-blue-300 font-semibold">
                        Explore problem-solving services <i data-feather="arrow-right" class="ml-2 h-5 w-5"></i>
                    </a>
</div>
            </div>
        </section>
        <!-- Problem-Solving Approach Section -->
        <section class="py-20 px-4 bg-gray-800">
            <div class="max-w-6xl mx-auto">
                <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">How We Solve Real Problems</h2>
                <div class="grid md:grid-cols-3 gap-8">
                    <div class="bg-gray-700 rounded-xl p-6 text-center">
                        <div class="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i data-feather="target" class="h-8 w-8 text-white"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">Identify Core Problems</h3>
                        <p class="text-gray-300">We dig deep to understand the root causes, not just the symptoms.</p>
                    </div>
                    <div class="bg-gray-700 rounded-xl p-6 text-center">
                        <div class="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i data-feather="code" class="h-8 w-8 text-white"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">Build Tailored Solutions</h3>
                        <p class="text-gray-300">Custom software designed specifically for your unique challenges.</p>
                    </div>
                    <div class="bg-gray-700 rounded-xl p-6 text-center">
                        <div class="w-16 h-16 bg-green-600 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i data-feather="trending-up" class="h-8 w-8 text-white"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">Deliver Measurable Results</h3>
                        <p class="text-gray-300">Solutions that drive real business value and measurable outcomes.</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Contact Form Section -->
        <section class="py-20 px-4 bg-gray-900">
            <div class="max-w-4xl mx-auto">
                <div class="grid md:grid-cols-2 gap-12 items-center">
                    <div>
                        <img src="https://huggingface.co/spaces/dbeck22/beckpublishing-secure-code-crafters/resolve/main/images/beck-publishing-all-details.png" 
                             alt="Beck-Publishing Detailed Logo" 
                             class="w-full h-auto rounded-2xl">
                    </div>
                    <div>
                        <h2 class="text-3xl font-bold mb-8 text-center">Solve Your Problem</h2>
                        <div class="bg-gray-700 rounded-2xl p-8">
                            <form class="space-y-6">
                                <div>
                                    <label for="contact-name" class="block text-sm font-medium text-gray-300 mb-2">Your Name</label>
                                    <input type="text" id="contact-name" name="name" required 
                                           class="w-full px-4 py-3 bg-gray-600 border border-gray-500 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500">
                                </div>
                                
                                <div>
                                    <label for="contact-email" class="block text-sm font-medium text-gray-300 mb-2">Email Address</label>
                                    <input type="email" id="contact-email" name="email" required 
                                           class="w-full px-4 py-3 bg-gray-600 border border-gray-500 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500">
                                </div>
                                
                                <div>
                                    <label for="contact-problem" class="block text-sm font-medium text-gray-300 mb-2">What problem are you solving?</label>
                                    <textarea id="contact-problem" name="problem" rows="3" required 
                                              class="w-full px-4 py-3 bg-gray-600 border border-gray-500 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500"
                                              placeholder="Describe the challenge you're facing..."></textarea>
                                </div>
                                
                                <div>
                                    <label for="contact-message" class="block text-sm font-medium text-gray-300 mb-2">Additional Details</label>
                                    <textarea id="contact-message" name="message" rows="3" 
                                              class="w-full px-4 py-3 bg-gray-600 border border-gray-500 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500"
                                              placeholder="Any other details about your project..."></textarea>
                                </div>
                                
                                <button type="submit" 
                                        class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition duration-300">
                                    Get Solution Proposal
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
</main>

    <custom-footer></custom-footer>

    <script src="components/navbar.js"></script>
    <script src="components/footer.js"></script>
    <script src="script.js"></script>
    <script>feather.replace();</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>