Skip to content

Commit

Permalink
Merge pull request #61 from RobinNagpal/dawood/insurance-images
Browse files Browse the repository at this point in the history
Added life insurance related images
  • Loading branch information
RobinNagpal authored Dec 18, 2023
2 parents 57046b7 + 9314b34 commit 2ef8e60
Show file tree
Hide file tree
Showing 8 changed files with 33 additions and 177 deletions.
53 changes: 7 additions & 46 deletions src/components/home/LifeInsure/components/AppDemo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@ import clsx from 'clsx';
import { motion, useInView, useMotionValue } from 'framer-motion';

import { AppScreen } from './AppScreen';
import Lottie from 'lottie-react';
import DeveloperLottie from '../../../home/DefaultHome/developer-lottie.json';
import Image from 'next/image';
import Home from '@/images/lifeInsure/images/home.png';

const prices = [
997.56, 944.34, 972.25, 832.4, 888.76, 834.8, 805.56, 767.38, 861.21, 669.6, 694.39, 721.32, 694.03, 610.1, 502.2, 549.56, 611.03, 583.4, 610.14, 660.6,
Expand Down Expand Up @@ -137,53 +141,10 @@ export function AppDemo() {

return (
<AppScreen>
<Lottie animationData={DeveloperLottie} loop={true} className="max-h-52" />

<AppScreen.Body>
<div className="p-4">
<div className="flex gap-2">
<div className="text-xs leading-6">Tailwind Labs, Inc.</div>
<div className="text-sm">$CSS</div>
<svg viewBox="0 0 24 24" className="ml-auto h-6 w-6" fill="none">
<path d="M5 12a7 7 0 1 1 14 0 7 7 0 0 1-14 0ZM12 9v6M15 12H9" stroke="#171717" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
<div className="mt-3 border-t border-gray-200 pt-5">
<div className="flex items-baseline gap-2">
<div className="text-2xl tabular-nums tracking-tight">{activeValue.toFixed(2)}</div>
<div className="text-sm">USD</div>
{percentageChange && (
<div className={clsx('ml-auto text-sm tabular-nums tracking-tight', percentageChange >= 0 ? 'text-cyan-500' : 'text-gray-500')}>
{`${percentageChange >= 0 ? '+' : ''}${percentageChange.toFixed(2)}%`}
</div>
)}
</div>
<div className="mt-6 flex gap-4 text-xs">
<div>1D</div>
<div>5D</div>
<div className="font-semibold">1M</div>
<div>6M</div>
<div>1Y</div>
<div>5Y</div>
</div>
<div className="mt-3 rounded-lg bg-gray-50 ring-1 ring-inset ring-black/5">
<Chart width={286} height={208} paddingX={16} paddingY={32} activePointIndex={activePointIndex} onChangeActivePointIndex={setActivePointIndex} />
</div>
<div className="mt-4 rounded-lg bg-cyan-500 px-4 py-2 text-center text-sm font-semibold">Trade</div>
<div className="mt-3 divide-y divide-gray-100 text-sm">
<div className="flex justify-between py-1">
<div className="">Open</div>
<div className="font-medium">6,387.55</div>
</div>
<div className="flex justify-between py-1">
<div className="">Closed</div>
<div className="font-medium">6,487.09</div>
</div>
<div className="flex justify-between py-1">
<div className="t">Low</div>
<div className="font-medium">6,322.01</div>
</div>
</div>
</div>
</div>
<Image src={Home} alt="Home" />
</AppScreen.Body>
</AppScreen>
);
Expand Down
23 changes: 12 additions & 11 deletions src/components/home/LifeInsure/components/AppScreen.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,19 @@
import { forwardRef } from 'react';
import clsx from 'clsx';
import Image from 'next/image';

function Logo(props: React.ComponentPropsWithoutRef<'svg'>) {
function Logo(props: React.ComponentPropsWithoutRef<'div'>) {
return (
<svg viewBox="0 0 79 24" fill="none" aria-hidden="true" {...props}>
<path
d="M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12ZM2.4 12a9.004 9.004 0 0 0 6.055 8.507c1.565.542 2.945-.85 2.945-2.507V6c0-1.657-1.38-3.049-2.945-2.507A9.004 9.004 0 0 0 2.4 12Z"
fill="#06B6D4"
/>
<path
d="M33.004 17V6.818h3.818c.783 0 1.439.146 1.97.438.533.291.935.692 1.207 1.203.275.507.413 1.084.413 1.73 0 .653-.138 1.233-.413 1.74a2.948 2.948 0 0 1-1.218 1.198c-.537.288-1.198.433-1.983.433h-2.531v-1.517h2.282c.457 0 .832-.08 1.124-.238.291-.16.507-.378.646-.657.142-.278.214-.598.214-.96 0-.36-.072-.679-.214-.954a1.452 1.452 0 0 0-.651-.641c-.292-.156-.668-.234-1.129-.234h-1.69V17h-1.845Zm12.152.15c-.746 0-1.392-.165-1.939-.493a3.343 3.343 0 0 1-1.273-1.377c-.298-.59-.447-1.28-.447-2.068 0-.79.15-1.48.447-2.073a3.335 3.335 0 0 1 1.273-1.383c.547-.328 1.193-.492 1.94-.492.745 0 1.391.164 1.938.492.547.329.97.79 1.268 1.383.301.593.452 1.284.452 2.073 0 .789-.15 1.478-.452 2.068a3.309 3.309 0 0 1-1.268 1.377c-.547.328-1.193.492-1.939.492Zm.01-1.443c.404 0 .742-.11 1.014-.333.272-.225.474-.527.607-.905.136-.377.204-.798.204-1.262 0-.468-.068-.89-.204-1.268a2.007 2.007 0 0 0-.607-.91c-.272-.225-.61-.338-1.014-.338-.414 0-.759.113-1.034.338a2.041 2.041 0 0 0-.612.91 3.81 3.81 0 0 0-.198 1.268c0 .464.066.885.198 1.262.136.378.34.68.612.905.275.222.62.333 1.034.333Zm8.508 1.442c-.763 0-1.417-.167-1.964-.502a3.352 3.352 0 0 1-1.258-1.387c-.292-.593-.437-1.276-.437-2.048 0-.776.149-1.46.447-2.054a3.34 3.34 0 0 1 1.263-1.392c.547-.334 1.193-.502 1.939-.502.62 0 1.168.115 1.645.343.48.226.864.546 1.149.96.285.41.447.891.487 1.441h-1.72a1.644 1.644 0 0 0-.497-.92c-.259-.248-.605-.372-1.04-.372-.367 0-.69.1-.969.298-.278.196-.495.478-.651.845-.153.368-.229.81-.229 1.323 0 .52.076.968.229 1.342.152.371.366.658.641.86.279.2.605.298.98.298.265 0 .502-.05.71-.149.213-.102.39-.25.532-.442.143-.192.24-.426.294-.701h1.72a2.999 2.999 0 0 1-.477 1.437c-.275.414-.65.739-1.124.974-.474.232-1.03.348-1.67.348Zm6.39-2.545-.006-2.173h.289l2.744-3.067h2.103l-3.376 3.758h-.372l-1.383 1.482ZM58.422 17V6.818h1.8V17h-1.8Zm4.792 0-2.485-3.475 1.213-1.268L65.368 17h-2.153Zm6.245.15c-.766 0-1.427-.16-1.984-.478a3.233 3.233 0 0 1-1.278-1.362c-.298-.59-.447-1.285-.447-2.083 0-.786.149-1.475.447-2.069a3.384 3.384 0 0 1 1.263-1.392c.54-.334 1.175-.502 1.904-.502.47 0 .915.076 1.333.229.42.149.792.381 1.113.696.325.315.58.716.766 1.203.186.484.278 1.06.278 1.73v.552h-6.259v-1.213h4.534a1.935 1.935 0 0 0-.224-.92 1.625 1.625 0 0 0-.611-.641 1.719 1.719 0 0 0-.905-.234c-.368 0-.691.09-.97.269a1.848 1.848 0 0 0-.65.696c-.153.285-.231.598-.234.94v1.058c0 .444.08.825.243 1.144.163.315.39.556.681.726.292.165.634.248 1.025.248.261 0 .498-.036.71-.11.213-.075.397-.187.552-.332.156-.146.274-.327.353-.542l1.68.189a2.62 2.62 0 0 1-.606 1.163 2.958 2.958 0 0 1-1.133.766c-.461.179-.988.268-1.581.268Zm8.731-7.786v1.392h-4.39V9.364h4.39Zm-3.306-1.83h1.8v7.17c0 .241.036.427.109.556a.59.59 0 0 0 .298.258c.123.047.259.07.408.07.113 0 .215-.008.308-.025.096-.016.17-.031.219-.045l.303 1.407c-.096.034-.233.07-.412.11-.176.04-.392.063-.647.07a2.934 2.934 0 0 1-1.218-.204 1.895 1.895 0 0 1-.86-.706c-.209-.319-.311-.716-.308-1.194V7.534Z"
fill="#fff"
/>
</svg>
<div className="font-bold">
{/* <Image
className="block h-8 w-auto lg:hidden"
src={space?.avatar ? getCDNImageUrl(space.avatar) : 'https://tailwindui.com/img/logos/mark.svg'}
alt="Your Company"
width={50}
height={50}
/> */}
<div>DoDAO</div>
</div>
);
}

Expand Down
134 changes: 14 additions & 120 deletions src/components/home/LifeInsure/components/PrimaryFeatures.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@ import { CircleBackground } from './CircleBackground';
import { Container } from './Container';
import { PhoneFrame } from './PhoneFrame';
import { DiageoLogo, LaravelLogo, MirageLogo, ReversableLogo, StatamicLogo, StaticKitLogo, TransistorLogo, TupleLogo } from './StockLogos';
import Image from 'next/image';
import Tidbits from '@/images/lifeInsure/images/tidbits.png';
import Quizzes from '@/images/lifeInsure/images/quiz.png';
import Shorts from '@/images/lifeInsure/images/shorts.png';

const MotionAppScreenHeader = motion(AppScreen.Header);
const MotionAppScreenBody = motion(AppScreen.Body);
Expand Down Expand Up @@ -155,26 +159,12 @@ function InviteScreen(props: ScreenProps) {
return (
<AppScreen className="w-full">
<MotionAppScreenHeader {...(props.animated ? headerAnimation : {})}>
<AppScreen.Title>Invite people</AppScreen.Title>
<AppScreen.Subtitle>
Get tips <span className="">5s sooner</span> for every invite.
</AppScreen.Subtitle>
<AppScreen.Title>Step-by-Step Tidbits</AppScreen.Title>
<AppScreen.Subtitle>Each tidbit crafted for better learning</AppScreen.Subtitle>
</MotionAppScreenHeader>

<MotionAppScreenBody {...(props.animated ? { ...bodyAnimation, custom: props.custom } : {})}>
<div className="px-4 py-6">
<div className="space-y-6">
{[
{ label: 'Full name', value: 'Albert H. Wiggin' },
{ label: 'Email address', value: '[email protected]' },
].map((field) => (
<div key={field.label}>
<div className="text-sm">{field.label}</div>
<div className="mt-2 border-b border-gray-200 pb-2 text-sm">{field.value}</div>
</div>
))}
</div>
<div className="mt-6 rounded-lg bg-cyan-500 px-3 py-2 text-center text-sm font-semibold">Invite person</div>
</div>
<Image src={Tidbits} alt="Tidbits" />
</MotionAppScreenBody>
</AppScreen>
);
Expand All @@ -184,81 +174,11 @@ function StocksScreen(props: ScreenProps) {
return (
<AppScreen className="w-full">
<MotionAppScreenHeader {...(props.animated ? headerAnimation : {})}>
<AppScreen.Title>Stocks</AppScreen.Title>
<AppScreen.Subtitle>March 9, 2022</AppScreen.Subtitle>
<AppScreen.Title>Short Videos</AppScreen.Title>
<AppScreen.Subtitle>1 minute videos to summarize the concepts</AppScreen.Subtitle>
</MotionAppScreenHeader>
<MotionAppScreenBody {...(props.animated ? { ...bodyAnimation, custom: props.custom } : {})}>
<div className="divide-y divide-gray-100">
{[
{
name: 'Laravel',
price: '4,098.01',
change: '+4.98%',
color: '#F9322C',
logo: LaravelLogo,
},
{
name: 'Tuple',
price: '5,451.10',
change: '-3.38%',
color: '#5A67D8',
logo: TupleLogo,
},
{
name: 'Transistor',
price: '4,098.41',
change: '+6.25%',
color: '#2A5B94',
logo: TransistorLogo,
},
{
name: 'Diageo',
price: '250.65',
change: '+1.25%',
color: '#3320A7',
logo: DiageoLogo,
},
{
name: 'StaticKit',
price: '250.65',
change: '-3.38%',
color: '#2A3034',
logo: StaticKitLogo,
},
{
name: 'Statamic',
price: '5,040.85',
change: '-3.11%',
color: '#0EA5E9',
logo: StatamicLogo,
},
{
name: 'Mirage',
price: '140.44',
change: '+9.09%',
color: '#16A34A',
logo: MirageLogo,
},
{
name: 'Reversable',
price: '550.60',
change: '-1.25%',
color: '#8D8D8D',
logo: ReversableLogo,
},
].map((stock) => (
<div key={stock.name} className="flex items-center gap-4 px-4 py-3">
<div className="flex-none rounded-full" style={{ backgroundColor: stock.color }}>
<stock.logo className="h-10 w-10" />
</div>
<div className="flex-auto text-sm">{stock.name}</div>
<div className="flex-none text-right">
<div className="text-sm font-medium">{stock.price}</div>
<div className={clsx('text-xs leading-5', stock.change.startsWith('+') ? '' : '')}>{stock.change}</div>
</div>
</div>
))}
</div>
<Image src={Shorts} alt="Shorts" />
</MotionAppScreenBody>
</AppScreen>
);
Expand All @@ -268,37 +188,11 @@ function InvestScreen(props: ScreenProps) {
return (
<AppScreen className="w-full">
<MotionAppScreenHeader {...(props.animated ? headerAnimation : {})}>
<AppScreen.Title>Buy $LA</AppScreen.Title>
<AppScreen.Subtitle>
<span className="">$34.28</span> per share
</AppScreen.Subtitle>
<AppScreen.Title>Interactive Quizzes</AppScreen.Title>
<AppScreen.Subtitle>Each tidbit is followed by a quick quiz</AppScreen.Subtitle>
</MotionAppScreenHeader>
<MotionAppScreenBody {...(props.animated ? { ...bodyAnimation, custom: props.custom } : {})}>
<div className="px-4 py-6">
<div className="space-y-4">
{[
{ label: 'Number of shares', value: '100' },
{
label: 'Current market price',
value: (
<div className="flex">
$34.28
<svg viewBox="0 0 24 24" fill="none" className="h-6 w-6">
<path d="M17 15V7H9M17 7 7 17" stroke="#06B6D4" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
),
},
{ label: 'Estimated cost', value: '$3,428.00' },
].map((item) => (
<div key={item.label} className="flex justify-between border-b border-gray-100 pb-4">
<div className="text-sm">{item.label}</div>
<div className="text-sm font-semibold">{item.value}</div>
</div>
))}
<div className="rounded-lg bg-cyan-500 px-3 py-2 text-center text-sm font-semibold">Buy shares</div>
</div>
</div>
<Image src={Quizzes} alt="Quizzes" />
</MotionAppScreenBody>
</AppScreen>
);
Expand Down
Binary file added src/images/lifeInsure/images/content.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/lifeInsure/images/home.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/lifeInsure/images/quiz.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/lifeInsure/images/shorts.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/lifeInsure/images/tidbits.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.