basic landing page design

Author: marcelnoehre

src/app/app.component.html

@@ -12,8 +12,14 @@
   </mat-toolbar>
   <div class="content-container" [style.marginTop.px]="mobileQuery.matches ? 80 : 0">
     <div class="banner">
-      <mat-card></mat-card>
-
+      <mat-card class="code-snippet">
+        <mat-card-title class="title">
+          <h3>sQeeZ Scripting Language</h3>
+        </mat-card-title>
+        <mat-card-content class="editor">
+          {{ code }}
+        </mat-card-content>
+      </mat-card>
       <mat-card class="getting-started">
         <mat-card-title>
           <h3>Getting Started</h3>

src/app/app.component.scss

@@ -60,6 +60,27 @@
     color: var(--font-color);
 }
 
+.code-snippet {
+    text-align: center;
+    display: flex;
+    background-color: var(--content);
+
+    .title {
+        color: var(--highlight);
+        text-decoration: underline;
+    }
+
+    .editor {
+        padding: 1rem;
+        margin: 1rem;
+        margin-top: 0;
+        background-color: var(--editor);
+        border-radius: 10px;
+        text-align: left;
+        white-space: pre-line;
+    }
+}
+
 .getting-started {
     height: fit-content;
     text-align: center;
@@ -98,6 +119,19 @@
     }
 }
 
+@media (max-width: 768px) {
+    .banner {
+        flex-direction: column;   
+        padding: 1rem 0;
+        gap: 1rem;
+        height: fit-content;
+
+        mat-card {
+            max-width: 95%;
+        }
+    }
+}
+
 @media (max-width: 320px) {
     .slogan {
         display: none;

src/app/app.component.ts

@@ -21,6 +21,7 @@ export class AppComponent implements OnInit, OnDestroy {
   public currentTheme: string = 'dark';
   public os: string = '';
   public oss: string[] = ['macOS', 'Windows', 'Linux'];
+  public code: string = '@5,10,15,20,25 |> MAP(+3) |> FILTER(>15) |> REDUCE(+0);\nvar obj = @a:1,b:false,c:"last value";\nlog(obj);'
 
   private _mobileQueryListener: () => void;
 

src/styles.scss

@@ -19,6 +19,8 @@ body {
     --font-color: white;
     --toolbar: #424242;
     --content: #303030;
+    --editor: #1f1f1f;
+    --highlight: rgba(255, 171, 242, 0.75);
 }
 
 .light-theme {
@@ -27,6 +29,8 @@ body {
     --font-color: black;
     --toolbar: #F5F5F5;
     --content: #FFFFFF;
+    --editor: #ffffff;
+    --highlight: rgba(255, 171, 242, 0.75);
 }
 
 app-root {