Spaces:

ValeriaTrade
/

undefined

Running

App Files Files Community

ValeriaTrade commited on Oct 10, 2025

Commit

215d2e4

verified ·

1 Parent(s): 4563601

change the whole website's font, layout, style and colors as per next instructions: Accent / brand wordmark: subtle serif or stylish script for logos only (Playfair Display or a light script) to add fashion credibility. Hierarchy example: H1 (brand/product): Montserrat Bold 28–36px; Price/CTA: Montserrat SemiBold 18–22px; Body: Roboto Regular 14px. Use all-caps sparingly for CTAs and short overlays.

Browse files

Files changed (2) hide show

product.html +19 -18
terms.html +14 -13

product.html CHANGED Viewed

@@ -12,9 +12,10 @@
             theme: {
                 extend: {
                     colors: {
-                        primary: '#2A2A2A',
-                        secondary: '#F5F5F5',
-                        accent: '#C6A86A'
                     },
                     fontFamily: {
                         sans: ['Roboto', 'sans-serif'],
@@ -34,11 +35,11 @@
         }
     </style>
 </head>
-<body class="bg-secondary text-primary font-sans">
 <!-- Luxe Header -->
-    <header class="bg-secondary border-b border-primary/20 sticky-nav">
-        <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
-            <a href="index.html" class="text-2xl font-serif font-light text-primary tracking-wider">VALERIQUE</a>
 <button id="menu-toggle" class="text-accent hover:text-primary transition-colors">
 <i data-feather="menu"></i>
             </button>
@@ -61,8 +62,8 @@
             <!-- Product Details -->
             <div>
-                <h1 class="text-3xl font-display font-bold text-primary mb-2 tracking-wider">ETERNAL NECKLACE</h1>
-                <p class="text-accent text-2xl font-display font-semibold mb-6">£295 <span class="text-primary/60 line-through text-base ml-2">£350</span></p>
 <div class="mb-6">
                     <div class="flex items-center mb-4">
                         <div class="flex text-accent mr-2">
@@ -74,20 +75,20 @@
                         </div>
                         <span class="text-sm text-primary/60 tracking-widest">(42 REVIEWS)</span>
                     </div>
-                    <p class="text-sm font-display text-accent mb-4 uppercase tracking-widest">ONLY 2 LEFT IN STOCK</p>
-                    <p class="text-primary/80 mb-6">18K gold necklace with diamond accents. Handcrafted by our master jewelers.</p>
 </div>
                 <div class="space-y-4 mb-8">
-                    <button class="w-full bg-accent text-secondary py-4 rounded-none font-display font-semibold hover:bg-accent/90 transition tracking-widest text-sm uppercase">
-                        BUY NOW - £295
                     </button>
-                    <button class="w-full border border-primary text-primary py-4 rounded-none font-display font-semibold hover:bg-primary/10 transition tracking-widest text-sm uppercase">
-                        ADD TO BAG
 </button>
                 </div>
                 <div class="mt-8 pt-8 border-t border-primary/20">
-                    <h3 class="font-display font-bold mb-4 tracking-wider uppercase">DETAILS</h3>
-                    <ul class="text-sm text-primary/80 space-y-2">
 <li>• 18K SOLID GOLD</li>
                         <li>• 0.25CT DIAMONDS</li>
                         <li>• 18" CHAIN LENGTH</li>
@@ -98,7 +99,7 @@
         </div>
     </main>
     <!-- Luxe Contact Button -->
-    <button class="fixed bottom-6 right-6 bg-accent text-secondary rounded-none p-5 shadow-lg hover:bg-accent/90 transition">
 <i data-feather="message-circle"></i>
     </button>

             theme: {
                 extend: {
                     colors: {
+                        primary: '#111111',
+                        secondary: '#FFFFFF',
+                        accent: '#000000',
+                        light: '#F8F8F8'
                     },
                     fontFamily: {
                         sans: ['Roboto', 'sans-serif'],
         }
     </style>
 </head>
+<body class="bg-light text-primary font-sans">
 <!-- Luxe Header -->
+    <header class="bg-white border-b border-primary/10 sticky-nav">
+<div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
+            <a href="index.html" class="text-3xl font-serif font-light text-primary">Valerique</a>
 <button id="menu-toggle" class="text-accent hover:text-primary transition-colors">
 <i data-feather="menu"></i>
             </button>
             <!-- Product Details -->
             <div>
+                <h1 class="text-4xl font-display font-bold text-primary mb-4">Eternal Necklace</h1>
+                <p class="text-accent text-xl font-display font-semibold mb-6">£295 <span class="text-primary/60 line-through text-base ml-2">£350</span></p>
 <div class="mb-6">
                     <div class="flex items-center mb-4">
                         <div class="flex text-accent mr-2">
                         </div>
                         <span class="text-sm text-primary/60 tracking-widest">(42 REVIEWS)</span>
                     </div>
+                    <p class="text-sm font-display text-accent mb-4">Only 2 left in stock</p>
+                    <p class="text-primary/80 mb-6 font-sans">18K gold necklace with diamond accents. Handcrafted by our master jewelers.</p>
 </div>
                 <div class="space-y-4 mb-8">
+                    <button class="w-full bg-accent text-white py-4 font-display font-semibold hover:bg-primary transition text-sm">
+                        Buy Now - £295
                     </button>
+                    <button class="w-full border border-primary text-primary py-4 font-display font-semibold hover:bg-primary/5 transition text-sm">
+                        Add to Bag
 </button>
                 </div>
                 <div class="mt-8 pt-8 border-t border-primary/20">
+                <h3 class="font-display font-bold mb-4">Details</h3>
+<ul class="text-sm text-primary/80 space-y-2">
 <li>• 18K SOLID GOLD</li>
                         <li>• 0.25CT DIAMONDS</li>
                         <li>• 18" CHAIN LENGTH</li>
         </div>
     </main>
     <!-- Luxe Contact Button -->
+    <button class="fixed bottom-6 right-6 bg-accent text-white p-4 shadow-sm hover:bg-primary transition">
 <i data-feather="message-circle"></i>
     </button>

terms.html CHANGED Viewed

@@ -11,9 +11,10 @@
             theme: {
                 extend: {
                     colors: {
-                        primary: '#2A2A2A',
-                        secondary: '#F5F5F5',
-                        accent: '#C6A86A'
                     },
                     fontFamily: {
                         sans: ['Roboto', 'sans-serif'],
@@ -23,14 +24,14 @@
                 }
             }
         }
-    </script>
 <script src="https://unpkg.com/feather-icons"></script>
 </head>
-<body class="bg-secondary font-sans">
-    <!-- Minimal Header -->
     <header class="bg-white shadow-sm border-b border-primary/10">
 <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
-            <a href="index.html" class="text-2xl font-serif font-light text-primary tracking-wider">VALERIQUE</a>
 <div class="flex items-center space-x-4">
                 <a href="contact.html" class="text-gray-600 hover:text-primary">Contact</a>
                 <a href="#" class="text-gray-600 hover:text-primary"><i data-feather="shopping-bag"></i></a>
@@ -40,11 +41,11 @@
     <!-- Terms Content -->
     <main class="max-w-4xl mx-auto px-4 py-12">
-        <h1 class="text-3xl font-display font-bold text-center text-primary mb-12">TERMS & CONDITIONS</h1>
-        <div class="bg-white p-8 rounded-lg shadow-sm border border-primary/10">
 <div class="prose max-w-none">
-                <h2 class="text-xl font-display font-bold mb-4">1. General Information</h2>
-                <p class="mb-6 text-primary/90">These Terms and Conditions ("Terms") govern your use of the VALERIQUE website operated by VALERIA TRADE LTD ("us", "we", or "our"). Please read these Terms carefully before using our website.</p>
                 <h2 class="text-xl font-display font-bold mb-4">2. Intellectual Property</h2>
                 <p class="mb-6 text-primary/90">The website and its original content, features, and functionality are owned by VALERIA TRADE LTD and are protected by international copyright, trademark, patent, trade secret, and other intellectual property or proprietary rights laws.</p>
                 <h2 class="text-xl font-display font-bold mb-4">3. Products</h2>
@@ -66,8 +67,8 @@
     <!-- Minimal Footer -->
     <footer class="bg-white border-t border-gray-200 py-8 px-4">
         <div class="max-w-7xl mx-auto text-center">
-            <p class="text-primary/60 mb-4">© 2023 VALERIA TRADE LTD. All rights reserved.</p>
-            <div class="flex justify-center space-x-6">
                 <a href="privacy.html" class="text-primary/60 hover:text-accent transition">Privacy Policy</a>
                 <a href="returns.html" class="text-primary/60 hover:text-accent transition">Returns & Exchanges</a>
                 <a href="contact.html" class="text-primary/60 hover:text-accent transition">Contact Us</a>

             theme: {
                 extend: {
                     colors: {
+                        primary: '#111111',
+                        secondary: '#FFFFFF',
+                        accent: '#000000',
+                        light: '#F8F8F8'
                     },
                     fontFamily: {
                         sans: ['Roboto', 'sans-serif'],
                 }
             }
         }
+</script>
 <script src="https://unpkg.com/feather-icons"></script>
 </head>
+<body class="bg-light font-sans">
+<!-- Minimal Header -->
     <header class="bg-white shadow-sm border-b border-primary/10">
 <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
+            <a href="index.html" class="text-3xl font-serif font-light text-primary">Valerique</a>
 <div class="flex items-center space-x-4">
                 <a href="contact.html" class="text-gray-600 hover:text-primary">Contact</a>
                 <a href="#" class="text-gray-600 hover:text-primary"><i data-feather="shopping-bag"></i></a>
     <!-- Terms Content -->
     <main class="max-w-4xl mx-auto px-4 py-12">
+        <h1 class="text-4xl font-display font-bold text-center text-primary mb-12">Terms & Conditions</h1>
+<div class="bg-white p-8 rounded-lg shadow-sm border border-primary/10">
 <div class="prose max-w-none">
+                <h2 class="text-2xl font-display font-bold mb-4">1. General Information</h2>
+<p class="mb-6 text-primary/90">These Terms and Conditions ("Terms") govern your use of the VALERIQUE website operated by VALERIA TRADE LTD ("us", "we", or "our"). Please read these Terms carefully before using our website.</p>
                 <h2 class="text-xl font-display font-bold mb-4">2. Intellectual Property</h2>
                 <p class="mb-6 text-primary/90">The website and its original content, features, and functionality are owned by VALERIA TRADE LTD and are protected by international copyright, trademark, patent, trade secret, and other intellectual property or proprietary rights laws.</p>
                 <h2 class="text-xl font-display font-bold mb-4">3. Products</h2>
     <!-- Minimal Footer -->
     <footer class="bg-white border-t border-gray-200 py-8 px-4">
         <div class="max-w-7xl mx-auto text-center">
+            <p class="text-primary/60 mb-4">© 2023 Valeria Trade Ltd. All rights reserved.</p>
+<div class="flex justify-center space-x-6">
                 <a href="privacy.html" class="text-primary/60 hover:text-accent transition">Privacy Policy</a>
                 <a href="returns.html" class="text-primary/60 hover:text-accent transition">Returns & Exchanges</a>
                 <a href="contact.html" class="text-primary/60 hover:text-accent transition">Contact Us</a>