Spaces:

wangxso
/

securefortress-elite-guard

Running

App Files Files Community

wangxso commited on Oct 30

Commit

d110397

verified ·

1 Parent(s): 4cca29a

以 “专业、可信、高端” 为核心定位，结合公关、投资、安全三大领域特性，在视觉呈现上采用。辅以金色点缀（体现投资领域价值感），打造统一且具有行业辨识度的企业形象体系。

Browse files

Files changed (9) hide show

about.html +3 -3
components/footer.js +10 -12
components/logo.js +42 -0
components/navbar.js +12 -14
contact.html +3 -3
index.html +7 -7
insights.html +3 -3
services.html +3 -3
style.css +22 -1

about.html CHANGED Viewed

@@ -3,9 +3,9 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>About | SecureVest Capital Shield</title>
-    <meta name="description" content="Learn about SecureVest's leadership team, history, and our unique approach to integrated security and investment solutions">
-    <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About | SolStrategies</title>
+    <meta name="description" content="Singapore-based security investment consultancy with global expertise in strategic capital protection and communications">
+<link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>

components/footer.js CHANGED Viewed

@@ -4,13 +4,13 @@ class CustomFooter extends HTMLElement {
     this.shadowRoot.innerHTML = `
       <style>
         footer {
-          background-color: #111827;
           color: white;
           padding: 4rem 2rem;
           font-size: 0.9rem;
         }
-        .footer-container {
           max-width: 1200px;
           margin: 0 auto;
           display: grid;
@@ -27,10 +27,9 @@ class CustomFooter extends HTMLElement {
           margin-bottom: 1.5rem;
           font-family: 'Playfair Display', serif;
         }
         .footer-logo-icon {
-          color: #3b82f6;
-        }
         .footer-about {
           margin-bottom: 1.5rem;
@@ -42,7 +41,6 @@ class CustomFooter extends HTMLElement {
           display: flex;
           gap: 1rem;
         }
         .social-link {
           color: white;
           background-color: rgba(255, 255, 255, 0.1);
@@ -56,8 +54,9 @@ class CustomFooter extends HTMLElement {
         }
         .social-link:hover {
-          background-color: #3b82f6;
-          transform: translateY(-2px);
         }
         .footer-heading {
@@ -68,7 +67,6 @@ class CustomFooter extends HTMLElement {
           position: relative;
           padding-bottom: 0.5rem;
         }
         .footer-heading::after {
           content: '';
           position: absolute;
@@ -76,8 +74,8 @@ class CustomFooter extends HTMLElement {
           left: 0;
           width: 40px;
           height: 2px;
-          background-color: #3b82f6;
-        }
         .footer-links {
           list-style: none;

     this.shadowRoot.innerHTML = `
       <style>
         footer {
+          background-color: #1E3A8A;
           color: white;
           padding: 4rem 2rem;
           font-size: 0.9rem;
+          border-top: 2px solid #D4AF37;
         }
+.footer-container {
           max-width: 1200px;
           margin: 0 auto;
           display: grid;
           margin-bottom: 1.5rem;
           font-family: 'Playfair Display', serif;
         }
         .footer-logo-icon {
+          color: #D4AF37;
+}
         .footer-about {
           margin-bottom: 1.5rem;
           display: flex;
           gap: 1rem;
         }
         .social-link {
           color: white;
           background-color: rgba(255, 255, 255, 0.1);
         }
         .social-link:hover {
+          background-color: #D4AF37;
+          color: #1E3A8A;
+transform: translateY(-2px);
         }
         .footer-heading {
           position: relative;
           padding-bottom: 0.5rem;
         }
         .footer-heading::after {
           content: '';
           position: absolute;
           left: 0;
           width: 40px;
           height: 2px;
+          background-color: #D4AF37;
+}
         .footer-links {
           list-style: none;

components/logo.js ADDED Viewed

	@@ -0,0 +1,42 @@

+class CustomLogo extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .logo-container {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          font-family: 'Playfair Display', serif;
+          font-weight: 700;
+          font-size: 1.5rem;
+          color: #111827;
+        }
+        .logo-icon {
+          color: #D4AF37;
+          width: 1.5em;
+          height: 1.5em;
+        }
+        .logo-text {
+          position: relative;
+        }
+        .logo-text::after {
+          content: '';
+          position: absolute;
+          bottom: -3px;
+          left: 0;
+          width: 100%;
+          height: 2px;
+          background: linear-gradient(90deg, #D4AF37, rgba(212, 175, 55, 0.5));
+        }
+      </style>
+      <div class="logo-container">
+        <i data-feather="shield" class="logo-icon"></i>
+        <span class="logo-text">SolStrategies</span>
+      </div>
+    `;
+    feather.replace();
+  }
+}
+customElements.define('custom-logo', CustomLogo);

components/navbar.js CHANGED Viewed

@@ -12,19 +12,18 @@ class CustomNavbar extends HTMLElement {
           z-index: 1000;
           transition: all 0.3s ease;
         }
         nav {
-          background-color: rgba(17, 24, 39, 0.9);
           backdrop-filter: blur(10px);
           padding: 1rem 2rem;
           display: flex;
           justify-content: space-between;
           align-items: center;
-          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
         }
         .scrolled {
-          background-color: rgba(17, 24, 39, 0.98);
           padding: 0.5rem 2rem;
         }
@@ -39,8 +38,8 @@ class CustomNavbar extends HTMLElement {
         }
         .logo-icon {
-          color: #3b82f6;
-        }
         .nav-links {
           display: flex;
@@ -63,7 +62,6 @@ class CustomNavbar extends HTMLElement {
         .nav-link:hover {
           color: white;
         }
         .nav-link::after {
           content: '';
           position: absolute;
@@ -71,9 +69,9 @@ class CustomNavbar extends HTMLElement {
           left: 0;
           width: 0;
           height: 2px;
-          background-color: #3b82f6;
           transition: width 0.3s ease;
-        }
         .nav-link:hover::after {
           width: 100%;
@@ -118,18 +116,18 @@ class CustomNavbar extends HTMLElement {
           display: block;
           border-bottom: 1px solid rgba(255, 255, 255, 0.1);
         }
         .contact-btn {
-          background-color: #3b82f6;
-          color: white;
           padding: 0.5rem 1.5rem;
           border-radius: 0.25rem;
           transition: all 0.2s ease;
         }
         .contact-btn:hover {
-          background-color: #2563eb;
-          transform: translateY(-2px);
         }
         @media (max-width: 768px) {

           z-index: 1000;
           transition: all 0.3s ease;
         }
         nav {
+          background-color: rgba(30, 58, 138, 0.9);
           backdrop-filter: blur(10px);
           padding: 1rem 2rem;
           display: flex;
           justify-content: space-between;
           align-items: center;
+          border-bottom: 2px solid #D4AF37;
         }
         .scrolled {
+          background-color: rgba(30, 58, 138, 0.98);
           padding: 0.5rem 2rem;
         }
         }
         .logo-icon {
+          color: #D4AF37;
+}
         .nav-links {
           display: flex;
         .nav-link:hover {
           color: white;
         }
         .nav-link::after {
           content: '';
           position: absolute;
           left: 0;
           width: 0;
           height: 2px;
+          background-color: #D4AF37;
           transition: width 0.3s ease;
+}
         .nav-link:hover::after {
           width: 100%;
           display: block;
           border-bottom: 1px solid rgba(255, 255, 255, 0.1);
         }
         .contact-btn {
+          background: linear-gradient(135deg, #D4AF37 0%, #F4D03F 100%);
+          color: #1E3A8A;
           padding: 0.5rem 1.5rem;
           border-radius: 0.25rem;
           transition: all 0.2s ease;
+          font-weight: 600;
         }
         .contact-btn:hover {
+          background: linear-gradient(135deg, #F4D03F 0%, #D4AF37 100%);
+transform: translateY(-2px);
         }
         @media (max-width: 768px) {

contact.html CHANGED Viewed

@@ -3,9 +3,9 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Contact | SecureVest Capital Shield</title>
-    <meta name="description" content="Contact our team for confidential consultations on security and investment strategies">
-    <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contact | SolStrategies</title>
+    <meta name="description" content="Contact our Singapore headquarters for confidential security investment consultations">
+<link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>

index.html CHANGED Viewed

@@ -3,9 +3,9 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SecureVest Capital Shield | Strategic PR, Investment & Security Solutions</title>
-    <meta name="description" content="Global leader in integrated PR strategies, secure investments, and comprehensive security solutions for enterprises and governments">
-    <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
@@ -22,11 +22,11 @@
         <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">
             <div class="absolute inset-0 bg-black opacity-50"></div>
             <div class="relative z-10 max-w-4xl mx-auto">
-                <h1 class="text-4xl md:text-6xl font-bold mb-6 font-serif">SecureVest Capital Shield</h1>
-                <p class="text-xl md:text-2xl mb-8 leading-relaxed">Integrating strategic communications, capital intelligence, and security fortification for global enterprises</p>
                 <div class="flex gap-4 justify-center">
-                    <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>
-                    <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>
                 </div>
 </div>
         </section>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SolStrategies | Strategic Security Investment & PR Solutions</title>
+    <meta name="description" content="Singapore-based leader in integrated security investment strategies and strategic communications for global enterprises">
+<link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
         <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">
             <div class="absolute inset-0 bg-black opacity-50"></div>
             <div class="relative z-10 max-w-4xl mx-auto">
+                <h1 class="text-4xl md:text-6xl font-bold mb-6 font-serif">SolStrategies</h1>
+                <p class="text-xl md:text-2xl mb-8 leading-relaxed">Singapore-based security investment strategists integrating capital protection with strategic communications</p>
                 <div class="flex gap-4 justify-center">
+                    <a href="/services.html" class="bg-gradient-to-r from-yellow-600 to-yellow-700 hover:from-yellow-700 hover:to-yellow-800 text-white px-8 py-3 rounded-md font-medium transition duration-300">Our Services</a>
+                    <a href="/contact.html" class="border-2 border-yellow-500 hover:bg-yellow-500 hover:text-gray-900 text-white px-8 py-3 rounded-md font-medium transition duration-300">Contact Us</a>
                 </div>
 </div>
         </section>

insights.html CHANGED Viewed

@@ -3,9 +3,9 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Insights | SecureVest Capital Shield</title>
-    <meta name="description" content="Strategic insights and thought leadership from SecureVest's experts">
-    <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Insights | SolStrategies</title>
+    <meta name="description" content="Security investment insights and strategic communications intelligence from our experts">
+<link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>

services.html CHANGED Viewed

@@ -3,9 +3,9 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Services | SecureVest Capital Shield</title>
-    <meta name="description" content="Comprehensive PR, investment, and security services for global enterprises and high-net-worth individuals">
-    <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Services | SolStrategies</title>
+    <meta name="description" content="Integrated security investment and strategic communication services from our Singapore headquarters">
+<link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>

style.css CHANGED Viewed

@@ -1,13 +1,34 @@
 /* Custom font faces */
 @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');
 /* Global styles */
 body {
     font-family: 'Inter', sans-serif;
     line-height: 1.6;
     color: #1f2937;
 }
 h1, h2, h3, h4, h5, h6 {
     font-family: 'Playfair Display', serif;
     font-weight: 600;

 /* Custom font faces */
 @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');
 /* Global styles */
 body {
     font-family: 'Inter', sans-serif;
     line-height: 1.6;
     color: #1f2937;
+    background-color: #f9fafb;
+}
+/* Gold accent color palette */
+.bg-gold-gradient {
+    background: linear-gradient(135deg, #D4AF37 0%, #F4D03F 100%);
+}
+.text-gold {
+    color: #D4AF37;
 }
+.border-gold {
+    border-color: #D4AF37;
+}
+/* Dark blue palette for trust */
+.bg-navy {
+    background-color: #1E3A8A;
+}
+.text-navy {
+    color: #1E3A8A;
+}
 h1, h2, h3, h4, h5, h6 {
     font-family: 'Playfair Display', serif;
     font-weight: 600;