python-for-engineers.github.io/index.html at main · juno5377/python-for-engineers.github.io · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Python for Engineers - Landing Page</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-950 text-white">

  <!-- HERO SECTION -->
  <section class="text-center px-6 py-24 bg-gradient-to-b from-slate-900 to-slate-950">
    <h1 class="text-4xl md:text-6xl font-bold">Python for Engineers</h1>
    <p class="mt-6 text-lg text-slate-300 max-w-2xl mx-auto">
      Engineering Automation • Data Analytics • Computational Systems Design
    </p>

    <!-- LEAD CAPTURE FORM -->
    <form id="leadForm" class="mt-10 max-w-md mx-auto flex gap-2">
      <input
        type="email"
        id="email"
        placeholder="Enter your email"
        class="w-full px-4 py-3 rounded-lg text-black"
        required
      />
      <button
        type="submit"
        class="bg-blue-600 px-6 py-3 rounded-lg hover:bg-blue-700"
      >Join</button>
    </form>

    <p id="status" class="mt-3 text-sm"></p>
  </section>

  <!-- VALUE SECTION -->
  <section class="px-6 py-20 max-w-6xl mx-auto grid md:grid-cols-3 gap-6">
    <div class="bg-slate-900 p-6 rounded-lg">
      <h3 class="font-bold text-xl">Engineering Automation</h3>
      <p class="text-slate-400 mt-2">Automate engineering workflows using Python.</p>
    </div>
    <div class="bg-slate-900 p-6 rounded-lg">
      <h3 class="font-bold text-xl">Data Systems</h3>
      <p class="text-slate-400 mt-2">Analyze engineering data for decision-making.</p>
    </div>
    <div class="bg-slate-900 p-6 rounded-lg">
      <h3 class="font-bold text-xl">Computational Design</h3>
      <p class="text-slate-400 mt-2">Build engineering tools and models.</p>
    </div>
  </section>

  <!-- COURSE MODULES -->
  <section class="px-6 py-20 max-w-6xl mx-auto">
    <h2 class="text-3xl font-bold text-center mb-10">Course Modules</h2>
    <div class="grid md:grid-cols-2 gap-4 text-slate-200">
      <p>✔ Python Fundamentals for Engineers</p>
      <p>✔ Automation & Workflow Design</p>
      <p>✔ Engineering Calculations</p>
      <p>✔ Data Analysis & Visualization</p>
      <p>✔ SQLite Database Systems</p>
      <p>✔ Tkinter GUI Applications</p>
      <p>✔ FastAPI System Development</p>
      <p>✔ Real Engineering Projects</p>
    </div>
  </section>

  <!-- CTA -->
  <section class="text-center px-6 py-24 bg-gradient-to-t from-slate-900 to-slate-950">
    <h2 class="text-4xl font-bold">Start Building Engineering Systems</h2>
    <p class="mt-4 text-slate-400">Learn Python as an engineering tool, not just programming.</p>
    <button class="mt-8 bg-blue-600 px-8 py-4 rounded-lg hover:bg-blue-700">
      Enroll Now
    </button>
  </section>

  <!-- FOOTER -->
  <footer class="text-center py-10 text-slate-500 text-sm">
    Vipertech Automation and AI Solutions © 2026 Python for Engineers. All rights reserved.
  </footer>

  <!-- SCRIPT: HYBRID CRM PIPELINE -->
  <script>
    const GOOGLE_SHEETS_ENDPOINT = "https://script.google.com/macros/s/YOUR_SCRIPT_ID/exec";
    const BACKEND_API_ENDPOINT = "https://your-api-endpoint.com/lead";

    const form = document.getElementById("leadForm");
    const status = document.getElementById("status");

    form.addEventListener("submit", async (e) => {
      e.preventDefault();

      const email = document.getElementById("email").value;
      status.innerText = "Processing...";

      const payload = {
        email,
        source: "Python for Engineers Landing Page",
        timestamp: new Date().toISOString()
      };

      try {
        // Google Sheets (No-Code CRM)
        await fetch(GOOGLE_SHEETS_ENDPOINT, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload)
        });

        // Python Backend CRM
        await fetch(BACKEND_API_ENDPOINT, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload)
        });

        status.innerText = "Lead successfully captured into CRM system.";
        status.style.color = "#4ade80";
        form.reset();

      } catch (err) {
        status.innerText = "Submission failed. Please try again.";
        status.style.color = "#f87171";
      }
    });
  </script>

</body>
</html>