Update theme fonts

Update src/app/page.tsx
2026-04-21 07:16:42 +00:00 · 2026-04-21 07:16:41 +00:00 · 2026-04-20 07:41:33 +00:00 · 2026-04-20 07:41:06 +00:00 · 2026-04-20 06:39:52 +00:00 · 2026-04-20 06:39:49 +00:00
3 changed files with 141 additions and 137 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -7,6 +7,7 @@ import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";
 import { getVisualEditScript } from "@/utils/visual-edit-script";
 import { Roboto } from "next/font/google";
+import { Open_Sans } from "next/font/google";



@@ -20,10 +21,14 @@ export const metadata: Metadata = {
  },
 };

-const roboto = Roboto({
-  variable: "--font-roboto",
+
+const inter = Inter({
+  variable: "--font-inter",
+  subsets: ["latin"],
+});
+const openSans = Open_Sans({
+  variable: "--font-open-sans",
  subsets: ["latin"],
-  weight: ["100", "300", "400", "500", "700", "900"],
 });

 export default function RootLayout({
@@ -34,7 +39,7 @@ export default function RootLayout({
  return (
    <html lang="en" suppressHydrationWarning>
      <ServiceWrapper>
-        <body className={`${roboto.variable} antialiased`}>
+        <body className={`${inter.variable} ${openSans.variable} antialiased`}>
          <Tag />
          {children}
          <script
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,18 +2,29 @@

 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
+import { useState } from "react";
+import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
-import FooterBase from '@/components/sections/footer/FooterBase';
+import FooterCard from '@/components/sections/footer/FooterCard';
 import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
 import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
 import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
+import ProductCart from '@/components/ecommerce/cart/ProductCart';
+import { Facebook, Instagram, Mail, Phone, ShoppingCart } from "lucide-react";

 export default function LandingPage() {
+  const [isCartOpen, setIsCartOpen] = useState(false);
+  const [cartItems, setCartItems] = useState<Array<{ id: string, name: string, price: string, quantity: number, imageSrc: string }>>([]);
+
+  const addToCart = (product: any) => {
+    setCartItems(prev => [...prev, { ...product, quantity: 1 }]);
+    setIsCartOpen(true);
+  };
+
  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
@@ -28,143 +39,131 @@ export default function LandingPage() {
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleCentered
-      navItems={[
-        { name: "Home", id: "hero" },
-        { name: "About", id: "about" },
-        { name: "Products", id: "products" },
-        { name: "Contact", id: "contact" },
-      ]}
-      brandName="አቢሲኒያ ሽቶ"
-    />
-  </div>
+        <ProductCart 
+            isOpen={isCartOpen} 
+            onClose={() => setIsCartOpen(false)} 
+            items={cartItems} 
+            total={`${cartItems.reduce((acc, item) => acc + parseInt(item.price), 0)} ETB`}
+            buttons={[{ text: "Checkout", onClick: () => alert("Redirecting to checkout...") }]}
+        />
+        <div id="nav" data-section="nav">
+            <NavbarStyleCentered
+                navItems={[
+                    { name: "Home", id: "hero" },
+                    { name: "About", id: "about" },
+                    { name: "Products", id: "products" },
+                    { name: "Contact", id: "contact" },
+                ]}
+                brandName="አቢሲኒያ ሽቶ"
+            />
+        </div>

-  <div id="hero" data-section="hero">
-      <HeroBillboardScroll
-      background={{ variant: "gradient-bars" }}
-      title="የጥንታዊ ጥበብ መዓዛ"
-      description="Experience the timeless essence of Ethiopia with Abyssinia Perfumes. Crafted with natural ingredients and traditional techniques."
-      buttons={[{ text: "Shop Now", href: "#products" }]}
-      imageSrc="https://img.freepik.com/free-photo/composition-natural-argan-oil-dropper_23-2149016643.jpg?t=st=1715690000~exp=1715693600~hmac=e20f1234567890abcdef1234567890abcdef1234567890abcdef1234567890"
-      imageAlt="luxury perfume bottle dark background"
-    />
-  </div>
+        <div id="hero" data-section="hero">
+            <HeroBillboardScroll
+                background={{ variant: "gradient-bars" }}
+                title="የጥንታዊ ጥበብ መዓዛ"
+                description="Experience the timeless essence of Ethiopia with Abyssinia Perfumes. Crafted with natural ingredients and traditional techniques."
+                buttons={[{ text: "Shop Now", href: "#products" }]}
+                imageSrc="http://img.b2bpic.net/free-photo/composition-natural-argan-oil-dropper_23-2149016643.jpg"
+                imageAlt="luxury perfume bottle dark background"
+            />
+        </div>

-  <div id="about" data-section="about">
-      <MetricSplitMediaAbout
-      useInvertedBackground={true}
-      title="Our Heritage"
-      description="At Abyssinia Perfumes, we blend ancient secrets with modern elegance. Every fragrance tells a story of our rich culture and natural beauty."
-      metrics={[
-        { value: "100+", title: "Unique Scents" },
-        { value: "10k+", title: "Happy Customers" },
-        { value: "20+", title: "Natural Oils" },
-      ]}
-      imageSrc="https://img.freepik.com/free-photo/front-view-woman-working-with-flowers_23-2149591622.jpg?t=st=1715690000~exp=1715693600~hmac=a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z"
-      mediaAnimation="slide-up"
-      imageAlt="perfume shop interior rustic elegant"
-      metricsAnimation="slide-up"
-    />
-  </div>
+        <div id="about" data-section="about">
+            <MetricSplitMediaAbout
+                useInvertedBackground={true}
+                title="Our Heritage"
+                description="At Abyssinia Perfumes, we blend ancient secrets with modern elegance. Every fragrance tells a story of our rich culture and natural beauty."
+                metrics={[
+                    { value: "100+", title: "Unique Scents" },
+                    { value: "10k+", title: "Happy Customers" },
+                    { value: "20+", title: "Natural Oils" },
+                ]}
+                imageSrc="http://img.b2bpic.net/free-photo/front-view-woman-working-with-flowers_23-2149591622.jpg"
+                mediaAnimation="slide-up"
+                imageAlt="perfume shop interior rustic elegant"
+                metricsAnimation="slide-up"
+            />
+        </div>

-  <div id="products" data-section="products">
-      <ProductCardOne
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
-      products={[
-        { id: "p1", name: "Heritage Gold", price: "850 ETB", imageSrc: "https://img.freepik.com/free-photo/perfume-bottle_1203-7394.jpg?t=st=1715690000~exp=1715693600~hmac=1a2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7q8r9s0t1u2v3w4x5y6z" },
-        { id: "p2", name: "Abyssinian Night", price: "1200 ETB", imageSrc: "https://img.freepik.com/free-photo/organic-cosmetic-product-with-dreamy-aesthetic-fresh-background_23-2151382818.jpg?t=st=1715690000~exp=1715693600~hmac=1a2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7q8r9s0t1u2v3w4x5y6z" },
-        { id: "p3", name: "Pure Essence", price: "950 ETB", imageSrc: "https://img.freepik.com/free-photo/cosmetic-bottle-with-luxurious-art-nouveau-inspired-sun-relief-background_23-2151420720.jpg?t=st=1715690000~exp=1715693600~hmac=1a2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7q8r9s0t1u2v3w4x5y6z" },
-        { id: "p4", name: "Mountain Mist", price: "750 ETB", imageSrc: "https://img.freepik.com/free-photo/view-spa-concept-with-bottle-oil_23-2148290983.jpg?t=st=1715690000~exp=1715693600~hmac=1a2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7q8r9s0t1u2v3w4x5y6z" },
-        { id: "p5", name: "Ancient Spice", price: "1100 ETB", imageSrc: "https://img.freepik.com/free-photo/marshmallows-with-glass-tea-metallic-platter-top-view_114579-12997.jpg?t=st=1715690000~exp=1715693600~hmac=1a2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7q8r9s0t1u2v3w4x5y6z" },
-        { id: "p6", name: "Royal Musk", price: "1500 ETB", imageSrc: "https://img.freepik.com/free-photo/beautiful-still-life-arrangement-with-water_23-2149176153.jpg?t=st=1715690000~exp=1715693600~hmac=1a2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7q8r9s0t1u2v3w4x5y6z" },
-      ]}
-      title="Our Fragrances"
-      description="Discover our handpicked collection of exquisite perfumes and scented oils."
-    />
-  </div>
+        <div id="products" data-section="products">
+            <ProductCardOne
+                animationType="slide-up"
+                textboxLayout="default"
+                gridVariant="uniform-all-items-equal"
+                useInvertedBackground={false}
+                products={[
+                    { id: "p1", name: "Heritage Gold", price: "850 ETB", imageSrc: "http://img.b2bpic.net/free-photo/perfume-bottle_1203-7394.jpg?_wi=1", onProductClick: () => addToCart({ id: "p1", name: "Heritage Gold", price: "850", imageSrc: "http://img.b2bpic.net/free-photo/perfume-bottle_1203-7394.jpg?_wi=2" }) },
+                    { id: "p2", name: "Abyssinian Night", price: "1200 ETB", imageSrc: "http://img.b2bpic.net/free-photo/organic-cosmetic-product-with-dreamy-aesthetic-fresh-background_23-2151382818.jpg?_wi=1", onProductClick: () => addToCart({ id: "p2", name: "Abyssinian Night", price: "1200", imageSrc: "http://img.b2bpic.net/free-photo/organic-cosmetic-product-with-dreamy-aesthetic-fresh-background_23-2151382818.jpg?_wi=2" }) },
+                ]}
+                title="Our Fragrances"
+                description="Discover our handpicked collection of exquisite perfumes."
+            />
+        </div>

-  <div id="features" data-section="features">
-      <FeatureCardEight
-      textboxLayout="default"
-      useInvertedBackground={true}
-      features={[
-        { title: "100% Natural Oils", description: "Sourced from the finest local botanicals.", imageSrc: "https://img.freepik.com/free-photo/soap-making-ingredients-close-up_23-2148897599.jpg?t=st=1715690000~exp=1715693600~hmac=1a2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7q8r9s0t1u2v3w4x5y6z" },
-        { title: "Long Lasting", description: "Our perfumes are designed to linger throughout the day.", imageSrc: "https://img.freepik.com/free-photo/assortment-dry-tea-golden-vintage-mini-plates-tea-types-background_114579-8072.jpg?t=st=1715690000~exp=1715693600~hmac=1a2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7q8r9s0t1u2v3w4x5y6z" },
-        { title: "Handcrafted Care", description: "Every bottle is prepared with attention to detail.", imageSrc: "https://img.freepik.com/free-photo/flat-lay-natural-medicinal-herbs-bottles_23-2148776516.jpg?t=st=1715690000~exp=1715693600~hmac=1a2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7q8r9s0t1u2v3w4x5y6z" },
-      ]}
-      title="Why Choose Our Scents?"
-      description="We prioritize quality, tradition, and sustainability in every bottle we craft."
-    />
-  </div>
+        <div id="features" data-section="features">
+            <FeatureCardEight
+                textboxLayout="default"
+                useInvertedBackground={true}
+                features={[
+                    { title: "100% Natural Oils", description: "Sourced from the finest local botanicals.", imageSrc: "http://img.b2bpic.net/free-photo/soap-making-ingredients-close-up_23-2148897599.jpg" },
+                    { title: "Long Lasting", description: "Designed to linger throughout the day.", imageSrc: "http://img.b2bpic.net/free-photo/assortment-dry-tea-golden-vintage-mini-plates-tea-types-background_114579-8072.jpg" },
+                ]}
+                title="Why Choose Our Scents?"
+                description="Quality and tradition in every bottle."
+            />
+        </div>

-  <div id="metrics" data-section="metrics">
-      <MetricCardEleven
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      metrics={[
-        { id: "m1", value: "15", title: "Ingredients", description: "Sourced locally.", imageSrc: "https://img.freepik.com/free-photo/watercolor-paint-background-holi-festival_23-2148093688.jpg?t=st=1715690000~exp=1715693600~hmac=1a2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7q8r9s0t1u2v3w4x5y6z" },
-        { id: "m2", value: "50", title: "Regions", description: "Sourcing herbs.", imageSrc: "https://img.freepik.com/free-photo/assortment-dry-tea-golden-vintage-mini-plates-tea-types_114579-8056.jpg?t=st=1715690000~exp=1715693600~hmac=1a2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7q8r9s0t1u2v3w4x5y6z" },
-        { id: "m3", value: "99%", title: "Satisfaction", description: "Our customers.", imageSrc: "https://img.freepik.com/free-photo/happy-woman-having-luck-with-dice_1187-3658.jpg?t=st=1715690000~exp=1715693600~hmac=1a2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7q8r9s0t1u2v3w4x5y6z" },
-      ]}
-      title="The Art of Scent"
-      description="A look into the numbers behind our craft."
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+            <TestimonialCardTwo
+                animationType="slide-up"
+                textboxLayout="default"
+                useInvertedBackground={true}
+                testimonials={[
+                    { id: "1", name: "Sara H.", role: "Collector", testimonial: "The best scent I've ever worn." },
+                    { id: "2", name: "Kidus M.", role: "Loyal Customer", testimonial: "Authentic and beautiful scents." },
+                ]}
+                title="Customer Stories"
+                description="What our customers say."
+            />
+        </div>

-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwo
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      testimonials={[
-        { id: "1", name: "Sara H.", role: "Collector", testimonial: "The best scent I've ever worn.", imageSrc: "https://img.freepik.com/free-photo/lovely-woman-facing-camera_23-2148060462.jpg?t=st=1715690000~exp=1715693600~hmac=1a2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7q8r9s0t1u2v3w4x5y6z" },
-        { id: "2", name: "Kidus M.", role: "Loyal Customer", testimonial: "Authentic and beautiful scents.", imageSrc: "https://img.freepik.com/free-photo/horizontal-shot-positive-confident-young-caucasian-hipster-with-fuzzy-beard-shaved-head-tattooed-arm-posing-isolated-keeping-arms-folded-smiling-joyfully-feeling-proud-himself_343059-1673.jpg?t=st=1715690000~exp=1715693600~hmac=1a2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7q8r9s0t1u2v3w4x5y6z" },
-        { id: "3", name: "Bethel G.", role: "Perfume Fan", testimonial: "Reminds me of home. Incredible.", imageSrc: "https://img.freepik.com/free-photo/young-business-woman-walking-park_1303-22996.jpg?t=st=1715690000~exp=1715693600~hmac=1a2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7q8r9s0t1u2v3w4x5y6z" },
-      ]}
-      title="Customer Stories"
-      description="What our customers say about our scents."
-    />
-  </div>
+        <div id="faq" data-section="faq">
+            <FaqSplitMedia
+                textboxLayout="default"
+                useInvertedBackground={false}
+                faqs={[
+                    { id: "f1", title: "How do I track my order?", content: "Once shipped, you will receive an email with a tracking link to follow your package status." },
+                    { id: "f2", title: "Do you offer order confirmation?", content: "Yes, you will receive an automatic email confirmation immediately after your purchase is complete." },
+                ]}
+                title="Common Questions"
+                description="Everything you need to know about shopping with us."
+                faqsAnimation="slide-up"
+            />
+        </div>

-  <div id="faq" data-section="faq">
-      <FaqSplitMedia
-      textboxLayout="default"
-      useInvertedBackground={false}
-      faqs={[
-        { id: "f1", title: "Are your perfumes natural?", content: "Yes, we use 100% natural ingredients." },
-        { id: "f2", title: "How to store them?", content: "Store in a cool, dark place." },
-      ]}
-      imageSrc="https://img.freepik.com/free-photo/male-self-care-setting-still-life_23-2150326587.jpg?t=st=1715690000~exp=1715693600~hmac=1a2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7q8r9s0t1u2v3w4x5y6z"
-      title="Common Questions"
-      description="Answers to your questions about our perfumes."
-      faqsAnimation="slide-up"
-    />
-  </div>
+        <div id="contact" data-section="contact">
+            <ContactSplit
+                title="Get in Touch"
+                description="Reach out for wholesale or custom orders."
+                tag="Contact"
+                useInvertedBackground={false}
+                background={{ variant: "gradient-bars" }}
+            />
+        </div>

-  <div id="contact" data-section="contact">
-      <ContactText
-      useInvertedBackground={true}
-      background={{ variant: "rotated-rays-animated" }}
-      text="Have a question? Reach out to us for orders or queries."
-      buttons={[{ text: "Contact Us", href: "mailto:info@abyssinia.com" }]}
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterBase
-      columns={[
-        { title: "Links", items: [{ label: "Home", href: "#hero" }, { label: "Products", href: "#products" }] },
-        { title: "Help", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] },
-      ]}
-      logoText="አቢሲኒያ ሽቶ"
-      copyrightText="© 2025 Abyssinia Perfumes. All rights reserved."
-    />
-  </div>
+        <div id="footer" data-section="footer">
+            <FooterCard
+                logoText="አቢሲኒያ ሽቶ"
+                copyrightText="© 2025 Abyssinia Perfumes. All rights reserved."
+                socialLinks={[
+                    { icon: Facebook, href: "#", ariaLabel: "Facebook" },
+                    { icon: Instagram, href: "#", ariaLabel: "Instagram" },
+                    { icon: Mail, href: "mailto:info@abyssinia.com", ariaLabel: "Email" },
+                    { icon: Phone, href: "tel:+25111123456", ariaLabel: "Phone" },
+                ]}
+            />
+        </div>
      </ReactLenis>
    </ThemeProvider>
  );
--- a/src/app/styles/base.css
+++ b/src/app/styles/base.css
@@ -11,7 +11,7 @@ html {
 body {
  background-color: var(--background);
  color: var(--foreground);
-  font-family: var(--font-roboto), sans-serif;
+  font-family: var(--font-open-sans), sans-serif;
  position: relative;
  min-height: 100vh;
  overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-roboto), sans-serif;
+  font-family: var(--font-inter), sans-serif;
 }
Author	SHA1	Message	Date
bender	79b8f76465	Update theme fonts	2026-04-21 07:16:42 +00:00
bender	7962e6dda3	Update theme fonts	2026-04-21 07:16:41 +00:00
bender	6cad20b692	Update src/app/page.tsx	2026-04-20 07:41:33 +00:00
bender	9dce2dea41	Update src/app/page.tsx	2026-04-20 07:41:06 +00:00
bender	5ed7dbda9d	Merge version_3 into main Merge version_3 into main	2026-04-20 06:39:52 +00:00
bender	da567d0cde	Update src/app/page.tsx	2026-04-20 06:39:49 +00:00
bender	b4417f3d5d	Merge version_3 into main Merge version_3 into main	2026-04-20 06:39:22 +00:00
bender	9141acdd79	Update src/app/page.tsx	2026-04-20 06:39:19 +00:00
bender	49e98a2a70	Switch to version 1: modified src/app/page.tsx	2026-04-20 05:13:30 +00:00
bender	7ece266c0e	Merge version_2 into main Merge version_2 into main	2026-04-20 05:11:58 +00:00