bender/5fc324b2-37cc-47ec-8d4a-19c0a84407c6
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2 into main

Browse Source 
Merge version_2 into main
This commit was merged in pull request #2.
This commit is contained in:
bender
2026-03-26 12:25:20 +00:00
parent a4f91fc39e 37e69d6e2b
commit c962dcec8e
4 changed files with 79 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/layout.tsx
View File

@@ -7,6 +7,7 @@ import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag";
import { getVisualEditScript } from "@/utils/visual-edit-script";
import { Inter_Tight } from "next/font/google";
import { Manrope } from "next/font/google";
@@ -41,10 +42,9 @@ export const metadata: Metadata = {
},
};
const interTight = Inter_Tight({
variable: "--font-inter-tight",
subsets: ["latin"],
weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
const manrope = Manrope({
variable: "--font-manrope", subsets: ["latin"],
});
export default function RootLayout({
@@ -55,7 +55,7 @@ export default function RootLayout({
return (
<html lang="en" suppressHydrationWarning>
<ServiceWrapper>
<body className={`${interTight.variable} antialiased`}>
<body className={`${manrope.variable} antialiased`}>
<Tag />
{children}
<script

273
src/app/page.tsx
View File

@@ -2,15 +2,15 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FaqBase from "@/components/sections/faq/FaqBase";
import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import ProductCardThree from "@/components/sections/product/ProductCardThree";
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
import { Feather, Heart, Palette, ShieldCheck } from "lucide-react";
export default function LandingPage() {
@@ -23,8 +23,8 @@ export default function LandingPage() {
sizing="mediumLargeSizeMediumTitles"
background="aurora"
cardStyle="subtle-shadow"
primaryButtonStyle="shadow"
secondaryButtonStyle="glass"
primaryButtonStyle="gradient"
secondaryButtonStyle="solid"
headingFontWeight="extrabold"
>
<ReactLenis root>
@@ -32,29 +32,17 @@ export default function LandingPage() {
<NavbarStyleFullscreen
navItems={[
{
name: "Products",
id: "products",
},
name: "Products", id: "products"},
{
name: "Features",
id: "features",
},
name: "Features", id: "features"},
{
name: "About Us",
id: "about",
},
name: "About Us", id: "about"},
{
name: "Testimonials",
id: "testimonials",
},
name: "Testimonials", id: "testimonials"},
{
name: "FAQs",
id: "faq",
},
name: "FAQs", id: "faq"},
{
name: "Contact",
id: "contact",
},
name: "Contact", id: "contact"},
]}
brandName="Organic Bottle Co."
/>
@@ -63,19 +51,14 @@ export default function LandingPage() {
<div id="hero" data-section="hero">
<HeroLogoBillboard
background={{
variant: "radial-gradient",
}}
variant: "radial-gradient"}}
logoText="Organic Bottle Co."
description="Crafting premium, sustainable water bottles for a healthier planet and a healthier you. Experience hydration reimagined with nature's best materials."
buttons={[
{
text: "Explore Products",
href: "#products",
},
text: "Explore Products", href: "#products"},
{
text: "Learn More",
href: "#about",
},
text: "Learn More", href: "#about"},
]}
imageSrc="http://img.b2bpic.net/free-photo/some-lemon-with-bottle-lemon-juice-white-cloth-basket-wooden-surface-top-view-space-text_176474-14166.jpg"
imageAlt="Organic water bottle with natural background"
@@ -88,28 +71,17 @@ export default function LandingPage() {
useInvertedBackground={true}
heading={[
{
type: "text",
content: "Our Commitment to ",
},
type: "text", content: "Our Commitment to "},
{
type: "image",
src: "http://img.b2bpic.net/free-vector/world-environment-day-banners_1057-958.jpg",
alt: "Eco-friendly leaf icon",
},
type: "image", src: "http://img.b2bpic.net/free-vector/world-environment-day-banners_1057-958.jpg", alt: "Eco-friendly leaf icon"},
{
type: "text",
content: "Sustainability",
},
type: "text", content: "Sustainability"},
]}
buttons={[
{
text: "Our Story",
href: "#",
},
text: "Our Story", href: "#"},
{
text: "Manufacturing",
href: "#",
},
text: "Manufacturing", href: "#"},
]}
/>
</div>
@@ -122,26 +94,11 @@ export default function LandingPage() {
useInvertedBackground={false}
products={[
{
id: "p1",
name: "Borosilicate Glass Bottle",
price: "$29.99",
imageSrc: "http://img.b2bpic.net/free-photo/sotol-drink-still-life_23-2151057962.jpg",
imageAlt: "Elegant glass water bottle",
},
id: "p1", name: "Borosilicate Glass Bottle", price: "$29.99", imageSrc: "http://img.b2bpic.net/free-photo/sotol-drink-still-life_23-2151057962.jpg", imageAlt: "Elegant glass water bottle"},
{
id: "p2",
name: "Bamboo Infused Bottle",
price: "$34.99",
imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-zero-waste-items_23-2149214767.jpg",
imageAlt: "Bamboo infused water bottle",
},
id: "p2", name: "Bamboo Infused Bottle", price: "$34.99", imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-zero-waste-items_23-2149214767.jpg", imageAlt: "Bamboo infused water bottle"},
{
id: "p3",
name: "Recycled Steel Bottle",
price: "$39.99",
imageSrc: "http://img.b2bpic.net/free-photo/aluminum-bottle-packaging-liquids_23-2150821005.jpg",
imageAlt: "Recycled stainless steel water bottle",
},
id: "p3", name: "Recycled Steel Bottle", price: "$39.99", imageSrc: "http://img.b2bpic.net/free-photo/aluminum-bottle-packaging-liquids_23-2150821005.jpg", imageAlt: "Recycled stainless steel water bottle"},
]}
title="Our Organic Bottle Collection"
description="Discover our range of beautifully designed, sustainably sourced water bottles. Perfect for every lifestyle, conscious of our planet."
@@ -155,67 +112,43 @@ export default function LandingPage() {
useInvertedBackground={true}
features={[
{
title: "Eco-Conscious Materials",
description: "Crafted from sustainable and recycled materials, ensuring minimal environmental impact.",
icon: Feather,
title: "Eco-Conscious Materials", description: "Crafted from sustainable and recycled materials, ensuring minimal environmental impact.", icon: Feather,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-vector/world-environment-day-banners_1057-958.jpg?_wi=1",
imageAlt: "Eco-friendly leaf icon",
},
imageSrc: "http://img.b2bpic.net/free-vector/world-environment-day-banners_1057-958.jpg?_wi=1", imageAlt: "Eco-friendly leaf icon"},
{
imageSrc: "http://img.b2bpic.net/free-vector/world-environment-day-banners_1057-958.jpg?_wi=2",
imageAlt: "Eco-friendly leaf icon",
},
imageSrc: "http://img.b2bpic.net/free-vector/world-environment-day-banners_1057-958.jpg?_wi=2", imageAlt: "Eco-friendly leaf icon"},
],
},
{
title: "Health-Safe & Non-Toxic",
description: "Designed with your well-being in mind, free from harmful chemicals and plastics.",
icon: Heart,
title: "Health-Safe & Non-Toxic", description: "Designed with your well-being in mind, free from harmful chemicals and plastics.", icon: Heart,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-vector/flat-world-water-day-infographic-template_23-2149273824.jpg?_wi=1",
imageAlt: "Heart pulse healthy lifestyle icon",
},
imageSrc: "http://img.b2bpic.net/free-vector/flat-world-water-day-infographic-template_23-2149273824.jpg?_wi=1", imageAlt: "Heart pulse healthy lifestyle icon"},
{
imageSrc: "http://img.b2bpic.net/free-vector/flat-world-water-day-infographic-template_23-2149273824.jpg?_wi=2",
imageAlt: "Heart pulse healthy lifestyle icon",
},
imageSrc: "http://img.b2bpic.net/free-vector/flat-world-water-day-infographic-template_23-2149273824.jpg?_wi=2", imageAlt: "Heart pulse healthy lifestyle icon"},
],
},
{
title: "Durable & Long-Lasting",
description: "Engineered for daily use, our bottles are built to withstand the rigors of your active life.",
icon: ShieldCheck,
title: "Durable & Long-Lasting", description: "Engineered for daily use, our bottles are built to withstand the rigors of your active life.", icon: ShieldCheck,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-vector/gear-infographic_23-2148156914.jpg?_wi=1",
imageAlt: "Strong shield protection icon",
},
imageSrc: "http://img.b2bpic.net/free-vector/gear-infographic_23-2148156914.jpg?_wi=1", imageAlt: "Strong shield protection icon"},
{
imageSrc: "http://img.b2bpic.net/free-vector/gear-infographic_23-2148156914.jpg?_wi=2",
imageAlt: "Strong shield protection icon",
},
imageSrc: "http://img.b2bpic.net/free-vector/gear-infographic_23-2148156914.jpg?_wi=2", imageAlt: "Strong shield protection icon"},
],
},
{
title: "Stylish & Ergonomic Design",
description: "A fusion of aesthetic appeal and practical functionality, enhancing your daily hydration.",
icon: Palette,
title: "Stylish & Ergonomic Design", description: "A fusion of aesthetic appeal and practical functionality, enhancing your daily hydration.", icon: Palette,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-vector/elegant-vintage-letter-v-logo_1035-8795.jpg?_wi=1",
imageAlt: "Star quality aesthetic icon",
},
imageSrc: "http://img.b2bpic.net/free-vector/elegant-vintage-letter-v-logo_1035-8795.jpg?_wi=1", imageAlt: "Star quality aesthetic icon"},
{
imageSrc: "http://img.b2bpic.net/free-vector/elegant-vintage-letter-v-logo_1035-8795.jpg?_wi=2",
imageAlt: "Star quality aesthetic icon",
},
imageSrc: "http://img.b2bpic.net/free-vector/elegant-vintage-letter-v-logo_1035-8795.jpg?_wi=2", imageAlt: "Star quality aesthetic icon"},
],
},
]}
title="Why Choose Organic Bottle Co.?"
title="Why Choose Organic Bottle Co."
description="Our bottles are more than just containers; they are a statement of conscious living and superior quality."
/>
</div>
@@ -226,55 +159,15 @@ export default function LandingPage() {
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "Sarah J.",
date: "2 months ago",
title: "Best Eco-Friendly Bottle!",
quote: "I absolutely love my new Organic Bottle! It's stylish, keeps my water cold all day, and I feel good knowing it's sustainable.",
tag: "Hydration Hero",
avatarSrc: "http://img.b2bpic.net/free-photo/expressive-young-woman-posing_176474-99771.jpg",
avatarAlt: "Sarah J.",
},
id: "1", name: "Sarah J.", date: "2 months ago", title: "Best Eco-Friendly Bottle!", quote: "I absolutely love my new Organic Bottle! It's stylish, keeps my water cold all day, and I feel good knowing it's sustainable.", tag: "Hydration Hero", avatarSrc: "http://img.b2bpic.net/free-photo/expressive-young-woman-posing_176474-99771.jpg", avatarAlt: "Sarah J."},
{
id: "2",
name: "Michael T.",
date: "3 weeks ago",
title: "Durable and Chic",
quote: "Finally found a bottle that matches my eco-values without compromising on quality or looks. Highly recommend Organic Bottle Co.!",
tag: "Sustainable Choice",
avatarSrc: "http://img.b2bpic.net/free-photo/expressive-young-girl-posing-studio_176474-65932.jpg",
avatarAlt: "Michael T.",
},
id: "2", name: "Michael T.", date: "3 weeks ago", title: "Durable and Chic", quote: "Finally found a bottle that matches my eco-values without compromising on quality or looks. Highly recommend Organic Bottle Co.!", tag: "Sustainable Choice", avatarSrc: "http://img.b2bpic.net/free-photo/expressive-young-girl-posing-studio_176474-65932.jpg", avatarAlt: "Michael T."},
{
id: "3",
name: "Emily R.",
date: "1 month ago",
title: "Perfect for Daily Use",
quote: "From the gym to the office, my Organic Bottle is always with me. Easy to clean and incredibly durable. Five stars!",
tag: "Daily Essential",
avatarSrc: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-businesswoman-smiling-workplace-office_176420-6981.jpg",
avatarAlt: "Emily R.",
},
id: "3", name: "Emily R.", date: "1 month ago", title: "Perfect for Daily Use", quote: "From the gym to the office, my Organic Bottle is always with me. Easy to clean and incredibly durable. Five stars!", tag: "Daily Essential", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-businesswoman-smiling-workplace-office_176420-6981.jpg", avatarAlt: "Emily R."},
{
id: "4",
name: "David K.",
date: "1 week ago",
title: "A True Game Changer",
quote: "The commitment to natural materials really shines through. This bottle feels premium and I'm proud to carry it.",
tag: "Premium Quality",
avatarSrc: "http://img.b2bpic.net/free-photo/young-blonde-charming-female-isolated_176474-79608.jpg",
avatarAlt: "David K.",
},
id: "4", name: "David K.", date: "1 week ago", title: "A True Game Changer", quote: "The commitment to natural materials really shines through. This bottle feels premium and I'm proud to carry it.", tag: "Premium Quality", avatarSrc: "http://img.b2bpic.net/free-photo/young-blonde-charming-female-isolated_176474-79608.jpg", avatarAlt: "David K."},
{
id: "5",
name: "Jessica L.",
date: "2 weeks ago",
title: "Stylish & Practical",
quote: "Love the minimalist design and the fact that it's made from organic materials. It's the perfect size for my needs.",
tag: "Fashionably Green",
avatarSrc: "http://img.b2bpic.net/free-photo/young-woman-portrait-autumn-color_1304-4942.jpg",
avatarAlt: "Jessica L.",
},
id: "5", name: "Jessica L.", date: "2 weeks ago", title: "Stylish & Practical", quote: "Love the minimalist design and the fact that it's made from organic materials. It's the perfect size for my needs.", tag: "Fashionably Green", avatarSrc: "http://img.b2bpic.net/free-photo/young-woman-portrait-autumn-color_1304-4942.jpg", avatarAlt: "Jessica L."},
]}
title="What Our Customers Say"
description="Hear from the growing community who chose sustainability without sacrificing style and quality."
@@ -287,25 +180,13 @@ export default function LandingPage() {
useInvertedBackground={true}
faqs={[
{
id: "faq1",
title: "What materials are your bottles made from?",
content: "Our bottles are primarily crafted from high-quality borosilicate glass, recycled stainless steel, and sustainable bamboo, ensuring both durability and eco-friendliness.",
},
id: "faq1", title: "What materials are your bottles made from?", content: "Our bottles are primarily crafted from high-quality borosilicate glass, recycled stainless steel, and sustainable bamboo, ensuring both durability and eco-friendliness."},
{
id: "faq2",
title: "Are the bottles dishwasher safe?",
content: "While the glass and steel components are dishwasher safe, we recommend hand-washing bottles with bamboo elements to preserve their natural finish and longevity.",
},
id: "faq2", title: "Are the bottles dishwasher safe?", content: "While the glass and steel components are dishwasher safe, we recommend hand-washing bottles with bamboo elements to preserve their natural finish and longevity."},
{
id: "faq3",
title: "Do you offer international shipping?",
content: "Yes, we proudly ship our organic bottles worldwide! Shipping costs and delivery times vary by destination, details available at checkout.",
},
id: "faq3", title: "Do you offer international shipping?", content: "Yes, we proudly ship our organic bottles worldwide! Shipping costs and delivery times vary by destination, details available at checkout."},
{
id: "faq4",
title: "How do I care for my bamboo cap?",
content: "To maintain your bamboo cap, wash gently with soap and water, and allow it to air dry completely. Avoid prolonged soaking to prevent damage.",
},
id: "faq4", title: "How do I care for my bamboo cap?", content: "To maintain your bamboo cap, wash gently with soap and water, and allow it to air dry completely. Avoid prolonged soaking to prevent damage."},
]}
title="Frequently Asked Questions"
description="Find answers to common questions about our products, materials, and sustainable practices."
@@ -317,16 +198,13 @@ export default function LandingPage() {
<ContactCTA
useInvertedBackground={false}
background={{
variant: "downward-rays-static",
}}
variant: "downward-rays-static"}}
tag="Connect With Us"
title="Join the Organic Movement"
description="Have questions or want to learn more about our sustainable bottles? Reach out to our team!"
buttons={[
{
text: "Get in Touch",
href: "#",
},
text: "Get in Touch", href: "#"},
]}
/>
</div>
@@ -335,54 +213,33 @@ export default function LandingPage() {
<FooterSimple
columns={[
{
title: "Company",
items: [
title: "Company", items: [
{
label: "About Us",
href: "#about",
},
label: "About Us", href: "#about"},
{
label: "Our Mission",
href: "#",
},
label: "Our Mission", href: "#"},
{
label: "Sustainability",
href: "#",
},
label: "Sustainability", href: "#"},
],
},
{
title: "Products",
items: [
title: "Products", items: [
{
label: "Glass Bottles",
href: "#products",
},
label: "Glass Bottles", href: "#products"},
{
label: "Steel Bottles",
href: "#products",
},
label: "Steel Bottles", href: "#products"},
{
label: "Bamboo Collection",
href: "#products",
},
label: "Bamboo Collection", href: "#products"},
],
},
{
title: "Support",
items: [
title: "Support", items: [
{
label: "FAQ",
href: "#faq",
},
label: "FAQ", href: "#faq"},
{
label: "Contact Us",
href: "#contact",
},
label: "Contact Us", href: "#contact"},
{
label: "Shipping & Returns",
href: "#",
},
label: "Shipping & Returns", href: "#"},
],
},
]}
@@ -393,4 +250,4 @@ export default function LandingPage() {
</ReactLenis>
</ThemeProvider>
);
}
}

4
src/app/styles/base.css
View File

@@ -11,7 +11,7 @@ html {
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-inter-tight), sans-serif;
font-family: var(--font-manrope), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
h4,
h5,
h6 {
font-family: var(--font-inter-tight), sans-serif;
font-family: var(--font-manrope), sans-serif;
}

14
src/app/styles/variables.css
View File

@@ -10,15 +10,15 @@
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #f7f6f7;
--card: #ffffff;
--foreground: #250c0d;
--primary-cta: #b82b40;
--background: #fffefe;
--card: #f6f7f4;
--foreground: #080908;
--primary-cta: #0e3a29;
--primary-cta-text: #f7f6f7;
--secondary-cta: #ffffff;
--secondary-cta: #e7eecd;
--secondary-cta-text: #250c0d;
--accent: #b90941;
--background-accent: #e8a8b6;
--accent: #35c18b;
--background-accent: #ecebe4;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);