From 899271e2c93ed4d6cf7c737eb8ae97874ddef9bc Mon Sep 17 00:00:00 2001 From: Luluameh Date: Sat, 14 Dec 2024 13:45:33 +0100 Subject: [PATCH] Create Characteristic - Landing Page component #13 --- package-lock.json | 22 +- package.json | 12 +- public/Line 5.svg | 3 + public/Line 6.svg | 3 + public/Line 7.svg | 3 + public/Line 8.svg | 3 + public/Line 9.svg | 3 + public/Logo.svg | 9 + public/MainLogo.svg | 9 + public/Stars 2.svg | 21 ++ public/governance-tools.svg | 3 + public/q1.svg | 21 ++ public/seamless.png | Bin 0 -> 1752 bytes public/simplify.png | Bin 0 -> 1555 bytes public/star 1.svg | 22 ++ src/app/globals.css | 4 +- src/app/layout.tsx | 14 +- src/app/page.tsx | 105 +--------- src/app/pages/LandingPage/LandingPage.tsx | 234 ++++++++++++++++++++++ src/component/Header.tsx | 34 ++++ tailwind.config.ts | 52 +++++ 21 files changed, 471 insertions(+), 106 deletions(-) create mode 100644 public/Line 5.svg create mode 100644 public/Line 6.svg create mode 100644 public/Line 7.svg create mode 100644 public/Line 8.svg create mode 100644 public/Line 9.svg create mode 100644 public/Logo.svg create mode 100644 public/MainLogo.svg create mode 100644 public/Stars 2.svg create mode 100644 public/governance-tools.svg create mode 100644 public/q1.svg create mode 100644 public/seamless.png create mode 100644 public/simplify.png create mode 100644 public/star 1.svg create mode 100644 src/app/pages/LandingPage/LandingPage.tsx create mode 100644 src/component/Header.tsx diff --git a/package-lock.json b/package-lock.json index 6a96d35..7b39e1e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,9 +8,11 @@ "name": "socialsphere", "version": "0.1.0", "dependencies": { + "@next/font": "^14.2.15", "next": "15.1.0", "react": "^19.0.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "react-icons": "^5.4.0" }, "devDependencies": { "@eslint/eslintrc": "^3", @@ -688,6 +690,15 @@ "fast-glob": "3.3.1" } }, + "node_modules/@next/font": { + "version": "14.2.15", + "resolved": "https://registry.npmjs.org/@next/font/-/font-14.2.15.tgz", + "integrity": "sha512-QopYhBmCDDrNDynbi+ZD1hDZXmQXVFo7TmAFp4DQgO/kogz1OLbQ92hPigJbj572eZ3GaaVxNIyYVn3/eAsehg==", + "license": "MIT", + "peerDependencies": { + "next": "*" + } + }, "node_modules/@next/swc-darwin-arm64": { "version": "15.1.0", "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.1.0.tgz", @@ -4543,6 +4554,15 @@ "react": "^19.0.0" } }, + "node_modules/react-icons": { + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.4.0.tgz", + "integrity": "sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index 64bb2f6..a8b260d 100644 --- a/package.json +++ b/package.json @@ -9,19 +9,21 @@ "lint": "next lint" }, "dependencies": { + "@next/font": "^14.2.15", + "next": "15.1.0", "react": "^19.0.0", "react-dom": "^19.0.0", - "next": "15.1.0" + "react-icons": "^5.4.0" }, "devDependencies": { - "typescript": "^5", + "@eslint/eslintrc": "^3", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", - "postcss": "^8", - "tailwindcss": "^3.4.1", "eslint": "^9", "eslint-config-next": "15.1.0", - "@eslint/eslintrc": "^3" + "postcss": "^8", + "tailwindcss": "^3.4.1", + "typescript": "^5" } } diff --git a/public/Line 5.svg b/public/Line 5.svg new file mode 100644 index 0000000..c143376 --- /dev/null +++ b/public/Line 5.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/Line 6.svg b/public/Line 6.svg new file mode 100644 index 0000000..9982af8 --- /dev/null +++ b/public/Line 6.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/Line 7.svg b/public/Line 7.svg new file mode 100644 index 0000000..4b07874 --- /dev/null +++ b/public/Line 7.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/Line 8.svg b/public/Line 8.svg new file mode 100644 index 0000000..0741ce1 --- /dev/null +++ b/public/Line 8.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/Line 9.svg b/public/Line 9.svg new file mode 100644 index 0000000..4b07874 --- /dev/null +++ b/public/Line 9.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/Logo.svg b/public/Logo.svg new file mode 100644 index 0000000..42f4c46 --- /dev/null +++ b/public/Logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/MainLogo.svg b/public/MainLogo.svg new file mode 100644 index 0000000..a0a69ef --- /dev/null +++ b/public/MainLogo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/Stars 2.svg b/public/Stars 2.svg new file mode 100644 index 0000000..efb1416 --- /dev/null +++ b/public/Stars 2.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/public/governance-tools.svg b/public/governance-tools.svg new file mode 100644 index 0000000..7194c35 --- /dev/null +++ b/public/governance-tools.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/q1.svg b/public/q1.svg new file mode 100644 index 0000000..404af40 --- /dev/null +++ b/public/q1.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/public/seamless.png b/public/seamless.png new file mode 100644 index 0000000000000000000000000000000000000000..2dec0a733e42cbe064f76beca835a7a70663ebdd GIT binary patch literal 1752 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 literal 0 HcmV?d00001 diff --git a/public/star 1.svg b/public/star 1.svg new file mode 100644 index 0000000..27ae86e --- /dev/null +++ b/public/star 1.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/globals.css b/src/app/globals.css index 6b717ad..ad428af 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -9,8 +9,8 @@ @media (prefers-color-scheme: dark) { :root { - --background: #0a0a0a; - --foreground: #ededed; + --background: #EEEEEE; + --foreground: #232931; } } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index f7fa87e..b97f84f 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,5 +1,5 @@ import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; +import { Geist, Geist_Mono, Space_Grotesk, Inter } from "next/font/google"; import "./globals.css"; const geistSans = Geist({ @@ -12,6 +12,16 @@ const geistMono = Geist_Mono({ subsets: ["latin"], }); +const spaceGrotesk = Space_Grotesk({ + variable: "--font-space-grotesk", + subsets: ["latin"], +}); + +const inter = Inter({ + variable: "--font-inter", + subsets: ["latin"], +}); + export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", @@ -25,7 +35,7 @@ export default function RootLayout({ return ( {children} diff --git a/src/app/page.tsx b/src/app/page.tsx index 3eee014..4f34d7b 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,101 +1,14 @@ -import Image from "next/image"; +// pages/index.js +import Header from "@/component/Header"; +import Head from "next/head"; +import LandingPage from "./pages/LandingPage/LandingPage"; export default function Home() { return ( -
-
- Next.js logo -
    -
  1. - Get started by editing{" "} - - src/app/page.tsx - - . -
    2. -
  2. Save and see your changes instantly.
    3. -
