Update src/app/page.tsx
This commit is contained in:
112
src/app/page.tsx
112
src/app/page.tsx
@@ -2,9 +2,9 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import ContactForm from '@/components/form/ContactForm';
|
||||
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
@@ -28,21 +28,14 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home", id: "home"},
|
||||
{
|
||||
name: "Info", id: "info"},
|
||||
{
|
||||
name: "Experience", id: "experience"},
|
||||
{
|
||||
name: "Projects", id: "projects"},
|
||||
{
|
||||
name: "Contact", id: "contact"},
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Info", id: "info" },
|
||||
{ name: "Experience", id: "experience" },
|
||||
{ name: "Projects", id: "projects" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="𝔑onefolio"
|
||||
button={{
|
||||
text: "Contact Me", href: "#contact"
|
||||
}}
|
||||
button={{ text: "Contact Me", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -51,24 +44,13 @@ export default function LandingPage() {
|
||||
logoText="Ngabonziza Issa"
|
||||
description="Frontend Developer & UI/UX Designer. I design fast, modern websites that help brands grow."
|
||||
buttons={[
|
||||
{
|
||||
text: "View Projects", href: "#projects"},
|
||||
{
|
||||
text: "Hire Me", href: "#contact"},
|
||||
{ text: "View Projects", href: "#projects" },
|
||||
{ text: "Hire Me", href: "#contact" },
|
||||
]}
|
||||
slides={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-3d-modern-abstract-sphere-art_23-2150937433.jpg?_wi=1", imageAlt: "3D Developer Object"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-3d-modern-abstract-sphere-art_23-2150937433.jpg?_wi=2", imageAlt: "3D Developer Object"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-3d-modern-abstract-sphere-art_23-2150937433.jpg?_wi=3", imageAlt: "3D Developer Object"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-3d-modern-abstract-sphere-art_23-2150937433.jpg?_wi=4", imageAlt: "3D Developer Object"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-3d-modern-abstract-sphere-art_23-2150937433.jpg?_wi=5", imageAlt: "3D Developer Object"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-3d-modern-abstract-sphere-art_23-2150937433.jpg?_wi=6", imageAlt: "3D Developer Object"},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/view-3d-modern-abstract-sphere-art_23-2150937433.jpg?_wi=1", imageAlt: "3D Developer Object" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/view-3d-modern-abstract-sphere-art_23-2150937433.jpg?_wi=2", imageAlt: "3D Developer Object" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/view-3d-modern-abstract-sphere-art_23-2150937433.jpg?_wi=3", imageAlt: "3D Developer Object" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -86,12 +68,9 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Frontend/UI", description: "HTML, CSS, Figma, JS, TypeScript, ReactJS", imageSrc: "http://img.b2bpic.net/free-photo/view-3d-modern-abstract-sphere-art_23-2150937433.jpg?_wi=7", imageAlt: "3d floating sphere abstract"},
|
||||
{
|
||||
title: "Backend & Tools", description: "Node.js, Git, Tailwind, MongoDB", imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039324.jpg?_wi=1", imageAlt: "modern app interface mobile"},
|
||||
{
|
||||
title: "Performance", description: "SEO Optimization, Accessibility, Mobile-First Design", imageSrc: "http://img.b2bpic.net/free-photo/mock-up-animation-financial-stock-market-data-software-with-different-diagrams-graphs_482257-26904.jpg?_wi=1", imageAlt: "religious app interface design"},
|
||||
{ title: "Frontend/UI", description: "HTML, CSS, Figma, JS, TypeScript, ReactJS", imageSrc: "http://img.b2bpic.net/free-photo/view-3d-modern-abstract-sphere-art_23-2150937433.jpg?_wi=7", imageAlt: "3d floating sphere abstract" },
|
||||
{ title: "Backend & Tools", description: "Node.js, Git, Tailwind, MongoDB", imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039324.jpg?_wi=1", imageAlt: "modern app interface mobile" },
|
||||
{ title: "Performance", description: "SEO Optimization, Accessibility, Mobile-First Design", imageSrc: "http://img.b2bpic.net/free-photo/mock-up-animation-financial-stock-market-data-software-with-different-diagrams-graphs_482257-26904.jpg?_wi=1", imageAlt: "religious app interface design" },
|
||||
]}
|
||||
title="Skills & Experience"
|
||||
description="Tools and technologies I use to build seamless web experiences."
|
||||
@@ -105,24 +84,9 @@ export default function LandingPage() {
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1", brand: "React Native", name: "Social Platform", price: "View Demo", rating: 5,
|
||||
reviewCount: "12", imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039324.jpg?_wi=2"},
|
||||
{
|
||||
id: "2", brand: "React Native", name: "Muslims App", price: "View Demo", rating: 5,
|
||||
reviewCount: "24", imageSrc: "http://img.b2bpic.net/free-photo/mock-up-animation-financial-stock-market-data-software-with-different-diagrams-graphs_482257-26904.jpg?_wi=2"},
|
||||
{
|
||||
id: "3", brand: "Node.js", name: "Recipe Dashboard", price: "View Demo", rating: 5,
|
||||
reviewCount: "8", imageSrc: "http://img.b2bpic.net/free-photo/high-protein-meal-with-smartphone-arrangement_23-2149089685.jpg?_wi=1"},
|
||||
{
|
||||
id: "4", brand: "React Native", name: "Personal Portfolio", price: "View Demo", rating: 5,
|
||||
reviewCount: "10", imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039324.jpg?_wi=3"},
|
||||
{
|
||||
id: "5", brand: "Node.js", name: "E-Commerce", price: "View Demo", rating: 5,
|
||||
reviewCount: "15", imageSrc: "http://img.b2bpic.net/free-photo/mock-up-animation-financial-stock-market-data-software-with-different-diagrams-graphs_482257-26904.jpg?_wi=3"},
|
||||
{
|
||||
id: "6", brand: "Tailwind", name: "Landing Page", price: "View Demo", rating: 5,
|
||||
reviewCount: "5", imageSrc: "http://img.b2bpic.net/free-photo/high-protein-meal-with-smartphone-arrangement_23-2149089685.jpg?_wi=2"},
|
||||
{ id: "1", brand: "React Native", name: "Social Platform", price: "View Demo", rating: 5, reviewCount: "12", imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039324.jpg?_wi=2" },
|
||||
{ id: "2", brand: "React Native", name: "Muslims App", price: "View Demo", rating: 5, reviewCount: "24", imageSrc: "http://img.b2bpic.net/free-photo/mock-up-animation-financial-stock-market-data-software-with-different-diagrams-graphs_482257-26904.jpg?_wi=2" },
|
||||
{ id: "3", brand: "Node.js", name: "Recipe Dashboard", price: "View Demo", rating: 5, reviewCount: "8", imageSrc: "http://img.b2bpic.net/free-photo/high-protein-meal-with-smartphone-arrangement_23-2149089685.jpg?_wi=1" },
|
||||
]}
|
||||
title="Selected Projects"
|
||||
description="A collection of my recent work."
|
||||
@@ -130,38 +94,26 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "animated-grid"}}
|
||||
text="Available for new projects. Let's create something extraordinary."
|
||||
<ContactForm
|
||||
title="Let's Connect"
|
||||
description="Interested in working together? Send me a message."
|
||||
tag="Contact"
|
||||
inputPlaceholder="Your email address..."
|
||||
buttonText="Send Message"
|
||||
centered={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Socials", items: [
|
||||
{
|
||||
label: "Twitter", href: "#"},
|
||||
{
|
||||
label: "GitHub", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Navigation", items: [
|
||||
{
|
||||
label: "Home", href: "#home"},
|
||||
{
|
||||
label: "Projects", href: "#projects"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
<FooterBaseReveal
|
||||
logoText="𝔑onefolio"
|
||||
columns={[
|
||||
{ title: "Navigation", items: [{ label: "Home", href: "#home" }, { label: "Projects", href: "#projects" }] },
|
||||
{ title: "Contact", items: [{ label: "Email", href: "mailto:hello@example.com" }, { label: "Twitter", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user