From d2a418f4c41ddac148941cd9a0a35137bf7e2fa6 Mon Sep 17 00:00:00 2001
From: BOTAlex <zhentao2004@gmail.com>
Date: Tue, 20 Aug 2024 22:06:08 +0200
Subject: [PATCH] progress sync

---
 src/routes/+layout.svelte       |   3 +
 src/routes/+page.svelte         |   4 +-
 src/routes/pricing/+page.svelte | 173 +++++++++++++++++++++++++++++++-
 3 files changed, 175 insertions(+), 5 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 0bae4af..c1a0adc 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,7 @@
 <script>
 	import Header from './Header.svelte';
 	import '../app.css';
+	import Footer from './Footer.svelte';
 </script>
 
 <div class="app">
@@ -9,6 +10,8 @@
 	<main>
 		<slot />
 	</main>
+
+	<Footer/>
 </div>
 
 <style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 8ba1d4e..b962cde 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -68,7 +68,7 @@
 </svelte:head>
 
 <section>
-	<Parallax sections={3} config={{stiffness: 0.2, damping: 0.3}}>
+	<Parallax sections={1.5} config={{stiffness: 0.2, damping: 0.3}}>
 		<ParallaxLayer rate={0} span={0.6}>
 			<div class="relative fill">
 				<img class="backgroundVideoContainer" src="{differencialBackgroundVideo}" alt="Background"/>
@@ -105,7 +105,7 @@
 				</div>
 			</div>
 		</ParallaxLayer>
-		<ParallaxLayer rate={0} offset={0.575} span={2} class="bg-base-100">
+		<ParallaxLayer rate={0} offset={0.575} span={1} class="bg-base-100">
 			<div class="flex-container">
 				<div class="card lg:card-side bg-base-100 sylvesterTest">
 					<div class="card-body shadow-xl">
diff --git a/src/routes/pricing/+page.svelte b/src/routes/pricing/+page.svelte
index 1b04c06..e9e87be 100644
--- a/src/routes/pricing/+page.svelte
+++ b/src/routes/pricing/+page.svelte
@@ -2,9 +2,111 @@
     // Script
 </script>
 