- - -
- -
+ <> +
+ +
+ ); } diff --git a/src/app/pages/LandingPage/LandingPage.tsx b/src/app/pages/LandingPage/LandingPage.tsx new file mode 100644 index 0000000..7490183 --- /dev/null +++ b/src/app/pages/LandingPage/LandingPage.tsx @@ -0,0 +1,234 @@ +import Header from '@/component/Header'; +import Head from "next/head"; +import React from 'react' +import { BiArrowBack } from 'react-icons/bi'; +import { FaArrowRight } from 'react-icons/fa'; + +const LandingPage = () => { + return ( + <> + + SocialSphere + + + +
+ {/* Navbar */} +
+ + {/* Hero Section */} +
+
+
+
+ Empowering +
+ +

+ Communities +

+
+ Through +
+
+ Decentralization +
+
+
+

+ Are you new here? +

+ +
+ + {/* Features */} +
+ {[ + { + text: "Seamless DAO templates with voting and secure fund management for communities.", + image: "/seamless.png", + }, + { + text: "Empower groups with roles, proposal boards, and financial tools for clear governance.", + image: "/governance-tools.svg", + }, + { + text: "Simplify decisions and funds with stablecoins, multi-sig wallets, and user-friendly tools.", + image: "/simplify.png", + }, + ].map((feature, index) => ( +
+

+ {feature.text} +

+ {`Feature +
+ ))} +
+ + {/* about us */} +
+

+ About +

+

+ Team of product and brand designers that are really passionate about + blockchain technology and good design. We are not just UI freaks! We + advocate users for better product experience and common sense. +

+

+ More About us + +

+
+ + {/* Roadmap */} +
+

+ Roadmap +

+

+ Our roadmap outlines a clear path to enhance SocialSphere, focusing + on user-friendly features, global accessibility, and community + growth. Together, we'll revolutionize how communities collaborate, + govern, and thrive. +

+ +
+ {[ + { + quarter: "Q1", + quarterImage: "/q1.svg", + text: "Q1: Launch MVP and onboard users.", + id: 1, + image: "/line 5.svg", + }, + { + quarter: "Q2", + quarterImage: "/star 1.svg", + + text: "Q2: Add features and enhance accessibility.", + id: 2, + image: "/line 6.svg", + }, + { + quarter: "Q3", + quarterImage: "/star 1.svg", + + text: "Q3: Grow partnerships and user engagement.", + id: 3, + image: "/line 7.svg", + }, + { + quarter: "Q4", + quarterImage: "/star 1.svg", + + text: "Q4: Optimize tools and expand capabilities.", + id: 4, + image: "/line 8.svg", + }, + { + quarter: "Q5", + quarterImage: "/star 1.svg", + + text: "Q5: Scale globally and integrate feedback.", + id: 5, + image: "/line 9.svg", + }, + { + quarter: "Q6", + quarterImage: "/stars 2.svg", + + text: "Q6: Innovate advanced features for communities.", + id: 6, + }, + ].map((step, index) => ( +
+ {/* Curved SVG Line */} + {index < 5 && ( +
+ + + +
+ )} + + {/* Step Quarter */} +
+ {`Quarter +
+ {`Feature + + {/* Step Description */} +
+

+ {step.text} +

+
+
+ ))} +
+
+
+ + ); +} + +export default LandingPage \ No newline at end of file diff --git a/src/component/Header.tsx b/src/component/Header.tsx new file mode 100644 index 0000000..02d310e --- /dev/null +++ b/src/component/Header.tsx @@ -0,0 +1,34 @@ +// components/Header.js +import React from "react"; + +const Header = () => { + return ( +
+
+ Logo +

+ SocialSphere +

+
+ + +
+ ); +}; + +export default Header; diff --git a/tailwind.config.ts b/tailwind.config.ts index 109807b..326057d 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -12,6 +12,58 @@ export default { background: "var(--background)", foreground: "var(--foreground)", }, + fontFamily: { + sans: [ + "var(--font-geist-sans)", + "ui-sans-serif", + "system-ui", + "-apple-system", + "BlinkMacSystemFont", + "Segoe UI", + "Roboto", + "Helvetica Neue", + "Arial", + "Noto Sans", + "sans-serif", + ], + mono: [ + "var(--font-geist-mono)", + "ui-monospace", + "SFMono-Regular", + "Menlo", + "Monaco", + "Consolas", + "Liberation Mono", + "Courier New", + "monospace", + ], + space: [ + "var(--font-space-grotesk)", + "ui-sans-serif", + "system-ui", + "-apple-system", + "BlinkMacSystemFont", + "Segoe UI", + "Roboto", + "Helvetica Neue", + "Arial", + "Noto Sans", + "sans-serif", + ], + inter: [ + "var(--font-inter)", + "ui-sans-serif", + "system-ui", + "-apple-system", + "BlinkMacSystemFont", + "Segoe UI", + "Roboto", + "Helvetica Neue", + "Arial", + "Noto Sans", + "sans-serif", + ], + }, }, }, plugins: [],