Update src/app/page.tsx

Update src/app/styles/variables.css
2026-03-09 03:36:56 +00:00 · 2026-03-09 03:35:46 +00:00 · 2026-03-09 03:35:45 +00:00 · 2026-03-09 03:35:45 +00:00 · 2026-03-09 03:26:47 +00:00 · 2026-03-09 03:26:44 +00:00
3 changed files with 63 additions and 48 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 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 | Premium Custom Fragrance Oils",    description: "Craft your signature scent with our custom fragrance oils. Luxury, personalized, and long-lasting.",    type: "website",    siteName: "Phloetiq"},
-  twitter: {
-    card: "summary_large_image",    title: "Phloetiq | 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
@@ -9,7 +9,7 @@ import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCar
 import ContactText from '@/components/sections/contact/ContactText';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import { Award, Droplet, Heart, Globe, Crown, Sparkles, Zap, TrendingUp } from 'lucide-react';
+import { Award, Droplet, Heart, Globe, Crown, Sparkles, Zap, TrendingUp, Star } from 'lucide-react';

 export default function LandingPage() {
  return (
@@ -23,11 +23,11 @@ export default function LandingPage() {
      cardStyle="glass-elevated"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="solid"
-      headingFontWeight="light"
+      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
-          brandName="Phloetiq"
+          brandName="PhloetiQ Custom Oils"
          navItems={[
            { name: "Home", id: "home" },
            { name: "About", id: "about" },
@@ -59,7 +59,7 @@ export default function LandingPage() {

      <div id="about" data-section="about">
        <AboutMetric
-          title="Phloetiq: Where Science Meets Sensory Excellence in Every Drop"
+          title="PhloetiQ Custom Oils: Where Science Meets Sensory Excellence in Every Drop"
          metrics={[
            { icon: Droplet, label: "Custom Blends", value: "500+" },
            { icon: Heart, label: "Loyal Customers", value: "2,000+" },
@@ -76,7 +76,7 @@ export default function LandingPage() {
          title="Our Signature Collection"
          description="Hand-crafted custom oils inspired by the world's most beloved fragrances. Each blend is uniquely formulated to provide an exceptional olfactory experience."
          tag="Limited Edition"
-          tagIcon={Zap}
+          tagIcon={Star}
          tagAnimation="slide-up"
          products={[
            { id: "1", name: "Midnight Elegance", price: "$45.00", imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-essential-oil-vials_181624-53236.jpg?_wi=1", imageAlt: "Midnight Elegance custom oil" },
@@ -87,12 +87,15 @@ 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"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentySeven
-          title="Why Choose Phloetiq"
+          title="Why Choose PhloetiQ Custom Oils"
          description="Our commitment to quality and personalization sets us apart in the fragrance industry"
          tag="Bestsellers"
          tagIcon={TrendingUp}
@@ -107,22 +110,33 @@ 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"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen
          title="Loved by Fragrance Enthusiasts"
-          description="Discover what our customers are saying about their Phloetiq experience"
+          description="Discover what our customers are saying about their PhloetiQ Custom Oils experience"
          textboxLayout="default"
          useInvertedBackground={true}
          tagAnimation="slide-up"
          testimonials={[
-            { id: "1", title: "A Scent Made Just For Me", quote: "I was amazed at how perfectly the team captured my vision. My custom Phloetiq blend has become my signature scent. People ask me about it everywhere I go!", name: "Sarah Mitchell", role: "Professional", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1", imageAlt: "Sarah Mitchell" },
+            { id: "1", title: "A Scent Made Just For Me", quote: "I was amazed at how perfectly the team captured my vision. My custom PhloetiQ blend has become my signature scent. People ask me about it everywhere I go!", name: "Sarah Mitchell", role: "Professional", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1", imageAlt: "Sarah Mitchell" },
            { id: "2", title: "Quality Beyond Expectations", quote: "The craftsmanship and attention to detail is exceptional. Unlike commercial fragrances, this oil feels luxurious and lasts throughout the day without fading.", name: "James Chen", role: "Entrepreneur", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2", imageAlt: "James Chen" },
            { 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" }
+            { 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,20 +150,27 @@ 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>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
-          logoText="Phloetiq"
+          logoText="PhloetiQ Custom Oils"
          columns={[
            { items: [{ label: "Home", href: "#home" }, { label: "Products", href: "#products" }, { label: "About", href: "#about" }] },
            { items: [{ label: "Custom Orders", href: "#contact" }, { label: "Testimonials", href: "#testimonials" }, { label: "Contact Us", href: "#contact" }] },
            { 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"
+          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: #000612e6;
-  --primary-cta: #15479c;
+  --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);
Author	SHA1	Message	Date
bender	245983432a	Update src/app/page.tsx	2026-03-09 03:36:56 +00:00
bender	fe73fd43fd	Update src/app/styles/variables.css	2026-03-09 03:35:46 +00:00
bender	9161942795	Update src/app/page.tsx	2026-03-09 03:35:45 +00:00
bender	a2339b37b3	Update src/app/layout.tsx	2026-03-09 03:35:45 +00:00
bender	8a191366ec	Merge version_4 into main Merge version_4 into main	2026-03-09 03:26:47 +00:00
bender	e27a340e1c	Update src/app/styles/variables.css	2026-03-09 03:26:44 +00:00
bender	ca4831e101	Update src/app/page.tsx	2026-03-09 03:26:43 +00:00
bender	c84498c5c7	Merge version_3 into main Merge version_3 into main	2026-03-04 18:00:49 +00:00
bender	3e2c149782	Update src/app/page.tsx	2026-03-04 18:00:45 +00:00
bender	4adc16a08d	Update src/app/layout.tsx	2026-03-04 18:00:44 +00:00
bender	ef43f1ae41	Merge version_2 into main Merge version_2 into main	2026-03-04 17:49:53 +00:00