Hugging Face's logo

Spaces:
wangxso
/
securefortress-elite-guard
Running

App Files Community
wangxso commited on
Commit
4cca29a
·
verified ·
1 Parent(s): 866ca89

所有的按钮都要可点击包括footer和nav上面的insights和Contact

Browse files
Files changed (10) hide show
  1. README.md +7 -4
  2. about.html +149 -0
  3. components/footer.js +201 -0
  4. components/navbar.js +207 -0
  5. contact.html +124 -0
  6. index.html +167 -19
  7. insights.html +95 -0
  8. script.js +76 -0
  9. services.html +187 -0
  10. style.css +47 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Securefortress Elite Guard
3
- emoji: 👀
4
  colorFrom: blue
5
- colorTo: pink
 
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: SecureFortress Elite Guard 🛡️
 
3
  colorFrom: blue
4
+ colorTo: gray
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
about.html ADDED
@@ -0,0 +1,149 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>About | SecureVest Capital Shield</title>
7
+ <meta name="description" content="Learn about SecureVest's leadership team, history, and our unique approach to integrated security and investment solutions">
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <link rel="preconnect" href="https://fonts.googleapis.com">
13
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
15
+ </head>
16
+ <body class="bg-gray-50 text-gray-800 font-sans">
17
+ <custom-navbar></custom-navbar>
18
+
19
+ <main>
20
+ <!-- Hero Section -->
21
+ <section class="relative h-96 flex items-center justify-center text-center px-4 bg-gradient-to-b from-gray-900 to-gray-800 text-white">
22
+ <div class="absolute inset-0 bg-black opacity-50"></div>
23
+ <div class="relative z-10 max-w-4xl mx-auto">
24
+ <h1 class="text-4xl md:text-5xl font-bold mb-6 font-serif">Our Story</h1>
25
+ <p class="text-xl md:text-2xl leading-relaxed">Pioneering the convergence of strategic advisory, capital intelligence, and security fortification</p>
26
+ </div>
27
+ </section>
28
+
29
+ <!-- History Section -->
30
+ <section class="py-20 bg-white">
31
+ <div class="max-w-7xl mx-auto px-4">
32
+ <div class="flex flex-col md:flex-row items-center gap-12">
33
+ <div class="md:w-1/2">
34
+ <h2 class="text-3xl font-bold mb-6 font-serif">Our History</h2>
35
+ <p class="text-gray-700 mb-4 leading-relaxed">Founded in 2012 by former intelligence officers and financial strategists, SecureVest Capital Shield emerged from a recognition that traditional risk management approaches were inadequate for modern global enterprises.</p>
36
+ <p class="text-gray-700 mb-4 leading-relaxed">Our initial focus on executive protection for high-profile investors evolved into a comprehensive consultancy as clients sought integrated solutions addressing both physical security and financial risk.</p>
37
+ <p class="text-gray-700 mb-6 leading-relaxed">Today, we operate across 12 countries with a team of 150+ specialists, serving Fortune 500 companies, sovereign wealth funds, and prominent individuals requiring discrete, sophisticated protection.</p>
38
+ </div>
39
+ <div class="md:w-1/2">
40
+ <img src="http://static.photos/office/1024x576/15" alt="SecureVest headquarters" class="rounded-lg shadow-xl w-full h-auto">
41
+ </div>
42
+ </div>
43
+ </div>
44
+ </section>
45
+
46
+ <!-- Leadership Section -->
47
+ <section class="py-20 bg-gray-100">
48
+ <div class="max-w-7xl mx-auto px-4">
49
+ <div class="text-center mb-16">
50
+ <h2 class="text-3xl font-bold mb-4 font-serif">Leadership Team</h2>
51
+ <p class="text-gray-600 max-w-2xl mx-auto">Former intelligence, military, and financial professionals with decades of collective experience</p>
52
+ </div>
53
+ <div class="grid md:grid-cols-3 gap-8">
54
+ <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300">
55
+ <img src="http://static.photos/people/640x360/11" alt="James Caldwell" class="w-full h-64 object-cover">
56
+ <div class="p-6">
57
+ <h3 class="text-xl font-bold mb-2">James Caldwell</h3>
58
+ <p class="text-blue-600 mb-2">Founder & CEO</p>
59
+ <p class="text-gray-600 mb-4">Former CIA operative with 15 years in counterintelligence and 8 years leading security for a Fortune 50 corporation.</p>
60
+ <div class="flex gap-2">
61
+ <a href="#" class="text-gray-500 hover:text-blue-600">
62
+ <i data-feather="linkedin"></i>
63
+ </a>
64
+ <a href="#" class="text-gray-500 hover:text-blue-600">
65
+ <i data-feather="mail"></i>
66
+ </a>
67
+ </div>
68
+ </div>
69
+ </div>
70
+ <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300">
71
+ <img src="http://static.photos/people/640x360/22" alt="Sarah Chen" class="w-full h-64 object-cover">
72
+ <div class="p-6">
73
+ <h3 class="text-xl font-bold mb-2">Sarah Chen</h3>
74
+ <p class="text-blue-600 mb-2">Chief Investment Strategist</p>
75
+ <p class="text-gray-600 mb-4">Ex-Goldman Sachs VP with expertise in geopolitical risk assessment and emerging markets capital deployment.</p>
76
+ <div class="flex gap-2">
77
+ <a href="#" class="text-gray-500 hover:text-blue-600">
78
+ <i data-feather="linkedin"></i>
79
+ </a>
80
+ <a href="#" class="text-gray-500 hover:text-blue-600">
81
+ <i data-feather="mail"></i>
82
+ </a>
83
+ </div>
84
+ </div>
85
+ </div>
86
+ <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300">
87
+ <img src="http://static.photos/people/640x360/33" alt="Michael Donovan" class="w-full h-64 object-cover">
88
+ <div class="p-6">
89
+ <h3 class="text-xl font-bold mb-2">Michael Donovan</h3>
90
+ <p class="text-blue-600 mb-2">Chief Security Officer</p>
91
+ <p class="text-gray-600 mb-4">Former British SAS officer with extensive experience in hostile environment protection and cyber defense.</p>
92
+ <div class="flex gap-2">
93
+ <a href="#" class="text-gray-500 hover:text-blue-600">
94
+ <i data-feather="linkedin"></i>
95
+ </a>
96
+ <a href="#" class="text-gray-500 hover:text-blue-600">
97
+ <i data-feather="mail"></i>
98
+ </a>
99
+ </div>
100
+ </div>
101
+ </div>
102
+ </div>
103
+ </div>
104
+ </section>
105
+
106
+ <!-- Values Section -->
107
+ <section class="py-20 bg-white">
108
+ <div class="max-w-7xl mx-auto px-4">
109
+ <div class="text-center mb-16">
110
+ <h2 class="text-3xl font-bold mb-4 font-serif">Our Values</h2>
111
+ <p class="text-gray-600 max-w-2xl mx-auto">The principles that guide every engagement</p>
112
+ </div>
113
+ <div class="grid md:grid-cols-3 gap-8">
114
+ <div class="text-center p-6">
115
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
116
+ <i data-feather="shield" class="text-blue-600 w-8 h-8"></i>
117
+ </div>
118
+ <h3 class="text-xl font-bold mb-2">Integrity</h3>
119
+ <p class="text-gray-600">We maintain absolute discretion and uphold the highest ethical standards in all client engagements.</p>
120
+ </div>
121
+ <div class="text-center p-6">
122
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
123
+ <i data-feather="eye" class="text-blue-600 w-8 h-8"></i>
124
+ </div>
125
+ <h3 class="text-xl font-bold mb-2">Vigilance</h3>
126
+ <p class="text-gray-600">Our threat assessment protocols anticipate risks before they materialize, protecting your interests proactively.</p>
127
+ </div>
128
+ <div class="text-center p-6">
129
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
130
+ <i data-feather="zap" class="text-blue-600 w-8 h-8"></i>
131
+ </div>
132
+ <h3 class="text-xl font-bold mb-2">Agility</h3>
133
+ <p class="text-gray-600">We adapt strategies dynamically to evolving market conditions and emerging threats.</p>
134
+ </div>
135
+ </div>
136
+ </div>
137
+ </section>
138
+ </main>
139
+
140
+ <custom-footer></custom-footer>
141
+
142
+ <script src="components/navbar.js"></script>
143
+ <script src="components/footer.js"></script>
144
+ <script src="script.js"></script>
145
+ <script>
146
+ feather.replace();
147
+ </script>
148
+ </body>
149
+ </html>
components/footer.js ADDED
@@ -0,0 +1,201 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomFooter extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ footer {
7
+ background-color: #111827;
8
+ color: white;
9
+ padding: 4rem 2rem;
10
+ font-size: 0.9rem;
11
+ }
12
+
13
+ .footer-container {
14
+ max-width: 1200px;
15
+ margin: 0 auto;
16
+ display: grid;
17
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
18
+ gap: 2rem;
19
+ }
20
+
21
+ .footer-logo {
22
+ display: flex;
23
+ align-items: center;
24
+ gap: 0.5rem;
25
+ font-size: 1.25rem;
26
+ font-weight: bold;
27
+ margin-bottom: 1.5rem;
28
+ font-family: 'Playfair Display', serif;
29
+ }
30
+
31
+ .footer-logo-icon {
32
+ color: #3b82f6;
33
+ }
34
+
35
+ .footer-about {
36
+ margin-bottom: 1.5rem;
37
+ line-height: 1.6;
38
+ color: rgba(255, 255, 255, 0.7);
39
+ }
40
+
41
+ .social-links {
42
+ display: flex;
43
+ gap: 1rem;
44
+ }
45
+
46
+ .social-link {
47
+ color: white;
48
+ background-color: rgba(255, 255, 255, 0.1);
49
+ width: 36px;
50
+ height: 36px;
51
+ border-radius: 50%;
52
+ display: flex;
53
+ align-items: center;
54
+ justify-content: center;
55
+ transition: all 0.2s ease;
56
+ }
57
+
58
+ .social-link:hover {
59
+ background-color: #3b82f6;
60
+ transform: translateY(-2px);
61
+ }
62
+
63
+ .footer-heading {
64
+ font-size: 1.1rem;
65
+ font-weight: 600;
66
+ margin-bottom: 1.5rem;
67
+ color: white;
68
+ position: relative;
69
+ padding-bottom: 0.5rem;
70
+ }
71
+
72
+ .footer-heading::after {
73
+ content: '';
74
+ position: absolute;
75
+ bottom: 0;
76
+ left: 0;
77
+ width: 40px;
78
+ height: 2px;
79
+ background-color: #3b82f6;
80
+ }
81
+
82
+ .footer-links {
83
+ list-style: none;
84
+ margin: 0;
85
+ padding: 0;
86
+ display: flex;
87
+ flex-direction: column;
88
+ gap: 0.75rem;
89
+ }
90
+
91
+ .footer-link {
92
+ color: rgba(255, 255, 255, 0.7);
93
+ text-decoration: none;
94
+ transition: all 0.2s ease;
95
+ }
96
+
97
+ .footer-link:hover {
98
+ color: white;
99
+ padding-left: 5px;
100
+ }
101
+
102
+ .footer-contact-item {
103
+ display: flex;
104
+ gap: 1rem;
105
+ margin-bottom: 1rem;
106
+ color: rgba(255, 255, 255, 0.7);
107
+ }
108
+
109
+ .footer-contact-icon {
110
+ color: #3b82f6;
111
+ flex-shrink: 0;
112
+ }
113
+
114
+ .footer-bottom {
115
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
116
+ padding-top: 2rem;
117
+ margin-top: 2rem;
118
+ text-align: center;
119
+ color: rgba(255, 255, 255, 0.5);
120
+ font-size: 0.8rem;
121
+ }
122
+
123
+ @media (max-width: 768px) {
124
+ .footer-container {
125
+ grid-template-columns: 1fr;
126
+ }
127
+ }
128
+ </style>
129
+ <footer>
130
+ <div class="footer-container">
131
+ <div class="footer-about">
132
+ <div class="footer-logo">
133
+ <i data-feather="shield" class="footer-logo-icon"></i>
134
+ <span>SecureVest</span>
135
+ </div>
136
+ <p class="footer-about">
137
+ Global leader in integrated PR strategies, secure investments, and comprehensive security solutions for enterprises and governments.
138
+ </p>
139
+ <div class="social-links">
140
+ <a href="#" class="social-link">
141
+ <i data-feather="linkedin"></i>
142
+ </a>
143
+ <a href="#" class="social-link">
144
+ <i data-feather="twitter"></i>
145
+ </a>
146
+ <a href="#" class="social-link">
147
+ <i data-feather="facebook"></i>
148
+ </a>
149
+ </div>
150
+ </div>
151
+
152
+ <div class="footer-services">
153
+ <h3 class="footer-heading">Services</h3>
154
+ <ul class="footer-links">
155
+ <li><a href="#" class="footer-link">Strategic Communications</a></li>
156
+ <li><a href="#" class="footer-link">Crisis Management</a></li>
157
+ <li><a href="#" class="footer-link">Investment Security</a></li>
158
+ <li><a href="#" class="footer-link">Cyber Protection</a></li>
159
+ <li><a href="#" class="footer-link">Executive Protection</a></li>
160
+ </ul>
161
+ </div>
162
+
163
+ <div class="footer-quicklinks">
164
+ <h3 class="footer-heading">Quick Links</h3>
165
+ <ul class="footer-links">
166
+ <li><a href="/about.html" class="footer-link">About Us</a></li>
167
+ <li><a href="/insights.html" class="footer-link">Insights</a></li>
168
+ <li><a href="/careers.html" class="footer-link">Careers</a></li>
169
+ <li><a href="/contact.html" class="footer-link">Contact</a></li>
170
+ <li><a href="/privacy.html" class="footer-link">Privacy Policy</a></li>
171
+ </ul>
172
+ </div>
173
+
174
+ <div class="footer-contact">
175
+ <h3 class="footer-heading">Contact</h3>
176
+ <div class="footer-contact-item">
177
+ <i data-feather="map-pin" class="footer-contact-icon"></i>
178
+ <span>200 Park Avenue, New York, NY 10166</span>
179
+ </div>
180
+ <div class="footer-contact-item">
181
+ <i data-feather="mail" class="footer-contact-icon"></i>
182
+ <span>contact@securevest.com</span>
183
+ </div>
184
+ <div class="footer-contact-item">
185
+ <i data-feather="phone" class="footer-contact-icon"></i>
186
+ <span>+1 (212) 555-0100</span>
187
+ </div>
188
+ </div>
189
+ </div>
190
+
191
+ <div class="footer-bottom">
192
+ <p>&copy; ${new Date().getFullYear()} SecureVest Capital Shield. All rights reserved.</p>
193
+ </div>
194
+ </footer>
195
+ `;
196
+
197
+ feather.replace();
198
+ }
199
+ }
200
+
201
+ customElements.define('custom-footer', CustomFooter);
components/navbar.js ADDED
@@ -0,0 +1,207 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ position: fixed;
9
+ top: 0;
10
+ left: 0;
11
+ right: 0;
12
+ z-index: 1000;
13
+ transition: all 0.3s ease;
14
+ }
15
+
16
+ nav {
17
+ background-color: rgba(17, 24, 39, 0.9);
18
+ backdrop-filter: blur(10px);
19
+ padding: 1rem 2rem;
20
+ display: flex;
21
+ justify-content: space-between;
22
+ align-items: center;
23
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
24
+ }
25
+
26
+ .scrolled {
27
+ background-color: rgba(17, 24, 39, 0.98);
28
+ padding: 0.5rem 2rem;
29
+ }
30
+
31
+ .logo {
32
+ color: white;
33
+ font-weight: bold;
34
+ font-size: 1.5rem;
35
+ font-family: 'Playfair Display', serif;
36
+ display: flex;
37
+ align-items: center;
38
+ gap: 0.5rem;
39
+ }
40
+
41
+ .logo-icon {
42
+ color: #3b82f6;
43
+ }
44
+
45
+ .nav-links {
46
+ display: flex;
47
+ gap: 2rem;
48
+ list-style: none;
49
+ margin: 0;
50
+ padding: 0;
51
+ align-items: center;
52
+ }
53
+
54
+ .nav-link {
55
+ color: rgba(255, 255, 255, 0.9);
56
+ text-decoration: none;
57
+ font-weight: 500;
58
+ font-size: 1rem;
59
+ transition: all 0.2s ease;
60
+ position: relative;
61
+ }
62
+
63
+ .nav-link:hover {
64
+ color: white;
65
+ }
66
+
67
+ .nav-link::after {
68
+ content: '';
69
+ position: absolute;
70
+ bottom: -5px;
71
+ left: 0;
72
+ width: 0;
73
+ height: 2px;
74
+ background-color: #3b82f6;
75
+ transition: width 0.3s ease;
76
+ }
77
+
78
+ .nav-link:hover::after {
79
+ width: 100%;
80
+ }
81
+
82
+ .mobile-menu-btn {
83
+ display: none;
84
+ background: none;
85
+ border: none;
86
+ color: white;
87
+ cursor: pointer;
88
+ }
89
+
90
+ .mobile-menu {
91
+ display: none;
92
+ background-color: rgba(17, 24, 39, 0.98);
93
+ padding: 1rem;
94
+ position: absolute;
95
+ top: 100%;
96
+ left: 0;
97
+ right: 0;
98
+ z-index: 1000;
99
+ }
100
+
101
+ .mobile-menu.open {
102
+ display: block;
103
+ }
104
+
105
+ .mobile-nav-links {
106
+ list-style: none;
107
+ margin: 0;
108
+ padding: 0;
109
+ display: flex;
110
+ flex-direction: column;
111
+ gap: 1rem;
112
+ }
113
+
114
+ .mobile-nav-link {
115
+ color: white;
116
+ text-decoration: none;
117
+ padding: 0.5rem 0;
118
+ display: block;
119
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
120
+ }
121
+
122
+ .contact-btn {
123
+ background-color: #3b82f6;
124
+ color: white;
125
+ padding: 0.5rem 1.5rem;
126
+ border-radius: 0.25rem;
127
+ transition: all 0.2s ease;
128
+ }
129
+
130
+ .contact-btn:hover {
131
+ background-color: #2563eb;
132
+ transform: translateY(-2px);
133
+ }
134
+
135
+ @media (max-width: 768px) {
136
+ .nav-links {
137
+ display: none;
138
+ }
139
+
140
+ .mobile-menu-btn {
141
+ display: block;
142
+ }
143
+ }
144
+ </style>
145
+ <nav id="main-nav">
146
+ <a href="/" class="logo">
147
+ <i data-feather="shield" class="logo-icon"></i>
148
+ <span>SecureVest</span>
149
+ </a>
150
+
151
+ <ul class="nav-links">
152
+ <li><a href="/" class="nav-link">Home</a></li>
153
+ <li><a href="/services.html" class="nav-link">Services</a></li>
154
+ <li><a href="/about.html" class="nav-link">About</a></li>
155
+ <li><a href="/insights.html" class="nav-link">Insights</a></li>
156
+ <li><a href="/contact.html" class="nav-link contact-btn">Contact</a></li>
157
+ </ul>
158
+
159
+ <button class="mobile-menu-btn" id="mobile-menu-btn">
160
+ <i data-feather="menu"></i>
161
+ </button>
162
+
163
+ <div class="mobile-menu" id="mobile-menu">
164
+ <ul class="mobile-nav-links">
165
+ <li><a href="/" class="mobile-nav-link">Home</a></li>
166
+ <li><a href="/services.html" class="mobile-nav-link">Services</a></li>
167
+ <li><a href="/about.html" class="mobile-nav-link">About</a></li>
168
+ <li><a href="/insights.html" class="mobile-nav-link">Insights</a></li>
169
+ <li><a href="/contact.html" class="mobile-nav-link">Contact</a></li>
170
+ </ul>
171
+ </div>
172
+ </nav>
173
+ `;
174
+
175
+ // Initialize mobile menu toggle
176
+ const mobileMenuBtn = this.shadowRoot.getElementById('mobile-menu-btn');
177
+ const mobileMenu = this.shadowRoot.getElementById('mobile-menu');
178
+
179
+ mobileMenuBtn.addEventListener('click', () => {
180
+ mobileMenu.classList.toggle('open');
181
+ const icon = mobileMenuBtn.querySelector('i');
182
+ if (mobileMenu.classList.contains('open')) {
183
+ feather.replace();
184
+ icon.setAttribute('data-feather', 'x');
185
+ } else {
186
+ feather.replace();
187
+ icon.setAttribute('data-feather', 'menu');
188
+ }
189
+ feather.replace();
190
+ });
191
+
192
+ // Handle scroll effect
193
+ window.addEventListener('scroll', () => {
194
+ const nav = this.shadowRoot.getElementById('main-nav');
195
+ if (window.scrollY > 50) {
196
+ nav.classList.add('scrolled');
197
+ } else {
198
+ nav.classList.remove('scrolled');
199
+ }
200
+ });
201
+
202
+ // Replace feather icons
203
+ feather.replace();
204
+ }
205
+ }
206
+
207
+ customElements.define('custom-navbar', CustomNavbar);
contact.html ADDED
@@ -0,0 +1,124 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Contact | SecureVest Capital Shield</title>
7
+ <meta name="description" content="Contact our team for confidential consultations on security and investment strategies">
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <link rel="preconnect" href="https://fonts.googleapis.com">
13
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
15
+ </head>
16
+ <body class="bg-gray-50 text-gray-800 font-sans">
17
+ <custom-navbar></custom-navbar>
18
+
19
+ <main>
20
+ <!-- Hero Section -->
21
+ <section class="relative h-96 flex items-center justify-center text-center px-4 bg-gradient-to-b from-gray-900 to-gray-800 text-white">
22
+ <div class="absolute inset-0 bg-black opacity-50"></div>
23
+ <div class="relative z-10 max-w-4xl mx-auto">
24
+ <h1 class="text-4xl md:text-5xl font-bold mb-6 font-serif">Contact Us</h1>
25
+ <p class="text-xl md:text-2xl leading-relaxed">Secure channels for confidential inquiries</p>
26
+ </div>
27
+ </section>
28
+
29
+ <!-- Contact Form -->
30
+ <section class="py-20 bg-white">
31
+ <div class="max-w-4xl mx-auto px-4">
32
+ <div class="bg-gray-50 rounded-lg shadow-md p-8 md:p-12">
33
+ <h2 class="text-2xl font-bold mb-8 font-serif">Request Consultation</h2>
34
+ <form class="space-y-6">
35
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
36
+ <div>
37
+ <label for="first-name" class="block text-sm font-medium text-gray-700 mb-1">First Name*</label>
38
+ <input type="text" id="first-name" name="first-name" required class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
39
+ </div>
40
+ <div>
41
+ <label for="last-name" class="block text-sm font-medium text-gray-700 mb-1">Last Name*</label>
42
+ <input type="text" id="last-name" name="last-name" required class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
43
+ </div>
44
+ </div>
45
+ <div>
46
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email*</label>
47
+ <input type="email" id="email" name="email" required class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
48
+ </div>
49
+ <div>
50
+ <label for="company" class="block text-sm font-medium text-gray-700 mb-1">Company</label>
51
+ <input type="text" id="company" name="company" class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
52
+ </div>
53
+ <div>
54
+ <label for="interest" class="block text-sm font-medium text-gray-700 mb-1">Area of Interest</label>
55
+ <select id="interest" name="interest" class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
56
+ <option value="">Select an option</option>
57
+ <option value="security">Security Solutions</option>
58
+ <option value="investment">Investment Protection</option>
59
+ <option value="communications">Strategic Communications</option>
60
+ <option value="other">Other</option>
61
+ </select>
62
+ </div>
63
+ <div>
64
+ <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message*</label>
65
+ <textarea id="message" name="message" rows="4" required class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
66
+ </div>
67
+ <div>
68
+ <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md font-medium transition duration-300">Submit Inquiry</button>
69
+ </div>
70
+ </form>
71
+ </div>
72
+ </div>
73
+ </section>
74
+
75
+ <!-- Offices Section -->
76
+ <section class="py-20 bg-gray-100">
77
+ <div class="max-w-7xl mx-auto px-4">
78
+ <div class="text-center mb-16">
79
+ <h2 class="text-3xl font-bold mb-4 font-serif">Global Offices</h2>
80
+ <p class="text-gray-600 max-w-2xl mx-auto">Secure facilities for confidential meetings</p>
81
+ </div>
82
+ <div class="grid md:grid-cols-3 gap-8">
83
+ <div class="bg-white p-8 rounded-lg shadow-md text-center">
84
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
85
+ <i data-feather="map-pin" class="text-blue-600 w-6 h-6"></i>
86
+ </div>
87
+ <h3 class="text-xl font-bold mb-3">New York</h3>
88
+ <p class="text-gray-600 mb-2">200 Park Avenue</p>
89
+ <p class="text-gray-600 mb-4">New York, NY 10166</p>
90
+ <a href="tel:+12125550100" class="text-blue-600 hover:text-blue-800">+1 (212) 555-0100</a>
91
+ </div>
92
+ <div class="bg-white p-8 rounded-lg shadow-md text-center">
93
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
94
+ <i data-feather="map-pin" class="text-blue-600 w-6 h-6"></i>
95
+ </div>
96
+ <h3 class="text-xl font-bold mb-3">London</h3>
97
+ <p class="text-gray-600 mb-2">30 St Mary Axe</p>
98
+ <p class="text-gray-600 mb-4">London EC3A 8EP</p>
99
+ <a href="tel:+442071234567" class="text-blue-600 hover:text-blue-800">+44 20 7123 4567</a>
100
+ </div>
101
+ <div class="bg-white p-8 rounded-lg shadow-md text-center">
102
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
103
+ <i data-feather="map-pin" class="text-blue-600 w-6 h-6"></i>
104
+ </div>
105
+ <h3 class="text-xl font-bold mb-3">Singapore</h3>
106
+ <p class="text-gray-600 mb-2">8 Marina View</p>
107
+ <p class="text-gray-600 mb-4">Asia Square Tower 1, 018960</p>
108
+ <a href="tel:+6561234567" class="text-blue-600 hover:text-blue-800">+65 6123 4567</a>
109
+ </div>
110
+ </div>
111
+ </div>
112
+ </section>
113
+ </main>
114
+
115
+ <custom-footer></custom-footer>
116
+
117
+ <script src="components/navbar.js"></script>
118
+ <script src="components/footer.js"></script>
119
+ <script src="script.js"></script>
120
+ <script>
121
+ feather.replace();
122
+ </script>
123
+ </body>
124
+ </html>
index.html CHANGED
@@ -1,19 +1,167 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SecureVest Capital Shield | Strategic PR, Investment & Security Solutions</title>
7
+ <meta name="description" content="Global leader in integrated PR strategies, secure investments, and comprehensive security solutions for enterprises and governments">
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
13
+ <link rel="preconnect" href="https://fonts.googleapis.com">
14
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
15
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
16
+ </head>
17
+ <body class="bg-gray-50 text-gray-800 font-sans">
18
+ <custom-navbar></custom-navbar>
19
+
20
+ <main>
21
+ <!-- Hero Section -->
22
+ <section id="vanta-bg" class="relative h-screen flex items-center justify-center text-center px-4 bg-gradient-to-b from-gray-900 to-gray-800 text-white">
23
+ <div class="absolute inset-0 bg-black opacity-50"></div>
24
+ <div class="relative z-10 max-w-4xl mx-auto">
25
+ <h1 class="text-4xl md:text-6xl font-bold mb-6 font-serif">SecureVest Capital Shield</h1>
26
+ <p class="text-xl md:text-2xl mb-8 leading-relaxed">Integrating strategic communications, capital intelligence, and security fortification for global enterprises</p>
27
+ <div class="flex gap-4 justify-center">
28
+ <a href="/services.html" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md font-medium transition duration-300">Our Services</a>
29
+ <a href="/contact.html" class="border-2 border-white hover:bg-white hover:text-gray-900 text-white px-8 py-3 rounded-md font-medium transition duration-300">Contact Us</a>
30
+ </div>
31
+ </div>
32
+ </section>
33
+
34
+ <!-- Trust Indicators -->
35
+ <section class="py-12 bg-white">
36
+ <div class="max-w-7xl mx-auto px-4">
37
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
38
+ <div class="p-6">
39
+ <div class="text-blue-600 mb-4">
40
+ <i data-feather="shield" class="w-12 h-12 mx-auto"></i>
41
+ </div>
42
+ <h3 class="text-xl font-bold mb-2">Enterprise Security</h3>
43
+ <p class="text-gray-600">Fortified solutions for digital and physical assets</p>
44
+ </div>
45
+ <div class="p-6">
46
+ <div class="text-blue-600 mb-4">
47
+ <i data-feather="trending-up" class="w-12 h-12 mx-auto"></i>
48
+ </div>
49
+ <h3 class="text-xl font-bold mb-2">Capital Growth</h3>
50
+ <p class="text-gray-600">Strategic investment opportunities with risk mitigation</p>
51
+ </div>
52
+ <div class="p-6">
53
+ <div class="text-blue-600 mb-4">
54
+ <i data-feather="globe" class="w-12 h-12 mx-auto"></i>
55
+ </div>
56
+ <h3 class="text-xl font-bold mb-2">Global PR</h3>
57
+ <p class="text-gray-600">Crisis management and reputation enhancement</p>
58
+ </div>
59
+ <div class="p-6">
60
+ <div class="text-blue-600 mb-4">
61
+ <i data-feather="lock" class="w-12 h-12 mx-auto"></i>
62
+ </div>
63
+ <h3 class="text-xl font-bold mb-2">Compliance</h3>
64
+ <p class="text-gray-600">Regulatory adherence across jurisdictions</p>
65
+ </div>
66
+ </div>
67
+ </div>
68
+ </section>
69
+
70
+ <!-- About Section -->
71
+ <section class="py-20 bg-gray-100">
72
+ <div class="max-w-7xl mx-auto px-4">
73
+ <div class="flex flex-col md:flex-row items-center gap-12">
74
+ <div class="md:w-1/2">
75
+ <img src="http://static.photos/office/1024x576/22" alt="SecureVest boardroom" class="rounded-lg shadow-xl w-full h-auto">
76
+ </div>
77
+ <div class="md:w-1/2">
78
+ <h2 class="text-3xl font-bold mb-6 font-serif">About SecureVest</h2>
79
+ <p class="text-gray-700 mb-4 leading-relaxed">SecureVest Capital Shield is a premier global consultancy specializing in the intersection of strategic communications, capital deployment, and enterprise security. Founded in 2012 by former intelligence and financial professionals, we bring unparalleled expertise to complex challenges.</p>
80
+ <p class="text-gray-700 mb-6 leading-relaxed">Our multidisciplinary approach integrates cutting-edge security protocols with market-moving investment strategies and reputation management, serving Fortune 500 companies, governments, and high-net-worth individuals.</p>
81
+ <a href="/about.html" class="inline-block bg-gray-800 hover:bg-gray-900 text-white px-6 py-3 rounded-md font-medium transition duration-300">Learn More</a>
82
+ </div>
83
+ </div>
84
+ </div>
85
+ </section>
86
+
87
+ <!-- Case Studies -->
88
+ <section class="py-20 bg-white">
89
+ <div class="max-w-7xl mx-auto px-4">
90
+ <div class="text-center mb-16">
91
+ <h2 class="text-3xl font-bold mb-4 font-serif">Global Impact</h2>
92
+ <p class="text-gray-600 max-w-2xl mx-auto">Selected engagements demonstrating our strategic value across sectors</p>
93
+ </div>
94
+ <div class="grid md:grid-cols-3 gap-8">
95
+ <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300">
96
+ <img src="http://static.photos/finance/1024x576/11" alt="Finance case study" class="w-full h-48 object-cover">
97
+ <div class="p-6">
98
+ <h3 class="text-xl font-bold mb-2">Financial Institution Turnaround</h3>
99
+ <p class="text-gray-600 mb-4">Reputation rehabilitation and security overhaul for a major European bank</p>
100
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center">
101
+ Read Case Study
102
+ <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
103
+ </a>
104
+ </div>
105
+ </div>
106
+ <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300">
107
+ <img src="http://static.photos/technology/1024x576/33" alt="Tech case study" class="w-full h-48 object-cover">
108
+ <div class="p-6">
109
+ <h3 class="text-xl font-bold mb-2">Tech IPO Security</h3>
110
+ <p class="text-gray-600 mb-4">Comprehensive protection for a silicon valley unicorn's public offering</p>
111
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center">
112
+ Read Case Study
113
+ <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
114
+ </a>
115
+ </div>
116
+ </div>
117
+ <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300">
118
+ <img src="http://static.photos/government/1024x576/44" alt="Government case study" class="w-full h-48 object-cover">
119
+ <div class="p-6">
120
+ <h3 class="text-xl font-bold mb-2">Sovereign Wealth Strategy</h3>
121
+ <p class="text-gray-600 mb-4">Middle Eastern sovereign fund diversification and media strategy</p>
122
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center">
123
+ Read Case Study
124
+ <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
125
+ </a>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ </section>
131
+
132
+ <!-- CTA Section -->
133
+ <section class="py-20 bg-gradient-to-r from-blue-800 to-blue-600 text-white">
134
+ <div class="max-w-4xl mx-auto text-center px-4">
135
+ <h2 class="text-3xl font-bold mb-6 font-serif">Secure Your Enterprise's Future</h2>
136
+ <p class="text-xl mb-8 leading-relaxed">Our principals are available for confidential consultations to assess your organization's strategic needs across our service lines.</p>
137
+ <a href="/contact.html" class="inline-block bg-white hover:bg-gray-100 text-blue-800 px-8 py-4 rounded-md font-medium text-lg transition duration-300">Schedule Consultation</a>
138
+ </div>
139
+ </section>
140
+ </main>
141
+
142
+ <custom-footer></custom-footer>
143
+
144
+ <script src="components/navbar.js"></script>
145
+ <script src="components/footer.js"></script>
146
+ <script src="script.js"></script>
147
+ <script>
148
+ feather.replace();
149
+ VANTA.NET({
150
+ el: "#vanta-bg",
151
+ mouseControls: true,
152
+ touchControls: true,
153
+ gyroControls: false,
154
+ minHeight: 200.00,
155
+ minWidth: 200.00,
156
+ scale: 1.00,
157
+ scaleMobile: 1.00,
158
+ color: 0x3b82f6,
159
+ backgroundColor: 0x111827,
160
+ points: 12.00,
161
+ maxDistance: 22.00,
162
+ spacing: 18.00
163
+ });
164
+ </script>
165
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
166
+ </body>
167
+ </html>
insights.html ADDED
@@ -0,0 +1,95 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Insights | SecureVest Capital Shield</title>
7
+ <meta name="description" content="Strategic insights and thought leadership from SecureVest's experts">
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <link rel="preconnect" href="https://fonts.googleapis.com">
13
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
15
+ </head>
16
+ <body class="bg-gray-50 text-gray-800 font-sans">
17
+ <custom-navbar></custom-navbar>
18
+
19
+ <main>
20
+ <!-- Hero Section -->
21
+ <section class="relative h-96 flex items-center justify-center text-center px-4 bg-gradient-to-b from-gray-900 to-gray-800 text-white">
22
+ <div class="absolute inset-0 bg-black opacity-50"></div>
23
+ <div class="relative z-10 max-w-4xl mx-auto">
24
+ <h1 class="text-4xl md:text-5xl font-bold mb-6 font-serif">Insights</h1>
25
+ <p class="text-xl md:text-2xl leading-relaxed">Expert analysis on security, investment trends, and strategic communications</p>
26
+ </div>
27
+ </section>
28
+
29
+ <!-- Insights Grid -->
30
+ <section class="py-20 bg-white">
31
+ <div class="max-w-7xl mx-auto px-4">
32
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
33
+ <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300">
34
+ <img src="http://static.photos/finance/1024x576/1" alt="Market Trends" class="w-full h-48 object-cover">
35
+ <div class="p-6">
36
+ <span class="text-blue-600 text-sm font-medium">Investment Security</span>
37
+ <h3 class="text-xl font-bold my-2">Emerging Market Risks in 2023</h3>
38
+ <p class="text-gray-600 mb-4">Analysis of geopolitical factors affecting capital deployment in developing economies.</p>
39
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center">
40
+ Read More
41
+ <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
42
+ </a>
43
+ </div>
44
+ </div>
45
+ <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300">
46
+ <img src="http://static.photos/technology/1024x576/2" alt="Cyber Security" class="w-full h-48 object-cover">
47
+ <div class="p-6">
48
+ <span class="text-blue-600 text-sm font-medium">Cyber Security</span>
49
+ <h3 class="text-xl font-bold my-2">The New Frontier of Quantum Encryption</h3>
50
+ <p class="text-gray-600 mb-4">How quantum computing is reshaping enterprise security strategies.</p>
51
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center">
52
+ Read More
53
+ <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
54
+ </a>
55
+ </div>
56
+ </div>
57
+ <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300">
58
+ <img src="http://static.photos/office/1024x576/3" alt="Crisis Management" class="w-full h-48 object-cover">
59
+ <div class="p-6">
60
+ <span class="text-blue-600 text-sm font-medium">Crisis Management</span>
61
+ <h3 class="text-xl font-bold my-2">Silent Threats to Corporate Reputations</h3>
62
+ <p class="text-gray-600 mb-4">Identifying and mitigating non-traditional reputation risks in the digital age.</p>
63
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center">
64
+ Read More
65
+ <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
66
+ </a>
67
+ </div>
68
+ </div>
69
+ </div>
70
+ </div>
71
+ </section>
72
+
73
+ <!-- Newsletter CTA -->
74
+ <section class="py-20 bg-gray-100">
75
+ <div class="max-w-4xl mx-auto px-4 text-center">
76
+ <h2 class="text-3xl font-bold mb-6 font-serif">Stay Informed</h2>
77
+ <p class="text-xl mb-8 leading-relaxed">Subscribe to receive our latest insights and security briefings</p>
78
+ <form class="flex flex-col sm:flex-row gap-4 max-w-2xl mx-auto">
79
+ <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
80
+ <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md font-medium transition duration-300">Subscribe</button>
81
+ </form>
82
+ </div>
83
+ </section>
84
+ </main>
85
+
86
+ <custom-footer></custom-footer>
87
+
88
+ <script src="components/navbar.js"></script>
89
+ <script src="components/footer.js"></script>
90
+ <script src="script.js"></script>
91
+ <script>
92
+ feather.replace();
93
+ </script>
94
+ </body>
95
+ </html>
script.js ADDED
@@ -0,0 +1,76 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Main JavaScript file for SecureVest Capital Shield
2
+
3
+ document.addEventListener('DOMContentLoaded', function() {
4
+ // Initialize animations
5
+ const animateElements = document.querySelectorAll('.animate-on-scroll');
6
+
7
+ const observer = new IntersectionObserver((entries) => {
8
+ entries.forEach(entry => {
9
+ if (entry.isIntersecting) {
10
+ entry.target.classList.add('animate-fadeInUp');
11
+ observer.unobserve(entry.target);
12
+ }
13
+ });
14
+ }, {
15
+ threshold: 0.1
16
+ });
17
+
18
+ animateElements.forEach(element => {
19
+ observer.observe(element);
20
+ });
21
+
22
+ // Smooth scrolling for anchor links
23
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
24
+ anchor.addEventListener('click', function (e) {
25
+ e.preventDefault();
26
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
27
+ behavior: 'smooth'
28
+ });
29
+ });
30
+ });
31
+
32
+ // Initialize tooltips
33
+ const tooltipElements = document.querySelectorAll('[data-tooltip]');
34
+ tooltipElements.forEach(el => {
35
+ el.addEventListener('mouseenter', showTooltip);
36
+ el.addEventListener('mouseleave', hideTooltip);
37
+ });
38
+
39
+ function showTooltip(e) {
40
+ const tooltipText = this.getAttribute('data-tooltip');
41
+ const tooltip = document.createElement('div');
42
+ tooltip.className = 'tooltip absolute bg-gray-900 text-white text-xs px-2 py-1 rounded whitespace-nowrap z-50';
43
+ tooltip.textContent = tooltipText;
44
+
45
+ document.body.appendChild(tooltip);
46
+
47
+ const rect = this.getBoundingClientRect();
48
+ tooltip.style.top = `${rect.top - tooltip.offsetHeight - 5}px`;
49
+ tooltip.style.left = `${rect.left + rect.width / 2 - tooltip.offsetWidth / 2}px`;
50
+
51
+ this.tooltip = tooltip;
52
+ }
53
+
54
+ function hideTooltip() {
55
+ if (this.tooltip) {
56
+ this.tooltip.remove();
57
+ }
58
+ }
59
+ });
60
+
61
+ // Form validation for contact forms
62
+ function validateForm(form) {
63
+ const inputs = form.querySelectorAll('input[required], textarea[required]');
64
+ let isValid = true;
65
+
66
+ inputs.forEach(input => {
67
+ if (!input.value.trim()) {
68
+ input.classList.add('border-red-500');
69
+ isValid = false;
70
+ } else {
71
+ input.classList.remove('border-red-500');
72
+ }
73
+ });
74
+
75
+ return isValid;
76
+ }
services.html ADDED
@@ -0,0 +1,187 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Services | SecureVest Capital Shield</title>
7
+ <meta name="description" content="Comprehensive PR, investment, and security services for global enterprises and high-net-worth individuals">
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <link rel="preconnect" href="https://fonts.googleapis.com">
13
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
15
+ </head>
16
+ <body class="bg-gray-50 text-gray-800 font-sans">
17
+ <custom-navbar></custom-navbar>
18
+
19
+ <main>
20
+ <!-- Hero Section -->
21
+ <section class="relative h-96 flex items-center justify-center text-center px-4 bg-gradient-to-b from-gray-900 to-gray-800 text-white">
22
+ <div class="absolute inset-0 bg-black opacity-50"></div>
23
+ <div class="relative z-10 max-w-4xl mx-auto">
24
+ <h1 class="text-4xl md:text-5xl font-bold mb-6 font-serif">Our Services</h1>
25
+ <p class="text-xl md:text-2xl leading-relaxed">Integrated solutions at the intersection of communications, capital, and security</p>
26
+ </div>
27
+ </section>
28
+
29
+ <!-- Services Overview -->
30
+ <section class="py-20 bg-white">
31
+ <div class="max-w-7xl mx-auto px-4">
32
+ <div class="text-center mb-16">
33
+ <h2 class="text-3xl font-bold mb-4 font-serif">Comprehensive Protection</h2>
34
+ <p class="text-gray-600 max-w-2xl mx-auto">Our multidisciplinary approach addresses all dimensions of enterprise risk</p>
35
+ </div>
36
+ <div class="grid md:grid-cols-3 gap-8">
37
+ <div class="bg-gray-50 p-8 rounded-lg border border-gray-200 hover:shadow-lg transition duration-300">
38
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
39
+ <i data-feather="message-square" class="text-blue-600 w-8 h-8"></i>
40
+ </div>
41
+ <h3 class="text-xl font-bold mb-4">Strategic Communications</h3>
42
+ <ul class="space-y-3 text-gray-600">
43
+ <li class="flex items-start">
44
+ <i data-feather="check" class="text-green-500 mr-2 mt-0.5 flex-shrink-0"></i>
45
+ <span>Crisis management & reputation defense</span>
46
+ </li>
47
+ <li class="flex items-start">
48
+ <i data-feather="check" class="text-green-500 mr-2 mt-0.5 flex-shrink-0"></i>
49
+ <span>Investor relations & stakeholder communications</span>
50
+ </li>
51
+ <li class="flex items-start">
52
+ <i data-feather="check" class="text-green-500 mr-2 mt-0.5 flex-shrink-0"></i>
53
+ <span>Geopolitical risk advisory</span>
54
+ </li>
55
+ </ul>
56
+ <a href="#" class="inline-block mt-6 text-blue-600 hover:text-blue-800 font-medium flex items-center">
57
+ Learn More
58
+ <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
59
+ </a>
60
+ </div>
61
+ <div class="bg-gray-50 p-8 rounded-lg border border-gray-200 hover:shadow-lg transition duration-300">
62
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
63
+ <i data-feather="dollar-sign" class="text-blue-600 w-8 h-8"></i>
64
+ </div>
65
+ <h3 class="text-xl font-bold mb-4">Capital Intelligence</h3>
66
+ <ul class="space-y-3 text-gray-600">
67
+ <li class="flex items-start">
68
+ <i data-feather="check" class="text-green-500 mr-2 mt-0.5 flex-shrink-0"></i>
69
+ <span>Secure investment structuring</span>
70
+ </li>
71
+ <li class="flex items-start">
72
+ <i data-feather="check" class="text-green-500 mr-2 mt-0.5 flex-shrink-0"></i>
73
+ <span>Asset protection & wealth preservation</span>
74
+ </li>
75
+ <li class="flex items-start">
76
+ <i data-feather="check" class="text-green-500 mr-2 mt-0.5 flex-shrink-0"></i>
77
+ <span>Due diligence & counterparty vetting</span>
78
+ </li>
79
+ </ul>
80
+ <a href="#" class="inline-block mt-6 text-blue-600 hover:text-blue-800 font-medium flex items-center">
81
+ Learn More
82
+ <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
83
+ </a>
84
+ </div>
85
+ <div class="bg-gray-50 p-8 rounded-lg border border-gray-200 hover:shadow-lg transition duration-300">
86
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
87
+ <i data-feather="shield" class="text-blue-600 w-8 h-8"></i>
88
+ </div>
89
+ <h3 class="text-xl font-bold mb-4">Security Solutions</h3>
90
+ <ul class="space-y-3 text-gray-600">
91
+ <li class="flex items-start">
92
+ <i data-feather="check" class="text-green-500 mr-2 mt-0.5 flex-shrink-0"></i>
93
+ <span>Cybersecurity & digital asset protection</span>
94
+ </li>
95
+ <li class="flex items-start">
96
+ <i data-feather="check" class="text-green-500 mr-2 mt-0.5 flex-shrink-0"></i>
97
+ <span>Executive protection & secure travel</span>
98
+ </li>
99
+ <li class="flex items-start">
100
+ <i data-feather="check" class="text-green-500 mr-2 mt-0.5 flex-shrink-0"></i>
101
+ <span>Facility hardening & risk assessment</span>
102
+ </li>
103
+ </ul>
104
+ <a href="#" class="inline-block mt-6 text-blue-600 hover:text-blue-800 font-medium flex items-center">
105
+ Learn More
106
+ <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
107
+ </a>
108
+ </div>
109
+ </div>
110
+ </div>
111
+ </section>
112
+
113
+ <!-- Process Section -->
114
+ <section class="py-20 bg-gray-100">
115
+ <div class="max-w-7xl mx-auto px-4">
116
+ <div class="text-center mb-16">
117
+ <h2 class="text-3xl font-bold mb-4 font-serif">Our Process</h2>
118
+ <p class="text-gray-600 max-w-2xl mx-auto">A structured methodology for comprehensive protection</p>
119
+ </div>
120
+ <div class="relative">
121
+ <div class="hidden md:block absolute left-1/2 top-0 bottom-0 w-1 bg-blue-100 transform -translate-x-1/2"></div>
122
+ <div class="space-y-12">
123
+ <div class="relative flex items-center">
124
+ <div class="hidden md:flex absolute left-1/2 transform -translate-x-1/2 w-8 h-8 bg-blue-600 rounded-full items-center justify-center">
125
+ <span class="text-white font-bold">1</span>
126
+ </div>
127
+ <div class="md:w-1/2 md:pr-16">
128
+ <h3 class="text-xl font-bold mb-2">Threat Assessment</h3>
129
+ <p class="text-gray-600">Comprehensive evaluation of digital, physical, and reputational vulnerabilities through proprietary risk matrices.</p>
130
+ </div>
131
+ <div class="hidden md:flex md:w-1/2 md:pl-16"></div>
132
+ </div>
133
+ <div class="relative flex items-center">
134
+ <div class="hidden md:flex absolute left-1/2 transform -translate-x-1/2 w-8 h-8 bg-blue-600 rounded-full items-center justify-center">
135
+ <span class="text-white font-bold">2</span>
136
+ </div>
137
+ <div class="hidden md:flex md:w-1/2 md:pr-16"></div>
138
+ <div class="md:w-1/2 md:pl-16">
139
+ <h3 class="text-xl font-bold mb-2">Strategic Planning</h3>
140
+ <p class="text-gray-600">Development of customized protocols addressing identified risks while aligning with business objectives.</p>
141
+ </div>
142
+ </div>
143
+ <div class="relative flex items-center">
144
+ <div class="hidden md:flex absolute left-1/2 transform -translate-x-1/2 w-8 h-8 bg-blue-600 rounded-full items-center justify-center">
145
+ <span class="text-white font-bold">3</span>
146
+ </div>
147
+ <div class="md:w-1/2 md:pr-16">
148
+ <h3 class="text-xl font-bold mb-2">Implementation</h3>
149
+ <p class="text-gray-600">Discrete deployment of security measures, communication strategies, and investment safeguards.</p>
150
+ </div>
151
+ <div class="hidden md:flex md:w-1/2 md:pl-16"></div>
152
+ </div>
153
+ <div class="relative flex items-center">
154
+ <div class="hidden md:flex absolute left-1/2 transform -translate-x-1/2 w-8 h-8 bg-blue-600 rounded-full items-center justify-center">
155
+ <span class="text-white font-bold">4</span>
156
+ </div>
157
+ <div class="hidden md:flex md:w-1/2 md:pr-16"></div>
158
+ <div class="md:w-1/2 md:pl-16">
159
+ <h3 class="text-xl font-bold mb-2">Ongoing Monitoring</h3>
160
+ <p class="text-gray-600">24/7 surveillance and periodic reviews to adapt to evolving threats and opportunities.</p>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ </div>
166
+ </section>
167
+
168
+ <!-- CTA Section -->
169
+ <section class="py-20 bg-gradient-to-r from-blue-800 to-blue-600 text-white">
170
+ <div class="max-w-4xl mx-auto text-center px-4">
171
+ <h2 class="text-3xl font-bold mb-6 font-serif">Begin Your Security Consultation</h2>
172
+ <p class="text-xl mb-8 leading-relaxed">Our principals are available for confidential discussions regarding your organization's specific requirements.</p>
173
+ <a href="/contact.html" class="inline-block bg-white hover:bg-gray-100 text-blue-800 px-8 py-4 rounded-md font-medium text-lg transition duration-300">Contact Our Team</a>
174
+ </div>
175
+ </section>
176
+ </main>
177
+
178
+ <custom-footer></custom-footer>
179
+
180
+ <script src="components/navbar.js"></script>
181
+ <script src="components/footer.js"></script>
182
+ <script src="script.js"></script>
183
+ <script>
184
+ feather.replace();
185
+ </script>
186
+ </body>
187
+ </html>
style.css CHANGED
@@ -1,28 +1,57 @@
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
28
  }
 
 
 
 
 
 
