mirror of
https://github.com/shadoll/vancouver.git
synced 2026-08-28 03:28:21 +00:00
feat: update Home component layout and styles, add hero background images, and enhance nav value section
This commit is contained in:
+5
-2
@@ -2,9 +2,12 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vancouver</title>
|
||||
<meta name="description" content="Vancouver Investment Fund - Ukrainian investment fund established in 2018, focused on energy, woodworking, real estate, retail, and wholesale trade." />
|
||||
<meta name="keywords" content="investment fund, ukraine, vancouver, energy, real estate, retail, woodworking" />
|
||||
<meta name="author" content="Vancouver Investment Fund" />
|
||||
<title>Vancouver Investment Fund</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#2563eb;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#1d4ed8;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Background circle -->
|
||||
<circle cx="16" cy="16" r="15" fill="url(#grad1)" stroke="#1e293b" stroke-width="1"/>
|
||||
|
||||
<!-- Letter V -->
|
||||
<path d="M8 10 L12 22 L16 10 L20 22 L24 10"
|
||||
stroke="white"
|
||||
stroke-width="2.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
fill="none"/>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 638 B |
@@ -0,0 +1,111 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600" style="background: linear-gradient(135deg, #1e293b 0%, #334155 100%);">
|
||||
<!-- Background gradient -->
|
||||
<defs>
|
||||
<linearGradient id="bgGradientDark" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#1e293b;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#334155;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- Gradient for charts -->
|
||||
<linearGradient id="chartGradientDark" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#10b981;stop-opacity:0.8" />
|
||||
<stop offset="100%" style="stop-color:#10b981;stop-opacity:0.2" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- Gradient for coins -->
|
||||
<linearGradient id="coinGradientDark" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#fbbf24;stop-opacity:0.9" />
|
||||
<stop offset="100%" style="stop-color:#f59e0b;stop-opacity:0.7" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="1200" height="600" fill="url(#bgGradientDark)" opacity="0.3"/>
|
||||
|
||||
<!-- Growing chart lines -->
|
||||
<g transform="translate(50, 150)">
|
||||
<!-- Chart 1 -->
|
||||
<path d="M0,200 Q50,180 100,160 T200,120 T300,80 T400,40"
|
||||
stroke="#10b981" stroke-width="4" fill="none" opacity="0.7"/>
|
||||
<path d="M0,200 Q50,180 100,160 T200,120 T300,80 T400,40 L400,200 Z"
|
||||
fill="url(#chartGradientDark)" opacity="0.4"/>
|
||||
|
||||
<!-- Chart 2 -->
|
||||
<path d="M50,220 Q100,200 150,180 T250,140 T350,100 T450,60"
|
||||
stroke="#3b82f6" stroke-width="3" fill="none" opacity="0.6"/>
|
||||
|
||||
<!-- Chart 3 -->
|
||||
<path d="M100,230 Q150,210 200,190 T300,150 T400,110 T500,80"
|
||||
stroke="#8b5cf6" stroke-width="3" fill="none" opacity="0.5"/>
|
||||
</g>
|
||||
|
||||
<!-- Candlestick chart -->
|
||||
<g transform="translate(600, 200)">
|
||||
<!-- Candlesticks -->
|
||||
<g opacity="0.5">
|
||||
<!-- Green candles (bullish) -->
|
||||
<rect x="20" y="80" width="12" height="40" fill="#10b981"/>
|
||||
<line x1="26" y1="70" x2="26" y2="130" stroke="#10b981" stroke-width="2"/>
|
||||
|
||||
<rect x="50" y="60" width="12" height="50" fill="#10b981"/>
|
||||
<line x1="56" y1="50" x2="56" y2="120" stroke="#10b981" stroke-width="2"/>
|
||||
|
||||
<rect x="80" y="40" width="12" height="60" fill="#10b981"/>
|
||||
<line x1="86" y1="30" x2="86" y2="110" stroke="#10b981" stroke-width="2"/>
|
||||
|
||||
<rect x="110" y="30" width="12" height="45" fill="#10b981"/>
|
||||
<line x1="116" y1="20" x2="116" y2="85" stroke="#10b981" stroke-width="2"/>
|
||||
|
||||
<!-- Red candles (bearish) -->
|
||||
<rect x="140" y="50" width="12" height="35" fill="#ef4444"/>
|
||||
<line x1="146" y1="45" x2="146" y2="90" stroke="#ef4444" stroke-width="2"/>
|
||||
|
||||
<rect x="170" y="45" width="12" height="40" fill="#10b981"/>
|
||||
<line x1="176" y1="35" x2="176" y2="95" stroke="#10b981" stroke-width="2"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Floating coins -->
|
||||
<g opacity="0.4">
|
||||
<!-- Coin 1 -->
|
||||
<circle cx="200" cy="100" r="25" fill="url(#coinGradientDark)"/>
|
||||
<text x="200" y="105" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#92400e">€</text>
|
||||
|
||||
<!-- Coin 2 -->
|
||||
<circle cx="900" cy="150" r="20" fill="url(#coinGradientDark)"/>
|
||||
<text x="900" y="155" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#92400e">$</text>
|
||||
|
||||
<!-- Coin 3 -->
|
||||
<circle cx="750" cy="80" r="15" fill="url(#coinGradientDark)"/>
|
||||
<text x="750" y="85" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" font-weight="bold" fill="#92400e">₴</text>
|
||||
</g>
|
||||
|
||||
<!-- Numbers and statistics -->
|
||||
<g opacity="0.3" font-family="Arial, sans-serif" fill="#cbd5e1">
|
||||
<text x="100" y="50" font-size="24" font-weight="bold">16.8M €</text>
|
||||
<text x="300" y="70" font-size="18">+12.5%</text>
|
||||
<text x="500" y="45" font-size="20" font-weight="bold">2018</text>
|
||||
<text x="800" y="60" font-size="16">ROI: 8.2%</text>
|
||||
<text x="950" y="90" font-size="14">Q1 2025</text>
|
||||
</g>
|
||||
|
||||
<!-- Geometric shapes for modern touch -->
|
||||
<g opacity="0.15">
|
||||
<polygon points="150,400 200,350 250,400 200,450" fill="#3b82f6"/>
|
||||
<polygon points="850,500 900,450 950,500 900,550" fill="#8b5cf6"/>
|
||||
<circle cx="400" cy="500" r="30" fill="#10b981"/>
|
||||
<rect x="600" y="450" width="40" height="40" rx="8" fill="#f59e0b"/>
|
||||
</g>
|
||||
|
||||
<!-- Grid lines for professional look -->
|
||||
<g opacity="0.15" stroke="#cbd5e1" stroke-width="1">
|
||||
<line x1="0" y1="150" x2="1200" y2="150"/>
|
||||
<line x1="0" y1="300" x2="1200" y2="300"/>
|
||||
<line x1="0" y1="450" x2="1200" y2="450"/>
|
||||
<line x1="200" y1="0" x2="200" y2="600"/>
|
||||
<line x1="400" y1="0" x2="400" y2="600"/>
|
||||
<line x1="600" y1="0" x2="600" y2="600"/>
|
||||
<line x1="800" y1="0" x2="800" y2="600"/>
|
||||
<line x1="1000" y1="0" x2="1000" y2="600"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.7 KiB |
@@ -0,0 +1,111 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600" style="background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);">
|
||||
<!-- Background gradient -->
|
||||
<defs>
|
||||
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#f8fafc;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#e2e8f0;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- Gradient for charts -->
|
||||
<linearGradient id="chartGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#10b981;stop-opacity:0.8" />
|
||||
<stop offset="100%" style="stop-color:#10b981;stop-opacity:0.2" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- Gradient for coins -->
|
||||
<linearGradient id="coinGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#fbbf24;stop-opacity:0.9" />
|
||||
<stop offset="100%" style="stop-color:#f59e0b;stop-opacity:0.7" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="1200" height="600" fill="url(#bgGradient)" opacity="0.3"/>
|
||||
|
||||
<!-- Growing chart lines -->
|
||||
<g transform="translate(50, 150)">
|
||||
<!-- Chart 1 -->
|
||||
<path d="M0,200 Q50,180 100,160 T200,120 T300,80 T400,40"
|
||||
stroke="#10b981" stroke-width="4" fill="none" opacity="0.6"/>
|
||||
<path d="M0,200 Q50,180 100,160 T200,120 T300,80 T400,40 L400,200 Z"
|
||||
fill="url(#chartGradient)" opacity="0.3"/>
|
||||
|
||||
<!-- Chart 2 -->
|
||||
<path d="M50,220 Q100,200 150,180 T250,140 T350,100 T450,60"
|
||||
stroke="#3b82f6" stroke-width="3" fill="none" opacity="0.5"/>
|
||||
|
||||
<!-- Chart 3 -->
|
||||
<path d="M100,230 Q150,210 200,190 T300,150 T400,110 T500,80"
|
||||
stroke="#8b5cf6" stroke-width="3" fill="none" opacity="0.4"/>
|
||||
</g>
|
||||
|
||||
<!-- Candlestick chart -->
|
||||
<g transform="translate(600, 200)">
|
||||
<!-- Candlesticks -->
|
||||
<g opacity="0.4">
|
||||
<!-- Green candles (bullish) -->
|
||||
<rect x="20" y="80" width="12" height="40" fill="#10b981"/>
|
||||
<line x1="26" y1="70" x2="26" y2="130" stroke="#10b981" stroke-width="2"/>
|
||||
|
||||
<rect x="50" y="60" width="12" height="50" fill="#10b981"/>
|
||||
<line x1="56" y1="50" x2="56" y2="120" stroke="#10b981" stroke-width="2"/>
|
||||
|
||||
<rect x="80" y="40" width="12" height="60" fill="#10b981"/>
|
||||
<line x1="86" y1="30" x2="86" y2="110" stroke="#10b981" stroke-width="2"/>
|
||||
|
||||
<rect x="110" y="30" width="12" height="45" fill="#10b981"/>
|
||||
<line x1="116" y1="20" x2="116" y2="85" stroke="#10b981" stroke-width="2"/>
|
||||
|
||||
<!-- Red candles (bearish) -->
|
||||
<rect x="140" y="50" width="12" height="35" fill="#ef4444"/>
|
||||
<line x1="146" y1="45" x2="146" y2="90" stroke="#ef4444" stroke-width="2"/>
|
||||
|
||||
<rect x="170" y="45" width="12" height="40" fill="#10b981"/>
|
||||
<line x1="176" y1="35" x2="176" y2="95" stroke="#10b981" stroke-width="2"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Floating coins -->
|
||||
<g opacity="0.3">
|
||||
<!-- Coin 1 -->
|
||||
<circle cx="200" cy="100" r="25" fill="url(#coinGradient)"/>
|
||||
<text x="200" y="105" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#92400e">€</text>
|
||||
|
||||
<!-- Coin 2 -->
|
||||
<circle cx="900" cy="150" r="20" fill="url(#coinGradient)"/>
|
||||
<text x="900" y="155" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#92400e">$</text>
|
||||
|
||||
<!-- Coin 3 -->
|
||||
<circle cx="750" cy="80" r="15" fill="url(#coinGradient)"/>
|
||||
<text x="750" y="85" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" font-weight="bold" fill="#92400e">₴</text>
|
||||
</g>
|
||||
|
||||
<!-- Numbers and statistics -->
|
||||
<g opacity="0.2" font-family="Arial, sans-serif" fill="#64748b">
|
||||
<text x="100" y="50" font-size="24" font-weight="bold">16.8M €</text>
|
||||
<text x="300" y="70" font-size="18">+12.5%</text>
|
||||
<text x="500" y="45" font-size="20" font-weight="bold">2018</text>
|
||||
<text x="800" y="60" font-size="16">ROI: 8.2%</text>
|
||||
<text x="950" y="90" font-size="14">Q1 2025</text>
|
||||
</g>
|
||||
|
||||
<!-- Geometric shapes for modern touch -->
|
||||
<g opacity="0.1">
|
||||
<polygon points="150,400 200,350 250,400 200,450" fill="#3b82f6"/>
|
||||
<polygon points="850,500 900,450 950,500 900,550" fill="#8b5cf6"/>
|
||||
<circle cx="400" cy="500" r="30" fill="#10b981"/>
|
||||
<rect x="600" y="450" width="40" height="40" rx="8" fill="#f59e0b"/>
|
||||
</g>
|
||||
|
||||
<!-- Grid lines for professional look -->
|
||||
<g opacity="0.1" stroke="#64748b" stroke-width="1">
|
||||
<line x1="0" y1="150" x2="1200" y2="150"/>
|
||||
<line x1="0" y1="300" x2="1200" y2="300"/>
|
||||
<line x1="0" y1="450" x2="1200" y2="450"/>
|
||||
<line x1="200" y1="0" x2="200" y2="600"/>
|
||||
<line x1="400" y1="0" x2="400" y2="600"/>
|
||||
<line x1="600" y1="0" x2="600" y2="600"/>
|
||||
<line x1="800" y1="0" x2="800" y2="600"/>
|
||||
<line x1="1000" y1="0" x2="1000" y2="600"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.7 KiB |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.9 KiB |
+66
-10
@@ -74,11 +74,17 @@
|
||||
<p class="hero-description">
|
||||
{t('description', $language)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- NAV Value Section -->
|
||||
<section class="nav-section scroll-animate">
|
||||
<div class="container">
|
||||
<div class="nav-value">
|
||||
<strong>{t('nav_value', $language)}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Investment Areas -->
|
||||
@@ -203,8 +209,36 @@
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
padding: 4rem 0;
|
||||
background: linear-gradient(135deg, var(--bg-color) 0%, var(--bg-secondary) 100%);
|
||||
padding: 6rem 0;
|
||||
background-image: url('/hero-background.svg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
min-height: 500px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:global([data-theme="dark"]) .hero {
|
||||
background-image: url('/hero-background-dark.svg');
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, var(--bg-color) 0%, transparent 50%, var(--bg-secondary) 100%);
|
||||
opacity: 0.8;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
@@ -220,23 +254,35 @@
|
||||
font-size: 1.125rem;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 2rem;
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
max-width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* NAV Value Section */
|
||||
.nav-section {
|
||||
padding: 3rem 0;
|
||||
background: var(--bg-color);
|
||||
}
|
||||
|
||||
.nav-value {
|
||||
text-align: center;
|
||||
padding: 1.5rem;
|
||||
background: var(--bg-color);
|
||||
border: 2px solid var(--primary-color);
|
||||
padding: 2rem;
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
|
||||
border-radius: 1rem;
|
||||
font-size: 1.125rem;
|
||||
color: var(--primary-color);
|
||||
max-width: 600px;
|
||||
font-size: 1.25rem;
|
||||
color: white;
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
box-shadow: var(--shadow);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-value:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* Investment Areas */
|
||||
@@ -446,9 +492,19 @@
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 4rem 0;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.nav-section {
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.nav-value {
|
||||
padding: 1.5rem;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user