development/0c2b0ce6-6616-40ee-8823-041f1ae4a9f7
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
DK
2026-01-30 17:29:56 +00:00
commit 0142fd8af6
555 changed files with 71602 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
src/app/blog/page.tsx Normal file
View File

@@ -0,0 +1,174 @@
"use client";
import { useEffect, useState } from "react";
import ReactLenis from "lenis/react";
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import { BookOpen } from 'lucide-react';
type BlogPost = {
id: string;
category: string;
title: string;
excerpt: string;
imageSrc: string;
imageAlt?: string;
authorName: string;
authorAvatar: string;
date: string;
onBlogClick?: () => void;
};
const defaultPosts: BlogPost[] = [
{
id: "1", category: "Design", title: "UX review presentations", excerpt: "How do you create compelling presentations that wow your colleagues and impress your managers?", imageSrc: "/placeholders/placeholder3.avif", imageAlt: "Abstract design with purple and silver tones", authorName: "Olivia Rhye", authorAvatar: "/placeholders/placeholder3.avif", date: "20 Jan 2025", onBlogClick: () => console.log("Blog 1 clicked"),
},
{
id: "2", category: "Development", title: "Building scalable applications", excerpt: "Learn the best practices for building applications that can handle millions of users.", imageSrc: "/placeholders/placeholder4.webp", imageAlt: "Development workspace", authorName: "John Smith", authorAvatar: "/placeholders/placeholder4.webp", date: "18 Jan 2025", onBlogClick: () => console.log("Blog 2 clicked"),
},
{
id: "3", category: "Marketing", title: "Content strategy essentials", excerpt: "Discover how to create a content strategy that drives engagement and conversions.", imageSrc: "/placeholders/placeholder3.avif", imageAlt: "Marketing strategy board", authorName: "Sarah Johnson", authorAvatar: "/placeholders/placeholder3.avif", date: "15 Jan 2025", onBlogClick: () => console.log("Blog 3 clicked"),
},
{
id: "4", category: "Product", title: "Product management 101", excerpt: "Everything you need to know to become an effective product manager in 2025.", imageSrc: "/placeholders/placeholder4.webp", imageAlt: "Product planning session", authorName: "Mike Davis", authorAvatar: "/placeholders/placeholder4.webp", date: "12 Jan 2025", onBlogClick: () => console.log("Blog 4 clicked"),
},
];
export default function BlogPage() {
const [posts, setPosts] = useState<BlogPost[]>(defaultPosts);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const fetchPosts = async () => {
try {
const apiUrl = process.env.NEXT_PUBLIC_API_URL;
const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
if (!apiUrl || !projectId) {
console.warn("NEXT_PUBLIC_API_URL or NEXT_PUBLIC_PROJECT_ID not configured, using default posts");
setIsLoading(false);
return;
}
const url = `${apiUrl}/posts/${projectId}?status=published`;
const response = await fetch(url, {
method: "GET", headers: {
"Content-Type": "application/json"},
});
if (response.ok) {
const resp = await response.json();
const data = resp.data;
if (Array.isArray(data) && data.length > 0) {
const mappedPosts = data.map((post: any) => ({
id: post.id || String(Math.random()),
category: post.category || "General", title: post.title || "Untitled", excerpt: post.excerpt || post.content.slice(0, 30) || "", imageSrc: post.imageUrl || "/placeholders/placeholder3.avif", imageAlt: post.imageAlt || post.title || "", authorName: post.author?.name || "Anonymous", authorAvatar: post.author?.avatar || "/placeholders/placeholder3.avif", date: post.date || post.createdAt || new Date().toLocaleDateString("en-GB", { day: "numeric", month: "short", year: "numeric" }),
onBlogClick: () => console.log(`Blog ${post.id} clicked`),
}));
setPosts(mappedPosts);
}
} else {
console.warn(`API request failed with status ${response.status}, using default posts`);
}
} catch (error) {
console.error("Error fetching posts:", error);
} finally {
setIsLoading(false);
}
};
fetchPosts();
}, []);
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="small"
sizing="largeSizeMediumTitles"
background="floatingGradient"
cardStyle="elevated"
primaryButtonStyle="flat"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<ReactLenis root>
<div className="min-h-screen bg-background">
<NavbarStyleCentered
brandName="Stride"
navItems={[
{ name: "Home", id: "/" },
{ name: "Shop", id: "products" },
{ name: "About", id: "about" },
{ name: "Reviews", id: "testimonials" },
{ name: "Contact", id: "contact" },
{ name: "Blog", id: "blog" }
]}
button={{ text: "Shop Now", href: "products" }}
/>
{isLoading ? (
<div className="w-content-width mx-auto py-20 text-center">
<p className="text-foreground">Loading posts...</p>
</div>
) : (
<BlogCardThree
blogs={posts}
title="Featured Articles"
description="Discover the latest insights about comfort, style, and the perfect flip flop experience"
tag="Stride Blog"
tagIcon={BookOpen}
textboxLayout="default"
useInvertedBackground="noInvert"
carouselMode="buttons"
animationType="slide-up"
uniformGridCustomHeightClasses="min-h-[600px]"
/>
)}
<FooterBaseCard
logoText="Stride"
copyrightText="© 2025 Stride Flip Flops. All rights reserved."
columns={[
{
title: "Shop", items: [
{ label: "All Products", href: "products" },
{ label: "Comfort Collection", href: "products" },
{ label: "Sport Edition", href: "products" },
{ label: "Premium Luxury", href: "products" }
]
},
{
title: "Company", items: [
{ label: "About Us", href: "about" },
{ label: "Sustainability", href: "about" },
{ label: "Careers", href: "#" },
{ label: "Press", href: "#" }
]
},
{
title: "Support", items: [
{ label: "Contact Us", href: "contact" },
{ label: "Shipping Info", href: "#" },
{ label: "Returns", href: "#" },
{ label: "FAQ", href: "#" }
]
},
{
title: "Connect", items: [
{ label: "Instagram", href: "https://instagram.com" },
{ label: "Facebook", href: "https://facebook.com" },
{ label: "Twitter", href: "https://twitter.com" },
{ label: "TikTok", href: "https://tiktok.com" }
]
}
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

BIN
src/app/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

538
src/app/globals.css Normal file
View File

@@ -0,0 +1,538 @@
@import "tailwindcss";
:root {
/* Base units */
/* --vw is set by ThemeProvider */
--background: #f5f4ef;;
--card: #dad6cd;;
--foreground: #2a2928;;
--primary-cta: #2a2928;;
--secondary-cta: #ecebea;;
--accent: #ffffff;;
--background-accent: #c6b180;;
/* Base spacing units */
--vw-0_25: calc(var(--vw) * 0.25);
--vw-0_5: calc(var(--vw) * 0.5);
--vw-0_625: calc(var(--vw) * 0.625);
--vw-0_75: calc(var(--vw) * 0.75);
--vw-1: calc(var(--vw) * 1);
--vw-1_25: calc(var(--vw) * 1.25);
--vw-1_5: calc(var(--vw) * 1.5);
--vw-1_75: calc(var(--vw) * 1.75);
--vw-2: calc(var(--vw) * 2);
--vw-2_25: calc(var(--vw) * 2.25);
--vw-2_5: calc(var(--vw) * 2.5);
--vw-2_75: calc(var(--vw) * 2.75);
--vw-3: calc(var(--vw) * 3);
/* width */
--width-5: clamp(4rem, 5vw, 6rem);
--width-7_5: clamp(5.625rem, 7.5vw, 7.5rem);
--width-10: clamp(7.5rem, 10vw, 10rem);
--width-12_5: clamp(9.375rem, 12.5vw, 12.5rem);
--width-15: clamp(11.25rem, 15vw, 15rem);
--width-17: clamp(12.75rem, 17vw, 17rem);
--width-17_5: clamp(13.125rem, 17.5vw, 17.5rem);
--width-20: clamp(15rem, 20vw, 20rem);
--width-21: clamp(15.75rem, 21vw, 21rem);
--width-22_5: clamp(16.875rem, 22.5vw, 22.5rem);
--width-25: clamp(18.75rem, 25vw, 25rem);
--width-26: clamp(19.5rem, 26vw, 26rem);
--width-27_5: clamp(20.625rem, 27.5vw, 27.5rem);
--width-30: clamp(22.5rem, 30vw, 30rem);
--width-32_5: clamp(24.375rem, 32.5vw, 32.5rem);
--width-35: clamp(26.25rem, 35vw, 35rem);
--width-37_5: clamp(28.125rem, 37.5vw, 37.5rem);
--width-40: clamp(30rem, 40vw, 40rem);
--width-42_5: clamp(31.875rem, 42.5vw, 42.5rem);
--width-45: clamp(33.75rem, 45vw, 45rem);
--width-47_5: clamp(35.625rem, 47.5vw, 47.5rem);
--width-50: clamp(37.5rem, 50vw, 50rem);
--width-52_5: clamp(39.375rem, 52.5vw, 52.5rem);
--width-55: clamp(41.25rem, 55vw, 55rem);
--width-57_5: clamp(43.125rem, 57.5vw, 57.5rem);
--width-60: clamp(45rem, 60vw, 60rem);
--width-62_5: clamp(46.875rem, 62.5vw, 62.5rem);
--width-65: clamp(48.75rem, 65vw, 65rem);
--width-67_5: clamp(50.625rem, 67.5vw, 67.5rem);
--width-70: clamp(52.5rem, 70vw, 70rem);
--width-72_5: clamp(54.375rem, 72.5vw, 72.5rem);
--width-75: clamp(56.25rem, 75vw, 75rem);
--width-77_5: clamp(58.125rem, 77.5vw, 77.5rem);
--width-80: clamp(60rem, 80vw, 80rem);
--width-82_5: clamp(61.875rem, 82.5vw, 82.5rem);
--width-85: clamp(63.75rem, 85vw, 85rem);
--width-87_5: clamp(65.625rem, 87.5vw, 87.5rem);
--width-90: clamp(67.5rem, 90vw, 90rem);
--width-92_5: clamp(69.375rem, 92.5vw, 92.5rem);
--width-95: clamp(71.25rem, 95vw, 95rem);
--width-97_5: clamp(73.125rem, 97.5vw, 97.5rem);
--width-100: clamp(75rem, 100vw, 100rem);
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
--width-x-padding-mask-fade: clamp(1.5rem, 4vw, 4rem);
--height-4: 1rem;
--height-5: 1.25rem;
--height-6: 1.5rem;
--height-7: 1.75rem;
--height-8: 2rem;
--height-9: 2.25rem;
--height-10: 2.5rem;
--height-11: 2.75rem;
--height-12: 3rem;
--height-30: 7.5rem;
--height-90: 22.5rem;
--height-100: 25rem;
--height-110: 27.5rem;
--height-120: 30rem;
--height-130: 32.5rem;
--height-140: 35rem;
--height-150: 37.5rem;
/* hero page padding */
--padding-hero-page-padding-half: calc((var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)) / 2);
--padding-hero-page-padding: calc(var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10));
--padding-hero-page-padding-1_5: calc(1.5 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
--padding-hero-page-padding-double: calc(2 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
}
@media (max-width: 767px) {
:root {
/* --vw and text sizing are set by ThemeProvider */
--width-5: 5vw;
--width-7_5: 7.5vw;
--width-10: 10vw;
--width-12_5: 12.5vw;
--width-15: 15vw;
--width-17_5: 17.5vw;
--width-20: 20vw;
--width-22_5: 22.5vw;
--width-25: 25vw;
--width-27_5: 27.5vw;
--width-30: 30vw;
--width-32_5: 32.5vw;
--width-35: 35vw;
--width-37_5: 37.5vw;
--width-40: 40vw;
--width-42_5: 42.5vw;
--width-45: 45vw;
--width-47_5: 47.5vw;
--width-50: 50vw;
--width-52_5: 52.5vw;
--width-55: 55vw;
--width-57_5: 57.5vw;
--width-60: 60vw;
--width-62_5: 62.5vw;
--width-65: 65vw;
--width-67_5: 67.5vw;
--width-70: 70vw;
--width-72_5: 72.5vw;
--width-75: 75vw;
--width-77_5: 77.5vw;
--width-80: 80vw;
--width-82_5: 82.5vw;
--width-85: 85vw;
--width-87_5: 87.5vw;
--width-90: 90vw;
--width-92_5: 92.5vw;
--width-95: 95vw;
--width-97_5: 97.5vw;
--width-100: 100vw;
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: var(--width-content-width);
--width-carousel-item-4: var(--width-content-width);
--width-x-padding-mask-fade: 10vw;
--height-4: 3.5vw;
--height-5: 4.5vw;
--height-6: 5.5vw;
--height-7: 6.5vw;
--height-8: 7.5vw;
--height-9: 8.5vw;
--height-10: 9vw;
--height-11: 10vw;
--height-12: 11vw;
--height-30: 25vw;
--height-90: 81vw;
--height-100: 90vw;
--height-110: 99vw;
--height-120: 108vw;
--height-130: 117vw;
--height-140: 126vw;
--height-150: 135vw;
}
}
@theme inline {
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-secondary-cta: var(--secondary-cta);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* theme border radius */
--radius-theme: var(--theme-border-radius);
--radius-theme-capped: var(--theme-border-radius-capped);
/* text */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
/* height */
--height-4: var(--height-4);
--height-5: var(--height-5);
--height-6: var(--height-6);
--height-7: var(--height-7);
--height-8: var(--height-8);
--height-9: var(--height-9);
--height-11: var(--height-11);
--height-12: var(--height-12);
--height-10: var(--height-10);
--height-30: var(--height-30);
--height-90: var(--height-90);
--height-100: var(--height-100);
--height-110: var(--height-110);
--height-120: var(--height-120);
--height-130: var(--height-130);
--height-140: var(--height-140);
--height-150: var(--height-150);
--height-page-padding: calc(2.25rem+var(--vw-1_5)+var(--vw-1_5));
/* width */
--width-5: var(--width-5);
--width-7_5: var(--width-7_5);
--width-10: var(--width-10);
--width-12_5: var(--width-12_5);
--width-15: var(--width-15);
--width-17: var(--width-17);
--width-17_5: var(--width-17_5);
--width-20: var(--width-20);
--width-21: var(--width-21);
--width-22_5: var(--width-22_5);
--width-25: var(--width-25);
--width-26: var(--width-26);
--width-27_5: var(--width-27_5);
--width-30: var(--width-30);
--width-32_5: var(--width-32_5);
--width-35: var(--width-35);
--width-37_5: var(--width-37_5);
--width-40: var(--width-40);
--width-42_5: var(--width-42_5);
--width-45: var(--width-45);
--width-47_5: var(--width-47_5);
--width-50: var(--width-50);
--width-52_5: var(--width-52_5);
--width-55: var(--width-55);
--width-57_5: var(--width-57_5);
--width-60: var(--width-60);
--width-62_5: var(--width-62_5);
--width-65: var(--width-65);
--width-67_5: var(--width-67_5);
--width-70: var(--width-70);
--width-72_5: var(--width-72_5);
--width-75: var(--width-75);
--width-77_5: var(--width-77_5);
--width-80: var(--width-80);
--width-82_5: var(--width-82_5);
--width-85: var(--width-85);
--width-87_5: var(--width-87_5);
--width-90: var(--width-90);
--width-92_5: var(--width-92_5);
--width-95: var(--width-95);
--width-97_5: var(--width-97_5);
--width-100: var(--width-100);
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-padding-expanded: var(--width-carousel-padding-expanded);
--width-carousel-padding-controls-expanded: var(--width-carousel-padding-controls-expanded);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
--width-x-padding-mask-fade: var(--width-x-padding-mask-fade);
--width-content-width-expanded: var(--width-content-width-expanded);
/* gap */
--spacing-1: var(--vw-0_25);
--spacing-2: var(--vw-0_5);
--spacing-3: var(--vw-0_75);
--spacing-4: var(--vw-1);
--spacing-5: var(--vw-1_25);
--spacing-6: var(--vw-1_5);
--spacing-7: var(--vw-1_75);
--spacing-8: var(--vw-2);
--spacing-x-1: var(--vw-0_25);
--spacing-x-2: var(--vw-0_5);
--spacing-x-3: var(--vw-0_75);
--spacing-x-4: var(--vw-1);
--spacing-x-5: var(--vw-1_25);
--spacing-x-6: var(--vw-1_5);
/* border radius */
--radius-none: 0;
--radius-sm: var(--vw-0_5);
--radius: var(--vw-0_75);
--radius-md: var(--vw-1);
--radius-lg: var(--vw-1_25);
--radius-xl: var(--vw-1_75);
--radius-full: 999px;
/* padding */
--padding-1: var(--vw-0_25);
--padding-2: var(--vw-0_5);
--padding-2.5: var(--vw-0_625);
--padding-3: var(--vw-0_75);
--padding-4: var(--vw-1);
--padding-5: var(--vw-1_25);
--padding-6: var(--vw-1_5);
--padding-7: var(--vw-1_75);
--padding-8: var(--vw-2);
--padding-x-1: var(--vw-0_25);
--padding-x-2: var(--vw-0_5);
--padding-x-3: var(--vw-0_75);
--padding-x-4: var(--vw-1);
--padding-x-5: var(--vw-1_25);
--padding-x-6: var(--vw-1_5);
--padding-x-7: var(--vw-1_75);
--padding-x-8: var(--vw-2);
--padding-hero-page-padding-half: var(--padding-hero-page-padding-half);
--padding-hero-page-padding: var(--padding-hero-page-padding);
--padding-hero-page-padding-1_5: var(--padding-hero-page-padding-1_5);
--padding-hero-page-padding-double: var(--padding-hero-page-padding-double);
/* margin */
--margin-1: var(--vw-0_25);
--margin-2: var(--vw-0_5);
--margin-3: var(--vw-0_75);
--margin-4: var(--vw-1);
--margin-5: var(--vw-1_25);
--margin-6: var(--vw-1_5);
--margin-7: var(--vw-1_75);
--margin-8: var(--vw-2);
--margin-x-1: var(--vw-0_25);
--margin-x-2: var(--vw-0_5);
--margin-x-3: var(--vw-0_75);
--margin-x-4: var(--vw-1);
--margin-x-5: var(--vw-1_25);
--margin-x-6: var(--vw-1_5);
--margin-x-7: var(--vw-1_75);
--margin-x-8: var(--vw-2);
}
@layer components {}
@layer utilities {
.tag-card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.mask-padding-x {
-webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
}
.mask-fade-bottom {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}
.mask-fade-y {
mask-image: linear-gradient(to bottom,
transparent 0%,
black var(--vw-1_5),
black calc(100% - var(--vw-1_5)),
transparent 100%);
}
.mask-fade-bottom-large {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
}
.mask-fade-bottom-long {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
}
.mask-fade-top-long {
-webkit-mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
}
.mask-fade-xy {
-webkit-mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
/* ANIMATION */
.animation-container {
animation:
fadeInOpacity 0.8s ease-in-out forwards,
fadeInTranslate 0.6s forwards;
}
.animation-container-fade {
animation: fadeInOpacity 0.8s ease-in-out forwards;
}
@keyframes fadeInOpacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInTranslate {
from {
transform: translateY(0.75vh);
}
to {
transform: translateY(0vh);
}
}
@keyframes aurora {
from {
background-position: 50% 50%, 50% 50%;
}
to {
background-position: 350% 50%, 350% 50%;
}
}
@keyframes spin-slow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes spin-reverse {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
.animate-spin-slow {
animation: spin-slow 15s linear infinite;
}
.animate-spin-reverse {
animation: spin-reverse 10s linear infinite;
}
@keyframes marquee-vertical {
from {
transform: translateY(0);
}
to {
transform: translateY(-50%);
}
}
.animate-marquee-vertical {
animation: marquee-vertical 20s linear infinite;
}
@keyframes orbit {
from {
transform: rotate(var(--initial-position, 0deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * var(--initial-position, 0deg)));
}
to {
transform: rotate(calc(var(--initial-position, 0deg) + 360deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * (var(--initial-position, 0deg) + 360deg)));
}
}
@keyframes map-dot-pulse {
0%, 100% {
transform: scale(0.4);
opacity: 0.6;
}
50% {
transform: scale(1.4);
opacity: 1;
}
}
}
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-poppins), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-poppins), sans-serif;
}

1266
src/app/layout.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

277
src/app/page.tsx Normal file
View File

@@ -0,0 +1,277 @@
"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import SplitAbout from '@/components/sections/about/SplitAbout';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Cloud, Crown, Heart, Leaf, Mail, Palette, Shield, Sparkles, Star, Zap } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="small"
sizing="largeSizeMediumTitles"
background="floatingGradient"
cardStyle="elevated"
primaryButtonStyle="flat"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<div id="nav" data-section="nav">
<NavbarStyleCentered
brandName="Stride"
navItems={[
{ name: "Shop", id: "products" },
{ name: "About", id: "about" },
{ name: "Reviews", id: "testimonials" },
{ name: "Contact", id: "contact" },
{ name: "Blog", id: "blog" }
]}
button={{
text: "Shop Now", href: "products"
}}
/>
</div>
<div id="hero" data-section="hero">
<HeroLogo
logoText="Stride"
description="Premium flip flops designed for comfort, style, and sustainability. Step into your next adventure."
buttons={[
{ text: "Explore Collection", href: "products" },
{ text: "Learn More", href: "about" }
]}
imageSrc="https://img.b2bpic.net/free-photo/top-view-woman-with-summer-elements-writing-sand_23-2147683374.jpg"
imageAlt="Relaxing on beach with premium flip flops"
showDimOverlay={true}
logoLineHeight={1.2}
/>
</div>
<div id="products" data-section="products">
<ProductCardThree
title="Shop Our Collection"
description="Discover our range of premium flip flops in various styles and colors"
tag="New Arrivals"
tagIcon={Sparkles}
textboxLayout="default"
useInvertedBackground="noInvert"
products={[
{
id: "1", name: "Classic Blue Comfort", price: "$34.99", imageSrc: "https://img.b2bpic.net/free-photo/arrangement-with-flip-flops-sunglasses_23-2148922353.jpg", imageAlt: "Classic blue flip flops with cushioned sole", initialQuantity: 1
},
{
id: "2", name: "Tropical Print Paradise", price: "$39.99", imageSrc: "https://img.b2bpic.net/free-photo/view-flip-flops-with-summer-sunglasses-copy-space_23-2149460018.jpg", imageAlt: "Colorful tropical pattern flip flops", initialQuantity: 1
},
{
id: "3", name: "Minimalist Black", price: "$32.99", imageSrc: "https://img.b2bpic.net/free-photo/beach-concept-with-flip-flops-sand_23-2147796201.jpg", imageAlt: "Elegant black minimalist flip flops", initialQuantity: 1
},
{
id: "4", name: "Neon Pink Summer", price: "$36.99", imageSrc: "https://img.b2bpic.net/free-photo/flip-flops-old-weathered-blue-beach-wood_1101-3239.jpg", imageAlt: "Vibrant neon pink summer flip flops", initialQuantity: 1
},
{
id: "5", name: "Earth Tone Neutral", price: "$37.99", imageSrc: "https://img.b2bpic.net/free-photo/flip-flops-old-weathered-blue-beach-wood_1101-2356.jpg", imageAlt: "Natural tan beige eco-friendly flip flops", initialQuantity: 1
}
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
/>
</div>
<div id="about" data-section="about">
<SplitAbout
title="Why Choose Stride"
description="We're committed to creating the most comfortable, sustainable, and stylish flip flops for everyday living."
tag="Our Story"
tagIcon={Heart}
textboxLayout="default"
useInvertedBackground="invertDefault"
imagePosition="right"
bulletPoints={[
{
title: "Premium Comfort", description: "Ergonomically designed cushioned soles that feel like walking on clouds, perfect for all-day wear.", icon: Cloud
},
{
title: "Sustainable Materials", description: "Crafted from eco-friendly, recycled materials that are gentle on both feet and the environment.", icon: Leaf
},
{
title: "Lifetime Quality", description: "Built to last with durable construction and timeless designs that won't fade or wear out.", icon: Shield
},
{
title: "Stylish Designs", description: "From minimalist to bold patterns, our collection matches every mood and occasion seamlessly.", icon: Palette
}
]}
imageSrc="https://img.b2bpic.net/free-photo/close-up-man-exercising-after-online-instructor_23-2149240217.jpg"
imageAlt="Close-up of cushioned flip flop sole for maximum comfort"
buttons={[
{ text: "Shop All Products", href: "products" }
]}
/>
</div>
<div id="features" data-section="features">
<FeatureCardSix
title="How We Make the Perfect Flip Flop"
description="Every step of our production process is designed to deliver uncompromising quality and comfort"
tag="Our Process"
tagIcon={Zap}
textboxLayout="default"
useInvertedBackground="noInvert"
features={[
{
id: 1,
title: "Material Selection", description: "We hand-select premium sustainable materials from trusted suppliers worldwide to ensure the highest quality.", imageSrc: "https://img.b2bpic.net/free-photo/young-fit-woman-sportswear-trains-outdoors-playground_1153-6750.jpg", imageAlt: "Material selection process"
},
{
id: 2,
title: "Comfort Engineering", description: "Advanced cushioning technology is integrated into every sole for ergonomic support that lasts.", imageSrc: "https://img.b2bpic.net/free-photo/close-up-man-exercising-after-online-instructor_23-2149240217.jpg", imageAlt: "Comfort engineering process"
},
{
id: 3,
title: "Quality Testing", description: "Each pair undergoes rigorous testing to ensure durability, comfort, and style standards are met.", imageSrc: "https://img.b2bpic.net/free-photo/young-fit-woman-sportswear-trains-outdoors-playground_1153-6750.jpg", imageAlt: "Quality testing process"
},
{
id: 4,
title: "Lightweight Design", description: "Our innovative design keeps flip flops lightweight and portable, perfect for travel and daily activities.", imageSrc: "https://img.b2bpic.net/free-vector/mattress-layers-material-infographics_1284-25413.jpg", imageAlt: "Lightweight design process"
}
]}
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardNine
title="Our Collections"
description="Explore our curated flip flop collections designed for every lifestyle and preference"
tag="Premium Selection"
tagIcon={Crown}
textboxLayout="default"
useInvertedBackground="invertDefault"
animationType="slide-up"
plans={[
{
id: "comfort", title: "Comfort Collection", price: "$29.99", period: "- $34.99", imageSrc: "https://img.b2bpic.net/free-photo/legs-woman-beach_23-2147813371.jpg", imageAlt: "Comfort collection flip flops", button: {
text: "Explore", href: "products"
},
features: [
"Cushioned EVA foam sole", "Breathable fabric strap", "Available in 8 colors", "Perfect for casual wear", "Machine washable"
]
},
{
id: "sport", title: "Sport Edition", price: "$39.99", period: "- $44.99", imageSrc: "https://img.b2bpic.net/free-photo/body-part-female-feet-sand-beach-by-sea-close-up_169016-9736.jpg", imageAlt: "Sport edition performance flip flops", button: {
text: "Explore", href: "products"
},
features: [
"Advanced grip sole", "Moisture-wicking straps", "Arch support technology", "Ideal for active lifestyle", "Extra durability"
]
},
{
id: "premium", title: "Premium Luxury", price: "$49.99", period: "- $59.99", imageSrc: "https://img.b2bpic.net/free-photo/woman-relaxing-with-feet-up-hammock-beach_107420-9907.jpg", imageAlt: "Premium luxury flip flops collection", button: {
text: "Explore", href: "products"
},
features: [
"Leather and suede materials", "Limited edition designs", "Premium gift packaging", "Lifetime replacement guarantee", "Concierge sizing service"
]
}
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFive
title="What Our Customers Say"
description="Join thousands of happy customers who've stepped into comfort with Stride"
tag="Real Reviews"
tagIcon={Star}
textboxLayout="default"
useInvertedBackground="noInvert"
testimonials={[
{
id: "1", name: "Jessica Martinez, Busy Mom", date: "Date: 15 January 2025", title: "Finally, flip flops that keep up with my life!", quote: "I've tried so many flip flop brands, but Stride is the first one that doesn't leave my feet sore by the end of the day. The cushioning is amazing and they look great too. My kids even want their own pairs now!", tag: "Comfort Collection", avatarSrc: "https://img.b2bpic.net/free-photo/enthusiastic-woman-laughing-turquoise-wall_197531-19734.jpg", imageSrc: "https://img.b2bpic.net/free-photo/enthusiastic-woman-laughing-turquoise-wall_197531-19734.jpg", avatarAlt: "Jessica Martinez", imageAlt: "Jessica Martinez testimonial"
},
{
id: "2", name: "David Chen, Travel Blogger", date: "Date: 22 January 2025", title: "Perfect travel companion", quote: "As someone who travels constantly, I need shoes that are lightweight, durable, and stylish. Stride flip flops check all the boxes. They've been to 12 countries with me and still look brand new!", tag: "Sport Edition", avatarSrc: "https://img.b2bpic.net/free-photo/beautiful-woman-cafe_273609-12705.jpg", imageSrc: "https://img.b2bpic.net/free-photo/beautiful-woman-cafe_273609-12705.jpg", avatarAlt: "David Chen", imageAlt: "David Chen testimonial"
},
{
id: "3", name: "Sarah Johnson, Yoga Instructor", date: "Date: 18 January 2025", title: "Sustainable AND comfortable", quote: "I love that Stride uses eco-friendly materials. It feels good knowing I'm making a positive impact with my purchase. Plus, the arch support in these flip flops is genuinely helpful for my active lifestyle.", tag: "Premium Luxury", avatarSrc: "https://img.b2bpic.net/free-photo/young-hispanic-man-smiling-confident-looking-side-street_839833-27819.jpg", imageSrc: "https://img.b2bpic.net/free-photo/young-hispanic-man-smiling-confident-looking-side-street_839833-27819.jpg", avatarAlt: "Sarah Johnson", imageAlt: "Sarah Johnson testimonial"
},
{
id: "4", name: "Michael Rodriguez, College Student", date: "Date: 12 January 2025", title: "Style that doesn't compromise comfort", quote: "These are honestly the best flip flops I've ever owned. They're comfortable enough for long days on campus, but stylish enough to wear out with friends. Definitely worth the investment!", tag: "Comfort Collection", avatarSrc: "https://img.b2bpic.net/free-photo/portrait-woman-business-embrace-confidence-posing-beauty-black-african-american-isolated-gray-background_640221-39.jpg", imageSrc: "https://img.b2bpic.net/free-photo/portrait-woman-business-embrace-confidence-posing-beauty-black-african-american-isolated-gray-background_640221-39.jpg", avatarAlt: "Michael Rodriguez", imageAlt: "Michael Rodriguez testimonial"
},
{
id: "5", name: "Emma Wilson, Fitness Enthusiast", date: "Date: 25 January 2025", title: "Great support for active recovery", quote: "I wear these after my workouts and the support is incredible. The moisture-wicking material keeps my feet dry, and they look good enough to wear anywhere. Highly recommend to anyone with an active lifestyle!", tag: "Sport Edition", avatarSrc: "https://img.b2bpic.net/free-photo/indoor-portrait-cheerful-man-good-mood_273609-12337.jpg", imageSrc: "https://img.b2bpic.net/free-photo/indoor-portrait-cheerful-man-good-mood_273609-12337.jpg", avatarAlt: "Emma Wilson", imageAlt: "Emma Wilson testimonial"
},
{
id: "6", name: "Thomas Anderson, Gift Giver", date: "Date: 8 January 2025", title: "The perfect gift everyone actually wants", quote: "I bought the Premium Collection as gifts for my parents and they absolutely love them. The packaging was beautiful and the quality is unmatched. They've already worn them every single day!", tag: "Premium Luxury", avatarSrc: "https://img.b2bpic.net/free-photo/middle-age-greyhaired-man-wearing-casual-clothes-doing-happy-thumbs-up-gesture-with-hand-approving-expression-looking-camera-showing-success_839833-27567.jpg", imageSrc: "https://img.b2bpic.net/free-photo/middle-age-greyhaired-man-wearing-casual-clothes-doing-happy-thumbs-up-gesture-with-hand-approving-expression-looking-camera-showing-success_839833-27567.jpg", avatarAlt: "Thomas Anderson", imageAlt: "Thomas Anderson testimonial"
}
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
tag="Newsletter"
tagIcon={Mail}
title="Stay Updated on New Releases"
description="Subscribe to our newsletter for exclusive discounts, new product launches, and comfort tips delivered to your inbox."
useInvertedBackground="invertDefault"
imageSrc="https://img.b2bpic.net/free-vector/computer-with-social-profile-social-community_24877-53905.jpg"
imageAlt="Newsletter subscription illustration"
mediaPosition="right"
inputPlaceholder="Enter your email"
buttonText="Subscribe"
termsText="We respect your privacy. Unsubscribe anytime. We'll only send you updates about new products and special offers."
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="Stride"
copyrightText="© 2025 Stride Flip Flops. All rights reserved."
columns={[
{
title: "Shop", items: [
{ label: "All Products", href: "products" },
{ label: "Comfort Collection", href: "products" },
{ label: "Sport Edition", href: "products" },
{ label: "Premium Luxury", href: "products" }
]
},
{
title: "Company", items: [
{ label: "About Us", href: "about" },
{ label: "Sustainability", href: "about" },
{ label: "Careers", href: "#" },
{ label: "Press", href: "#" }
]
},
{
title: "Support", items: [
{ label: "Contact Us", href: "contact" },
{ label: "Shipping Info", href: "#" },
{ label: "Returns", href: "#" },
{ label: "FAQ", href: "#" }
]
},
{
title: "Connect", items: [
{ label: "Instagram", href: "https://instagram.com" },
{ label: "Facebook", href: "https://facebook.com" },
{ label: "Twitter", href: "https://twitter.com" },
{ label: "TikTok", href: "https://tiktok.com" }
]
}
]}
/>
</div>
</ThemeProvider>
);
}