2026-03-09 03:35:50 +00:00
3 changed files with 55 additions and 37 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,46 +1,41 @@
 import type { Metadata } from "next";
-import { Halant } from "next/font/google";
 import { Inter } from "next/font/google";
-import { Poppins } from "next/font/google";
-import "./globals.css";
-import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";
-
-const halant = Halant({
-  variable: "--font-halant",  subsets: ["latin"],
-  weight: ["300", "400", "500", "600", "700"],
-});
+import "./styles/variables.css";
+import "./styles/base.css";

 const inter = Inter({
  variable: "--font-inter",  subsets: ["latin"],
 });

-const poppins = Poppins({
-  variable: "--font-poppins",  subsets: ["latin"],
-  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
-});
-
 export const metadata: Metadata = {
-  title: "PhloetiQ Custom Oils | Premium Fragrance Oils Crafted for You",  description: "Discover artisan-crafted custom fragrance oils inspired by luxury perfumes. Personalize your scent with PhloetiQ's expert blending and premium ingredients.",  keywords: "custom fragrance, fragrance oils, perfume, luxury scent, artisan oils, custom blend, personalized fragrance",  openGraph: {
-    title: "PhloetiQ Custom Oils | Premium Custom Fragrance Oils",    description: "Craft your signature scent with our custom fragrance oils. Luxury, personalized, and long-lasting.",    type: "website",    siteName: "PhloetiQ Custom Oils"},
-  twitter: {
-    card: "summary_large_image",    title: "PhloetiQ Custom Oils | Custom Fragrance Oils",    description: "Experience luxury fragrance crafted just for you"},
-};
+  title: "PhloetiQ Custom Oils - Premium Fragrance Blending",  description: "Craft your perfect fragrance with PhloetiQ Custom Oils. Luxury custom oil blending with 500+ unique blends."};

 export default function RootLayout({
  children,
-}: Readonly<{
+}: {
  children: React.ReactNode;
-}>) {
+}) {
  return (
    <html lang="en" suppressHydrationWarning>
-      <ServiceWrapper>
-        <body
-          className={`${halant.variable} ${inter.variable} ${poppins.variable} antialiased`}
-        >
-          <Tag />
-          {children}
-        
+      <body className={`${inter.variable}`}>
+        <script
+          dangerously-set-inner-html={{
+            __html: `
+              (function() {
+                try {
+                  const vw = window.innerWidth * 0.01;
+                  document.documentElement.style.setProperty('--vw', vw + 'px');
+                  window.addEventListener('resize', () => {
+                    const vw = window.innerWidth * 0.01;
+                    document.documentElement.style.setProperty('--vw', vw + 'px');
+                  });
+                } catch (e) {}
+              })();
+            `,
+          }}
+        />
+        {children}
+      
        <script
          dangerouslySetInnerHTML={{
            __html: `
@@ -1408,7 +1403,6 @@ export default function RootLayout({
          }}
        />
      </body>
-      </ServiceWrapper>
    </html>
  );
 }
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -23,7 +23,7 @@ export default function LandingPage() {
      cardStyle="glass-elevated"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="solid"
-      headingFontWeight="light"
+      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
@@ -87,6 +87,10 @@ export default function LandingPage() {
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
+          textBoxTitleClassName="text-4xl font-semibold tracking-tight"
+          textBoxDescriptionClassName="text-lg font-light opacity-85"
+          cardClassName="relative overflow-hidden rounded-2xl shadow-2xl hover:shadow-3xl transition-all duration-500"
+          imageClassName="w-full h-full object-cover"
        />
      </div>

@@ -107,6 +111,12 @@ export default function LandingPage() {
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
+          textBoxTitleClassName="text-4xl font-semibold tracking-tight"
+          textBoxDescriptionClassName="text-lg font-light opacity-85"
+          cardTitleClassName="text-2xl font-semibold"
+          cardDescriptionClassName="text-base font-light opacity-90"
+          cardClassName="relative overflow-hidden rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-500 backdrop-blur-sm"
+          imageClassName="w-full h-full object-cover"
        />
      </div>

@@ -123,6 +133,12 @@ export default function LandingPage() {
            { id: "3", title: "Finally, A Fragrance Unique to Me", quote: "The consultation process was wonderful. The team really listened to what I wanted and created something that feels entirely personal. I'm a customer for life!", name: "Emma Rodriguez", role: "Designer", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=3", imageAlt: "Emma Rodriguez" },
            { id: "4", title: "Exceptional Customer Experience", quote: "From concept to delivery, everything about PhloetiQ exceeded my expectations. The customer service is warm, the product is premium, and the value is unmatched.", name: "Michael Torres", role: "CEO", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=4", imageAlt: "Michael Torres" }
          ]}
+          textBoxTitleClassName="text-4xl font-semibold tracking-tight"
+          textBoxDescriptionClassName="text-lg font-light opacity-85"
+          quoteCardClassName="relative overflow-hidden rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-500 p-8 backdrop-blur-sm"
+          quoteClassName="text-xl font-light italic leading-relaxed"
+          nameClassName="text-lg font-semibold mt-4"
+          roleClassName="text-sm font-light opacity-75"
        />
      </div>

@@ -136,6 +152,9 @@ export default function LandingPage() {
            { text: "Start Your Journey", href: "https://example.com/custom-blend" },
            { text: "Get in Touch", href: "mailto:hello@phloetiq.com" }
          ]}
+          textClassName="text-4xl font-semibold tracking-tight"
+          contentClassName="rounded-2xl shadow-xl p-12 backdrop-blur-sm"
+          containerClassName="py-20"
        />
      </div>

@@ -148,6 +167,11 @@ export default function LandingPage() {
            { items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms & Conditions", href: "#" }, { label: "Shipping Info", href: "#" }] },
            { items: [{ label: "Instagram", href: "https://instagram.com" }, { label: "Facebook", href: "https://facebook.com" }, { label: "Twitter", href: "https://twitter.com" }] }
          ]}
+          logoClassName="text-2xl font-semibold tracking-tight"
+          containerClassName="py-16"
+          cardClassName="rounded-2xl shadow-lg backdrop-blur-sm"
+          columnClassName="space-y-4"
+          itemClassName="text-sm font-light hover:opacity-75 transition-opacity"
        />
      </div>
    </ThemeProvider>
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -10,15 +10,15 @@
  --accent: #ffffff;
  --background-accent: #ffffff; */

-  --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #000000;
+  --background: #faf8f5;
+  --card: #f3ede2;
+  --foreground: #2e2521;
  --primary-cta: #d4af37;
  --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #ffffff;
  --secondary-cta-text: #000612e6;
-  --accent: #e2e2e2;
-  --background-accent: #c4c4c4;
+  --accent: #b2a28b;
+  --background-accent: #b2a28b;

  /* text sizing - set by ThemeProvider */
  /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);