tubeconnect.pro/index.html at main · summit315/tubeconnect.pro · 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
<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tube Connect Pro</title>
  <style>
    :root{
      --red:#e53935;
      --dark:#111;
      --muted:#666;
      --radius:10px;
      font-family:"Helvetica Neue",Arial,sans-serif;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    body{background:#fff;color:var(--dark);line-height:1.6}
    header{background:#fff;border-bottom:4px solid var(--red);position:sticky;top:0;z-index:100}
    .container{max-width:1100px;margin:auto;padding:20px}
    .header-inner{display:flex;align-items:center;justify-content:space-between}
    .logo{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--dark)}
    .logo-mark{width:52px;height:52px;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;border-radius:8px;font-weight:700}
    nav a{margin:0 8px;text-decoration:none;font-weight:600;color:var(--dark)}
    nav a:hover,nav a.active{color:var(--red)}
    section{padding:60px 20px}
    h2{margin-bottom:20px}
    .btn{display:inline-block;padding:10px 14px;border-radius:8px;cursor:pointer;text-decoration:none;font-weight:700}
    .btn-primary{background:var(--red);color:#fff}
    .btn-outline{border:2px solid var(--red);color:var(--red)}
    .btn-order{background:var(--red);color:#fff;margin-top:10px}
    .grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
    .card{border:1px solid #eee;padding:20px;border-radius:12px}
    footer{background:#111;color:#fff;padding:30px 20px;text-align:center}
    footer a{color:#fff}
    .price{color:var(--red);font-weight:700;font-size:18px;margin:10px 0}
    @media(max-width:700px){.header-inner{flex-direction:column}}
  </style>
</head>
<body>

<header>
  <div class="container header-inner">
    <a href="#home" class="logo">
      <div class="logo-mark">TCP</div>
      <div>
        <h1 style="font-size:18px">Tube Connect Pro</h1>
        <small>Grow your YouTube channel</small>
      </div>
    </a>
    <nav>
      <a href="#home" class="active">Home</a>
      <a href="#about">About</a>
      <a href="#services">Services</a>
      <a href="#contact">Contact</a>
    </nav>
  </div>
</header>

<!-- Home -->
<section id="home" class="container">
  <h2>Welcome to Tube Connect Pro</h2>
  <p>লোগো থেকে শুরু করে ভিডিও এডিটিং ও SEO — সব YouTube service আমরা দিয়ে থাকি।</p>
  <a href="#services" class="btn btn-primary">See Our Services</a>
</section>

<!-- About -->
<section id="about" class="container">
  <h2>About Us</h2>
  <p>Tube Connect Pro একটি টিম যাদের মূল লক্ষ্য আপনার YouTube চ্যানেলকে প্রফেশনালি গ্রো করতে সাহায্য করা। আমরা Logo, Thumbnail, Editing, SEO সহ বিভিন্ন সার্ভিস দিয়ে থাকি।</p>
</section>

<!-- Services -->
<section id="services" class="container">
  <h2>Our Services & Prices</h2>
  <div class="grid-3">
    <div class="card">
      <h3>Logo Making</h3>
      <p class="price">৳50</p>
      <p>প্রফেশনাল লোগো ডিজাইন।</p>
      <button class="btn btn-order" data-service="Logo Making">Order Now</button>
    </div>
    <div class="card">
      <h3>Thumbnail Design</h3>
      <p class="price">৳70</p>
      <p>CTR বাড়ানো থাম্বনেইল।</p>
      <button class="btn btn-order" data-service="Thumbnail Design">Order Now</button>
    </div>
    <div class="card">
      <h3>Video Editing (10min)</h3>
      <p class="price">৳80</p>
      <p>এডিটিং + ট্রানজিশন।</p>
      <button class="btn btn-order" data-service="Video Editing">Order Now</button>
    </div>
    <div class="card">
      <h3>Channel Creation</h3>
      <p class="price">৳15</p>
      <p>চ্যানেল খোলা ও বেসিক সেটআপ।</p>
      <button class="btn btn-order" data-service="Channel Creation">Order Now</button>
    </div>
    <div class="card">
      <h3>Channel Settings Setup</h3>
      <p class="price">৳80</p>
      <p>About, links, playlist setup।</p>
      <button class="btn btn-order" data-service="Channel Settings Setup">Order Now</button>
    </div>
    <div class="card">
      <h3>SEO Optimization</h3>
      <p class="price">৳60</p>
      <p>Title, description, tags optimization।</p>
      <button class="btn btn-order" data-service="SEO Optimization">Order Now</button>
    </div>
  </div>
</section>

<!-- Contact -->
<section id="contact" class="container">
  <h2>Contact Us</h2>
  <p>Email: <a href="mailto:tubeconnectpro2025@gmail.com">tubeconnectpro2025@gmail.com</a></p>
  <p>WhatsApp: <a href="https://wa.me/8801641247100" target="_blank">+8801641247100</a></p>
  <button class="btn btn-primary btn-order" data-service="General Inquiry">Message on WhatsApp</button>
</section>

<footer>
  <p>© <span id="year"></span> Tube Connect Pro — All rights reserved.</p>
</footer>

<script>
  document.getElementById("year").textContent=new Date().getFullYear();
  const wpNumber="8801641247100";
  document.querySelectorAll(".btn-order").forEach(btn=>{
    btn.addEventListener("click",()=>{
      const service=btn.dataset.service||"Service";
      const msg=encodeURIComponent("Hi Tube Connect Pro, I want to order: "+service);
      window.open(`https://wa.me/${wpNumber}?text=${msg}`,"_blank");
    });
  });
</script>

</body>
</html>