Website/index.html at main · joebruce1313/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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Breaking Circuits</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Header Section -->
    <header class="header">
        <div class="header-overlay">
            <h1>Breaking Circuits</h1>
            <p>Where Technology Meets Purpose</p>
            <button class="cta-button">In Need of Service</button>
        </div>
        <div class="circuit-animation"></div>
    </header>

    <!-- Navigation Bar -->
    <nav class="nav">
        <a href="#services">Services</a>
        <a href="#llm-sales">Private LLMs</a>
        <a href="#why-us">Why Us</a>
        <a href="#contact">Contact</a>
    </nav>

    <!-- Services Section -->
    <section id="services" class="services">
        <h2>Our Services</h2>
        <div class="service-grid">
            <div class="service-card">
                <h3>Help Desk Services</h3>
                <p>Pay-Per-Ticket: $20</p>
                <p>Pay-Per-Call: $15-$25</p>
            </div>
            <div class="service-card">
                <h3>Virtual Mailbox Hosting</h3>
                <p>Starting at $10/month</p>
            </div>
            <div class="service-card">
                <h3>VPN Services</h3>
                <p>Starting at $5/month</p>
            </div>
            <div class="service-card">
                <h3>Incident Response</h3>
                <p>Starting at $500/incident</p>
            </div>
            <div class="service-card">
                <h3>Consultations</h3>
                <p>$50/hour</p>
            </div>
        </div>
    </section>

    <!-- Private LLM Sales Section -->
    <section id="llm-sales" class="llm-sales">
        <h2>Private LLM Installations</h2>
        <div class="llm-grid">
            <div class="llm-card">
                <h3>Starter LLM</h3>
                <p>$50 - Personal AI Assistant</p>
                <button class="buy-now">Buy Now</button>
            </div>
            <div class="llm-card">
                <h3>Pro LLM</h3>
                <p>$150 - Custom AI for Small Businesses</p>
                <button class="buy-now">Buy Now</button>
            </div>
            <div class="llm-card">
                <h3>Enterprise LLM</h3>
                <p>$200 - Advanced AI Solutions</p>
                <button class="buy-now">Buy Now</button>
            </div>
        </div>
    </section>

    <!-- Why Us Section -->
    <section id="why-us" class="why-us">
        <h2>Why Choose Us?</h2>
        <ul>
            <li>Affordable Cybersecurity and IT Solutions</li>
            <li>Empowering Underserved Communities</li>
            <li>State-of-the-Art AI and Cybersecurity Integration</li>
            <li>Community-Focused Education and Job Training</li>
        </ul>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="contact">
        <h2>Contact Us</h2>
        <p>📧 Email: support@breakingcircuits.com</p>
        <p>📞 Phone: 1-800-CIRCUIT</p>
        <p>🌐 Website: www.breakingcircuits.com</p>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <p>Breaking Circuits © 2024</p>
    </footer>

    <!-- Chatbot -->
    <div id="chatbot" class="chatbot">
        <div id="chatbot-header">Need Help? Chat With Us!</div>
        <div id="chatbot-body">
            <p>Hi! How can we assist you today?</p>
        </div>
        <input id="chatbot-input" type="text" placeholder="Type your message...">
    </div>

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