-<div>
- <!-- html -->
-</div>
+<main>
+    <div class="topbar"></div>
+    <div class="ads"></div>
+
+    <div class="content flex justify-center space-x-4 ">
+        <div class="card-container fullcontainer">
+            <div class="card w-96 shadow-xl bg-primary  ">
+                <figure class="px-10 pt-10 ">
+                  <img
+                    src="https://i.redd.it/cxr3m537py6d1.jpeg"
+                    alt="Shoes"
+                    class="rounded-xl photo-card" />
+                </figure>
+                <div class="card-body items-center textbox-container">
+                  <h2 class="card-title">Enterprise</h2>
+                  <h1> Contact Us </h1>
+                  <div class="card-actions">
+                    <button class="btn btn-lg btn-secondary">Get Enterprise Usage</button>
+                  </div>
+                  <div class="textbox-container-decription">
+                    <p class="big">Access to all features</p>
+                    <p class="big">Access to an self-aware AI Girlfriend</p>
+                    <p class="big">Access to private calls us everyday!</p>
+                    <p class="big">Access to 1 Novemdecillion GB's of data</p>
+                  </div>
+                </div>
+              </div>
+          </div>
+          <div class="card-container fullcontainer">
+            <div class="card w-96 shadow-xl bg-primary">
+                <figure class="px-10 pt-10 ">
+                  <img
+                    src="https://preview.redd.it/oh-hell-nah-v0-uflg6j7q8p6d1.jpeg?width=614&format=pjpg&auto=webp&s=27d308a5b6e203b3c06bab79320b003c90bda466"
+                    alt="Shoes"
+                    class="rounded-xl photo-card" />
+                </figure>
+                <div class="card-body items-center textbox-container">
+                  <h2 class="card-title">Profesional</h2>
+                  <h1> 0.00$ /month </h1>
+                  <div class="card-actions">
+                    <button class="btn btn-lg btn-secondary">Get Profesional Usage</button>
+                  </div>
+                  <div class="textbox-container-decription">
+                    <p class="big">Access to all features</p>
+                    <p class="big">Access to an machine learning AI</p>
+                    <p class="big">Access to all of the CIA secrets</p>
+                    <p class="big">Access to 1 Septillion GB's of data</p>
+                  </div>
+                </div>
+              </div>
+          </div>
+          <div class="card-container fullcontainer ">
+            <div class="card w-96 shadow-xl bg-primary  ">
+                <figure class="px-10 pt-10 ">
+                  <img
+                    src="https://i.redd.it/fp2psppzqm6d1.jpeg"
+                    alt="Shoes"
+                    class="rounded-xl photo-card" />
+                </figure>
+                <div class="card-body items-center textbox-container">
+                  <h2 class="card-title">Profeional lite</h2>
+                  <h1> 0$ /month </h1>
+                  <div class="card-actions">
+                    <button class="btn btn-lg btn-secondary">Get Profeional Lite Usage</button>
+                  </div>
+                  <div class="textbox-container-decription">
+                    <p class="big ">Access to all features</p>
+                    <p class="big">Access to blink while using the app</p>
+                    <p class="big">Access to not talk to girls </p>
+                    <p class="big">Access to 1 Quadrillion GB's of data</p>
+                  </div>
+                </div>
+              </div>
+          </div>
+          <div class="card-container fullcontainer">
+            <div class="card w-96 shadow-xl bg-primary  ">
+                <figure class="px-10 pt-10 ">
+                  <img
+                    src="https://preview.redd.it/hell-ye-jigsaw-you-a-goat-v0-qrhlgbaanu5d1.jpeg?width=961&format=pjpg&auto=webp&s=5dfd92e329eaef4353398c16313c38f65c755983"
+                    alt="Shoes"
+                    class="rounded-xl photo-card" />
+                </figure>
+                <div class="card-body items-center textbox-container">
+                  <h2 class="card-title">Personal usage</h2>
+                  <h1> Free </h1>
+                  <div class="card-actions">
+                    <button class="btn btn-lg btn-secondary">Get Personal Usage</button>
+                  </div>
+                  <div class="textbox-container-decription ">
+                    <p class="big">Access to all features</p>
+                    <p class="big">Access to breath while using the app</p>
+                    <p class="big">Access to eat while mathing</p>
+                    <p class="big">Access to 1 billion GB's of data</p>
+                  </div>
+                </div>
+              </div>
+          </div>
+
+
+    </div>
+    
+
+    <div class="sidebar"></div>
+    <div class="footer"></div>
+</main>
 
 <style>
    main{   
@@ -20,4 +122,69 @@
     align-items: center;
    }
 
+   
+   .topbar {
+        grid-area: topbar;
+        
+        text-align: center;
+        padding: 10px;
+    }
+
+    .ads {
+        grid-area: ads;
+        
+        text-align: center;
+        padding: 10px;
+    }
+
+    .content {
+        grid-area: content;
+
+        text-align: center;
+        padding: 10px;
+        
+    }
+
+    .sidebar {
+        grid-area: sidebar;
+        
+        text-align: center;
+        padding: 10px;
+    }
+
+    .footer {
+        grid-area: footer;
+        
+        text-align: center;
+        padding: 10px;
+    }
+
+    .fullcontainer{
+      outline: 3px solid black;
+      border-radius: 15px;
+    }
+
+    .photo-card {
+      height: 200px;
+      width: 300px;
+      outline: 3px solid black;
+      border-radius: 15px;
+
+    }
+
+    .textbox-container {
+      height: 700px;
+      
+    }
+
+    .textbox-container-decription {
+
+      text-align: justify;
+    }
+
+    p.big {
+    line-height: 4;
+    }
+
+
 </style>
\ No newline at end of file