-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
928 lines (860 loc) · 62.9 KB
/
Copy pathindex.html
File metadata and controls
928 lines (860 loc) · 62.9 KB
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
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head><script type="application/ld+json">
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "Person",
"@id": "https://www.bharatverse2.com/#jeevan-prasad",
"name": "Jeevan Prasad",
"alternateName": [
"Jeevan Prasad Author",
"Jeevan Prasad BharatVerse"
],
"description": "Jeevan Prasad is an Indian author, founder, and civilizational strategist working on India’s future through civilization, economy, and technology frameworks.",
"jobTitle": "Author & Founder",
"image": "https://www.bharatverse2.com/assets/images/jeevan-prasad.jpg",
"url": "https://www.bharatverse2.com",
"sameAs": [
"https://www.facebook.com/jeevanprasadauthor",
"https://www.instagram.com/jeevanprasadauthor",
"https://www.youtube.com/@jeevanprasadauthor",
"https://x.com/jeevanprasadtsm",
"https://www.linkedin.com/in/jeevanprasadauthor"
],
"knowsAbout": [
"Indian Civilization",
"Indian Economy",
"Future Technology",
"Civilizational Systems",
"Digital Strategy"
]
},
{
"@type": "Book",
"@id": "https://www.bharatverse2.com/#bharatverse-2",
"name": "BharatVerse 2.0",
"author": {
"@id": "https://www.bharatverse2.com/#jeevan-prasad"
},
"description": "BharatVerse 2.0 is a future-oriented book exploring Indian civilization, economic resurgence, and next-generation technological systems.",
"about": [
"Indian Civilization",
"Indian Economy",
"Future Technology",
"BHARAT50 Mission"
],
"inLanguage": "en-IN",
"bookEdition": "First Edition",
"publisher": {
"@type": "Organization",
"name": "BharatVerse"
}
},
{
"@type": "Organization",
"@id": "https://www.bharatverse2.com/#bharatverse-org",
"name": "BharatVerse 2.0",
"url": "https://www.bharatverse2.com",
"founder": {
"@id": "https://www.bharatverse2.com/#jeevan-prasad"
},
"description": "BharatVerse 2.0 is a civilizational and future-technology initiative aligned with India’s long-term national growth vision."
},
{
"@type": "Organization",
"@id": "https://www.tapsmm.com/#organization",
"name": "Tap Social Media Marketing",
"url": "https://www.tapsmm.com",
"founder": {
"@id": "https://www.bharatverse2.com/#jeevan-prasad"
}
},
{
"@type": "NewsMediaOrganization",
"@id": "https://www.virabharatnews.com/#organization",
"name": "Vira Bharat News",
"url": "https://www.virabharatnews.com",
"founder": {
"@id": "https://www.bharatverse2.com/#jeevan-prasad"
}
},
{
"@type": "Thing",
"@id": "https://www.bharatverse2.com/#bharat50",
"name": "BHARAT50",
"description": "BHARAT50 is a strategic mission envisioning India as a $50 Trillion economy through civilizational strength, economic reform, and future technology."
}
]
}
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tap Social Media Marketing Pvt Ltd | Global Digital Authority</title>
<meta name="description" content="India's #1 Election War Room & Digital PR Agency. Specialized in Political Campaigns (MLA/MP/CM), Enterprise SEO, Crisis Management, and 360° Viral Trends.">
<meta name="keywords" content="Election War Room, Political PR, MLA Campaign, Enterprise SEO, Social Media Verification, Hotel Digital Marketing, Hospital SMO, Crisis Management">
<meta name="author" content="TSM Jeevan Prasad">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://www.tapsmm.com/">
<!-- Open Graph / Social Media Meta -->
<meta property="og:title" content="Tap Social Media | The Execution Powerhouse">
<meta property="og:description" content="1 Million Followers in 20 Days. Statewide Synchronized Broadcasting. The only agency with deep organic mastery.">
<meta property="og:url" content="https://www.tapsmm.com">
<meta property="og:type" content="website">
<meta property="og:image" content="https://lh3.googleusercontent.com/pw/AP1GczNgSvR9PfhLPXfuvxBT5lQep_r2iqdB9A5yGTzUgS6O14zzuADwatPqFmzGLO_jiq8SMbmJnA_Pb1M-Q6pnz9RK2qIaNNmJDTXdG8AG6CyrSNjCujvpjK72NsCpXwWehzRPu-I3X0OYOF1ZthEQrAz5uA=w499-h499-s-no-gm?authuser=0">
<!-- Fonts: Inter (UI), Merriweather (Authority), Oswald (Headlines) -->
<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@300;400;600;700&family=Merriweather:wght@300;400;700;900&family=Oswald:wght@400;500;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<!-- Tailwind CSS (CDN for Static Implementation) -->
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Tailwind Config -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
brand: {
black: '#0a0a0a',
dark: '#111111',
red: '#D90429',
gold: '#C5A059',
gray: '#f4f4f5',
blue: '#003049',
audit: '#00ff41'
}
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
serif: ['Merriweather', 'serif'],
headline: ['Oswald', 'sans-serif'],
mono: ['JetBrains Mono', 'monospace'],
},
animation: {
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'scan': 'scan 4s linear infinite',
},
keyframes: {
scan: {
'0%': { transform: 'translateY(-100%)' },
'100%': { transform: 'translateY(100%)' },
}
}
}
}
}
</script>
<!-- CORE ENTITY SCHEMA (JSON-LD) -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "Organization",
"name": "Tap Social Media Marketing Private Limited",
"alternateName": "TSM",
"url": "https://www.tapsmm.com",
"logo": "https://lh3.googleusercontent.com/pw/AP1GczNgSvR9PfhLPXfuvxBT5lQep_r2iqdB9A5yGTzUgS6O14zzuADwatPqFmzGLO_jiq8SMbmJnA_Pb1M-Q6pnz9RK2qIaNNmJDTXdG8AG6CyrSNjCujvpjK72NsCpXwWehzRPu-I3X0OYOF1ZthEQrAz5uA=w499-h499-s-no-gm?authuser=0",
"founder": {
"@type": "Person",
"name": "TSM Jeevan Prasad"
},
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+91-9785614509",
"contactType": "sales",
"email": "jeevan9785@gmail.com"
},
"sameAs": ["https://www.facebook.com/tapsmm", "https://twitter.com/tapsmm"]
},
{
"@type": "Service",
"name": "Political Campaign Management",
"description": "End-to-end election management, digital war room setup, and voter sentiment analysis for MLA, MP, and CM campaigns."
},
{
"@type": "Service",
"name": "Social Media Verification",
"description": "Audit and assistance for Blue Tick verification on Facebook, Instagram, and Twitter."
}
]
}
</script>
<style>
/* Custom UX Improvements */
html { scroll-behavior: smooth; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb { background: #D90429; border-radius: 4px; }
.ticker-wrap { overflow: hidden; white-space: nowrap; }
.ticker { display: inline-block; animation: marquee 40s linear infinite; }
@keyframes marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
.glass-panel { background: rgba(10, 10, 10, 0.95); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); }
.forensic-grid { background-image: linear-gradient(rgba(0, 255, 65, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 65, 0.05) 1px, transparent 1px); background-size: 20px 20px; }
/* Tab Logic Styles */
.tab-btn.active { background-color: #D90429; color: white; border-color: #D90429; }
.tab-content { display: none; animation: fadeIn 0.4s ease-in-out; }
.tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
</style>
</head>
<body class="bg-gray-50 text-brand-black font-sans antialiased overflow-x-hidden selection:bg-brand-red selection:text-white">
<!-- 1. HEADER & NAVIGATION -->
<!-- Top Bar: Live Intel -->
<div class="bg-brand-black text-white text-xs py-2 border-b-2 border-brand-red z-50 relative">
<div class="container mx-auto px-4 flex items-center justify-between">
<div class="flex items-center w-full overflow-hidden gap-4">
<!-- LOGO WITH SAFFRON (YELLOW-500) BORDER -->
<img src="https://lh3.googleusercontent.com/pw/AP1GczNgSvR9PfhLPXfuvxBT5lQep_r2iqdB9A5yGTzUgS6O14zzuADwatPqFmzGLO_jiq8SMbmJnA_Pb1M-Q6pnz9RK2qIaNNmJDTXdG8AG6CyrSNjCujvpjK72NsCpXwWehzRPu-I3X0OYOF1ZthEQrAz5uA=w499-h499-s-no-gm?authuser=0" alt="TSM Logo" class="h-8 w-auto rounded-full border-2 border-yellow-500 shadow-sm ring-1 ring-yellow-500">
<span class="bg-brand-red px-2 py-1 font-bold uppercase tracking-wider text-[10px] animate-pulse shrink-0">Live Intel</span>
<div class="ticker-wrap w-full text-gray-300 font-mono">
<div class="ticker flex gap-8">
<span><i class="fas fa-bolt text-yellow-400 mr-2"></i>Execution: 1 Million Followers in 20 Days</span>
<span class="text-brand-red">•</span>
<span><i class="fas fa-users text-blue-400 mr-2"></i>Synchronized Assembly Broadcasting: ACTIVE</span>
<span class="text-brand-red">•</span>
<span><a href="#audit" class="underline text-brand-gold hover:text-white">Run Free Forensic Audit</a></span>
</div>
</div>
</div>
</div>
</div>
<!-- Main Navigation -->
<nav class="bg-white shadow-xl sticky top-0 z-40 border-b border-gray-100 backdrop-blur-md bg-white/95">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center h-20">
<a href="#home" class="flex items-center gap-3 group" aria-label="Home">
<div class="w-10 h-10 bg-brand-black text-white flex items-center justify-center font-serif font-black text-2xl group-hover:bg-brand-red transition-colors duration-300 rounded shadow-lg">T</div>
<div class="flex flex-col">
<span class="font-headline font-bold text-2xl leading-none tracking-tight text-brand-black group-hover:text-brand-red transition">TAP</span>
<span class="text-[0.6rem] uppercase tracking-[0.2em] text-gray-500 font-bold">Social Media Marketing</span>
</div>
</a>
<div class="hidden lg:flex space-x-6 text-xs font-bold uppercase tracking-wide items-center font-headline">
<a href="#about" class="hover:text-brand-red transition py-2">The TSM Edge</a>
<a href="#political" class="hover:text-brand-red transition py-2 text-brand-blue">Political War Room</a>
<a href="#universe" class="bg-brand-black text-white px-4 py-2 hover:bg-brand-gold transition rounded shadow-md"><i class="fas fa-layer-group mr-2"></i>Service Universe</a>
<a href="#audit" class="border border-brand-red text-brand-red px-4 py-2 hover:bg-brand-red hover:text-white transition rounded shadow-md"><i class="fas fa-search mr-2"></i>Forensic Audit</a>
</div>
<button onclick="document.getElementById('mobile-menu').classList.toggle('hidden')" class="lg:hidden text-brand-black text-2xl focus:outline-none" aria-label="Menu">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden lg:hidden bg-white border-t border-gray-200 shadow-2xl absolute w-full z-50">
<div class="flex flex-col font-bold text-sm uppercase font-headline">
<a href="#about" class="block text-gray-800 border-b p-4 hover:bg-gray-50">Why TSM?</a>
<a href="#political" class="block text-brand-blue border-b p-4 hover:bg-gray-50">Political Strategy</a>
<a href="#universe" class="block text-brand-gold border-b p-4 hover:bg-gray-50">All Services</a>
<a href="#audit" class="block text-white bg-brand-black p-4 text-center">Free Forensic Audit</a>
</div>
</div>
</nav>
<!-- 2. HERO SECTION -->
<header id="home" class="relative bg-brand-black text-white py-32 lg:py-48 overflow-hidden">
<div class="absolute inset-0 z-0">
<div class="absolute inset-0 bg-gradient-to-r from-brand-black via-brand-dark/95 to-brand-blue/80 z-10"></div>
<img src="https://images.unsplash.com/photo-1557804506-669a67965ba0?auto=format&fit=crop&q=80" loading="eager" class="w-full h-full object-cover opacity-30 grayscale transform scale-105" alt="Strategic Digital Operations Center">
</div>
<div class="container mx-auto px-4 relative z-20 text-center">
<div class="inline-block border border-brand-gold text-brand-gold px-6 py-2 text-xs font-bold uppercase tracking-widest mb-8 rounded-full bg-black/50 backdrop-blur-sm animate-fade-in-up">
<i class="fas fa-shield-alt mr-2"></i> Execution. Not Just Strategy.
</div>
<h1 class="text-5xl md:text-7xl font-serif font-bold mb-6 leading-tight drop-shadow-2xl">
Depth. Speed. <br>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-brand-red to-brand-gold">Organic Power.</span>
</h1>
<p class="text-xl text-gray-300 max-w-3xl mx-auto mb-12 font-light font-sans leading-relaxed">
We possess an execution capability that no other agency can match.
<strong class="text-white">1 Million Followers in 20 Days.</strong> Pure Organic Dominance.
</p>
<div class="flex flex-col md:flex-row justify-center gap-6">
<a href="#universe" class="bg-brand-red hover:bg-red-700 text-white px-10 py-4 font-bold uppercase tracking-wider rounded transition shadow-[0_0_20px_rgba(217,4,41,0.4)] font-headline">
View Rate Card
</a>
<a href="#audit" class="group bg-transparent border border-gray-600 text-white hover:border-brand-audit hover:text-brand-audit px-10 py-4 font-bold uppercase tracking-wider rounded transition font-mono flex items-center justify-center">
<i class="fas fa-terminal mr-2 group-hover:animate-pulse"></i> Start Audit
</a>
</div>
</div>
</header>
<!-- 3. AUTHORITY & TRUST (THE TSM EDGE) -->
<section id="about" class="py-24 bg-white border-b border-gray-100">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<span class="text-brand-red font-bold uppercase tracking-widest text-xs">Why TSM?</span>
<h2 class="text-4xl md:text-5xl font-serif font-bold text-brand-dark mt-2">The Execution Capability No One Else Has.</h2>
<p class="mt-6 text-gray-600 max-w-3xl mx-auto italic text-lg leading-relaxed border-l-4 border-brand-gold pl-6">
"Only TSM can execute this—because the depth, speed, and organic power we possess is simply impossible for any other agency to replicate."
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
<div class="flex gap-6 p-6 hover:bg-gray-50 rounded-xl transition duration-300 border border-transparent hover:border-gray-100">
<div class="shrink-0 w-16 h-16 bg-brand-black text-white flex items-center justify-center text-2xl font-bold rounded shadow-lg">01</div>
<div>
<h3 class="text-xl font-bold font-headline uppercase mb-3">15+ Years of Organic Mastery</h3>
<p class="text-gray-600 text-sm leading-relaxed">
We possess deep technical Facebook ecosystem mastery. We don't rely on ads; we leverage a ready-to-deploy nationwide network of strong pages and profiles tailored for <strong class="text-brand-black">Ideologically Aligned Narratives</strong>.
</p>
</div>
</div>
<div class="flex gap-6 p-6 hover:bg-gray-50 rounded-xl transition duration-300 border border-transparent hover:border-gray-100">
<div class="shrink-0 w-16 h-16 bg-brand-red text-white flex items-center justify-center text-2xl font-bold rounded shadow-lg">02</div>
<div>
<h3 class="text-xl font-bold font-headline uppercase mb-3">1 Million Followers in 20 Days</h3>
<p class="text-gray-600 text-sm leading-relaxed">
We have delivered <strong>1 million real, active, targeted followers</strong> in record time. No bots. No international filler. Only verified users from specific states who shape opinion. This speed is unmatched in the country today.
</p>
</div>
</div>
<div class="flex gap-6 p-6 hover:bg-gray-50 rounded-xl transition duration-300 border border-transparent hover:border-gray-100">
<div class="shrink-0 w-16 h-16 bg-brand-blue text-white flex items-center justify-center text-2xl font-bold rounded shadow-lg">03</div>
<div>
<h3 class="text-xl font-bold font-headline uppercase mb-3">Zero-Spend Viral Reach</h3>
<p class="text-gray-600 text-sm leading-relaxed">
Facebook remains the most powerful narration platform in India. We don't spend a rupee on boosting posts. Our reach is <strong>100% organic</strong> because our followers are pre-aligned, triggering natural, explosive sharing.
</p>
</div>
</div>
<div class="flex gap-6 p-6 hover:bg-gray-50 rounded-xl transition duration-300 border border-transparent hover:border-gray-100">
<div class="shrink-0 w-16 h-16 bg-brand-gold text-brand-black flex items-center justify-center text-2xl font-bold rounded shadow-lg">04</div>
<div>
<h3 class="text-xl font-bold font-headline uppercase mb-3">Assembly-Level Synchronization</h3>
<p class="text-gray-600 text-sm leading-relaxed">
<strong>A Digital First:</strong> We deploy 100–200 pages <em>per assembly constituency</em>. We execute synchronized Cross-Posting & Live Streaming so the message hits the entire state at the <strong>same second</strong>.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- 4. POLITICAL PACKAGES (High Priority) -->
<section id="political" class="py-24 bg-brand-blue text-white relative overflow-hidden">
<div class="absolute inset-0 opacity-10 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')]"></div>
<div class="container mx-auto px-4 relative z-10">
<div class="flex flex-col lg:flex-row gap-16 items-center">
<div class="lg:w-5/12">
<span class="bg-brand-red px-4 py-1 text-xs font-bold uppercase rounded mb-6 inline-block shadow-lg">Governance & Elections</span>
<h2 class="text-4xl md:text-5xl font-serif font-bold mb-6 leading-tight">The "Digital Tsunami" Protocol</h2>
<p class="text-gray-300 mb-8 text-lg leading-relaxed">
Reach is instant. Message is undistorted. Opposition gets <strong>zero time to react.</strong>
</p>
<div class="bg-brand-black/50 p-6 rounded border-l-4 border-brand-gold backdrop-blur-sm">
<h4 class="font-bold text-brand-gold mb-2">Strategic Blueprint (₹65 Lakh/Year)</h4>
<p class="text-sm text-gray-400">Viral Hindutva Creative, Facebook Growth (1M+ Reach), Twitter Trends, and 360° Media (OTT, Cinepolis).</p>
</div>
</div>
<div class="lg:w-7/12 w-full">
<div class="bg-white/10 border border-white/20 p-8 rounded-xl backdrop-blur-md shadow-2xl">
<h3 class="font-headline font-bold text-2xl mb-6 text-brand-gold border-b border-white/10 pb-4">Election Management Packages</h3>
<!-- Pricing Grid -->
<div class="space-y-4">
<!-- MLA -->
<div class="bg-brand-dark p-5 rounded-lg border-l-4 border-brand-red flex justify-between items-center hover:bg-black transition cursor-default">
<div>
<h4 class="font-bold text-white uppercase text-lg">MLA Target</h4>
<p class="text-xs text-gray-400 mt-1">10,000 Videos/Year • 50K FB Followers</p>
</div>
<div class="text-right">
<span class="block text-2xl font-bold text-brand-gold">₹10 Lakh</span>
<span class="text-[10px] uppercase text-gray-500 font-bold tracking-wider">Per Year</span>
</div>
</div>
<!-- MP -->
<div class="bg-brand-dark p-5 rounded-lg border-l-4 border-brand-gold flex justify-between items-center hover:bg-black transition cursor-default">
<div>
<h4 class="font-bold text-white uppercase text-lg">MP Target</h4>
<p class="text-xs text-gray-400 mt-1">20,000 Videos/Year • 1 Lakh FB Followers</p>
</div>
<div class="text-right">
<span class="block text-2xl font-bold text-brand-gold">₹25 Lakh</span>
<span class="text-[10px] uppercase text-gray-500 font-bold tracking-wider">Per Year</span>
</div>
</div>
<!-- CM -->
<div class="bg-brand-dark p-5 rounded-lg border-l-4 border-brand-blue flex justify-between items-center hover:bg-black transition cursor-default transform hover:scale-[1.02] shadow-xl">
<div>
<h4 class="font-bold text-white uppercase text-lg">CM Target</h4>
<p class="text-xs text-gray-400 mt-1">1 Lakh Videos/Year • 10 Lakh FB Followers</p>
</div>
<div class="text-right">
<span class="block text-2xl font-bold text-brand-gold">₹85 Lakh</span>
<span class="text-[10px] uppercase text-gray-500 font-bold tracking-wider">Per Year</span>
</div>
</div>
</div>
<p class="text-[10px] text-center text-gray-400 italic mt-6">* Followers are FREE with Video Packages. Terms Apply.</p>
</div>
</div>
</div>
</div>
</section>
<!-- 5. THE SERVICE UNIVERSE (Tabbed Interface) -->
<section id="universe" class="py-24 bg-gray-50 border-t border-brand-black">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<span class="bg-brand-black text-white px-4 py-1 text-xs font-bold uppercase rounded shadow">Complete Rate Card</span>
<h2 class="text-4xl md:text-5xl font-serif font-bold text-brand-dark mt-4">Explore TSM Universe</h2>
<p class="text-gray-500 text-sm mt-2">Select a category to view detailed deliverables and pricing.</p>
</div>
<div class="flex flex-col lg:flex-row gap-8">
<!-- Sidebar Tabs -->
<div class="lg:w-1/4 flex flex-row lg:flex-col gap-2 overflow-x-auto lg:overflow-visible pb-4 lg:pb-0 scrollbar-hide">
<button onclick="openTab(event, 'social')" class="tab-btn active text-left px-6 py-4 bg-white border border-gray-200 font-bold hover:bg-gray-100 uppercase text-sm shadow-sm rounded transition-all whitespace-nowrap lg:whitespace-normal">Social Media Rates</button>
<button onclick="openTab(event, 'political-audit')" class="tab-btn text-left px-6 py-4 bg-white border border-gray-200 font-bold hover:bg-gray-100 uppercase text-sm shadow-sm rounded transition-all whitespace-nowrap lg:whitespace-normal">Political Strategy</button>
<button onclick="openTab(event, 'corporate')" class="tab-btn text-left px-6 py-4 bg-white border border-gray-200 font-bold hover:bg-gray-100 uppercase text-sm shadow-sm rounded transition-all whitespace-nowrap lg:whitespace-normal">Corporate & PR Wire</button>
<button onclick="openTab(event, 'hospitals')" class="tab-btn text-left px-6 py-4 bg-white border border-gray-200 font-bold hover:bg-gray-100 uppercase text-sm shadow-sm rounded transition-all whitespace-nowrap lg:whitespace-normal text-brand-red"><i class="fas fa-heartbeat mr-2"></i>Hospitals Plan</button>
<button onclick="openTab(event, 'hotel')" class="tab-btn text-left px-6 py-4 bg-white border border-gray-200 font-bold hover:bg-gray-100 uppercase text-sm shadow-sm rounded transition-all whitespace-nowrap lg:whitespace-normal text-brand-gold"><i class="fas fa-hotel mr-2"></i>Hotel & Travel</button>
<!-- News Agency Tab Removed -->
<button onclick="openTab(event, 'verify')" class="tab-btn text-left px-6 py-4 bg-white border border-gray-200 font-bold hover:bg-gray-100 uppercase text-sm shadow-sm rounded transition-all whitespace-nowrap lg:whitespace-normal text-blue-600"><i class="fas fa-check-circle mr-2"></i>Verification</button>
<button onclick="openTab(event, 'bulk')" class="tab-btn text-left px-6 py-4 bg-white border border-gray-200 font-bold hover:bg-gray-100 uppercase text-sm shadow-sm rounded transition-all whitespace-nowrap lg:whitespace-normal">Bulk Outreach</button>
<button onclick="openTab(event, 'tech')" class="tab-btn text-left px-6 py-4 bg-white border border-gray-200 font-bold hover:bg-gray-100 uppercase text-sm shadow-sm rounded transition-all whitespace-nowrap lg:whitespace-normal">AI & Tech</button>
<button onclick="openTab(event, 'allinone')" class="tab-btn text-left px-6 py-4 bg-brand-gold text-brand-black font-bold hover:bg-yellow-500 uppercase text-sm shadow-sm rounded transition-all whitespace-nowrap lg:whitespace-normal"><i class="fas fa-star mr-2"></i>All-In-One Plan</button>
</div>
<!-- Content Area -->
<div class="lg:w-3/4 bg-white p-8 md:p-10 border border-gray-200 shadow-2xl rounded-lg min-h-[600px]">
<!-- TAB 1: SOCIAL MEDIA RATES -->
<div id="social" class="tab-content active">
<h3 class="text-3xl font-serif font-bold text-brand-blue mb-8 border-b pb-4">Social Media Rate Card</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="p-6 border border-gray-100 rounded-lg hover:shadow-lg transition">
<h4 class="font-bold text-brand-red mb-4 text-xl flex items-center"><i class="fab fa-facebook mr-3 text-2xl"></i> Facebook</h4>
<ul class="text-sm space-y-4 text-gray-700">
<li class="flex justify-between border-b border-gray-100 pb-2"><span>Page Likes (Promo):</span> <strong>₹0.30 - ₹0.50 / Like</strong></li>
<li class="flex justify-between border-b border-gray-100 pb-2"><span>Management:</span> <strong>₹5,000 / Month</strong></li>
</ul>
</div>
<div class="p-6 border border-gray-100 rounded-lg hover:shadow-lg transition">
<h4 class="font-bold text-brand-red mb-4 text-xl flex items-center"><i class="fab fa-twitter mr-3 text-2xl"></i> Twitter (X)</h4>
<ul class="text-sm space-y-4 text-gray-700">
<li class="flex justify-between border-b border-gray-100 pb-2"><span>Followers (Global):</span> <strong>$0.45 / Follower</strong></li>
<li class="flex justify-between border-b border-gray-100 pb-2"><span>Organic (Indian):</span> <strong>₹20 / Follower</strong></li>
<li class="flex justify-between border-b border-gray-100 pb-2"><span>Trending (Top 5):</span> <strong>₹40,000 / Hour</strong></li>
<li class="flex justify-between border-b border-gray-100 pb-2"><span>Management:</span> <strong>₹15,000 / Month</strong></li>
</ul>
</div>
<div class="p-6 border border-gray-100 rounded-lg hover:shadow-lg transition">
<h4 class="font-bold text-brand-red mb-4 text-xl flex items-center"><i class="fab fa-instagram mr-3 text-2xl"></i> Instagram</h4>
<ul class="text-sm space-y-4 text-gray-700">
<li class="flex justify-between border-b border-gray-100 pb-2"><span>Followers (Std):</span> <strong>₹7 - ₹8 / Follower</strong></li>
<li class="flex justify-between border-b border-gray-100 pb-2"><span>Followers (Prem):</span> <strong>₹15 - ₹20 / Follower</strong></li>
<li class="flex justify-between border-b border-gray-100 pb-2"><span>Reel (1M Views):</span> <strong>₹60,000</strong></li>
</ul>
</div>
<div class="p-6 border border-gray-100 rounded-lg hover:shadow-lg transition">
<h4 class="font-bold text-brand-red mb-4 text-xl flex items-center"><i class="fab fa-youtube mr-3 text-2xl"></i> YouTube</h4>
<ul class="text-sm space-y-4 text-gray-700">
<li class="flex justify-between border-b border-gray-100 pb-2"><span>Subscribers:</span> <strong>₹15 - ₹25 / Sub</strong></li>
<li class="flex justify-between border-b border-gray-100 pb-2"><span>Views:</span> <strong>₹0.20 / View</strong></li>
<li class="flex justify-between border-b border-gray-100 pb-2"><span>Trending (India):</span> <strong>₹20 Lakh</strong></li>
<li class="flex justify-between border-b border-gray-100 pb-2"><span>Monetization:</span> <strong>₹50,000 (Fixed)</strong></li>
</ul>
</div>
</div>
</div>
<!-- TAB 2: POLITICAL STRATEGY (Detailed) -->
<div id="political-audit" class="tab-content">
<h3 class="text-3xl font-serif font-bold text-brand-blue mb-6 border-b pb-4">Strategic Election Blueprint (₹65 Lakh/Year)</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
<div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
<h4 class="font-bold text-lg mb-4 text-brand-red"><i class="fas fa-bullhorn mr-2"></i> Outreach & Growth</h4>
<ul class="text-sm space-y-3 text-gray-600 list-disc list-inside">
<li><strong>Viral Hindutva Creative:</strong> 70-80 posts/month.</li>
<li><strong>Facebook Growth:</strong> 1 Million+ Reach, 8 Local Pages.</li>
<li><strong>Video:</strong> Regular Live Sessions & Interviews.</li>
<li><strong>Twitter:</strong> India’s Top 5 Trends (1 Hr).</li>
</ul>
</div>
<div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
<h4 class="font-bold text-lg mb-4 text-brand-blue"><i class="fas fa-network-wired mr-2"></i> Media & Tech</h4>
<ul class="text-sm space-y-3 text-gray-600 list-disc list-inside">
<li><strong>Bulk Outreach:</strong> WhatsApp, SMS, Voice Calls.</li>
<li><strong>YouTube:</strong> Trending Top 10 (On Request).</li>
<li><strong>Ads:</strong> OTT, Cinepolis Theater, Bus Stands.</li>
<li><strong>Influencers:</strong> Credibility boost via key figures.</li>
</ul>
</div>
</div>
<div class="bg-brand-black text-white p-6 rounded-lg flex justify-between items-center">
<div>
<h4 class="text-xl font-bold text-brand-gold">PR Deliverables</h4>
<p class="text-sm text-gray-400">5 Articles (ANI, PTI, TOI) + Positive News Placement</p>
</div>
<div class="text-right">
<div class="text-2xl font-bold">1M+ Reach</div>
<div class="text-xs uppercase tracking-wider text-gray-500">Constituency-wise</div>
</div>
</div>
</div>
<!-- TAB 3: CORPORATE & PR -->
<div id="corporate" class="tab-content">
<h3 class="text-3xl font-serif font-bold text-brand-blue mb-6 border-b pb-4">Corporate & PR Wire Network</h3>
<p class="mb-6 text-gray-600">Brand Evangelism for Corporate Giants. We build authority, not just links.</p>
<div class="overflow-x-auto border rounded-lg shadow-sm">
<table class="w-full text-sm text-left">
<thead class="bg-brand-black text-white uppercase text-xs">
<tr>
<th class="px-6 py-4">Package</th>
<th class="px-6 py-4">Network Coverage</th>
<th class="px-6 py-4 text-right">Price (Ex. GST)</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-100 bg-white">
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 font-bold text-brand-dark">ANI-PTI-NW</td>
<td class="px-6 py-4 text-gray-600">ANI + PTI + 100 Sites</td>
<td class="px-6 py-4 text-right font-bold text-brand-red">₹33,480</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 font-bold text-brand-dark">Business Prime</td>
<td class="px-6 py-4 text-gray-600">ANI (BS) + 150 Sites</td>
<td class="px-6 py-4 text-right font-bold text-brand-red">₹39,744</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 font-bold text-brand-dark">Entertainment</td>
<td class="px-6 py-4 text-gray-600">ANI + Ent. Buzz</td>
<td class="px-6 py-4 text-right font-bold text-brand-red">₹24,408</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 font-bold text-brand-dark">ANI-100</td>
<td class="px-6 py-4 text-gray-600">ANI News + 100 Digital</td>
<td class="px-6 py-4 text-right font-bold text-brand-red">₹21,600</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- TAB 4: HOSPITALS -->
<div id="hospitals" class="tab-content">
<div class="flex justify-between items-end mb-6 border-b pb-4">
<h3 class="text-3xl font-serif font-bold text-brand-red">SMO for Healthcare</h3>
<div class="text-right">
<span class="block text-3xl font-bold text-brand-black">₹1.00 Lakh</span>
<span class="text-sm text-gray-500">/ Month</span>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 text-sm text-gray-700 mb-8">
<div class="bg-red-50 p-6 rounded border border-red-100">
<h5 class="font-bold mb-3 text-brand-red uppercase text-xs tracking-widest">Core Deliverables</h5>
<ul class="space-y-3">
<li class="flex justify-between"><span>Management (5 Platforms):</span> <strong>Included</strong></li>
<li class="flex justify-between"><span>Creative Designs (10 Posts):</span> <strong>Included</strong></li>
<li class="flex justify-between"><span>Paid Ads Management:</span> <strong>Included</strong></li>
<li class="flex justify-between"><span>Animated Video (1 Unit):</span> <strong>Included</strong></li>
</ul>
</div>
<div class="bg-blue-50 p-6 rounded border border-blue-100">
<h5 class="font-bold mb-3 text-brand-blue uppercase text-xs tracking-widest">Growth Targets</h5>
<ul class="space-y-3">
<li class="flex justify-between"><span>Facebook Followers:</span> <strong>5K</strong></li>
<li class="flex justify-between"><span>Instagram Followers:</span> <strong>2K</strong></li>
<li class="flex justify-between"><span>WhatsApp Bulk:</span> <strong>50K</strong></li>
<li class="flex justify-between"><span>Voice Call Bulk:</span> <strong>50K</strong></li>
</ul>
</div>
</div>
<div class="bg-gray-900 text-white p-4 rounded text-center">
<strong class="text-brand-gold">Tech Add-on included:</strong> Chatbot Automation & Lead Generation (Est. 100 Leads).
</div>
</div>
<!-- TAB 5: HOTEL & TRAVEL (NEW) -->
<div id="hotel" class="tab-content">
<h3 class="text-3xl font-serif font-bold text-brand-gold mb-6 border-b pb-4">Hotel Branding Roadmap (12 Months)</h3>
<div class="space-y-4">
<div class="flex flex-col md:flex-row gap-4 p-4 border rounded hover:bg-gray-50">
<div class="md:w-1/4 font-bold text-brand-black uppercase">Foundation<br><span class="text-xs text-gray-500">Months 1-2</span></div>
<div class="md:w-3/4 text-sm text-gray-600">Google My Business Optimization, Website SEO Audit, TripAdvisor/OTA Listings, 30-Day Content Calendar.</div>
</div>
<div class="flex flex-col md:flex-row gap-4 p-4 border rounded hover:bg-gray-50">
<div class="md:w-1/4 font-bold text-brand-red uppercase">SEO & Boost<br><span class="text-xs text-gray-500">Months 3-4</span></div>
<div class="md:w-3/4 text-sm text-gray-600">20 Keywords Optimization, 40+ Travel Blog Backlinks, Social Media Lead Gen Ads (Booking Offers).</div>
</div>
<div class="flex flex-col md:flex-row gap-4 p-4 border rounded hover:bg-gray-50">
<div class="md:w-1/4 font-bold text-brand-blue uppercase">PR & Influence<br><span class="text-xs text-gray-500">Months 5-6</span></div>
<div class="md:w-3/4 text-sm text-gray-600">PR Articles in Regional News, Geo-fencing Ads (Airport/Railway), Influencer Video Promotion.</div>
</div>
<div class="flex flex-col md:flex-row gap-4 p-4 border rounded bg-brand-gold/10 border-brand-gold">
<div class="md:w-1/4 font-bold text-brand-gold uppercase">Domination<br><span class="text-xs text-gray-500">Months 9-12</span></div>
<div class="md:w-3/4 text-sm text-gray-800 font-medium">Professional Drone/Virtual Tour, National PR Coverage, Advanced Automated Lead Gen.</div>
</div>
</div>
<div class="mt-6 text-center">
<a href="#contact" class="inline-block bg-brand-black text-white px-8 py-3 text-xs font-bold uppercase rounded hover:bg-brand-gold transition">Get Custom Roadmap Quote</a>
</div>
</div>
<!-- TAB 7: VERIFICATION HELPER (NEW) -->
<div id="verify" class="tab-content">
<h3 class="text-3xl font-serif font-bold text-blue-600 mb-6 border-b pb-4">Social Media Verification Helper</h3>
<div class="bg-blue-50 border-l-4 border-blue-600 p-4 mb-8 text-sm text-blue-900">
<strong>Note:</strong> We offer an <em>audit and assistance</em> service. We do not "sell" verification; we build the legitimacy required by platforms.Guarantees are lies; we provide authority.
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-center mb-8">
<div class="p-6 border rounded hover:shadow-lg transition">
<i class="fas fa-chart-line text-4xl text-green-600 mb-4"></i>
<h4 class="font-bold text-lg mb-2">SMO Activity</h4>
<div class="text-xl font-bold text-brand-black mb-2">₹50,000</div>
<p class="text-xs text-gray-500">Content Creation (20-30 Posts), 5-7L Reach, 20-50K Engagement.</p>
</div>
<div class="p-6 border rounded hover:shadow-lg transition">
<i class="fas fa-newspaper text-4xl text-brand-red mb-4"></i>
<h4 class="font-bold text-lg mb-2">PR & SEO</h4>
<div class="text-xl font-bold text-brand-black mb-2">₹1.5 Lakh</div>
<p class="text-xs text-gray-500">Top Tier Media Coverage (Hindustan Times, ANI) for legitimacy.</p>
</div>
<div class="p-6 border rounded hover:shadow-lg transition">
<i class="fab fa-wikipedia-w text-4xl text-brand-black mb-4"></i>
<h4 class="font-bold text-lg mb-2">Knowledge Panel</h4>
<div class="text-xl font-bold text-brand-black mb-2">₹1.35 Lakh</div>
<p class="text-xs text-gray-500">Wiki Article Creation, Info Box, External Links.</p>
</div>
</div>
<div class="bg-gray-900 text-white p-8 rounded text-center">
<h4 class="text-xl font-bold text-brand-gold mb-2">COMPLETE VERIFICATION BUNDLE</h4>
<div class="text-5xl font-bold mb-2">₹3.35 Lakh</div>
<p class="text-xs text-gray-400 uppercase tracking-widest">*Only Wiki Amount is Refundable in case of rejection.</p>
</div>
</div>
<!-- TAB 8: BULK & TECH -->
<div id="bulk" class="tab-content">
<h3 class="text-3xl font-serif font-bold text-brand-blue mb-6 border-b pb-4">Bulk Outreach & Data</h3>
<div class="space-y-6">
<div class="flex items-center justify-between p-4 bg-gray-50 rounded border">
<div>
<h4 class="font-bold text-lg">Data Services</h4>
<p class="text-xs text-gray-500">All India Database (Categorized)</p>
</div>
<div class="text-xl font-bold text-brand-red">25 Paise <span class="text-xs font-normal text-gray-500">/ Number</span></div>
</div>
<div class="flex items-center justify-between p-4 bg-gray-50 rounded border">
<div>
<h4 class="font-bold text-lg"><i class="fab fa-whatsapp text-green-500 mr-2"></i> WhatsApp Bulk</h4>
</div>
<div class="text-xl font-bold text-brand-red">15 Paise <span class="text-xs font-normal text-gray-500">/ Credit</span></div>
</div>
<div class="flex items-center justify-between p-4 bg-gray-50 rounded border">
<div>
<h4 class="font-bold text-lg"><i class="fas fa-phone-alt text-blue-500 mr-2"></i> Voice Call</h4>
</div>
<div class="text-xl font-bold text-brand-red">15 Paise <span class="text-xs font-normal text-gray-500">/ Credit</span></div>
</div>
</div>
</div>
<div id="tech" class="tab-content">
<h3 class="text-3xl font-serif font-bold text-brand-blue mb-6 border-b pb-4">AI & Future Tech</h3>
<div class="bg-gradient-to-r from-blue-900 to-brand-black text-white p-10 rounded shadow-xl text-center">
<i class="fas fa-robot text-6xl text-brand-audit mb-6"></i>
<h4 class="text-3xl font-bold mb-4">Personal AI Chatbot</h4>
<p class="text-gray-300 mb-8 max-w-xl mx-auto">Your own "Business ChatGPT". We are the first and only company providing this custom AI service for politicians and businesses to automate interaction.</p>
<span class="inline-block border border-brand-audit text-brand-audit px-6 py-2 text-sm uppercase font-bold rounded tracking-widest">Rate Disclosed on Dealing</span>
</div>
</div>
<!-- TAB 9: ALL IN ONE -->
<div id="allinone" class="tab-content">
<div class="bg-brand-black text-white p-10 rounded-lg shadow-2xl relative overflow-hidden">
<div class="absolute top-0 right-0 bg-brand-red text-white text-xs font-bold px-6 py-2">BEST SELLER</div>
<h3 class="text-4xl font-serif font-bold text-brand-gold mb-8 text-center">The "All-In-One" Package</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 mb-10">
<div>
<h4 class="text-brand-gold font-bold mb-4 border-b border-gray-700 pb-2">Monthly Deliverables</h4>
<ul class="space-y-4 text-sm text-gray-300">
<li><i class="fas fa-check text-green-500 mr-2"></i> <strong>Daily 2 Creatives (Premium)</strong></li>
<li><i class="fas fa-check text-green-500 mr-2"></i> Weekly 2 High-Quality Videos</li>
<li><i class="fas fa-check text-green-500 mr-2"></i> Free 500 FB Followers</li>
<li><i class="fas fa-check text-green-500 mr-2"></i> Full Management (FB/Insta/X/YT)</li>
</ul>
</div>
<div class="bg-gray-900 p-6 rounded border border-gray-700">
<h4 class="text-brand-red font-bold mb-4 border-b border-gray-700 pb-2">Annual Plan Exclusive (₹36,000)</h4>
<ul class="space-y-4 text-sm text-white">
<li><i class="fas fa-star text-yellow-400 mr-2"></i> <strong>Free Static Website Design</strong></li>
<li><i class="fas fa-star text-yellow-400 mr-2"></i> <strong>Free Lifetime Hosting</strong></li>
<li><i class="fas fa-save text-green-400 mr-2"></i> Significant Savings</li>
</ul>
</div>
</div>
<div class="flex flex-col md:flex-row items-center justify-center gap-12 border-t border-gray-800 pt-8">
<div class="text-center">
<span class="block text-gray-400 text-xs uppercase mb-1">Monthly</span>
<span class="text-4xl font-bold">₹2,999</span>
</div>
<div class="h-12 w-px bg-gray-700 hidden md:block"></div>
<div class="text-center">
<span class="block text-brand-gold text-xs uppercase font-bold mb-1">Annual Deal</span>
<span class="text-5xl font-bold text-brand-gold">₹36,000</span>
</div>
</div>
<div class="mt-10 text-center">
<a href="https://wa.me/918239043904" target="_blank" class="inline-block bg-white text-black px-12 py-4 font-bold uppercase text-sm hover:bg-brand-red hover:text-white transition shadow-lg rounded tracking-widest">Subscribe Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 6. FORENSIC AUDIT TOOL -->
<section id="audit" class="relative py-24 bg-brand-dark border-t border-gray-800 overflow-hidden">
<div class="absolute inset-0 forensic-grid opacity-10"></div>
<div class="container mx-auto px-4 relative z-10">
<div class="flex flex-col lg:flex-row gap-16 items-center">
<div class="lg:w-5/12">
<h2 class="text-brand-audit font-mono text-xl mb-4 blink">> SYSTEM_DIAGNOSTIC_TOOL</h2>
<h3 class="text-4xl font-bold text-white mb-6">Free Forensic Digital Audit</h3>
<p class="text-gray-400 mb-8 leading-relaxed">
Our proprietary algorithm scans 100+ data points across SEO, Social Media, and Tech Stack to reveal the brutal truth about your digital presence. Get a diagnostic report in seconds.
</p>
<ul class="text-sm text-gray-500 font-mono space-y-2">
<li>[+] Check Brand Sentiment</li>
<li>[+] Verify Domain Authority</li>
<li>[+] Analyze Competitor Ad Spend</li>
</ul>
</div>
<div class="lg:w-7/12 w-full">
<div class="glass-panel p-10 rounded-lg border-l-4 border-brand-audit shadow-[0_0_30px_rgba(0,255,65,0.1)] relative">
<div class="flex justify-between text-xs font-mono text-brand-audit mb-8 border-b border-gray-700 pb-2">
<span>STATUS: ONLINE</span>
<span id="session-id">ID: TSM-INIT</span>
</div>
<form id="auditForm" onsubmit="handleAudit(event)" class="space-y-6">
<div>
<label class="text-white text-xs font-bold uppercase mb-2 block tracking-wider">Target Asset URL</label>
<input type="text" id="auditUrl" placeholder="https://www.yourbrand.com" class="w-full bg-black/50 border border-gray-600 text-white p-4 font-mono focus:border-brand-audit focus:ring-1 focus:ring-brand-audit outline-none rounded transition-all">
</div>
<button id="submitBtn" class="w-full bg-brand-audit text-black font-bold uppercase py-4 font-mono hover:bg-white transition hover:shadow-[0_0_15px_rgba(0,255,65,0.5)]">RUN DIAGNOSTIC</button>
</form>
<!-- Success UI -->
<div id="successMsg" class="hidden text-center py-12">
<i class="fas fa-check-circle text-6xl text-brand-audit mb-6 animate-bounce"></i>
<h3 class="text-white font-bold text-2xl uppercase font-mono">Audit Initiated</h3>
<p class="text-gray-400 text-sm mt-3">Report generating... Please check your email.</p>
</div>
<!-- Block UI -->
<div id="abuseModal" class="hidden absolute inset-0 bg-black/95 z-20 flex flex-col items-center justify-center text-center p-8 backdrop-blur-md">
<i class="fas fa-lock text-red-500 text-5xl mb-4"></i>
<h3 class="text-white font-bold text-2xl uppercase mb-2 font-mono">ACCESS DENIED</h3>
<p class="text-gray-400 text-xs mb-8 font-mono tracking-widest">Single Audit Limit Reached.</p>
<a href="https://wa.me/918239043904?text=Unlock%20Unlimited%20Audits" class="bg-green-600 text-white px-8 py-3 font-bold uppercase text-sm rounded shadow hover:bg-green-500 transition">Verify on WhatsApp</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 7. FOOTER -->
<footer id="contact" class="bg-brand-dark text-gray-500 py-16 border-t-4 border-brand-red text-sm">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
<div>
<h4 class="text-white font-bold uppercase mb-6 text-lg tracking-wider">Tap Social Media.</h4>
<p class="mb-4 leading-relaxed">Global HQ for Brand Authority & Political Strategy. We build narratives that govern nations and markets.</p>
<p>Cyber City, Gurugram, India</p>
<!-- Google Maps Location Link -->
<a href="https://share.google/1XElsTwv0Z9eOFwPB" target="_blank" class="mt-4 inline-flex items-center text-brand-gold font-bold hover:text-white transition">
<i class="fas fa-map-marker-alt text-lg mr-2 animate-bounce"></i> Locate HQ
</a>
</div>
<div>
<h4 class="text-white font-bold uppercase mb-6 text-sm tracking-wider">Silos</h4>
<ul class="space-y-3">
<li><a href="#political" class="hover:text-brand-red transition">Political Consulting</a></li>
<li><a href="#corporate" class="hover:text-brand-red transition">Enterprise SEO</a></li>
<li><a href="#universe" class="hover:text-brand-red transition">Verification Services</a></li>
<li><a href="#audit" class="hover:text-brand-red transition">Forensic Audit</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-bold uppercase mb-6 text-sm tracking-wider">Legal</h4>
<ul class="space-y-3">
<li><a href="#" class="hover:text-brand-red transition">NDA Policy</a></li>
<li><a href="#" class="hover:text-brand-red transition">Ethics Code</a></li>
<li><a href="#" class="hover:text-brand-red transition">Privacy</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-bold uppercase mb-6 text-sm tracking-wider">Connect</h4>
<p class="mb-3 flex items-center"><i class="fas fa-phone mr-3 text-brand-gold"></i> +91 97856 14509</p>
<p class="mb-3 flex items-center"><i class="fas fa-envelope mr-3 text-brand-gold"></i> jeevan9785@gmail.com</p>
</div>
</div>
<div class="text-center pt-8 border-t border-gray-800 text-xs">
<p class="mb-4">© 2026 Tap Social Media Marketing Pvt Ltd. All Rights Reserved.</p>
<div class="flex flex-col md:flex-row justify-center gap-6 text-gray-600 font-mono">
<span>TRAI Entity: 1202159931252831370</span>
<span class="hidden md:inline text-brand-red">•</span>
<span>GST: 08AAHCT6826F1Z4</span>
</div>
</div>
</div>
</footer>
<!-- Animated WhatsApp CTA -->
<a href="https://wa.me/918239043904?text=Hi%20TSM,%20I%20want%20to%20inquire%20about%20services." target="_blank" class="fixed bottom-6 right-6 z-50 group" aria-label="Chat on WhatsApp">
<div class="absolute inset-0 bg-green-500 rounded-full animate-ping opacity-75"></div>
<div class="relative bg-green-500 text-white p-4 rounded-full shadow-2xl hover:bg-green-600 transition flex items-center gap-3">
<i class="fab fa-whatsapp text-3xl"></i>
<span class="max-w-0 overflow-hidden group-hover:max-w-xs transition-all duration-500 ease-in-out whitespace-nowrap font-bold">Chat with TSM</span>
</div>
</a>
<!-- Scripts -->
<script>
// --- 1. Tab Logic ---
function openTab(evt, tabName) {
var i, content, btn;
content = document.getElementsByClassName("tab-content");
for (i = 0; i < content.length; i++) {
content[i].classList.remove("active");
}
btn = document.getElementsByClassName("tab-btn");
for (i = 0; i < btn.length; i++) {
btn[i].classList.remove("active");
}
document.getElementById(tabName).classList.add("active");
if(evt) evt.currentTarget.classList.add("active");
}
// --- 2. ID Generation for Forensic UI ---
document.getElementById('session-id').innerText = 'ID: ' + Math.random().toString(36).substr(2, 9).toUpperCase();
// --- 3. Forensic Audit Logic ---
function handleAudit(event) {
event.preventDefault();
const storageKey = 'tsm_audit_final_lock_v3';
const btn = document.getElementById('submitBtn');
const url = document.getElementById('auditUrl').value;
if(!url) {
alert('Please enter a valid URL.');
return;
}
// Simulate Processing
btn.innerHTML = '<i class="fas fa-cog fa-spin mr-2"></i> ANALYZING DIGITAL FOOTPRINT...';
btn.disabled = true;
btn.classList.add('opacity-75', 'cursor-not-allowed');
setTimeout(() => {
if(localStorage.getItem(storageKey)) {
// Blocked
document.getElementById('abuseModal').classList.remove('hidden');
document.getElementById('abuseModal').classList.add('flex');
btn.innerHTML = 'ACCESS DENIED';
} else {
// Success
localStorage.setItem(storageKey, 'true');
document.getElementById('auditForm').classList.add('hidden');
document.getElementById('successMsg').classList.remove('hidden');
}
}, 2000); // 2 second delay for realism
}
<!-- Official Biography Backlink Footer -->
<div style="text-align:center; padding:25px 10px; font-size:14px; color:#666; border-top:1px solid #eee; margin-top:40px;">
<p style="margin:5px 0;">
© 2026 | All Rights Reserved
</p>
<p style="margin:5px 0;">
Official Biography:
<a href="http://jeevanprasadauthor.wikidot.com/" target="_blank" rel="noopener noreferrer" style="color:#0a58ca; text-decoration:none;">
Jeevan Prasad Swami Profile
</a>
</p>
</div>
</script>
</body>
</html>