Merge version_4 into main #4
@@ -2,8 +2,7 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { motion } from "framer-motion";
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
|
||||
@@ -16,13 +15,6 @@ import SplitAbout from '@/components/sections/about/SplitAbout';
|
||||
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
||||
|
||||
export default function LandingPage() {
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => setLoading(false), 2000);
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
@@ -30,31 +22,12 @@ export default function LandingPage() {
|
||||
borderRadius="pill"
|
||||
contentWidth="smallMedium"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="fluid"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="light"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<AnimatePresence>
|
||||
{loading && (
|
||||
<motion.div
|
||||
key="loader"
|
||||
initial={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 z-[9999] flex items-center justify-center bg-background"
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0.8, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
className="text-2xl font-bold tracking-widest text-primary-cta"
|
||||
>
|
||||
PORTFOLIO
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
<ReactLenis root>
|
||||
<div className="[&>div]:sticky [&>div]:top-0 [&>div]:h-screen [&>div]:overflow-hidden">
|
||||
<div id="nav" data-section="nav">
|
||||
@@ -65,7 +38,7 @@ export default function LandingPage() {
|
||||
{ name: "Services", id: "#services" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="Portfolio"
|
||||
brandName="PORTFOLIO"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -82,11 +55,11 @@ export default function LandingPage() {
|
||||
description="Scroll through layered projects that unfold in real time. Experience design that transcends static display."
|
||||
buttons={[{ text: "Explore My Work", href: "#work" }]}
|
||||
slides={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-optical-fiber-details_23-2149212578.jpg?_wi=1", imageAlt: "Abstract red shapes 1" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-optical-fiber-details_23-2149212578.jpg?_wi=1", imageAlt: "Abstract white shapes 1" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/marble-background-digital-art-marbling-texture-ruby-colors-ai-generated-image_511042-576.jpg?_wi=1", imageAlt: "Architecture patterns" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/abstract-motion-blur-messy-light-trail-black-background_23-2148055596.jpg", imageAlt: "Liquid red lines" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/gypsum-bust-coral-background-with-geometric-shapes_23-2149588229.jpg", imageAlt: "Red sculpture" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/colour-accent-corporate-presentation-background_1048-10245.jpg", imageAlt: "Abstract red grid" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/abstract-motion-blur-messy-light-trail-black-background_23-2148055596.jpg", imageAlt: "Liquid lines" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/gypsum-bust-coral-background-with-geometric-shapes_23-2149588229.jpg", imageAlt: "Sculpture" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/colour-accent-corporate-presentation-background_1048-10245.jpg", imageAlt: "Abstract grid" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/medical-syringe-symbol-vaccination-stop-coronavirus-concept-red-background_559531-10291.jpg", imageAlt: "Typography art" },
|
||||
]}
|
||||
autoplayDelay={4000}
|
||||
@@ -136,9 +109,6 @@ export default function LandingPage() {
|
||||
{ id: "p1", name: "UI Dashboard", price: "UX Case Study", variant: "Web", imageSrc: "http://img.b2bpic.net/free-photo/modern-business-desk-with-virtual-reality-headset_23-2148513458.jpg" },
|
||||
{ id: "p2", name: "Branding Suite", price: "Graphic Design", variant: "Print", imageSrc: "http://img.b2bpic.net/free-photo/close-up-body-butter-recipient_23-2148543017.jpg" },
|
||||
{ id: "p3", name: "App Concept", price: "Product Design", variant: "Mobile", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hands-holding-smartphone_23-2150671595.jpg" },
|
||||
{ id: "p4", name: "Gallery Poster", price: "Design System", variant: "Art", imageSrc: "http://img.b2bpic.net/free-photo/burning-paper-background-still-life_23-2150093376.jpg" },
|
||||
{ id: "p5", name: "Digital Tool", price: "Tech Innovation", variant: "Web", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-view-modern-spiral-staircase-lights_181624-26451.jpg" },
|
||||
{ id: "p6", name: "Multimedia Installation", price: "Art Direction", variant: "Mixed", imageSrc: "http://img.b2bpic.net/free-photo/rectangular-scroll-ribbon-logo-label_53876-13825.jpg" },
|
||||
]}
|
||||
title="Featured Projects"
|
||||
description="A selection of creative work focused on high visual impact."
|
||||
@@ -170,9 +140,6 @@ export default function LandingPage() {
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/closeup-beautiful-strict-woman-glasses_1262-1732.jpg", alt: "Client 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg", alt: "Client 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-serious-young-businessman-glasses_1262-3810.jpg", alt: "Client 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/medium-shot-young-man-posing-studio_23-2149411430.jpg", alt: "Client 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/unknown-man-posing-with-blue-background-medium-shot_23-2149417616.jpg", alt: "Client 5" },
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="blur-reveal"
|
||||
@@ -185,7 +152,6 @@ export default function LandingPage() {
|
||||
faqs={[
|
||||
{ id: "q1", title: "Available for freelance?", content: "Yes, I am currently accepting new projects." },
|
||||
{ id: "q2", title: "How do you work?", content: "I start with deep discovery before prototyping." },
|
||||
{ id: "q3", title: "Do you offer maintenance?", content: "I provide ongoing support for all my projects." },
|
||||
]}
|
||||
sideTitle="Common Questions"
|
||||
faqsAnimation="slide-up"
|
||||
@@ -195,7 +161,7 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "animated-grid" }}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Let's Talk"
|
||||
title="Ready to build something together?"
|
||||
description="Let's push the boundaries of digital experience. Send me a message and we'll start the conversation."
|
||||
@@ -209,7 +175,6 @@ export default function LandingPage() {
|
||||
columns={[
|
||||
{ items: [{ label: "Work", href: "#work" }, { label: "About", href: "#about" }] },
|
||||
{ items: [{ label: "Services", href: "#services" }, { label: "Contact", href: "#contact" }] },
|
||||
{ items: [{ label: "Twitter", href: "#" }, { label: "Instagram", href: "#" }] },
|
||||
]}
|
||||
logoText="PORTFOLIO"
|
||||
/>
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #ffffff;
|
||||
--background: #ffffff;
|
||||
--card: #f9f9f9;
|
||||
--foreground: #000000;
|
||||
--primary-cta: #e63946;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #1a1a1a;
|
||||
--secondary-cta: #000000;
|
||||
--secondary-cta-text: #ffffff;
|
||||
--accent: #e63946;
|
||||
--background-accent: #5e1919;
|
||||
--background-accent: #f9f9f9;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user