Nehaparakh

src/lib/apps/app4/components/About.svelte

@@ -0,0 +1,86 @@
+<svelte:head>
+	<title>Neha's Boutique</title>
+	<meta name="description" content="About this app" />
+</svelte:head>
+
+<div class="text-black text-lg about">
+
+    <h1 class="heading">Welcome To Neha's Boutique</h1>
+
+    <div class="section">
+    <p class="para">A woman’s wardrobe is her opportunity to stand out and make a lasting first impression. Launched in 2012, Neha's boutique offers a wide range of apparel to fit any woman’s unique sense of style.
+
+    Our clothing and accessories are carefully curated to provide our customers the latest fashions. To keep our customers in style we post new arrivals daily, as well as offer stylist picks to help any indecisive shoppers.
+    Neha's boutique is a fashionista’s best place to create the perfect wardrobe. <br>
+
+<br>
+
+If you are a first-time visitor or long-standing customer, we hope you will be thrilled with every aspect of your Impressions shopping experience.</p>
+
+    <img src="https://thumbs.dreamstime.com/b/boutique-view-interior-34493816.jpg" alt="dresses">
+    </div>
+
+<div class="section section-middle">
+    <p class="para">Neha's boutique is India’s driving fashion store and home to the eponymous brand. A by-and-by curated determination of brands that are connected by a mix of tender loving care, quality, and craftsmanship. <br>
+    <br>We pride ourselves on the learning and dimension of administration offered, particularly the network worked around the store.</p>
+
+<img src="https://images.unsplash.com/photo-1612423284934-2850a4ea6b0f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8Ym91dGlxdWV8ZW58MHx8MHx8fDA%3D&w=1000&q=80" alt="dresses">
+</div>
+
+<div class="section">
+    <p class="para">Beyond helping you look your best, Neha's boutique strives to make every purchase a positive experience. 
+Our top priorities are excellent customer service, exceptionally quick order processing, ultra fast shipping times, 
+and a hassle-free return policy. <br>
+<br>We value your feedback, whether positive or constructive and we are continuously working to improve your experience.</p>
+
+<img src="https://upload.wikimedia.org/wikipedia/commons/9/9f/Holt_Renfrew_Mannequins.jpg" alt="dresses">
+
+</div>
+</div>
+
+<style>
+
+.about{
+    background: url("https://cdn.pnghd.pics/data/823/purple-soft-5.jpg");
+    background-size:cover;
+
+
+}
+    .heading{
+        font-weight: bold;
+         background: linear-gradient(to right, #360167, #6b0772, #af1281, #cf268a, #e65c9c, #fb8cab);
+            -webkit-text-fill-color: transparent;
+            -webkit-background-clip: text;
+        text-align: center;
+     padding: 20px;
+        font-size: 40px;
+        font-family: garamond, sans-serif;
+        font-style: italic;
+    }
+
+    .para{
+        padding: 10px; 
+    }
+
+    .section{
+        display: flex;
+        justify-content: space-evenly;
+        align-items: center;
+        padding: 10px;
+        margin: auto;
+max-width:80%;
+    }
+
+.section-middle{
+    flex-direction:row-reverse;
+}
+
+img{
+    border: 2px solid black;
+    border-radius: 20px;
+    width:300px;
+    height:300px;
+
+}
+
+</style>

src/lib/apps/app4/components/ContactUs.svelte

@@ -0,0 +1,64 @@
+<div class="contact">
+<h1 class="contactus">Got queries?? Send your message and we will reach out to you!</h1>
+<div class="mx-auto mt-10 flex object-center box">
+    <input class="input" type="text" name="name" placeholder="Enter Your Name">
+    <input class="input" type="number" name="phone" placeholder="Enter Your Phone">
+    <input class="input" type="email" name="email" placeholder="Enter Your Email">
+    <textarea class="input" name="name" cols="30" rows="10" placeholder="Your Message"></textarea>
+
+    <button class="button">Send Message</button>
+</div>
+</div>
+
+<style>
+.contact{
+    background: url("https://cdn.pnghd.pics/data/823/purple-soft-5.jpg");
+    background-size:cover;
+    height:720px;
+
+}
+
+.contactus{
+    text-align:center;
+    background: linear-gradient(to right, #360167, #6b0772, #af1281, #cf268a, #e65c9c, #fb8cab);
+            -webkit-text-fill-color: transparent;
+            -webkit-background-clip: text;
+    padding: 20px;
+    font-size: 30px;
+    font-weight:bold;  
+}
+.box{
+ max-width: 60%;
+display: block;
+justify-content:center;
+align-items:center;
+margin: 5px auto;
+}
+
+.input{
+   width:100%;
+   font-size: 18px;
+margin: 7px;
+border: 2px solid grey;
+border-radius: 6px;
+
+}
+.button{
+    border: 2px solid white;
+    border-radius: 6px;
+margin:8px;
+background-color:#e65c9c;
+width:20%;
+align-items: center;
+padding: 6px 10px;
+
+font-size:18px;
+}
+
+.button:hover{
+    width:22%;
+    height:50px;
+    font-size:20px;
+}
+
+</style>

src/lib/apps/app4/components/Home.svelte

@@ -0,0 +1,68 @@
+<svelte:head>
+	<title>Neha's Boutique</title>
+	<meta name="description" content="About this app" />
+</svelte:head>
+
+<script>
+
+	const carouselPhotos = [
+		'https://static3.azafashions.com/uploads/banner_templates/festive-shop_1-1-min-0661165001691734315.gif',
+		'https://static3.azafashions.com/uploads/banner_templates/1-6_most-popular-styles-0699311001691668962.jpg',
+		'https://static3.azafashions.com/uploads/banner_templates/1-7_sureena-chowdhri-0188154001691669074.jpg'
+	]
+
+	let index = 0
+
+	const next = () => {
+		index = (index + 1) % carouselPhotos.length;
+		  console.log("Next button clicked");
+	}
+
+const previous = () => {
+ index = (index - 1 + carouselPhotos.length) % carouselPhotos.length;
+  }
+
+</script>
+
+
+<div class="container">
+
+	<img src= {carouselPhotos[index]}  alt="carousel" />	
+
+<button class="button" on:click={next}>></button>
+<button class="button-previous" on:click={previous}>&lt;</button>
+
+</div>
+
+
+<style>	
+.container{
+	max-width:100%;
+	height:715px;
+}
+
+img{
+	height:82%;
+	width:100%
+}
+
+.button{
+cursor:pointer;
+color:white;
+font-size:50px;
+margin-left:1550px;
+margin-top:300px;
+}
+
+.button-previous{
+cursor:pointer;
+color:white;
+font-size:50px;
+margin-left:30px;
+margin-top:300px;
+}
+
+img, button {
+		position: absolute;
+	}
+</style>

src/lib/apps/app4/components/ProductCard.svelte

@@ -0,0 +1,146 @@
+<svelte:head>
+	<title>Neha's Boutique</title>
+	<meta name="description" content="products of this app" />
+</svelte:head>
+
+<script>
+    const products=[
+        {
+            id:1,
+            name:'Gota embroidered kaftan',
+            image: "https://static3.azafashions.com/tr:w-575.0,dpr-2/uploads/product_gallery/1691505184913_1.jpg",
+            price: 24900,
+        },
+        {
+            id:2,
+            name:'Pre-draped sharara saree with floral print blouse',
+            image: "https://static3.azafashions.com/tr:w-575.0,dpr-2/uploads/product_gallery/1691130973243_1.jpg",
+            price: 28000,
+        },
+        {
+            id:3,
+            name:'Geometric print lehnga blouse set',
+            image: "https://static3.azafashions.com/tr:w-575.0,dpr-2/uploads/product_gallery/1691834091123_1.JPG",
+            price: 57500,
+        },
+        {
+            id:4,
+            name:'Embroidered chanderi kurta gharara set',
+            image: "https://static3.azafashions.com/tr:w-575.0,dpr-2/uploads/product_gallery/1692014824002_1.jpg",
+            price: 14990,
+        },
+        {
+            id:5,
+            name:'Assymetric embroidered kurta pant set',
+            image: "https://static3.azafashions.com/tr:w-575.0,dpr-2/uploads/product_gallery/1692186452384_1.jpg",
+            price: 39500,
+        },
+        {
+            id:6,
+            name:'Bandhani print anarkali sharara set',
+            image: "https://static3.azafashions.com/tr:w-575.0,dpr-2/uploads/product_gallery/1690211121391_1.jpg",
+            price: 22800,
+        },
+        {
+            id:7,
+            name:'Border embroidered cape lehenga set',
+            image: "https://static3.azafashions.com/tr:w-575.0,dpr-2/uploads/product_gallery/1689942355625_1.jpg",
+            price: 42500,
+        },
+        {
+            id:8,
+            name:'Beryl embroidered lehenga set with jacket',
+            image: "https://static3.azafashions.com/tr:w-575.0,dpr-2/uploads/product_gallery/1691078770278_1.jpg",
+            price: 25560,
+        },
+        {
+            id:9,
+            name:'Mohak garden print kurta with pant',
+            image: "https://static3.azafashions.com/tr:w-575.0,dpr-2/uploads/product_gallery/1689949297465_1.jpg",
+            price: 17000,
+        },
+        {
+            id:10,
+            name:'Baltimore printed top and pant set',
+            image: "https://static3.azafashions.com/tr:w-575.0,dpr-2/uploads/product_gallery/1691498687152_1.jpg",
+            price: 16500,
+        },
+        {
+            id:11,
+            name:'Bagh print cape sharara set',
+            image: "https://static3.azafashions.com/tr:w-575.0,dpr-2/uploads/product_gallery/1690364845501_1.jpg",
+            price: 25500,
+        },
+        {
+            id:12,
+            name:'3-D embellished long jacket',
+            image: "https://static3.azafashions.com/tr:w-575.0,dpr-2/uploads/product_gallery/1691426468957_1.jpg",
+            price: 19900,
+        },
+
+    ];
+</script>
+
+<div class="card-container">
+  <div class="product-card">
+
+      <ul class="product-list">
+        {#each products as item}
+            <li class="lists">
+              <img class="product-image"
+                src={item.image}
+                alt="product_image" />
+              <h3>{item.name}</h3>
+              <p>₹ {item.price}</p>
+              <button class="button">Add to Cart</button>
+            </li>
+            {/each}
+        </ul>
+
+  </div>
+</div>
+
+<style>
+  .card-container{
+    display:flex;
+    flex-wrap:wrap;
+    margin-left: 95px;
+    }
+
+.product-image{
+  height:350px;
+  width:250px;
+  margin-left: 25px;
+  margin-top: 5px;
+}
+
+.product-list{
+  margin:10px;
+}
+
+
+  .lists{
+margin:20px;
+
+width:300px;
+font-size:14px;
+display:inline-block;
+text-align: center;
+  }
+
+  .lists:hover{
+    border: 1px solid gray;
+    border-radius: 5px;
+  }
+  .button{
+    border: 2px solid white;
+    border-radius: 6px;
+margin:8px;
+background-color:#e65c9c;
+width:40%;
+align-items: center;
+padding: 6px 10px;
+
+font-size:14px;
+  }
+</style>

src/lib/apps/app4/components/Products.svelte

@@ -0,0 +1,14 @@
+
+
+
+
+<script>
+
+import ProductCard from "./ProductCard.svelte";
+
+</script>
+
+<div id="products">
+    <h1>Products</h1>
+    <ProductCard/>
+</div>

src/lib/apps/app4/components/structure/Body.svelte

@@ -0,0 +1 @@
+<slot/>