Merge version_2 into main #2
248
src/app/page.tsx
248
src/app/page.tsx
@@ -2,9 +2,9 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
|
||||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
@@ -31,25 +31,15 @@ export default function LandingPage() {
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
name: "Home", id: "hero"},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
name: "About", id: "about"},
|
||||
{
|
||||
name: "Collection",
|
||||
id: "products",
|
||||
},
|
||||
name: "Collection", id: "products"},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
name: "Testimonials", id: "testimonials"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
name: "Contact", id: "contact"},
|
||||
]}
|
||||
brandName="Viora Bracelet"
|
||||
/>
|
||||
@@ -61,78 +51,39 @@ export default function LandingPage() {
|
||||
description="Dibuat dari batok kelapa alami, Viora Bracelet menggabungkan keindahan estetik dengan semangat keberlanjutan."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Siti Aminah",
|
||||
handle: "@siti_am",
|
||||
testimonial: "Bagus banget, sesuai request!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/white-wedding-arrangement-with-copy-space_23-2148243968.jpg?_wi=1",
|
||||
imageAlt: "minimalist eco friendly jewelry background",
|
||||
},
|
||||
name: "Siti Aminah", handle: "@siti_am", testimonial: "Bagus banget, sesuai request!", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/white-wedding-arrangement-with-copy-space_23-2148243968.jpg?_wi=1", imageAlt: "minimalist eco friendly jewelry background"},
|
||||
{
|
||||
name: "Budi Santoso",
|
||||
handle: "@budi_s",
|
||||
testimonial: "Keren dipakai, pasti beli lagi",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-soil-plants_23-2148928441.jpg?_wi=1",
|
||||
imageAlt: "natural coconut shell material macro",
|
||||
},
|
||||
name: "Budi Santoso", handle: "@budi_s", testimonial: "Keren dipakai, pasti beli lagi", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-soil-plants_23-2148928441.jpg?_wi=1", imageAlt: "natural coconut shell material macro"},
|
||||
{
|
||||
name: "Dewi Lestari",
|
||||
handle: "@dewi_l",
|
||||
testimonial: "Kualitas bahan bagus & awet",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-summer-dress-vacation-beach-colorful-yellow-sunglasess-smiling-happy_285396-6631.jpg?_wi=1",
|
||||
imageAlt: "natural coconut shell bracelet",
|
||||
},
|
||||
name: "Dewi Lestari", handle: "@dewi_l", testimonial: "Kualitas bahan bagus & awet", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-summer-dress-vacation-beach-colorful-yellow-sunglasess-smiling-happy_285396-6631.jpg?_wi=1", imageAlt: "natural coconut shell bracelet"},
|
||||
{
|
||||
name: "Andi Wijaya",
|
||||
handle: "@andi_w",
|
||||
testimonial: "Sangat unik dan ramah lingkungan!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-yummy-chocolate-cakes-with-coconut-light-white-surface_140725-115543.jpg?_wi=1",
|
||||
imageAlt: "sustainable wood bracelet",
|
||||
},
|
||||
name: "Andi Wijaya", handle: "@andi_w", testimonial: "Sangat unik dan ramah lingkungan!", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-yummy-chocolate-cakes-with-coconut-light-white-surface_140725-115543.jpg?_wi=1", imageAlt: "sustainable wood bracelet"},
|
||||
{
|
||||
name: "Putri Ayu",
|
||||
handle: "@putri_a",
|
||||
testimonial: "Suka banget sama modelnya!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-s-holding-beads-button-with-tweezers_23-2147899011.jpg?_wi=1",
|
||||
imageAlt: "eco friendly beaded bracelet",
|
||||
},
|
||||
name: "Putri Ayu", handle: "@putri_a", testimonial: "Suka banget sama modelnya!", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-s-holding-beads-button-with-tweezers_23-2147899011.jpg?_wi=1", imageAlt: "eco friendly beaded bracelet"},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Beli Sekarang",
|
||||
href: "#products",
|
||||
},
|
||||
text: "Beli Sekarang", href: "#products"},
|
||||
{
|
||||
text: "Lihat Koleksi",
|
||||
href: "#products",
|
||||
},
|
||||
text: "Lihat Koleksi", href: "#products"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/white-wedding-arrangement-with-copy-space_23-2148243968.jpg?_wi=2"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/make-up-artist-making-client-laugh_23-2148398584.jpg",
|
||||
alt: "Customer 1",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/make-up-artist-making-client-laugh_23-2148398584.jpg", alt: "Customer 1"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/pleasant-looking-afro-american-female-with-broad-smile-holds-mug-coffee-tea-enjoys-break-after-hard-working-day_273609-3085.jpg",
|
||||
alt: "Customer 2",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/pleasant-looking-afro-american-female-with-broad-smile-holds-mug-coffee-tea-enjoys-break-after-hard-working-day_273609-3085.jpg", alt: "Customer 2"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/people-beauty-ethnicity-facial-expressions-concept-attractive-african-american-female-model-rests-coffee-shop-with-friend-lover_273609-3170.jpg",
|
||||
alt: "Customer 3",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/people-beauty-ethnicity-facial-expressions-concept-attractive-african-american-female-model-rests-coffee-shop-with-friend-lover_273609-3170.jpg", alt: "Customer 3"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-mixed-race-black-woman-park-full-flowers-with-huge-afro-hair-contour-sunlight-watching-aside-cinema-film-colors_633478-451.jpg",
|
||||
alt: "Customer 4",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-mixed-race-black-woman-park-full-flowers-with-huge-afro-hair-contour-sunlight-watching-aside-cinema-film-colors_633478-451.jpg", alt: "Customer 4"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/front-view-eco-friendly-cleaning-products-with-brushes_23-2148818465.jpg",
|
||||
alt: "Customer 5",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/front-view-eco-friendly-cleaning-products-with-brushes_23-2148818465.jpg", alt: "Customer 5"},
|
||||
]}
|
||||
avatarText="Lebih dari 1000+ pelanggan puas dengan produk Viora."
|
||||
/>
|
||||
@@ -155,59 +106,23 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
brand: "Viora",
|
||||
name: "Coconut Minimalist",
|
||||
price: "Rp 35.000",
|
||||
rating: 5,
|
||||
reviewCount: "24",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-summer-dress-vacation-beach-colorful-yellow-sunglasess-smiling-happy_285396-6631.jpg?_wi=2",
|
||||
},
|
||||
id: "p1", brand: "Viora", name: "Coconut Minimalist", price: "Rp 35.000", rating: 5,
|
||||
reviewCount: "24", imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-summer-dress-vacation-beach-colorful-yellow-sunglasess-smiling-happy_285396-6631.jpg?_wi=2"},
|
||||
{
|
||||
id: "p2",
|
||||
brand: "Viora",
|
||||
name: "Eco-Charm Bracelet",
|
||||
price: "Rp 40.000",
|
||||
rating: 5,
|
||||
reviewCount: "18",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-yummy-chocolate-cakes-with-coconut-light-white-surface_140725-115543.jpg?_wi=2",
|
||||
},
|
||||
id: "p2", brand: "Viora", name: "Eco-Charm Bracelet", price: "Rp 40.000", rating: 5,
|
||||
reviewCount: "18", imageSrc: "http://img.b2bpic.net/free-photo/top-view-yummy-chocolate-cakes-with-coconut-light-white-surface_140725-115543.jpg?_wi=2"},
|
||||
{
|
||||
id: "p3",
|
||||
brand: "Viora",
|
||||
name: "Natural Earth Link",
|
||||
price: "Rp 38.000",
|
||||
rating: 4,
|
||||
reviewCount: "32",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-s-holding-beads-button-with-tweezers_23-2147899011.jpg?_wi=2",
|
||||
},
|
||||
id: "p3", brand: "Viora", name: "Natural Earth Link", price: "Rp 38.000", rating: 4,
|
||||
reviewCount: "32", imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-s-holding-beads-button-with-tweezers_23-2147899011.jpg?_wi=2"},
|
||||
{
|
||||
id: "p4",
|
||||
brand: "Viora",
|
||||
name: "Handmade Shell Cuff",
|
||||
price: "Rp 45.000",
|
||||
rating: 5,
|
||||
reviewCount: "12",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-stylish-woman-holding-durian-fruit_343596-1645.jpg",
|
||||
},
|
||||
id: "p4", brand: "Viora", name: "Handmade Shell Cuff", price: "Rp 45.000", rating: 5,
|
||||
reviewCount: "12", imageSrc: "http://img.b2bpic.net/free-photo/young-stylish-woman-holding-durian-fruit_343596-1645.jpg"},
|
||||
{
|
||||
id: "p5",
|
||||
brand: "Viora",
|
||||
name: "Artisan Coconut Cuff",
|
||||
price: "Rp 50.000",
|
||||
rating: 5,
|
||||
reviewCount: "9",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/working-with-wood-set-letters-hand-made-things-materials-composition-top-view_1268-17354.jpg",
|
||||
},
|
||||
id: "p5", brand: "Viora", name: "Artisan Coconut Cuff", price: "Rp 50.000", rating: 5,
|
||||
reviewCount: "9", imageSrc: "http://img.b2bpic.net/free-photo/working-with-wood-set-letters-hand-made-things-materials-composition-top-view_1268-17354.jpg"},
|
||||
{
|
||||
id: "p6",
|
||||
brand: "Viora",
|
||||
name: "Classic Eco Bracelet",
|
||||
price: "Rp 30.000",
|
||||
rating: 4,
|
||||
reviewCount: "45",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-vacation-beachhands-with-colorful-yellow-sunglasess-accessories-jewelry-bag_285396-6637.jpg",
|
||||
},
|
||||
id: "p6", brand: "Viora", name: "Classic Eco Bracelet", price: "Rp 30.000", rating: 4,
|
||||
reviewCount: "45", imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-vacation-beachhands-with-colorful-yellow-sunglasess-accessories-jewelry-bag_285396-6637.jpg"},
|
||||
]}
|
||||
title="Koleksi Kami"
|
||||
description="Pilihan gelang batok kelapa unik dan handmade untuk tampilan yang natural."
|
||||
@@ -219,30 +134,15 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Siti Aminah",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/make-up-artist-making-client-laugh_23-2148398584.jpg",
|
||||
},
|
||||
id: "t1", name: "Siti Aminah", imageSrc: "http://img.b2bpic.net/free-photo/make-up-artist-making-client-laugh_23-2148398584.jpg"},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Budi Santoso",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pleasant-looking-afro-american-female-with-broad-smile-holds-mug-coffee-tea-enjoys-break-after-hard-working-day_273609-3085.jpg",
|
||||
},
|
||||
id: "t2", name: "Budi Santoso", imageSrc: "http://img.b2bpic.net/free-photo/pleasant-looking-afro-american-female-with-broad-smile-holds-mug-coffee-tea-enjoys-break-after-hard-working-day_273609-3085.jpg"},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Dewi Lestari",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/people-beauty-ethnicity-facial-expressions-concept-attractive-african-american-female-model-rests-coffee-shop-with-friend-lover_273609-3170.jpg",
|
||||
},
|
||||
id: "t3", name: "Dewi Lestari", imageSrc: "http://img.b2bpic.net/free-photo/people-beauty-ethnicity-facial-expressions-concept-attractive-african-american-female-model-rests-coffee-shop-with-friend-lover_273609-3170.jpg"},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Andi Wijaya",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-mixed-race-black-woman-park-full-flowers-with-huge-afro-hair-contour-sunlight-watching-aside-cinema-film-colors_633478-451.jpg",
|
||||
},
|
||||
id: "t4", name: "Andi Wijaya", imageSrc: "http://img.b2bpic.net/free-photo/portrait-mixed-race-black-woman-park-full-flowers-with-huge-afro-hair-contour-sunlight-watching-aside-cinema-film-colors_633478-451.jpg"},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Putri Ayu",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-eco-friendly-cleaning-products-with-brushes_23-2148818465.jpg",
|
||||
},
|
||||
id: "t5", name: "Putri Ayu", imageSrc: "http://img.b2bpic.net/free-photo/front-view-eco-friendly-cleaning-products-with-brushes_23-2148818465.jpg"},
|
||||
]}
|
||||
cardTitle="Apa Kata Mereka?"
|
||||
cardTag="Testimoni"
|
||||
@@ -258,19 +158,13 @@ export default function LandingPage() {
|
||||
features={[
|
||||
{
|
||||
icon: Leaf,
|
||||
title: "100% Natural",
|
||||
description: "Dibuat langsung dari bahan batok kelapa alami tanpa bahan kimia.",
|
||||
},
|
||||
title: "100% Natural", description: "Dibuat langsung dari bahan batok kelapa alami tanpa bahan kimia."},
|
||||
{
|
||||
icon: Heart,
|
||||
title: "Handmade",
|
||||
description: "Dikerjakan dengan ketelitian tangan artisan lokal Indonesia.",
|
||||
},
|
||||
title: "Handmade", description: "Dikerjakan dengan ketelitian tangan artisan lokal Indonesia."},
|
||||
{
|
||||
icon: Diamond,
|
||||
title: "Desain Unik",
|
||||
description: "Setiap produk memiliki tekstur batok kelapa yang unik dan asli.",
|
||||
},
|
||||
title: "Desain Unik", description: "Setiap produk memiliki tekstur batok kelapa yang unik dan asli."},
|
||||
]}
|
||||
title="Mengapa Pilih Viora?"
|
||||
description="Kualitas yang menyatu dengan nilai keberlanjutan alam."
|
||||
@@ -278,52 +172,36 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
<ContactText
|
||||
text="Siap untuk tampil alami dengan Viora? Hubungi kami sekarang!"
|
||||
background={{
|
||||
variant: "plain",
|
||||
variant: "gradient-bars"
|
||||
}}
|
||||
tag="Contact Us"
|
||||
title="Jadi bagian dari perubahan 🌿"
|
||||
description="Hubungi kami melalui WhatsApp atau Instagram untuk pemesanan khusus atau pertanyaan produk."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/flat-lay-composition-flowers-with-copyspace_23-2148134775.jpg"
|
||||
buttonText="Kirim via WhatsApp"
|
||||
onSubmit={(email) => console.log(email)}
|
||||
buttons={[
|
||||
{ text: "Hubungi Kami", href: "https://wa.me/" }
|
||||
]}
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Viora Bracelet"
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Produk",
|
||||
items: [
|
||||
{
|
||||
label: "Katalog",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
label: "Tentang",
|
||||
href: "#about",
|
||||
},
|
||||
],
|
||||
title: "Produk", items: [
|
||||
{ label: "Katalog", href: "#products" },
|
||||
{ label: "Tentang Kami", href: "#about" },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Kontak",
|
||||
items: [
|
||||
{
|
||||
label: "WhatsApp",
|
||||
href: "https://wa.me/",
|
||||
},
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "https://instagram.com/viora.bracelet",
|
||||
},
|
||||
],
|
||||
},
|
||||
title: "Kontak", items: [
|
||||
{ label: "WhatsApp", href: "https://wa.me/" },
|
||||
{ label: "Instagram", href: "https://instagram.com/viora.bracelet" },
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2026 Viora Bracelet. All rights reserved."
|
||||
bottomLeftText="Viora Bracelet"
|
||||
bottomRightText="© 2026"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
@@ -11,7 +11,7 @@ html {
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-dm-sans), sans-serif;
|
||||
font-family: var(--font-inter), sans-serif;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overscroll-behavior: none;
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #fffefe;
|
||||
--card: #f6f7f4;
|
||||
--foreground: #080908;
|
||||
--primary-cta: #0e3a29;
|
||||
--background: #fbfbfb;
|
||||
--card: #ffffff;
|
||||
--foreground: #1a1a1a;
|
||||
--primary-cta: #15479c;
|
||||
--primary-cta-text: #fffefe;
|
||||
--secondary-cta: #e7eecd;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta-text: #080908;
|
||||
--accent: #35c18b;
|
||||
--background-accent: #ecebe4;
|
||||
--accent: #e0e7ff;
|
||||
--background-accent: #c7d2fe;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user