Merge version_1 into main #2
254
src/app/page.tsx
254
src/app/page.tsx
@@ -32,29 +32,17 @@ export default function LandingPage() {
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "#hero",
|
||||
},
|
||||
name: "Home", id: "#hero"},
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
name: "About", id: "#about"},
|
||||
{
|
||||
name: "Features",
|
||||
id: "#features",
|
||||
},
|
||||
name: "Features", id: "#features"},
|
||||
{
|
||||
name: "Catalog",
|
||||
id: "#catalog",
|
||||
},
|
||||
name: "Catalog", id: "#catalog"},
|
||||
{
|
||||
name: "FAQs",
|
||||
id: "#faqs",
|
||||
},
|
||||
name: "FAQs", id: "#faqs"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
name: "Contact", id: "#contact"},
|
||||
]}
|
||||
logoSrc="http://img.b2bpic.net/free-vector/gradient-book-logo-template_23-2148815103.jpg"
|
||||
logoAlt="DreFinds Logo"
|
||||
@@ -67,35 +55,22 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
variant: "sparkles-gradient"}}
|
||||
title="DreFinds: Your Visual Spreadsheet Archive"
|
||||
description="Browse large product spreadsheets effortlessly with a sleek, modern interface. Discover items with rich visuals and direct links, updating automatically."
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/neon-purple-lights-with-bokeh-effect_1017-2671.jpg?_wi=1",
|
||||
imageAlt: "Modern data dashboard",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/neon-purple-lights-with-bokeh-effect_1017-2671.jpg", imageAlt: "Modern data dashboard"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dark-blue-kitchen-cabinets-with-copper-hardware-minimalist-furniture-design-home_169016-72747.jpg?_wi=1",
|
||||
imageAlt: "Product grid UI",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dark-blue-kitchen-cabinets-with-copper-hardware-minimalist-furniture-design-home_169016-72747.jpg", imageAlt: "Product grid UI"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/small-business-analysis-pie-chart-concept_53876-132158.jpg?_wi=1",
|
||||
imageAlt: "Search and filter interface",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/small-business-analysis-pie-chart-concept_53876-132158.jpg", imageAlt: "Search and filter interface"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-flowing-lines-particles_1048-12945.jpg",
|
||||
imageAlt: "Abstract data synchronization",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-flowing-lines-particles_1048-12945.jpg", imageAlt: "Abstract data synchronization"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-smartphone-with-live-abstract-wallpaper-coming-out-screen_23-2151033669.jpg",
|
||||
imageAlt: "Mobile product catalog UI",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-smartphone-with-live-abstract-wallpaper-coming-out-screen_23-2151033669.jpg", imageAlt: "Mobile product catalog UI"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blue-beams-stretch-into-depth-light-rhythm_169016-71300.jpg",
|
||||
imageAlt: "Digital archive concept",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blue-beams-stretch-into-depth-light-rhythm_169016-71300.jpg", imageAlt: "Digital archive concept"},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
@@ -106,9 +81,7 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
title="The Vision Behind DreFinds"
|
||||
description={[
|
||||
"DreFinds transforms cumbersome Google Spreadsheets into beautiful, dynamic visual catalogs. Say goodbye to endless scrolling and hello to an intuitive browsing experience.",
|
||||
"We’re not an e-commerce platform, a marketplace, or a business. Our sole purpose is to provide an elegant interface for your existing product data, making discovery simple and visually engaging.",
|
||||
]}
|
||||
"DreFinds transforms cumbersome Google Spreadsheets into beautiful, dynamic visual catalogs. Say goodbye to endless scrolling and hello to an intuitive browsing experience.", "We’re not an e-commerce platform, a marketplace, or a business. Our sole purpose is to provide an elegant interface for your existing product data, making discovery simple and visually engaging."]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -119,72 +92,40 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Real-time Sync",
|
||||
description: "Your catalog updates automatically as you modify your Google Spreadsheet, ensuring your archive is always current.",
|
||||
icon: RefreshCw,
|
||||
title: "Real-time Sync", description: "Your catalog updates automatically as you modify your Google Spreadsheet, ensuring your archive is always current.", icon: RefreshCw,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/cloud-computing-with-data-inflow-outflow-binary-codes_1017-31868.jpg",
|
||||
imageAlt: "Real-time sync graphic",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/cloud-computing-with-data-inflow-outflow-binary-codes_1017-31868.jpg", imageAlt: "Real-time sync graphic"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/remote-employee-holding-chroma-key-device-analyzing-business-graphics_482257-82851.jpg",
|
||||
imageAlt: "Live data feed UI",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/gradient-book-logo-template_23-2148815103.jpg",
|
||||
imageAlt: "real time data sync icon",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/remote-employee-holding-chroma-key-device-analyzing-business-graphics_482257-82851.jpg", imageAlt: "Live data feed UI"},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Visual Product Cards",
|
||||
description: "Each product appears with its exact image and name, transformed from spreadsheet data into a stunning visual card.",
|
||||
icon: Image,
|
||||
title: "Visual Product Cards", description: "Each product appears with its exact image and name, transformed from spreadsheet data into a stunning visual card.", icon: Image,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/low-angle-view-illuminated-pendant-light_1359-60.jpg",
|
||||
imageAlt: "Visual product grid",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/low-angle-view-illuminated-pendant-light_1359-60.jpg", imageAlt: "Visual product grid"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-phone-mock-up-with-eco-friendly-objects_23-2148289768.jpg",
|
||||
imageAlt: "Product card closeup",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/neon-purple-lights-with-bokeh-effect_1017-2671.jpg?_wi=2",
|
||||
imageAlt: "real time data sync icon",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-phone-mock-up-with-eco-friendly-objects_23-2148289768.jpg", imageAlt: "Product card closeup"},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Instant DHGate Access",
|
||||
description: "Click any product card to instantly open the corresponding DHGate link in a new tab, streamlining your sourcing process.",
|
||||
icon: Link,
|
||||
title: "Instant DHGate Access", description: "Click any product card to instantly open the corresponding DHGate link in a new tab, streamlining your sourcing process.", icon: Link,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-geometric-background-shapes-texture_1194-305433.jpg",
|
||||
imageAlt: "Direct link graphic",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-geometric-background-shapes-texture_1194-305433.jpg", imageAlt: "Direct link graphic"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/manager-preparing-store-reopening_23-2149142193.jpg",
|
||||
imageAlt: "Instant tab opening animation",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dark-blue-kitchen-cabinets-with-copper-hardware-minimalist-furniture-design-home_169016-72747.jpg?_wi=2",
|
||||
imageAlt: "real time data sync icon",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/manager-preparing-store-reopening_23-2149142193.jpg", imageAlt: "Instant tab opening animation"},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Dynamic Search & Filters",
|
||||
description: "Quickly find what you're looking for with a fast search bar and intelligent filters derived directly from your spreadsheet data.",
|
||||
icon: Search,
|
||||
title: "Dynamic Search & Filters", description: "Quickly find what you're looking for with a fast search bar and intelligent filters derived directly from your spreadsheet data.", icon: Search,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-3d-buttons_23-2149917545.jpg",
|
||||
imageAlt: "Fast search bar UI",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-3d-buttons_23-2149917545.jpg", imageAlt: "Fast search bar UI"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-control-panel_23-2151957130.jpg",
|
||||
imageAlt: "Interactive filter panel",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/small-business-analysis-pie-chart-concept_53876-132158.jpg?_wi=2",
|
||||
imageAlt: "real time data sync icon",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-control-panel_23-2151957130.jpg", imageAlt: "Interactive filter panel"},
|
||||
]
|
||||
},
|
||||
]}
|
||||
title="Powerful Features, Seamless Experience"
|
||||
@@ -199,33 +140,16 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "10,000+",
|
||||
title: "Products Indexed",
|
||||
items: [
|
||||
"Fast",
|
||||
"Accurate",
|
||||
"Comprehensive",
|
||||
],
|
||||
id: "1", value: "10,000+", title: "Products Indexed", items: [
|
||||
"Fast", "Accurate", "Comprehensive"],
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
value: "100+",
|
||||
title: "Categories Mapped",
|
||||
items: [
|
||||
"Organized",
|
||||
"Filterable",
|
||||
"Dynamic",
|
||||
],
|
||||
id: "2", value: "100+", title: "Categories Mapped", items: [
|
||||
"Organized", "Filterable", "Dynamic"],
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
value: "Real-time",
|
||||
title: "Sync Frequency",
|
||||
items: [
|
||||
"Always up-to-date",
|
||||
"No manual refreshes",
|
||||
],
|
||||
id: "3", value: "Real-time", title: "Sync Frequency", items: [
|
||||
"Always up-to-date", "No manual refreshes"],
|
||||
},
|
||||
]}
|
||||
title="Your Data, Elevated"
|
||||
@@ -239,25 +163,13 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "What is DreFinds?",
|
||||
content: "DreFinds is a visual browser designed to make exploring large Google Spreadsheets of products more intuitive and visually appealing. It's an interface, not an e-commerce platform.",
|
||||
},
|
||||
id: "1", title: "What is DreFinds?", content: "DreFinds is a visual browser designed to make exploring large Google Spreadsheets of products more intuitive and visually appealing. It's an interface, not an e-commerce platform."},
|
||||
{
|
||||
id: "2",
|
||||
title: "How does DreFinds get its data?",
|
||||
content: "DreFinds connects directly to your Google Spreadsheet. All product names, images, and DHGate links are pulled directly from specified cells in your spreadsheet rows, ensuring real-time accuracy.",
|
||||
},
|
||||
id: "2", title: "How does DreFinds get its data?", content: "DreFinds connects directly to your Google Spreadsheet. All product names, images, and DHGate links are pulled directly from specified cells in your spreadsheet rows, ensuring real-time accuracy."},
|
||||
{
|
||||
id: "3",
|
||||
title: "Is DreFinds an e-commerce platform?",
|
||||
content: "No, DreFinds is explicitly not an e-commerce website, marketplace, or business. It simply serves as a visual front-end for your existing spreadsheet data without any transaction capabilities.",
|
||||
},
|
||||
id: "3", title: "Is DreFinds an e-commerce platform?", content: "No, DreFinds is explicitly not an e-commerce website, marketplace, or business. It simply serves as a visual front-end for your existing spreadsheet data without any transaction capabilities."},
|
||||
{
|
||||
id: "4",
|
||||
title: "Can I add products directly on DreFinds?",
|
||||
content: "No, all product data, including names, images, and links, must be managed directly within your Google Spreadsheet. DreFinds will automatically reflect any changes you make there.",
|
||||
},
|
||||
id: "4", title: "Can I add products directly on DreFinds?", content: "No, all product data, including names, images, and links, must be managed directly within your Google Spreadsheet. DreFinds will automatically reflect any changes you make there."},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/view-3d-button_23-2149917527.jpg"
|
||||
imageAlt="FAQ and knowledge base interface"
|
||||
@@ -277,52 +189,22 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "product-1",
|
||||
name: "Luxury Silk Scarf",
|
||||
price: "N/A",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-confident-blond-female-trendy-summer-black-oversize-clothes-sexy-carefree-woman-posing-near-white-brick-wall-studio-positive-model-having-fun-indoors-sunglasses_158538-27072.jpg",
|
||||
imageAlt: "Luxury Silk Scarf",
|
||||
onProductClick: "open-dhgate-link",
|
||||
id: "product-1", name: "Luxury Silk Scarf", price: "N/A", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-confident-blond-female-trendy-summer-black-oversize-clothes-sexy-carefree-woman-posing-near-white-brick-wall-studio-positive-model-having-fun-indoors-sunglasses_158538-27072.jpg", imageAlt: "Luxury Silk Scarf", onProductClick: () => {},
|
||||
},
|
||||
{
|
||||
id: "product-2",
|
||||
name: "Designer Leather Wallet",
|
||||
price: "N/A",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-futuristic-sneakers-presentation_23-2151005715.jpg",
|
||||
imageAlt: "Designer Leather Wallet",
|
||||
onProductClick: "open-dhgate-link",
|
||||
id: "product-2", name: "Designer Leather Wallet", price: "N/A", imageSrc: "http://img.b2bpic.net/free-photo/close-up-futuristic-sneakers-presentation_23-2151005715.jpg", imageAlt: "Designer Leather Wallet", onProductClick: () => {},
|
||||
},
|
||||
{
|
||||
id: "product-3",
|
||||
name: "Classic Aviator Sunglasses",
|
||||
price: "N/A",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/flat-white-shirt_23-2147730453.jpg",
|
||||
imageAlt: "Classic Aviator Sunglasses",
|
||||
onProductClick: "open-dhgate-link",
|
||||
id: "product-3", name: "Classic Aviator Sunglasses", price: "N/A", imageSrc: "http://img.b2bpic.net/free-photo/flat-white-shirt_23-2147730453.jpg", imageAlt: "Classic Aviator Sunglasses", onProductClick: () => {},
|
||||
},
|
||||
{
|
||||
id: "product-4",
|
||||
name: "Vintage Gold Necklace",
|
||||
price: "N/A",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-fastens-cufflink-his-business-suit_8353-11456.jpg",
|
||||
imageAlt: "Vintage Gold Necklace",
|
||||
onProductClick: "open-dhgate-link",
|
||||
id: "product-4", name: "Vintage Gold Necklace", price: "N/A", imageSrc: "http://img.b2bpic.net/free-photo/man-fastens-cufflink-his-business-suit_8353-11456.jpg", imageAlt: "Vintage Gold Necklace", onProductClick: () => {},
|
||||
},
|
||||
{
|
||||
id: "product-5",
|
||||
name: "Ergonomic Office Chair",
|
||||
price: "N/A",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-carrying-laptop-bag-face-mask_23-2148727633.jpg",
|
||||
imageAlt: "Ergonomic Office Chair",
|
||||
onProductClick: "open-dhgate-link",
|
||||
id: "product-5", name: "Ergonomic Office Chair", price: "N/A", imageSrc: "http://img.b2bpic.net/free-photo/woman-carrying-laptop-bag-face-mask_23-2148727633.jpg", imageAlt: "Ergonomic Office Chair", onProductClick: () => {},
|
||||
},
|
||||
{
|
||||
id: "product-6",
|
||||
name: "Smart Fitness Tracker",
|
||||
price: "N/A",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/expressive-woman-posing-outdoor_344912-3108.jpg",
|
||||
imageAlt: "Smart Fitness Tracker",
|
||||
onProductClick: "open-dhgate-link",
|
||||
id: "product-6", name: "Smart Fitness Tracker", price: "N/A", imageSrc: "http://img.b2bpic.net/free-photo/expressive-woman-posing-outdoor_344912-3108.jpg", imageAlt: "Smart Fitness Tracker", onProductClick: () => {},
|
||||
},
|
||||
]}
|
||||
title="Curated Collection"
|
||||
@@ -337,22 +219,14 @@ export default function LandingPage() {
|
||||
description="Have questions about optimizing your product archive or need support? Reach out to us – we’re here to help."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
name: "name", type: "text", placeholder: "Your Name", required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
required: true,
|
||||
name: "email", type: "email", placeholder: "Your Email", required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Your Message",
|
||||
rows: 4,
|
||||
name: "message", placeholder: "Your Message", rows: 4,
|
||||
required: true,
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-vector/tech-devices-speech-bubbles_23-2147492055.jpg"
|
||||
@@ -367,37 +241,23 @@ export default function LandingPage() {
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation",
|
||||
items: [
|
||||
title: "Navigation", items: [
|
||||
{
|
||||
label: "Home",
|
||||
href: "#hero",
|
||||
},
|
||||
label: "Home", href: "#hero"},
|
||||
{
|
||||
label: "Catalog",
|
||||
href: "#catalog",
|
||||
},
|
||||
label: "Catalog", href: "#catalog"},
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#about",
|
||||
},
|
||||
label: "About Us", href: "#about"},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
label: "Contact", href: "#contact"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources",
|
||||
items: [
|
||||
title: "Resources", items: [
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#faqs",
|
||||
},
|
||||
label: "FAQ", href: "#faqs"},
|
||||
{
|
||||
label: "Features",
|
||||
href: "#features",
|
||||
},
|
||||
label: "Features", href: "#features"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
Reference in New Issue
Block a user