...
This commit is contained in:
parent
dbfec80d3f
commit
5b110d99c9
11
poc_threefold/components/hero_section.html
Normal file
11
poc_threefold/components/hero_section.html
Normal file
@ -0,0 +1,11 @@
|
||||
<div class="hero-section">
|
||||
<h1 class="hero-title">A Self-Healing Data, Network and Cloud Platform</h1>
|
||||
<p class="hero-description">
|
||||
Imagine a system built to scale to a planetary level, seamlessly compatible with AI, Cloud, Web2, Web3, and Edge IT workloads. A system that is resilient to unforeseen events, provides 100% uptime, and enables any machine and human to communicate over the shortest, most direct path possible.
|
||||
</p>
|
||||
<p class="hero-tagline">That's <strong>ThreeFold</strong>.</p>
|
||||
<div class="hero-buttons">
|
||||
<button class="btn btn-primary">Get Started Now</button>
|
||||
<button class="btn btn-secondary">See Products</button>
|
||||
</div>
|
||||
</div>
|
||||
102
poc_threefold/static/css/index.css
Normal file
102
poc_threefold/static/css/index.css
Normal file
@ -0,0 +1,102 @@
|
||||
/* Hero Section Styles */
|
||||
.hero-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
min-height: 80vh;
|
||||
padding: 2rem;
|
||||
background-color: var(--body-background);
|
||||
color: var(--body-text);
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 2rem;
|
||||
max-width: 900px;
|
||||
letter-spacing: -0.02em;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 2rem;
|
||||
max-width: 800px;
|
||||
color: var(--body-text);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.hero-tagline {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 3rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.hero-tagline strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
text-transform: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: white;
|
||||
color: var(--body-background);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: transparent;
|
||||
color: var(--body-text);
|
||||
border: 1px solid var(--body-text);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.hero-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.hero-tagline {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
83
poc_threefold/static/css/markdown.css
Normal file
83
poc_threefold/static/css/markdown.css
Normal file
@ -0,0 +1,83 @@
|
||||
/* Specific styles for markdown content section */
|
||||
.markdown-content {
|
||||
flex: 1;
|
||||
padding-right: 2rem;
|
||||
border-right: 1px solid #a4b6ba;
|
||||
}
|
||||
|
||||
/* Override general styles specifically for markdown content */
|
||||
.markdown-content h2 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 1rem;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
.markdown-content h3 {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 0.8rem;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
/* Light theme colors - more specific selectors */
|
||||
.light-theme .markdown-content h2,
|
||||
.light-theme .markdown-content h3,
|
||||
.light-theme .markdown-content p,
|
||||
.light-theme .markdown-content ul,
|
||||
.light-theme .markdown-content li {
|
||||
color: #444444 !important;
|
||||
}
|
||||
|
||||
/* Dark theme colors - more specific selectors */
|
||||
.markdown-content h2,
|
||||
.markdown-content h3,
|
||||
.markdown-content p,
|
||||
.markdown-content ul,
|
||||
.markdown-content li {
|
||||
color: #cccccc !important;
|
||||
}
|
||||
|
||||
/* Make list items and paragraphs consistent size */
|
||||
.markdown-content p,
|
||||
.markdown-content li {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 200;
|
||||
line-height: 1.25;
|
||||
margin-bottom: 0.25rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
/* List specific styling */
|
||||
.markdown-content ul {
|
||||
font-weight: 200;
|
||||
padding-left: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* Links styling specific to markdown content */
|
||||
.markdown-content a {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 200;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.markdown-content a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 768px) {
|
||||
.markdown-content {
|
||||
border-right: none;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding-right: 0;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user