1
+ /* Custom font faces */
2
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');
3
+
4
+ /* Global styles */
5
  body {
6
+ font-family: 'Inter', sans-serif;
7
+ line-height: 1.6;
8
+ color: #1f2937;
9
+ }
10
+
11
+ h1, h2, h3, h4, h5, h6 {
12
+ font-family: 'Playfair Display', serif;
13
+ font-weight: 600;
14
+ }
15
+
16
+ /* Custom animations */
17
+ @keyframes fadeInUp {
18
+ from {
19
+ opacity: 0;
20
+ transform: translateY(20px);
21
+ }
22
+ to {
23
+ opacity: 1;
24
+ transform: translateY(0);
25
+ }
26
+ }
27
+
28
+ .animate-fadeInUp {
29
+ animation: fadeInUp 0.8s ease-out forwards;
30
  }
31
 
32
+ /* Section padding */
33
+ .section-padding {
34
+ padding: 5rem 0;
35
  }
36
 
37
+ /* Custom button styles */
38
+ .btn-primary {
39
+ background-color: #2563eb;
40
+ transition: all 0.3s ease;
 
41
  }
42
 
43
+ .btn-primary:hover {
44
+ background-color: #1d4ed8;
45
+ transform: translateY(-2px);
46
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 
 
47
  }
48
 
49
+ /* Custom card hover effect */
50
+ .card-hover {
51
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
52
  }
53
+
54
+ .card-hover:hover {
55
+ transform: translateY(-5px);
56
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
57
+ }