Spaces:

amoslain
/

fountainsofgrowth

Running

App Files Files Community

amoslain commited on Jan 14

Commit

d778f83

verified ·

1 Parent(s): fd7fe2a

CAN YOU MAKE IT more proffesional?

Browse files

Files changed (3) hide show

components/navbar.js +61 -0
index.html +28 -73
style.css +173 -17

components/navbar.js ADDED Viewed

	@@ -0,0 +1,61 @@

+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        nav {
+          background: var(--primary-dark);
+          color: white;
+          padding: 1rem 2rem;
+          position: fixed;
+          width: 100%;
+          top: 0;
+          z-index: 1000;
+          box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        .nav-container {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          max-width: 1200px;
+          margin: 0 auto;
+        }
+        .logo {
+          font-size: 1.5rem;
+          font-weight: 700;
+        }
+        .nav-links {
+          display: flex;
+          gap: 2rem;
+        }
+        .nav-links a {
+          color: white;
+          text-decoration: none;
+          font-weight: 500;
+          transition: all 0.3s ease;
+        }
+        .nav-links a:hover {
+          color: var(--accent-light);
+        }
+        @media (max-width: 768px) {
+          .nav-links {
+            display: none;
+          }
+        }
+      </style>
+      <nav>
+        <div class="nav-container">
+          <div class="logo">שירה טרי</div>
+          <div class="nav-links">
+            <a href="/">בית</a>
+            <a href="#about">אודות</a>
+            <a href="#services">שירותים</a>
+            <a href="#testimonials">לקוחות</a>
+            <a href="#contact">צור קשר</a>
+          </div>
+        </div>
+      </nav>
+    `;
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html CHANGED Viewed

@@ -6,70 +6,31 @@
     <title>שירה טרי - מעיינות של צמיחה</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <style>
-        @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap');
-        body {
-            font-family: 'Rubik', sans-serif;
-            background-color: #fdf2f8;
-        }
-        .hero-section {
-            background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
-                        url('https://m-il.co.il/wp-content/uploads/2024/09/logo-2.jpg');
-            background-size: cover;
-            background-position: center;
-        }
-        .testimonial-card {
-            transition: transform 0.3s ease;
-        }
-        .testimonial-card:hover {
-            transform: translateY(-5px);
-        }
-        .floating-btn {
-            animation: float 3s ease-in-out infinite;
-        }
-        @keyframes float {
-            0% { transform: translateY(0px); }
-            50% { transform: translateY(-10px); }
-            100% { transform: translateY(0px); }
-        }
-        .hebrew-text {
-            direction: rtl;
-            text-align: right;
-        }
-    </style>
 </head>
-<body class="hebrew-text">
     <!-- Hero Section -->
-    <section class="hero-section py-20 px-4 md:px-10 lg:px-20">
-        <div class="container mx-auto flex flex-col items-center text-center">
-            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-pink-800 mb-6">שירה טרי</h1>
-            <h2 class="text-3xl md:text-4xl lg:text-5xl font-semibold text-pink-700 mb-8">מעיינות של צמיחה</h2>
-            <p class="text-xl md:text-2xl text-gray-700 mb-10 max-w-3xl">בואי לגלות כיצד לצמוח מבפנים דרך טיפול רגשי קצר-מועד בגישה המשלבת טיפול במודע ובתת-מודע</p>
-            <div class="flex flex-wrap justify-center gap-6 mb-12">
-                <span class="px-6 py-3 bg-emerald-100 text-emerald-800 rounded-full font-medium">אימון</span>
-                <span class="px-6 py-3 bg-amber-100 text-amber-800 rounded-full font-medium">טיפול רגשי</span>
-                <span class="px-6 py-3 bg-rose-100 text-rose-800 rounded-full font-medium">סדנאות</span>
             </div>
-            <div class="text-4xl md:text-5xl font-bold text-pink-600 tracking-wider mb-10">מ ע י י נ ו ת ש ל צ מ י ח ה</div>
-            <a href="#contact" class="floating-btn bg-pink-600 hover:bg-pink-700 text-white px-8 py-4 rounded-full text-lg font-semibold shadow-lg transition duration-300">
                 צרי קשר עוד היום <i class="fas fa-arrow-left ml-2"></i>
             </a>
-        </div>
     </section>
     <!-- Introduction Section -->
-    <section class="py-16 px-4 md:px-10 lg:px-20 bg-white">
-        <div class="https://m-il.co.il/wp-content/uploads/2024/09/logo-2.jpg">
             <div class="md:w-1/2">
                 <h3 class="text-2xl md:text-3xl font-bold text-gray-800 mb-6">היי את,</h3>
                 <p class="text-lg text-gray-700 mb-6">
@@ -87,10 +48,9 @@
             </div>
         </div>
     </section>
     <!-- Benefits Section -->
-    <section class="py-16 px-4 md:px-10 lg:px-20 bg-pink-50">
-        <div class="container mx-auto">
             <h2 class="text-3xl md:text-4xl font-bold text-center text-emerald-800 mb-16">איך הטיפול יכול לעזור לך?</h2>
             <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
@@ -140,10 +100,9 @@
             </div>
         </div>
     </section>
     <!-- About Me Section -->
-    <section class="py-16 px-4 md:px-10 lg:px-20 bg-white">
-        <div class="container mx-auto flex flex-col md:flex-row items-center">
             <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
                 <img src="https://m-il.co.il/wp-content/uploads/2024/09/logo-2.jpg"
                      alt="שירה טרי" class="rounded-lg shadow-xl w-full h-auto">
@@ -168,10 +127,9 @@
             </div>
         </div>
     </section>
     <!-- Testimonials Section -->
-    <section class="py-16 px-4 md:px-10 lg:px-20 bg-purple-50">
-        <div class="container mx-auto">
             <h2 class="text-3xl md:text-4xl font-bold text-center text-amber-800 mb-16">מה אומרים על הטיפול הרגשי והסדנאות</h2>
             <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
@@ -216,10 +174,9 @@
             </div>
         </div>
     </section>
     <!-- Services Section -->
-    <section class="py-16 px-4 md:px-10 lg:px-20 bg-white">
-        <div class="container mx-auto">
             <h2 class="text-3xl md:text-4xl font-bold text-center text-emerald-800 mb-16">השירותים שלי</h2>
             <div class="grid md:grid-cols-3 gap-8">
@@ -270,10 +227,9 @@
             </div>
         </div>
     </section>
     <!-- Contact Section -->
-    <section id="contact" class="py-16 px-4 md:px-10 lg:px-20 bg-pink-800 text-white">
-        <div class="container mx-auto">
             <h2 class="text-3xl md:text-4xl font-bold text-center mb-6">למידע נוסף על שיטת הטיפול קצרת המועד</h2>
             <p class="text-xl text-center mb-12 max-w-3xl mx-auto">המיושמת בקליניקה, אל תוותרי על עצמך - צרי קשר עוד היום</p>
@@ -298,10 +254,9 @@
             </div>
         </div>
     </section>
     <!-- Footer -->
-    <footer class="py-8 px-4 bg-pink-800 text-white text-center">
-        <div class="container mx-auto">
             <p>© 2025 שירה טרי - מעיינות של צמיחה. כל הזכויות שמורות.</p>
             <div class="flex justify-center mt-4 space-x-6">
                 <a href="#" class="text-white hover:text-pink-300">

     <title>שירה טרי - מעיינות של צמיחה</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="style.css">
 </head>
+<body>
     <!-- Hero Section -->
+    <section class="hero-section bg-gradient-to-r from-primary to-primary-dark text-white py-20">
+<div class="container mx-auto flex flex-col items-center text-center">
+            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">שירה טרי</h1>
+            <h2 class="text-3xl md:text-4xl lg:text-5xl font-semibold mb-8">מעיינות של צמיחה</h2>
+            <p class="text-xl md:text-2xl mb-10 max-w-3xl">בואי לגלות כיצד לצמוח מבפנים דרך טיפול רגשי קצר-מועד בגישה המשלבת טיפול במודע ובתת-מודע</p>
+            <div class="flex flex-wrap justify-center gap-4 mb-12">
+                <span class="px-4 py-2 bg-white bg-opacity-20 rounded-full font-medium">אימון</span>
+                <span class="px-4 py-2 bg-white bg-opacity-20 rounded-full font-medium">טיפול רגשי</span>
+                <span class="px-4 py-2 bg-white bg-opacity-20 rounded-full font-medium">סדנאות</span>
             </div>
+            <div class="text-4xl md:text-5xl font-bold tracking-wider mb-10 opacity-90">מ ע י י נ ו ת ש ל צ מ י ח ה</div>
+            <a href="#contact" class="btn btn-secondary px-8 py-4 text-lg">
                 צרי קשר עוד היום <i class="fas fa-arrow-left ml-2"></i>
             </a>
+</div>
     </section>
     <!-- Introduction Section -->
+    <section class="section bg-white">
+<div class="https://m-il.co.il/wp-content/uploads/2024/09/logo-2.jpg">
             <div class="md:w-1/2">
                 <h3 class="text-2xl md:text-3xl font-bold text-gray-800 mb-6">היי את,</h3>
                 <p class="text-lg text-gray-700 mb-6">
             </div>
         </div>
     </section>
     <!-- Benefits Section -->
+    <section class="section bg-gray-50">
+<div class="container mx-auto">
             <h2 class="text-3xl md:text-4xl font-bold text-center text-emerald-800 mb-16">איך הטיפול יכול לעזור לך?</h2>
             <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
             </div>
         </div>
     </section>
     <!-- About Me Section -->
+    <section class="section bg-white">
+<div class="container mx-auto flex flex-col md:flex-row items-center">
             <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
                 <img src="https://m-il.co.il/wp-content/uploads/2024/09/logo-2.jpg"
                      alt="שירה טרי" class="rounded-lg shadow-xl w-full h-auto">
             </div>
         </div>
     </section>
     <!-- Testimonials Section -->
+    <section class="section bg-light">
+<div class="container mx-auto">
             <h2 class="text-3xl md:text-4xl font-bold text-center text-amber-800 mb-16">מה אומרים על הטיפול הרגשי והסדנאות</h2>
             <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
             </div>
         </div>
     </section>
     <!-- Services Section -->
+    <section class="section bg-white">
+<div class="container mx-auto">
             <h2 class="text-3xl md:text-4xl font-bold text-center text-emerald-800 mb-16">השירותים שלי</h2>
             <div class="grid md:grid-cols-3 gap-8">
             </div>
         </div>
     </section>
     <!-- Contact Section -->
+    <section id="contact" class="section bg-primary text-white">
+<div class="container mx-auto">
             <h2 class="text-3xl md:text-4xl font-bold text-center mb-6">למידע נוסף על שיטת הטיפול קצרת המועד</h2>
             <p class="text-xl text-center mb-12 max-w-3xl mx-auto">המיושמת בקליניקה, אל תוותרי על עצמך - צרי קשר עוד היום</p>
             </div>
         </div>
     </section>
     <!-- Footer -->
+    <footer class="py-8 bg-primary-dark text-white text-center">
+<div class="container mx-auto">
             <p>© 2025 שירה טרי - מעיינות של צמיחה. כל הזכויות שמורות.</p>
             <div class="flex justify-center mt-4 space-x-6">
                 <a href="#" class="text-white hover:text-pink-300">

style.css CHANGED Viewed

@@ -1,28 +1,184 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
 .card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+:root {
+    --primary: #6d28d9;
+    --primary-light: #8b5cf6;
+    --primary-dark: #4c1d95;
+    --secondary: #10b981;
+    --secondary-light: #34d399;
+    --secondary-dark: #059669;
+    --accent: #ec4899;
+    --accent-light: #f472b6;
+    --accent-dark: #db2777;
+    --light: #f8fafc;
+    --dark: #1e293b;
+    --gray: #64748b;
+    --gray-light: #e2e8f0;
+}
 body {
+    font-family: 'Rubik', sans-serif;
+    line-height: 1.6;
+    color: var(--dark);
+    background-color: var(--light);
+    direction: rtl;
+}
+h1, h2, h3, h4, h5, h6 {
+    font-weight: 700;
+    line-height: 1.3;
+    color: var(--primary-dark);
+}
+a {
+    color: var(--primary);
+    text-decoration: none;
+    transition: all 0.3s ease;
+}
+a:hover {
+    color: var(--primary-light);
+}
+.container {
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 1.5rem;
+}
+.btn {
+    display: inline-block;
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.375rem;
+    font-weight: 600;
+    text-align: center;
+    transition: all 0.3s ease;
+}
+.btn-primary {
+    background-color: var(--primary);
+    color: white;
+}
+.btn-primary:hover {
+    background-color: var(--primary-light);
+    transform: translateY(-2px);
+}
+.btn-secondary {
+    background-color: var(--secondary);
+    color: white;
+}
+.btn-secondary:hover {
+    background-color: var(--secondary-light);
+    transform: translateY(-2px);
 }
+.section {
+    padding: 5rem 0;
 }
+.section-title {
+    font-size: 2.5rem;
+    margin-bottom: 3rem;
+    text-align: center;
+    position: relative;
+}
+.section-title:after {
+    content: '';
+    display: block;
+    width: 80px;
+    height: 4px;
+    background: var(--primary);
+    margin: 1rem auto 0;
 }
 .card {
+    background: white;
+    border-radius: 0.5rem;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+    transition: all 0.3s ease;
+    overflow: hidden;
+}
+.card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
+}
+.card-img {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+}
+.card-body {
+    padding: 1.5rem;
+}
+.text-center {
+    text-align: center;
+}
+.mb-0 {
+    margin-bottom: 0;
+}
+.py-3 {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+}
+.px-4 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+.bg-light {
+    background-color: var(--light);
+}
+.bg-primary {
+    background-color: var(--primary);
+    color: white;
+}
+.text-primary {
+    color: var(--primary);
+}
+.text-secondary {
+    color: var(--secondary);
+}
+.text-accent {
+    color: var(--accent);
+}
+.font-bold {
+    font-weight: 700;
+}
+.rounded-lg {
+    border-radius: 0.5rem;
+}
+.shadow-md {
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+.transition {
+    transition: all 0.3s ease;
 }
+@media (max-width: 768px) {
+    .section {
+        padding: 3rem 0;
+    }
+    .section-title {
+        font-size: 2rem;
+    }
 }