newportsite 1.1.3

package/src/lib/home/info/info.component.css

@@ -0,0 +1,476 @@
+/* ============================================================
+   Newport Project – Info Component
+   Fully theme-aware: light (default) + dark via .theme-dark
+   ============================================================ */
+
+/* ===== Animations ===== */
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(24px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+/* ===== Theme tokens ===== */
+:host {
+  /* Light defaults – aligned with global --app-accent (#007bff / #00a8ff) */
+  --i-accent:          var(--app-accent);
+  --i-accent-hover:    var(--app-accent-hover);
+  --i-accent-text:     #ffffff;
+  --i-accent-muted:    var(--app-accent-bg);
+  --i-hero-bg:         var(--app-surface);
+  --i-hero-text:       var(--app-text);
+  --i-hero-sub:        var(--app-text-secondary);
+  --i-stats-bg:        var(--app-background);
+  --i-stats-border:    var(--app-border);
+  --i-stats-text:      var(--app-text);
+  --i-stats-label:     var(--app-text-secondary);
+  --i-cta-bg-a:        #0a2540;
+  --i-cta-bg-b:        #1a4080;
+  --i-cta-tag-bg:      rgba(255,255,255,0.15);
+  --i-outline-border:  var(--app-accent);
+  --i-outline-text:    var(--app-accent);
+}
+
+:host-context(.theme-dark) {
+  --i-cta-bg-a:        #0f172a;
+  --i-cta-bg-b:        #1e3a5f;
+  --i-cta-tag-bg:      rgba(0, 168, 255, 0.2);
+}
+
+/* ===== Page wrapper ===== */
+.info-page {
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: 100%;
+  background-color: var(--app-background);
+  color: var(--app-text);
+}
+
+/* ===== Hero ===== */
+.hero {
+  position: relative;
+  background-color: var(--i-hero-bg);
+  padding: 7rem 2rem 5rem;
+  text-align: center;
+  overflow: hidden;
+}
+
+.hero-content {
+  position: relative;
+  z-index: 2;
+  max-width: 760px;
+  margin: 0 auto;
+  animation: fadeUp 0.8s ease-out both;
+}
+
+.hero-badge {
+  display: inline-block;
+  background: var(--i-accent-muted);
+  color: var(--i-accent);
+  border: 1px solid var(--i-accent);
+  border-radius: 999px;
+  padding: 0.3rem 1rem;
+  font-size: 0.78rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin-bottom: 1.5rem;
+}
+
+.hero-title {
+  font-size: clamp(2.5rem, 6vw, 4.2rem);
+  font-weight: 800;
+  line-height: 1.1;
+  color: var(--i-hero-text);
+  background-color: transparent;
+  margin: 0 0 0.75rem;
+  letter-spacing: -0.02em;
+}
+
+.accent {
+  color: var(--i-accent);
+}
+
+.hero-version {
+  font-size: 0.9rem;
+  color: var(--i-stats-label);
+  margin-bottom: 1.5rem;
+  letter-spacing: 0.05em;
+}
+
+.hero-desc {
+  font-size: 1.15rem;
+  color: var(--i-hero-sub);
+  line-height: 1.7;
+  max-width: 600px;
+  margin: 0 auto 2.5rem;
+  animation: fadeUp 0.8s ease-out 0.15s both;
+}
+
+.hero-actions {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+  animation: fadeUp 0.8s ease-out 0.3s both;
+}
+
+/* Wave separator */
+.hero-wave {
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  right: 0;
+  line-height: 0;
+  z-index: 1;
+}
+
+.hero-wave svg {
+  width: 100%;
+  height: 60px;
+  display: block;
+}
+
+.wave-path {
+  fill: var(--app-background);
+}
+
+/* ===== Buttons ===== */
+.btn-primary {
+  display: inline-block;
+  padding: 0.75rem 1.75rem;
+  background: var(--i-accent);
+  color: var(--i-accent-text);
+  border-radius: 8px;
+  font-weight: 600;
+  font-size: 0.95rem;
+  text-decoration: none;
+  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
+  letter-spacing: 0.02em;
+}
+
+.btn-primary:hover {
+  background: var(--i-accent-hover);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+  color: var(--i-accent-text);
+  text-decoration: none;
+}
+
+.btn-primary.large {
+  padding: 0.9rem 2.2rem;
+  font-size: 1.05rem;
+  margin-top: 2rem;
+}
+
+.btn-outline {
+  display: inline-block;
+  padding: 0.75rem 1.75rem;
+  background: transparent;
+  color: var(--i-outline-text);
+  border: 2px solid var(--i-outline-border);
+  border-radius: 8px;
+  font-weight: 600;
+  font-size: 0.95rem;
+  text-decoration: none;
+  transition: background 0.2s, transform 0.2s, color 0.2s;
+  letter-spacing: 0.02em;
+}
+
+.btn-outline:hover {
+  background: var(--i-accent-muted);
+  transform: translateY(-2px);
+  color: var(--i-accent);
+  text-decoration: none;
+}
+
+/* ===== Stats bar ===== */
+.stats {
+  background: var(--i-stats-bg);
+  border-top: 1px solid var(--i-stats-border);
+  border-bottom: 1px solid var(--i-stats-border);
+  padding: 2rem 2rem;
+}
+
+.stats-grid {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+  flex-wrap: wrap;
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0.5rem 3rem;
+  animation: fadeIn 0.8s ease-out both;
+}
+
+.stat-number {
+  font-size: 2.2rem;
+  font-weight: 800;
+  color: var(--i-accent);
+  line-height: 1;
+  margin-bottom: 0.3rem;
+}
+
+.stat-label {
+  font-size: 0.82rem;
+  color: var(--i-stats-label);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-weight: 500;
+}
+
+.stat-divider {
+  width: 1px;
+  height: 48px;
+  background: var(--i-stats-border);
+  flex-shrink: 0;
+}
+
+/* ===== Tech Stack ===== */
+.tech-stack {
+  padding: 5rem 2rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.tech-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 1.5rem;
+}
+
+.tech-card {
+  text-align: center;
+  padding: 2rem 1.5rem;
+  border-radius: 12px;
+  background: var(--app-surface);
+  border: 1px solid var(--app-border);
+  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
+}
+
+.tech-card:hover {
+  transform: translateY(-4px);
+  border-color: var(--i-accent);
+  box-shadow: 0 8px 28px var(--app-shadow);
+}
+
+.tech-icon {
+  font-size: 2rem;
+  margin-bottom: 0.75rem;
+  line-height: 1;
+}
+
+.tech-card h3 {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--i-accent);
+  margin: 0 0 0.5rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.tech-card p {
+  font-size: 0.88rem;
+  color: var(--app-text-secondary);
+  line-height: 1.6;
+  margin: 0;
+}
+
+/* ===== Architecture ===== */
+.architecture {
+  padding: 5rem 2rem;
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.arch-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.arch-item {
+  display: flex;
+  gap: 1.25rem;
+  align-items: flex-start;
+  padding: 1.25rem 1.5rem;
+  border-radius: 10px;
+  background: var(--app-surface);
+  border: 1px solid var(--app-border);
+  transition: border-color 0.2s;
+}
+
+.arch-item:hover {
+  border-color: var(--i-accent);
+}
+
+.arch-dot {
+  flex-shrink: 0;
+  width: 10px;
+  height: 10px;
+  margin-top: 6px;
+  border-radius: 50%;
+  background: var(--i-accent);
+}
+
+.arch-body h4 {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--app-text);
+  margin: 0 0 0.3rem;
+}
+
+.arch-body p {
+  font-size: 0.9rem;
+  color: var(--app-text-secondary);
+  line-height: 1.6;
+  margin: 0;
+}
+
+/* ===== Features ===== */
+.features {
+  padding: 6rem 2rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.section-header {
+  text-align: center;
+  margin-bottom: 3.5rem;
+}
+
+.section-tag {
+  display: inline-block;
+  background: var(--i-accent-muted);
+  color: var(--i-accent);
+  border-radius: 999px;
+  padding: 0.25rem 0.85rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  margin-bottom: 1rem;
+}
+
+.section-tag.light {
+  background: rgba(255, 255, 255, 0.18);
+  color: #ffffff;
+}
+
+.section-header h2 {
+  font-size: clamp(1.8rem, 4vw, 2.6rem);
+  font-weight: 700;
+  color: var(--app-text);
+  margin: 0.5rem 0 1rem;
+  letter-spacing: -0.01em;
+}
+
+.section-header p {
+  font-size: 1.05rem;
+  color: var(--app-text-secondary);
+  max-width: 540px;
+  margin: 0 auto;
+  line-height: 1.65;
+}
+
+.feature-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1.5rem;
+}
+
+.feature-card {
+  padding: 2rem 1.75rem;
+  border-radius: 12px;
+  background: var(--app-surface);
+  border: 1px solid var(--app-border);
+  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
+  color: var(--app-text);
+}
+
+.feature-card:hover {
+  transform: translateY(-4px);
+  border-color: var(--i-accent);
+  box-shadow: 0 8px 28px var(--app-shadow);
+}
+
+.feature-icon {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+  line-height: 1;
+}
+
+.feature-card h3 {
+  font-size: 1.15rem;
+  font-weight: 700;
+  color: var(--app-text);
+  margin: 0 0 0.6rem;
+}
+
+.feature-card p {
+  font-size: 0.93rem;
+  color: var(--app-text-secondary);
+  line-height: 1.65;
+  margin: 0;
+}
+
+/* ===== CTA ===== */
+.cta {
+  background: linear-gradient(135deg, var(--i-cta-bg-a) 0%, var(--i-cta-bg-b) 100%);
+  padding: 6rem 2rem;
+  text-align: center;
+  color: #ffffff;
+}
+
+.cta-content {
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+.cta h2 {
+  font-size: clamp(1.8rem, 4vw, 2.4rem);
+  font-weight: 700;
+  color: #ffffff;
+  margin: 0.75rem 0 1rem;
+  letter-spacing: -0.01em;
+}
+
+.cta p {
+  font-size: 1.05rem;
+  color: rgba(255, 255, 255, 0.82);
+  line-height: 1.65;
+  margin: 0;
+}
+
+/* ===== Footer ===== */
+.info-footer {
+  text-align: center;
+  padding: 1.5rem 2rem;
+  font-size: 0.82rem;
+  color: var(--app-text-secondary);
+  border-top: 1px solid var(--app-border);
+  background: var(--app-surface);
+}
+
+/* ===== Responsive ===== */
+@media (max-width: 768px) {
+  .hero { padding: 5rem 1.5rem 4rem; }
+  .hero-actions { flex-direction: column; align-items: center; }
+  .stat-item { padding: 0.5rem 1.5rem; }
+  .stat-divider { display: none; }
+  .stats-grid { gap: 1rem; }
+  .tech-stack { padding: 3rem 1.5rem; }
+  .architecture { padding: 3rem 1.5rem; }
+  .features { padding: 4rem 1.5rem; }
+  .cta { padding: 4rem 1.5rem; }
+}

package/src/lib/home/info/info.component.html

@@ -0,0 +1,174 @@
+<!-- info.component -->
+<div class="info-page">
+  <!-- ===== Hero ===== -->
+  <section class="hero">
+    <div class="hero-content">
+      <div class="hero-badge">{{ t.heroBadge }}</div>
+      <h1 class="hero-title">Newport<span class="accent"> Project</span></h1>
+      <p class="hero-version">{{ t.versionLabel }} {{ version }}</p>
+      <p class="hero-desc">{{ t.desc }}</p>
+      <div class="hero-actions">
+        <a [href]="mail1" class="btn-primary">{{ t.cta1 }}</a>
+        <a [href]="mail2" class="btn-outline">{{ t.cta2 }}</a>
+      </div>
+    </div>
+    <div class="hero-wave">
+      <svg
+        viewBox="0 0 1440 80"
+        preserveAspectRatio="none"
+        xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M0,40 C360,80 1080,0 1440,40 L1440,80 L0,80 Z"
+          class="wave-path" />
+      </svg>
+    </div>
+  </section>
+
+  <!-- ===== Stats ===== -->
+  <section class="stats">
+    <div class="stats-grid">
+      <div class="stat-item">
+        <span class="stat-number">10×</span>
+        <span class="stat-label">{{ t.stat1 }}</span>
+      </div>
+      <div class="stat-divider"></div>
+      <div class="stat-item">
+        <span class="stat-number">100%</span>
+        <span class="stat-label">{{ t.stat2 }}</span>
+      </div>
+      <div class="stat-divider"></div>
+      <div class="stat-item">
+        <span class="stat-number">∞</span>
+        <span class="stat-label">{{ t.stat3 }}</span>
+      </div>
+      <div class="stat-divider"></div>
+      <div class="stat-item">
+        <span class="stat-number">24/7</span>
+        <span class="stat-label">{{ t.stat4 }}</span>
+      </div>
+    </div>
+  </section>
+
+  <!-- ===== Tech Stack ===== -->
+  <section class="tech-stack">
+    <div class="section-header">
+      <span class="section-tag">{{ t.techTag }}</span>
+      <h2>{{ t.techTitle }}</h2>
+      <p>{{ t.techSubtitle }}</p>
+    </div>
+    <div class="tech-grid">
+      <div class="tech-card">
+        <div class="tech-icon">&#9881;</div>
+        <h3>{{ t.techFe }}</h3>
+        <p>{{ t.techFeDesc }}</p>
+      </div>
+      <div class="tech-card">
+        <div class="tech-icon">&#9889;</div>
+        <h3>{{ t.techBe }}</h3>
+        <p>{{ t.techBeDesc }}</p>
+      </div>
+      <div class="tech-card">
+        <div class="tech-icon">&#128451;</div>
+        <h3>{{ t.techData }}</h3>
+        <p>{{ t.techDataDesc }}</p>
+      </div>
+      <div class="tech-card">
+        <div class="tech-icon">&#9729;</div>
+        <h3>{{ t.techOps }}</h3>
+        <p>{{ t.techOpsDesc }}</p>
+      </div>
+    </div>
+  </section>
+
+  <!-- ===== Architecture ===== -->
+  <section class="architecture">
+    <div class="section-header">
+      <span class="section-tag">{{ t.archTag }}</span>
+      <h2>{{ t.archTitle }}</h2>
+      <p>{{ t.archSubtitle }}</p>
+    </div>
+    <div class="arch-list">
+      @for (item of t.archItems; track item.label) {
+        <div class="arch-item">
+          <div class="arch-dot"></div>
+          <div class="arch-body">
+            <h4>{{ item.label }}</h4>
+            <p>{{ item.detail }}</p>
+          </div>
+        </div>
+      }
+    </div>
+  </section>
+
+  <!-- ===== Features ===== -->
+  <section class="features">
+    <div class="section-header">
+      <span class="section-tag">{{ t.featTag }}</span>
+      <h2>{{ t.featTitle }}</h2>
+      <p>{{ t.featSubtitle }}</p>
+    </div>
+    <div class="feature-grid">
+      <div class="feature-card">
+        <div class="feature-icon">&#128196;</div>
+        <h3>{{ t.f1Title }}</h3>
+        <p>{{ t.f1Desc }}</p>
+      </div>
+      <div class="feature-card">
+        <div class="feature-icon">&#128202;</div>
+        <h3>{{ t.f2Title }}</h3>
+        <p>{{ t.f2Desc }}</p>
+      </div>
+      <div class="feature-card">
+        <div class="feature-icon">&#128197;</div>
+        <h3>{{ t.f3Title }}</h3>
+        <p>{{ t.f3Desc }}</p>
+      </div>
+      <div class="feature-card">
+        <div class="feature-icon">&#128200;</div>
+        <h3>{{ t.f4Title }}</h3>
+        <p>{{ t.f4Desc }}</p>
+      </div>
+      <div class="feature-card">
+        <div class="feature-icon">&#128279;</div>
+        <h3>{{ t.f5Title }}</h3>
+        <p>{{ t.f5Desc }}</p>
+      </div>
+      <div class="feature-card">
+        <div class="feature-icon">&#128274;</div>
+        <h3>{{ t.f6Title }}</h3>
+        <p>{{ t.f6Desc }}</p>
+      </div>
+      <div class="feature-card">
+        <div class="feature-icon">&#128451;</div>
+        <h3>{{ t.f7Title }}</h3>
+        <p>{{ t.f7Desc }}</p>
+      </div>
+      <div class="feature-card">
+        <div class="feature-icon">&#128161;</div>
+        <h3>{{ t.f8Title }}</h3>
+        <p>{{ t.f8Desc }}</p>
+      </div>
+      <div class="feature-card">
+        <div class="feature-icon">&#9729;</div>
+        <h3>{{ t.f9Title }}</h3>
+        <p>{{ t.f9Desc }}</p>
+      </div>
+    </div>
+  </section>
+
+  <!-- ===== CTA ===== -->
+  <section class="cta">
+    <div class="cta-content">
+      <span class="section-tag light">{{ t.ctaTag }}</span>
+      <h2>{{ t.ctaTitle }}</h2>
+      <p>{{ t.ctaSubtitle }}</p>
+      <a [href]="mailCta" class="btn-primary large">{{ t.ctaBtn }}</a>
+    </div>
+  </section>
+
+  <!-- ===== Footer ===== -->
+  <footer class="info-footer">
+    <span>Newport Project &copy; {{ version }} &mdash; {{ t.rights }}</span>
+  </footer>
+</div>
+<!-- fine info.component -->